@media (max-width: 640px) {
  .landing-logo {
    font-size: var(--font-size-3xl);
  }

  .landing-tagline {
    font-size: var(--font-size-base);
    text-align: center;
  }

  /* When geocoder is focused on mobile, shift content up so suggestions are visible above keyboard */
  #landing.keyboard-open {
    justify-content: flex-start;
    padding-top: var(--space-8);
  }

  #landing.keyboard-open .landing-steps,
  #landing.keyboard-open .landing-logo,
  #landing.keyboard-open .landing-tagline {
    display: none;
  }

  #landing.keyboard-open .distance-control,
  #landing.keyboard-open .location-btn {
    display: none;
  }

  .search-box {
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  }

  .search-box input {
    font-size: var(--font-size-sm);
  }

  .distance-control {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    max-width: 300px;
  }

  .map-header {
    padding: var(--space-2) var(--space-3);
  }

  .route-panel {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .route-panel-inner {
    flex-direction: column;
    gap: var(--space-3);
  }

  .route-nav {
    order: 2;
  }

  .route-info {
    order: 1;
  }

  .route-actions {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .route-distance {
    font-size: var(--font-size-xl);
  }

  .topo-bg::before {
    animation-duration: 120s;
  }
}

@media (max-width: 380px) {
  .landing-logo {
    font-size: var(--font-size-2xl);
  }

  .landing-steps {
    font-size: 0.6rem;
  }
}