/* ==========================================================================
   Cenematic home-c — "Builds Your Entire Video in 3 Steps" section
   Each step: a big grey number to the left of the title + body, with the
   step illustration alongside (image side alternates).
   Step illustrations are placeholder Pexels images — swap for the final art.
   ========================================================================== */

.steps { padding: 36px 40px 96px; background: #e9ebf4; }

.steps__heading {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.steps__heading-accent {
  background: linear-gradient(105deg, #d97706, #ea580c, #c2410c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.steps__list { max-width: 1100px; margin: 0 auto; }

/* Each step: text column | image, with the image side alternating */
.steps__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.steps__item + .steps__item { margin-top: 64px; }
.steps__item:nth-child(even) .steps__media { order: -1; }

/* Text column: big number to the left of the title + body */
.steps__text {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num body";
  column-gap: 26px;
  align-items: start;
}

.steps__num {
  grid-area: num;
  align-self: start;
  font-size: clamp(64px, 7vw, 120px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(160deg, #d97706, #ea580c, #c2410c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.steps__title {
  grid-area: title;
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.steps__body {
  grid-area: body;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: #353a4e;
}
.steps__body p { margin-bottom: 14px; }
.steps__body p:last-child { margin-bottom: 0; }
.steps__body em { font-style: italic; font-weight: 600; color: #c2410c; }

.steps__checks { list-style: none; margin: 4px 0 14px; }
.steps__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-weight: 500;
}
.steps__checks li::before { content: "✓"; color: #ea580c; font-weight: 800; }

/* "GO" mini marker slab — same language as the story section */
.steps__go {
  display: inline-block;
  padding: 0.04em 0.34em 0.1em;
  border-radius: 0.18em;
  background: linear-gradient(100deg, #ff8a00, #ff3d00);
  color: #fff;
  font-weight: 800;
  transform: rotate(-1.5deg);
}

.steps__media { margin: 0; }
.steps__media img,
.steps__media video {
  display: block;
  width: 100%;
  border-radius: 18px;
}

@media (max-width: 820px) {
  .steps { padding: 24px 22px 72px; }
  .steps__heading { margin-bottom: 40px; }
  .steps__item { grid-template-columns: 1fr; gap: 24px; }
  .steps__item:nth-child(even) .steps__media { order: 0; }
}