/*
 * "How it works" polish. The card design itself is unchanged — this fixes the
 * spacing and legibility problems around it.
 *
 * The section markup carries `row g-4`, which is Bootstrap 5 gutter syntax.
 * This project ships Bootstrap 4 (data-toggle, mr-2, .row negative margins), so
 * g-4 resolves to nothing at all: the three cards sit flush against each other
 * with a 0px gap below 992px and only the default 15px gutter above it. Rather
 * than rewrite the grid, the gutters are supplied here.
 *
 * Loaded after home.css, which is where .work-step-card is declared. Those
 * classes are used by this section and nowhere else in the app, so overriding
 * them cannot affect another screen.
 */

/* ---------- Gutters ---------- */

/*
 * Bootstrap 4 gutters are padding on the columns plus a matching negative
 * margin on the row. Same technique here, with the bottom margin doing the
 * vertical spacing the stacked layout never had. The row's negative bottom
 * margin cancels the last card's, so the section does not gain stray space.
 */
#how-it-works .row {
  margin-right: -0.875rem;
  margin-bottom: -1.75rem;
  margin-left: -0.875rem;
}

#how-it-works .row > [class*='col-'] {
  padding-right: 0.875rem;
  padding-bottom: 1.75rem;
  padding-left: 0.875rem;
}

/* ---------- Heading ---------- */

/* The other sections introduce themselves with a line under the title; this
   one went straight from the heading to the cards. */
#how-it-works .steps-subtitle {
  max-width: 40rem;
  margin: 0 auto;
  color: #6b7280;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- Card ---------- */

#how-it-works .work-step-card {
  padding: 2.25rem 1.75rem !important;
}

/* -10px was enough to make the card visibly overlap the one below it while the
   gutters were missing. Matched to the pricing cards now. */
#how-it-works .work-step-card:hover {
  transform: translateY(-6px);
}

/*
 * The numeral was rgba(..., 0.05) — invisible on screen, and the whole point of
 * the section is that it is an ordered sequence. Still a watermark, just one
 * you can actually read.
 */
#how-it-works .step-number {
  top: 1rem;
  right: 1.25rem;
  color: rgba(32, 94, 163, 0.13);
  font-size: 3.25rem;
}

#how-it-works .work-step-card h4 {
  font-size: 1.2rem;
}

#how-it-works .work-step-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
  #how-it-works .work-step-card {
    padding: 1.85rem 1.35rem !important;
  }

  #how-it-works .work-step-card .avatar-feature {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }

  #how-it-works .step-number {
    font-size: 2.75rem;
  }

  /* No hover to undo on a touch screen: a tap would leave the card raised. */
  #how-it-works .work-step-card:hover {
    transform: none;
  }
}