@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-surface text-on-surface font-body;
  }
}

.klzs-stage-card {
  padding: clamp(0.6rem, 1.2vw, 1.25rem);
}

.klzs-stage-title {
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  line-height: 1.3;
}

.klzs-stage-subtitle {
  font-size: clamp(0.65rem, 0.75vw, 0.78rem);
}

.klzs-stage-desc {
  font-size: clamp(0.72rem, 0.9vw, 1rem);
  line-height: 1.45;
}

.klzs-stage-image {
  width: clamp(26%, 2vw + 24%, 38%);
}

@media (max-width: 760px) {
  .klzs-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}