/* Sideways step rail: a pinned "how it works" panel; scrolling down slides the step cards sideways, fills the
   active tab's line and recolours the whole panel per step. Numbers measured from greenboard.com (home), 2026-10-03.
   Markup: .ssr (tall track) > .ssr-band x N (invisible scroll bands, one per step)
                             + .ssr-stage (sticky) > .ssr-panel > .ssr-tabs > .ssr-tab x N  (.ssr-tab-line > i, .ssr-tab-label > .ssr-tab-icon)
                                                               > .ssr-track > .ssr-cards > .ssr-card x N (data-bg, data-fg; .ssr-pic inside drifts) */
.ssr { --ssr-scroll: 500vh; --ssr-top: 6.5rem; --ssr-gap: 12rem; --ssr-card: calc(100vw - 5rem); --ssr-radius: 1rem;
  --ssr-line: 1px; --ssr-line-on: .25rem; --ssr-shift: 1.85rem;
  position: relative; min-height: var(--ssr-scroll); }
.ssr-bands { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.ssr-band { flex: 1; }
.ssr-stage { position: sticky; top: var(--ssr-top); }
.ssr-panel { border-radius: var(--ssr-radius); overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - var(--ssr-top) - 1rem); box-sizing: border-box; }
.ssr-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 1rem; }
.ssr-tab { opacity: .5; }
.ssr-tab-line { position: relative; z-index: 0; height: var(--ssr-line-on); }
.ssr-tab-line::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--ssr-line); background: currentColor; opacity: .6; z-index: -1; }
.ssr-tab-line > i { display: block; width: 0; height: 100%; background: currentColor; }
.ssr-tab-label { margin-top: .75rem; display: flex; align-items: center; gap: 1rem; transform: translateX(calc(-1 * var(--ssr-shift))); }
.ssr-tab-icon { width: .875rem; flex: none; opacity: 0; }
.ssr-track { flex: 1; display: flex; overflow: hidden; }
.ssr-cards { display: flex; gap: var(--ssr-gap); flex: none; will-change: transform; }
.ssr-card { flex: none; width: var(--ssr-card); }
.ssr-pic { will-change: transform; }
@media (max-width: 767px) { .ssr-tabs { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ssr { min-height: 0; } .ssr-stage { position: relative; top: 0; } .ssr-bands { display: none; }
  .ssr-track { overflow-x: auto; scroll-snap-type: x mandatory; } .ssr-card { scroll-snap-align: start; }
  .ssr-tab { opacity: 1; } .ssr-tab-label { transform: none; } .ssr-tab-icon { opacity: 1; }
}