/* ==========================================================================
   Ouroboros — website design system
   Register: a technical drawing. Light "ground" pages, structure from space and tone,
   numbered section labels, tabular numerals, one paper mat for product
   media. Charcoal at most twice per page. One emerald accent phrase per
   headline (handover §8). No gradients as decoration, no glows, no blur.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see assets/fonts/OFL-*.txt) ---- */
@font-face {
  font-family: "Outfit Variable";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Outfit Variable";
  src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Inter Variable";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Readex Pro Variable";
  src: url("../fonts/readex-pro-arabic-wght-normal.woff2") format("woff2");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Brand palette (handover §8) */
  --ground: #F2F3F1;        /* page background */
  --paper: #FAFAF8;         /* cards, image mats */
  --hairline: #DCDFDA;      /* borders inside product fragments only */
  --charcoal: #1C1D1C;      /* headings, logo */
  --body: #4A4F4B;          /* body text */
  --muted: #6B706C;         /* secondary text */
  --emerald: #254E35;       /* the one accent */
  --emerald-tint: #E4ECE6;  /* rare fills */
  --step: #E7EAE5;          /* one tone below the ground: fills instead of lines */
  --step-dark: #2A2D2A;     /* the same step on charcoal */
  --tint-on-dark: #A8C7B2;  /* accent on charcoal */

  /* Derived neutrals, all biased toward the emerald hue */
  --ink-faint: #C2C7C1;     /* idle nodes, empty dots */
  --ink-unlit: #878D88;     /* unlit statement words: 3:1 on ground, still well apart from charcoal */
  --track: #E5E8E3;         /* bar tracks */
  --hair-strong: #C9CEC8;   /* hover borders */
  --white: #FFFFFF;
  --dark-body: #B4BAB5;
  --dark-muted: #8A908B;
  --dark-line: #343734;
  --dark-raise: #262826;

  --shadow-soft: 0 1px 2px rgb(28 29 28 / 0.04), 0 22px 44px -28px rgb(28 29 28 / 0.22);
  --shadow-lift: 0 1px 2px rgb(28 29 28 / 0.05), 0 36px 72px -36px rgb(28 29 28 / 0.32);

  --radius: 16px;
  --radius-inner: 10px;

  --font-display: "Outfit Variable", Outfit, ui-sans-serif, system-ui, sans-serif;
  --font-text: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --track-display: -0.022em;
  --track-hero: -0.03em;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --maxw: 1200px;
  --maxw-wide: 1360px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --nav-h: 64px;
  --section-y: clamp(88px, 11vw, 160px);
  --label-gap: clamp(28px, 4vw, 48px);

  color-scheme: light;
}

/* Arabic is a joined script: never track it */
:lang(ar) { letter-spacing: 0 !important; }
:lang(ar) {
  --font-display: "Readex Pro Variable", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
  --track-display: 0;
  --track-hero: 0;
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  background: var(--ground);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Cross-document view transitions: a short crossfade between pages.
     The navigation bar keeps its place through the transition. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.16s; }
  ::view-transition-new(root) { animation-duration: 0.26s; }
  .nav { view-transition-name: site-nav; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-size-adjust: 0.545;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:lang(ar) body,
body:lang(ar) { font-size-adjust: none; line-height: 1.8; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  text-wrap: balance;
  font-size-adjust: none;
}
:lang(ar) :is(h1, h2, h3, h4) { line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
dl, dd { margin: 0; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

em.accent, .accent { font-style: normal; color: var(--emerald); }
.on-dark em.accent, .on-dark .accent { color: var(--tint-on-dark); }

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--tint-on-dark); }

::selection { background: var(--emerald-tint); color: var(--charcoal); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed;
  inset-inline-start: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- Layout ------------------------------------------------------- */
.wrap {
  box-sizing: content-box;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap--wide { max-width: var(--maxw-wide); }
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(64px, 8vw, 112px); }
.section + .section--flush-top { padding-top: 0; }

.on-dark {
  background: var(--charcoal);
  color: var(--dark-body);
  --hairline: var(--dark-line);
}
.on-dark :is(h1, h2, h3, h4) { color: var(--paper); }

/* ---------- Type scale --------------------------------------------------- */
.t-hero {
  font-size: clamp(2.75rem, 6.1vw, 5.625rem);
  line-height: 0.98;
  letter-spacing: var(--track-hero);
}
.t-display {
  font-size: clamp(2.25rem, 4.9vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--track-hero);
}
.t-h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.04; }
.t-h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.t-h4 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; }
.t-lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--body); }
.on-dark .t-lede { color: var(--dark-body); }
.t-small { font-size: 0.9375rem; line-height: 1.55; }
.t-micro { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.on-dark .t-micro { color: var(--dark-muted); }
:lang(ar) .t-hero, :lang(ar) .t-display { line-height: 1.22; }
:lang(ar) .t-hero { font-size: clamp(2.125rem, 5.4vw, 5rem); }
.num { font-variant-numeric: tabular-nums; }

.measure { max-width: 60ch; }
.stack-sm > * + * { margin-top: 12px; }
.stack-md > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }


/* Section heading block */
.head {
  display: grid;
  gap: 20px;
  max-width: 820px;
  margin-bottom: clamp(44px, 6vw, 80px);
}
.head--split {
  max-width: none;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(20px, 5vw, 80px);
}
.head--split .t-lede { max-width: 40ch; }
.head--split .t-h2 { max-width: 16ch; }
@media (max-width: 900px) {
  .head--split { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Buttons & links --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn .arr { width: 16px; height: 16px; flex: none; transition: transform 0.45s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
[dir="rtl"] .btn .arr, [dir="rtl"] .link .arr { scale: -1 1; }
[dir="rtl"] .btn:hover .arr { transform: translateX(-3px); }

.btn--primary { background: var(--charcoal); color: var(--paper); }
.btn--primary:hover { background: var(--emerald); }
.btn--ghost { background: var(--step); color: var(--charcoal); }
.btn--ghost:hover { background: var(--hairline); }
.btn--light { background: var(--paper); color: var(--charcoal); }
.btn--light:hover { background: var(--tint-on-dark); }
.btn--ghost-dark { background: var(--step-dark); color: var(--paper); }
.btn--ghost-dark:hover { background: #363936; }
.btn--sm { min-height: 38px; padding-inline: 16px; font-size: 0.8125rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--charcoal);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size 0.5s var(--ease);
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }
[dir="rtl"] .link { background-position: 100% 100%; }
.link .arr { width: 16px; height: 16px; transition: transform 0.45s var(--ease); }
.link:hover .arr { transform: translateX(3px); }
[dir="rtl"] .link:hover .arr { transform: translateX(-3px); }
.on-dark .link { color: var(--paper); }

/* ---------- Brand lockup ------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--charcoal);
  text-decoration: none;
  line-height: 1;
}
.brand__logo { width: 132px; height: auto; flex: none; color: currentColor; }
.on-dark .brand { color: var(--paper); }

/* ---------- Navigation --------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(242 243 241 / 0);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-scrolled,
.menu-open .nav,
html:not(.js) .nav {
  background: var(--ground);
}
.nav__inner {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}
.nav__links a {
  position: relative;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -7px;
  height: 1px;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
[dir="rtl"] .nav__links a::after { transform-origin: right; }
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--charcoal); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__lang { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif; }
.nav__lang[lang="en"] { font-family: var(--font-text); }
.nav__cta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.menu-btn span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--ground);
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease), visibility 0s;
}
.menu > .wrap { width: 100%; max-width: none; box-sizing: border-box; }
.menu__links { display: grid; }
.menu__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: var(--track-display);
  color: var(--charcoal);
  text-decoration: none;
  line-height: 1.1;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: 0.04s; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: 0.08s; }
.menu.is-open .menu__links li:nth-child(4) a { transition-delay: 0.12s; }
.menu.is-open .menu__links li:nth-child(5) a { transition-delay: 0.16s; }
.menu.is-open .menu__links li:nth-child(6) a { transition-delay: 0.2s; }
.menu__foot { display: grid; gap: 14px; }
.menu__foot .btn { width: 100%; }
.menu__foot p { font-size: 0.8125rem; color: var(--muted); }
.menu-open, .menu-open body { overflow: hidden; }

@media (max-width: 960px) {
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__links { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 420px) {
  .nav__cta .btn { display: none; }
}
@media (min-width: 961px) {
  .menu { display: none; }
}

/* Page sub-navigation (inner pages) */
.subnav {
  position: sticky;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index: 40;
  background: var(--ground);
}
.subnav__inner {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px clamp(18px, 2.4vw, 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__title { font-size: 0.8125rem; font-weight: 600; color: var(--charcoal); white-space: nowrap; padding-inline-end: clamp(10px, 2vw, 24px); }
.subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 48px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.subnav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--charcoal);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.subnav a:hover, .subnav a[aria-current="true"] { color: var(--charcoal); }
.subnav a[aria-current="true"]::after { transform: scaleX(1); }
.js .subnav { display: block; }
html:not(.js) .subnav { position: static; }
@media (max-width: 720px) { .subnav__title { display: none; } }

/* ---------- Hero --------------------------------------------------------- */
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(40px, 6vw, 80px)); }
/* Two short sentences, one to a line, across the full width; the description
   and the actions sit in a row underneath. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.hero .hero__title { max-width: none; font-size: clamp(1.75rem, 8.6vw, 5.625rem); }
.hero__title .accent { display: block; }
:lang(ar) .hero .hero__title { font-size: clamp(1.5rem, 6.4vw, 5rem); }
.hero__aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.hero__desc { max-width: 40ch; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.45; color: var(--body); }
@media (max-width: 860px) {
  .hero__aside { align-items: start; }
}

/* ---------- Film (hero video) -------------------------------------------- */
.hero__media { margin-top: clamp(36px, 5vw, 64px); }
.film {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: clamp(6px, 0.7vw, 10px);
  background: var(--step);
  border-radius: var(--radius);
  transform-origin: 50% 0%;
  container: film / inline-size;
}
.film__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--ground);
  isolation: isolate;
}
.film__push { position: absolute; inset: 0; transform-origin: 50% 45%; }
.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.film.has-video video { opacity: 1; }
.film.has-video .poster { opacity: 0; }
.film__ctrl {
  position: absolute;
  inset-inline-end: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.film__ctrl:hover { background: var(--white); }
.film__ctrl:active { transform: scale(0.94); }
.film__ctrl svg { width: 13px; height: 13px; }
.film__ctrl .i-play { display: none; }
.film.is-paused .film__ctrl .i-play { display: block; }
.film.is-paused .film__ctrl .i-pause { display: none; }

/* The caption under the film */
.film__foot {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px 32px;
  flex-wrap: wrap;
}
.film__caption { min-height: 1.5em; }
.film__caption .when-video { display: none; }
.film.has-video + .film__foot .when-video { display: inline; }
.film.has-video + .film__foot .when-poster { display: none; }
@media (max-width: 720px) {
  .film__foot { flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .film {
      animation: film-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .film__push {
      animation: film-push linear both;
      animation-timeline: --film;
      animation-range: cover 0% cover 100%;
    }
    .film { view-timeline: --film block; }
  }
}
@keyframes film-in {
  from { transform: translateY(28px) scale(0.94); }
  to { transform: none; }
}
@keyframes film-push {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* ---------- Poster: the schematic that plays until the film arrives ------ */
.poster {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(14px, 2.6cqw, 36px) clamp(16px, 3cqw, 40px);
  color: var(--charcoal);
  transition: opacity 0.9s var(--ease);
  font-size: clamp(10px, 1.55cqw, 19px);
  line-height: 1.45;
}
.poster__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* The Ouroboros OS wordmark in the product scenes: the company wordmark with
   "OS" in emerald (a stand-in until the product's own SVG arrives). */
.poster__logo { display: block; height: clamp(11px, 1.46cqw, 19px); width: auto; }
.nowrap { white-space: nowrap; }
.poster__scene {
  --pgap: clamp(16px, 4cqw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 27fr) minmax(0, 25fr) minmax(0, 42fr);
  gap: var(--pgap);
  align-items: center;
  align-self: center;
  width: 100%;
  padding-block: clamp(8px, 1.4cqw, 20px);
}
.poster__line {
  position: relative;
  display: grid;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.6cqw, 21px);
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--charcoal);
  min-height: 1.3em;
  padding-inline-end: 64px;
}
.poster__line > span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.poster__line > span.is-on { opacity: 1; transform: none; }
.poster__line em { font-style: normal; color: var(--emerald); }

/* Scene parts */
.ps { position: relative; min-width: 0; }
.ps-who { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.8em; color: var(--muted); font-size: 0.86em; }
.ps-who i {
  width: 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--charcoal); color: var(--paper);
  font-style: normal; font-weight: 600; font-size: 0.8em;
}
.ps-who b { color: var(--charcoal); font-weight: 600; }
.ps-q {
  padding: 0.8em 1em;
  border-radius: 1em 1em 1em 0.3em;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--charcoal);
  font-weight: 500;
  line-height: 1.4;
}
[dir="rtl"] .ps-q { border-radius: 1em 1em 0.3em 1em; }
.ps-q .caret { display: inline-block; width: 1px; height: 1em; margin-inline-start: 2px; vertical-align: -0.15em; background: var(--charcoal); opacity: 0; }

.ps-docgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45em; }
.ps-doc {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: 0.45em;
  background: var(--white);
  padding: 0.5em;
  display: grid;
  align-content: start;
  gap: 0.3em;
  transition: opacity 0.7s var(--ease), border-style 0.7s, transform 0.7s var(--ease);
}
.ps-doc i { display: block; height: 0.2em; border-radius: 2px; background: var(--track); }
.ps-doc i:nth-child(1) { width: 70%; background: var(--hair-strong); }
.ps-doc i:nth-child(2) { width: 90%; }
.ps-doc i:nth-child(3) { width: 55%; }
.ps-doc svg { position: absolute; inset-inline-end: 0.35em; bottom: 0.35em; width: 0.9em; height: 0.9em; color: var(--emerald); }
.ps-filter {
  position: relative;
  height: 1px;
  margin-block: 0.9em 0.6em;
  background: var(--charcoal);
  transform-origin: left;
}
[dir="rtl"] .ps-filter { transform-origin: right; }
.ps-filter span {
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  padding-inline-end: 0.5em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
}
.ps-filter-note { margin-top: 1.4em; font-size: 0.8em; color: var(--muted); }

.ps-answer {
  padding: 1em 1.1em;
  border: 1px solid var(--hairline);
  border-radius: 0.9em;
  background: var(--white);
  color: var(--charcoal);
  line-height: 1.55;
}
.ps-answer .ps-label { display: block; margin-bottom: 0.4em; font-size: 0.78em; font-weight: 600; color: var(--muted); }
.ps-cite {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-inline: 0.15em;
  padding-inline: 0.3em;
  vertical-align: 0.1em;
  border-radius: 0.4em;
  background: var(--emerald-tint);
  color: var(--emerald);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}
.ps-srcs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.8em; }
.ps-srcs span {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3em 0.65em 0.3em 0.35em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.8em;
  color: var(--body);
  background: var(--paper);
  white-space: nowrap;
}
[dir="rtl"] .ps-srcs span { padding: 0.3em 0.35em 0.3em 0.65em; }
.ps-srcs b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 0.4em; background: var(--emerald-tint); color: var(--emerald); font-size: 0.85em; font-weight: 700; }
.ps-receipt {
  margin-top: 0.7em;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5em 1em;
  padding: 0.7em 1em;
  border: 1px solid var(--hairline);
  border-radius: 0.7em;
  background: var(--paper);
  font-size: 0.86em;
}
.ps-receipt .ps-label { grid-column: 1 / -1; font-size: 0.85em; font-weight: 600; color: var(--muted); }
.ps-sig { font-family: var(--font-data); font-size: 0.92em; color: var(--charcoal); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.ps-ok { display: inline-flex; align-items: center; gap: 0.4em; color: var(--charcoal); font-weight: 600; white-space: nowrap; }
.ps-ok svg { color: var(--emerald); }
.ps-ok svg { width: 1em; height: 1em; }

/* Connectors between the three columns */
.ps-docs::before, .ps-out::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(-1 * var(--pgap));
  width: var(--pgap);
  height: 1px;
  background: var(--hair-strong);
  transform-origin: left;
}
[dir="rtl"] .ps-docs::before, [dir="rtl"] .ps-out::before { transform-origin: right; }

/* Choreography (JS + motion). Each step class is added cumulatively. */
@media (prefers-reduced-motion: no-preference) {
  .js .poster .ps-ask, .js .poster .ps-docs, .js .poster .ps-answer, .js .poster .ps-receipt, .js .poster .ps-srcs,
  .js .poster .ps-cite, .js .poster .ps-ok {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .poster .ps-cite { transform: scale(0.5); transition-duration: 0.5s; }
  .js .poster .ps-docs::before, .js .poster .ps-out::before { transform: scaleX(0); transition: transform 0.8s var(--ease-io); }
  .js .poster .ps-filter { transform: scaleX(0); transition: transform 0.9s var(--ease-io); }
  .js .poster .ps-filter span { opacity: 0; transition: opacity 0.4s var(--ease) 0.5s; }
  .js .poster .ps-q .caret { animation: caret 0.9s steps(1) infinite; }
  .js .poster .ps-q .q-text { display: inline-block; max-width: 100%; }

  .js .poster.s1 .ps-ask { opacity: 1; transform: none; }
  .js .poster.s2 .ps-docs { opacity: 1; transform: none; }
  .js .poster.s2 .ps-docs::before { transform: scaleX(1); }
  .js .poster.s2 .ps-q .caret { opacity: 0; animation: none; }
  .js .poster.s3 .ps-filter { transform: scaleX(1); }
  .js .poster.s3 .ps-filter span { opacity: 1; }
  .js .poster.s4 .ps-doc.is-locked { opacity: 0.3; border-style: dashed; transform: translateY(-3px); }
  .js .poster.s5 .ps-answer { opacity: 1; transform: none; }
  .js .poster.s5 .ps-out::before { transform: scaleX(1); }
  .js .poster.s6 .ps-cite { opacity: 1; transform: none; }
  .js .poster.s6 .ps-cite:nth-of-type(2) { transition-delay: 0.18s; }
  .js .poster.s7 .ps-srcs { opacity: 1; transform: none; }
  .js .poster.s8 .ps-receipt { opacity: 1; transform: none; }
  .js .poster.s9 .ps-ok { opacity: 1; transform: none; }
  .js .poster.is-out .poster__scene { opacity: 0; transition: opacity 0.5s var(--ease); }
  .js .poster .poster__scene { transition: opacity 0.5s var(--ease); }
}
@keyframes caret { 50% { opacity: 1; } }
.ps-doc.is-locked { }
html:not(.js) .ps-doc.is-locked, .poster.is-static .ps-doc.is-locked { opacity: 0.3; border-style: dashed; }
html:not(.js) .ps-q .caret { display: none; }

/* Narrow frames: a two-column scene, documents hidden */
@container film (max-width: 720px) {
  .poster { font-size: 11px; padding: 12px 14px; }
  .poster__scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); --pgap: 16px; padding-block: 4px; }
  .ps-docs { display: none; }
  .ps-who { display: none; }
  .ps-srcs { display: none !important; }
  .ps-receipt { grid-template-columns: minmax(0, 1fr); gap: 0.3em; padding: 0.55em 0.8em; margin-top: 0.5em; }
  .ps-receipt .ps-label { display: none; }
  .ps-ok { justify-self: start; }
  .poster__line { font-size: 12px; }
  .poster__logo { height: 11px; }
  .poster .tag { font-size: 0.6875rem; padding: 2px 8px; }
}
@container film (max-width: 460px) {
  .poster { padding: 10px 12px 8px; }
  .poster__scene { grid-template-columns: minmax(0, 1fr); --pgap: 0px; gap: 8px; }
  .ps-ask { display: none; }
  .ps-out::before { display: none; }
  .ps-answer { padding: 0.7em 0.9em; }
  .ps-receipt { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5em; padding: 0.45em 0.7em; margin-inline-end: 44px; }
  .ps-sig { font-size: 0.85em; }
  .ps-ok { font-size: 0.9em; padding: 0.2em 0.55em; }
  .poster__line { padding-inline-end: 56px; }
}

/* ---------- Reveal system (progressive enhancement) --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js [data-split] .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
  }
  .js [data-split] .w > span {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 1.1s var(--ease);
    transition-delay: calc(var(--wi, 0) * 30ms + var(--d, 0ms));
  }
  .js [data-split].is-in .w > span { transform: none; }

  /* Failsafe: if site.js never runs, show everything after a beat */
  .js:not(.motion-ready) [data-reveal],
  .js:not(.motion-ready) [data-split] .w > span {
    animation: failsafe 0.01s linear 2.5s forwards;
  }
}
@keyframes failsafe { to { opacity: 1; transform: none; } }

/* ---------- Statement (scroll-lit words) -------------------------------- */
.statement__text {
  max-width: 25em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.9vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-wrap: pretty;
  font-size-adjust: none;
}
:lang(ar) .statement__text { letter-spacing: 0; line-height: 1.5; }
.statement__text .word { transition: color 0.45s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .js .statement__text .word { color: var(--ink-unlit); }
  .js .statement__text .word.is-lit { color: var(--charcoal); }
}
.statement__foot { margin-top: clamp(36px, 5vw, 64px); }

/* ---------- Generic frame / stage --------------------------------------- */
.frame {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
}

/* ---------- Proof (pinned storytelling) --------------------------------- */
.proof { position: relative; }
.proof__rail {
  display: flex;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.proof__rail li {
  flex: 0 1 180px;
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.proof__rail li span { display: flex; gap: 10px; align-items: baseline; }
.proof__rail li::after {
  content: "";
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--charcoal), var(--charcoal)) no-repeat 0 0 / calc(var(--rp, 0) * 100%) 100%, var(--step);
}
[dir="rtl"] .proof__rail li::after { background-position: 100% 0, 0 0; }
.proof__rail li.is-active { color: var(--charcoal); }

.proof__items { display: grid; gap: clamp(88px, 12vw, 144px); }
.proof__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.proof__copy > * + * { margin-top: 20px; }
.proof__copy .t-h2 { font-size: clamp(2rem, 3.4vw, 3.125rem); }
.ticks { display: grid; gap: 12px; margin-top: 26px !important; }
.ticks li {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--body);
  max-width: 52ch;
}
.on-dark .ticks li { color: var(--dark-body); }

.stage {
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 100%;
  padding: clamp(20px, 2.6vw, 36px);
  overflow: hidden;
}

@media (min-width: 1024px) and (min-height: 700px) {
  .proof.is-pinnable { height: calc(100vh + 3 * 85vh); }
  .proof.is-pinnable .proof__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: center;
    padding-top: var(--nav-h);
  }
  .proof.is-pinnable .stage { max-height: calc(100vh - 240px); }
  .proof.is-pinnable .proof__items { gap: 0; }
  .proof.is-pinnable .proof__item {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
  }
  .proof.is-pinnable .proof__item.is-active { visibility: visible; pointer-events: auto; }
  .proof.is-pinnable .proof__copy > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .proof.is-pinnable .proof__item.is-active .proof__copy > * {
    opacity: 1;
    transform: none;
    transition-duration: 0.9s;
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .proof.is-pinnable .stage {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
  }
  .proof.is-pinnable .proof__item.is-active .stage {
    opacity: 1;
    transform: none;
    transition-duration: 0.9s;
    transition-delay: 0.1s;
  }
}
.proof:not(.is-pinnable) .proof__rail { display: none; }
@media (max-width: 860px) {
  .proof__item { grid-template-columns: minmax(0, 1fr); }
  .stage { aspect-ratio: auto; min-height: 420px; }
}

/* Scene building blocks ---------------------------------------------- */
.sc { position: relative; height: 100%; display: grid; align-content: center; gap: 14px; font-size: 0.875rem; }
.sc-q {
  justify-self: end;
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ground);
  color: var(--charcoal);
  font-weight: 500;
  line-height: 1.45;
}
[dir="rtl"] .sc-q { border-radius: 14px 14px 14px 4px; }
.sc-a {
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  color: var(--charcoal);
  line-height: 1.6;
}
.sc-a__label { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.cite {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-inline: 2px;
  padding-inline: 4px;
  vertical-align: 2px;
  border: 0;
  border-radius: 6px;
  background: var(--emerald-tint);
  color: var(--emerald);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
}
.cite:hover, .cite:focus-visible, .cite.is-hot { background: var(--emerald); color: var(--paper); }
.srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .srcs { grid-template-columns: minmax(0, 1fr); } }
.src {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--body);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.src.is-hot { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.src__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--charcoal); font-weight: 600; }
.src__n {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--emerald-tint);
  color: var(--emerald);
  font-size: 0.6875rem;
  font-weight: 700;
}
.src__meta { margin-inline-start: auto; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.hl {
  padding: 1px 2px;
  margin: -1px -2px;
  border-radius: 3px;
  background: linear-gradient(var(--emerald-tint), var(--emerald-tint)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--charcoal);
}
[dir="rtl"] .hl { background-position: 100% 0; }
.refusal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--hair-strong);
  border-radius: 12px;
  color: var(--charcoal);
  font-weight: 500;
}
.refusal svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.refusal small { margin-inline-start: auto; color: var(--muted); font-weight: 400; font-size: 0.75rem; }
/* The product's refusal notice: a title, then the fixed sentence (never translated) */
.notice { display: grid; gap: 2px; }
.notice b { font-weight: 600; color: var(--charcoal); }
.notice > span { font-weight: 400; color: var(--muted); font-size: 0.92em; }

/* Permissions scene */
.perm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.perm__col { display: grid; gap: 10px; align-content: start; }
.who { display: flex; align-items: center; gap: 10px; }
.who__av {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--charcoal); color: var(--paper);
  font-size: 0.6875rem; font-weight: 600;
}
.who__av--b { background: var(--hair-strong); color: var(--charcoal); }
.who b { display: block; font-size: 0.8125rem; color: var(--charcoal); line-height: 1.2; }
.who > div > span { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.3; }
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.doc {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--white);
  padding: 7px;
  display: grid;
  align-content: start;
  gap: 4px;
  transition: opacity 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.doc i { display: block; height: 3px; border-radius: 2px; background: var(--track); }
.doc i:nth-child(1) { width: 70%; background: var(--hair-strong); }
.doc i:nth-child(2) { width: 90%; }
.doc i:nth-child(3) { width: 55%; }
.doc__lock {
  position: absolute;
  inset-inline-end: 5px;
  bottom: 5px;
  width: 12px; height: 12px;
  color: var(--emerald);
}
.filter-line {
  position: relative;
  height: 1px;
  margin-block: 4px;
  background: var(--charcoal);
  transform-origin: left;
}
[dir="rtl"] .filter-line { transform-origin: right; }
.filter-line span {
  position: absolute;
  inset-inline-start: 0;
  top: -9px;
  padding-inline-end: 8px;
  background: var(--paper);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 18px;
}
.perm__ans {
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.8125rem;
  line-height: 1.5;
  min-height: 74px;
}
.perm__ans--none { background: transparent; border-style: dashed; border-color: var(--hair-strong); font-weight: 500; }
.perm__q { grid-column: 1 / -1; justify-self: center; max-width: 100%; text-align: center; border-radius: 14px; }
[dir="rtl"] .perm__q { border-radius: 14px; }

/* Approval scene */
.run { display: grid; gap: 8px; }
.step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font-weight: 500;
}
.step small { color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.chk {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hair-strong);
  display: grid; place-items: center;
  color: var(--paper);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.chk svg { width: 12px; height: 12px; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.5s var(--ease) 0.1s; }
.is-done > .chk, .is-done .chk { background: var(--emerald); border-color: var(--emerald); }
.is-done > .chk svg, .is-done .chk svg { stroke-dashoffset: 0; }
.step--wait .chk { border-style: dashed; }
.approval {
  margin-inline-start: 34px;
  padding: 14px 16px;
  border: 1px solid var(--charcoal);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
}
.approval__title { display: flex; align-items: center; gap: 8px; color: var(--charcoal); font-weight: 600; }
.approval__title svg { width: 16px; height: 16px; }
.approval__lead { font-size: 0.8125rem; color: var(--charcoal); font-weight: 500; }
.approval dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 0.8125rem; }
.approval dt { color: var(--muted); }
.approval dd { margin: 0; color: var(--charcoal); }
.approval__btns { display: flex; gap: 8px; justify-content: flex-end; }
.approval__btns button {
  display: inline-flex; align-items: center;
  height: 32px; padding-inline: 15px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--white);
  font: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.25s var(--ease), border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.approval__btns button:hover { border-color: var(--charcoal); }
.approval__btns button:active { transform: scale(0.96); }
.approval__btns button:disabled { cursor: default; transform: none; }
.approval__btns .yes:hover { background: var(--emerald); border-color: var(--emerald); }
.approval__btns .yes { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.run.is-approved .approval__btns .yes { background: var(--emerald); border-color: var(--emerald); }
.run.is-declined .approval__btns .no { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.run.is-approved .approval__btns .no, .run.is-declined .approval__btns .yes { opacity: 0.35; }
.run.is-declined .approval { border-color: var(--hair-strong); }
.step.is-skipped { color: var(--muted); }
.step [data-st] { transition: opacity 0.3s var(--ease); white-space: nowrap; }
.js .step[data-run-step]:not(.is-done) [data-st] { opacity: 0; }
.step .st-yes, .step .st-no, .step.is-done .st-wait, .step.is-skipped .st-wait { display: none; }
.step.is-done .st-yes, .step.is-skipped .st-no { display: inline; }
.step .st-wait { color: var(--charcoal); font-weight: 500; }
.approval__ask { font-size: 0.8125rem; line-height: 1.5; color: var(--charcoal); }
.step.is-skipped .chk { border-style: solid; }
.run__result { min-height: 1.5em; }
.audit-line { display: none; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 0.75rem; }
.audit-line svg { width: 14px; height: 14px; color: var(--emerald); flex: none; }
.audit-line--no svg { color: var(--muted); }
.run.is-approved .audit-line--yes, .run.is-declined .audit-line--no, html:not(.js) .audit-line--yes { display: flex; }
.again { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--charcoal); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--hair-strong); cursor: pointer; }
.again:hover { text-decoration-color: var(--charcoal); }

/* Scene choreography: hidden until the item is active (JS + motion only) */
@media (prefers-reduced-motion: no-preference) {
  .js .sc [data-t] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js .is-active .sc [data-t] {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--t) * 1ms);
  }
  .js .sc .hl { background-size: 0% 100%; transition: background-size 0.9s var(--ease); }
  .js .is-active .sc .hl { background-size: 100% 100%; transition-delay: calc(var(--t, 1500) * 1ms); }
  .js .sc .cite { transform: scale(0.4); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s var(--ease), background-color 0.3s, color 0.3s; }
  .js .is-active .sc .cite { transform: none; opacity: 1; transition-delay: calc(var(--t, 900) * 1ms), calc(var(--t, 900) * 1ms), 0s, 0s; }
  .js .sc .filter-line { transform: scaleX(0); transition: transform 0.9s var(--ease-io); }
  .js .is-active .sc .filter-line { transform: scaleX(1); transition-delay: calc(var(--t) * 1ms); }
  .js .is-active .sc .doc--locked.is-blocked { opacity: 0.28; border-style: dashed; transform: translateY(-4px); transition-delay: 1500ms; }
}
.doc--locked.is-blocked { opacity: 0.3; border-style: dashed; }

/* ---------- Receipt ------------------------------------------------------ */
.receipt-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.receipt {
  justify-self: end;
  width: 100%;
  max-width: 540px;
  --rp: clamp(22px, 2.6vw, 32px);
  padding: var(--rp);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--charcoal);
  font-size: 0.875rem;
  --hairline: #DCDFDA;
}
.receipt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); }
.receipt__head h3 { font-size: 1.375rem; color: var(--charcoal); }
.receipt__rows { margin: 0; padding-block: 18px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 16px; border-bottom: 1px solid var(--hairline); }
.receipt__rows dt { color: var(--muted); font-size: 0.8125rem; }
.receipt__rows dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--charcoal); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.receipt__rows .mono { font-family: var(--font-data); font-size: 0.8125rem; letter-spacing: 0.01em; }
:lang(ar) .receipt__rows dd.mono { direction: ltr; text-align: end; }
.sig { color: var(--charcoal); }
.receipt__checks { padding-top: 18px; display: grid; gap: 12px; }
.receipt__checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--muted); transition: color 0.4s var(--ease); }
.receipt__checks li.is-done { color: var(--charcoal); }
/* The result: one band across the foot of the receipt, grey while the checks
   run, emerald once the receipt is verified. */
.receipt__foot {
  margin: 24px calc(var(--rp) * -1) calc(var(--rp) * -1);
  padding: 16px var(--rp);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  background: var(--step);
  color: var(--muted);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.receipt.is-verified .receipt__foot { background: var(--emerald); color: var(--paper); }
.receipt__state { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 600; }
.receipt__state svg { width: 16px; height: 16px; flex: none; opacity: 0; transform: scale(0.6); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.receipt.is-verified .receipt__state svg { opacity: 1; transform: none; }
.receipt .when-busy, .receipt .when-verified, .receipt.is-checking .receipt__state .when-idle, .receipt.is-verified .when-idle { display: none; }
.receipt.is-checking .when-busy, .receipt.is-verified .when-verified { display: inline; }
.receipt.is-checking .receipt__btn { opacity: 0.4; pointer-events: none; }
.receipt__btn {
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  color: inherit;
  text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.receipt__btn:hover { opacity: 1; }
@media (max-width: 900px) {
  .receipt-grid { grid-template-columns: minmax(0, 1fr); }
  .receipt { justify-self: stretch; max-width: none; }
}

html:not(.js) .receipt__checks li { color: var(--charcoal); }
html:not(.js) .receipt .chk { background: var(--emerald); border-color: var(--emerald); }
html:not(.js) .receipt .chk svg { stroke-dashoffset: 0; }
html:not(.js) .receipt__foot { background: var(--emerald); color: var(--paper); }
html:not(.js) .receipt__state svg { opacity: 1; transform: none; }
html:not(.js) .receipt .when-idle { display: none; }
html:not(.js) .receipt .when-verified { display: inline; }
html:not(.js) .receipt__btn { display: none; }

/* ---------- The wall: the ouroboros around the stack ------------------- */
.wall {
  position: relative;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.6vw, 56px) clamp(24px, 3vw, 44px);
  margin-top: 28px;
}
/* The script draws the ouroboros from the logo around the stack (see the
   wall section in site.js): the logo's own bite at the top corner, the body
   at the logo's thickness and corner radius. */
.wall__snake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--charcoal); }
.wall__track { fill: none; stroke: none; }
.wall__body, .wall__tail, .wall__head { fill: currentColor; }
html:not(.js) .wall { border: 3px solid var(--charcoal); border-radius: 28px; }

.wall__title {
  position: absolute;
  top: 0;
  inset-inline-start: clamp(20px, 3.6vw, 56px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-inline: 12px;
  background: var(--ground);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin-inline-start: -12px;
}

.layers__list { position: relative; }
.layers__list::before,
.layers__list::after {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  margin-inline-start: -0.5px;
  background: var(--step);
}
.layers__list::after {
  background: var(--emerald);
  transform-origin: top;
  transform: scaleY(var(--lp, 1));
}
.layer {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(140px, 14rem) minmax(0, 1fr);
  gap: 8px clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding-block: 20px;
}
.layer__node {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 11px;
  height: 11px;
  margin-inline-start: 5px;
  border-radius: 50%;
  background: var(--ground);
  border: 1.5px solid var(--ink-faint);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.layer__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  letter-spacing: -0.015em;
  color: var(--charcoal);
  line-height: 1.2;
  transition: color 0.5s var(--ease);
}
.layer__desc { color: var(--body); font-size: 0.9375rem; line-height: 1.55; }
.layer.is-on .layer__node { background: var(--emerald); border-color: var(--emerald); transform: scale(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .js .layers__list::after { transform: scaleY(var(--lp, 0)); }
  .js .layer:not(.is-on) .layer__name { color: var(--muted); }
}
@media (max-width: 720px) {
  .layer { grid-template-columns: 21px minmax(0, 1fr); }
  .layer__desc { grid-column: 2; }
  .wall { padding-inline: 18px; }
  .wall__title { inset-inline-start: 18px; font-size: 1rem; gap: 8px; }
}

/* ---------- Panel: one paper sheet, two halves ------------------------- */
.panel {
  display: grid;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel--split { grid-template-columns: 1fr 1fr; }
.panel__half {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3.2vw, 44px);
  min-width: 0;
}
.panel__half .t-h3 { max-width: 20ch; }
.panel__half > p { max-width: 46ch; font-size: 0.9875rem; }
@media (max-width: 860px) {
  .panel--split { grid-template-columns: minmax(0, 1fr); }
}
.vig {
  margin-top: auto;
  position: relative;
  min-height: 250px;
  padding: 20px;
  border-radius: 12px;
  background: var(--ground);
  display: grid;
  align-content: center;
  gap: 10px;
  overflow: hidden;
}

.toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--white);
  font-size: 0.8125rem;
  color: var(--body);
}
.toast__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--emerald-tint); color: var(--emerald); }
.toast__icon svg { width: 15px; height: 15px; }
.toast b { display: block; color: var(--charcoal); font-weight: 600; font-size: 0.875rem; }
.toast__btns { display: flex; gap: 6px; margin-top: 10px; }
.toast__btns span {
  display: inline-flex; align-items: center; height: 28px; padding-inline: 12px;
  border-radius: 999px; border: 1px solid var(--hairline);
  font-size: 0.75rem; font-weight: 600; color: var(--charcoal);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.toast__btns .yes { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.vig.is-in .toast--a .yes { background: var(--emerald); border-color: var(--emerald); transition-delay: 1.5s; }
.vig__note { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted); }
.vig__note svg { width: 14px; height: 14px; color: var(--emerald); }
@media (prefers-reduced-motion: no-preference) {
  .js .vig--learn > * { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .js .vig--learn.is-in > * { opacity: 1; transform: none; }
  .js .vig--learn.is-in > :nth-child(2) { transition-delay: 0.5s; }
  .js .vig--learn.is-in > :nth-child(3) { transition-delay: 1.9s; }
}

/* White-label sign-in vignette: the product's sign-in card, before and after a rebrand */
.signin-page { display: grid; justify-items: center; gap: 12px; }
.signin {
  --brand: #2F6B4A;
  width: min(100%, 340px);
  padding: 26px 22px 20px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--white);
  display: grid;
  gap: 6px;
  text-align: center;
}
.vig.is-brand .signin { --brand: #166E64; }
.signin__logo { height: 30px; display: grid; place-items: center; margin-bottom: 10px; }
.signin__logo > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.signin__logo .our img { display: block; height: 17px; width: auto; }
.signin__logo .theirs { opacity: 0; transform: translateY(8px); }
.signin__logo .theirs i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #166E64; display: block; position: relative; }
.signin__logo .theirs i::after { content: ""; position: absolute; inset: 4px 6px 3px; border-radius: 6px 6px 0 0; border: 2px solid #166E64; border-bottom: 0; }
.signin__logo .theirs span { font-weight: 600; color: #134E48; font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vig.is-brand .signin__logo .our { opacity: 0; transform: translateY(-8px); }
.vig.is-brand .signin__logo .theirs { opacity: 1; transform: none; }
.wl { display: grid; }
.wl > [data-v] { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; }
.vig:not(.is-brand):not(.is-ar) .wl > [data-v="oe"],
.vig.is-brand:not(.is-ar) .wl > [data-v="te"],
.vig:not(.is-brand).is-ar .wl > [data-v="oa"],
.vig.is-brand.is-ar .wl > [data-v="ta"],
.vig:not(.is-ar) .wl > [data-v="e"],
.vig.is-ar .wl > [data-v="a"] { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease) 0.1s, visibility 0s; }
.wl [lang="ar"] { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif; }
.signin__title { font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--charcoal); letter-spacing: -0.01em; }
.signin__title [lang="ar"] { line-height: 1.6; }
.signin__tag { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.signin__btn {
  margin-top: 14px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--paper);
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.6s var(--ease);
}
.signin__btn svg { grid-row: 1; grid-column: 1; width: 17px; height: 17px; }
.signin__btn > [data-v] { grid-area: 1 / 2; justify-self: start; }
.signin__hint { margin-top: 6px; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.signin__credit { font-size: 0.75rem; color: var(--muted); }
.signin__credit > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.signin__credit img { display: block; height: 10px; width: auto; }
.signin__credit [lang="ar"] img { direction: ltr; }
.toggles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-inline: 12px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ground);
  color: var(--charcoal);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.toggle::before {
  content: "";
  width: 26px;
  height: 16px;
  border-radius: 999px;
  background: var(--hair-strong) radial-gradient(circle at 8px 50%, #fff 5px, transparent 5.5px);
  transition: background-color 0.35s var(--ease), background-position 0.35s var(--ease);
  background-position: 0 0;
  background-repeat: no-repeat;
}
.toggle[aria-pressed="true"]::before { background-color: var(--emerald); background-position: 10px 0; }
.toggle:hover { background: var(--step); }

/* ---------- Split (sticky headline + flowing column) --------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
@media (min-width: 901px) {
  .split > .split__sticky { position: sticky; top: calc(var(--nav-h) + 48px); }
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Figures: Sayqal numbers, one block each ---------------------- */
.figures { display: grid; gap: clamp(40px, 5vw, 64px); }
.figure { display: grid; gap: 18px; }
.figure__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.figure__name { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--charcoal); letter-spacing: -0.01em; }
.figure__big { display: flex; align-items: baseline; gap: 14px 18px; flex-wrap: wrap; }
.figure__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  font-size-adjust: none;
}
.figure__vs { font-size: 0.9375rem; color: var(--body); max-width: 32ch; }
.figure__job { font-size: 0.9375rem; color: var(--body); }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: minmax(96px, 8.5rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: 14px; font-size: 0.9375rem; }
.bar__label { color: var(--body); }
.bar__track { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar__fill {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  border-radius: inherit;
  background: var(--emerald);
  transform-origin: left;
  transition: transform 1.4s var(--ease) 0.2s;
}
[dir="rtl"] .bar__fill { transform-origin: right; }
.bar__fill--base { background: #9DA39E; }
/* A measured range (low to high): solid up to the low end, a lighter band up to the high end */
.bar__track:has(.bar__range) { position: relative; }
.bar__range {
  --c: var(--emerald);
  --band: color-mix(in srgb, var(--c) 38%, var(--track));
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: 0;
  width: calc(var(--b) * 1%);
  border-radius: inherit;
  background: linear-gradient(to right, var(--c) calc(var(--a) / var(--b) * 100%), var(--band) 0);
  transition: opacity 0.8s var(--ease) 0.3s;
}
[dir="rtl"] .bar__range { background: linear-gradient(to left, var(--c) calc(var(--a) / var(--b) * 100%), var(--band) 0); }
.bar__range--base { --c: #9DA39E; }
.bar__val { font-family: var(--font-display); font-weight: 500; color: var(--charcoal); font-size: 1rem; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dots-row { display: grid; grid-template-columns: minmax(96px, 8.5rem) minmax(0, 1fr) 4.5rem; align-items: center; gap: 14px; font-size: 0.9375rem; }
.dots { display: grid; grid-template-columns: repeat(var(--n, 17), minmax(0, 1fr)); gap: 4px; max-width: 360px; }
.dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--k, 0) * 35ms + 300ms);
}
.dots i.f { background: var(--emerald); border-color: var(--emerald); }
.dots i.p { border-color: var(--emerald); border-style: dashed; }
.dots--base i.f { background: #9DA39E; border-color: #9DA39E; }
@media (prefers-reduced-motion: no-preference) {
  .js .figure:not(.is-in) .bar__fill { transform: scaleX(0); }
  .js .figure:not(.is-in) .bar__range { opacity: 0; }
  .js .figure:not(.is-in) .dots i.f { background: transparent; border-color: var(--ink-faint); transform: scale(0.7); }
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.875rem; color: var(--body); }
.figures__note { font-size: 0.9375rem; color: var(--body); max-width: 56ch; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--emerald); }
.legend i.f { background: var(--emerald); }
.legend i.p { border-style: dashed; }
.legend i.e { border-color: var(--ink-faint); }

/* ---------- Sectors ------------------------------------------------------- */
.sectors { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.sector {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 8px clamp(16px, 3vw, 48px);
  align-items: baseline;
}
.sector__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}
.sector p { color: var(--body); font-size: 0.9875rem; }
@media (max-width: 720px) {
  .sector { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Language: Arabic as the proof ------------------------------ */
.lang { margin-block: clamp(48px, 7vw, 96px); }
.lang__sample {
  font-family: "Readex Pro Variable", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  font-weight: 500;
  font-size: clamp(2.75rem, 8.4vw, 7.5rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--charcoal);
  direction: rtl;
  text-align: right;
  text-wrap: balance;
}
.lang__gloss {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body);
}
[dir="ltr"] .lang__gloss { margin-inline-start: auto; }

/* ---------- Stats -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.stat { display: grid; align-content: start; gap: 12px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--track-hero);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  font-size-adjust: none;
}
.stat__num small { font-size: 0.42em; letter-spacing: -0.01em; margin-inline-start: 0.12em; }
.stat p { color: var(--body); font-size: 0.9375rem; }
.stat p.t-micro { color: var(--muted); font-size: 0.8125rem; }
.stat cite { font-style: normal; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA ---------------------------------------------------------- */
.cta { padding-block: clamp(96px, 12vw, 176px); }
.cta__title { max-width: 20ch; }
:lang(ar) .cta__title { max-width: 16ch; }
.cta__row {
  margin-top: clamp(32px, 5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: end;
}
.cta__row p { max-width: 44ch; }
.stage-note {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: minmax(140px, 12rem) minmax(0, 1fr);
  gap: 8px 32px;
}
.stage-note b { color: var(--paper); font-weight: 600; font-size: 0.9375rem; }
.stage-note p { color: var(--dark-body); font-size: 0.9375rem; max-width: 70ch; }
@media (max-width: 760px) {
  .cta__row, .stage-note { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ------------------------------------------------------- */
.footer { padding-block: clamp(48px, 6vw, 80px) calc(env(safe-area-inset-bottom, 0px) + 32px); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.footer__mark { width: clamp(180px, 22vw, 300px); height: auto; color: var(--charcoal); }
.footer__tag { margin-top: 22px; color: var(--muted); max-width: 26ch; font-size: 0.9375rem; }
.footer h2 { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 600; color: var(--charcoal); letter-spacing: 0; margin-bottom: 14px; }
.footer__links { display: grid; gap: 8px; }
.footer__links a { color: var(--body); text-decoration: none; font-size: 0.9375rem; transition: color 0.3s var(--ease); }
.footer__links a:hover { color: var(--charcoal); }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 10px 32px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8125rem;
}
@media (max-width: 860px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__top > :first-child { grid-column: 1 / -1; }
}

/* ---------- Inner pages -------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(44px, 6vw, 80px);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.page-hero .t-display { max-width: 16ch; }
:lang(ar) .page-hero .t-display { max-width: 15ch; }
.page-hero__aside { display: grid; gap: 24px; padding-bottom: 0.3em; }
.page-hero__aside .t-lede { max-width: 42ch; }
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page-hero__aside { padding-bottom: 0; }
}
.page-hero__media { margin-top: clamp(36px, 5vw, 64px); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.feature--flip > :first-child { order: 2; }
.feature__copy > * + * { margin-top: 18px; }
.feature__copy .t-h2 { max-width: 14ch; }
.feature__copy .ticks { margin-top: 24px !important; }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip > :first-child { order: 0; }
}

/* Product stills: a paper mat and a 16px radius */
.still {
  padding: clamp(6px, 0.7vw, 10px);
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.still img { width: 100%; border-radius: var(--radius-inner); }
.still__missing {
  display: none;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  padding: clamp(18px, 3vw, 40px);
  border-radius: var(--radius-inner);
  background: var(--step);
  align-content: end;
  gap: 10px;
}
.still--wide .still__missing { aspect-ratio: 24 / 10; }
.still--short .still__missing { aspect-ratio: 16 / 6; }
.still__missing b { align-self: end; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); line-height: 1.25; color: var(--charcoal); max-width: 26ch; letter-spacing: -0.01em; }
.still.is-missing img { display: none; }
.still.is-missing .still__missing { display: grid; }
.still-cap { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; }
.still-cap i { font-style: normal; font-family: var(--font-display); color: var(--charcoal); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js .still[data-reveal] img { transform: scale(1.04); transition: transform 1.6s var(--ease); }
  .js .still[data-reveal].is-in img { transform: none; }
}
.stills { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.feature + .stills, .feature + .stills--2 { margin-top: clamp(32px, 4vw, 56px); }
.stills--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 720px) { .stills--2 { grid-template-columns: minmax(0, 1fr); } }
.stills-note { margin-top: 28px; }
.head--ticks { margin-bottom: clamp(24px, 3vw, 36px); }
.ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); row-gap: 14px; margin-top: 0 !important; }
@media (max-width: 760px) { .ticks--cols { grid-template-columns: minmax(0, 1fr); } }
.ticks--cols + .stills { margin-top: clamp(36px, 5vw, 64px); }
.stills + .stills { margin-top: clamp(20px, 2.4vw, 32px); }

/* Spec sheet: term left, detail right */
.spec { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(140px, 15rem) minmax(0, 1fr);
  gap: 6px clamp(20px, 4vw, 64px);
  align-items: baseline;
}
.spec__row dt { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--charcoal); letter-spacing: -0.01em; }
.spec__row dd { color: var(--body); font-size: 0.9875rem; }
.spec__row dd .link { font-size: 0.9375rem; margin-inline-start: 6px; }
@media (max-width: 640px) { .spec__row { grid-template-columns: minmax(0, 1fr); } }

/* The model line: a responsive table drawn as rows */
.line { border-top: 1px solid var(--hairline); }
.line__row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 5fr) minmax(7rem, 10rem) minmax(0, 7fr);
  gap: 8px clamp(16px, 2.6vw, 40px);
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.line__row--head { padding-block: 12px; font-size: 0.875rem; font-weight: 600; color: var(--charcoal); }
.line__status { font-size: 0.9375rem; font-weight: 500; color: var(--charcoal); }
.line__status--off { color: var(--muted); }
.line__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 1.7vw, 1.5rem); color: var(--charcoal); letter-spacing: -0.01em; line-height: 1.2; }
.line__job { color: var(--body); font-size: 0.9375rem; }
.line__meas { color: var(--body); font-size: 0.9375rem; }
.line__cell { display: grid; gap: 4px; }
.line__cell small { display: none; font-size: 0.875rem; font-weight: 600; color: var(--charcoal); }
@media (max-width: 860px) {
  .line__row { grid-template-columns: minmax(0, 1fr) auto; }
  .line__row--head { display: none; }
  .line__row .line__cell:nth-child(2), .line__row .line__cell:nth-child(4) { grid-column: 1 / -1; }
  .line__cell small { display: block; }
}

/* Controls / principles: two-column list */
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 52px) clamp(32px, 5vw, 80px); }
.control { display: grid; gap: 10px; align-content: start; }
.control h3 { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.25; letter-spacing: -0.01em; }
.control p { font-size: 0.9375rem; color: var(--body); max-width: 52ch; }
@media (max-width: 860px) { .controls { grid-template-columns: minmax(0, 1fr); } }

/* Three-up columns */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); }
.col { display: grid; gap: 12px; align-content: start; }
.col h3 { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); line-height: 1.25; letter-spacing: -0.01em; }
.col p { font-size: 0.9375rem; }
@media (max-width: 860px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { padding: 0; }
}

.note {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.9375rem;
  color: var(--body);
}
.note b { color: var(--charcoal); }

.quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  max-width: 30ch;
}

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); background: var(--paper); }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--charcoal); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  color: var(--charcoal);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-tint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.form__note { font-size: 0.8125rem; color: var(--muted); }
.form__done { display: none; padding: 14px 16px; border-radius: 12px; background: var(--emerald-tint); color: var(--emerald); font-size: 0.9375rem; }
.form.is-sent .form__done { display: block; }
.email-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.email-line code { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 600; color: var(--charcoal); padding: 8px 12px; border-radius: 10px; background: var(--paper); user-select: all; }

/* Small print / sources */
.sources { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 6px; }
.sources p { font-size: 0.8125rem; color: var(--muted); max-width: none; }
.on-dark .sources p { color: var(--dark-muted); }
sup.ref { font-size: 0.7em; margin-inline-start: 1px; color: var(--muted); font-weight: 500; }
sup.ref a { text-decoration: none; }

/* Threats */
.threats { display: grid; gap: clamp(32px, 4vw, 52px); }
.threat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 10px clamp(16px, 3vw, 48px);
}
.threat h3 { font-size: clamp(1.1875rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; }
.threat__src { margin-top: 8px; }
.threat__fix { display: grid; gap: 8px; align-content: start; font-size: 0.9875rem; }
.threat__fix b { color: var(--charcoal); font-weight: 600; }
@media (max-width: 760px) {
  .threat { grid-template-columns: minmax(0, 1fr); }
}

/* Facts (company) */
.facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px); }
.fact { display: grid; gap: 10px; align-content: start; }
.fact__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.125rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  font-size-adjust: none;
}
.fact p { font-size: 0.9375rem; }
.fact p.t-micro { font-size: 0.8125rem; }
@media (max-width: 560px) { .facts-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .poster__line > span { transition: none; }
  .film__push, .film { animation: none !important; transform: none !important; }
}

/* ---------- Long-form text (privacy) -------------------------------------- */
.prose { display: grid; gap: clamp(32px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 96px); }
.prose h2 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 12px;
}
.prose p { max-width: 64ch; color: var(--body); }
.prose a { color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-color: var(--charcoal); }
.page-hero--404 { min-height: 70vh; }

/* ---------- Deferred rendering for long pages ---------------------------- */
/* Only on sections that start below the fold and hold nothing sticky. The
   browser skips their layout and paint until they near the viewport. */
/* contain-intrinsic-size is the content box (padding excluded). Values are
   measured averages of the English and Arabic pages; "auto" then remembers the
   real size once a section has rendered. */
.cv {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto var(--cis, 600px);
}
.cv[aria-labelledby="receipt-title"] { --cis: 490px; }
.cv:not([aria-labelledby]):not(.footer) { --cis: 585px; }   /* learning + branding */
.cv[aria-labelledby="built-title"] { --cis: 470px; }
.cv[aria-labelledby="why-title"] { --cis: 390px; }
.cv[aria-labelledby="cta-title"] { --cis: 390px; }
.footer.cv { --cis: 225px; }
@media (max-width: 720px) {
  .cv[aria-labelledby="receipt-title"] { --cis: 905px; }
  .cv:not([aria-labelledby]):not(.footer) { --cis: 1130px; }
  .cv[aria-labelledby="built-title"] { --cis: 625px; }
  .cv[aria-labelledby="why-title"] { --cis: 830px; }
  .cv[aria-labelledby="cta-title"] { --cis: 450px; }
  .footer.cv { --cis: 540px; }
}
}