/* steps-v2-c.css - 'Running clock': a Larken readout rides the leading edge of the fill and counts 0h -> 12h; each step tick lights as it passes. Load LAST. */
@property --p{syntax:"<number>";inherits:true;initial-value:1}
@property --h{syntax:"<integer>";inherits:true;initial-value:12}

#how-it-works .steps-grid{
  --g:clamp(1.5rem,3vw,3.5rem);--w:.14;--t2:.5;--rail:56px;
  --acc:#5f7a90;--ink:#4f6a80;--trk:rgba(23,23,23,.2);
  position:relative;
}
/* the circle dials and the old per-card rail segments are gone */
#how-it-works .step-card::before{content:none}
#how-it-works .step-card__top::before,#how-it-works .step-card__top::after{display:none}
#how-it-works .step-card{z-index:1}
#how-it-works .step-card:nth-child(1){--S:0;--T:0}
#how-it-works .step-card:nth-child(2){--S:calc(var(--t2) - var(--w));--T:var(--t2)}
#how-it-works .step-card:nth-child(3){--S:calc(1 - var(--w));--T:1}
#how-it-works .steps-grid::before,#how-it-works .steps-grid::after{
  content:"";position:absolute;pointer-events:none;z-index:0;right:auto;bottom:auto;animation:none;transform:none;
}
#how-it-works .steps-grid::before{--rc:var(--trk)}
#how-it-works .steps-grid::after{--rc:var(--acc)}

/* ---------- phone: vertical rail ---------- */
@media (max-width:859px){
  #how-it-works .steps-grid{padding-left:var(--rail);gap:0}
  #how-it-works .steps-grid::before,#how-it-works .steps-grid::after{
    left:calc(var(--rail)/2 - 7px);top:22px;width:14px;height:var(--rail-len,calc(100% - 9.5rem));
    background:
      linear-gradient(var(--rc),var(--rc)) center top/1.5px 100% no-repeat,
      repeating-linear-gradient(180deg,var(--rc) 0 1px,transparent 1px calc(100%/12)) center top/7px 100% no-repeat,
      linear-gradient(var(--rc),var(--rc)) center bottom/7px 1px no-repeat;
  }
  #how-it-works .steps-grid::after{clip-path:inset(0 0 calc((1 - var(--p))*100%) 0)}
  #how-it-works .step-card:nth-child(n)::after{
    left:calc(var(--rail)*-1);width:var(--rail);text-align:center;background:#fff;padding:.1rem 0;z-index:2;
  }
  #how-it-works .step-card:nth-child(n)::before{
    content:"";position:absolute;left:calc(var(--rail)*-1 + var(--rail)/2 - 7px);top:21px;width:14px;height:2px;background:var(--acc);
    transform-origin:center;transform:scaleX(calc(.6 + .4*var(--lit)));opacity:calc(.3 + .7*var(--lit));z-index:2;
  }
  #how-it-works .step-card:nth-child(n)::after{top:32px;font:400 .75rem/1.2 var(--serif);color:var(--ink)}
  html:lang(fr) #how-it-works .step-card:nth-child(n)::after{font-size:.6875rem}
  #how-it-works .sv2-clock{left:calc(var(--rail)/2);top:calc(22px + var(--p)*var(--rail-len,calc(100% - 9.5rem)))}
  #how-it-works .sv2-clock::after{display:none}
  #how-it-works .step-card:nth-child(3){padding-bottom:.25rem}
  /* the readout covers a label while it passes: fade that label out meanwhile */
  #how-it-works .step-card:nth-child(n)::after{opacity:clamp(0,(max(var(--p) - var(--T),var(--T) - var(--p)) - .05)/.03,1)}
  #how-it-works .step-card__num{font-size:2.25rem}
}

/* ---------- desktop: horizontal 0h -> 12h ruler ---------- */
@media (min-width:860px){
  #how-it-works .steps-grid{--Z:76px;--ly:40px;--rx:0px;gap:var(--g);padding:0}
  #how-it-works .step-card{padding:var(--Z) 0 0}
  #how-it-works .step-card:last-child{padding-bottom:0}
  #how-it-works .steps-grid::before,#how-it-works .steps-grid::after{
    left:var(--rx);top:calc(var(--ly) - 8px);height:16px;width:calc((100% + var(--g))*2/3);
    background:
      linear-gradient(var(--rc),var(--rc)) left center/100% 1.5px no-repeat,
      repeating-linear-gradient(90deg,var(--rc) 0 1px,transparent 1px calc(100%/12)) left center/100% 7px no-repeat,
      linear-gradient(var(--rc),var(--rc)) right center/1px 7px no-repeat;
  }
  #how-it-works .steps-grid::after{clip-path:inset(0 calc((1 - var(--p))*100%) 0 0)}
  #how-it-works .step-card:nth-child(n)::before{
    content:"";position:absolute;left:-1px;top:calc(var(--ly) - 9px);width:2px;height:18px;background:var(--acc);
    transform-origin:center;transform:scaleY(calc(.55 + .45*var(--lit)));opacity:calc(.3 + .7*var(--lit));z-index:2;
  }
  #how-it-works .step-card:nth-child(n)::after{
    left:0;top:calc(var(--ly) + 12px);width:auto;padding:0;background:none;text-align:left;
    font:400 .9375rem/1.2 var(--serif);color:var(--ink);
  }
  html:lang(fr) #how-it-works .step-card:nth-child(n)::after{font-size:.9375rem}
  #how-it-works .sv2-clock{left:calc(var(--p)*(100% + var(--g))*2/3);top:calc(var(--ly) - 38px)}
  #how-it-works .step-card:nth-child(3){padding-bottom:0}
  #how-it-works .step-card__num{font-size:3rem}
}

/* ---------- scroll-driven fill (native), JS fallback sets --p inline ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes sv2-p{from{--p:0}to{--p:1}}
    html:not(.sv2-fb) #how-it-works .steps-grid{animation:sv2-p linear both;animation-timeline:view();animation-range:cover 20% cover 50%}
  }
}
@media (prefers-reduced-motion:no-preference){
  html.sv2-fb #how-it-works .steps-grid{--p:0}
}

/* step ticks light when the readout passes them */
#how-it-works .step-card{--lit:clamp(0,(var(--p) - var(--T) + .02)/.04,1)}
/* the readout (injected by steps-v2-c.js; empty element, text comes from a CSS counter so innerText is unchanged) */
#how-it-works .sv2-clock{
  position:absolute;z-index:3;transform:translate(-50%,0);margin:0;padding:0 .3rem;background:#fff;pointer-events:none;
  --h:calc(var(--p)*12);
  font:400 1.25rem/1.2 var(--serif);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--ink);white-space:nowrap;
}
#how-it-works .sv2-clock::before{counter-reset:sv2h var(--h);content:counter(sv2h) "h"}
html:lang(fr) #how-it-works .sv2-clock::before{content:counter(sv2h) "\00a0h"}
#how-it-works .sv2-clock::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:12px;margin-left:-.75px;background:var(--acc)}
@media (max-width:859px){
  #how-it-works .sv2-clock{transform:translate(-50%,-50%)}
}