/* Share the established Step layout; give Track its own route-focused identity. */
.track-page .step-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  border-color: rgba(99, 216, 255, .28);
  background: radial-gradient(circle at 80% 40%, rgba(25, 148, 206, .22), transparent 40%), linear-gradient(125deg, #101b49, #0b1731 63%, #082b42);
}
.track-page .step-hero h1 { font-size: clamp(3.7rem, 6.8vw, 6.8rem); }
.track-page .step-hero h1 span { color: #63d8ff; }
.track-page .step-eyebrow { color: #a9e7ff; }
.track-page .step-text-link { color: #bfefff; }
.track-page .step-feature-icon { color: #102f43; background: #a9e7ff; }
.track-page .step-feature:nth-child(2) .step-feature-icon,
.track-page .step-feature:nth-child(4) .step-feature-icon { background: #ffd277; }
.track-page .step-feature { background: linear-gradient(145deg, rgba(57, 110, 163, .32), rgba(19, 34, 92, .61)); }
.track-page .step-download { background: linear-gradient(120deg, #12354b, #131d4c); }
.track-page a:focus-visible,
.track-page button:focus-visible { outline: 3px solid #a9e7ff; outline-offset: 5px; }
.track-release-note { color: #b9cce3; font-size: .86rem; line-height: 1.6; margin: 22px 0 0; }
.track-hero-art { position: relative; z-index: 1; min-width: 0; }
.track-map { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; border: 1px solid rgba(99, 216, 255, .3); border-radius: 32px; overflow: hidden; transform: rotate(-5deg); background: linear-gradient(145deg, #132e43, #0b182c); box-shadow: 0 30px 65px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .1); }
.track-map svg { display: block; width: 100%; height: 100%; }
.track-map-river { stroke: #174362; stroke-width: 45; }
.track-map-streets { stroke: #54738a; stroke-width: 3; opacity: .35; }
.track-map-route-shadow { stroke: #63d8ff; stroke-width: 19; opacity: .1; stroke-linejoin: round; }
.track-map-route { stroke: #63d8ff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.track-map-estimate { stroke: #ffcf79; stroke-width: 4; stroke-dasharray: 7 9; stroke-linecap: round; }
.track-map-label { position: absolute; padding: 8px 12px; border: 1px solid rgba(169, 231, 255, .22); border-radius: 10px; background: #102537; font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.track-map-label-start { left: 8%; bottom: 12%; color: #ffcf79; }
.track-map-label-gps { right: 9%; top: 9%; color: #a9e7ff; }
.track-art-caption { margin: 27px 0 0; text-align: center; color: #b9cce3; font-size: .82rem; line-height: 1.5; }
.track-screenshot-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: min(100%, 230px); height: 285px; border: 1px dashed rgba(169, 231, 255, .35); border-radius: 18px; background: linear-gradient(150deg, rgba(99, 216, 255, .06), rgba(6, 21, 44, .6)); color: #b9cce3; text-align: center; }
.track-screenshot-placeholder > span { font-size: 2.5rem; color: #a9e7ff; }
.track-screenshot-placeholder p { margin: 0; padding: 0 15px; font-size: .88rem; }
@media (max-width: 1050px) and (min-width: 721px) {
  .track-page .step-hero { gap: 24px; padding: 44px 30px; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); }
  .track-page .step-hero h1 { font-size: clamp(3.3rem, 6.6vw, 4.5rem); }
}
@media (max-width: 720px) {
  .track-page .step-hero h1 { font-size: clamp(2.9rem, 11.3vw, 5.8rem); }
  .track-hero-art { max-width: 330px; width: 90%; margin: 36px auto 0; }
  .track-map { border-radius: 24px; }
  .track-screenshot-placeholder { height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .track-page .step-button { transition: none; }
  .track-page .step-button:hover { transform: none; }
}