/* Compact cross-links between the tool pages. Every tool page carries the
   whole set minus itself, so the list has to stay small enough to read as an
   index rather than a wall of cards. */
/* The sign-up CTA above these links is shifted down with `bottom: -200px`
   and reserves no space of its own, so it painted straight over them. This
   stylesheet only loads on tool pages, so the offset is cancelled here and the
   banner sits in normal flow instead. The `.container` in the selector outranks
   the Bootstrap `.mb-5` some of the pages put on the same element. */
.roadmap-extraFooterContainer.container {
  bottom: 0 !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.tp-links {
  padding: 48px 0 56px 0;
  border-top: 1px solid #e8e8f0;
}

.tp-links-title {
  margin: 0 0 20px 0;
  color: #0d001f;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.tp-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.tp-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e8e8f0;
  background: #fff;
  color: #0d001f;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tp-link:hover {
  border-color: #6e00ff;
  background: rgba(110, 0, 255, 0.04);
  color: #0d001f;
  text-decoration: none;
}

.tp-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(110, 0, 255, 0.1);
  color: #6e00ff;
  font-size: 15px;
}

.tp-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .tp-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tp-links {
    padding: 32px 0 40px 0;
  }

  .tp-links-title {
    font-size: 20px;
  }

  .tp-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tp-links-grid {
    grid-template-columns: 1fr;
  }
}