/* Owner-requested method refinements. No arrival selectors or motion changes. */
#js05x-index #system-layers .jxp-visual::before { content: "Illustrative method"; }
#js05x-index #system-layers .jxp-visual::after { content: "Step 01 / Map + Assign"; }
#js05x-index #system-layers[data-jxp-index="1"] .jxp-visual::after { content: "Step 02 / Install + Verify"; }
#js05x-index #system-layers[data-jxp-index="2"] .jxp-visual::after { content: "Step 03 / Steward"; }

/* Keep the source paragraphs in flow so chapter changes cannot move the scene.
   The active step gets the explanation; inactive numbered headings stay readable. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter { opacity: 1; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="false"] { border-color: transparent; background: none; box-shadow: none; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="false"] h3 { color: #b7b3bf; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="false"] .jxp-count { color: #b7a76e; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="false"] .jxp-symbol { opacity: .35; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter p { transition: opacity 180ms ease; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="false"] p { opacity: 0; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter[data-current="true"] p { opacity: 1; }
}

@media (max-width: 900px) {
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-narrative { align-self: start; padding-top: 16px; }
  #js05x-index #system-layers[data-jxp-mode="cinematic"] .jxp-chapter { align-self: start; }
}

/* Static, reduced-motion, small-height and script-free reading keep every step. */
#js05x-index #system-layers:not([data-jxp-mode="cinematic"]) .jxp-chapter { opacity: 1; }
#js05x-index #system-layers:not([data-jxp-mode="cinematic"]) .jxp-chapter p { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #js05x-index #system-layers .jxp-chapter,
  #js05x-index #system-layers .jxp-chapter p { opacity: 1; transition: none; }
}