/* Shared CSS for individual advice article pages */
.article-hero .info-callout {
  margin-top: 1.5rem;
}

.process-steps,
.reporting-steps,
.warranty-steps {
  display: grid;
  gap: 1.1rem;
}

.process-steps,
.reporting-steps {
  grid-template-columns: repeat(4, 1fr);
}

.warranty-steps {
  grid-template-columns: repeat(3, 1fr);
}

.process-step,
.reporting-step,
.warranty-step,
.step-card {
  position: relative;
  text-align: center;
  height: 100%;
  padding: 2rem 1.25rem 1.5rem;
}

.process-step.featured,
.reporting-step.featured,
.warranty-step.featured,
.step-card.featured {
  border: 2px solid var(--nbn-link);
  background: #F8FBFF;
}

.step-number {
  position: absolute;
  top: -16px;
  left: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--nbn-link);
  color: var(--nbn-white);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracker-example,
.email-example {
  padding: 1.5rem;
}

.tracker-example {
  background: var(--nbn-white);
}

.email-example {
  background: #F8FBFF;
}

.role-card {
  height: 100%;
  padding: 1.75rem;
}

.builder-card {
  background: linear-gradient(135deg, #FFFFFF, #F8FBFF);
}

.developer-card {
  background: linear-gradient(135deg, #FFFFFF, #F4F8FC);
}

@media (max-width: 991.98px) {
  .process-steps,
  .reporting-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .warranty-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .process-steps,
  .reporting-steps {
    grid-template-columns: 1fr;
  }
}