/* ==========================================================================
   IyedeX, Design System
   --------------------------------------------------------------------------
   One template ("قالب") for every page, in every language (/, /fr, /en, /ar).

   HOW IT WORKS
   This file is loaded LAST in <head>, after each page's own <style> block,
   and every rule is scoped under `body.ix`. That gives it both source-order
   and specificity priority over the per-page CSS that made the site look
   different from page to page, without having to delete that CSS first.

   WHAT IT STANDARDISES
     header  ·  breadcrumb  ·  page title block  ·  section rhythm
     type scale  ·  prose measure  ·  cards  ·  buttons  ·  footer

   Anything genuinely page-specific (the ecosystem mind-map, the 3amAli
   mockups, the news cards) is left alone on purpose.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────── */

body.ix {
  /* Type */
  --ix-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ix-arabic: 'IBM Plex Sans Arabic', 'Geist', 'Noto Sans Arabic', system-ui, sans-serif;

  /* Ink, Apple's near-black reads warmer than pure #000 at body sizes */
  --ix-ink: #1d1d1f;
  --ix-ink-strong: #000000;
  --ix-ink-soft: #52525b;
  --ix-ink-muted: #86868b;

  /* Surfaces */
  --ix-bg: #ffffff;
  --ix-bg-sunken: #fafafa;
  --ix-bg-raised: #f5f5f7;
  --ix-line: #e5e5e7;
  --ix-line-soft: #efeff1;

  /* Accent, the deep red already used for 3amAli, carried site-wide */
  --ix-accent: #8b1a1a;
  --ix-accent-soft: rgba(139, 26, 26, 0.08);

  /* The green out of the hero's shine gradient, reused as the colour of the
     word being read aloud. Pale enough to sit behind dark text like a
     highlighter, and the same green the home page already drifts through. */
  --ix-read: #a8e6cf;
  --ix-read-soft: rgba(168, 230, 207, 0.4);

  /* Layout */
  --ix-container: 1160px;
  --ix-measure: 68ch;      /* readable line length for prose */
  --ix-measure-tight: 60ch;
  /* One width for every page title and section heading, one for every lede
     and sub-line under them, so the column edges line up from page to page.
     These are in rem, not ch: `ch` scales with the element's own font-size,
     which made a 52px h1 measure 796px and a 36px h2 measure 551px from the
     same declared value. */
  --ix-title-w: 45rem;
  --ix-sub-w: 38rem;
  --ix-nav-h: 68px;
  --ix-radius: 12px;
  --ix-radius-sm: 8px;
  --ix-radius-full: 999px;

  /* Vertical rhythm */
  --ix-section-y: 6rem;
  --ix-gap: 1.5rem;

  /* Body-copy ink. Dark sections re-point this rather than fighting it. */
  --ix-prose-ink: var(--ix-ink-soft);
}

/* ── Base ────────────────────────────────────────────────────────────── */

/* Every hand-written page carries `* { box-sizing: border-box }` in its own
   <style>, so pages generated from a template had no reset at all and the
   mobile drawer measured 383px wide on a 390px screen. Scoped to body.ix,
   this is a no-op on the pages that already had it. */
body.ix,
body.ix *,
body.ix *::before,
body.ix *::after {
  box-sizing: border-box;
}

/* Mobile browsers paint a translucent blue rectangle over whatever you tap.
   It lands on every button, every nav link and the menu toggle, and it is not
   the site's own styling. Removed here rather than per component, since it
   applies to anything tappable. */
body.ix,
body.ix * {
  -webkit-tap-highlight-color: transparent;
}

/* Same idea for the click ring: a keyboard user still gets the outline from
   :focus-visible below, a mouse or a finger does not. */
body.ix :focus:not(:focus-visible) {
  outline: none;
}

body.ix {
  margin: 0;
}

body.ix ul,
body.ix ol {
  margin: 0;
}


body.ix {
  font-family: var(--ix-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ix-ink);
  background: var(--ix-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.ix[dir="rtl"],
[dir="rtl"] body.ix {
  font-family: var(--ix-arabic);
}

body.ix .container,
body.ix .ix-container {
  width: 100%;
  max-width: var(--ix-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Type scale ──────────────────────────────────────────────────────────
   Every page used its own sizes (h1 ranged 32px → 80px, body 16px → 24px).
   These are the one set of sizes the whole site now uses.                */

/* `inherit`, not a fixed colour: several pages have black CTA bands that set
   white text on the section. Forcing a colour here painted their headings
   black on black. Inheriting keeps them legible in both contexts. */
body.ix h1,
body.ix h2,
body.ix h3,
body.ix h4 {
  color: inherit;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

body.ix h1 {
  font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

body.ix h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}

/* "mini titles", the small headings inside a section */
body.ix h3 {
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

body.ix h4 {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

body.ix p,
body.ix li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ix-prose-ink);
}

body.ix strong,
body.ix b {
  color: var(--ix-ink);
  font-weight: 600;
}

/* No blanket link colour here: pages colour their own buttons, and forcing
   `inherit` painted every solid button's label the same dark grey as its
   background. The design system's own components set their colours below. */

/* Eyebrow / section label, the small uppercase kicker above a heading */
body.ix .ix-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
  margin-bottom: 0.875rem;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-eyebrow {
  letter-spacing: 0;
}

/* ── Header ──────────────────────────────────────────────────────────── */

body.ix > header,
body.ix header.ix-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ix-line-soft);
}

body.ix > header nav.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ix-nav-h);
  gap: 1.5rem;
}

body.ix .logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ix-ink-strong);
  text-decoration: none;
  flex-shrink: 0;
}

body.ix .logo img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

body.ix .nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.ix .nav-links > li > a {
  font-size: 0.9375rem;
  font-weight: 450;
  line-height: 1;
  color: var(--ix-ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

body.ix .nav-links > li > a:hover {
  opacity: 1;
}

body.ix .nav-links > li > a[aria-current="page"],
body.ix .nav-links > li > a.active {
  opacity: 1;
  font-weight: 600;
}

/* ── Breadcrumb, "Home > Page Name", on every page except the homepage ─ */

body.ix .breadcrumb {
  margin-top: 0;
  padding-block: 0.75rem;
  background: var(--ix-bg-sunken);
  border-bottom: 1px solid var(--ix-line-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ix-ink-muted);
}

body.ix .breadcrumb .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.ix .breadcrumb a {
  color: var(--ix-ink-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

body.ix .breadcrumb a:hover {
  color: var(--ix-ink);
}

body.ix .breadcrumb-sep {
  color: #c7c7cc;
  line-height: 1;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .breadcrumb-sep {
  transform: scaleX(-1);
  display: inline-block;
}

body.ix .breadcrumb-current {
  color: var(--ix-ink);
  font-weight: 500;
}

/* ── Page header, every page opens with its title, laid out identically ─ */

body.ix .ix-page-header {
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.25rem) clamp(2rem, 1rem + 3.5vw, 3rem);
  border-bottom: 1px solid var(--ix-line-soft);
}

body.ix .ix-page-header > .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.ix .ix-page-header h1 {
  margin: 0;
  max-width: var(--ix-title-w);
}

body.ix .ix-page-header .ix-lede {
  margin: 1.25rem 0 0;
  max-width: var(--ix-sub-w);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ix-ink-soft);
  letter-spacing: -0.01em;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-page-header > .container {
  align-items: flex-start;
  text-align: right;
}

/* ── The company page's stage ────────────────────────────────────────────
   A showroom rather than a page header: one subject at a size nothing else
   on the site is set at, dissolving into the ground it stands on, with the
   title and the two ways in under it.

   The mark is the site's own logo, masked with a downward gradient so its
   lower half fades out rather than stopping. That dissolve is the whole
   effect: the glyph does not sit *on* the page, it comes out of it.

   Only the shape is borrowed. Everything else is the site as it already is
   — white ground, the same ink, the same lede, the same two buttons every
   other page uses, in the colours they wear everywhere else.
   ======================================================================= */

body.ix .ix-hero-stage {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  background: var(--ix-bg);
  border-bottom: 1px solid var(--ix-line-soft);
  text-align: center;
}

body.ix .ix-stage__mark {
  display: flex;
  justify-content: center;
  /* The title climbs into the mark's dissolve rather than clearing it — the
     two are one object, which is the whole point of fading the glyph out. */
  margin-bottom: clamp(-2.5rem, -1rem - 2.2vw, -1rem);
}

/* ── The glyph: glass, with a lit rim ─────────────────────────────────────
   The mark is drawn rather than photographed now, so it can be hollow. The
   body is the brand gradient at a wash, the rim is the same gradient at full
   strength, and the colours travel along it — the six that already run
   through "tunisien." on the home page, on the same six-second cycle.

   The dissolve moved inside the drawing: a mask on the group, so the rim,
   the wash and the light around them all fade out together on the way down
   rather than the glyph fading and its glow staying behind.
   ======================================================================= */

body.ix .ix-glyph {
  display: block;
  width: clamp(15rem, 46vw, 34rem);
  height: auto;
  overflow: visible;
  /* The light. Applied to the whole drawing, after the fade has been cut,
     so the glow goes with it. */
  /* Two tight halos rather than three wide ones: at 70px the pastels
     overlapped into a grey cloud around the mark instead of reading as
     light coming off its edge. */
  filter:
    drop-shadow(0 0 6px rgba(138, 180, 248, 0.55))
    drop-shadow(0 0 22px rgba(192, 176, 255, 0.4));
}

/* Glass: the same colours as the rim, at a wash, so the inside is tinted
   rather than filled. */
body.ix .ix-glyph__body {
  fill: url(#ix-rim);
  opacity: 0.14;
}

body.ix .ix-glyph__rim {
  fill: none;
  stroke: url(#ix-rim);
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Each stop walks the whole palette, one sixth of a cycle behind the one
   before it, which makes the colours travel along the gradient rather than
   the whole thing flashing at once. The last stop shares the first's delay
   as well as its colour, so the two ends always meet. */
@keyframes ix-rim-travel {
  0%   { stop-color: #c0b0ff; }
  20%  { stop-color: #8ab4f8; }
  40%  { stop-color: #a8e6cf; }
  60%  { stop-color: #ffd6a5; }
  80%  { stop-color: #ffb3c1; }
  100% { stop-color: #c0b0ff; }
}

body.ix .ix-glyph #ix-rim stop {
  animation: ix-rim-travel 6s linear infinite;
}

body.ix .ix-glyph #ix-rim stop:nth-child(2) { animation-delay: -1.2s; }
body.ix .ix-glyph #ix-rim stop:nth-child(3) { animation-delay: -2.4s; }
body.ix .ix-glyph #ix-rim stop:nth-child(4) { animation-delay: -3.6s; }
body.ix .ix-glyph #ix-rim stop:nth-child(5) { animation-delay: -4.8s; }
body.ix .ix-glyph #ix-rim stop:nth-child(6) { animation-delay: -6s; }

@media (prefers-reduced-motion: reduce) {
  body.ix .ix-glyph #ix-rim stop { animation: none; }
}

body.ix .ix-stage__say {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.ix .ix-hero-stage h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.1rem + 5.2vw, 4.5rem);
  line-height: 1.06;
  /* Tighter than the site's other titles, because it is set larger than
     any of them: at this size the default tracking reads loose. */
  letter-spacing: -0.035em;
  color: var(--ix-ink);
}

body.ix .ix-hero-stage .ix-lede {
  margin: 1.25rem 0 0;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ix-ink-soft);
}

body.ix .ix-hero-stage .ix-btn-row {
  justify-content: center;
  margin-top: 2.25rem;
}

/* The stage draws its own bottom hairline, the way the page title block it
   replaced did; the section under it must not draw a second. */
body.ix .ix-hero-stage + section {
  border-top: 0;
}

@media (max-width: 640px) {
  body.ix .ix-glyph { width: min(78vw, 19rem); }
  body.ix .ix-hero-stage .ix-btn-row { width: 100%; flex-direction: column; align-items: stretch; }
  body.ix .ix-hero-stage .ix-btn-row .ix-btn { width: 100%; }
}

/* ── Sections, one vertical rhythm for the whole site ───────────────── */

body.ix main > section,
body.ix .ix-section {
  padding-block: var(--ix-section-y);
}

body.ix main > section + section {
  border-top: 1px solid var(--ix-line-soft);
}

body.ix .ix-section--sunken {
  background: var(--ix-bg-sunken);
}

/* Prose blocks get a readable measure instead of running the full width.
   (/security and /privacy were setting 24px text across 1160px.)         */
body.ix .ix-prose {
  max-width: var(--ix-measure);
}

body.ix .ix-prose > * + * {
  margin-top: 1.25rem;
}

/* A way into a wall of copy: the first sentence a size up and a shade
   darker, the rest as it was. Nothing is added — the paragraph that was
   already there is simply given the weight it was already carrying. */
body.ix .ix-prose--lead > p:first-child {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ix-ink);
}

body.ix .ix-prose h2 {
  margin-top: 3rem;
}

body.ix .ix-prose h3 {
  margin-top: 2rem;
}

body.ix .ix-prose > :first-child {
  margin-top: 0;
}

body.ix .ix-section-head {
  max-width: var(--ix-sub-w);
  margin-bottom: 2.75rem;
}

body.ix .ix-section-head h2 {
  margin: 0;
}

body.ix .ix-section-head p {
  margin: 0.875rem 0 0;
}

/* ── Grid + cards ────────────────────────────────────────────────────── */

body.ix .ix-grid {
  display: grid;
  gap: var(--ix-gap);
}

body.ix .ix-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ix .ix-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ix .ix-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.ix .ix-card {
  padding: 1.75rem;
  background: var(--ix-bg);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
}

body.ix .ix-card h3 {
  margin: 0 0 0.625rem;
}

body.ix .ix-card p {
  margin: 0;
  font-size: 1rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

body.ix .ix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ix-radius-full);
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

body.ix .ix-btn--primary {
  background: var(--ix-ink-strong);
  color: #fff;
}

body.ix .ix-btn--secondary {
  background: transparent;
  color: var(--ix-ink-strong);
  border-color: var(--ix-line);
}

body.ix .ix-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ── Footer, identical on every page ────────────────────────────────── */

body.ix > footer,
body.ix footer.ix-footer {
  padding-block: 4rem 2.5rem;
  background: var(--ix-bg-sunken);
  border-top: 1px solid var(--ix-line);
}

body.ix > footer .footer-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}

body.ix > footer .footer-section h4 {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
}

body.ix > footer .footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

body.ix > footer .footer-section li {
  font-size: 0.9375rem;
  line-height: 1.5;
}

body.ix > footer .footer-section a {
  color: var(--ix-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

body.ix > footer .footer-section a:hover {
  color: var(--ix-ink-strong);
}

body.ix > footer .footer-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ix-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

body.ix > footer .footer-bottom p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ix-ink-muted);
}

/* ── RTL ─────────────────────────────────────────────────────────────── */

body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-page-header h1,
body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-page-header .ix-lede,
body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-section-head,
body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-prose {
  text-align: right;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) h1,
body.ix:is([dir="rtl"], [dir="rtl"] *) h2,
body.ix:is([dir="rtl"], [dir="rtl"] *) h3,
body.ix:is([dir="rtl"], [dir="rtl"] *) h4 {
  letter-spacing: 0;
  line-height: 1.3;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) p,
body.ix:is([dir="rtl"], [dir="rtl"] *) li {
  line-height: 1.9;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 968px) {
  body.ix {
    --ix-section-y: 4rem;
  }

  body.ix .ix-grid--3,
  body.ix .ix-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ix > footer .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  body.ix {
    --ix-section-y: 3.25rem;
    font-size: 16px;
  }

  body.ix .container,
  body.ix .ix-container {
    padding-inline: 20px;
  }

  body.ix .ix-grid--2,
  body.ix .ix-grid--3,
  body.ix .ix-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  body.ix p,
  body.ix li {
    font-size: 1rem;
  }

  body.ix .breadcrumb {
    font-size: 0.75rem;
  }
}

/* ── Motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.ix *,
  body.ix *::before,
  body.ix *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Legacy wrapper mapping
   --------------------------------------------------------------------------
   The title block was called something different on almost every page
   (.hero, .page-header, .ecosystem-header, .profile-info). Rather than
   rewrite 53 files of markup, each of those wrappers is mapped onto the one
   page-header treatment here. The three homepages keep their own hero, which
   is why every rule below is scoped with :not(.ix-home).
   ========================================================================== */

body.ix:not(.ix-home) .hero,
body.ix:not(.ix-home) .ecosystem-header,
body.ix:not(.ix-home) .blog-page .page-header,
body.ix:not(.ix-home) main > .page-header {
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.25rem) clamp(2rem, 1rem + 3.5vw, 3rem);
  margin: 0;
  text-align: start;
  border-bottom: 1px solid var(--ix-line-soft);
  min-height: 0;
  display: block;
}

body.ix:not(.ix-home) .hero h1,
body.ix:not(.ix-home) .ecosystem-header h1,
body.ix:not(.ix-home) .page-header h1,
body.ix:not(.ix-home) .profile-info h1 {
  margin: 0;
  max-width: var(--ix-title-w);
  font-size: clamp(2.25rem, 1.35rem + 2.9vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: start;
}

/* The intro paragraph under the title */
body.ix:not(.ix-home) .hero .container > p:first-of-type,
body.ix:not(.ix-home) .hero > p:first-of-type,
body.ix .ix-lede {
  margin: 1.25rem 0 0;
  max-width: var(--ix-sub-w);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ix-ink-soft);
}

/* /security, /privacy, /terms and /cookies set 24px body text across the
   full 1160px container. Give their prose a readable measure instead. */
body.ix:not(.ix-home) .hero .container > p ~ p,
body.ix .text-section p,
body.ix .legal-content p,
body.ix .legal-content li,
body.ix .article-section p {
  max-width: var(--ix-measure);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Section headings inside the page body, the "mini titles" */
body.ix:not(.ix-home) main h2,
body.ix:not(.ix-home) .text-section h2,
body.ix:not(.ix-home) .legal-content h2,
body.ix:not(.ix-home) section h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
}

body.ix:not(.ix-home) main h3,
body.ix:not(.ix-home) section h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

/* Profile pages keep their photo-beside-name layout, but the name itself
   is set at the same size as every other page title. */
body.ix .profile-hero {
  padding-block: clamp(3rem, 1.5rem + 5vw, 5.25rem) clamp(2rem, 1rem + 3.5vw, 3rem);
  border-bottom: 1px solid var(--ix-line-soft);
}

body.ix .profile-info .profile-title {
  font-size: 1.125rem;
  color: var(--ix-ink-soft);
}

/* Title blocks that sit outside a .container get the container's own
   width and gutters, so every page title starts on the same x position. */
body.ix:not(.ix-home) .ecosystem-header {
  width: 100%;
  max-width: var(--ix-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* The gallery is a sibling of .container rather than a child, so it ran the
   full width of the viewport while the page title sat inside the grid. Give
   it the same measurements as .container so the two line up. */
@media (max-width: 640px) {
  body.ix:not(.ix-home) .ecosystem-header {
    padding-inline: 20px;
  }
}

/* ══ The company page ═══════════════════════════════════════════════════════
   Every section is the same shape: the label, the heading under it, and the
   content under that, all starting at the container's left edge.

   It used to be two shapes. Prose sections indented themselves past a 200px
   column that held nothing but a word, and grid sections did not, so the page
   had two left edges and no reason for either. Worse, a row of ten logos or
   two founders inside that indent had a third of the page to live in and the
   rest standing empty beside it. One edge, full width, and the prose keeps
   its measure the way it always did.
   ========================================================================= */

body.ix .ix-wide__head {
  margin-bottom: 0.875rem;
}

body.ix .ix-wide__head .ix-eyebrow {
  margin: 0;
}

body.ix .ix-wide .ix-wide__h {
  margin: 0 0 2.5rem;
  max-width: var(--ix-title-w);
}

/* What we build */
body.ix .ix-build-grid {
  margin-top: 0;
}

/* Principles, numbered, hairline-separated */
body.ix .ix-principles {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 0;
}

body.ix .ix-principle {
  padding: 2rem 0;
  border-top: 1px solid var(--ix-line);
}

/* The number was set at caption size and read as a footnote marker. It is
   the index of the principle: large, light, and quiet enough in colour that
   it still sits behind the words it numbers. */
body.ix .ix-principle-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Between the hairline grey, which was too faint to read as type, and the
     muted body grey, which at this size would compete with the heading. */
  color: #c4c4c9;
  color: color-mix(in srgb, var(--ix-ink-muted) 58%, var(--ix-bg));
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.875rem;
}

body.ix .ix-principle h3 {
  margin: 0 0 0.5rem;
}

body.ix .ix-principle p {
  margin: 0;
  font-size: 1rem;
}

/* ── The product, named ───────────────────────────────────────────────────
   A photograph of a phone stood in for the product here, and said less about
   it than its own name does. The name is the mark: set large, beside the
   mark itself, with the sentence and the way in beside them. */

body.ix .ix-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--ix-bg-sunken);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
}

body.ix .ix-product__mark {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  min-width: 0;
}

body.ix .ix-product__mark img {
  flex: none;
  width: clamp(3.75rem, 8vw, 6.5rem);
  height: auto;
}

body.ix .ix-product__name {
  font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ix-ink);
  /* The name is a Latin wordmark in every language, Arabic included. */
  direction: ltr;
  unicode-bidi: isolate;
}

body.ix .ix-product__say > p {
  margin: 0 0 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ix-body-ink, var(--ix-ink-soft));
  max-width: 34rem;
}

/* ── Team ─────────────────────────────────────────────────────────────────
   Two 96px circles at the left edge of a wide column read as an afterthought.
   These are portraits: a real picture, the name at the size a name deserves,
   and the role under it. The name was also rendering in the browser's default
   link blue, because nothing had ever set a colour on it. */

body.ix .ix-team {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3.5rem;
  max-width: none;
}

/* The portrait beside the name rather than above it: two founders stacked
   in narrow columns left two thirds of the page empty next to them. */
body.ix .ix-person {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

body.ix .ix-person__shot {
  display: block;
  width: 100%;
  /* The markup carries width/height so the box is reserved before the
     picture lands; `aspect-ratio` only takes over once one of them is auto. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ix-bg-raised);
  margin: 0;
}

body.ix .ix-person__who {
  display: block;
  min-width: 0;
}

body.ix .ix-person__name {
  display: block;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ix-ink);
}

body.ix .ix-person__role {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.9375rem;
  color: var(--ix-ink-muted);
}

body.ix .ix-person:hover .ix-person__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── What we offer, on the partnerships page ──────────────────────────────
   Twelve of these, six to a sector. They were boxes on a shared border with
   an icon in a grey rounded chip, which is a card idiom the rest of the site
   does not use. They keep the rhythm the principles already set instead: a
   hairline above each one, a small drawing where the number would be, and no
   box at all.
   ========================================================================= */

body.ix .ix-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
}

body.ix .ix-offer {
  padding: 2rem 0;
  border-top: 1px solid var(--ix-line);
}

body.ix .ix-offer__art {
  display: block;
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--ix-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ix .ix-offer h3 {
  margin: 1.125rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ix-ink);
}

body.ix .ix-offer p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ix-ink-soft);
}

/* The lede under a section heading, where the section has one. */
body.ix .ix-wide__sub {
  margin: -1.5rem 0 2.5rem;
  max-width: var(--ix-sub-w);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--ix-ink-soft);
}

/* On a dark band the drawings and the lede have to invert with everything
   else; the band's own rules already carry the headings and the buttons. */
body.ix .ix-section--dark .ix-offer__art { stroke: #ffffff; }
body.ix .ix-section--dark .ix-offer { border-top-color: rgba(255, 255, 255, 0.16); }
body.ix .ix-section--dark .ix-wide__sub { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 900px) {
  body.ix .ix-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.ix .ix-offers { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  body.ix .ix-offer { padding: 1.5rem 0; }
  body.ix .ix-wide__sub { margin-bottom: 2rem; }
}

/* ── Featured at ──────────────────────────────────────────────────────────
   Ten logos of ten different shapes wrapped as free-flowing text left a
   ragged second row and no alignment worth the name. On a grid every logo
   gets the same box and the same optical weight, whatever its own aspect. */

body.ix .ix-featured {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--ix-line);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
  overflow: hidden;
}

body.ix .ix-featured-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.25rem;
  min-height: 6.25rem;
  background: var(--ix-bg);
}

body.ix .ix-featured-logo img {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Closing call to action */
body.ix .ix-cta {
  border-top: 1px solid var(--ix-line);
  text-align: start;
}

body.ix .ix-cta h2 {
  margin: 0;
  max-width: var(--ix-title-w);
}

body.ix .ix-cta .ix-lede {
  margin: 1.25rem 0 0;
}

@media (max-width: 968px) {
  body.ix .ix-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The name over the sentence, both left-aligned: side by side, neither
     half has the room to be read. */
  body.ix .ix-product {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  body.ix .ix-principles {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  body.ix .ix-team {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  body.ix .ix-person { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.125rem; }
  body.ix .ix-person__name { font-size: 1.0625rem; }
  body.ix .ix-person__role { font-size: 0.875rem; }

  body.ix .ix-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.ix .ix-featured-logo {
    padding: 1.25rem 0.875rem;
    min-height: 5rem;
  }

  body.ix .ix-featured-logo img { height: 22px; }

  body.ix .ix-wide .ix-wide__h { margin-bottom: 1.75rem; }
}

/* Some pages pin the site nav with a bare `header { position: fixed }`.
   The page title block must never inherit that. */
body.ix .ix-page-header {
  position: static;
  width: auto;
  z-index: auto;
  background: none;
}

/* ── Off-canvas mobile menu ──────────────────────────────────────────────
   Every page parked the closed menu at `right: -100%`, which left the
   document horizontally scrollable by a full viewport width, you could
   swipe or scroll sideways into empty space on any page. Translating it
   instead keeps it off screen without extending the scroll area.        */

/* `overflow-x: clip` (rather than `hidden`) contains the off-screen menu
   without creating a scroll container, so the sticky header still sticks. */
html:has(body.ix) {
  overflow-x: clip;
}

body.ix .mobile-nav-links {
  /* Position and size live here, not in each page's <style>: the header has
     to render correctly on any page, including ones that never carried the
     nav CSS (the menu was adding 200px of blank height to /scenario).
     The drawer sits above the header, and the overlay just below it, so an
     open menu dims and covers the whole page including the nav bar. */
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: min(86%, 360px);
  height: 100dvh;
  margin: 0;
  padding: 1rem 1.5rem 2rem;
  background: #fff;
  box-shadow: none;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  /* `visibility` was not in the transition, so on close it flipped to hidden
     at once and the drawer vanished instead of sliding out. Delaying it by
     the length of the slide lets the closing animation actually play. */
  transition:
    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.34s;
}

body.ix .mobile-nav-links.show {
  transform: translateX(0);
  visibility: visible;
  /* Opening has nothing to wait for. */
  transition:
    transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

body.ix .mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.34s;
  z-index: 1100;
}

body.ix .mobile-menu-overlay.show {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.34s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

@media (min-width: 969px) {
  body.ix .mobile-menu-button,
  body.ix .mobile-menu-overlay {
    display: none;
  }
}

@media (max-width: 968px) {
  body.ix .nav-links {
    display: none;
  }

  body.ix .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--ix-ink-strong);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
  }

  body.ix .mobile-nav-links {
    list-style: none;
    gap: 0.25rem;
  }

  body.ix .mobile-nav-links > li > a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1.0625rem;
    color: var(--ix-ink);
    text-decoration: none;
  }
}

/* The gradient wordmark used in the /blog title was so pale
   it barely read against white. Same effect, enough contrast to be a title. */
body.ix .shine-text {
  background-image: linear-gradient(92deg, #1d1d1f 0%, #8b1a1a 45%, #3b3b40 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Page subtitles that are not marked up as a lede still read as one. */
body.ix .page-subtitle {
  margin: 1.25rem 0 0;
  max-width: var(--ix-sub-w);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ix-ink-soft);
}

/* ── Dark sections ───────────────────────────────────────────────────────
   The black CTA bands that several pages end on. Everything inside them
   reads light; nothing here needs the page's own rules to change.       */

body.ix .cta-section,
body.ix .cta-banner,
body.ix .section-black,
body.ix .ix-section--dark {
  --ix-prose-ink: rgba(255, 255, 255, 0.72);
  /* The class set white text and left the background to whoever used it,
     which meant a section carrying only this class was white on white. */
  background: var(--ix-ink-strong);
  color: #ffffff;
}

body.ix .cta-section h1, body.ix .cta-section h2,
body.ix .cta-section h3, body.ix .cta-section h4,
body.ix .cta-banner h1, body.ix .cta-banner h2,
body.ix .cta-banner h3, body.ix .cta-banner h4,
body.ix .section-black h1, body.ix .section-black h2,
body.ix .section-black h3, body.ix .section-black h4,
body.ix .ix-section--dark h1, body.ix .ix-section--dark h2,
body.ix .ix-section--dark h3, body.ix .ix-section--dark h4 {
  color: #ffffff;
}

body.ix .cta-section .ix-eyebrow,
body.ix .cta-banner .ix-eyebrow,
body.ix .section-black .ix-eyebrow,
body.ix .ix-section--dark .ix-eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

/* Buttons sitting on a black band need the inverse treatment. */
body.ix .cta-section .ix-btn--primary,
body.ix .cta-banner .ix-btn--primary,
body.ix .section-black .ix-btn--primary,
body.ix .ix-section--dark .ix-btn--primary {
  background: #ffffff;
  color: #000000;
}

body.ix .cta-section .ix-btn--secondary,
body.ix .cta-banner .ix-btn--secondary,
body.ix .section-black .ix-btn--secondary,
body.ix .ix-section--dark .ix-btn--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Some of those bands set body copy at 35% white, which is below the
   readable contrast threshold on black. */
body.ix .cta-section p, body.ix .cta-section li,
body.ix .cta-banner p, body.ix .cta-banner li,
body.ix .section-black p, body.ix .section-black li,
body.ix .ix-section--dark p, body.ix .ix-section--dark li {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Language selector ───────────────────────────────────────────────────
   Part of the header, so it belongs to the design system rather than to
   each page's own <style>. Without it the dropdown renders expanded on any
   page that lacks those rules (which is what happened on /scenario).    */

body.ix .language-selector {
  position: relative;
  display: inline-block;
  margin-inline-start: 0.5rem;
}

body.ix .language-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: none;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ix-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

body.ix .language-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.ix .language-button img,
body.ix .language-option img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

body.ix .language-dropdown {
  /* Each page's own stylesheet drops a shadow under this; the site does not
     use shadows, so it is cancelled here rather than in twenty-odd files. */
  box-shadow: none;
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  min-width: 140px;
  padding: 0.375rem 0;
  background: #fff;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-sm);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

body.ix .language-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.ix .language-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--ix-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

body.ix .language-option:hover {
  background: var(--ix-bg-raised);
}

body.ix .language-option.active {
  font-weight: 600;
}

/* In the drawer the flag is one row of the menu rather than the last item of
   a nav bar, so the list drops from the flag's own edge. Several pages pin it
   to the far side of the drawer with `right: 0 !important`, which left the
   list floating away from the flag on the French and English pages while the
   Arabic ones happened to line up. */

body.ix .mobile-nav-links .language-selector {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
}

body.ix .mobile-nav-links .language-dropdown {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: translateY(8px) !important;
}

body.ix .mobile-nav-links .language-dropdown.show {
  transform: translateY(0) !important;
}

/* ==========================================================================
   Home and Partnerships section rhythm
   --------------------------------------------------------------------------
   These two pages centred some section headers and left-aligned others, and
   set the small kicker above each heading at body size. Everything here
   brings them onto the same rhythm the rest of the site uses: kicker, then
   heading, then an optional sub-line, all starting on the container edge.
   ========================================================================== */

body.ix .section-label,
body.ix .sec-label {
  display: block;
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
  text-align: start;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .section-label,
body.ix:is([dir="rtl"], [dir="rtl"] *) .sec-label {
  letter-spacing: 0;
}

body.ix .section-title,
body.ix .sec-title {
  margin: 0;
  max-width: var(--ix-title-w);
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-align: start;
}

body.ix .section-sub,
body.ix .sec-sub {
  margin: 1rem 0 0;
  max-width: var(--ix-sub-w);
  margin-inline: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ix-prose-ink);
  text-align: start;
}

/* The block a section opens with, whatever each page happens to call it. */
body.ix .section-header,
body.ix .section-head,
body.ix .sec-head {
  max-width: var(--ix-sub-w);
  margin-inline: 0;
  margin-bottom: 2.75rem;
  text-align: start;
}

/* The dark closing banner keeps its centred, poster-like treatment: it is
   the one place on these pages where centring is the point. */
body.ix .cta-banner .section-title,
body.ix .cta-banner h2,
body.ix .cta-banner p {
  text-align: center;
  max-width: none;
  margin-inline: auto;
}

/* Logo strips ("they trust us", partner logos) */
body.ix .partner-logo img,
body.ix .trust-logos img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* The home page's vision column was centred while every other section on
   the page started at the container edge. */
body.ix .vision-inner {
  margin-inline: 0;
  max-width: var(--ix-measure);
}

/* The home page's pull quote was the last centred block on an otherwise
   left-aligned page. */
body.ix .vision-pullquote {
  text-align: start;
  max-width: var(--ix-measure);
  margin-inline: 0;
}

/* ── Social links ────────────────────────────────────────────────────────
   A quiet row of monochrome glyphs in the footer bar, sitting opposite the
   copyright line. Muted at rest so they do not compete with the footer
   navigation, full ink on hover. Icons inherit `currentColor`, so they need
   no separate treatment on the dark bands.                               */

body.ix .ix-social {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

body.ix .ix-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ix-ink-muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

body.ix .ix-social-link:hover,
body.ix .ix-social-link:focus-visible {
  color: var(--ix-ink-strong);
  background: rgba(0, 0, 0, 0.05);
}

body.ix .ix-social-link:focus-visible {
  outline: 2px solid var(--ix-ink-strong);
  outline-offset: 2px;
}

body.ix .ix-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* The footer bar holds the copyright on one side and the icons on the
   other, and stacks them on narrow screens. */
body.ix > footer .footer-bottom {
  gap: 1rem 1.5rem;
}

@media (max-width: 640px) {
  body.ix > footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ix .ix-social {
    margin-inline-start: -0.5rem;   /* optical: align the first glyph */
  }
}

/* ── Mobile drawer chrome ────────────────────────────────────────────── */

body.ix .ix-menu-close-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
  list-style: none;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-menu-close-row {
  justify-content: flex-start;
}

body.ix .ix-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ix-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

body.ix .ix-menu-close:hover,
body.ix .ix-menu-close:focus-visible {
  background: var(--ix-bg-raised);
}

/* The drawer is only ever a mobile control. */
@media (min-width: 969px) {
  body.ix .mobile-nav-links,
  body.ix .mobile-menu-overlay {
    display: none;
  }
}

/* ── Research listing ────────────────────────────────────────────────── */

body.ix .ix-papers {
  margin-top: 2rem;
  border-top: 1px solid var(--ix-line);
  max-width: var(--ix-measure);
}

body.ix .ix-paper {
  display: block;
  color: var(--ix-ink);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ix-line);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

body.ix .ix-paper-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  color: var(--ix-ink-muted);
}

body.ix .ix-paper-lang {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-full);
}

body.ix .ix-paper h2 {
  color: var(--ix-ink-strong);
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  line-height: 1.25;
  max-width: var(--ix-title-w);
}

body.ix .ix-paper p {
  margin: 0;
  font-size: 1rem;
  max-width: var(--ix-sub-w);
}

/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   Every call to action on the site, whatever each page happened to call it,
   renders at one size: a pill with a text label and nothing else. The pages
   defined nine different button classes at four different sizes, some full
   width, several carrying a trailing arrow.
   ========================================================================== */

body.ix .ix-btn,
body.ix .btn,
body.ix .btn-primary,
body.ix .btn-secondary,
body.ix .hero-cta,
body.ix .hero-cta-ghost,
body.ix .primary-btn,
body.ix .secondary-btn,
body.ix .btn-explore,
body.ix .insta-btn,
body.ix .cta-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* `align-self` matters as much as `width`: several of these sit in a flex
     column, where the default `stretch` made them span the whole panel. */
  align-self: start;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 0.6875rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--ix-radius-full);
  cursor: pointer;
  transition: none;
  box-shadow: none;
  transform: none;
}

/* Solid */
body.ix .ix-btn--primary,
body.ix .btn-primary,
body.ix .hero-cta,
body.ix .primary-btn,
body.ix .btn-explore,
body.ix .insta-btn {
  background: var(--ix-ink-strong);
  color: #ffffff;
  border-color: var(--ix-ink-strong);
}

/* Outline */
body.ix .ix-btn--secondary,
body.ix .btn-secondary,
body.ix .hero-cta-ghost,
body.ix .secondary-btn {
  background: transparent;
  color: var(--ix-ink-strong);
  border-color: var(--ix-line);
}

/* An icon or arrow that survived the label cleanup is not shown, at any
   depth: a few buttons wrapped theirs in a span. */
body.ix .ix-btn svg,
body.ix .ix-btn img,
body.ix .btn svg,
body.ix .btn img,
body.ix .hero-cta svg,
body.ix .hero-cta img,
body.ix .hero-cta-ghost svg,
body.ix .btn-explore svg,
body.ix .primary-btn svg,
body.ix .secondary-btn svg,
body.ix .insta-btn svg,
body.ix .insta-btn img {
  display: none;
}

/* ── No hover anywhere ───────────────────────────────────────────────────
   Cards and buttons do not lift, glow, scale or recolour under the cursor.
   Keyboard focus still shows a ring: that is not hover, and removing it
   would leave the site unusable without a mouse.                         */

body.ix a:hover,
body.ix button:hover,
body.ix .ix-btn:hover,
body.ix .btn:hover,
body.ix .btn-primary:hover,
body.ix .btn-secondary:hover,
body.ix .hero-cta:hover,
body.ix .hero-cta-ghost:hover,
body.ix .primary-btn:hover,
body.ix .secondary-btn:hover,
body.ix .btn-explore:hover,
body.ix .insta-btn:hover,
body.ix .ix-card:hover,
body.ix .ix-paper:hover,
body.ix .ix-person:hover,
body.ix .pillar-card:hover,
body.ix .card-simple:hover,
body.ix .team-member:hover,
body.ix .gallery-item:hover,
body.ix .image-item:hover,
body.ix .partner-logo:hover,
body.ix .featured-logo-link:hover,
body.ix .ix-featured-logo:hover,
body.ix .bento-card:hover,
body.ix .solution-card:hover,
body.ix .value-card:hover,
body.ix .ix-paper:hover h2,
body.ix .ix-person:hover h3,
body.ix .gallery-item:hover img,
body.ix .image-item:hover img,
body.ix .team-member:hover img,
body.ix .partner-logo:hover img,
body.ix .ix-featured-logo:hover img {
  /* !important because the per-page rules are more specific than anything
     scoped selectors can reach generically (.cta-banner .btn:hover and
     friends). Hover is meant to change nothing at all here. */
  transform: none !important;
  box-shadow: none !important;
  opacity: inherit !important;
  filter: inherit !important;
  text-decoration: none !important;
  transition: none !important;
}

/* Cards that carried a resting shadow are flattened so their hover state,
   which is now shadowless, is identical to how they already look. */
body.ix .image-item,
body.ix .gallery-item,
body.ix .card-simple {
  box-shadow: none;
}

body.ix :focus-visible {
  outline: 2px solid var(--ix-ink-strong);
  outline-offset: 2px;
}

/* ── Home: blend into the 3amAli panel ───────────────────────────────────
   The hero ends on white and the product panel starts on cream, which met
   as a hard line across the page. The panel now fades in from the hero's
   white instead, and the grey half is blended the same way.             */

body.ix.ix-home .side-cream {
  background: linear-gradient(180deg, #ffffff 0%, #f8f2e8 20%, #f8f2e8 80%, #ffffff 100%);
}

body.ix.ix-home .side-gray {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 20%, #f0f0f0 80%, #ffffff 100%);
}

/* The blurred seam between the two halves runs the full height, so it has to
   fade out at the same rate as the panels or it leaves a smudge on white.
   It also has to end on the panels' own colours: the Arabic page mixed to
   #f5ede0 rather than the cream's #f8f2e8, which drew a visible line down
   the right of the seam where the French and English pages had none. */
body.ix.ix-home .blur-bridge {
  background: linear-gradient(to right, #f8f2e8, #f0f0f0);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* Right to left the grid puts the cream half on the right, so the seam has
   to mix the other way round. */
body.ix.ix-home:is([dir="rtl"], [dir="rtl"] *) .blur-bridge {
  background: linear-gradient(to left, #f8f2e8, #f0f0f0);
}

@media (max-width: 968px) {
  /* Stacked: the cream panel meets the hero, the grey one meets the section
     below it, and the existing bridge covers where the two of them meet. */
  body.ix.ix-home .side-cream {
    background: linear-gradient(180deg, #ffffff 0%, #f8f2e8 18%, #f8f2e8 100%);
  }

  body.ix.ix-home .side-gray {
    background: linear-gradient(180deg, #f0f0f0 0%, #f0f0f0 78%, #ffffff 100%);
  }
}

/* The colour running through the last word of the hero headline cycled
   every six seconds, fast enough to pull the eye off the sentence. Slow
   drift instead.

   The `!important` is deliberate: the blanket reduced-motion rule further up
   collapses every animation to 0.01ms, which is what we want for the reveals
   but stopped this one dead on any machine reporting reduced motion, such as
   Windows with animation effects switched off in Accessibility. Nothing here
   moves or scales, it is a hue drifting through text, so it keeps running. */
body.ix .shine {
  animation-duration: 16s !important;
}

/* The call to action moved out of the deleted ecosystem section. */
body.ix .ix-home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-home-cta-row {
  justify-content: flex-start;
}

/* Breathing room between a section heading and the copy under it. */
body.ix .section-title + .ix-prose,
body.ix .section-title + .section-sub,
body.ix .sec-title + .ix-prose {
  margin-top: 1.25rem;
}

body.ix .vision-inner .ix-prose > p + p {
  margin-top: 1.25rem;
}

/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Shorter, plain white, no rule under it, and genuinely fixed in place.
   ========================================================================== */

body.ix {
  --ix-nav-h: 56px;
  --ix-logo-size: 26px;
  /* `clip` rather than the pages' own `overflow-x: hidden`: hidden makes the
     body a scroll container, which silently breaks position:sticky. That is
     why the header scrolled away on every page except the three homepages,
     which happened not to set it. */
  overflow-x: clip;
}

body.ix > header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

body.ix > header nav.container {
  height: var(--ix-nav-h);
  gap: 1.25rem;
}

/* The wordmark sits tight against the mark and matches its height. */
body.ix .logo {
  gap: 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

body.ix .logo img {
  width: var(--ix-logo-size);
  height: var(--ix-logo-size);
  border-radius: 6px;
}

/* ── Buttons take their colour from the band they sit on ─────────────────
   A solid dark button on a black section is invisible, which is what the
   "Discover 3amAli" call to action on the closing banner had become.     */

body.ix .cta-section .btn,
body.ix .cta-section .btn-primary,
body.ix .cta-section .hero-cta,
body.ix .cta-section .primary-btn,
body.ix .cta-banner .btn,
body.ix .cta-banner .btn-primary,
body.ix .cta-banner .hero-cta,
body.ix .cta-banner .primary-btn,
body.ix .section-black .btn,
body.ix .section-black .btn-primary,
body.ix .section-black .hero-cta,
body.ix .section-black .primary-btn,
body.ix .ix-section--dark .btn,
body.ix .ix-section--dark .btn-primary {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

body.ix .cta-section .btn-secondary,
body.ix .cta-section .hero-cta-ghost,
body.ix .cta-section .secondary-btn,
body.ix .cta-banner .btn-secondary,
body.ix .cta-banner .hero-cta-ghost,
body.ix .cta-banner .secondary-btn,
body.ix .section-black .btn-secondary,
body.ix .section-black .hero-cta-ghost,
body.ix .section-black .secondary-btn,
body.ix .ix-section--dark .btn-secondary,
body.ix .ix-section--dark .hero-cta-ghost,
body.ix .ix-section--dark .secondary-btn,
body.ix .cta-section .ix-btn--secondary,
body.ix .cta-banner .ix-btn--secondary,
body.ix .section-black .ix-btn--secondary,
body.ix .ix-section--dark .ix-btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

/* ── Spacing around calls to action ──────────────────────────────────────
   Buttons were sitting right under the paragraph that introduces them.  */

body.ix .ix-btn-row,
body.ix .ix-home-cta-row,
body.ix .cta-actions,
body.ix .hero-actions,
body.ix .btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

body.ix p + .ix-btn-row,
body.ix p + .ix-home-cta-row,
body.ix p + .cta-actions,
body.ix p + .hero-actions,
body.ix .ix-prose + .ix-btn-row,
body.ix .ix-prose + .ix-home-cta-row,
body.ix .section-sub + .ix-home-cta-row,
body.ix .ix-lede + .cta-actions,
body.ix .ix-lede + .hero-actions {
  margin-top: 2.25rem;
}

/* A lone button that is a direct sibling of the copy above it. */
body.ix p + .ix-btn,
body.ix p + .btn,
body.ix p + .hero-cta,
body.ix p + .primary-btn,
body.ix p + .secondary-btn,
body.ix p + .btn-explore {
  margin-top: 2.25rem;
}

/* Two buttons in a row, or stacked on a narrow screen. */
body.ix .ix-btn + .ix-btn,
body.ix .btn + .btn,
body.ix .hero-cta + .hero-cta-ghost,
body.ix .primary-btn + .secondary-btn {
  margin-inline-start: 0;   /* the flex gap already spaces them */
}

@media (max-width: 640px) {
  body.ix .ix-btn-row,
  body.ix .ix-home-cta-row,
  body.ix .cta-actions,
  body.ix .hero-actions {
    gap: 0.875rem;
  }
}

/* The outline button's border was #e5e5e7 on white, 1.26:1, which barely
   read as a button at all. Still quiet, but visibly an edge. */
body.ix .ix-btn--secondary,
body.ix .btn-secondary,
body.ix .hero-cta-ghost,
body.ix .secondary-btn {
  border-color: rgba(0, 0, 0, 0.24);
}

/* ══ The ecosystem map ══════════════════════════════════════════════════════
   A map that pans and zooms cannot share a page with someone trying to
   scroll past it, so it does not. Closed, it is a still picture behind
   frosted glass that takes no input at all; open, it takes the whole screen
   and every gesture is unambiguously its own.

   The opening is one movement: the panel is pinned to the box it holds in
   the page, then released to fill the screen, so it grows out of where it
   was rather than appearing over the top of it. The behaviour is in
   public/js/ix-map.js.
   ========================================================================= */

body.ix .ix-map { position: relative; }

/* The box the map lives in, and the only thing the cover fills. No
   isolation here: the panel goes fixed at z-index 1400 when it opens, and a
   stacking context around it would trap that number inside this box, where
   the sticky site header at 1000 would then win and cover the close bar. */
body.ix .ix-map__frame { position: relative; }

body.ix .ix-map__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ix-bg);
  /* Tall enough to hold the whole tree at a size worth looking at, rather
     than a strip with a smudge in it. The full-screen rule overrides it. */
  height: clamp(420px, 68vh, 660px);
  transition:
    top 0.52s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.52s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.52s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.52s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.52s cubic-bezier(0.32, 0.72, 0, 1);
}

/* While the panel is out of the flow the page would close up behind it, so
   the space it left is held open. */
body.ix .ix-map__frame.is-lifted { min-height: var(--ix-map-h, 400px); }

/* Pinned: out of the flow, but still exactly where it was, ready to move. */
body.ix .ix-map__panel.is-fixed {
  position: fixed;
  z-index: 1400;
  border-radius: var(--ix-radius);
}

body.ix .ix-map__panel.is-full {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0;
}

/* The page holds still underneath rather than scrolling behind the map. */
body.ix.ix-map-open {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* ── Closed ───────────────────────────────────────────────────────────────
   The map underneath is inert: it never sees a wheel or a touch, so there is
   nothing to wrestle with on the way down the page. */

body.ix .ix-map__frame:not(.is-open) .ix-map__panel {
  pointer-events: none;
  filter: blur(3.5px) saturate(0.9);
  transform: scale(1.012);
  opacity: 0.95;
  transition: filter 0.45s ease, transform 0.45s ease, opacity 0.45s ease;
}

body.ix .ix-map__frame.is-open .ix-map__panel {
  filter: none;
  transform: none;
  opacity: 1;
}

body.ix .ix-map__cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: saturate(1.1) blur(1px);
  backdrop-filter: saturate(1.1) blur(1px);
  cursor: pointer;
  font: inherit;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

body.ix .ix-map__frame.is-open .ix-map__cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.ix .ix-map__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.375rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-full);
  background: var(--ix-bg);
  color: var(--ix-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.24s ease;
}

body.ix .ix-map__cover:hover .ix-map__open {
  transform: translateY(-1px);
  border-color: var(--ix-ink-muted);
}

body.ix .ix-map__cover:active .ix-map__open { transform: scale(0.985); }

/* ── Open ─────────────────────────────────────────────────────────────────
   A bar across the top and the controls floating in the corner, both plain:
   a hairline where one is needed and nothing else. */

body.ix .ix-map__bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  height: 56px;
  padding-inline: 1.125rem 0.75rem;
  border-bottom: 1px solid var(--ix-line);
  background: var(--ix-bg);
}

body.ix .ix-map__panel.is-fixed .ix-map__bar { display: flex; }

body.ix .ix-map__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ix-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.ix .ix-map__close {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 36px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--ix-radius-full);
  background: none;
  color: var(--ix-ink-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.18s ease, background-color 0.18s ease;
}

body.ix .ix-map__close:hover { color: var(--ix-ink); background: var(--ix-bg-raised); }

/* ── The tree itself ──────────────────────────────────────────────────────
   Drawn by public/js/ecosystem-mindmap.js, styled here so the map matches the
   rest of the site rather than carrying its own palette. */

body.ix .ix-map .diagram-canvas-wrapper {
  flex: 1;
  min-height: 0;
  cursor: grab;
}

body.ix .ix-map .diagram-canvas-wrapper.is-grabbing { cursor: grabbing; }

body.ix .ix-node rect {
  fill: var(--ix-bg);
  stroke: var(--ix-line);
  stroke-width: 1;
  transition: stroke 0.18s ease;
}

body.ix .ix-node text {
  fill: var(--ix-ink);
  pointer-events: none;
}

body.ix .ix-node--root rect { fill: var(--ix-ink-strong); stroke: var(--ix-ink-strong); }
body.ix .ix-node--root text { fill: #fff; }

body.ix .ix-node:hover rect { stroke: var(--ix-ink-muted); }
body.ix .ix-node--root:hover rect { stroke: var(--ix-ink-strong); }

body.ix .ix-edge {
  stroke: var(--ix-line);
  stroke-width: 1.5;
}

/* The chevron that opens a branch. It sits outside the node, on the side the
   children come out of, and turns to point down once they are showing. */
body.ix .ix-node__chev { cursor: pointer; }

body.ix .ix-node__chev-ring {
  fill: var(--ix-bg);
  stroke: var(--ix-line);
  stroke-width: 1;
  transition: stroke 0.18s ease, fill 0.18s ease;
}

body.ix .ix-node__chev-mark { stroke: var(--ix-ink-soft); }

body.ix .ix-node__chev:hover .ix-node__chev-ring { stroke: var(--ix-ink-muted); }
body.ix .ix-node__chev:hover .ix-node__chev-mark { stroke: var(--ix-ink); }

body.ix .ix-node__chev.is-open .ix-node__chev-ring {
  fill: var(--ix-bg-raised);
}

/* The zoom controls, floating in the corner of the map. Plain circles with a
   hairline, like everything else. */
body.ix .ix-map .diagram-controls {
  position: absolute;
  z-index: 6;
  bottom: 1.25rem;
  /* The page's own rule sets `right`, which would win over a logical
     property written before it; these come after, and are logical, so the
     Arabic map puts them on the other side without a second rule. */
  right: auto;
  left: auto;
  inset-inline-end: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

body.ix .ix-map__frame.is-open .diagram-controls {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s, visibility 0s linear 0s;
}

body.ix .ix-map .ctrl-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ix-line);
  border-radius: 50%;
  background: var(--ix-bg);
  color: var(--ix-ink-soft);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

body.ix .ix-map .ctrl-btn:hover { color: var(--ix-ink); border-color: var(--ix-ink-muted); }

@media (max-width: 640px) {
  body.ix .ix-map__bar { height: 52px; padding-inline: 0.875rem 0.5rem; }
  body.ix .ix-map__close span { display: none; }
  body.ix .ix-map__close { width: 36px; padding: 0; justify-content: center; }
  body.ix .ix-map__open { min-height: 42px; padding: 0 1.125rem; font-size: 0.875rem; }
  body.ix .ix-map .diagram-controls { bottom: 1rem; right: auto; left: auto; inset-inline-end: 1rem; gap: 0.3125rem; }
  body.ix .ix-map .ctrl-btn { width: 38px; height: 38px; }
}



/* ── News article ────────────────────────────────────────────────────────
   One layout for every article in every language. The reading column is the
   same measure the rest of the site uses, so an article sits on the same
   grid as the About page rather than in its own world.
   ========================================================================== */

body.ix .ix-article {
  padding-block: 4rem 5rem;
}

body.ix .ix-article > .container {
  max-width: 44rem;
}

body.ix .ix-article__head {
  margin-bottom: 2.5rem;
}

body.ix .ix-article__head h1 {
  max-width: 100%;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.875rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

body.ix .ix-article__head .ix-lede {
  max-width: 100%;
  margin: 0 0 1.5rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ix-ink-soft);
}

/* Byline, date and reading time, separated by a dot the markup does not
   have to carry. */
body.ix .ix-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ix-line);
  font-size: 0.875rem;
  color: var(--ix-ink-muted);
}

body.ix .ix-article__meta span + span::before {
  content: '·';
  margin-inline-end: 0.75rem;
  color: var(--ix-line);
}

body.ix .ix-article__cover {
  margin: 0 0 2.5rem;
}

body.ix .ix-article__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ix-radius);
  background: var(--ix-bg-raised);
}

/* ── The prose itself ──────────────────────────────────────────────────── */

body.ix .ix-article__body > *:first-child {
  margin-top: 0;
}

body.ix .ix-article__body p,
body.ix .ix-article__body li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ix-prose-ink);
}

body.ix .ix-article__body p {
  margin: 0 0 1.25rem;
}

body.ix .ix-article__body h2 {
  margin: 3rem 0 1rem;
  font-size: 1.5rem;
}

body.ix .ix-article__body h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.1875rem;
}

body.ix .ix-article__body ul,
body.ix .ix-article__body ol {
  margin: 0 0 1.25rem;
  padding-inline-start: 1.25rem;
}

body.ix .ix-article__body li {
  margin-bottom: 0.5rem;
}

body.ix .ix-article__body a {
  color: var(--ix-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ix-line);
}

body.ix .ix-article__body img,
body.ix .ix-article__body video {
  display: block;
  width: 100%;
  height: auto;
  margin: 2rem 0;
  border-radius: var(--ix-radius);
}

body.ix .ix-article__body blockquote {
  margin: 2rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--ix-ink-strong);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ix-ink);
}

body.ix .ix-article__body blockquote p:last-child {
  margin-bottom: 0;
}

body.ix .ix-article__body code {
  padding: 0.125em 0.375em;
  border-radius: 4px;
  background: var(--ix-bg-raised);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

body.ix .ix-article__body pre {
  margin: 2rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
  background: var(--ix-bg-sunken);
  line-height: 1.6;
}

body.ix .ix-article__body pre code {
  padding: 0;
  background: none;
  font-size: 0.8125rem;
}

/* Tables can be wider than the reading column, so they scroll on their own
   rather than pushing the page sideways. */
body.ix .ix-article__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9375rem;
}

body.ix .ix-article__body th,
body.ix .ix-article__body td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ix-line);
  text-align: start;
}

body.ix .ix-article__body th {
  background: var(--ix-bg-sunken);
  font-weight: 600;
}

body.ix .ix-article__body hr {
  margin: 3rem 0;
  border: 0;
  border-top: 1px solid var(--ix-line);
}

/* ── End matter ────────────────────────────────────────────────────────── */

body.ix .ix-article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ix-line);
}

body.ix .ix-article__foot .ix-eyebrow {
  margin-bottom: 0.75rem;
}

body.ix .ix-article__tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

body.ix .ix-article__tags li {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-full);
  font-size: 0.8125rem;
  color: var(--ix-ink-soft);
}

/* Reads and likes, at the foot of the article. Quiet next to the sharing
   row, since the number is information, not a call to action. */
body.ix .ix-article__engage {
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.ix .ix-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ix-ink-muted);
  font-variant-numeric: tabular-nums;
}

body.ix .ix-count svg { flex-shrink: 0; }
body.ix .ix-count [data-role="n"] { font-weight: 600; color: var(--ix-ink); }

body.ix .ix-like {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 38px;
  padding: 0 0.875rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-full);
  background: #fff;
  color: var(--ix-ink-soft);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

body.ix .ix-like svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: fill 0.18s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

body.ix .ix-like.is-on {
  color: var(--ix-accent);
  border-color: rgba(139, 26, 26, 0.35);
}

body.ix .ix-like.is-on svg {
  fill: var(--ix-accent);
  stroke: var(--ix-accent);
  transform: scale(1.12);
}

body.ix .ix-like:disabled { opacity: 0.6; cursor: wait; }

body.ix .ix-article__share-row {
  display: flex;
  gap: 0.5rem;
}

body.ix .ix-article__share-row button.ix-social-link {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

body.ix .ix-article__back {
  margin-top: 3rem;
}

@media (max-width: 640px) {
  body.ix .ix-article {
    padding-block: 2.5rem 3.5rem;
  }

  body.ix .ix-article__foot {
    gap: 1.75rem;
  }
}


/* ── In-article blocks ───────────────────────────────────────────────────
   A comparison table is the wrong shape on a phone: it either shrinks the
   text to nothing or scrolls sideways, and a reader will do neither. These
   blocks are written as cards in the article's own markup and reflow into a
   single readable column instead, so nothing on a news page has to be
   scrolled sideways to be read.
   ========================================================================== */

body.ix .ix-players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

body.ix .ix-players__item {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
  background: var(--ix-bg-sunken);
}

body.ix .ix-players__name {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ix-ink-strong);
}

body.ix .ix-players__what {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ix-ink-soft);
}

body.ix .ix-players__tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ix-radius-full);
  background: #fff;
  border: 1px solid var(--ix-line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ix-ink-muted);
}

/* The card that is us reads as the publisher's own entry rather than as a
   louder claim than the facts around it. */
body.ix .ix-players__item--self {
  background: var(--ix-ink-strong);
  border-color: var(--ix-ink-strong);
}

body.ix .ix-players__item--self .ix-players__name { color: #fff; }
body.ix .ix-players__item--self .ix-players__what { color: rgba(255, 255, 255, 0.78); }

body.ix .ix-players__item--self .ix-players__tag {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

body.ix .ix-players__item--self a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Pulled-out figures, for the numbers worth stopping on. */
body.ix .ix-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

body.ix .ix-stat__item {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
}

body.ix .ix-stat__value {
  display: block;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ix-ink-strong);
}

body.ix .ix-stat__label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ix-ink-soft);
}

/* Figures: the caption belongs to the picture, not to the paragraph after. */
body.ix .ix-article__body figure {
  margin: 2.5rem 0;
}

body.ix .ix-article__body figure img {
  margin: 0;
}

body.ix .ix-article__body figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ix-ink-muted);
}

/* A sources list reads as a reference block, not as more body copy. */
body.ix .ix-sources {
  margin: 2rem 0 0;
  padding: 1.25rem 1.25rem 1.25rem 2.25rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius);
  background: var(--ix-bg-sunken);
}

body.ix[dir="rtl"] .ix-sources,
body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-sources {
  padding: 1.25rem 2.25rem 1.25rem 1.25rem;
}

body.ix .ix-sources li {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.ix .ix-sources li:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  body.ix .ix-players,
  body.ix .ix-stat {
    grid-template-columns: 1fr;
  }

  body.ix .ix-players__item,
  body.ix .ix-stat__item {
    padding: 1rem;
  }

  /* If a real table ever does appear, keep the type legible and let the
     table scroll inside itself rather than shrinking to fit. */
  body.ix .ix-article__body table {
    font-size: 0.875rem;
  }

  body.ix .ix-article__body th,
  body.ix .ix-article__body td {
    padding: 0.5rem 0.625rem;
  }
}

/* ══ Reading the article out loud ═══════════════════════════════════════════
   A line of controls with nothing behind them: no boxes, no shadows, no
   colour that shouts. The page is what the reader came for, so the player
   sits in the middle, plain, and gets out of the way. Pressing it turns the
   same line into a transport — back fifteen, pause, forward fifteen, speed —
   that stays below the header for as long as the article is being read.
   ========================================================================= */

/* Hidden until the script says the browser can do this, so a page with no
   JavaScript never shows a button that would do nothing. */
body.ix .ix-read { display: none; }

body.ix .ix-read.is-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 0 1.75rem;
  padding: 0.5rem 0;
}

body.ix .ix-read.is-failed { display: none; }

/* Sticky for as long as the reading is going on — pausing must not take the
   controls away from someone who has scrolled down the page. A sticky box
   keeps its place in the flow, so nothing moves when this switches on. */
body.ix .ix-read.is-on {
  position: sticky;
  top: calc(var(--ix-nav-h) + 0.5rem);
  z-index: 30;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-full);
  background: var(--ix-bg);
}

/* ── The controls ─────────────────────────────────────────────────────────
   Every one of them is a bare icon: no fill, no border, no shadow, and the
   same ink as the text around them. Hover is the only decoration. */

body.ix .ix-read__start,
body.ix .ix-read__skip,
body.ix .ix-read__rate,
body.ix .ix-read__stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ix-ink);
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.18s ease, opacity 0.18s ease;
}

body.ix .ix-read__start {
  gap: 0.5rem;
  min-height: 40px;
  padding-inline: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

body.ix .ix-read__start:hover,
body.ix .ix-read__skip:hover,
body.ix .ix-read__rate:hover,
body.ix .ix-read__stop:hover { color: var(--ix-ink-strong); }

body.ix .ix-read__skip:hover svg { opacity: 1; }

/* The skip pair and the speed only mean anything once it is playing; the
   label only means anything before that. */
body.ix .ix-read__skip,
body.ix .ix-read__rate,
body.ix .ix-read__stop { display: none; }

body.ix .ix-read.is-on .ix-read__skip,
body.ix .ix-read.is-on .ix-read__rate,
body.ix .ix-read.is-on .ix-read__stop { display: inline-flex; }

body.ix .ix-read.is-on .ix-read__label { display: none; }
body.ix .ix-read.is-on .ix-read__start { padding-inline: 0.25rem; }

body.ix .ix-read__skip {
  position: relative;
  width: 40px;
  height: 40px;
}

body.ix .ix-read__skip svg { opacity: 0.9; }

/* The number sits in the open middle of the arrow loop, the way a player
   draws it. The loop's centre is just below the button's, hence 52%. */
body.ix .ix-read__skip-n {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  pointer-events: none;
}

body.ix .ix-read__rate {
  /* A speed reads left to right in every language: without this the Arabic
     page shows "×1". */
  direction: ltr;
  unicode-bidi: isolate;
  min-width: 34px;
  height: 34px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ix-ink-soft);
}

body.ix .ix-read__stop {
  width: 32px;
  height: 32px;
  color: var(--ix-ink-muted);
}

/* The voice stopped answering part-way. The button says so and stops taking
   clicks, rather than disappearing and leaving the reader wondering. */
body.ix .ix-read.is-broken .ix-read__start {
  color: var(--ix-ink-muted);
  cursor: default;
}

body.ix .ix-read__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* One icon slot, three states: play, pause, loading. */
body.ix .ix-read__i-pause,
body.ix .ix-read__spin { display: none; }

body.ix .is-playing .ix-read__i-play { display: none; }
body.ix .is-playing .ix-read__i-pause { display: block; }

body.ix .is-loading .ix-read__i-play,
body.ix .is-loading .ix-read__i-pause { display: none; }

body.ix .is-loading .ix-read__spin {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ix-line);
  border-top-color: var(--ix-ink);
  border-radius: 50%;
  animation: ix-read-spin 0.7s linear infinite;
}

@keyframes ix-read-spin { to { transform: rotate(360deg); } }

/* ── What is being read ───────────────────────────────────────────────────
   The word, and nothing else. A paragraph being read used to sit in a tinted
   box with a rule down its edge, which framed the paragraph rather than
   showing the reading — so the box is gone and the colour moved onto the
   words themselves, where the eye already is.

   The green is the one out of the home page's shine, used the way a
   highlighter is: behind the text, with the text left the colour it was. */

body.ix .ix-read-w {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.1s linear;
}

body.ix .ix-read-w.is-on {
  background: var(--ix-read);
  color: var(--ix-ink-strong);
}

/* A table row lights up instead of a word, because the sentence being read is
   the row, not anything written in one place on the page. */
body.ix .ix-article__body tr.ix-read-on {
  background: var(--ix-read-soft);
}

/* What is left is the handful of things with no words of their own being
   said — a picture, a code block. They take the same green, quietly. */
body.ix .ix-read-on {
  background: var(--ix-read-soft);
  border-radius: var(--ix-radius-sm);
  transition: background-color 0.2s ease;
}

@media (max-width: 640px) {
  body.ix .ix-read.is-ready { gap: 0.125rem; }
  body.ix .ix-read.is-on { top: calc(var(--ix-nav-h) + 0.375rem); }
  body.ix .ix-read__start { font-size: 0.875rem; }
  body.ix .ix-read__skip { width: 36px; height: 36px; }
}



/* ══ The 3amAli presentation page ══════════════════════════════════════════
   Three shapes, and nothing else: a cream card the page opens on, one long
   cream band carrying the argument, and a sand band that closes it on the
   call to action. The bands meet each other on a curve rather than a rule,
   which is the only ornament here.

   Flat by rule. No shadow, no glow, no gradient behind anything: colour,
   a one-pixel edge and a radius do all the separating, because that is what
   3amAli itself looks like and a product page that outshines its product is
   lying about it.

   The device is the site's own two crops and reads as one phone passing
   through the page. Its head is cropped by the opening card's own bottom
   edge; its foot comes back at the top of the closing band, where the band's
   curve covers the crop's cut. Neither is faded — an edge does the cutting,
   which is why the phone looks like an object and not a picture.

   Every string on a rendered page is in that page's language, the
   demonstration screens included. Nothing here assumes Arabic.
   ========================================================================= */

body.ix.p-3amali {
  /* 3amAli's own three, and IyedeX's ink under them. */
  --a-red: #9f0b0d;
  --a-red-deep: #7a080a;
  --a-cream: #f8f2e8;
  --a-sand: #f2e4c9;
  --a-ink: #14100c;
  --a-ink-soft: #4a3f33;
  --a-ink-muted: #6b6053;
  --a-edge: rgba(159, 11, 13, 0.14);
  --a-edge-strong: rgba(159, 11, 13, 0.32);

  /* Height of the curve a band draws into the band above it. */
  --a3-edge: clamp(72px, 9vw, 148px);
  --a3-radius: clamp(20px, 2.4vw, 34px);

  /* Width of the device crop. The device body is 64.5% of that width. */
  --a3-phone-w: clamp(18rem, 62vw, 48rem);
}

/* ── The card the page opens on ───────────────────────────────────────────
   Everything centred, because the first screen has one thing to say and two
   things to offer. The card clips, so the head of the device is cut by the
   card's own bottom edge rather than by a mask.                          */

/* The card starts just under the breadcrumb: the site's section rhythm would
   open the page on an empty screen. */
body.ix main > section.a3-open {
  padding-top: clamp(1rem, 2vw, 1.75rem);
  padding-bottom: 0;
}

body.ix .a3-card {
  overflow: hidden;
  border-radius: var(--a3-radius);
  background: var(--a-cream);
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.25rem, 4vw, 3rem) 0;
  text-align: center;
}

body.ix .a3-card__say {
  max-width: 40rem;
  margin-inline: auto;
}

body.ix .a3-title {
  margin: 0;
  font-size: clamp(2rem, 1.1rem + 3.3vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--a-ink);
}

body.ix [dir="rtl"] .a3-title { letter-spacing: normal; line-height: 1.28; }

body.ix .a3-title b {
  display: block;
  font-weight: inherit;
  color: var(--a-red);
}

body.ix .a3-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.875rem;
}

/* The head of the device, cropped by the card. The negative margin is what
   pulls the crop's own cut edge past the card's bottom, so what the reader
   sees ends on the card's edge and not on a torn image. */
body.ix .a3-card__device {
  display: block;
  width: var(--a3-phone-w);
  height: auto;
  /* The phone is deliberately wider than the card's text column, so `auto`
     margins are no help: with negative free space they stop being symmetric,
     and left and right resolve differently under `dir="rtl"`. Splitting the
     difference explicitly leaves the box exactly constrained, so it lands in
     the same place in French and in Arabic, over-wide or not. */
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem) calc(var(--a3-phone-w) * -0.045);
  margin-inline: calc((100% - var(--a3-phone-w)) / 2);
  user-select: none;
}

/* ── The bands, and the curve that joins them ─────────────────────────────
   A cap is painted in its own band's colour and sits outside the band, so it
   eats into the neighbour above or below without that neighbour knowing.  */

body.ix .a3-band {
  position: relative;
  isolation: isolate;
}

body.ix .a3-band > * { position: relative; z-index: 3; }

body.ix .a3-band > .a3-band__fill { position: absolute; inset: 0; z-index: 0; }
body.ix .a3-band > .a3-band__cap { z-index: 2; }
body.ix .a3-band__device { position: relative; z-index: 1; }

body.ix .a3-band__cap {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--a3-edge);
  display: block;
  pointer-events: none;
}

/* Overlapped by a pixel, so no hairline of the neighbour shows through the
   seam when a band's height lands on a fractional pixel. */
body.ix .a3-band__cap--top { bottom: calc(100% - 1px); }
body.ix .a3-band__cap--bottom { top: calc(100% - 1px); transform: scale(-1, -1); }

/* A band keeps its own rhythm rather than the site's section padding, and
   never takes the hairline rule between sections: the curve is the join. */
body.ix main > section.a3-band { padding-block: 0; }
body.ix main > section.a3-band,
body.ix main > section.a3-band + section { border-top: 0; }

body.ix .a3-sheet { display: flow-root; margin-top: var(--a3-edge); }
body.ix .a3-sheet > .a3-band__fill { background: var(--a-cream); }
body.ix .a3-sheet > .a3-band__cap { color: var(--a-cream); }

/* The sand band's upper wave is drawn over the last strip of this one, so
   the content has to clear it. */
body.ix main > section.a3-sheet { padding-bottom: var(--a3-edge); }

/* The questions close the page, on the site's own white. */
body.ix main > section.a3-close { padding-top: clamp(3rem, 6vw, 5rem); }

/* ── A part of the argument inside the cream band ─────────────────────── */

body.ix .a3-part { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
body.ix .a3-part[id] { scroll-margin-top: calc(var(--ix-nav-h) + 1.5rem); }

body.ix .a3-part__head { max-width: 44rem; }
body.ix .a3-part__head h2 { margin: 0; color: var(--a-ink); }

body.ix .a3-part__lede {
  margin: 0.875rem 0 0;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--a-ink-soft);
}

body.ix.p-3amali .ix-eyebrow { color: var(--a-red); }
body.ix [dir="rtl"] .ix-eyebrow { letter-spacing: normal; text-transform: none; font-size: 0.9375rem; }

/* Cards on cream: an edge and a fill, nothing under them. */
/* ── What it can do ───────────────────────────────────────────────────────
   Four things, each opening on a drawing of itself. No card: the drawing
   is the edge, and the column below it is a short title and one line. The
   line work is the page's own two colours and nothing else.            */

body.ix .a3-cans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

body.ix .a3-can h3 {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--a-ink);
}

body.ix .a3-can p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--a-ink-soft);
}

/* The drawings. One flat weight, one accent, no fill that is not sand. */
body.ix .a3-can__art {
  display: block;
  width: 100%;
  max-width: 8.5rem;
  height: auto;
}

body.ix .a3-can__art .bb {
  fill: var(--a-cream);
  stroke: var(--a-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

body.ix .a3-can__art :is(.ln, .hs, .ms) {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ix .a3-can__art .ln { stroke: var(--a-ink); }
body.ix .a3-can__art .hs { stroke: var(--a-red); }
body.ix .a3-can__art .ms { stroke: var(--a-ink-muted); }
body.ix .a3-can__art .hf { fill: var(--a-red); }

/* The cream band is the same colour the shapes are filled with, so the
   filled ones take the sand instead and keep their edge. */
body.ix .a3-sheet .a3-can__art .bb { fill: var(--a-sand); }
body.ix .a3-sheet .a3-can__art rect.hf { stroke: var(--a-red); stroke-width: 2; }

/* Two of these read left to right — a picture into an answer, one device
   into another — so in Arabic the whole drawing is mirrored. The other two
   are symmetric about the same axis and come through unchanged. */
body.ix:is([dir="rtl"], [dir="rtl"] *) .a3-can__art { transform: scaleX(-1); }

/* ── Buttons, in the product's red ────────────────────────────────────── */

body.ix .a3-band .ix-btn--primary,
body.ix .a3-card .ix-btn--primary {
  background: var(--a-red);
  border-color: var(--a-red);
  color: #fff;
}

body.ix .a3-band .ix-btn--primary:hover,
body.ix .a3-card .ix-btn--primary:hover {
  background: var(--a-red-deep);
  border-color: var(--a-red-deep);
}

body.ix .a3-band .ix-btn--secondary,
body.ix .a3-card .ix-btn--secondary {
  background: transparent;
  color: var(--a-red);
  border-color: var(--a-edge-strong);
}

body.ix .a3-band .ix-btn--secondary:hover,
body.ix .a3-card .ix-btn--secondary:hover { border-color: var(--a-red); }

/* ── The subjects, alternating ────────────────────────────────────────── */

/* ── The domains ──────────────────────────────────────────────────────────
   The list the app itself shows: a glyph on a sand tile, the name, the line
   that says what it is for, and the way in. Every one of them is on the
   page, and each row is a door into that domain in the app.             */

body.ix .a3-doms {
  display: flex;
  flex-direction: column;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--a-edge);
}

body.ix .a3-dom {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 1.25rem);
  padding-block: clamp(1rem, 2vw, 1.375rem);
  border-bottom: 1px solid var(--a-edge);
  text-decoration: none;
  color: inherit;
}

body.ix .a3-dom__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--a-sand);
  color: var(--a-red);
}

body.ix .a3-dom__say { flex: 1 1 auto; min-width: 0; }

body.ix .a3-dom__h {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--a-ink);
}

body.ix .a3-dom__p {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--a-ink-soft);
}

body.ix .a3-dom__go {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--a-ink-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .a3-dom__go { transform: scaleX(-1); }

body.ix .a3-dom:hover .a3-dom__go { color: var(--a-red); transform: translateX(3px); }
body.ix:is([dir="rtl"], [dir="rtl"] *) .a3-dom:hover .a3-dom__go { transform: scaleX(-1) translateX(3px); }

body.ix .a3-doms__more {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  font-size: 0.9375rem;
  color: var(--a-ink-muted);
}

body.ix .a3-doms__more a {
  color: var(--a-ink-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.ix .a3-doms__more a:hover { color: var(--a-red); }

/* ── The band the page hands over on ──────────────────────────────────────
   3amAli's own darker cream. It sits directly against the paler band above
   it with no margin between them, and its own upper curve is the boundary:
   sand drawn over cream, so the two colours meet on one wave and there is
   no strip of page left showing between them. The same curve runs along its
   foot, into the white the questions sit on.

   The device is layered under that upper curve and over the sand, so the
   crop's cut edge is behind the wave and the phone stands on the darker
   colour.                                                               */

body.ix .a3-try { display: flow-root; }
body.ix .a3-try > .a3-band__fill { background: var(--a-sand); }
body.ix .a3-try > .a3-band__cap { color: var(--a-sand); }

body.ix main > section.a3-try {
  padding-block: 0 clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--a3-edge);
}

/* Over the wave rather than under it: the device carries the wave's own
   shape as a mask, so what is cut is its top edge and not a straight line
   across it. */
body.ix .a3-try__go {
  display: block;
  position: relative;
  z-index: 3;
  text-decoration: none;
  text-align: center;
}

body.ix .a3-try__device {
  display: block;
  width: var(--a3-phone-w);
  height: auto;
  margin: calc(var(--a3-edge) * -0.6) auto 0;
  user-select: none;

  /* The crop's cut is a straight line and the boundary above it is a curve,
     so the cut is masked with that same curve instead of being hidden
     behind it. The mask is the band's own path, laid across the viewport at
     the same width and height the band draws it, and offset so its curve
     falls exactly where the band's does. What is left is a device whose top
     edge is the wave: cream above it, darker cream under it. */
  --a3-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none"><path fill="black" d="M0,124 C 220,84 400,136 720,128 C 1000,120 1200,80 1440,96 L1440,200 L0,200 Z"/></svg>');
  -webkit-mask-image: var(--a3-wave), linear-gradient(black, black);
  mask-image: var(--a3-wave), linear-gradient(black, black);
  -webkit-mask-size: 100vw var(--a3-edge), 100% 100%;
  mask-size: 100vw var(--a3-edge), 100% 100%;
  -webkit-mask-position: center calc(var(--a3-edge) * -0.4), center calc(var(--a3-edge) * 0.56);
  mask-position: center calc(var(--a3-edge) * -0.4), center calc(var(--a3-edge) * 0.56);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The two words are the button: the phone above it is the same link, so
   tapping either lands in the same place. */
body.ix .a3-try__say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-inline: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--ix-radius-full);
  background: var(--a-red);
  color: #ffffff;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.18s ease;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .a3-try__say { letter-spacing: normal; }

body.ix .a3-try__go:hover .a3-try__say { background: var(--a-red-deep); }

/* ── Questions ────────────────────────────────────────────────────────── */

body.ix .a-faq { max-width: 46rem; margin-top: 2.5rem; }
body.ix .a-q { border-bottom: 1px solid var(--ix-line); }

body.ix .a-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1875rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ix-ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease;
}

body.ix .a-q summary::-webkit-details-marker { display: none; }
body.ix .a-q summary:hover { color: var(--a-red); }

body.ix .a-q summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

body.ix .a-q[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
body.ix .a-q p { margin: 0 0 1.1875rem; font-size: 0.9375rem; line-height: 1.65; color: var(--ix-ink-soft); }

/* ── Narrower ─────────────────────────────────────────────────────────────
   The device keeps doing exactly what it does on a wide screen — cropped by
   the card at the top, rising out of the band at the bottom — and simply
   takes the width it needs to still read as a phone.                     */

@media (max-width: 900px) {
  body.ix.p-3amali {
    --a3-edge: clamp(96px, 22vw, 130px);
    --a3-phone-w: min(98vw, 26rem);
  }

  body.ix .a3-dom { align-items: flex-start; }
  body.ix .a3-dom__tile { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
  body.ix .a3-card { padding-inline: clamp(1rem, 5vw, 2rem); }
  body.ix .a3-cans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.ix .a3-cans { grid-template-columns: 1fr; gap: 2.25rem; }
  body.ix .a3-can__art { max-width: 7rem; }
}

@media (max-width: 560px) {
  body.ix .a3-actions { flex-direction: column; align-items: stretch; }
  body.ix .a3-actions .ix-btn { width: 100%; }
}

/* ══ Legal documents ═════════════════════════════════════════════════════════
   The privacy policy, the terms, and their per-product counterparts. Set as
   documents rather than as web pages: one measured column of prose, a quiet
   contents rail beside it that follows the reader down, and numbered parts
   separated by a hairline.

   These rules used to be pasted into a style block inside all sixteen legal
   pages, in 3amAli's cream and red. They live here once now, in the site's
   own ink, so a legal page looks like the rest of iyedex.tn and a change to
   it is made in one file rather than sixteen.
   ========================================================================= */

body.ix .lg {
  --lg-measure: 40rem;
}

/* Each page's own inline stylesheet styles bare header/nav/footer for the
   site chrome: header is fixed, nav is a flex row. The masthead and the
   contents rail are a header and a nav inside main, so both are undone. */
body.ix .lg .lg-head { position: static; inset: auto; z-index: auto; background: none; }
body.ix .lg .lg-rail { display: block; justify-content: normal; align-items: normal; }

/* ── The masthead ───────────────────────────────────────────────────────── */

body.ix .lg-head {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--ix-line);
}

body.ix .lg-head__eyebrow {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
}

body.ix .lg-head h1 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ix-ink);
}

body.ix .lg-head__lede {
  margin: 1.25rem 0 0;
  max-width: var(--lg-measure);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ix-ink-soft);
}

/* The line of facts under the title: date, scope, law. */
body.ix .lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

body.ix .lg-meta div { padding-block: 0.5rem; }

body.ix .lg-meta dt {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
}

body.ix .lg-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ix-ink);
}

/* ── The two columns ────────────────────────────────────────────────────── */

body.ix .lg-doc {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

body.ix .lg .lg-rail {
  position: sticky;
  top: calc(var(--ix-nav-h) + 1.5rem);
  align-self: start;
  max-height: calc(100vh - var(--ix-nav-h) - 3rem);
  overflow-y: auto;
  padding-inline-end: 0.5rem;
}

body.ix .lg-rail__h {
  margin: 0 0 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
}

body.ix .lg-rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-inline-start: 1px solid var(--ix-line);
}

body.ix .lg-rail a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-inline-start: -1px;
  border-inline-start: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ix-ink-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body.ix .lg-rail a:hover { color: var(--ix-ink); }

body.ix .lg-rail a.is-here {
  color: var(--ix-ink);
  border-inline-start-color: var(--ix-ink);
  font-weight: 500;
}

body.ix .lg-rail li.is-sub a { padding-inline-start: 2rem; font-size: 0.8125rem; }

/* B2C / B2B / B2G: which class of reader a part is written for. */
body.ix .lg-rail__tag {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ix-ink-soft);
}

/* ── A part ─────────────────────────────────────────────────────────────── */

body.ix .lg-part { scroll-margin-top: calc(var(--ix-nav-h) + 1.5rem); }

/* A part with no number over it: the shorter documents are one run of
   sections rather than four numbered parts, so there is nothing to cite. */
body.ix .lg-part--plain > .lg-s:first-of-type { margin-top: 1.25rem; }

body.ix .lg-part + .lg-part {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--ix-line);
}

body.ix .lg-part__no {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ix-ink-muted);
}

body.ix .lg-part__no b { color: var(--ix-ink); font-weight: 600; }

body.ix .lg-part__h {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ix-ink);
}

body.ix .lg-part__lede {
  margin: 1rem 0 0;
  max-width: var(--lg-measure);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ix-ink-soft);
}

/* A product inside a part: 3amAli today, more later. */
body.ix .lg-product {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-sm);
  background: var(--ix-bg-sunken);
  scroll-margin-top: calc(var(--ix-nav-h) + 1.5rem);
}

body.ix .lg-product__h {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ix-ink);
}

body.ix .lg-product__lede {
  margin: 0.625rem 0 0;
  max-width: var(--lg-measure);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ix-ink-soft);
}

body.ix .lg-product .lg-s { margin-top: 1.75rem; }
body.ix .lg-product .lg-s + .lg-s { border-top: 1px solid var(--ix-line); padding-top: 1.75rem; }

/* ── A section of prose ─────────────────────────────────────────────────── */

body.ix .lg-s {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  scroll-margin-top: calc(var(--ix-nav-h) + 1.5rem);
}

body.ix .lg-s__h {
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ix-ink);
}

body.ix .lg-s p {
  margin: 0 0 1.125rem;
  max-width: var(--lg-measure);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ix-ink-soft);
}

body.ix .lg-s ul {
  margin: 0 0 1.125rem;
  padding-inline-start: 0;
  max-width: var(--lg-measure);
  list-style: none;
}

body.ix .lg-s li {
  position: relative;
  margin-bottom: 0.625rem;
  padding-inline-start: 1.125rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ix-ink-soft);
}

body.ix .lg-s li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ix-ink-muted);
}

body.ix .lg-s strong { color: var(--ix-ink); font-weight: 600; }
body.ix .lg-s a { color: var(--ix-ink); text-underline-offset: 0.2em; }
body.ix .lg-s > :last-child { margin-bottom: 0; }

/* ── The closing pair of actions ────────────────────────────────────────── */

body.ix .lg-end {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--ix-line);
  border-radius: var(--ix-radius-sm);
  background: var(--ix-bg-sunken);
}

body.ix .lg-end h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ix-ink);
}

body.ix .lg-end p {
  margin: 0.5rem 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ix-ink-soft);
}

body.ix .lg-end .ix-btn-row { margin-top: 1.5rem; }

/* ── Arabic ─────────────────────────────────────────────────────────────────
   Uppercasing and letter-spacing do nothing for Arabic but break the joins,
   so the small caps labels are set plainly and a size larger instead.
   ========================================================================= */

body.ix:is([dir="rtl"], [dir="rtl"] *) :is(.lg-head__eyebrow, .lg-meta dt, .lg-rail__h, .lg-part__no) {
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.875rem;
}

body.ix:is([dir="rtl"], [dir="rtl"] *) .lg-meta dt { font-size: 0.8125rem; }
body.ix:is([dir="rtl"], [dir="rtl"] *) :is(.lg-head h1, .lg-part__h) { letter-spacing: normal; line-height: 1.3; }
body.ix:is([dir="rtl"], [dir="rtl"] *) .lg-rail a { padding: 0.5rem 1rem 0.5rem 0; }

/* ── Narrower ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  body.ix .lg-doc { grid-template-columns: 1fr; gap: 2rem; }
  body.ix .lg .lg-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 1.25rem 0 1.75rem;
    border-bottom: 1px solid var(--ix-line);
  }
  body.ix .lg-rail ol { columns: 2; column-gap: 2rem; border: 0; }
  body.ix .lg-rail a { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; }
  body.ix .lg-rail li.is-sub a { padding-inline-start: 0.875rem; }
  body.ix .lg-rail a.is-here { border-inline-start: 0; }
}

@media (max-width: 560px) {
  body.ix .lg-rail ol { columns: 1; }
  body.ix .lg-meta { gap: 0 1.75rem; }
  body.ix .lg-end .ix-btn-row { flex-direction: column; align-items: stretch; }
  body.ix .lg-end .ix-btn { width: 100%; }
}

/* ── Printed ────────────────────────────────────────────────────────────────
   A legal page is the one page on a site that people do print.
   ========================================================================= */

@media print {
  body.ix > header, body.ix .breadcrumb, body.ix footer,
  body.ix .lg-rail, body.ix .lg-end, body.ix .mobile-nav-links,
  body.ix .mobile-menu-overlay { display: none !important; }
  body.ix .lg-doc { display: block; padding: 0; }
  body.ix .lg { --lg-measure: 100%; }
  body.ix .lg-part { break-inside: avoid-page; }
  body.ix .lg-s { break-inside: avoid-page; }
  body.ix .lg-product { background: none; border-color: #ccc; }
  body.ix .lg-s a { color: inherit; text-decoration: underline; }
}

/* ══ The three solutions, on the home page ═══════════════════════════════════
   Who IyedeX builds for, drawn rather than boxed. Three bordered cards said
   nothing the words inside them did not, and lifted on hover with a shadow
   under them; each one opens on a picture of itself now, and the box is gone.

   These rules live here rather than in the home page's own style block
   because there are four home pages and this is one definition.
   ========================================================================= */

body.ix .ix-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

/* On the company page the section heading already sets the gap above. */
body.ix .ix-wide .ix-pillars { margin-top: 0; }

body.ix .ix-pillar__art {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: auto;
}

body.ix .ix-pillar__art .ln {
  fill: none;
  stroke: var(--ix-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ix .ix-pillar__art .hs {
  fill: none;
  stroke: var(--ix-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.ix .ix-pillar__art .bb {
  fill: var(--ix-bg-sunken);
  stroke: var(--ix-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

body.ix .ix-pillar__art .hf { fill: var(--ix-accent); }

body.ix .ix-pillar__tag {
  display: block;
  margin-top: 1.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ix-ink-muted);
}

body.ix .ix-pillar h3 {
  margin: 0.5rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ix-ink);
}

body.ix .ix-pillar p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ix-ink-soft);
}

/* The drawings read left to right: work going into a process and a thing
   coming out of it, so in Arabic that one is mirrored. The other two are
   symmetric about the same axis and come through unchanged. */
body.ix:is([dir="rtl"], [dir="rtl"] *) .ix-pillar__art { transform: scaleX(-1); }

@media (max-width: 900px) {
  body.ix .ix-pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  body.ix .ix-pillar__art { max-width: 7.5rem; }
}

/* ── The document's own type scale ────────────────────────────────────────
   The site-wide heading sizes are written as `main h2` and `section h2`,
   which carry two element names and so outrank a single class: a part's
   heading was rendering at 36px where the document asks for 32, and on the
   shorter documents a section heading landed at 36 where it asks for 17.
   The sizes are restated here with a selector heavy enough to win, rather
   than the generic rule being unpicked for every page that uses it.
   ========================================================================= */

body.ix .lg .lg-body .lg-part__h { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
body.ix .lg .lg-body .lg-s__h { font-size: 1.0625rem; }
body.ix .lg .lg-body .lg-product__h { font-size: 1.25rem; }

/* ══ News ═══════════════════════════════════════════════════════════════════
   One article, two shapes.

   `.ix-news--rows` is the shape a home page uses, where the news is one
   section among many: a square thumbnail with the headline beside it, two
   to a row, so six articles cost the height of three.

   `.ix-news--tiles` is the shape the news page itself uses, where the
   articles *are* the page: the picture is the card, full width, with the
   headline under it.

   In both, the card is only picture, headline, section and date, in that
   order. The description, the byline and the "read more" arrow the cards
   used to carry said nothing a reader could not already see, and the box
   around them, its border and its lift on hover said less. What is left is
   the article.
   ========================================================================= */

body.ix .ix-news {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ix .ix-news__a {
  display: grid;
  text-decoration: none;
  color: inherit;
}

/* The picture. A fixed ratio rather than a fixed height, so a row of cards
   lines up whatever the source images measure. */
body.ix .ix-news__shot {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ix-bg-raised);
}

body.ix .ix-news .ix-news__h {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ix-ink);
  /* Three lines is enough for any headline the site writes; past that the
     cards in a row stop lining up. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.ix .ix-news__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.6875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

body.ix .ix-news__cat { color: var(--ix-ink-soft); font-weight: 500; }
body.ix .ix-news__date { color: var(--ix-ink-muted); }

/* The whole card is the link, but only the headline answers to the cursor:
   a lift and a shadow would put a box back around a card that no longer
   has one. */
body.ix .ix-news__a:hover .ix-news__h,
body.ix .ix-news__a:focus-visible .ix-news__h {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.ix .ix-news__a:focus-visible {
  outline: 2px solid var(--ix-accent);
  outline-offset: 6px;
  border-radius: var(--ix-radius-sm);
}

/* ── Rows: thumbnail beside the headline ──────────────────────────────── */

body.ix .ix-news--rows {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3.5rem;
}

body.ix .ix-news--rows .ix-news__a {
  grid-template-columns: 9.25rem minmax(0, 1fr);
  gap: 1.375rem;
  align-items: start;
}

body.ix .ix-news--rows .ix-news__h { font-size: 1.0625rem; line-height: 1.45; }

/* ── Tiles: the picture is the card ───────────────────────────────────── */

body.ix .ix-news--tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.25rem 2rem;
}

body.ix .ix-news--tiles .ix-news__body { margin-top: 1.125rem; }
body.ix .ix-news--tiles .ix-news__h { font-size: 1.25rem; line-height: 1.35; }

/* ── The line above the list ──────────────────────────────────────────── */

body.ix .ix-news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

body.ix .ix-news-head > div { min-width: 0; }

body.ix .ix-news-more {
  flex: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ix-ink);
  text-decoration: none;
  white-space: nowrap;
}

body.ix .ix-news-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Filtering by subject ─────────────────────────────────────────────────
   A row of links, not a control: each one is a real URL, so a subject can be
   bookmarked and linked to, and the row still works with scripting off. On a
   phone it scrolls sideways rather than wrapping into three ragged lines. */

body.ix .ix-tags {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  /* The pages carry a bare `nav { justify-content: space-between }` for the
     header, which would otherwise spread five subjects across a desktop. */
  justify-content: flex-start;
  margin: 0 0 2.5rem;
  padding: 0;
  border-bottom: 1px solid var(--ix-line);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.ix .ix-tags::-webkit-scrollbar { display: none; }

body.ix .ix-tag {
  flex: none;
  padding-bottom: 0.8125rem;
  /* Sits the marker on the row's own hairline rather than above it. */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ix-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

body.ix .ix-tag:hover { color: var(--ix-ink); }

body.ix .ix-tag.is-on {
  color: var(--ix-ink);
  border-bottom-color: var(--ix-ink);
}

body.ix .ix-news-empty {
  margin: 0;
  padding: 3rem 0;
  color: var(--ix-ink-muted);
}

/* Partners, not press. There are three of them, their marks are square and
   detailed rather than wide wordmarks, and they are people IyedeX actually
   works with — so the cells are taller, the marks larger, and the grey wash
   the press row wears comes off. */
body.ix .ix-featured--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.ix .ix-featured--3 .ix-featured-logo {
  padding: 2.25rem 1.5rem;
  min-height: 9rem;
}

body.ix .ix-featured--3 .ix-featured-logo img {
  height: 4.5rem;
  opacity: 1;
  /* The three files are near-white artwork on a white ground — mean
     luminance 243, the darkest pixel 178 — so at any size they read as
     smudges. Dropping the midtones and then pulling the contrast back up
     lands the artwork in dark grey while the ground clips to white again.
     A proper dark export of each mark would beat this. */
  filter: brightness(0.62) contrast(5);
}

@media (max-width: 560px) {
  body.ix .ix-featured--3 .ix-featured-logo { padding: 1.5rem 1rem; min-height: 6.5rem; }
  body.ix .ix-featured--3 .ix-featured-logo img { height: 3.25rem; }
}

@media (max-width: 1024px) {
  body.ix .ix-news--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body.ix .ix-news--rows { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 640px) {
  body.ix .ix-news--tiles { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  body.ix .ix-news--tiles .ix-news__h { font-size: 1.125rem; }

  body.ix .ix-news--rows .ix-news__a { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  body.ix .ix-news--rows .ix-news__h { font-size: 1rem; }
  body.ix .ix-news__meta { margin-top: 0.5rem; font-size: 0.78125rem; }

  /* A two-line heading and the link beside it crowd each other on a phone,
     so the link takes its own line. */
  body.ix .ix-news-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
  }

  body.ix .ix-tags { gap: 1.375rem; margin-bottom: 1.75rem; }
  body.ix .ix-tag { font-size: 0.875rem; }
}

/* Images are furniture here, not something to lift out of the page: no drag
   ghost, no long-press selection, no blue highlight when a tap slides. */
body.ix img,
body.ix svg {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
