/* "How we work": intro on the left stays put while four hairline rows pass by on the right. Loads after refined.css. */

.how__intro { grid-column: 1 / span 5; align-self: start; position: sticky; top: 124px; }
.how__intro p { margin-top: 20px; color: var(--ink-2); font-size: 1.25rem; max-width: 30ch; }
.how__intro .link { display: inline-block; margin-top: 28px; }

.rows { grid-column: 7 / span 6; list-style: none; margin: 14px 0 0; padding: 0; }
.rows li { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 22px; align-items: start; padding: 30px 0; }
.rows li + li { border-top: 1px solid var(--line); }
.rows__n {
  width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--blue-deep); color: var(--blue-deep);
  display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.rows h3 { font-size: 1.25rem; transition: color 220ms var(--ease-out); }
.rows p { grid-column: 2; margin-top: 8px; color: var(--ink-2); font-size: 1.0625rem; max-width: 44ch; transition: color 220ms var(--ease-out); }

/* the row crossing the middle of the window is the current step: the number fills, the title takes the blue,
   the text steps up from muted to ink, and the hairline above it draws in blue from the left */
.rows li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
.rows li:first-child::before { display: none; }
.rows li.is-current::before { transform: none; }
.rows li.is-current .rows__n { background: var(--blue-deep); color: #fff; transform: scale(1.08); }
.rows li.is-current h3 { color: var(--blue-deep); }
.rows li.is-current p { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .rows li:hover .rows__n { background: var(--blue-deep); color: #fff; }
  .rows li:hover h3 { color: var(--blue-deep); }
}

/* rows arrive once, one after another, a short way up */
.js .rows li { opacity: 0; transform: translateY(10px); transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rows.is-in li { opacity: 1; transform: none; }
.rows li:nth-child(2) { --i: 1; } .rows li:nth-child(3) { --i: 2; } .rows li:nth-child(4) { --i: 3; }

@media (max-width: 900px) {
  .how__intro, .rows { grid-column: 1 / -1; }
  .how__intro { position: static; }
  .rows { margin-top: 40px; }
  .rows li { padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rows li, .rows li::before, .rows__n, .rows h3, .rows p { transition: none; opacity: 1; transform: none; }
}