/* How it works is a regular card grid. Motion inside each card is independent
   of this layout; responsive Framer copies keep their existing visibility. */
#how-it-works > ol[data-framer-name="Content"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1200px;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Do not set display on .ssr-variant: hidden copies must remain hidden. */
#how-it-works li[data-framer-name^="Step "] {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

#how-it-works li[data-framer-name^="Step "] > article {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 32px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 24px !important;
  overflow: hidden;
}

#how-it-works article > [data-framer-name="Content"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 24px !important;
  flex: none !important;
  width: 100% !important;
}

#how-it-works article [data-framer-name="Copy"] {
  flex: none !important;
  width: 100% !important;
  min-width: 0;
}

#how-it-works article [data-framer-name="Title"] p {
  font-size: 24px !important;
  line-height: 1.3 !important;
}

#how-it-works article [data-framer-name="Description"] p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* A reserved stage prevents the longer copy from collapsing the animation.
   The scene's own icon positions, orbit and screen motion remain untouched. */
#how-it-works article > [data-framer-name="Illustration"] {
  flex: none !important;
  width: 100% !important;
  max-width: 400px !important;
  height: 300px !important;
  min-height: 300px !important;
  margin-top: auto;
}

@media (min-width: 1024px) {
  #how-it-works > ol[data-framer-name="Content"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  #how-it-works li[data-framer-name^="Step "] > article {
    padding: 20px !important;
  }

  #how-it-works article [data-framer-name="Title"] p {
    font-size: 22px !important;
  }
}

@media (max-width: 809.98px) {
  #how-it-works article [data-framer-name="Title"] p {
    font-size: 22px !important;
  }
}

@media (max-width: 809.98px) {
  #how-it-works li[data-framer-name^="Step "]>article{gap:12px!important;padding:20px!important}
  #how-it-works article>[data-framer-name="Content"]{gap:12px!important}
  #how-it-works article [data-framer-name="Description"] p{font-size:14px!important;line-height:1.5!important}
  #how-it-works article>[data-framer-name="Illustration"]{scale:.68;margin:-46px auto -48px!important}
}