/* ==========================================================================
   AMAN X — MAIN STYLESHEET
   Logical properties are used throughout (inline-start/end, margin-inline)
   so the entire layout mirrors for RTL without a separate Arabic stylesheet.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-2);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* `overflow-x: hidden` computes to `overflow: hidden auto`, which turns BODY
     into the scroll container instead of the viewport. That leaves
     window.scrollY pinned at 0, prevents ViewTimeline from resolving against
     the document, and historically breaks momentum scrolling on iOS.
     `clip` prevents horizontal overflow without creating a scroll container. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

:root[dir="rtl"] body { line-height: var(--lh-body-ar); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-1);
  line-height: var(--lh-head);
  font-weight: 600;
  text-wrap: balance;
}
:root[dir="rtl"] h1, :root[dir="rtl"] h2,
:root[dir="rtl"] h3, :root[dir="rtl"] h4 { line-height: var(--lh-head-ar); }

p { text-wrap: pretty; }

a { color: var(--accent-text); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* ---- Focus: always visible, never removed ------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Reduced motion ------------------------------------------------------
   The previous site scrambled the H1 into random glyphs on load and animated
   continuously. Both are disabled here for visitors who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none !important; transform: none !important; }
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ax-navy-900);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { inset-block-start: 0; }

/* ---- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--prose { max-width: var(--container-prose); }

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); }
.section--ink  { background: var(--ax-navy-900); }
.section--ink, .section--ink p { color: #b9c3d6; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #f2f5fa; }

.stack > * + * { margin-block-start: var(--sp-4); }

.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   SIGNATURE: the rule + index motif
   ========================================================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-block-end: var(--sp-4);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  /* Fades away from the text, so it follows the reading direction. */
  background: linear-gradient(to var(--motion-origin-inline-end), var(--accent-line), transparent);
  opacity: 0.55;
}

.section-head { max-width: 62ch; margin-block-end: var(--sp-10); }
.section-head h2 { font-size: var(--fs-3xl); }
.section-head p  { margin-block-start: var(--sp-4); font-size: var(--fs-lg); color: var(--text-3); }

/* ==========================================================================
   BUTTONS
   Minimum target 44px tall — the previous site had 24 targets under 24px.
   ========================================================================== */
.btn {
  --_bg: var(--ax-navy-900);
  --_fg: #ffffff;
  --_bd: var(--ax-navy-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--_bd);
  border-radius: var(--r-md);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { --_bg: var(--ax-cyan-600); --_bd: var(--ax-cyan-600); }
.btn--primary:hover { --_bg: #005f87; --_bd: #005f87; }

.btn--secondary {
  --_bg: transparent;
  --_fg: var(--text-1);
  --_bd: var(--border-strong);
}
.btn--secondary:hover { --_bg: var(--surface-2); --_bd: var(--text-3); }

/* Used only inside .cta-strip. The name is historical: it now means "button on
   the CTA surface", and inverts with the theme rather than assuming dark. */
.btn--onDark {
  --_bg: var(--cta-btn-bg); --_fg: var(--cta-btn-fg); --_bd: var(--cta-btn-bd);
}
.btn--onDark.btn--secondary {
  --_bg: transparent; --_fg: var(--cta-btn-ghost-fg); --_bd: var(--cta-btn-ghost-bd);
}
.btn--onDark.btn--secondary:hover {
  --_bg: var(--cta-btn-ghost-hover-bg); --_bd: var(--cta-btn-ghost-hover-bd);
}

.btn__icon { flex: none; width: 1.15em; height: 1.15em; }
/* Directional icons flip in RTL. */
:root[dir="rtl"] .btn__icon--dir { transform: scaleX(-1); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--text-1);
}
.brand__name em { font-style: normal; color: var(--accent-text); }
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav { display: none; margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text-1); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.nav__link[aria-current="page"]::before {
  content: ""; position: absolute; /* underline sits on the sticky header edge */
}

.header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.nav + .header__actions { margin-inline-start: var(--sp-4); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); }
.icon-btn svg { width: 20px; height: 20px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-switch:hover { background: var(--surface-2); color: var(--text-1); }

.header__cta { display: none; }

/* The full nav is 8 items plus brand, language, theme, and CTA. At 1024px that
   lockup overflowed by ~124px, so the desktop nav starts at 1180px and the
   drawer covers everything below. */
@media (min-width: 1180px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
@media (min-width: 1180px) and (max-width: 1320px) {
  .nav__link { padding-inline: var(--sp-2); font-size: 0.8125rem; }
  .header__cta { padding-inline: var(--sp-4); }
}

/* Very narrow phones (320px). The brand lockup plus three controls does not
   fit at the default sizing, which pushed the header 18px past the viewport.
   Tighten spacing and drop the wordmark's secondary line rather than letting
   the page scroll sideways. */
@media (max-width: 380px) {
  :root { --gutter: 0.875rem; }
  .header__inner { gap: var(--sp-2); }
  .header__actions { gap: var(--sp-1); }
  .brand { gap: var(--sp-2); }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 0.9375rem; }
  .brand__tag { display: none; }
  .lang-switch { padding-inline: var(--sp-3); }
  .icon-btn { width: 40px; }
}

/* ---- Mobile drawer ------------------------------------------------------- */
.nav-toggle { display: inline-flex; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr min(88vw, 380px);
  visibility: hidden;
}
:root[dir="rtl"] .drawer { grid-template-columns: min(88vw, 380px) 1fr; }
.drawer[data-open="true"] { visibility: visible; }

.drawer__scrim {
  grid-area: 1 / 1 / 2 / 3;
  background: rgba(6, 10, 22, 0.55);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  border: 0; padding: 0;
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }

.drawer__panel {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-inline-start: 1px solid var(--border);
  padding: var(--sp-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
:root[dir="rtl"] .drawer__panel {
  grid-area: 1 / 1 / 2 / 2;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
  transform: translateX(-100%);
}
.drawer[data-open="true"] .drawer__panel { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-6); }
.drawer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.drawer__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text-1);
  text-decoration: none;
}
.drawer__link:hover { background: var(--surface-2); }
.drawer__link[aria-current="page"] { color: var(--accent-text); font-weight: 600; background: var(--surface-2); }
.drawer__foot { margin-block-start: auto; padding-block-start: var(--sp-6); display: grid; gap: var(--sp-3); }

body[data-drawer-open="true"] { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
/* Content sits above the ambient layer, which is z-index 0 inside .hero. */
.hero > .container { position: relative; z-index: 1; }

.hero__grid { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }

/* ---- Hero visual: the Human Risk Topology ------------------------------- */
.hero__visual {
  display: grid;
  place-items: center;
  min-inline-size: 0;
}
.topology-wrap {
  inline-size: 100%;
  max-inline-size: 560px;
  /* Matches the widened viewBox (612x456) so the SVG box is the drawing box —
     no phantom whitespace pushing it off-centre. */
  aspect-ratio: 612 / 456;
  display: grid;
  place-items: center;
}
.topology__core-fill  { fill: var(--surface-1); stroke: var(--border); stroke-width: 1; }
.topology__core-glyph { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; }
.topology__core-glyph:first-of-type { fill: var(--accent-text); stroke: none; }

/* The diagram is decorative-adjacent on small screens: it stays, but shrinks so
   it never pushes the headline and CTAs below the fold. */
@media (max-width: 1023px) {
  .topology-wrap { max-inline-size: 420px; }
}
/* The mobile composition is portrait, so it gets its own box. */
.topology-wrap--mobile {
  max-inline-size: 340px;
  aspect-ratio: 320 / 430;
}
@media (max-width: 380px) {
  .topology-wrap--mobile { max-inline-size: 300px; }
}

/* Each headline line is its own clipping container for the mask reveal. */
.hero__line {
  display: block;
  /* A clipped inline element would shear descenders; block + padding keeps the
     Arabic descenders (ج ح خ ع غ م ن ي) inside the clip rectangle. */
  padding-block-end: 0.08em;
}

.hero__title {
  font-size: var(--fs-5xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
:root[dir="rtl"] .hero__title { letter-spacing: 0; line-height: 1.3; }

/* The second line was previously outline-only (transparent fill + 1.5px
   stroke), which is close to illegible in Arabic. It is now a solid accent
   colour that meets contrast at display size. */
.hero__title-accent { color: var(--accent-text); }

.hero__sub {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xl);
  color: var(--text-3);
  max-width: 46ch;
}
.hero__actions { margin-block-start: var(--sp-8); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-block-end: var(--sp-6);
}
.hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ax-green-ink);
  flex: none;
}

/* ---- Hero stats: verified figures only ---------------------------------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-block-start: var(--sp-10);
}
@media (min-width: 640px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
}
.stat__label {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---- Hero visual: an honest capability panel, not a fake SOC -------------
   The previous panel displayed randomly incrementing "threats blocked" and
   "assets monitored" counters plus a scripted live feed. It is replaced by a
   static statement of what the platform covers. */
.capability-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.capability-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.capability-panel__body { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.capability-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.capability-row__icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--accent-text);
}
.capability-row__icon svg { width: 20px; height: 20px; }
.capability-row__title {
  display: block;
  font-weight: 600;
  color: var(--text-1);
  margin-block-end: var(--sp-1);
}
.capability-row__desc {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-3);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }

.card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--accent-text);
  margin-block-end: var(--sp-2);
}
.card__icon svg { width: 22px; height: 22px; }
.card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.card__title { font-size: var(--fs-xl); }
.card__desc  { color: var(--text-3); font-size: var(--fs-base); }

.card__value {
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.card__value dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block-end: var(--sp-1);
}
.card__value dd { margin: 0; color: var(--text-2); }

/* Feature list inside solution/pricing cards */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
.feature-list svg { flex: none; width: 18px; height: 18px; margin-block-start: 2px; color: var(--ax-green-ink); }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--accent  { background: color-mix(in srgb, var(--ax-cyan-600) 12%, transparent); color: var(--accent-text); }
.badge--success { background: color-mix(in srgb, var(--ax-green-ink) 12%, transparent); color: var(--ax-green-ink); }
.badge--warn    { background: color-mix(in srgb, var(--ax-amber-ink) 14%, transparent); color: var(--ax-amber-ink); }

/* ==========================================================================
   STATS / PROBLEM
   ========================================================================== */
.stat-card {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1;
}
.stat-card__label { margin-block-start: var(--sp-3); color: var(--text-2); }

/* Inline links inside prose keep a 24px hit area without changing rhythm. */
.prose a, .card__desc a, .field__hint a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

.source-note {
  margin-block-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-style: italic;
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.checklist svg { flex: none; width: 22px; height: 22px; color: var(--ax-amber-ink); margin-block-start: 1px; }

/* ==========================================================================
   CERTIFICATIONS
   ========================================================================== */
.cert-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.cert-card__standard {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-1);
}
.cert-card__name { font-size: var(--fs-base); font-weight: 600; color: var(--accent-text); }
.cert-card__desc { font-size: var(--fs-sm); color: var(--text-3); }
.cert-card__meta {
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm);
}
/* WCAG 2.2 AA 2.5.8 — Target Size (Minimum). */
.cert-card__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
}
.cert-card__no { font-family: var(--font-mono); color: var(--text-3); }

/* ==========================================================================
   METHODOLOGY / TIMELINE
   ========================================================================== */
.phase-list { counter-reset: phase; display: grid; gap: var(--sp-6); list-style: none; padding: 0; margin: 0; }
.phase {
  position: relative;
  padding: var(--sp-6);
  padding-inline-start: var(--sp-16);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.phase::before {
  counter-increment: phase;
  content: counter(phase, decimal-leading-zero);
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent-line);
}
.phase__title { font-size: var(--fs-xl); }
.phase__desc  { margin-block-start: var(--sp-2); color: var(--text-3); }

.timeline { display: grid; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline__item {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--accent-line);
}
.timeline__week {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.timeline__title { margin-block-start: var(--sp-2); font-weight: 600; color: var(--text-1); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-card { position: relative; }
.price-card--popular { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.price-card__badge {
  position: absolute;
  inset-block-start: calc(var(--sp-3) * -1);
  inset-inline-start: var(--sp-6);
}
.price-card__for { color: var(--text-3); font-size: var(--fs-sm); }

/* ==========================================================================
   MARQUEE — decorative, paused for reduced motion, hidden from AT
   ========================================================================== */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: var(--surface-1);
  padding-block: var(--sp-4);
}
.marquee__track {
  display: flex;
  gap: var(--sp-10);
  width: max-content;
  animation: marquee 42s linear infinite;
}
:root[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
@keyframes marquee     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%);  } }

/* ==========================================================================
   CTA STRIP
   ========================================================================== */
/* The pre-footer CTA is a separate component from the legal footer, and the
   brief requires both to follow the theme deliberately. In light mode it stays
   a distinct band — one step deeper than the footer surface — so it still reads
   as a conversion moment without being a large dark block. */
.cta-strip {
  background: var(--cta-bg);
  color: var(--cta-heading);
  padding-block: var(--section-y);
  transition: background-color var(--motion-fast) var(--ease-enter);
}
.cta-strip h2 { color: var(--cta-heading); font-size: var(--fs-3xl); }
.cta-strip p  { color: var(--cta-text); margin-block-start: var(--sp-4); font-size: var(--fs-lg); max-width: 56ch; }
.cta-strip .eyebrow { color: var(--cta-accent); }
.cta-strip .btn-row { margin-block-start: var(--sp-8); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field__label { font-weight: 600; color: var(--text-1); font-size: var(--fs-sm); }
.field__req { color: var(--ax-red-ink); }
.field__hint { font-size: var(--fs-sm); color: var(--text-3); }

.input, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: var(--lh-body); padding-block: var(--sp-3); }
.input:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus-visible, .textarea:focus-visible { border-color: var(--focus-ring); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--ax-red-ink);
  box-shadow: 0 0 0 1px var(--ax-red-ink);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }

.field__error {
  display: none;
  font-size: var(--fs-sm);
  color: var(--ax-red-ink);
  font-weight: 500;
}
.field__error[data-visible="true"] { display: block; }

/* Honeypot.
   Must stay in the DOM and remain fillable so bots complete it, but it must
   not affect layout. An earlier `left: -9999px` pushed the document scroll
   width to 553px at a 320px viewport, causing horizontal scroll on the
   contact page. Clipping in place avoids that entirely. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-base);
}
.alert svg { flex: none; width: 22px; height: 22px; margin-block-start: 1px; }
.alert--success {
  background: color-mix(in srgb, var(--ax-green-ink) 10%, var(--surface-1));
  border-color: var(--ax-green-ink);
  color: var(--text-1);
}
.alert--error {
  background: color-mix(in srgb, var(--ax-red-ink) 8%, var(--surface-1));
  border-color: var(--ax-red-ink);
  color: var(--text-1);
}
.alert--info {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}
.alert[hidden] { display: none; }

/* Loading state on the submit button */
.btn[data-loading="true"] { opacity: 0.75; pointer-events: none; }
.btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   CONTACT DETAILS
   ========================================================================== */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.contact-list__item { display: flex; align-items: flex-start; gap: var(--sp-4); }
.contact-list__icon {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--accent-text);
}
.contact-list__icon svg { width: 20px; height: 20px; }
.contact-list__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.contact-list__value { color: var(--text-1); font-weight: 500; }
/* Phone numbers and emails stay LTR even inside an RTL paragraph. */
.ltr-value { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ==========================================================================
   BREADCRUMB / PAGE HEADER
   ========================================================================== */
.page-header {
  padding-block: var(--sp-12) var(--sp-10);
  border-block-end: 1px solid var(--border);
  background: var(--surface-1);
}
.page-header h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
:root[dir="rtl"] .page-header h1 { letter-spacing: 0; }
.page-header__sub { margin-block-start: var(--sp-5); font-size: var(--fs-lg); color: var(--text-3); max-width: 62ch; }

.breadcrumb { margin-block-end: var(--sp-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
:root[dir="rtl"] .breadcrumb li + li::before { content: "\\"; }
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-3);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-2); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Every colour below comes from the --footer-* token set in tokens.css, which
   defines both themes explicitly. Nothing here may reference a raw literal or a
   brand-palette constant: those are theme-invariant, and using them is exactly
   why this footer used to stay dark in light mode. */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: var(--sp-16) var(--sp-8);
  /* The surface eases across on a theme switch; text colour swaps instantly.
     Transitioning every text role individually would turn one decision into
     dozens of staggered fades, which is the thing that reads as a gimmick.
     The global prefers-reduced-motion rule already collapses this to 0.01ms. */
  transition: background-color var(--motion-fast) var(--ease-enter),
              border-color var(--motion-fast) var(--ease-enter);
}
.footer a { color: var(--footer-link); text-decoration: none; }
.footer a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-10); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer__blurb { margin-block-start: var(--sp-4); max-width: 42ch; font-size: var(--fs-sm); }
.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--footer-text-faint);
  margin-block-end: var(--sp-4);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
.footer__list a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-sm); }
.footer__brand .brand__name { color: var(--footer-heading); }
.footer__brand .brand__tag  { color: var(--footer-text-faint); }

.footer__socials { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.footer__social {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  /* The visible edge of a control: --footer-border carries a >=3:1 value in
     both themes so the button is perceivable as a button. */
  border: 1px solid var(--footer-border);
  border-radius: var(--r-md);
  color: var(--footer-icon);
}
.footer__social:hover { background: var(--footer-icon-hover-bg); }
.footer__social svg { width: 20px; height: 20px; }

.footer__bottom {
  margin-block-start: var(--sp-12);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--footer-rule);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--footer-text-faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 32px; }

/* ==========================================================================
   WHATSAPP FLOAT

   Measured problem: a 56px fixed button 24px from the edge sits directly on
   the text column at <=414px. Geometrically, 175 scroll positions across
   4 viewports x 5 pages x 2 locales overlapped readable text, journey stages,
   and — worst — form inputs, where it would swallow the tap.

   Three behaviours, in increasing order of intervention:
     idle      - resting in the corner, safe-area aware
     docked    - retreats to its own edge and fades while the page scrolls,
                 or while a form field is focused
     raised    - steps up the block axis when its resting position would sit
                 on something the user has to tap

   Every state composes through variables rather than competing `transform`
   declarations, so hover cannot cancel a raise and a raise cannot cancel a
   dock. All applied by JS, so with JS disabled the button simply sits idle.
   ========================================================================== */
.wa-float {
  --wa-dock: 0%;
  --wa-raise: 0px;
  --wa-scale: 1;

  position: fixed;
  /* The button sits on the inline-end edge — physically right in EN, left in
     AR — so guard both notch insets rather than assuming a side. */
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--sp-6));
  inset-inline-end: calc(
    max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + var(--sp-6)
  );
  z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1f9d55;
  color: #fff;
  box-shadow: var(--shadow-3);
  /* Dock travel follows the reading direction: toward the right in EN, the
     left in AR. --motion-inline-dir carries the sign. */
  transform:
    translate(calc(var(--motion-inline-dir) * var(--wa-dock)), var(--wa-raise))
    scale(var(--wa-scale));
  transition:
    transform var(--dur-slow) var(--ease),
    opacity   var(--dur-slow) var(--ease);
}
.wa-float svg { width: 28px; height: 28px; }

.wa-float.is-docked {
  --wa-dock: 62%;
  opacity: 0.28;
  /* A faded button still intercepts taps. Without this it would silently
     swallow presses on the input underneath — worse than the visual overlap
     it was meant to solve. */
  pointer-events: none;
}

/* Over the footer no partial dock clears the credit / legal row at every width:
   measured, the 62% dock still crossed the developer-credit link by up to 18px
   between 768 and 1280. Parking slides the button fully past the inline-end
   edge, so the intersection is zero by construction rather than by an offset
   tuned against one viewport. It is a transform, so it cannot introduce
   horizontal overflow, and hover / :focus-visible below still return it to
   --wa-dock: 0% — it is parked, never unreachable. */
.wa-float.is-parked { --wa-dock: calc(100% + var(--sp-6)); }

.wa-float.is-raised-1 { --wa-raise: -76px; }
.wa-float.is-raised-2 { --wa-raise: -152px; }

/* Intent always wins: hover and keyboard focus restore it in full. */
.wa-float:hover,
.wa-float:focus-visible,
.wa-float:active {
  --wa-dock: 0%;
  opacity: 1;
  pointer-events: auto;
}
.wa-float:hover { --wa-scale: 1.06; }

@media (prefers-reduced-motion: reduce) {
  /* No sliding for vestibular safety. The fade still keeps text legible, and
     opacity is not vestibular motion. Raising is a positional correction the
     user needs in order to reach a control, so it is kept — but applied
     instantly rather than animated. */
  .wa-float { transition: opacity var(--dur-slow) var(--ease); }
  .wa-float.is-docked { --wa-dock: 0%; opacity: 0.25; }
  /* Parking is a positional correction, not decoration — it is the only thing
     keeping the footer credit row uncovered, so it is kept. The transform is
     not transitioned under this preference, so it applies instantly: no
     sliding, no vestibular motion. */
  .wa-float.is-parked { --wa-dock: calc(100% + var(--sp-6)); opacity: 0.25; }
}

/* ==========================================================================
   PROSE (legal pages)
   ========================================================================== */
.prose h2 { font-size: var(--fs-2xl); margin-block: var(--sp-10) var(--sp-4); }
.prose h3 { font-size: var(--fs-xl);  margin-block: var(--sp-8) var(--sp-3); }
.prose p, .prose li { color: var(--text-2); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose ul, .prose ol { padding-inline-start: var(--sp-6); display: grid; gap: var(--sp-2); }

/* Verified legal identity block. Restrained by intent: this is a disclosure,
   not a marketing panel. */
.footer__identity {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--footer-rule-strong);
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--footer-text-muted);
}
.footer__identity .footer__entity { color: var(--footer-text); font-weight: 600; }
/* The registered address is a legal disclosure, not a contact block — it stays
   at the same quiet weight as the rest of the identity lines. */
.footer__identity .footer__address { text-wrap: pretty; max-inline-size: 46ch; }
.footer__identity a {
  color: var(--footer-link);
  /* The mailto link is a real tap target, not decorative text: inline text
     inherits the paragraph's 23px line box, which is under the 24px floor. */
  display: inline-block;
  min-block-size: 24px;
  padding-block: var(--sp-1);
}
.footer__identity a:hover { color: var(--footer-accent); }
/* Latin runs (the number, the email) inside Arabic prose. */
.footer__identity .ltr-value { direction: ltr; unicode-bidi: isolate; }

/* ==========================================================================
   LEGAL DOCUMENTS

   Long-form reading, not marketing. Larger body text than the rest of the
   site, a wider line height, and no ambient movement behind the text — a
   policy is read closely, sometimes under obligation, and motion behind it is
   an obstacle rather than atmosphere.
   ========================================================================== */
.legal { padding-block-start: var(--sp-10); }

.legal__body p,
.legal__body li {
  /* 18px desktop / 16px minimum on mobile, per the readability floor. */
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: var(--lh-body);
}
:root[dir="rtl"] .legal__body p,
:root[dir="rtl"] .legal__body li { line-height: var(--lh-body-ar); }

.legal__body h2 { font-size: var(--fs-xl); }
.legal__body h3 { font-size: var(--fs-lg); }

/* Document identity, shown on the page rather than buried in the source. */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.legal__meta div { display: flex; gap: var(--sp-2); }
.legal__meta dt { color: var(--text-3); }
.legal__meta dd { color: var(--text-1); font-weight: 600; margin: 0; }

/* Table of contents. Plain fragment links: works with scripting disabled and
   is keyboard navigable without any extra handling. */
.legal__toc {
  margin-block: var(--sp-8);
  padding: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.legal__toc-h { font-size: var(--fs-base); margin-block-end: var(--sp-4); }
.legal__toc ol {
  margin: 0;
  padding-inline-start: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.legal__toc a { color: var(--text-2); text-decoration: none; }
.legal__toc a:hover { color: var(--accent-text); text-decoration: underline; }

.legal__section { scroll-margin-block-start: var(--sp-20); }
.legal__section + .legal__section { margin-block-start: var(--sp-10); }

/* A statement the reader should not skim past. */
.legal__note {
  border-inline-start: 3px solid var(--accent-line);
  padding-inline-start: var(--sp-4);
  color: var(--text-2);
}

.legal__backtotop { font-size: var(--fs-sm); margin-block-start: var(--sp-4); }
.legal__backtotop a { color: var(--text-3); }

/* Internal build-state marker. Preview only — see Release::showLegalDraftBanner. */
.legal__reviewflag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--ax-amber-ink);
  border-radius: var(--radius);
  color: var(--ax-amber-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ==========================================================================
   404
   ========================================================================== */
.error-page { display: grid; place-items: center; text-align: center; padding-block: var(--sp-24); }
.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--fs-5xl);
  font-weight: 700;
  color: var(--accent-line);
  line-height: 1;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .header, .footer__socials, .wa-float, .drawer, .marquee, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }

  /* Legal documents are the pages most likely to be printed or filed, so they
     get a deliberate print treatment rather than whatever the screen styles
     happen to produce on paper. */
  .legal__toc,
  .legal__backtotop,
  .legal__reviewflag,
  .page-header__eyebrow,
  .cta-strip,
  .footer__nav { display: none !important; }

  .legal__body p, .legal__body li { font-size: 11pt; line-height: 1.5; color: #000; }
  .legal__body h2 { font-size: 14pt; page-break-after: avoid; }
  .legal__body h3 { font-size: 12pt; page-break-after: avoid; }
  .legal__section { page-break-inside: auto; }
  .legal__meta { border-block-end: 1px solid #999; }
  .legal__meta dt, .legal__meta dd { color: #000; }
  .legal__note { border-inline-start: 2px solid #666; }

  /* Fragment links print as "(#section)" noise without this. */
  .legal a[href^="#"]::after { content: ""; }
}