/* MODULE_STEPS_BALANCED (Gil, 2026-09-08): "How it works" on the module pages
   is a symmetric grid of equal cards that tell the story in order as you
   scroll: the rail draws across, the badge lights, the card rises. Zero
   dependencies (IntersectionObserver + CSS transitions). Reduced motion and
   no-JS show the final state. Overrides each page's own .step rules. */
.how-it-works .steps {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px !important;
  margin-top: 2rem;
  --ms-cols: 3;
  --ms-gap: 20px;
}
.how-it-works .step {
  --ms-w: calc((100% - (var(--ms-cols) - 1) * var(--ms-gap)) / var(--ms-cols));
  flex: 0 0 var(--ms-w);
  width: var(--ms-w);
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  padding: 22px 22px 24px !important;
  margin: 0 !important;
  background: rgba(42, 142, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--tcs-dur-long) var(--tcs-ease-out), opacity var(--tcs-dur-long) ease, border-color var(--tcs-dur-mid) ease;
}
/* The rail: draws across the top of each card in order. */
.how-it-works .step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: #F26419;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tcs-dur-long) var(--tcs-ease-out);
}
.how-it-works .step::before {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(242, 100, 25, 0.18) !important;
  border: 2px solid rgba(242, 100, 25, 0.6);
  color: #FFFFFF !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  transform: scale(0.85);
  transition: transform var(--tcs-dur-mid) var(--tcs-ease-pop), background-color var(--tcs-dur-mid) ease, border-color var(--tcs-dur-mid) ease;
}
.how-it-works .step h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: #2A8EFF;
  line-height: 1.2;
  text-wrap: balance;
}
.how-it-works .step p {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
}

/* STEPS_LIGHT_ON_SCROLL (Gil, 2026-09-08): each card lights as it scrolls
   into view, on its own, not the whole grid at once. Cards that arrive in the
   same row stagger slightly by column. */
html.module-steps-armed .how-it-works .step {
  opacity: 0;
  transform: translateY(28px);
  transition-delay: calc(var(--ms-col, 0) * 90ms);
}
html.module-steps-armed .how-it-works .step::after,
html.module-steps-armed .how-it-works .step::before {
  transition-delay: calc(var(--ms-col, 0) * 90ms + 160ms);
}
html.module-steps-armed .how-it-works .step.is-in {
  opacity: 1;
  transform: none;
}
.how-it-works .step.is-in::after,
html:not(.module-steps-armed) .how-it-works .step::after {
  transform: scaleX(1);
}
.how-it-works .step.is-in::before,
html:not(.module-steps-armed) .how-it-works .step::before {
  transform: scale(1);
  background: #F26419 !important;
  border-color: #F26419;
}
.how-it-works .step.is-in {
  border-color: rgba(42, 142, 255, 0.28);
}

/* The script sets --ms-cols inline for 4-step grids (2+2); on narrow screens
   the stylesheet must win, hence !important (STEPS_MOBILE_ONE_COL). */
@media (max-width: 900px) {
  .how-it-works .steps { --ms-cols: 2 !important; }
}
@media (max-width: 560px) {
  .how-it-works .steps { --ms-cols: 1 !important; }
  .how-it-works .step { padding: 18px 18px 20px !important; grid-template-columns: 2.25rem 1fr; column-gap: 12px; }
  .how-it-works .step::before { width: 2.25rem !important; height: 2.25rem !important; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .how-it-works .step,
  .how-it-works .step::before,
  .how-it-works .step::after { transition: none !important; }
}

/* STEPS_PIN: while the grid is pinned, unlit cards stay faintly visible so
   the shape of the sequence reads; each lights fully on its scroll step. */
html.module-steps-armed .how-it-works .steps.is-pinned .step { opacity: 0.18; transform: translateY(14px); }
html.module-steps-armed .how-it-works .steps.is-pinned .step.is-in { opacity: 1; transform: none; }