/* ==========================================================================
   Zim Zam Labs — Page CSS: HOW IT WORKS
   Adds: 4-step variant of usage steps, use-cases grid
   Reuses: science-hero, usage steps, chapter, pullquote-display, capture
   ========================================================================== */

/* 4-column variant of usage steps */
.usage__steps--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .usage__steps--four { grid-template-columns: repeat(2, 1fr); }
  .usage__steps--four .usage-step:nth-child(2) { border-right: none; }
  .usage__steps--four .usage-step:nth-child(1),
  .usage__steps--four .usage-step:nth-child(2) {
    border-bottom: 1px solid var(--ink-line);
  }
}
@media (max-width: 640px) {
  .usage__steps--four { grid-template-columns: 1fr; }
  .usage__steps--four .usage-step {
    border-right: none;
    border-bottom: 1px solid var(--ink-line);
  }
  .usage__steps--four .usage-step:last-child { border-bottom: none; }
}

/* ==========================================================================
   USE CASES GRID
   ========================================================================== */
.usecases {
  background: var(--cream-50);
  position: relative;
}
.usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--cream-400);
  border-left: 1px solid var(--cream-400);
}
@media (max-width: 920px) {
  .usecases__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .usecases__grid { grid-template-columns: 1fr; }
}

.usecase {
  padding: var(--space-xl);
  background: var(--cream-50);
  border-right: 1px solid var(--cream-400);
  border-bottom: 1px solid var(--cream-400);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background var(--t-fast) var(--ease-out);
  position: relative;
}
.usecase:hover { background: var(--cream-100); }

.usecase__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--gold-700);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.usecase__num::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: var(--gold-700);
}
.usecase__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
}
.usecase__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-on-cream-muted);
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 640px) {
  .usecase { padding: var(--space-lg); }
  .usecase__num { font-size: 0.625rem; }
  .usecase__title { font-size: 1.375rem; }
  .usecase__desc { font-size: 0.9375rem; }
}