/* The introduction scrolls away; the pinned scene has the whole reading area. */
#pipeline { --case-header: 80px; }
#pipeline > .st-head { max-width: 1040px; padding: 48px 24px 24px; margin: 0 auto; }
#pipeline > .st-head h2 { line-height: 1.12; }
#pipeline .st-track { height: auto; }
#pipeline .st-sticky { position: relative; top: auto; height: auto; padding: 24px clamp(16px, 2.7vw, 42px); overflow: visible; }
#pipeline .st-stage { display: block; }
#pipeline .st-rail { position: sticky; top: var(--case-header); z-index: 2; display: flex; flex-direction: row; justify-content: center; gap: 8px; padding: 10px 0; background: rgba(242,244,251,.94); border-radius: 18px; }
#pipeline .st-dot, #pipeline .st-dot.is-active { justify-content: center; width: 88px; height: 40px; border: 1px solid transparent; box-shadow: none; }
#pipeline .st-dot span { opacity: 1; padding: 0 8px; }
#pipeline .st-dot.is-active { background: #4b60cf; border-color: #4b60cf; }
#pipeline .st-dot.is-active span { color: white; }
#pipeline .st-dot.is-active::before { display: none; }
#pipeline .st-panels { position: relative; display: grid; gap: 64px; overflow: visible; min-height: 0; padding: 0; border-radius: 0; }
#pipeline .st-step { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); grid-template-rows: auto; gap: clamp(24px,4vw,64px); align-items: center; min-height: calc(100svh - var(--case-header) - 100px); padding: 24px 0; opacity: 1; filter: none; transform: none; pointer-events: auto; transition: none; scroll-margin-top: calc(var(--case-header) + 64px); }
#pipeline .st-text { padding: 0; }
#pipeline .st-text h3 { font-size: clamp(28px,2.4vw,38px); }
#pipeline .st-desc { margin-top: 14px; line-height: 1.55; max-width: 640px; }
#pipeline .st-case { margin-top: 20px; max-width: 640px; }
#pipeline .st-actions { margin-top: 18px; }
#pipeline .st-art { order: 0; align-self: center; height: auto; min-height: 0; max-height: 480px; aspect-ratio: 1.12; overflow: hidden; }
/* In measure mode the cards share a grid cell, with their natural heights. */
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-stage { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 32px; }
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-rail { position: static; flex-direction: column; align-items: flex-start; background: none; padding: 0; gap: 14px; }
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-dot { width: 14px; height: 14px; overflow: visible; }
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-dot span { opacity: 0; }
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-dot.is-active { width: 88px; height: 40px; }
#pipeline:is([data-layout="pinned"],[data-layout="measure"]) .st-dot.is-active span { opacity: 1; }
#pipeline[data-layout="measure"] .st-step { grid-area: 1 / 1; min-height: 0; visibility: hidden; padding: 0; }
#pipeline[data-layout="pinned"] .st-sticky { position: sticky; top: var(--case-header); padding-top: 24px; padding-bottom: 24px; }
#pipeline[data-layout="pinned"] .st-stage { height: 100%; }
#pipeline[data-layout="pinned"] .st-panels { display: block; height: 100%; }
#pipeline[data-layout="pinned"] .st-step { position: absolute; inset: 0; min-height: 0; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(22px); transition: opacity .18s ease, transform .4s ease, visibility 0s .18s; }
#pipeline[data-layout="pinned"] .st-step.is-before { transform: translateY(-22px); }
#pipeline[data-layout="pinned"] .st-step.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .4s ease .18s, transform .55s cubic-bezier(.2,.8,.2,1) .18s, visibility 0s .18s; }
@media(max-width:760px) {
  #pipeline > .st-head { padding: 32px 20px 16px; }
  #pipeline > .st-head h2 { font-size: 30px; }
  #pipeline .st-rail { gap: 4px; }
  #pipeline .st-dot, #pipeline .st-dot.is-active { flex: 1; width: auto; min-width: 0; height: 44px; }
  #pipeline .st-dot span { padding: 0; font-size: clamp(10px,1.9vw,13px); }
  #pipeline .st-step { grid-template-columns: minmax(0,1fr); gap: 22px; min-height: 0; padding-top: 24px; }
  #pipeline .st-art { order: 1; width: 100%; height: 180px; max-height: none; aspect-ratio: auto; }
  #pipeline .st-text h3 { font-size: 28px; }
  #pipeline .st-desc { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  #pipeline .st-step, #pipeline .st-dot { transition: none !important; }
  #pipeline .st-art * { animation: none !important; }
}