/* Approved 2026-09-03 homepage sequence refinement.
   The existing content remains authoritative; this layer reduces mobile effort. */

.h-services-toggle {
  display: none;
}

@media (max-width: 760px) {
  #services.is-collapsible:not(.is-expanded) .h-services li:nth-child(n + 9) {
    display: none;
  }

  #services.is-collapsible .h-services-toggle {
    display: inline-flex;
    min-height: 48px;
    margin: 22px 0 0;
    padding: 12px 17px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(99, 217, 155, 0.58);
    border-radius: 999px;
    background: rgba(8, 24, 16, 0.72);
    color: #eaf1eb;
    font: 700 14px/1.4 Manrope, Arial, sans-serif;
    cursor: pointer;
  }

  #services.is-collapsible .h-services-toggle:focus-visible {
    outline: 3px solid #ffd335;
    outline-offset: 3px;
  }

  #services.is-collapsible .h-services-toggle span {
    color: #63d99b;
  }

  #how-it-works > .h-section {
    padding-block: 44px;
  }

  #how-it-works .h-section-intro {
    margin-bottom: 22px;
  }

  #how-it-works .h-steps {
    gap: 24px;
  }

  #how-it-works .h-steps > li {
    padding-top: 18px;
  }

  #how-it-works .h-step-number {
    margin-bottom: 11px;
  }

  #how-it-works .h-handset {
    width: min(100%, 225px);
  }

  #how-it-works .h-handset-figure {
    margin-top: 18px !important;
  }

  #how-it-works .h-handset-figure figcaption {
    margin-top: 13px;
  }

  #how-it-works .h-modes {
    margin-top: 24px;
    padding: 20px 18px;
  }

  #how-it-works .h-modes > .h-mode-options {
    gap: 14px;
    margin-block: 20px;
  }

  #how-it-works .h-mode-options article {
    padding: 19px;
  }

  #how-it-works .h-professional-choice {
    gap: 22px;
    margin-top: 32px;
    padding: 25px 20px;
  }

  #how-it-works .h-professional-choice li,
  #how-it-works .h-professional-choice li:first-child,
  #how-it-works .h-professional-choice li:last-child {
    padding-block: 15px;
  }

  #how-it-works .h-journey-finish {
    gap: 16px;
    margin-top: 28px;
    padding-top: 34px;
  }

  #how-it-works .h-journey-finish > .h-lifecycle {
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-services-toggle {
    scroll-behavior: auto;
  }
}