/* ANANFX Academy — Home Function First — Learning Journey Preview */
@media (max-width: 767px) {
  body[data-page-key="home"] .home-journey-preview { background: var(--ananfx-page-bg-primary); }
  body[data-page-key="home"] .home-journey-steps {
    display: flex; gap: 12px; margin: 0; padding: 2px 2px 14px; overflow-x: auto;
    list-style: none; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain;
    scrollbar-width: thin; scrollbar-color: var(--ananfx-page-gold-primary) transparent;
  }
  body[data-page-key="home"] .home-journey-steps li {
    position: relative; flex: 0 0 min(66vw, 220px); min-height: 168px; padding: 20px 16px;
    border: 1px solid var(--home-card-border-primary); border-radius: 17px; background-color: var(--home-card-bg-primary);
    box-shadow: 0 8px 24px var(--home-card-shadow-color); scroll-snap-align: start;
  }
  body[data-page-key="home"] .home-journey-steps li:hover { background-color: var(--home-card-bg-hover); border-color: var(--home-card-border-hover); }
  body[data-page-key="home"] .home-journey-steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 35px; right: -13px; width: 14px; border-top: 2px dashed rgba(255,208,0,.72);
  }
  body[data-page-key="home"] .home-journey-steps li > span {
    display: grid; width: 34px; height: 34px; margin-bottom: 18px; place-items: center;
    border-radius: 50%; background: var(--ananfx-page-gold-primary); color: var(--ananfx-page-bg-primary); font-weight: 800;
  }
  body[data-page-key="home"] .home-journey-steps strong,
  body[data-page-key="home"] .home-journey-steps small { display: block; }
  body[data-page-key="home"] .home-journey-steps small { margin-top: 6px; color: var(--page-text-secondary); }
  body[data-page-key="home"] .home-section-cta { width: 100%; margin-top: 16px; }
  @media (min-width: 600px) {
    body[data-page-key="home"] .home-journey-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; }
    body[data-page-key="home"] .home-journey-steps li { min-height: 154px; min-width: 0; }
    body[data-page-key="home"] .home-section-cta { width: auto; max-width: 360px; margin-inline: auto; }
  }
}