/* -------------------------------------------------------- */
/* 🔹 Features Section                                      */
/* -------------------------------------------------------- */
/* Phones side by side with captions — reads as a flow:      */
/* choose → answer → review → progress                       */

.features {
  padding-block: var(--website-section-spacing);
  background-color: var(--color-card-fill);
}

.features .section-title {
  text-align: center;
}

/* Locked three-column grid — 3×2 regardless of viewport width:
   the flow on top, the extras below, ending on the celebration */
.features__steps {
  display: grid;
  grid-template-columns: repeat(3, 225px);
  justify-content: center;
  /* Generous row gap — the titles need air before the next row of phones */
  gap: var(--website-section-spacing) var(--space-xl);
  margin-top: var(--space-xxxl);
}

.feature-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Bezel composite from optimize-images.js — the frame is in the image */
.feature-step img {
  width: 100%;
  height: auto;
}

.feature-step__title {
  font-size: var(--text-headline-medium);
  font-weight: var(--text-title-weight);
  margin-top: var(--space-l);
  text-wrap: balance;
}


/* -------------------------------------------------------- */
/* 🔹 Responsive                                            */
/* -------------------------------------------------------- */

@media (max-width: 767px) {
  .features__steps {
    grid-template-columns: min(240px, 100%);
    gap: calc(var(--space-xl) * 2);
  }

}