body {
  font-family: 'Inter', sans-serif;
  background-color: #f0f4f8;
}

.brand-blue { color: #00A6ED; }
.brand-green { color: #72C542; }
.brand-orange { color: #FF8000; }
.brand-yellow { color: #FFB900; }
.brand-dark { color: #333333; }
.bg-brand-blue { background-color: #00A6ED; }
.bg-brand-green { background-color: #72C542; }
.bg-brand-orange { background-color: #FF8000; }
.bg-brand-yellow { background-color: #FFB900; }
.bg-brand-dark { background-color: #333333; }

.chart-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  max-height: 400px;
}
@media (min-width: 768px) {
  .chart-container {
    height: 350px;
  }
}
.kpi-card {
  background-color: white;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.flowchart-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  text-align: center;
  font-weight: 600;
  min-height: 100px;
}
.flowchart-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #9ca3af;
}
.timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2rem;
  border-left: 2px solid #e5e7eb;
}
.timeline-dot {
  position: absolute;
  left: -0.6rem;
  top: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  border: 2px solid white;
}

a {
  font-weight: bold;
  text-decoration: underline;
  color: #FF8000;
}