/* =========================================================================
   /about
   -------------------------------------------------------------------------
   The house palette used elsewhere on the marketing pages (/founders,
   /season-1, the home launch banner): near-black ground, gold for labels,
   orange for the primary action, green for anything live. Declared once here
   as tokens so a colour change is one edit rather than forty.

   The site forces dark (see the inline script in shared/domHeader.php), so
   these are absolute values rather than theme variables -- same choice the
   other marketing pages make, and the reason they do not flicker.
   ========================================================================= */

.about-page {
  --ab-bg: #07090d;
  --ab-panel: #10141c;
  --ab-panel-soft: #0c1016;
  --ab-line: rgba(255, 255, 255, 0.1);
  --ab-line-soft: rgba(255, 255, 255, 0.06);
  --ab-text: #ffffff;
  --ab-dim: rgba(255, 255, 255, 0.72);
  --ab-faint: rgba(255, 255, 255, 0.52);
  --ab-gold: #d99a32;
  --ab-orange: #ef5c23;
  --ab-green: #22c55e;
  --ab-neon: #3dff7a;

  background: var(--ab-bg);
  color: var(--ab-text);
  overflow-x: clip;
}

.about-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 64px 20px;
}

/* -------------------------------------------------------------------------
   Shared type
   ------------------------------------------------------------------------- */

.about-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--ab-gold);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-page h2 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Stops a centred heading dropping a single orphan word onto its own line;
     ignored by browsers that do not support it, which is the whole fallback. */
  text-wrap: balance;
}

.about-page h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.about-page p {
  color: var(--ab-dim);
  line-height: 1.68;
}

/* A text link that behaves like a button without pretending to be one. */
.about-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--ab-neon);
  font-weight: 800;
  text-decoration: none;
}

.about-link span {
  transition: transform 0.18s ease;
}

.about-link:hover span {
  transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.about-actions--center {
  justify-content: center;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.about-btn:hover {
  transform: translateY(-2px);
}

.about-btn--primary {
  background: var(--ab-orange);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(239, 92, 35, 0.28);
}

.about-btn--primary:hover {
  background: #d84f1d;
}

.about-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--ab-text);
}

.about-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--ab-line-soft);
}

/* Atmosphere only. Two soft lamps -- gold behind the headline, green behind
   the photo -- so the band has depth without a background image competing
   with the framed one beside it. */
.about-hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(52% 58% at 18% 32%, rgba(217, 154, 50, 0.16), transparent 70%),
    radial-gradient(48% 52% at 84% 62%, rgba(34, 197, 94, 0.14), transparent 72%);
  pointer-events: none;
}

/* One column, no art. Same shape as the /founders hero, which is also words
   on a dark ground -- the two pages are a set and should open the same way. */
.about-hero__inner {
  padding-top: 72px;
  padding-bottom: 72px;
}

.about-hero__copy {
  max-width: 900px;
}

.about-hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* The turn of the sentence, in the accent -- "One ladder." is the whole
   pitch, and it should not read as more of the same line. */
.about-hero h1 span {
  display: block;
  color: var(--ab-neon);
}

.about-lead {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: 1.08rem;
}

/* The live-season chip. Green dot only when something actually is live.
   Typed as p.about-status so it outranks the page's default paragraph colour
   without an !important. */
p.about-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.09);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  line-height: 1.4;
}

.about-status strong {
  color: var(--ab-neon);
}

.about-status__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ab-neon);
  box-shadow: 0 0 0 0 rgba(61, 255, 122, 0.55);
  animation: about-pulse 2.2s ease-out infinite;
}

@keyframes about-pulse {
  70% { box-shadow: 0 0 0 9px rgba(61, 255, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 255, 122, 0); }
}

/* -------------------------------------------------------------------------
   The numbers band
   ------------------------------------------------------------------------- */

.about-numbers {
  padding-top: 56px;
  padding-bottom: 56px;
}

.about-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-number {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
  border-radius: 18px;
  border: 1px solid var(--ab-line);
  background: linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
}

/* 33 is the name of the game. It should be the loudest thing in the row. */
.about-number--hero {
  border-color: rgba(61, 255, 122, 0.4);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), var(--ab-panel-soft));
}

.about-number__value {
  font-size: clamp(3rem, 5.4vw, 4.4rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.about-number--hero .about-number__value {
  color: var(--ab-neon);
}

.about-number__label {
  margin-top: 6px;
  color: var(--ab-gold);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-number__note {
  color: var(--ab-faint);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Copy / art split (the format, and the 11 ball)
   ------------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}

.about-split__copy p + p {
  margin-top: 14px;
}

.about-ticks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.about-ticks li {
  position: relative;
  padding: 7px 0 7px 30px;
  color: var(--ab-dim);
  line-height: 1.55;
}

/* A drawn tick rather than a glyph: no font dependency, and it lines up. */
.about-ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ab-neon);
  border-bottom: 2px solid var(--ab-neon);
  transform: rotate(-45deg);
}

.about-eleven {
  margin: 0;
  padding: 32px;
  border-radius: 22px;
  border: 1px solid var(--ab-line);
  background:
    radial-gradient(60% 50% at 50% 28%, rgba(239, 92, 35, 0.18), transparent 70%),
    linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
  text-align: center;
}

.about-eleven img {
  width: min(230px, 62%);
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.6));
}

.about-eleven figcaption {
  margin-top: 20px;
  color: var(--ab-dim);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: left;
}

.about-eleven figcaption strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ab-text);
  font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
   Mission & vision
   ------------------------------------------------------------------------- */

.about-purpose__title {
  text-align: center;
  margin-bottom: 32px;
}

.about-purpose__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Three reasons across. The art sits ON TOP rather than beside the copy: at a
   third of the row there is no width to give an illustration a column of its
   own without squeezing the words into a gutter. */
.about-purpose__card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--ab-line);
  background: linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
}

/* White line art on transparent, so it sits on this ground as a cut-out. The
   slight knock-back keeps it illustration rather than a second headline.

   align-self, and a height rather than a width. The card is a column flex
   container, so `width: auto` did not mean "keep the proportions" -- it meant
   "stretch to the cross axis", and both drawings were squashed from square
   into roughly 355x110. flex-start stops the stretch; object-fit is the belt
   and braces, holding the ratio whatever size these are re-exported at.

   Sized by HEIGHT because the two drawings are different shapes -- a standing
   figure and a wide scene -- and matching their widths would leave one of
   them twice the size of the other. They use the _trimmed files for the same
   reason: in the untrimmed squares the figure sat a third of the canvas in
   from the left, so it lined up with nothing on the card beside it. */
.about-purpose__card img {
  display: block;
  align-self: flex-start;
  width: auto;
  height: 132px;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 18px;
  opacity: 0.88;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

/* Stands in for the third drawing that does not exist, at exactly the height
   of the two that do, so all three headings start on the same line. Knocked
   well back: it is a mark, not a number anybody is meant to read. */
.about-purpose__mark {
  display: flex;
  align-items: center;
  height: 132px;
  margin: 0 0 18px;
  color: var(--ab-text);
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  opacity: 0.16;
}

.about-purpose__card p:last-child {
  margin: 0;
}

/* -------------------------------------------------------------------------
   How it works
   ------------------------------------------------------------------------- */

.about-how__head {
  max-width: 720px;
  margin-bottom: 36px;
}

.about-how__lede {
  font-size: 1.05rem;
}

/* The three steps read down the left, one screenshot stands on the right. */
.about-how__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
}

.about-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-step {
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--ab-line);
  background: linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
}

.about-step__num {
  color: var(--ab-gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.about-step h3 {
  margin-top: 6px;
}

.about-step p {
  margin: 0;
  font-size: 0.95rem;
}

/* The phone. Its own well, so a missing capture fills the same box with a
   label instead of collapsing the layout.

   The ratio is the CAPTURE'S OWN (810x1753), not a rounded 9:16 -- at 9:16
   the crop ate the bottom eighth of the screen, which is precisely where the
   Ranked button lives. Cropping away the one control the caption points at
   is worse than no screenshot. Re-shoot at a different size and this number
   is the thing to change. */
.about-how__shot {
  margin: 0;
}

.about-how__phone {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 810 / 1753;
  border-radius: 22px;
  border: 1px solid var(--ab-line);
  background: #05070b;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.about-how__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.about-how__pending {
  padding: 0 18px;
  color: var(--ab-faint);
  font-size: 0.85rem;
  text-align: center;
}

.about-how__shot figcaption {
  margin-top: 16px;
  color: var(--ab-faint);
  font-size: 0.88rem;
  line-height: 1.6;
}

.about-how__shot figcaption strong {
  color: var(--ab-text);
}

/* -------------------------------------------------------------------------
   The live board
   ------------------------------------------------------------------------- */

.about-live__panel {
  padding: 30px;
  border-radius: 22px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(34, 197, 94, 0.12), transparent 70%),
    linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
}

.about-live__head h2 {
  margin-bottom: 22px;
}

.about-live__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Four columns: rank, who, record, rating. Fixed tracks on the outside so the
   ratings line up down the right edge however long the names are. */
.about-live__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 72px;
  gap: 12px;
  align-items: center;
  padding: 14px 4px;
  border-top: 1px solid var(--ab-line-soft);
}

.about-live__row:first-child {
  border-top: 0;
}

.about-live__rank {
  color: var(--ab-faint);
  font-weight: 900;
  font-size: 0.95rem;
}

.about-live__row--1 .about-live__rank { color: #ffd166; }
.about-live__row--2 .about-live__rank { color: #d8dee9; }
.about-live__row--3 .about-live__rank { color: #d99a32; }

.about-live__name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-weight: 800;
}

.about-live__name a {
  color: var(--ab-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-live__name a:hover {
  color: var(--ab-neon);
}

.about-live__record {
  color: var(--ab-faint);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.about-live__rating {
  color: var(--ab-neon);
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Origin band
   ------------------------------------------------------------------------- */

.about-origin {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 40px;
  align-items: center;
  padding: 36px;
  border-radius: 24px;
  border: 1px solid var(--ab-line);
  background:
    radial-gradient(60% 80% at 88% 50%, rgba(44, 117, 255, 0.14), transparent 70%),
    linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
}

.about-origin__copy p + p {
  margin-top: 14px;
}

.about-origin__art {
  margin: 0;
  text-align: center;
}

.about-origin__art img {
  width: min(280px, 100%);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
}

/* -------------------------------------------------------------------------
   Closing call
   ------------------------------------------------------------------------- */

.about-cta-wrap {
  padding-bottom: 88px;
}

.about-cta {
  padding: 52px 36px;
  border-radius: 24px;
  border: 1px solid rgba(239, 92, 35, 0.3);
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(239, 92, 35, 0.16), transparent 70%),
    linear-gradient(180deg, var(--ab-panel), var(--ab-panel-soft));
  text-align: center;
}

.about-cta .about-kicker {
  justify-content: center;
}

.about-cta h2 {
  max-width: 760px;
  margin-inline: auto;
}

.about-cta__lede {
  max-width: 640px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------
   Hidden ONLY once the script has armed the page. A browser that never runs
   it -- or one asking for reduced motion, where the script bails before
   arming -- sees every block, because a fade-in that never fires is an
   invisible page.
   ------------------------------------------------------------------------- */

.about-page--armed .js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-page--armed .js-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Siblings in a row stagger, so a grid arrives as a row rather than a flash. */
.about-page--armed .js-reveal:nth-child(2) { transition-delay: 0.08s; }
.about-page--armed .js-reveal:nth-child(3) { transition-delay: 0.16s; }
.about-page--armed .js-reveal:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .about-page--armed .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-status__dot {
    animation: none;
  }

  .about-btn:hover,
  .about-link:hover span {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .about-split,
  .about-origin {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .about-numbers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Steps first, then the phone under them. Capped, because a full-width
     phone screenshot on a phone is a screenshot of the reader's own screen. */
  .about-how__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .about-how__shot {
    width: min(280px, 100%);
    margin-inline: auto;
  }

  .about-purpose__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the middle card no longer shares a row with anything, so the
     mark holding its heading in line has nothing left to line up with. */
  .about-purpose__mark {
    height: auto;
    margin-bottom: 10px;
    font-size: 3.4rem;
  }

  .about-origin__art {
    order: -1;
  }
}

@media (max-width: 640px) {
  .about-shell {
    padding: 44px 16px;
  }

  .about-hero__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .about-purpose__card,
  .about-origin,
  .about-live__panel {
    padding: 22px;
  }

  .about-eleven {
    padding: 24px;
  }

  .about-cta {
    padding: 36px 20px;
  }

  .about-btn {
    width: 100%;
  }

  .about-live__row {
    grid-template-columns: 40px minmax(0, 1fr) 62px;
  }

  /* Record is the first thing to go when the row runs out of width -- the
     rating is the number people came to read. */
  .about-live__record {
    display: none;
  }
}