/* =====================================================================
   How It Works (DARK) — Figma 8674:30868 ("Here's How It Works")
   A dark-navy gradient section locked to the 1240 area: a centred gradient
   H2 (Axiforma Medium 32/45), a 3-up row of vertical cards (square 360x360
   image + white H3 Medium 24 title + white Normal Body 16), then a single
   centred filled-blue CTA below the row.

   Self-contained, .howitworks-scoped — no shared selectors, so it cannot
   regress other sections. Tokens only; the CTA reuses .btn + new .btn--og.
   Desktop styles + a mobile block (<=767.98px) that stacks the row into one
   column and reduces the heading type.
   ===================================================================== */

.howitworks {
  background: var(--hp-hiw-bg-grad); /* dark navy gradient */
  padding-block: 40px; /* reduced from 80px — balanced dark band, less empty space above/below the screenshots */
}

.howitworks__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* site-standard stack rhythm */
}

/* Heading — OG Desktop H2 (Axiforma Medium 32/45), soft-blue->white gradient text. */
.howitworks__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  text-align: center;
  background: var(--hp-hiw-text-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  word-break: break-word;
}

/* ---- Card row: 3 equal cards across, 20px gap ---- */
.howitworks__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

/* ---- Vertical card: square image + title + body ---- */
.howitworks__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Image — 360x360 square, capped, centred, contained. */
.howitworks__media {
  margin: 0;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.howitworks__image {
  display: block;
  width: 100%;
  height: auto; /* override the build-injected height="720" attr so aspect-ratio governs (else box is 360x720, floating the phone with empty space above/below) */
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin-inline: auto;
  border-radius: var(--radius-8);
  object-fit: contain;
}

/* Card title — OG Desktop H3 (Axiforma Medium 24), white, centred. */
.howitworks__card-title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--gray-0);
  text-align: center;
  word-break: break-word;
}

/* Card body — OG Normal Body (Axiforma Regular 16), white, centred. */
.howitworks__card-body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-0);
  text-align: center;
  word-break: break-word;
}

/* Single centred CTA — reuses .btn / .btn--og; layout override only (hug width). */
.howitworks__cta {
  flex: none;
}

/* ---- Tablet (600–1023px): stack the 3-up card row into a single column ---- */
@media (max-width: 1023.98px) {
  .howitworks__row {
    flex-direction: column;
  }

  /* Cards fill the full width when stacked. */
  .howitworks__card {
    flex: 0 0 auto;
  }
}

/* ---- Large-mobile / phone (<=767.98px): mobile gradient + reduce heading type ---- */
@media (max-width: 767.98px) {
  .howitworks {
    background: var(--hp-hiw-bg-grad-mobile);
  }

  .howitworks__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
}