/* --- GETTING STARTED SECTION --- */

.steps-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.step {
  text-align: center;
  position: relative;
}

/* Step Number Styling */
.step-number {
  font-family: "JetBrains Mono", monospace;
  font-size: 3rem;
  font-weight: 700;
  color: var(--pico-primary); 
  opacity: 0.2;
  margin-bottom: 0rem;
  display: block;
  line-height: 1;
  z-index: 0;
}

.step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.step p {
  color: var(--muted-color);
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* --- CTA BUTTONS CONTAINER --- */

.cta-container {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Ensure buttons are sharp if global override isn't catching them */
.cta-container a[role="button"] {
  border-radius: 0 !important;
  padding: 0.8rem 2rem; /* Slightly larger buttons for emphasis */
  font-weight: 600;
}

/* Mobile Stacking */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-container a[role="button"] {
    width: 100%;
    text-align: center;
  }
}