/* איך עובדים: שלושה צעדים חיים. הכול ב-transform ו-opacity, מתחיל מחדש בכל כניסה למסך (data-replay מוסיף is-on) */
.how3{overflow:clip}
.how3__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);position:relative}
.how3__track::before{content:"";position:absolute;inset-inline:6%;inset-block-start:34px;height:2px;background:var(--hair);z-index:0}
.how3__track::after{content:"";position:absolute;inset-inline-start:6%;inset-block-start:33px;width:28%;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--pink));opacity:0;z-index:0}
.is-on .how3__track::after{animation:how3-pulse 9s linear infinite}
@keyframes how3-pulse{0%{transform:translateX(0);opacity:0}5%{opacity:1}95%{opacity:1}100%{transform:translateX(-300%);opacity:0}}
[dir="rtl"] .is-on .how3__track::after,.is-on .how3__track::after{animation-name:how3-pulse-rtl}
@keyframes how3-pulse-rtl{0%{transform:translateX(0);opacity:0}5%{opacity:1}95%{opacity:1}100%{transform:translateX(-300%);opacity:0}}
.how3__step{position:relative;z-index:1;display:grid}
.how3__card{display:grid;grid-template-rows:auto 1fr auto;gap:14px;height:100%;padding:22px 22px 24px;border-radius:var(--r-l);background:var(--tile);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.is-on .how3__step{animation:how3-lift 9s var(--ease) infinite;animation-delay:calc(var(--i)*3s)}
@keyframes how3-lift{0%,8%{transform:none}12%,30%{transform:translateY(-6px)}34%,100%{transform:none}}
.how3__k{display:flex;align-items:center;gap:12px;font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:-.02em}
.how3__k i{font-style:normal;font-size:13px;font-weight:600;color:var(--pink-ink);font-feature-settings:"tnum" 1;padding:4px 9px;border-radius:999px;background:rgba(var(--fg-rgb),.06)}
.how3__d{font-size:15.5px;line-height:1.5;color:var(--text-2)}
/* 01: רשימה שמסתמנת */
.how3__check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.how3__check li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text);opacity:.55}
.how3__check i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair-2);position:relative;flex:none}
.how3__check i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink);opacity:0;transform:scale(.4)}
.is-on .how3__check li{animation:how3-li 9s var(--ease) infinite;animation-delay:calc(.6s + var(--j)*.5s)}
.is-on .how3__check i::after{animation:how3-tick 9s var(--ease) infinite;animation-delay:calc(.6s + var(--j)*.5s)}
@keyframes how3-li{0%{opacity:.55}6%,100%{opacity:1}}
@keyframes how3-tick{0%{opacity:0;transform:scale(.4)}6%,100%{opacity:1;transform:scale(1)}}
/* 02: לבנים שנבנות ואז תג "עלה לאוויר" */
.how3__build{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.how3__build span{padding:7px 12px;border-radius:999px;background:rgba(var(--fg-rgb),.07);font-size:13.5px;opacity:.35;transform:translateY(6px)}
.how3__build b{padding:7px 12px;border-radius:999px;background:var(--text);color:var(--bg);font-size:13.5px;font-weight:600;opacity:0;transform:scale(.8)}
.is-on .how3__build span{animation:how3-brick 9s var(--ease) infinite;animation-delay:calc(3.2s + var(--j)*.45s)}
.is-on .how3__build b{animation:how3-live 9s var(--ease) infinite;animation-delay:4.9s}
@keyframes how3-brick{0%{opacity:.35;transform:translateY(6px)}5%,100%{opacity:1;transform:none}}
@keyframes how3-live{0%{opacity:0;transform:scale(.8)}6%,100%{opacity:1;transform:none}}
/* 03: גרף שמצטייר */
.how3__chart{width:100%;height:auto;display:block}
.how3__grid{stroke:var(--hair);stroke-width:1;fill:none}
.how3__line{stroke:var(--pink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.how3__pt{fill:var(--pink);opacity:0}
.is-on .how3__line{animation:how3-draw 9s var(--ease) infinite;animation-delay:6s}
.is-on .how3__pt{animation:how3-pt 9s var(--ease) infinite;animation-delay:6s}
@keyframes how3-draw{0%{stroke-dashoffset:260}14%,100%{stroke-dashoffset:0}}
@keyframes how3-pt{0%,13%{opacity:0}15%,100%{opacity:1}}
.how3__by{margin-block-start:26px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:15px;color:var(--text-2)}
.how3__by b{color:var(--text);font-weight:600}
@media (max-width:1060px){.how3__track{grid-template-columns:1fr;gap:12px}.how3__track::before,.how3__track::after{display:none}.is-on .how3__step{animation:none}}
@media (prefers-reduced-motion:reduce){.is-on .how3__track::after,.is-on .how3__step,.is-on .how3__check li,.is-on .how3__check i::after,.is-on .how3__build span,.is-on .how3__build b,.is-on .how3__line,.is-on .how3__pt{animation:none}.how3__check li,.how3__check i::after,.how3__build span,.how3__build b,.how3__pt{opacity:1;transform:none}.how3__line{stroke-dashoffset:0}}