/* Keep the reference's styles.css intact. These additions describe the
   WhatsApp invitation panel and the native-scroll version of its carousel. */
.signup-steps {
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
}
.signup-steps li {
  border-top: 1px solid #3b3d37;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 14px;
  padding: 19px 0;
}
.signup-steps li > span { color: var(--acid); font-size: .875rem; }
.signup-steps h3 { font-size: .8125rem; line-height: 1.6; }
.signup-steps p { color: #aeb0a5; font-size: .8125rem; line-height: 1.65; margin-top: 5px; }
.signup-panel .signup-form { margin-top: 3px; }
.cf-carousel [data-slot="carousel-content"] {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: auto;
  cursor: auto;
}
.cf-carousel [data-slot="carousel-content"]::-webkit-scrollbar { display: none; }
.cf-carousel-track { touch-action: auto; }
.cf-carousel-slide { scroll-snap-align: start; }
.cf-carousel-slide:last-child { scroll-snap-align: end; }
.cf-carousel [data-slot="carousel-content"]:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .cf-carousel [data-slot="carousel-content"] { scroll-behavior: auto; }
}

/* Original user-provided mockup: preserve the complete artwork and aspect ratio. */
.kit-mockup-showcase { display: grid; place-items: center; padding-block: 40px 20px; }
.kit-mockup-figure { width: min(100%, 420px); }
.kit-mockup-figure img { width: 100%; height: auto; object-fit: contain; }
.kit-mockup-figure figcaption { margin-top: 18px; text-align: center; }
@media (max-width: 760px) {
  .kit-mockup-showcase { padding-block: 28px 0; }
  .kit-mockup-figure { width: min(100%, 340px); }
}