/* ============================================================================
   "How I read a chart" — scrollytelling methodology page
   ----------------------------------------------------------------------------
   Every competitor in this market claims accuracy. None of them shows their
   working. This page is the differentiator: a chart pinned on one side, the
   reasoning scrolling past on the other, and the specific houses lighting up as
   each step is argued.

   It is also the only page here that needs an engineer's temperament — which is
   exactly the positioning.
   ========================================================================== */

.mx {
  background: transparent;
  color: var(--u-head);
  font-family: var(--v2-body);
}

/* ------------------------------------------------------------------ intro  */

.mx-intro {
  padding: clamp(64px, 10vh, 120px) var(--v2-gutter) clamp(40px, 6vh, 72px);
  max-width: 1240px;
  margin: 0 auto;
}

.mx-intro__title {
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  max-width: 17ch;
}

.mx-intro__title em { font-style: italic; color: var(--u-gold-text); }

.mx-intro__lede {
  font-size: clamp(0.98rem, 1.15vw, 1.18rem);
  line-height: 1.7;
  color: var(--u-text);
  max-width: 62ch;
  margin: 0 0 clamp(22px, 3vw, 34px);
}

/* A visible statement that the case is anonymised. Trust depends on being
   straight about what the reader is looking at. */
.mx-note {
  border-left: 2px solid var(--u-gold);
  padding: 14px 18px;
  background: var(--u-tint);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--u-text);
  max-width: 62ch;
}

.mx-note b { color: var(--u-gold-text); font-weight: 600; }

/* ------------------------------------------------------------------ stage  */

.mx-stage {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--v2-gutter) clamp(72px, 12vh, 140px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.mx-chartcol {
  position: sticky;
  top: clamp(72px, 12vh, 120px);
  align-self: start;
}

.mx-chart-wrap {
  position: relative;
  border: 1px solid var(--u-line);
  border-radius: 3px;
  padding: clamp(14px, 2vw, 26px);
  background: var(--u-card);
  box-shadow: var(--u-shadow-card);
}

.mx-chart { display: block; width: 100%; height: auto; }

.mx-chart-cap {
  margin-top: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--u-sub);
}

/* ------------------------------------------------------------------- svg   */

.mx-house-fill {
  fill: transparent;
  transition: fill 0.7s var(--v2-ease);
}

.mx-house-fill.is-lit { fill: var(--u-chart-lit); }
.mx-house-fill.is-lit--rust { fill: var(--u-chart-lit-2); }

.mx-line {
  stroke: var(--u-chart-line);
  stroke-width: 1;
  fill: none;
}

.mx-num {
  fill: var(--u-chart-num);
  font-size: 11px;
  font-family: var(--v2-body);
  text-anchor: middle;
}

.mx-planet {
  fill: var(--u-head);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--v2-body);
  text-anchor: middle;
  opacity: 0.55;
  transition: opacity 0.6s var(--v2-ease), fill 0.6s var(--v2-ease);
}

.mx-planet.is-lit { opacity: 1; fill: var(--u-gold-text); }

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

.mx-steps { display: grid; gap: clamp(48px, 9vh, 110px); }

.mx-step {
  scroll-margin-top: 120px;
  opacity: 0.4;
  transition: opacity 0.6s var(--v2-ease);
}

.mx-step.is-active { opacity: 1; }

.mx-step__n {
  font-family: var(--v2-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--u-gold);
  display: block;
  margin-bottom: 10px;
}

.mx-step__h {
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--u-head);
}

.mx-step__b {
  font-size: clamp(0.92rem, 1.02vw, 1.02rem);
  line-height: 1.75;
  color: var(--u-text);
  margin: 0 0 14px;
  max-width: 58ch;
}

.mx-step__b strong { color: var(--u-strong); font-weight: 600; }

/* The observable fact each step rests on — kept visually separate from the
   interpretation, because the distinction is the entire argument. */
.mx-fact {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u-gold-text);
  border: 1px solid var(--u-line);
  border-radius: 2px;
  padding: 7px 12px;
  margin-top: 6px;
}

/* ---------------------------------------------------------------- outcome  */

.mx-outcome {
  border-top: 1px solid var(--u-rule);
  margin-top: clamp(40px, 7vh, 76px);
  padding-top: clamp(28px, 4vh, 44px);
}

.mx-outcome__k {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--u-gold-text);
  margin: 0 0 10px;
}

.mx-cta-band {
  background: var(--u-band);
  border-top: 1px solid var(--u-rule);
  padding: clamp(48px, 8vh, 90px) var(--v2-gutter);
  text-align: center;
}

.mx-cta-band h2 {
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  margin: 0 0 14px;
  color: var(--u-head);
}

.mx-cta-band p {
  color: var(--u-text);
  max-width: 54ch;
  margin: 0 auto 26px;
  line-height: 1.7;
}

/* ------------------------------------------------------------- responsive  */

@media (max-width: 960px) {
  .mx-stage { grid-template-columns: 1fr; gap: 28px; }

  .mx-chartcol {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px 0;
    background: var(--u-ground);
    /* A full chart is unreadable at phone width alongside text, so it shrinks
       to a strip that still tracks the argument. */
    max-width: 260px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-step { opacity: 1 !important; }
  .mx-house-fill, .mx-planet { transition: none !important; }
}

/* Astra sets heading colours with higher specificity than a single class, so
   these have to be stated explicitly or the display type renders near-black on
   near-black. */
.mx .mx-intro__title,
.mx h1.mx-intro__title {
  color: var(--u-head) !important;
}

.mx .mx-step__h,
.mx h2.mx-step__h,
.mx .mx-cta-band h2 {
  color: var(--u-head) !important;
}

.mx .mx-intro__title em,
.mx .mx-step__h em {
  color: var(--u-gold-text) !important;
}

.mx .mx-intro__lede,
.mx .mx-step__b {
  color: var(--u-text) !important;
}

.mx a:not(.v2-btn) {
  color: var(--u-gold-text);
}

/* ---------------------------------------------------------------- about   */

.ab-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.ab-portrait { margin: 0; width: min(100%, 330px); justify-self: end; }

.ab-portrait figcaption {
  margin-top: 30px;
  font-family: var(--v2-body);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--u-sub);
  line-height: 1.6;
}

.ab-body {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--v2-gutter) clamp(56px, 9vh, 104px);
}

.ab-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.ab-h {
  font-family: var(--v2-display) !important;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  color: var(--u-head) !important;
  margin: 0 0 14px;
}

.ab-h--wide { margin-bottom: 20px; }

.ab-col p {
  font-size: clamp(0.92rem, 1.02vw, 1.02rem);
  line-height: 1.78;
  color: var(--u-text) !important;
  margin: 0 0 16px;
  max-width: 54ch;
}

.ab-col strong { color: var(--u-strong); font-weight: 600; }

.ab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--u-rule);
  border: 1px solid var(--u-rule);
  margin: clamp(38px, 6vh, 68px) 0;
}

.ab-stat {
  background: var(--u-ground);
  padding: clamp(20px, 3vw, 30px);
  text-align: center;
}

.ab-stat b {
  display: block;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--u-gold-text);
  line-height: 1.1;
}

.ab-stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--u-sub);
}

.ab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.ab-list li {
  border-top: 1px solid var(--u-rule);
  padding: 18px 2px;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.72;
  color: var(--u-text);
  max-width: 78ch;
}

.ab-list li:last-child { border-bottom: 1px solid var(--u-rule); }
.ab-list b { color: var(--u-gold-text); font-weight: 600; }

@media (max-width: 900px) {
  .ab-intro__grid { grid-template-columns: 1fr; }
  .ab-portrait { justify-self: start; width: min(100%, 250px); order: -1; }
}

/* About — their founder bio, verbatim (client feedback 2026-09-24) */
.ab-roles {
  font-family: var(--v2-body);
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-gold-text);
  margin: 0 0 22px;
}

.ab-quote {
  font-family: var(--v2-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  line-height: 1.35;
  color: var(--u-gold-text) !important;
  margin: 0;
  max-width: 30ch;
}

.ab-bio {
  max-width: 72ch;
  margin: 0 auto;
}

.ab-bio p {
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.85;
  color: var(--u-text) !important;
  margin: 0 0 22px;
}

.ab-bio strong { color: var(--u-strong); font-weight: 600; }