/* FORGE Run page: reuses the FORGE Ride page pieces (ride.css); only what is its own lives here. */

/* How it works: a tall treadmill photo beside the three steps. */
.rn-how { align-items: center; }
.rn-photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -40px rgba(7, 9, 11, .45); }
.rn-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
@media (max-width: 899px) { .rn-photo { aspect-ratio: 4 / 3; } }

/* The hero's "min/km" stat is a word, not a number: a notch smaller so it fits its cell. */
.phero .stats dd small { font-size: .5em; }
.phero .stats > div:nth-child(3) dd { font-size: 30px; }

/* Picking the sport: the game's home screen. */
.rn-pick .screen { margin: 0; }

.rn-note { margin-top: 28px; color: rgba(255, 255, 255, .62); max-width: 62ch; }

/* On a phone the hero crops to the middle: keep the runner (right of centre) in frame. */
@media (max-width: 899px) { .phero__bg img { object-position: 66% 50%; } }