/* The Method in Motion: a quiet, accelerating path with accessible HTML labels. */
#challenge.ars-section { padding-bottom: 0; }

#challenge .ars-shift-panel {
  position: relative;
  isolation: isolate;
  display: block;
  max-width: none;
  min-height: 0;
  margin: clamp(2.8rem, 4vw, 4rem) 0 0;
  padding: clamp(2.3rem, 3.5vw, 3.5rem) 0 clamp(1.3rem, 2.5vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}

#challenge .ars-shift-panel::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background: radial-gradient(ellipse 36% 70% at 79% 38%, #29396460, transparent 82%), #0a1936;
  content: "";
  transform: translateX(-50%);
}

#challenge .ars-shift-panel > div:first-child { display: block; }

#challenge .ars-shift-panel .ars-eyebrow {
  margin: 0;
  color: #86d4eb;
  font-size: clamp(.72rem, .9vw, .85rem);
  font-weight: 800;
  letter-spacing: .17em;
}

#challenge .ars-shift-panel h3 {
  margin: .55rem 0 0;
  color: #f8f9ff;
  font-size: clamp(2rem, 3.15vw, 2.65rem);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.13;
}

#challenge .ars-trajectory {
  position: relative;
  width: 100%;
  aspect-ratio: 1300 / 290;
  margin-top: -5.75rem;
}

#challenge .ars-trajectory-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#challenge .ars-trajectory-svg--mobile { display: none; }

#challenge .ars-shift-track {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

#challenge .ars-shift-track::before,
#challenge .ars-shift-track::after,
#challenge .ars-shift-track li::before { display: none; content: none; }

#challenge .ars-shift-track li {
  position: absolute;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: clamp(.95rem, 1.3vw, 1.24rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

#challenge .ars-shift-track li:nth-child(1) { top: calc(74.1% + 1.15rem); left: 1.4%; color: #b7c8dc; }
#challenge .ars-shift-track li:nth-child(2) { top: calc(69.7% + 1.2rem); left: 29.2%; color: #aaebf2; }
#challenge .ars-shift-track li:nth-child(3) { top: calc(54.5% + 1.35rem); left: 56.9%; color: #c7d3fb; }
#challenge .ars-shift-track li:nth-child(4) {
  top: calc(26.2% + 1.7rem);
  left: min(82.9%, calc(100% - 12.4rem));
  color: #fff;
  font-size: clamp(1.04rem, 1.55vw, 1.36rem);
  font-weight: 760;
}

@media (max-width: 46rem) {
  #challenge .ars-shift-panel {
    margin-top: 2.4rem;
    padding: 2rem 0 1.2rem;
  }

  #challenge .ars-shift-panel::before {
    background: radial-gradient(ellipse 92% 48% at 43% 80%, #29396468, transparent 84%), #0a1936;
  }

  #challenge .ars-shift-panel .ars-eyebrow { font-size: .72rem; letter-spacing: .16em; }
  #challenge .ars-shift-panel h3 {
    max-width: 13ch;
    margin-top: .8rem;
    font-size: clamp(1.9rem, 8.2vw, 2.3rem);
    line-height: 1.08;
  }

  #challenge .ars-trajectory {
    aspect-ratio: auto;
    height: 400px;
    margin-top: 1.5rem;
  }

  #challenge .ars-trajectory-svg--desktop { display: none; }
  #challenge .ars-trajectory-svg--mobile { display: block; width: 130px; height: 420px; }

  #challenge .ars-shift-track { margin: 0; padding: 0; }
  #challenge .ars-shift-track li {
    min-height: 0;
    padding: 0;
    font-size: clamp(1rem, 4.5vw, 1.16rem);
    line-height: 1.25;
  }
  #challenge .ars-shift-track li:nth-child(1) { top: 25px; left: clamp(4.8rem, 23%, 6.3rem); }
  #challenge .ars-shift-track li:nth-child(2) { top: 129px; left: clamp(5.1rem, 26%, 7.2rem); }
  #challenge .ars-shift-track li:nth-child(3) { top: 235px; left: clamp(6rem, 31%, 8.1rem); }
  #challenge .ars-shift-track li:nth-child(4) {
    top: 335px;
    left: clamp(8.5rem, 40%, 10rem);
    max-width: calc(100% - clamp(8.5rem, 40%, 10rem));
    font-size: clamp(1.06rem, 4.8vw, 1.22rem);
    white-space: normal;
  }
}

@media (forced-colors: active) {
  #challenge .ars-shift-panel::before { background: Canvas; }
  #challenge .ars-shift-panel h3,
  #challenge .ars-shift-panel .ars-shift-track li,
  #challenge .ars-shift-panel .ars-eyebrow { color: CanvasText; }
  #challenge .ars-trajectory-svg { filter: grayscale(1) brightness(1.7); }
}
