/* ==========================================================================
   IC7 — about.css
   Page-specific layout for about.html only.
   Global components live in main.css — this file extends, never restyles.
   Tokens only: no hard-coded colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.about-hero {
  padding-bottom: var(--space-9);
}

.about-hero .glow-orb {
  top: -40%;
  right: -14%;
}

.about-hero__stats {
  position: relative;
  z-index: var(--z-content);
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   2. Platform section — copy beside the comparison table
   -------------------------------------------------------------------------- */
.about-platform {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .about-platform {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  .about-platform__table {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* --------------------------------------------------------------------------
   3. Game library
   -------------------------------------------------------------------------- */
.about-library__intro {
  max-width: var(--container-text);
}

/* Push every category CTA to the bottom edge so the buttons line up across
   the row regardless of description length. */
.about-cat__link {
  margin-top: auto;
  align-self: flex-start;
}