/* =========================================================
   Page — About

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   The head

   This one keeps the glow. Unlike the help centre and the
   status page, «عن أثر» is read by somebody deciding whether
   to trust the platform rather than by somebody with a
   problem, and it opens like the rest of the marketing site.
   --------------------------------------------------------- */
.ab-head {
  position: relative;
  padding-block: var(--space-20) var(--space-12);
  overflow: hidden;
}

.ab-head__glow {
  position: absolute;
  inset-block-start: -22rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  width: min(68rem, 130%);
  height: 40rem;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--color-primary-soft) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.ab-head__inner {
  position: relative;
  max-width: 46rem;
}

.ab-head__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.ab-head__lead {
  margin: 0;
  max-width: 42rem;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Why

   Three numbered movements in one column. Cards would turn
   three arguments into three features, and these are meant to
   be read in order: the language, then the money, then the map.
   --------------------------------------------------------- */
.ab-why__inner {
  max-width: 50rem;
}

.ab-why__list {
  margin-block-start: var(--space-10);
  display: grid;
  gap: var(--space-10);
}

.ab-reason {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-5);
  align-items: start;
}

.ab-reason__index {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-gold-text);
  font-variant-numeric: tabular-nums;
}

.ab-reason__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.ab-reason__body {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------
   How

   Two by two. A single row of four sets the measure at about
   thirty characters, which turns a two-line paragraph into five.
   --------------------------------------------------------- */
.ab-how__grid {
  margin-block-start: var(--space-10);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.ab-principle {
  height: 100%;
}

/* ---------------------------------------------------------
   Who

   The facts block is components/legal-facts.css — the same
   component the terms of use print, so the two pages cannot
   disagree about who is responsible for Athar.
   --------------------------------------------------------- */
.ab-who__inner {
  max-width: 50rem;
}

.ab-who__inner .section-head {
  margin-block-start: var(--space-10);
}

.ab-who__body {
  margin: 0;
  max-width: 44rem;
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.ab-who__foot {
  margin: var(--space-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  font-size: var(--fs-sm);
}

@media (max-width: 720px) {
  .ab-head {
    padding-block: var(--space-12) var(--space-8);
  }

  .ab-why__list {
    gap: var(--space-8);
  }

  .ab-reason {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .ab-how__grid {
    grid-template-columns: 1fr;
  }
}