/* ============ 12 · ארבעת הדברים שעובדים ביחד ============
   Figma: desktop 279:132 (1280×1008) / מובייל 279:203 (390×936).

   זה הסקשן היחיד בדף שנעוץ: הגלילה האנכית מתורגמת לתנועה אופקית.
   הסיבה היא שארבעת השלבים הם רצף אחד שנקרא לפי הסדר, ולא ארבעה פריטים
   שסורקים במבט - ולכן שווה כאן לעצור את העין על אחד בכל רגע.

   המבנה: .s12__stage הוא מסלול גבוה (מסך מלא + מרחק הנסיעה), ובתוכו
   .s12__pin דבוק לראש המסך. ה-JS מתרגם את מיקום המסלול להתקדמות.
   בלי JS זה נשאר בדיוק מה שהיה - חפיסה שנגללת הצידה בעצמה. */

.s12{background:var(--cream);}

/* בלי JS אין מסלול ואין נעיצה: הסקשן מתנהג כמו כל סקשן אחר */
.s12__pin{padding:var(--sec-y) var(--margin) 0;}
.js .s12__stage{position:relative;}
.js .s12__pin{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;
  padding:0 var(--margin);
  overflow:hidden;
}
.s12__foot{padding-inline:var(--margin);padding-bottom:var(--sec-y);}

.s12__wrap{
  width:100%;max-width:var(--content);margin-inline:auto;
  text-align:center;
}

/* בפיגמה זה טקסט מעל הכותרת בתוך אותו בלוק כותרת - הוא מקודד כ-p
   ולא ככותרת, כדי שה-h2 יישאר הכותרת האמיתית של הסקשן */
.s12__kicker{
  font-family:var(--f-body);font-weight:400;
  font-size:52px;line-height:64px;
  color:var(--muted);
}
.s12__title{
  font-family:var(--f-head);font-weight:800;
  font-size:56px;line-height:68px;
  color:var(--ink);
  letter-spacing:-.015em;
}
.s12__lede{
  margin-top:26px;
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:40px;
  color:var(--body);
}

/* ---------- חפיסת הכרטיסים ---------- */
.s12__deck{
  margin-top:44px;
  display:flex;align-items:stretch;   /* stretch = כל ארבעת הכרטיסים באותו גובה */
  gap:24px;
  overflow-x:auto;
  /* בלי scroll-snap: כשהגלילה האופקית מונעת מהעמוד, ה-snap נלחם בה
     ויוצר קפיצות. החלקות מגיעה מהמיפוי עצמו, לא מנקודות עגינה */
  overscroll-behavior-x:contain;
  /* המרווח הזה נותן לצל של הכרטיס הפעיל מקום להיראות בלי להיחתך */
  padding-block:14px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.s12__deck::-webkit-scrollbar{display:none;}

.s12__card{
  /* הכרטיס גדל מ-300 ל-420: במסך נעוץ הכרטיס הוא כל מה שרואים, והוא
     גם מה שקובע כמה מרחק נסיעה יש לרצף */
  flex:0 0 420px;
  background:var(--card-off);
  border-radius:var(--r-card);
  padding:30px 28px;
  text-align:right;
  /* עמודה גמישה כדי שהפסקה תמתח את הכרטיס לגובה של השכן הגבוה ביותר */
  display:flex;flex-direction:column;
  /* כניסה מדורגת: כל כרטיס ממתין לתורו לפי --i שנקבע ב-HTML */
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
             background .45s var(--ease), box-shadow .45s var(--ease);
  transition-delay:calc(var(--i, 0) * .16s);
}
.s12__deck.is-seq .s12__card{opacity:1;transform:none;}
.s12__num{
  width:60px;height:60px;border-radius:999px;
  background:var(--grey);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;
  font-size:26px;line-height:28px;
  color:#fff;
}
/* גובה מינימלי של שתי שורות, למרות ש״גוף חזק וחטוב״ נכנס באחת.
   ארבעת הכרטיסים עומדים זה לצד זה, ובלי הנעילה הזאת הכותרת הקצרה
   הייתה מושכת את פסקת הגוף שלה 36 פיקסל למעלה - כלומר שורת הטקסט
   של כרטיס אחד יושבת גבוה משלושת האחרים. הקורא לא מזהה את הסיבה,
   הוא רק מרגיש שמשהו לא ישר */
.s12__card h3{
  margin-top:30px;
  min-height:72px;
  font-family:var(--f-head);font-weight:800;
  font-size:28px;line-height:36px;
  color:var(--muted);
  letter-spacing:-.01em;
}
.s12__card p{
  margin-top:16px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--muted);
}
/* הכרטיס הראשון הוא הכרטיס ה״פעיל״ בפיגמה: לבן, מוצל, וטקסט בצבע מלא.
   הוא גם הראשון בקריאה ב-RTL, כך שהעין נוחתת עליו לפני כל השאר */
.s12__card--on{
  background:#fff;
  box-shadow:0 10px 28px rgba(11,16,32,.10);
}
.s12__card--on p{color:var(--body);}

/* העיגול והכותרת בתכלת בכל ארבעת הכרטיסים - הם קו התהליך, ולא משנה
   איזה כרטיס פעיל כרגע. מה שמשתנה עם הפעילות הוא הרקע והצל בלבד */
.s12__num{background:var(--sky-deep);}
.s12__card h3{color:var(--sky-deep);}

/* ---------- סליידר ההתקדמות ---------- */
.s12__bar{
  position:relative;
  margin-top:24px;
  height:56px;
  display:flex;align-items:center;
}
.s12__track{
  width:100%;height:8px;border-radius:999px;
  /* המסילה אפורה והמילוי תכלת: כך רואים בכל רגע כמה מהרצף כבר עברת
     וכמה נשאר. פס שכולו תכלת לא אומר כלום */
  background:var(--line);
  overflow:visible;
  /* direction:ltr על המסילה בלבד: היא לא טקסט אלא גיאומטריה, וב-RTL
     ה-flex-end היה נופל לצד שמאל - כלומר המילוי היה מתחיל בסוף הרצף
     במקום בהתחלה שלו. כאן flex-end הוא ימין, וזה מה שנדרש */
  direction:ltr;
  display:flex;justify-content:flex-end;   /* המילוי מתחיל מימין */
}
/* הרוחב נכתב מ-JS בפיקסלים בכל פריים. ערך ההתחלה כאן הוא מה שרואים
   כשאין JS - חצי כרטיס, בדיוק המקום שבו יושב האייקון */
.s12__fill{
  display:block;height:100%;
  width:210px;
  border-radius:999px;
  background:var(--sky);
}
/* אייקון פיטל רוכב על קצה המילוי */
.s12__thumb{
  position:absolute;top:50%;
  right:210px;              /* נכתב מ-JS; זה מרכז הכרטיס הראשון */
  transform:translate(50%,-50%);
  width:52px;height:52px;
  /* בפיגמה האייקון יושב ישירות על הפס, ומכיוון ששניהם באותו תכלת הפס
     נראה כאילו הוא חוצה אותו באמצע. דיסקית בצבע הרקע מאחוריו מחזירה לו
     את הקווים בלי לשנות את הצבע או את המיקום */
  background:var(--cream);border-radius:999px;padding:4px;
  opacity:.92;pointer-events:none;
}
.s12__thumb img{width:100%;height:100%;object-fit:contain;display:block;}

/* ה-CTA מחוץ לאזור הנעוץ - הוא נכנס לתמונה רק אחרי שהרצף נגמר */
.s12__cta{margin-top:var(--sec-cta);}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* המרווחים עברו ל-.s12__pin, כי הוא זה שממלא את המסך בזמן הנעיצה */
  .s12__pin{padding:60px 24px 0;}
  .js .s12__pin{padding:0 24px;}
  .s12__foot{padding-inline:24px;padding-bottom:60px;}
  /* בפיגמה הכותרת במובייל מיושרת לימין ולא למרכז */
  .s12__wrap{text-align:right;}
  .s12__kicker{font-size:34px;line-height:44px;}
  .s12__title{font-size:36px;line-height:46px;}
  .s12__lede{margin-top:20px;font-size:23px;line-height:34px;}
  .s12__deck{margin-top:28px;gap:16px;}
  /* כרטיס אחד כמעט מלא ברוחב המסך: במובייל הרצף עובד רק אם רואים
     כרטיס אחד בכל רגע, עם רמז לזה שאחריו */
  .s12__card{flex-basis:296px;padding:24px 22px;}
  .s12__num{width:52px;height:52px;font-size:23px;line-height:26px;}
  .s12__card h3{margin-top:24px;min-height:66px;font-size:25px;line-height:33px;}
  .s12__card p{margin-top:14px;font-size:22px;line-height:32px;}
  .s12__bar{height:48px;margin-top:14px;}
  .s12__track{height:7px;}
  .s12__fill{width:156px;}
  .s12__thumb{width:44px;height:44px;right:156px;}
}

@media (prefers-reduced-motion:reduce){
  .s12__fill,.s12__thumb{transition:none;}
  .s12__card{opacity:1;transform:none;transition:none;}
}