/* HOW WE WORK — the same rail, token and lit steps as the homepage, for the
   pages that do not load motion.css. Copied from motion.css; keep in step. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
/* ==========================================================================
   HOW WE WORK — the five steps light up as the rail runs through them
   ========================================================================== */
.p-steps { position: relative; }
.p-rail {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(10, 15, 46, .12);
  /* the token is far taller than the rail, so this cannot clip */
  overflow: visible;
}
.p-rail i {
  display: block; height: 100%; background: var(--lime);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
/* one brief, travelling. It rides the rail and lights each station as it
   arrives, so the section shows the thing it is describing rather than
   five features sitting in a row. */
.p-tok {
  position: absolute; top: 50%; left: calc(var(--p, 0) * 100%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 6px rgba(200, 255, 0, .22);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s ease;
}
.p-tok::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
}
.p-steps.is-live .p-tok { opacity: 1; }
.p-step {
  transition: opacity .5s ease;
  outline: none;
}
.p-step .pn { transition: color .4s ease; }
.p-step h3 { transition: color .4s ease; }
.p-step p { transition: color .4s ease; }
.p-step .p-ico {
  transition: background .45s var(--ease-out), border-color .45s ease,
              color .45s ease, transform .5s var(--ease-out);
}
/* the resting state is quiet, so the lit one reads */
.p-steps.is-live .p-step { opacity: .48; }
.p-steps.is-live .p-step.is-on { opacity: 1; }
.p-step.is-on .pn { color: var(--ink); font-weight: 700; }
.p-step.is-on .p-ico {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
  transform: scale(1.08);
}
/* pointing at a step takes over from the scroll */
.p-steps.is-live .p-step:hover,
.p-steps.is-live .p-step:focus-visible { opacity: 1; }
.p-step:hover .p-ico, .p-step:focus-visible .p-ico {
  background: var(--ink); border-color: var(--ink); color: var(--lime);
  transform: scale(1.12) translateY(-2px);
}
.p-step:focus-visible { outline: 2px solid var(--lime); outline-offset: 8px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .p-steps.is-live .p-step { opacity: 1; }
  .p-step { transform: none !important; }
  .p-rail i { transform: scaleX(1); }
  .p-tok { left: 100%; }
  .p-step .p-ico, .p-step { transition: none !important; }
}