/* Methodology Rainbow Cards */
.tone-red {
  border-top: 6px solid #ef4444;
  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.08), #F8F5EF);
  box-shadow: 0 20px 40px rgba(239, 68, 68, 0.12);
}

.tone-red::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ef4444, #f87171, #fca5a5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tone-red:hover::before {
  opacity: 1;
}

.tone-red:hover {
  box-shadow: 0 24px 48px rgba(239, 68, 68, 0.18);
}

.tone-orange {
  border-top: 6px solid #f97316;
  background: linear-gradient(to bottom, rgba(249, 115, 22, 0.08), #F8F5EF);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.12);
}

.tone-orange::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f97316, #fb923c, #fdba74);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tone-orange:hover::before {
  opacity: 1;
}

.tone-orange:hover {
  box-shadow: 0 24px 48px rgba(249, 115, 22, 0.18);
}

.tone-yellow {
  border-top: 6px solid #f59e0b;
  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.08), #F8F5EF);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.12);
}

.tone-yellow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fcd34d);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tone-yellow:hover::before {
  opacity: 1;
}

.tone-yellow:hover {
  box-shadow: 0 24px 48px rgba(245, 158, 11, 0.18);
}

.tone-green {
  border-top: 6px solid #22c55e;
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.08), #F8F5EF);
  box-shadow: 0 20px 40px rgba(34, 197, 94, 0.12);
}

.tone-green::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #4ade80, #86efac);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tone-green:hover::before {
  opacity: 1;
}

.tone-green:hover {
  box-shadow: 0 24px 48px rgba(34, 197, 94, 0.18);
}

.tone-blue {
  border-top: 6px solid #3b82f6;
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.08), #F8F5EF);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12);
}

.tone-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tone-blue:hover::before {
  opacity: 1;
}

.tone-blue:hover {
  box-shadow: 0 24px 48px rgba(59, 130, 246, 0.18);
}