@media (max-width: 960px) {

    .hero__content, .how-it-works__steps {
        flex-direction: column;
    }

    .how-it-works__steps {
        flex-direction: column;
        gap: 2rem;
    }

    .hero__card {
        width: 100%;
    }

    .how-it-works__visuals {
        position: relative; /* no sticky */
        top: auto;
        height: 450px;
        width: 100%;
        overflow: hidden;
    }

    .workflow__steps {
        width: 100%;
    }

    .visual {
        width: 100%;
        max-width: 100%;
    }

    .how-it-works__steps > * {
        flex: none;
    }

    .step h3 {
        font-size: 18px;
    }
}


/* ── Responsive ── */

@media (max-width: 768px) {
  .hero__content {
    flex-direction: column;
    gap: 2.5rem;
  }

  .hero__card {
    width: 100%;
  }

  .hero__list-box {
    width: 100%;
    flex: none;
  }

  .hero__heading {
    font-size: 3rem;
  }

  .hero-list__item
  {
    font-size: 1.25rem;
  }

  .btn--primary
  {
    gap: 0;
  }

  .btn--primary.btn--audit,
  .hero__buttons .btn--secondary
  {
    padding: 15px;
  }

  .container
  {
    padding: 4rem 0;
  }

  .ui-overview__content
  {
    flex-direction: column;
    gap: 0;
  }

  .fm__title, .faq__title, 
  .psc__title, .resources__title, 
  .overview-item__title, 
  .ui-steps__title, 
  .homecards__title, 
  .ui-overview__title, 
  .tool-picker__title
  {
    font-size: 32px;
  }

  .homecards__wrapper
  {
    grid-template-columns: repeat(1, 1fr);
  }

  .homecards__wrapper article:nth-child(3), 
  .homecards__wrapper article:nth-child(4),
  .homecards__wrapper article:nth-child(5) {
    grid-column: span 3;
    }

    .header__how-it-works
    {
        flex-direction: column;
    }

    .how-it-works-article
    {
        padding: 24px;
    }

    .resources header
    {
        flex-direction: column;
        gap: 0;
    }

    .resources header > p {
        margin-top: 0;
    }

    .resources header
    {
        margin-bottom: 1rem;
    }

    .resources__wrapper article {
        margin-top: 0rem;
    }

    .resources__wrapper
    {
        margin-top: 1rem;
        gap: 2rem;
    }

    #block-elioscore-whyelioscore .field--name-body
    {
        flex-direction: column;
    }

    #block-elioscore-whyelioscore img {
        width: 100%;
    }

    .why .container {
        padding: 4rem 0 0;
    }

    #block-elioscore-footercontent .field--name-body > ul
    {
        gap: 0;
    }
}