/* steps-a.css — "The 12-hour clock" (How it works). Self-contained; load after theme-silas3.css.
   Idea: the brand promise is 12h delivery, so the three steps sit on a 12-hour ruler.
   Each step has a small dial (pie) that fills 0 -> 12h. Phone: vertical rail whose gold line fills on scroll. */
#how-it-works{
  --a-line:rgba(31,31,31,.2);
  --a-gold:var(--gold);
  --a-rail:56px;
}
#how-it-works .steps-grid{position:relative;display:grid;gap:0;margin-bottom:1.25rem;padding-left:var(--a-rail)}
#how-it-works .step-card{
  position:relative;background:none;border-radius:0;box-shadow:none;border:0;
  padding:0 0 1.5rem;gap:.35rem;
}
#how-it-works .step-card:last-child{padding-bottom:.25rem}
#how-it-works .step-card:hover{transform:none;box-shadow:none}
#how-it-works .step-card__top{
  justify-content:flex-start;gap:.75rem;border:0;margin:0;padding:0;align-items:center;min-height:44px;
}
#how-it-works .step-card__num{font-size:2.25rem;line-height:1;color:var(--gold-ink)}
#how-it-works .step-card__badge{
  background:var(--mint-soft);color:var(--mint-ink);padding:.3rem .7rem;font-size:.75rem;line-height:1.2;
}
#how-it-works .step-card__title{font-size:1.5rem;line-height:1.1}
#how-it-works .step-card__body{font-size:.9375rem;line-height:1.5;max-width:46ch}

/* rail (phone): one segment per step, from under its hour label to the next dial */
#how-it-works .step-card__top::before,#how-it-works .step-card__top::after{
  content:"";position:absolute;left:calc(var(--a-rail) * -1 + 27px);top:78px;bottom:2px;width:2px;pointer-events:none;
}
#how-it-works .step-card__top::before{background:var(--a-line)}
#how-it-works .step-card__top::after{background:var(--a-gold);transform-origin:top}
#how-it-works .step-card:last-child .step-card__top::before,#how-it-works .step-card:last-child .step-card__top::after{display:none}

/* dial per step */
#how-it-works .step-card::before{
  content:"";position:absolute;left:calc(var(--a-rail) * -1 + 4px);top:2px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 46%,transparent 48%),conic-gradient(var(--a-gold) var(--p,0deg),var(--a-line) 0);
  box-shadow:0 0 0 5px #fff;z-index:1;
}
#how-it-works .step-card:nth-child(1){--p:0deg}
#how-it-works .step-card:nth-child(2){--p:180deg}
#how-it-works .step-card:nth-child(3){--p:360deg}
#how-it-works .step-card:nth-child(1)::before{background:radial-gradient(circle,var(--a-gold) 0 16%,#fff 18% 46%,transparent 48%),conic-gradient(var(--a-line) 0 360deg)}
#how-it-works .step-card:nth-child(3)::before{background:radial-gradient(circle,var(--gold-ink) 0 24%,var(--a-gold) 26% 100%)}
/* hour label under dial */
#how-it-works .step-card::after{
  position:absolute;left:calc(var(--a-rail) * -1 + 2px);top:50px;width:44px;text-align:center;background:#fff;z-index:1;
  font-family:var(--serif);font-size:.875rem;line-height:1.6;color:var(--gold-ink);letter-spacing:0;
}
#how-it-works .step-card:nth-child(1)::after{content:"0h" / ""}
#how-it-works .step-card:nth-child(2)::after{content:"on site" / ""}
#how-it-works .step-card:nth-child(3)::after{content:"12h" / ""}
#how-it-works .step-card:nth-child(2)::after{font-size:.75rem}
html:lang(fr) #how-it-works .step-card:nth-child(1)::after{content:"0 h" / ""}
html:lang(fr) #how-it-works .step-card:nth-child(2)::after{content:"sur place" / "";font-size:.6875rem}
html:lang(fr) #how-it-works .step-card:nth-child(3)::after{content:"12 h" / ""}

/* CTA: compact */
#how-it-works .how-it-works__cta{background:var(--paper);padding:1.1rem 1.25rem;display:grid;gap:.9rem;margin-top:.5rem}
#how-it-works .how-it-works__cta-text{font-size:1.25rem}

@media (max-width:859px){
  #how-it-works.how-it-works{padding-block:3.25rem 2.5rem}
  #how-it-works .how-it-works__head{margin-bottom:1.75rem;gap:.75rem}
  #how-it-works .how-it-works__head h2{font-size:2.25rem}
  #how-it-works .how-it-works__head .lead{font-size:1rem}
  #how-it-works .step-card__num{font-size:2.25rem}
}

/* scroll-driven fill (phone rail) with static fallback = fully drawn */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes a-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes a-lit{from{opacity:.25;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
    #how-it-works .step-card__top::after{animation:a-fill linear both;animation-timeline:view();animation-range:entry 70% cover 50%}
    #how-it-works .step-card::before{animation:a-lit ease-out both;animation-timeline:view();animation-range:entry 55% entry 100%}
  }
}

/* desktop: horizontal 12-hour ruler */
@media (min-width:860px){
  #how-it-works .step-card__top::before,#how-it-works .step-card__top::after{display:none}
  #how-it-works .steps-grid::before,#how-it-works .steps-grid::after{content:"";position:absolute;pointer-events:none}
  #how-it-works .steps-grid::after{background:var(--a-gold)}
  #how-it-works .steps-grid{padding:0;gap:clamp(1.5rem,3vw,3.5rem);margin-bottom:2.5rem;grid-template-columns:repeat(3,1fr)}
  #how-it-works .step-card{padding:78px 0 0;gap:.6rem}
  #how-it-works .step-card:last-child{padding-bottom:0}
  #how-it-works .steps-grid::before,#how-it-works .steps-grid::after{left:0;right:0;width:auto;bottom:auto;top:22px;height:2px}
  #how-it-works .steps-grid::before{
    top:17px;height:12px;left:0;right:0;width:auto;
    background:
      linear-gradient(var(--a-line),var(--a-line)) center/100% 2px no-repeat,
      repeating-linear-gradient(90deg,var(--a-line) 0 1px,transparent 1px calc(100%/12)) center/100% 12px no-repeat,
      linear-gradient(var(--a-line),var(--a-line)) right center/1px 12px no-repeat;
  }
  #how-it-works .steps-grid::after{transform-origin:left;top:22px;height:2px}
  #how-it-works .step-card::before{left:0;top:0}
  #how-it-works .step-card::after{left:52px;top:8px;width:auto;text-align:left;background:none;font-size:1rem;line-height:1.1;padding:0 .5rem;background:#fff}
  #how-it-works .step-card:nth-child(2)::after{font-size:1rem}
  html:lang(fr) #how-it-works .step-card:nth-child(2)::after{font-size:1rem}
  #how-it-works .step-card__num{font-size:3rem}
  #how-it-works .step-card__title{font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem)}
  #how-it-works .step-card__body{font-size:1rem}
  #how-it-works .how-it-works__cta{grid-template-columns:1fr auto;align-items:center;padding:1.5rem 1.75rem}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      @keyframes a-fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
      #how-it-works .steps-grid::after{animation:a-fillx linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
      #how-it-works .step-card__top::after{animation:none}
    }
  }
}