/* Block 4 of the Websites page, round 2 (09/11/2026): the follow-along of the six steps. New CSS.
   The canvas belongs to the whole black section (wide-stage.js); the stage below is an empty spacer that says where the picture sits.
   The six steps are real HTML (.tpl-step): a row of six on a wide screen, three by two on a tablet, a vertical list on a phone.
   While the animation runs (the script adds is-live) the step in progress is bright (is-on), earlier steps are mid-bright (is-done), later ones dim.
   Under reduced motion the script does not run, so every step stays fully bright and joined by its line: a still flowchart. No box, border or frame around the picture. */
.paper-sheet.tpl-join-below{margin-bottom:var(--sp-6)}
.tpl-black--follow{padding-block:0 var(--sp-9)}
.tpl-follow{width:100%}
.tpl-follow__stage{position:relative;width:min(100%,calc(58vh * 16 / 9));margin-inline:auto;aspect-ratio:16 / 8.6;pointer-events:none}
.tpl-follow__steps{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-5);counter-reset:step;position:relative;z-index:1}
.tpl-step{position:relative;counter-increment:step;padding-top:calc(28px + var(--sp-4));transition:opacity var(--dur-large) var(--ease)}
.tpl-step::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(240,240,240,.45);background:var(--color-black);
  display:grid;place-items:center;font-family:var(--font-label);font-size:14px;line-height:1;color:var(--color-on-black);transition:border-color var(--dur-large) var(--ease),box-shadow var(--dur-large) var(--ease),background var(--dur-large) var(--ease)}
.tpl-step::after{content:"";position:absolute;top:14px;left:38px;right:calc(-1 * var(--sp-5) + 10px);height:1px;background:rgba(240,240,240,.2);transition:background var(--dur-large) var(--ease)}
.tpl-step:last-child::after{display:none}
.tpl-step__title{margin:0;color:var(--color-on-black)}
.tpl-step__text{margin:var(--sp-3) 0 0;font-size:var(--type-small-size);line-height:var(--type-small-lh);max-width:none}
.tpl-step .text-link{margin-top:var(--sp-4);display:inline-block;font-size:var(--type-small-size)}
.tpl-follow.is-live .tpl-step{opacity:.38}
.tpl-follow.is-live .tpl-step.is-done{opacity:.66}
.tpl-follow.is-live .tpl-step.is-on{opacity:1}
.tpl-follow.is-live .tpl-step.is-done::after{background:rgba(240,240,240,.5)}
.tpl-follow.is-live .tpl-step.is-on::before{border-color:var(--glow-orange);background:var(--glow-orange);color:#0A0A0A;box-shadow:0 0 18px 2px rgba(255,106,43,.55)}
.tpl-follow.is-live .tpl-step.is-done::before{border-color:var(--glow-cyan)}
.tpl-follow.is-live .tpl-step.is-on::after{background:linear-gradient(90deg,var(--glow-orange),rgba(240,240,240,.2))}
@media (max-width:1199px){
  .tpl-follow__steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-7)}
  .tpl-step:nth-child(3)::after{display:none}
  .tpl-step__text{font-size:var(--type-small-size)}
}
@media (max-width:700px){
  .tpl-follow__stage{width:100%;aspect-ratio:1 / .95}
  .tpl-follow__steps{grid-template-columns:1fr;row-gap:0;gap:0;margin-top:var(--sp-5)}
  .tpl-step{padding:0 0 var(--sp-6) calc(28px + var(--sp-4))}
  .tpl-step:last-child{padding-bottom:0}
  .tpl-step::after,.tpl-step:nth-child(3)::after{display:block;left:13px;right:auto;top:34px;bottom:6px;width:1px;height:auto}
  .tpl-step:last-child::after{display:none}
  .tpl-step__title{padding-top:3px}
}
@media (prefers-reduced-motion:reduce){
  .tpl-follow .tpl-step,.tpl-follow.is-live .tpl-step,.tpl-follow.is-live .tpl-step.is-done,.tpl-follow.is-live .tpl-step.is-on{opacity:1}
  .tpl-step::after,.tpl-follow.is-live .tpl-step.is-done::after,.tpl-follow.is-live .tpl-step.is-on::after{background:rgba(240,240,240,.5)}
  .tpl-step::before,.tpl-follow.is-live .tpl-step.is-on::before,.tpl-follow.is-live .tpl-step.is-done::before{border-color:var(--glow-cyan);background:var(--color-black);color:var(--color-on-black);box-shadow:none}
}