/* Fital LP - reset, typography, layout rhythm, shared components. */

*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* RTL + any horizontal bleed = the document opens scrolled to the right and the
     first thing the visitor sees is the page already cut off. Clip on both. */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body,h1,h2,h3,p,ul,ol,li,figure,blockquote{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg,video{display:block;max-width:100%;}
button,input,textarea,select{font:inherit;color:inherit;}

body{
  background:var(--cream);
  color:var(--body);
  font-family:var(--f-body);
  font-size:var(--text);
  line-height:var(--text-lh);
  font-weight:400;
  overflow-x:clip;
}

/* ---------- accessibility floor (Israeli standard 5568 / checklist stage 5) ---------- */
:focus-visible{
  outline:3px solid var(--sky-deep);
  outline-offset:3px;
  border-radius:4px;
}
.skip{
  /* moved off the top edge, not off the side: an inline-start offset in an RTL
     document parks the link 10,000px to the right and can drag the page with it */
  position:absolute;inset-inline-start:0;top:-100px;z-index:999;
  transition:top var(--dur) var(--ease);
  background:var(--sky-deep);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r-media) var(--r-media);
  font-family:var(--f-head);font-weight:600;font-size:22px;
}
.skip:focus{top:0;}

/* ---------- ::selection ----------
   ברירת המחדל של הדפדפן היא כחול מערכת, והוא נופל בין שני הרקעים של הדף:
   על הקרם הוא צורם, ועל הנייבי הוא כמעט נעלם. תכלת עמוק עם טקסט קרם עובד
   על שניהם, כי אנחנו קובעים גם את הרקע וגם את הטקסט ולא נשענים על הירושה.
   יחס הניגודיות בין #f1f0eb ל-#40589b הוא 5.97:1, מעל הרף של AA לטקסט רגיל.
   ערכי הקסה כתובים במפורש ולא כמשתנים: ב-::selection דפדפנים מסוימים לא
   מחשבים custom properties, והכלל היה נופל בשקט. -moz קודם ואז התקני,
   כי פיירפוקס הישן לא מכיר את ::selection ובכלל מקובץ היה מפיל את שניהם */
::-moz-selection{background:#40589b;color:#f1f0eb;text-shadow:none;}
::selection{background:#40589b;color:#f1f0eb;text-shadow:none;}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- layout ---------- */
.section{
  padding:var(--sec-y) var(--margin);
  position:relative;
}
.section--navy{background:var(--sky-tint);color:var(--body);}
.wrap{
  width:100%;
  max-width:var(--content);
  margin-inline:auto;
}

/* ---------- type ---------- */
h1,h2,h3,.h2{
  font-family:var(--f-head);
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.01em;
  text-wrap:balance;
}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--cream);}

h1{font-size:var(--h1);line-height:var(--h1-lh);}
h2,.h2{font-size:var(--h2);line-height:var(--h2-lh);}
h3{font-size:var(--sub);line-height:var(--sub-lh);font-weight:700;}

.lede{font-size:var(--sub);line-height:var(--sub-lh);font-weight:600;font-family:var(--f-head);}
.micro{font-size:var(--micro);line-height:var(--micro-lh);color:var(--muted);}
.section--navy .micro{color:var(--grey);}

/* emphasis - identical words, identical colors, in BOTH breakpoints.
   Never restate these inside a media query. */
.em{color:var(--sky-deep);font-weight:700;}
.section--navy .em{color:var(--sky);}
.em-ink{color:var(--ink);font-weight:700;}
/* בתוך כותרת המילה המודגשת משנה רק צבע. אם היא תרד ל-700 בעוד הכותרת
   ב-800, המשקל יקפוץ באמצע השורה - וזה נראה כמו תקלה, לא כמו הדגשה */
h1 .em,h2 .em,h3 .em,.h2 .em,
h1 .em-ink,h2 .em-ink,h3 .em-ink,.h2 .em-ink{font-weight:inherit;}

/* טל ביקש בלי זהב. ההדגשה החזקה משתמשת באותו כחול של שאר ההדגשות
   בדף - הבדל אחד פחות לעין, וההיררכיה נשמרת דרך המשקל ולא דרך צבע שני */
.grad-gold-2{color:var(--sky-deep);font-weight:700;}
h1 .grad-gold-2,h2 .grad-gold-2,h3 .grad-gold-2,.h2 .grad-gold-2{font-weight:inherit;}

/* ---------- CTA ----------
   Geometry copied from Figma: 56px pill, white 40px badge inset 8px on the left,
   so the badge occupies 0..48. The label is centred in the region [48 → right edge],
   NOT in the whole pill. That is what padding-inline-start:48 + text-align:center does. */
.cta{
  position:relative;
  overflow:hidden;                    /* חוסם את מסילת החצים ואת סוויפ ההובר */
  isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  min-height:56px;
  /* The badge is pinned to the PHYSICAL left edge (0..48), exactly as in Figma,
     so the padding that clears it must be physical too. padding-inline-start in
     an RTL document lands on the right and lets the label slide under the
     chevron. Width is fit-content with a min-width per instance: the Figma width
     is a floor, never a ceiling, so a label that renders wider in the browser
     than it does in Figma grows the pill instead of colliding with the badge. */
  width:fit-content;
  padding-block:0;
  padding-left:48px;
  padding-right:0;
  border:0;border-radius:var(--r-pill);
  background:var(--sky);
  color:#000;                         /* Figma: label fill is black, not white */
  font-family:var(--f-head);font-weight:600;
  font-size:22px;line-height:24px;
  text-align:center;text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}

/* ---- הובר: הכפתור פשוט מתבהר ----
   בלי סוויפ וכיוון. הבהרה אחידה על כל הכפתור, כך שהתנועה היחידה בהובר
   היא זו של החצים ואין שתי אנימציות שמתחרות על העין. */
.cta{transition:background-color var(--dur) var(--ease);}
.cta:hover,
.cta:focus-visible,
.cta:active{background:#a6bbe4;}   /* :active = מגע במובייל */

/* הריווח יושב על התווית עצמה ולא על הכפתור, וזאת הסיבה:
   אזור המרכוז הוא [קצה ימני של העיגול הלבן ← הגבול הימני של הכפתור].
   padding-right על הכפתור היה מזיז את האזור הזה שמאלה ושובר את המרכוז.
   ריווח סימטרי על התווית שומר על המרכז המדויק, וגם מבטיח שהטקסט לא
   נוגע בקצה הימני של הפיל כשהתווית ארוכה מרוחב המינימום. */
.cta__label{position:relative;z-index:2;padding-left:24px;padding-right:24px;}

.cta__badge{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--cream);            /* Figma: cream badge, not pure white */
  overflow:hidden;                    /* המסילה נחתכת בשפת העיגול */
  z-index:2;
  pointer-events:none;
}
/* מסילה של שני זוגות חצים. הזוג הראשון ממורכז בעיגול, השני יושב סלוט אחד
   ימינה (מחוץ לעיגול). הובר מזיז את המסילה סלוט אחד שמאלה - הראשון יוצא,
   השני מגיע בדיוק למרכז. */
.cta__arrows{
  /* גודל החץ והמרווח נגזרים ממשתנה אחד, וההיסטים מחושבים ממנו.
     קודם ההיסט היה קבוע 11 פיקסל בעוד שבכפתור הגדול החץ 26 - ולכן
     הזוג הראשון ישב 2 פיקסל ימינה מהמרכז של העיגול, וקפיצת ההובר
     לא הייתה שווה בדיוק לסלוט */
  --ar:22px;                                  /* גודל החץ */
  --ar-gap:18px;                              /* חץ + מרווח = סלוט */
  position:absolute;top:50%;left:50%;
  display:flex;align-items:center;gap:var(--ar-gap);
  transform:translate(calc(var(--ar) / -2),-50%);
  transition:transform var(--dur) var(--ease);
}
.cta:hover .cta__arrows,
.cta:focus-visible .cta__arrows,
.cta:active .cta__arrows{
  transform:translate(calc(var(--ar) / -2 - var(--ar) - var(--ar-gap)),-50%);
}
.cta__arrows svg{width:var(--ar);height:var(--ar);flex:none;}

@media (prefers-reduced-motion:reduce){
  .cta{transition:none;}
  .cta__arrows{transition:none;}
}

.cta-row{display:flex;justify-content:center;}

/* ---- הכפתור הגדול של ההירו ----
   טל ביקש כפתור ענק בראש הדף. הניסוח שלו ארוך, ולכן בדסקטופ הוא
   נשאר שורה אחת בגופן גדול יותר, ובמובייל הוא עובר לשתי שורות
   מכוונות במקום להצטמק לגודל שאי אפשר לקרוא */
.cta--big{
  min-height:76px;
  padding-left:64px;
  font-size:26px;line-height:32px;
}
.cta--big .cta__badge{width:56px;height:56px;left:10px;}
.cta--big .cta__arrows{--ar:26px;}
.cta--big .cta__label{padding-left:28px;padding-right:28px;}

/* במובייל אין דרך להכניס 36 תווים לשורה אחת ברוחב 342 פיקסל בלי לרדת
   מתחת ל-22 פיקסל, ולכן כאן - ורק כאן - הכפתור מקבל שתי שורות מכוונות
   במקום לגלוש מחוץ למסך. הגובה נפתח לפי התוכן והעיגול נשאר במרכז */
@media (max-width:1199px){
  .cta--big{
    white-space:normal;
    min-height:0;
    padding-block:16px;
    padding-left:56px;
    font-size:22px;line-height:30px;
  }
  .cta--big .cta__badge{width:44px;height:44px;left:8px;}
  .cta--big .cta__arrows{--ar:22px;}
  .cta--big .cta__label{padding-left:14px;padding-right:14px;}
}

/* ---------- media placeholders / images ---------- */
.media{
  border-radius:var(--r-media);
  overflow:hidden;
  background:var(--placeholder);
}
.media--3x4{aspect-ratio:3/4;}
.media img{width:100%;height:100%;object-fit:cover;}

/* ---------- hairline ---------- */
.rule{height:1px;background:var(--line);border:0;}
.section--navy .rule{background:var(--footer-divider);}

/* ---------- אנימציית כניסה (load) ----------
   רצה פעם אחת, רק בהירו. תנועה אחת: 12px למעלה + opacity, 620ms, עם
   easing יוצא (expo-out) שמאט לקראת הסוף - זה מה שנותן את התחושה היקרה
   בלי להיות אנימציה "גדולה". ההשהיה של כל אלמנט נקבעת ב---d על האלמנט
   עצמו, כך שסדר הכניסה גלוי ב-HTML ולא מפוזר בין קבצים.
   ה-.js מגיע מסקריפט inline ב-head: בלי JS שום דבר לא מוסתר. */
.js .enter{opacity:0;transform:translateY(6px);}
.js .enter.enter--soft{transform:translateY(8px);}
.js .is-ready .enter{
  opacity:1;transform:none;
  transition:opacity .38s var(--ease-out) var(--d,0ms),
             transform .38s var(--ease-out) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .js .enter{opacity:1;transform:none;}
  .js .is-ready .enter{transition:none;}
}

/* ---------- the single scroll reveal ----------
   One transform, one opacity, 450ms, fired once by IntersectionObserver.
   No parallax, no stagger, no pinning. The page must not feel stuck. */
.reveal{opacity:0;transform:translateY(8px);}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
}

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

   ההורה נושא reveal ולכן יש לו transform משלו; הפריטים הם אלמנטים
   נפרדים ולכן ה-transform שלהם לא מתנגש בשלו. */
.s04__list .s04__item,
.s13__card li{opacity:0;transform:translateX(30px);}
.s04__list.is-in .s04__item,
.s13__card.is-in li{
  opacity:1;transform:none;
  transition:opacity .42s var(--ease-out) var(--cd,0ms),
             transform .52s var(--ease-out) var(--cd,0ms);
}
.s04__list .s04__item:nth-child(1),.s13__card li:nth-child(1){--cd:0ms;}
.s04__list .s04__item:nth-child(2),.s13__card li:nth-child(2){--cd:90ms;}
.s04__list .s04__item:nth-child(3),.s13__card li:nth-child(3){--cd:180ms;}
.s04__list .s04__item:nth-child(4),.s13__card li:nth-child(4){--cd:270ms;}
.s04__list .s04__item:nth-child(5),.s13__card li:nth-child(5){--cd:360ms;}
@media (prefers-reduced-motion:reduce){
  .s04__list .s04__item,
  .s13__card li{opacity:1;transform:none;}
}

/* ============ הדגשה בקו תחתי שנמתח ============
   הטקסט לא משנה צבע. במקום זה נמתח מתחתיו קו תכלת מימין לשמאל, בכיוון
   הקריאה, ברגע שהוא נכנס למסך. זו ההדגשה היחידה בדף שמציירת את עצמה,
   ולכן היא שמורה לשלוש הנקודות שהכי חשוב שיקראו.

   הקו יושב ב-::after ולא ב-text-decoration כי רק כך אפשר לשלוט על
   העובי, על המרחק מהטקסט ועל כיוון הציור. transform-origin:right הוא
   ימין פיזי, כלומר תחילת הקריאה בעברית. */
.uline{
  display:inline;
  font-weight:700;
  color:inherit;
  /* הקו מצויר כרקע ולא כ-::after אחד. אלמנט inline שנשבר לשתי שורות
     במובייל מקבל ::after יחיד שנמתח על שתי השורות ביחד, ואז הקו נראה
     תלוש מהמילים. רקע עם box-decoration-break:clone מקבל קופסה משלו
     בכל שורה, כלומר קו נפרד מתחת לכל שורה - זהה בדסקטופ ובמובייל */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-bottom:.16em;
  background-image:linear-gradient(var(--sky-deep),var(--sky-deep));
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:0 3px;
  /* אותה משיכה מימין לשמאל שהייתה קודם: הקו נפתח לכיוון הקריאה */
  transition:background-size .7s var(--ease-out) .15s;
}
.section--navy .uline{background-image:linear-gradient(var(--sky),var(--sky));}
.uline.is-in{background-size:100% 3px;}

/* וריאציה של אותה הדגשה: במקום קו מתחת למילים הרקע עצמו
   נצבע. אותו מנגנון בדיוק - גרדיאנט שנפתח מימין לשמאל - רק
   שהוא ממלא את כל גובה השורה, ולכן הטקסט שמעליו מתהפך ללבן */
.uline.hl{
  font-weight:inherit;
  padding:.08em .2em .14em;
  border-radius:4px;
  background-position:right center;
  background-size:0 100%;
  transition:background-size .7s var(--ease-out) .15s,
             color .7s var(--ease-out) .15s;
}
.uline.hl.is-in{background-size:100% 100%;color:#fff;}

/* בכותרות המשקל כבר כבד, ולכן ההדגשה לא מוסיפה משקל - רק את הקו */
h1 .uline,h2 .uline,h3 .uline,.h2 .uline{font-weight:inherit;}

@media (prefers-reduced-motion:reduce){
  .uline{transition:none;background-size:100% 3px;}
  .uline.hl{background-size:100% 100%;color:#fff;}
}

/* strong שכבר מודגש בפונט לא צריך משקל נוסף מ-.uline - רק את הקו */
strong.uline{font-weight:inherit;}

/* ---------- נגישלי ---------- */


/* ============ וריאציות כניסה ============
   בקשה של טל: קצת תנועה שתעיר את העין בגלילה, בלי אפקטים מיוחדים.
   שתי וריאציות בלבד, ושתיהן על אותה תשתית reveal שכבר קיימת:

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

   2. stagger - הפסקאות בתוך קבוצה נכנסות אחת אחרי השנייה בהפרש
      של 80ms, בקצב של קריאה. זה בדיוק המנגנון שכבר משמש את
      רשימות הסימון, רק מוחל על פסקאות. */
/* טל ביקש להפחית אפקטים: ההחלקה הצידה ירדה, נשארת אותה עלייה עדינה
   כמו לכל שאר הסקשנים - תנועה אחת בדף ולא שתיים */
.reveal--side{transform:translateY(8px);}

.reveal--stagger > *{opacity:0;transform:translateY(6px);}
.reveal--stagger.is-in > *{
  opacity:1;transform:none;
  transition:opacity .42s var(--ease-out) var(--sd,0ms),
             transform .5s var(--ease-out) var(--sd,0ms);
}
.reveal--stagger > *:nth-child(1){--sd:0ms;}
.reveal--stagger > *:nth-child(2){--sd:45ms;}
.reveal--stagger > *:nth-child(3){--sd:90ms;}
.reveal--stagger > *:nth-child(4){--sd:135ms;}
.reveal--stagger > *:nth-child(5){--sd:180ms;}

@media (prefers-reduced-motion:reduce){
  .reveal--side{transform:none;}
  .reveal--stagger > *{opacity:1;transform:none;}
}