/* 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(--navy);color:var(--cream);
  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(--navy);color:var(--cream-80);}
.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{
  background-image:linear-gradient(90deg,#c79a4e 0%,#a2762f 45%,#7a5420 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-gold-2{background-image:none;color:#a2762f;}
}

/* ---------- 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{
  position:absolute;top:50%;left:50%;
  display:flex;align-items:center;gap:18px;   /* 22 + 18 = סלוט של 40 */
  transform:translate(-11px,-50%);
  transition:transform var(--dur) var(--ease);
}
.cta:hover .cta__arrows,
.cta:focus-visible .cta__arrows,
.cta:active .cta__arrows{transform:translate(-51px,-50%);}
.cta__arrows svg{width:22px;height:22px;flex:none;}

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

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

/* ---------- 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(12px);}
.js .enter.enter--soft{transform:translateY(18px) scale(1.012);}
.js .is-ready .enter{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease-out) var(--d,0ms),
             transform .62s 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(14px);}
.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;}

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

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

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

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