.models {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-card,
.steps article {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  padding-top: 18px;
}

.model-card h2 {
  font-size: clamp(30px, 5vw, 54px);
  line-height: 0.95;
}

.model-card p:not(.eyebrow),
.steps p {
  color: var(--muted);
}

.crease-diagram {
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    color-mix(in oklab, var(--surface), var(--fg) 3%);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  padding: clamp(18px, 4vw, 36px);
}

.crease-diagram svg {
  display: block;
  height: auto;
  width: 100%;
}

.crease-diagram rect {
  fill: color-mix(in oklab, var(--surface), white 10%);
  stroke: var(--fg);
  stroke-width: 2;
}

.crease-diagram line {
  fill: none;
  stroke-linecap: round;
}

.valley {
  stroke: #2563eb;
  stroke-dasharray: 9 6;
  stroke-width: 2.2;
}

.mountain {
  stroke: #dc2626;
  stroke-dasharray: 2 6;
  stroke-width: 2.2;
}

.steps {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps article {
  gap: 8px;
}

.steps span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.steps strong {
  font-size: 24px;
}

@media (max-width: 860px) {
  .models,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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