/*
 * AxaReg public site.
 *
 * One stylesheet for all five pages.
 *
 * The page is a warm off-white field with a wash of sage and bone fixed behind
 * it, so it stays put while the content scrolls over it, and the content sits on
 * that field in translucent panels. The palette is five colours and only one of
 * them carries any hue, which is deliberate: on a product whose whole subject is
 * whether you are compliant, green and amber have to mean compliant and at risk.
 * If the brand spends them first, the status ramp has nothing left to say.
 *
 * Arabic is not a mirrored afterthought: logical properties carry the layout, so
 * setting dir on <html> flips the page without a single right-to-left override.
 */

:root {
  --bg: #FAFAF4;
  --bg-soft: #F2F1E7;
  --fg: #141413;
  --muted-fg: #635E5A;
  --border: #E2E0D1;
  --card: #FFFFFF;

  /* Panels are translucent, so the wash behind them is part of their colour.
     --panel is how much of --card survives; the rest is whatever is underneath. */
  --panel: 74%;
  --panel-line: rgba(255, 255, 255, .9);

  /* The brand is ink, not a colour. Emphasis is carried by weight, by the bone
     and sage surfaces, and by how much white is left around a thing. The only
     saturation on the page is compliance state, which is the point: on a site
     about a status, green and amber have to mean the status and nothing else. */
  --primary: #141413;
  --primary-strong: #000000;
  --primary-fg: #FAFAF4;
  --accent: #D4E6DF;
  --accent-2: #E2E0D1;
  /* Still one gradient, but it now runs through the warm greys rather than
     across a hue. Flat ink over a large panel goes dead; this keeps the
     surface moving without introducing a second colour. */
  --grad: linear-gradient(115deg, #141413 0%, #2B2825 52%, #4A4642 100%);
  --ok: #0E9F6E;
  --bad: #D4183D;

  --wash-1: 88%;
  --wash-2: 72%;
  --wash-3: 9%;
  --aura-1: 100%;
  --aura-2: 82%;
  --aura-3: 10%;

  --shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 26px 60px -26px rgba(20, 20, 19, .20);
  --shadow-lift: 0 2px 6px rgba(20, 20, 19, .06), 0 36px 80px -28px rgba(20, 20, 19, .26);
  --shadow-brand: 0 10px 28px -10px rgba(20, 20, 19, .45);

  --r: 1.5rem;
  --r-md: 1.125rem;
  --r-sm: .75rem;

  --latin: "Instrument Sans";
  --arabic: "IBM Plex Sans Arabic";
  --display: var(--latin), var(--arabic), ui-sans-serif, system-ui, sans-serif;
  --body: var(--latin), var(--arabic), ui-sans-serif, system-ui, sans-serif;

  color-scheme: light;
}

/* Arabic leads the stack so the Arabic face sets the whole page, including the
   Latin product name inside an Arabic sentence. */
:root[lang="ar"] {
  --display: var(--arabic), var(--latin), ui-sans-serif, system-ui, sans-serif;
  --body: var(--arabic), var(--latin), ui-sans-serif, system-ui, sans-serif;
}

/* Dark inverts the pairing rather than the palette. The same five colours do
   the work; what changes is which of them is the ink and which is the page, and
   the wash drops to a whisper because a light tint on a dark page reads at a
   fraction of the strength it needs on a light one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141413;
    --bg-soft: #1C1A18;
    --fg: #FAFAF4;
    --muted-fg: #A5A099;
    --border: #2E2B27;
    --card: #1F1D1A;
    --panel: 82%;
    --panel-line: rgba(250, 250, 244, .08);
    /* Ink cannot be the brand on an ink page, so the pairing turns over: bone
       becomes the mark and the button, and the ink moves to the text on it.
       Every --primary surface therefore needs --primary-fg rather than a
       hard-coded white, which is the one thing this inversion demands. */
    --primary: #E2E0D1;
    --primary-strong: #FAFAF4;
    --primary-fg: #141413;
    --accent: #D4E6DF;
    --accent-2: #E2E0D1;
    --grad: linear-gradient(115deg, #FAFAF4 0%, #E8E6DA 52%, #D4E6DF 100%);
    --wash-1: 13%;
    --wash-2: 10%;
    --wash-3: 7%;
    --aura-1: 16%;
    --aura-2: 12%;
    --aura-3: 8%;
    --ok: #2FBF84;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 26px 60px -26px rgba(0, 0, 0, .85);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 36px 80px -28px rgba(0, 0, 0, .9);
    --shadow-brand: 0 10px 30px -10px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #141413;
  --bg-soft: #1C1A18;
  --fg: #FAFAF4;
  --muted-fg: #A5A099;
  --border: #2E2B27;
  --card: #1F1D1A;
  --panel: 82%;
  --panel-line: rgba(250, 250, 244, .08);
  /* Ink cannot be the brand on an ink page, so the pairing turns over: bone
     becomes the mark and the button, and the ink moves to the text on it.
     Every --primary surface therefore needs --primary-fg rather than a
     hard-coded white, which is the one thing this inversion demands. */
  --primary: #E2E0D1;
  --primary-strong: #FAFAF4;
  --primary-fg: #141413;
  --accent: #D4E6DF;
  --accent-2: #E2E0D1;
  --grad: linear-gradient(115deg, #FAFAF4 0%, #E8E6DA 52%, #D4E6DF 100%);
  --wash-1: 13%;
  --wash-2: 10%;
  --wash-3: 7%;
  --aura-1: 16%;
  --aura-2: 12%;
  --aura-3: 8%;
  --ok: #2FBF84;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 26px 60px -26px rgba(0, 0, 0, .85);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 36px 80px -28px rgba(0, 0, 0, .9);
  --shadow-brand: 0 10px 30px -10px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-weight: 450;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The wash. Fixed rather than scrolled: the page moves across a field that
   stays where it is, which is what keeps the translucent panels from looking
   like stickers on a photograph. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 8% -10%, color-mix(in srgb, var(--accent) var(--wash-1), transparent), transparent 62%),
    radial-gradient(52rem 38rem at 98% 2%, color-mix(in srgb, var(--accent-2) var(--wash-2), transparent), transparent 60%),
    radial-gradient(46rem 34rem at 55% 108%, color-mix(in srgb, var(--muted-fg) var(--wash-3), transparent), transparent 62%);
}

/* Until the language script has run, nothing is painted: the markup carries the
   English copy, and showing it for a frame before swapping to Arabic would be a
   visible flash of the wrong language. */
html:not(.lang-ready) body { visibility: hidden; }

::selection { background: var(--accent); color: #141413; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.wrap--narrow { max-width: 760px; }

.band { position: relative; }
.band > .wrap { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band--hair { border-top: 1px solid var(--border); }
/* Translucent, not opaque: a solid fill here would cut a flat rectangle out of
   the wash and the seam would show at both edges. */
.band--muted { background: color-mix(in srgb, var(--bg-soft) 62%, transparent); }

h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
}
/* Arabic carries no tight Latin tracking and sets taller, so the display face
   releases both rather than cramping the script. */
:root[lang="ar"] .display { letter-spacing: 0; line-height: 1.35; font-weight: 600; }

/* The section label, set as a small capsule rather than loose tracked capitals.
   Tracked capitals are the thing that dated the first version fastest. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--muted-fg);
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding-block: .3125rem;
  padding-inline: .5rem .75rem;
}
.eyebrow::before {
  content: "";
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}

.lede { color: var(--muted-fg); font-size: 1.0625rem; line-height: 1.75; max-width: 62ch; }

.hide { display: none !important; }

/* The emphasised phrase in a headline. It used to be the gradient set in the
   type itself, which worked while the gradient crossed a hue; an ink gradient
   in ink text emphasises nothing. So the colour moves behind the words as a
   sage field instead, and the text on it is ink in both themes, which is why
   this is the one place --fg is not what sets the type. */
.grad-text {
  background: var(--accent);
  color: #141413;
  padding-inline: .18em;
  margin-inline: -.06em;
  border-radius: .18em;
  /* Without this the field is drawn once across the whole inline box, so a
     phrase that wraps gets one rectangle spanning both lines. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- the colour field ---------- */

/* A denser, closer version of the body wash, for the top of a page where the
   colour has to actually be present rather than merely implied. */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(68px);
  opacity: .85;
}
.aurora i:nth-child(1) {
  width: 34rem; height: 30rem;
  top: -12rem; inset-inline-start: -8rem;
  background: color-mix(in srgb, var(--accent) var(--aura-1), transparent);
}
.aurora i:nth-child(2) {
  width: 32rem; height: 28rem;
  top: -8rem; inset-inline-end: -6rem;
  background: color-mix(in srgb, var(--accent-2) var(--aura-2), transparent);
}
.aurora i:nth-child(3) {
  width: 30rem; height: 20rem;
  bottom: -16rem; inset-inline-start: 34%;
  background: color-mix(in srgb, var(--muted-fg) var(--aura-3), transparent);
  filter: blur(96px);
}

/* ---------- brand ---------- */

.brand { display: inline-flex; align-items: center; gap: .625rem; }
.mark {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: .6875rem;
  background: var(--grad);
  color: var(--primary-fg);
  display: grid;
  place-items: center;
  font-family: var(--latin), sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  flex: none;
  box-shadow: var(--shadow-brand);
}
.brand-name {
  font-family: var(--latin), sans-serif;
  font-weight: 600;
  letter-spacing: -.025em;
  font-size: 1.1875rem;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .8125rem 1.375rem;
  font-weight: 600;
  font-size: .9375rem;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn svg { flex: none; }
/* The arrow points the way the language reads. */
:root[dir="rtl"] .btn svg.dir { transform: scaleX(-1); }
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--grad); color: var(--primary-fg); box-shadow: var(--shadow-brand); }
.btn--primary:hover { box-shadow: 0 16px 36px -10px rgba(20, 20, 19, .5); }
.btn--ghost {
  color: var(--fg);
  border-color: var(--border);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
/* On the gradient panel, where the primary button would disappear into its own
   background. */
.btn--light { background: var(--primary-fg); color: var(--primary); }
.btn--light:hover { box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .45); }
.btn--sm { padding: .5625rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  border-bottom: 1px solid transparent;
}
.site-head > .wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .875rem;
}
.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: .125rem; }
.site-nav a.nav-link {
  font-size: .875rem;
  font-weight: 500;
  padding: .4375rem .6875rem;
  border-radius: 999px;
  color: var(--muted-fg);
  transition: color .15s ease, background-color .15s ease;
}
.site-nav a.nav-link:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.site-nav a.nav-link[aria-current="page"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
@media (max-width: 52rem) { .site-nav a.nav-link { display: none; } }

/* The language switch is the one control that must never be hidden, in either
   language, at any width. */
.lang-btn {
  font-family: var(--latin), sans-serif;
  font-size: .75rem;
  font-weight: 600;
  padding: .4375rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  color: var(--muted-fg);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  flex: none;
}
.lang-btn:hover { color: var(--fg); border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }

/* The bar is invisible at rest and becomes glass the moment the page moves, so
   nothing ever scrolls through the wordmark. Over a dark hero it could stay
   transparent the whole way down; over a light one it cannot. */
.site-head--over.pinned,
.site-head--solid {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border);
}
.site-head .btn--primary { box-shadow: none; }
.site-head .btn--primary:hover { box-shadow: var(--shadow-brand); }

@media (max-width: 30rem) {
  .site-head .brand-name { display: none; }
}

/* ---------- panels ---------- */

/* Every raised surface on the site is this: the card colour at partial opacity
   over a blur, so the wash reads through it. */
.panel {
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- hero ---------- */

/* The hero slides under the transparent header, so it owns that height too. */
.hero { position: relative; isolation: isolate; margin-top: -4.25rem; padding-top: 4.25rem; }
.hero > .wrap {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 64rem) {
  .hero--split > .wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}
.hero h1 { font-size: clamp(2.25rem, 6.2vw, 4rem); margin-top: 1.5rem; }
.hero .lede { margin-top: 1.5rem; font-size: 1.125rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* Shorter band for the pages that are not the home page. */
.hero--compact > .wrap { padding-block: clamp(2.75rem, 6vw, 4.25rem) clamp(2.5rem, 6vw, 4rem); }
.hero--compact h1 { font-size: clamp(2rem, 5.2vw, 3.125rem); }

/* ---------- product figure ---------- */

/* An abstract view of the workspace. Decorative and hidden from assistive
   technology: every claim it illustrates is made in words elsewhere. */
.hero-art { position: relative; }
.figure {
  position: relative;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-lift);
  padding: 1.125rem;
  display: grid;
  gap: .75rem;
  translate: 0 var(--py, 0px);
}

.fig-bar { display: flex; align-items: center; gap: .5rem; padding-bottom: .125rem; }
.fig-dots { display: flex; gap: .3125rem; }
.fig-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.fig-tab { margin-inline-start: auto; font-size: .6875rem; font-weight: 600; color: var(--muted-fg); }
.fig-top { display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: center; }
.ring {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--primary) 0 40%, var(--accent) 40% 78%, color-mix(in srgb, var(--fg) 8%, transparent) 78%);
  position: relative;
  flex: none;
}
.ring::after { content: ""; position: absolute; inset: .5625rem; border-radius: 50%; background: var(--card); }
.ring span { position: relative; z-index: 1; font-family: var(--latin), sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -.03em; }
.fig-head { display: grid; gap: .25rem; }
.fig-title { font-weight: 600; font-size: .9375rem; }
.fig-sub { font-size: .75rem; color: var(--muted-fg); }
.fig-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.fig-stat {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .625rem .6875rem;
}
.fig-stat b { display: block; font-family: var(--latin), sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -.03em; }
.fig-stat small { font-size: .6875rem; color: var(--muted-fg); }
.fig-rows { display: grid; gap: .375rem; }
.fig-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: .6875rem;
  padding: .5625rem .6875rem;
  font-size: .75rem;
  color: var(--fg);
}
/* Only the status pill is pushed to the far end; the label stays against the
   dot, which is also what flips correctly in Arabic. */
.fig-row .pill { margin-inline-start: auto; }
.fig-row i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--primary); flex: none; }
.fig-row.is-done i { background: color-mix(in srgb, var(--fg) 22%, transparent); }
.pill { border-radius: 999px; padding: .1875rem .5rem; font-size: .6875rem; font-weight: 600; }
.pill--open { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.pill--done { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted-fg); }

/* The two chips that drift past the panel as the page scrolls. They are the
   only thing on the site that moves with the scroll, which is what keeps the
   effect from reading as a gimmick. */
.float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .5625rem;
  padding: .625rem .875rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  white-space: nowrap;
  translate: 0 var(--py, 0px);
}
.float em { font-style: normal; color: var(--muted-fg); }
.float--a { top: -1.25rem; inset-inline-start: -1.5rem; }
.float--b { bottom: -1.5rem; inset-inline-end: -1rem; }
.float .dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .75rem; }
.float .dot--ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.float .dot--brand { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
/* Below the split they would sit over the copy rather than beside the panel. */
@media (max-width: 47.99rem) { .float { display: none; } }

/* ---------- module strip ---------- */

/* The track runs off both edges, so it fades rather than being cut. A mask
   rather than two overlay gradients, because an overlay has to name the colour
   it fades to and what is behind the strip is the wash, not a flat page. */
.strip {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem;
  border-block: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}
.strip-track { display: flex; gap: .625rem; width: max-content; animation: slide 56s linear infinite; }
.strip-track span {
  font-family: var(--latin), sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted-fg);
  white-space: nowrap;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border-radius: 999px;
  padding: .375rem .875rem;
}
@keyframes slide { to { transform: translateX(-50%); } }
/* The track is duplicated to loop seamlessly, so it has to travel exactly half
   its own width. In Arabic that half is on the other side. */
:root[dir="rtl"] .strip-track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { transform: translateX(50%); } }

/* ---------- section heads ---------- */

.section-head { max-width: 48rem; }
.section-head h2 { font-size: clamp(1.75rem, 4.2vw, 2.625rem); margin-top: 1rem; }
.section-head .lede { margin-top: 1rem; }

/* ---------- journey ---------- */

.journey { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 48rem) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .journey { grid-template-columns: repeat(4, 1fr); }
  /* The connector is the point of the section: each stage hands its output to
     the next. It sits above the cards and below the badges, whose ring breaks
     it, so it reads as a track running through them rather than across them. */
  .journey::before {
    content: "";
    position: absolute;
    top: calc(1.625rem - 1px);
    left: 2.125rem;
    right: 2.125rem;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: .55;
    z-index: 1;
  }
  :root[dir="rtl"] .journey::before { background: linear-gradient(270deg, var(--primary), var(--accent)); }
}

.stage {
  position: relative;
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  padding-top: 2.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stage:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.stage-num {
  position: absolute;
  top: .75rem;
  inset-inline-start: 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .5625rem;
  background: var(--grad);
  color: var(--primary-fg);
  display: grid;
  place-items: center;
  font-family: var(--latin), sans-serif;
  font-weight: 600;
  font-size: .875rem;
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 2;
}
.stage h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.ticks { list-style: none; margin: .875rem 0 0; padding: 0; display: grid; gap: .4375rem; }
.ticks li { font-size: .8125rem; color: var(--muted-fg); padding-inline-start: 1rem; position: relative; }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .5rem;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--grad);
}
.journey-note { margin: 2rem 0 0; font-size: .875rem; color: var(--muted-fg); max-width: 64ch; }

/* ---------- figures ---------- */

.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 48rem) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures div {
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem 1.375rem;
}
.figures b {
  display: block;
  font-family: var(--latin), sans-serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3rem);
  letter-spacing: -.05em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.figures small { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--muted-fg); }

/* ---------- points ---------- */

.points { margin-top: 3rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .points { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.point-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .875rem;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
  display: grid;
  place-items: center;
  color: var(--primary-fg);
  margin-bottom: 1.125rem;
}
.point h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.point p { margin: .75rem 0 0; font-size: .9375rem; color: var(--muted-fg); line-height: 1.75; }

/* ---------- cards ---------- */

.cards { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.75rem;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.card h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.card p { margin: .75rem 0 0; font-size: .9375rem; color: var(--muted-fg); line-height: 1.75; }

/* ---------- pricing ---------- */

.billing-toggle {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  margin-top: 1.75rem;
}
.billing-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted-fg);
  font-family: inherit;
  font-weight: 600;
  font-size: .8125rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.billing-toggle button[aria-pressed="true"] { background: var(--grad); color: var(--primary-fg); }

.plans { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.625rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  height: 100%;
}
/* The recommended band is the one most Egyptian mid-market organizations fall
   into, so it is lifted rather than left to be found. The gradient edge is
   drawn as a border-width inset rather than a box-shadow ring, because a ring
   cannot hold a gradient. */
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) padding-box,
    var(--grad) border-box;
  box-shadow: var(--shadow-lift);
}
.plan-flag {
  position: absolute;
  top: -.6875rem;
  inset-inline-start: 1.5rem;
  background: var(--grad);
  color: var(--primary-fg);
  font-size: .6875rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 999px;
}
.plan-name { font-family: var(--display); font-weight: 600; font-size: 1.3125rem; letter-spacing: -.025em; }
:root[lang="ar"] .plan-name { letter-spacing: 0; }
.plan-size { font-size: .8125rem; color: var(--muted-fg); margin-top: .25rem; }
.plan-price { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.plan-price b { font-family: var(--latin), sans-serif; font-weight: 600; font-size: 1.875rem; letter-spacing: -.04em; }
.plan-price small { font-size: .8125rem; color: var(--muted-fg); }
.plan-note { font-size: .75rem; color: var(--muted-fg); }
.plan .ticks { margin-top: 0; }
.plan .ticks li { font-size: .8125rem; }
.plan-foot { margin-top: auto; }

.included {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: 1.75rem;
}
.included h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.included p { margin: .625rem 0 0; font-size: .9375rem; color: var(--muted-fg); line-height: 1.75; }
.included-grid { margin-top: 1.25rem; display: grid; gap: .5rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .included-grid { grid-template-columns: repeat(3, 1fr); } }
.included-grid span { font-size: .8125rem; color: var(--muted-fg); display: flex; align-items: center; gap: .5rem; }
.included-grid span::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  flex: none;
}

/* ---------- steps ---------- */

.steps { margin-top: 3rem; display: grid; gap: 1rem; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
}
.step-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .875rem;
  background: var(--grad);
  color: var(--primary-fg);
  display: grid;
  place-items: center;
  font-family: var(--latin), sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  flex: none;
  box-shadow: var(--shadow-brand);
}
.step h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.step p { margin: .5rem 0 0; font-size: .9375rem; color: var(--muted-fg); line-height: 1.75; }

/* ---------- long-form documents ---------- */

.doc { font-size: .9375rem; line-height: 1.8; }
.doc h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; margin-top: 2.75rem; }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.75rem; }
.doc p { margin: .875rem 0 0; color: var(--muted-fg); }
.doc ul { margin: .875rem 0 0; padding-inline-start: 1.125rem; color: var(--muted-fg); }
.doc li { margin-top: .4375rem; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc-meta {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--card) var(--panel), transparent);
  padding: 1rem 1.25rem;
  font-size: .8125rem;
  color: var(--muted-fg);
  margin-bottom: 2.5rem;
}
.doc-toc { margin: 0 0 2.5rem; padding: 0; list-style: none; display: grid; gap: .375rem; }
.doc-toc a { font-size: .875rem; color: var(--muted-fg); }
.doc-toc a:hover { color: var(--fg); }

/* The one answer a compliance buyer always wants, so it is not buried. */
.answer {
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.answer h2 { margin: 0; font-size: 1.0625rem; }
.answer p { margin: .625rem 0 0; color: var(--fg); }

.table-scroll { overflow-x: auto; margin-top: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-md); }
table.rows { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .8125rem; }
table.rows th, table.rows td { text-align: start; padding: .75rem .875rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.rows th { font-weight: 600; font-size: .75rem; color: var(--muted-fg); background: color-mix(in srgb, var(--bg-soft) 70%, transparent); }
table.rows tr:last-child td { border-bottom: 0; }
table.rows td { color: var(--muted-fg); }
table.rows td:first-child { color: var(--fg); font-weight: 500; }

/* ---------- closing panel ---------- */

/* The one saturated surface on the site. It closes the page rather than
   running behind it, which is why it is a panel inside the grid and not a
   full-bleed band. */
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--grad);
  color: var(--primary-fg);
  text-align: center;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  box-shadow: 0 30px 80px -30px rgba(20, 20, 19, .45);
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(28rem 20rem at 18% 0%, color-mix(in srgb, var(--bg) 26%, transparent), transparent 60%),
    radial-gradient(26rem 18rem at 88% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
}
.cta-panel h2 { font-size: clamp(1.75rem, 4.6vw, 2.75rem); }
.cta-panel p { color: color-mix(in srgb, var(--primary-fg) 84%, transparent); margin: 1rem auto 0; max-width: 46ch; font-size: 1.0625rem; }
.cta-panel .btn { margin-top: 2rem; }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--border); }
.site-foot > .wrap { padding-block: 2.5rem; display: grid; gap: 1.75rem; }
.foot-top { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: start; }
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.foot-links a { font-size: .875rem; color: var(--muted-fg); }
.foot-links a:hover { color: var(--fg); }
.foot-meta { margin: 0; font-size: .8125rem; color: var(--muted-fg); }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .stage:hover, .card:hover { transform: none; }
  .figure, .float { translate: none; }
}

/* ---------- contact dialog ---------- */

/* The form is injected by site.js and lives in one place, so every "Contact us"
   on the site opens the same markup rather than each page carrying its own copy
   to drift out of step. */
.contact {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  padding: 0;
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  box-shadow: var(--shadow-lift);
}
.contact::backdrop { background: rgba(20, 20, 19, .6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.contact-inner { padding: clamp(1.5rem, 4vw, 2.25rem); }

.contact-head { display: flex; align-items: start; gap: 1rem; }
.contact-head h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-size: 1.625rem; }
:root[lang="ar"] .contact-head h2 { letter-spacing: 0; }
.contact-head p { margin: .5rem 0 0; font-size: .875rem; color: var(--muted-fg); line-height: 1.7; }
.contact-close {
  margin-inline-start: auto;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.contact-close:hover { color: var(--fg); border-color: var(--fg); }

.form { margin-top: 1.5rem; display: grid; gap: .875rem; }
@media (min-width: 40rem) { .form { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: .375rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--muted-fg); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 450;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .6875rem .875rem;
  width: 100%;
}
.field textarea { min-height: 6rem; resize: vertical; }
/* An address and a phone number are Latin and read left to right whatever the
   surrounding language, so they are not dragged into the Arabic direction. */
.field input[type="email"], .field input[type="tel"] { direction: ltr; text-align: start; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
/* :user-invalid, not :invalid: an empty required field is invalid from the
   moment it renders, and marking it red before anyone has typed is a telling-off
   for doing nothing. This waits until the field has been engaged with. */
.field input:user-invalid, .field select:user-invalid { border-color: var(--bad); }

/* Collecting a name and a work email is itself processing personal data, on a
   site selling compliance with the law that governs it. The consent is explicit
   and the notice is one click away. */
.consent { grid-column: 1 / -1; display: flex; gap: .625rem; align-items: start; }
.consent input { width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0; accent-color: var(--primary); flex: none; }
.consent label { font-size: .8125rem; color: var(--muted-fg); line-height: 1.6; }
.consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--primary); }

.form-foot { grid-column: 1 / -1; display: grid; gap: .75rem; margin-top: .25rem; }
.form-note { margin: 0; font-size: .75rem; color: var(--muted-fg); line-height: 1.6; }
.form-error { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--bad); }

.chosen {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.contact-done { text-align: center; padding: 1rem 0 .5rem; }
.contact-done .tickmark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
  display: grid;
  place-items: center;
  font-size: 1.375rem;
}
.contact-done h3 { font-size: 1.125rem; font-weight: 600; }
.contact-done p { margin: .625rem auto 0; font-size: .9375rem; color: var(--muted-fg); max-width: 38ch; line-height: 1.7; }
.contact-done .btn { margin-top: 1.5rem; }