/* ==========================================================================
   טירונות יוצרי התוכן: style.css
   1. Fonts
   2. Tokens
   3. Reset & base
   4. Primitives (container, tag, btn, frame, section title)
   5. Sections
   ========================================================================== */

/* ============ 1. FONTS ============ */
/* מתארחים מקומית ב-assets/fonts/. font-display: swap. */

/* סאבסטים: עברי + לטיני בסיסי בלבד. Heebo ו-Assistant הם פונטים משתנים,
   ולכן אותו קובץ משרת את שני המשקלים המוצהרים. */

/* ---- Heebo, כותרות, משקלים 800 ו-900 ---- */
@font-face {
  font-family: 'Heebo';
  src: url('../fonts/heebo-hebrew.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  src: url('../fonts/heebo-latin.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Assistant, טקסט גוף, משקלים 400 ו-600 ---- */
@font-face {
  font-family: 'Assistant';
  src: url('../fonts/assistant-hebrew.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  src: url('../fonts/assistant-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Noto Sans Hebrew, תגיות ו-UI, משקל 500 ---- */
@font-face {
  font-family: 'Noto Sans Hebrew';
  src: url('../fonts/noto-hebrew.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  src: url('../fonts/noto-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ 2. TOKENS ============ */

:root {
  /* צבע */
  --black:   #070711;
  --white:   #FFFFFF;
  --magenta: #FF2BD6;
  --blue:    #00A3FF;
  --green:   #3DFF7A;

  --ink-2:   rgba(255, 255, 255, 0.72);
  --ink-3:   rgba(255, 255, 255, 0.52);
  --line:    rgba(255, 255, 255, 0.16);
  --line-2:  rgba(255, 255, 255, 0.08);
  --surface: #0C0C18;

  /* טיפוגרפיה */
  --font-display: 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
  --font-body:    'Assistant', 'Arial Hebrew', system-ui, sans-serif;
  --font-ui:      'Noto Sans Hebrew', 'Arial Hebrew', system-ui, sans-serif;

  --lh-display: 1.15;
  --lh-title:   1.2;
  --lh-body:    1.7;

  --fs-hero:    clamp(3.5rem, 13vw, 9rem);
  --fs-lead:    clamp(1.375rem, 3.6vw, 2.125rem);
  --fs-title:   clamp(2rem, 5.6vw, 3.5rem);
  --fs-sub:     clamp(1.0625rem, 2.4vw, 1.375rem);
  --fs-body:    clamp(1rem, 2vw, 1.125rem);
  --fs-closer:  clamp(1.25rem, 3.2vw, 1.875rem);
  --fs-ui:      0.8125rem;

  /* מרווח: סולם 8 */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  /* חצי מהמרווח בין סקשנים. שני סקשנים סמוכים תורמים ריפוד כל אחד,
     ולכן הערך הזה כפול הוא המרווח בפועל: 120 במובייל ו-180 בדסקטופ,
     בדיוק כפי שהבריף דורש. קודם זה היה 120 ו-180 לכל צד, כלומר
     240 ו-360 בפועל, וזה מה שייצר את הרווחים המתים. */
  --s-section: 60px;

  /* פריסה */
  --max:        1200px;
  --max-narrow: 620px;
  --pad:        24px;

  --radius: 2px;
  --dur:    .5s;
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px) {
  :root {
    --s-section: 90px;
    --pad: 40px;
  }
}

/* ============ 3. RESET & BASE ============ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
}

p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-ui);
}
.skip-link:focus { inset-inline-start: 0; }

/* ============ 4. PRIMITIVES ============ */

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--narrow { max-width: calc(var(--max-narrow) + var(--pad) * 2); }

section { padding-block: var(--s-section); }

/* תגית UI */
.tag {
  display: inline-block;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* כפתור ראשי: לבן מלא, טקסט שחור. הניגוד החזק בדף. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn--primary { background: var(--white); color: var(--black); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--block { width: 100%; }

/* מסגרת פינות מצלמה: ארבע פינות בקו דק, בלי מסגרת מלאה */
.frame {
  position: absolute;
  inset: var(--s-3);
  pointer-events: none;
}
.frame__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
}
.frame__corner--tl { top: 0; left: 0;  border-inline-end: 0; border-block-end: 0; }
.frame__corner--tr { top: 0; right: 0; border-inline-start: 0; border-block-end: 0; }
.frame__corner--bl { bottom: 0; left: 0;  border-inline-end: 0; border-block-start: 0; }
.frame__corner--br { bottom: 0; right: 0; border-inline-start: 0; border-block-start: 0; }

@media (min-width: 900px) {
  .frame { inset: var(--s-5); }
  .frame__corner { width: 40px; height: 40px; }
}

/* כותרות סקשן */
.section-title { font-size: var(--fs-title); }
.section-sub {
  margin-top: var(--s-2);
  font-size: var(--fs-sub);
  color: var(--ink-2);
}
.closer { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-closer); line-height: var(--lh-title); }

/* משפט סיכום דו-חלקי במבנה של ניגוד: כל חלק עטוף ב-span כדי שהשבירה
   תיפול בגבול המשפט ולא באמצעו. חובה רווח מפורש בין הספאנים ב-HTML,
   אחרת שני החלקים נדבקים. חל על סקשנים 3, 5, 6, 10 ו-15 בלבד.
   במשפט סיכום אחד ארוך (סקשנים 8 ו-9) משתמשים ב-balance לבדו. */
.closer > span { display: inline-block; }
.body-text { color: var(--ink-2); }

/* חשיפה בגלילה */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ 5. SECTIONS ============ */

/* ---- 1. HERO ---- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* svh ולא dvh: svh הוא הגובה הקטן, כלומר כשסרגל הכתובת מוצג.
     הוא לא משתנה בזמן גלילה, ולכן אין reflow ואין קפיצה כשהסרגל נעלם.
     dvh היה משנה גובה תוך כדי גלילה ומקפיץ את הפריסה. */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--s-6) var(--s-5);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  text-align: center;
}

.hero__logo {
  width: clamp(128px, 22vw, 196px);
  height: auto;
  margin: 0 auto var(--s-4);
}

.hero__tag {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--magenta);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__title .dot { color: var(--magenta); }

.hero__lead {
  max-width: 32ch;
  margin: var(--s-3) auto 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lead);
  line-height: 1.3;
}

.hero__sub {
  max-width: 46ch;
  margin: var(--s-3) auto 0;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero .btn { margin-top: var(--s-4); }

.hero__note {
  margin-top: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* רמז לתוכן מתחת לקיפול: קו שיער בודד, סטטי לחלוטין.
   32 פיקסל בלבד, מהם 8 עליונים במג׳נטה, 24 פיקסל מהשוליים התחתונים.
   נשאר קצר בכוונה כדי שייקרא כסימן ולא כאלמנט מבני,
   ולא יתחרה בקו הזמן של סקשנים 8 ו-9. */
.hero__cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 32px;
  background: var(--line);
}
/* שני מקטעים אטומים ולא גרדיאנט, כדי לא לחרוג מהאיסור על גרדיאנטים */
.hero__cue::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--magenta);
}

@media (min-width: 900px) {
  .hero__logo { margin-bottom: var(--s-5); }
}

/* ---- 2. פס לוגואים ---- */

.logos {
  padding-block: var(--s-section);
  overflow: hidden;
}

.logos__title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-align: center;
}

.logos__viewport { margin-top: var(--s-5); overflow: hidden; }

.logos__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-5), 7vw, var(--s-7));
}

/* גובה אופטי אחיד לכל הלוגואים, לבן באטימות 55 אחוז.
   brightness(0) הופך כל צבע לשחור, invert(1) הופך אותו ללבן.
   התוצאה: כולם נקראים כמשפחה אחת ולא כאוסף מותגים מתחרים. */
.logos__track img {
  width: auto;
  height: 28px;
  flex: 0 0 auto;
  opacity: .55;
  filter: brightness(0) invert(1);
}

@media (min-width: 900px) {
  .logos__track img { height: 34px; }
}

/* גלילה אינסופית: הרצועה משוכפלת ב-JS, והאנימציה מזיזה בדיוק
   חצי מהרוחב, כך שנקודת האיחוי בלתי נראית.
   מופעל תמיד במובייל, ובדסקטופ רק כשיש יותר משמונה לוגואים. */
.logos__track.is-marquee {
  justify-content: flex-start;
  width: max-content;
  animation: logosMarquee var(--marquee-dur, 42s) linear infinite;
}
@keyframes logosMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

@media (max-width: 899px) {
  .logos__track { justify-content: flex-start; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track.is-marquee { animation: none; justify-content: center; width: auto; flex-wrap: wrap; }
}

/* ---- 3. הכאב ---- */

/* יישור ימין ברוחב מלא, בלי עמודת קריאה צרה */
.pain__list { margin-top: 56px; }

.pain__list li {
  position: relative;
  padding-inline-start: 64px;
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
.pain__list li + li { margin-top: 28px; }

/* קו מג׳נטה מלא בתחילת כל שורה, 3 על 40 */
.pain__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .6em;
  width: 40px;
  height: 3px;
  background: var(--magenta);
}

.pain .closer {
  margin-top: var(--s-6);
  max-width: 22ch;
}

@media (min-width: 900px) {
  .pain .closer { margin-top: var(--s-7); }
}

/* ---- 4. וידאו ---- */

.video__player {
  position: relative;
  margin-top: var(--s-6);
  margin-inline: auto;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  background: var(--surface);
}

.video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--magenta);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.video__play:hover { background: rgba(255, 43, 214, .1); }

/* משולש Play בקו נקי, בלי אייקון חיצוני.
   מאפיינים פיזיים בכוונה: כיוון ההפעלה הוא מוסכמה של נגני מדיה
   ולא נגזרת של כיוון הכתיבה, ואסור לו להתהפך. */
.video__play-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--magenta);
}

@media (min-width: 900px) {
  .video__player {
    max-width: 900px;
    aspect-ratio: 16 / 9;
    margin-top: var(--s-7);
  }
  .video__play { width: 88px; height: 88px; }
}

/* ---- 5. למה זה קורה ---- */

.why { text-align: center; }

.why .body-text { margin-top: var(--s-3); }
.why .body-text:first-of-type { margin-top: var(--s-6); }

/* משפט סוגר בתוך מסגרת קו דק, כמו ציטוט על קיר */
.quote {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-4);
  border-block: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-closer);
  line-height: var(--lh-title);
}
.quote > span { display: inline-block; }

@media (min-width: 900px) {
  .why .body-text:first-of-type { margin-top: var(--s-7); }
  .quote { margin-top: var(--s-7); padding: var(--s-6) var(--s-5); }
}

/* ---- 6. ההבטחה ---- */

.promise__grid {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-5);
}

.promise__col ul { margin-top: var(--s-4); }
.promise__col li {
  position: relative;
  padding-inline-start: var(--s-3);
  font-size: var(--fs-sub);
  line-height: 1.45;
}
.promise__col li + li { margin-top: var(--s-3); }

/* טור "לפני": מעומעם, בלי סימון.
   הצבע הוא ink-2 ולא ink-3, כי האטימות של 70 אחוז נערמת עליו.
   ink-3 כפול 0.7 נתן יחס ניגודיות 3.27, מתחת לסף של 4.5. */
.promise__col--before li { color: var(--ink-2); }

/* טור "אחרי": לבן מלא, נקודת ירוק קטנה בתחילת כל שורה.
   זו ההופעה היחידה של הירוק בדף. אין להשתמש בו בשום מקום אחר. */
.promise__col--after li { color: var(--white); }
.promise__col--after li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* משפט האמינות: נכס מכירתי ולא הערת שוליים.
   גדול ממשפט סוגר רגיל, לבן מלא, עם קו מג׳נטה קצר מעליו שמסמן אותו
   כאמירה עצמאית. אין להקטין אותו ואין לצבוע אותו באפור. */
.promise__credibility {
  position: relative;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  max-width: 30ch;
  font-size: clamp(1.375rem, 4vw, 2.25rem);
  color: var(--white);
}
.promise__credibility::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  background: var(--magenta);
}

.promise .btn { margin-top: var(--s-6); }

@media (min-width: 900px) {
  .promise__grid {
    margin-top: var(--s-7);
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  /* קו מפריד דק אנכי בין הטורים */
  .promise__col--before { padding-inline-end: var(--s-6); }
  .promise__col--after {
    padding-inline-start: var(--s-6);
    border-inline-start: 1px solid var(--line);
  }
  .promise__col li + li { margin-top: var(--s-4); }
  .promise__credibility { margin-top: var(--s-7); }
  .promise .btn { margin-top: var(--s-6); }
}

/* ---- רכיב רשימה מסומנת: סקשן 7 ("מתאים") וסקשן 15 ("לא מתאים") ----
   מבנה זהה בשתי הווריאציות בכוונה. הניגוד ביניהן בגלילה הוא חלק מהמסר,
   ולכן כל שינוי מידה או ריווח חייב לחול על שתיהן. */

.marked { margin-top: var(--s-6); }

.marked li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-sub);
  line-height: 1.5;
}
.marked li + li { margin-top: var(--s-4); }

.marked li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
}

/* וריאציה "מתאים": סימון וי דק בכחול.
   נבנה מ-border-right ו-border-bottom בסיבוב 45 מעלות. מאפיינים פיזיים
   בכוונה, כדי שצורת הווי תהיה זהה ולא תתהפך לפי כיוון הכתיבה. */
.marked--yes li { color: var(--ink-2); }
.marked--yes li::before {
  top: .42em;
  width: 7px;
  height: 12px;
  border-right: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  transform: rotate(45deg);
}

/* וריאציה "לא מתאים": קו אלכסוני דק במג׳נטה, טקסט מעט מעומעם */
.marked--no li { color: var(--ink-3); }
.marked--no li::before {
  top: .72em;
  width: 17px;
  height: 1px;
  background: var(--magenta);
  transform: rotate(-45deg);
}

@media (min-width: 900px) {
  .marked { margin-top: var(--s-7); }
  .marked li + li { margin-top: var(--s-5); }
}

/* ---- רכיב יום: סקשן 8 (יום 01) וסקשן 9 (יום 02) ----
   התאומים של הדף. הקורא צריך לזהות בגלילה שאלה שני חלקים של אותה
   תוכנית ולא שני סקשנים נפרדים. לכן כל המידות, הריווח והמבנה משותפים,
   ושתי הווריאציות נבדלות בשני דברים בלבד:
   1. תוכן המספר ברקע, שיושב ב-HTML.
   2. ערך --day-accent.
   כל הבדל נוסף בין הווריאציות הוא באג. */

/* isolation יוצר הקשר ערימה מקומי, כך ש-z-index שלילי על המספר
   מכניס אותו מתחת לתוכן הסקשן אבל מעל רקע העמוד */
.day { position: relative; overflow: hidden; isolation: isolate; }

.day--01 { --day-accent: var(--magenta); }
.day--02 { --day-accent: var(--blue); }

.day .container { position: relative; }

/* המספר הענק ברקע. לבן באטימות נמוכה מאוד בשתי הווריאציות,
   כדי שההבדל היחיד בצבע יישאר הקו. */
.day__numeral {
  position: absolute;
  top: -.34em;
  inset-inline-end: -.04em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(11rem, 34vw, 24rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, .035);
  user-select: none;
}

.day .tag { color: var(--day-accent); }
.day .section-title { margin-top: var(--s-3); }

/* הנושאים כרשימה עם קו דק לאורך צד ההתחלה */
.day__list {
  margin-top: var(--s-6);
  max-width: var(--max-narrow);
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--day-accent);
}
.day__list li {
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--ink-2);
}
.day__list li + li { margin-top: var(--s-3); }

/* משפט סוגר אחד ארוך: balance לבדו, בלי עטיפת ספאנים */
.day .closer {
  margin-top: var(--s-6);
  max-width: 30ch;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .day__list {
    margin-top: var(--s-7);
    padding-inline-start: var(--s-5);
  }
  .day__list li + li { margin-top: var(--s-4); }
  .day .closer { margin-top: var(--s-7); }
}

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

.deliverables__grid {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}

.deliverables__grid li {
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: var(--s-2);
  border: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink-2);
  text-align: center;
  justify-content: center;
  /* שובר מילה ארוכה במקום לדחוף את העמודה ולשבור את הגריד */
  overflow-wrap: anywhere;
}

.deliverables .closer {
  margin-top: var(--s-6);
  max-width: 24ch;
}

@media (min-width: 900px) {
  .deliverables__grid {
    margin-top: var(--s-7);
    grid-template-columns: repeat(3, 1fr);
  }
  .deliverables__grid li {
    min-height: 104px;
    padding: var(--s-3);
    font-size: 1.0625rem;
  }
  .deliverables .closer { margin-top: var(--s-7); }
}

.deliverables .btn { margin-top: var(--s-6); }

/* ---- 11. חודש ההמשך ----
   נשימה. אחרי הצפיפות של סקשן 10 הריק הוא התוכן.
   בלי תמונה, בלי מסגרת, בלי CTA. */

.followup { text-align: center; }
.followup .body-text { margin-top: var(--s-3); }
.followup .body-text:first-of-type { margin-top: var(--s-6); }

@media (min-width: 900px) {
  .followup .body-text:first-of-type { margin-top: var(--s-7); }
}

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

/* סדר שכבות:
   0  תאורת סביבה
   0  רשת (מופיעה אחרי התאורה ב-DOM ולכן נצבעת מעליה)
   1  תוכן
   4  גרעין
   5  UI צף
   6  פס התקדמות */

body { position: relative; }

main, .footer { position: relative; z-index: 1; }

/* תאורת סביבה: שתי הילות רדיאליות סטטיות, מג׳נטה למעלה וכחול למטה */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* מרכזי ההילות יושבים מחוץ לבד, והדעיכה נגמרת ב-55 אחוז,
     כדי שיישאר שחור אמיתי בין שתי ההילות. אחרת זה נקרא כמעבר צבע
     על פני כל המסך במקום כשני מקורות אור. */
  background:
    radial-gradient(920px 720px at 92% -18%, rgba(255, 43, 214, .085), transparent 55%),
    radial-gradient(920px 720px at 4% 118%, rgba(0, 163, 255, .07), transparent 55%);
}

@media (max-width: 899px) {
  body::before {
    background:
      radial-gradient(560px 460px at 96% -12%, rgba(255, 43, 214, .075), transparent 55%),
      radial-gradient(560px 460px at 0% 112%, rgba(0, 163, 255, .06), transparent 55%);
  }
}

/* רשת: ריבועים של 80 פיקסל, לבן ב-2 אחוז, מתפוגגת בשוליים */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 85%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 85%);
}

/* גרעין: SVG מוטמע ב-CSS, בלי קובץ חיצוני ובלי בקשת רשת */
.grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* פס התקדמות גלילה */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 6;
  height: 2px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(to left, var(--magenta), var(--blue));
}

.wa-float, .sticky-cta { z-index: 5; }

/* במובייל הרעש והרשת מופחתים לחצי */
@media (max-width: 899px) {
  .grain { opacity: .015; }
  body::after {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, .01) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, .01) 1px, transparent 1px);
  }
}

/* ==========================================================================
   7. תנועה
   כל האנימציות על transform ו-opacity, למעט חידוד מטשטוש אחד
   בכותרת ההירו. filter מורכב על ה-GPU ולא מפעיל חישוב פריסה מחדש,
   ולכן הוא לא מפר את הכלל שאוסר הנפשת width, height, top ו-margin.
   כל אנימציית כניסה מסתיימת בתוך 700 מילישניות.
   ========================================================================== */

.motion-on .hero .frame__corner,
.motion-on .hero__logo,
.motion-on .hero__tag,
.motion-on .hero__title .w,
.motion-on .hero__lead,
.motion-on .hero__sub,
.motion-on .hero .btn,
.motion-on .hero__note,
.motion-on .hero__cue { opacity: 0; }

/* ---- ההירו: כניסה מתוזמרת ---- */

@keyframes cornerIn { from { transform: translate(var(--cx), var(--cy)); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes riseIn   { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes wordIn   { from { transform: translateY(24px); filter: blur(8px); opacity: 0 } to { transform: none; filter: blur(0); opacity: 1 } }
@keyframes dotIn    { 0% { transform: scale(0); opacity: 0 } 70% { transform: scale(1.35); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes charIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes recPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* 0 עד 200: ארבע הפינות נכנסות מהשוליים פנימה, כמו פריים שננעל */
.is-loaded .hero .frame__corner { animation: cornerIn 200ms var(--ease) forwards; }
.hero .frame__corner--tl { --cx: -20px; --cy: -20px; }
.hero .frame__corner--tr { --cx:  20px; --cy: -20px; }
.hero .frame__corner--bl { --cx: -20px; --cy:  20px; }
.hero .frame__corner--br { --cx:  20px; --cy:  20px; }

/* 200: התגית מוקלדת, ולידה נקודת REC שפועמת פעמיים ונעצרת */
.hero__tag { display: flex; align-items: center; justify-content: center; gap: 8px; }
.is-loaded .hero__tag { animation: fadeIn 1ms 200ms linear forwards; }
.hero__tag-text .char {
  opacity: 0;
  animation: charIn 1ms linear forwards;
  animation-delay: calc(200ms + var(--i) * 32ms);
}

.rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  opacity: .55;
}
.is-loaded .hero__tag .rec { animation: recPulse 420ms 240ms ease-in-out 2; }

/* 350: הלוגו עולה 12 פיקסל */
.is-loaded .hero__logo { animation: riseIn 420ms 350ms var(--ease) forwards; }

/* 500: הכותרת נבנית מילה במילה, 90 מילישניות בין מילה למילה */
.hero__title .w { display: inline-block; }
.is-loaded .hero__title .w { animation: wordIn 520ms var(--ease) forwards; }
.is-loaded .hero__title .w:nth-child(1) { animation-delay: 500ms; }
.is-loaded .hero__title .w:nth-child(2) { animation-delay: 590ms; }
.is-loaded .hero__title .w:nth-child(3) { animation-delay: 680ms; }
/* הנקודה נכנסת אחרונה, בקפיצה קלה */
.is-loaded .hero__title .dot { animation: dotIn 380ms 800ms var(--ease) forwards; }

/* 900: המשפט המרכזי, תת הכותרת וה-CTA ברצף של 80 מילישניות */
.is-loaded .hero__lead { animation: riseIn 460ms 900ms  var(--ease) forwards; }
.is-loaded .hero__sub  { animation: riseIn 460ms 980ms  var(--ease) forwards; }
.is-loaded .hero .btn  { animation: riseIn 460ms 1060ms var(--ease) forwards; }
.is-loaded .hero__note { animation: riseIn 460ms 1140ms var(--ease) forwards; }
.is-loaded .hero__cue  { animation: fadeIn 460ms 1240ms var(--ease) forwards; }

/* will-change רק בזמן הכניסה, ומוסר בסיומה על ידי intro-done */
.motion-on:not(.intro-done) .hero__title .w,
.motion-on:not(.intro-done) .hero__logo,
.motion-on:not(.intro-done) .hero__lead,
.motion-on:not(.intro-done) .hero .btn { will-change: transform, opacity; }

/* מילה נצבעת */
.hero__title .w--accent { color: var(--magenta); }
.accent { color: var(--magenta); }

.hero__title { transform-origin: 50% 0; }

/* ---- סקשן 3: כל שורה נכנסת מימין, הקו נמתח לפניה ---- */

@keyframes riseX  { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes lineX  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes slideIn { to { opacity: 1; transform: none } }

.motion-on .pain__list li { opacity: 0; transform: translateX(24px); }
.motion-on .pain__list li::before { transform: scaleX(0); transform-origin: right center; }

.pain__list.is-in li {
  animation: riseX 460ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 100ms + 180ms);
}
.pain__list.is-in li::before {
  animation: lineX 320ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 100ms);
}

.pain__list li:nth-child(1) { --d: 0 }
.pain__list li:nth-child(2) { --d: 1 }
.pain__list li:nth-child(3) { --d: 2 }
.pain__list li:nth-child(4) { --d: 3 }

/* ---- סקשן 6: הטרנספורמציה קורית שורה אחר שורה ---- */

@media (min-width: 900px) {
  .promise__col--after { position: relative; }
  .motion-on .promise__col--after { border-inline-start-color: transparent; }
  .motion-on .promise__col--after::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -1px;
    width: 1px;
    background: var(--line);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 700ms var(--ease);
  }
  .promise__grid.is-in .promise__col--after::before { transform: scaleY(1); }
}

.motion-on .promise__col--before li { opacity: 0; transform: translateX(28px); }
.motion-on .promise__col--after  li { opacity: 0; transform: translateX(-28px); }

.promise__grid.is-in .promise__col--after li {
  animation: slideIn 480ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 240ms);
}

/* שורות "לפני" נכנסות מלאות ורק אז מתעממות ל-45 אחוז.
   העמעום חייב לשבת בתוך ה-keyframes ולא בכלל נפרד: animation-fill-mode
   forwards מקבע את ערך הסיום של האנימציה מעל הצהרה רגילה, ולכן
   opacity: .45 בכלל חיצוני לא היה תופס לעולם. */
/* 70 אחוז ולא 45. אפור מעומעם על שחור ב-45 אחוז נופל מתחת לסף
   הקריאות, והמטרה היא שהשורה תיקרא כמצב שעברת ולא כמצב שנמחק. */
@keyframes slideInThenDim {
  0%   { opacity: 0; transform: translateX(28px) }
  45%  { opacity: 1; transform: none }
  65%  { opacity: 1 }
  100% { opacity: .7; transform: none }
}
.promise__grid.is-in .promise__col--before li {
  animation: slideInThenDim 700ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 240ms);
}

.promise__col li:nth-child(1) { --d: 0 }
.promise__col li:nth-child(2) { --d: 1 }
.promise__col li:nth-child(3) { --d: 2 }
.promise__col li:nth-child(4) { --d: 3 }
.promise__col li:nth-child(5) { --d: 4 }

/* קו חוצה שנמתח על שורות "לפני", ואז עמעום ל-45 אחוז.
   fit-content מצמצם את תיבת השורה לרוחב הטקסט, אחרת הקו החוצה
   נמתח על כל רוחב הטור ולא על המילים. */
.promise__col--before li { width: fit-content; }

.motion-on .promise__col--before li::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: .72em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
}
/* הקו החוצה נמתח אחרי שהשורה כבר נחתה, ולפני שהיא מתעממת */
.promise__grid.is-in .promise__col--before li::after {
  animation: lineX 340ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 560ms);
}

/* נקודות הירוק נכנסות בקפיצה, אחת אחרי השנייה */
.motion-on .promise__col--after li::before { transform: scale(0); opacity: 0; }
.promise__grid.is-in .promise__col--after li::before {
  animation: dotIn 360ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 420ms);
}

/* משפט האמינות נכנס אחרון */
.motion-on .promise__credibility { opacity: 0; transform: translateY(20px); }
.promise__credibility.is-in { animation: slideIn 520ms 400ms var(--ease) forwards; }

/* ---- סקשן 7 ו-15: הסימונים נמתחים ולא מופיעים מוכנים ---- */

.motion-on .marked li { opacity: 0; transform: translateX(20px); }
.marked.is-in li {
  animation: slideIn 460ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
.marked li:nth-child(1) { --d: 0 }
.marked li:nth-child(2) { --d: 1 }
.marked li:nth-child(3) { --d: 2 }
.marked li:nth-child(4) { --d: 3 }
.marked li:nth-child(5) { --d: 4 }

.motion-on .marked--yes li::before { transform: rotate(45deg) scale(0); }
.marked--yes.is-in li::before {
  animation: checkIn 380ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms + 200ms);
}
@keyframes checkIn { to { transform: rotate(45deg) scale(1) } }

.motion-on .marked--no li::before { transform: rotate(-45deg) scaleX(0); }
.marked--no.is-in li::before {
  animation: slashIn 380ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms + 200ms);
}
@keyframes slashIn { to { transform: rotate(-45deg) scaleX(1) } }

/* ---- סקשנים 8 ו-9: קו הטיימליין ---- */

.day__track {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}
.day__track-fill {
  position: absolute;
  inset: 0;
  background: var(--day-accent);
  transform: scaleY(0);
  transform-origin: top center;
}

/* הרשימה מחזיקה את הקו ולכן היא הקשר המיקום שלו */
.day__list { position: relative; border-inline-start: 0; }
.day__list li { position: relative; }

/* נקודה קטנה שנדלקת על הקו לצד כל נושא */
.day__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--s-4) * -1);
  top: .6em;
  width: 7px;
  height: 7px;
  margin-inline-start: -3px;
  border-radius: 50%;
  background: var(--day-accent);
}
.motion-on .day__list li::before { opacity: 0; transform: scale(0); }
.day__list.is-in li::before {
  animation: dotIn 320ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 60ms + 120ms);
}

.motion-on .day__list li { opacity: 0; transform: translateX(18px); }
.day__list.is-in li {
  animation: slideIn 440ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 60ms);
}
.day__list li:nth-child(1) { --d: 0 }
.day__list li:nth-child(2) { --d: 1 }
.day__list li:nth-child(3) { --d: 2 }
.day__list li:nth-child(4) { --d: 3 }
.day__list li:nth-child(5) { --d: 4 }
.day__list li:nth-child(6) { --d: 5 }
.day__list li:nth-child(7) { --d: 6 }
.day__list li:nth-child(8) { --d: 7 }

@media (min-width: 900px) {
  .day__list li::before { inset-inline-start: calc(var(--s-5) * -1); }
}

/* המספרים גדולים יותר, נחתכים בשוליים */
.day__numeral {
  font-size: max(40vh, 11rem);
  color: rgba(255, 255, 255, .08);
}

/* ---- סקשן 10: קיר הכלים ---- */

.deliverables__grid li {
  position: relative;
  border: 0;
  transition: transform 260ms var(--ease);
}
/* המסגרת היא שכבה נפרדת, כדי שתוכל להימתח בלי להנפיש border */
.deliverables__grid li::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  transition: border-color 260ms var(--ease);
}
.motion-on .deliverables__grid li::before { transform: scaleY(.6); opacity: 0; }
.deliverables__grid.is-in li::before {
  animation: frameIn 380ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 50ms);
}
@keyframes frameIn { to { transform: none; opacity: 1 } }

.motion-on .deliverables__label,
.motion-on .deliverables__num { opacity: 0; }
.deliverables__grid.is-in .deliverables__label,
.deliverables__grid.is-in .deliverables__num {
  animation: fadeIn 320ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 50ms + 260ms);
}

.deliverables__grid li:nth-child(1)  { --d: 0 }
.deliverables__grid li:nth-child(2)  { --d: 1 }
.deliverables__grid li:nth-child(3)  { --d: 2 }
.deliverables__grid li:nth-child(4)  { --d: 3 }
.deliverables__grid li:nth-child(5)  { --d: 4 }
.deliverables__grid li:nth-child(6)  { --d: 5 }
.deliverables__grid li:nth-child(7)  { --d: 6 }
.deliverables__grid li:nth-child(8)  { --d: 7 }
.deliverables__grid li:nth-child(9)  { --d: 8 }
.deliverables__grid li:nth-child(10) { --d: 9 }
.deliverables__grid li:nth-child(11) { --d: 10 }
.deliverables__grid li:nth-child(12) { --d: 11 }

/* מספור זעיר בפינה. כאן המספור מוצדק כי הוא מכמת נפח. */
.deliverables__num {
  position: absolute;
  top: 8px;
  inset-inline-start: 10px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--ink-3);
}
.deliverables__label { position: relative; }

.deliverables__grid li:hover,
.deliverables__grid li:active { transform: translateY(-4px); }
.deliverables__grid li:hover::before,
.deliverables__grid li:active::before { border-color: var(--magenta); }

/* ---- נקודת REC בסקשן 4 ---- */
.video__rec {
  position: absolute;
  top: 14px;
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .18em;
  color: var(--ink-3);
}
.motion-on .video__rec .rec { animation: recPulse 1600ms ease-in-out infinite; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero .frame__corner,
  .hero__logo, .hero__tag, .hero__title .w, .hero__lead, .hero__sub,
  .hero .btn, .hero__note, .hero__cue,
  .hero__tag-text .char,
  .pain__list li, .promise__col li, .marked li, .day__list li,
  .deliverables__label, .deliverables__num, .promise__credibility {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .pain__list li::before,
  .promise__col--after li::before,
  .day__list li::before,
  .deliverables__grid li::before { opacity: 1 !important; transform: none !important; }
  .marked--yes li::before { opacity: 1 !important; transform: rotate(45deg) !important; }
  .marked--no li::before  { opacity: 1 !important; transform: rotate(-45deg) !important; }
  .promise__col--before li::after { display: none !important; }
  .promise__col--before li { opacity: .7 !important; }
  .day__track-fill { transform: scaleY(1) !important; }
  .grain, .scroll-progress { display: none !important; }
}

/* ==========================================================================
   9. תיקוני באגים
   ========================================================================== */

/* --- באג 1: כפתורי האקורדיון סגרו על סגנון ברירת המחדל של הדפדפן --- */
.faq__list { margin-top: var(--s-6); }

.faq__item { border-block-end: 1px solid var(--line-2); }
.faq__item:first-child { border-block-start: 1px solid var(--line-2); }
.faq__item h3 { margin: 0; font: inherit; }

.faq__q {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  margin: 0;
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  line-height: 1.4;
  text-align: start;
  color: var(--white);
  cursor: pointer;
  transition: color 220ms var(--ease);
}
.faq__q:hover { color: var(--magenta); }

/* סימן פלוס דק שמסתובב, בלי אייקון חיצוני */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 320ms var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

.faq__a { padding-block-end: var(--s-3); color: var(--ink-2); max-width: 60ch; }

/* --- באג 2: הגנה מפני חיתוך בטור "אחרי" --- */
.promise__col { min-width: 0; }
.promise__col li { min-width: 0; overflow-wrap: anywhere; }
.promise__col--after li { width: auto; }

/* --- באג 4: הפוטר --- */
.footer {
  padding-block: var(--s-7);
  border-block-start: 1px solid var(--line-2);
  text-align: center;
}
.footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.footer picture { display: block; }
.footer__logo {
  width: 160px;
  max-width: 160px;
  height: auto;
  margin-inline: auto;
}
.footer__line { color: var(--ink-2); }
.footer__links { display: flex; gap: var(--s-2); color: var(--ink-3); font-family: var(--font-ui); font-size: var(--fs-ui); }
.footer__links a { transition: color 220ms var(--ease); }
.footer__links a:hover { color: var(--magenta); }
.footer__credit { font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--ink-3); }

/* --- באג 5: סרגל CTA דביק, מובייל בלבד --- */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: var(--s-2);
  background: rgba(7, 7, 17, .92);
  border-block-start: 1px solid var(--line-2);
  backdrop-filter: blur(8px);
}
@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

/* --- באג 6: רווחים מתים --- */
/* אלמנט אחרון בסקשן לא מוסיף מרווח תחתון משל עצמו.
   180 הפיקסלים של ריפוד הסקשן הם כל המרווח שנדרש. */
main > section > .container > :last-child { margin-block-end: 0; }
.promise .btn,
.deliverables .btn { margin-bottom: 0; }

/* ==========================================================================
   10. רקע לפי סקשן
   שחור אחיד לאורך כל הדף נקרא כמשעמם. כל סקשן מקבל טיפול משלו,
   והטקסט נשאר מעל 4.5:1 בכל אחד מהם.
   ========================================================================== */

/* הגרעין עבר מתחת לתוכן ולא מעליו. שתי סיבות:
   1. סקשן 11 חייב להיות שחור נקי, וסקשן עם רקע אטום יכול לכסות שכבה
      שיושבת מתחתיו אבל לא שכבה שמרחפת מעל כל הדף.
   2. רעש מעל טקסט מוריד את חדות הגליפים ופוגע בניגודיות, שהיא דרישה קשיחה. */
.grain { z-index: 0; }

main > section { position: relative; }

/* ---- 1. הירו: רקע וידאו ---- */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim { position: absolute; inset: 0; background: rgba(7, 7, 17, .65); }
.hero__inner, .hero .frame, .hero__cue { position: relative; z-index: 1; }

/* ---- 3. הכאב: קו אנכי מג׳נטה בצד ההתחלה ומספר פינתי ---- */
.pain__rail {
  position: absolute;
  inset-block: var(--s-7);
  inset-inline-start: max(12px, calc((100vw - var(--max)) / 2 - 20px));
  width: 2px;
  background: var(--magenta);
  opacity: .5;
}
.pain__numeral {
  position: absolute;
  top: var(--s-5);
  inset-inline-end: -.06em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: max(34vh, 10rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .06);
  user-select: none;
  pointer-events: none;
}
.pain { overflow: hidden; }

/* ---- 5. למה זה קורה: רשת חזקה יותר בפרספקטיבה, כמו רצפה נמשכת ---- */
.why { overflow: hidden; }
.why__floor {
  position: absolute;
  inset-inline: -30%;
  bottom: 0;
  height: 62%;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 80px 80px;
  transform-origin: 50% 100%;
  /* פרספקטיבה קלה, כמו רצפה שנמשכת אל האופק.
     --py נכתב על ידי לולאת הפרלקסה, וה-transform מרכיב אותו יחד
     עם הסיבוב, כדי ששני האפקטים לא ידרסו זה את זה. */
  transform: perspective(700px) rotateX(56deg) translateY(var(--py, 0px));
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  pointer-events: none;
}
.why .container { position: relative; z-index: 1; }

/* ---- 8 ו-9: רקע כהה במעט, כדי שהשניים ייקראו כבלוק אחד ---- */
.day { background: #0B0B18; }

/* ---- 10: הרשת מיושרת לגריד הכרטיסים ---- */
.deliverables { overflow: hidden; background: var(--black); }
.deliverables__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  /* אותו צעד של הגריד: רוחב תא ועוד 8 פיקסל של רווח */
  background-size: calc((100% - 8px) / 2 + 8px) 92px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 85%);
  pointer-events: none;
}
.deliverables .container { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .deliverables__mesh { background-size: calc((100% - 16px) / 3 + 8px) 112px; }
}

/* ---- 11: שחור נקי. בלי רשת ובלי רעש. זו הנשימה היחידה בדף. ---- */
.followup { background: var(--black); }

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

.marked li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  padding-inline-start: var(--s-3);
  border: 1px solid var(--line-2);
  font-size: clamp(1.0625rem, 2.8vw, 1.25rem);
  line-height: 1.45;
  transition: border-color 260ms var(--ease), background-color 260ms var(--ease);
}
.marked li + li { margin-top: var(--s-2); }
.marked li:hover { border-color: var(--line); background: rgba(255, 255, 255, .02); }

/* סימן הווי כ-SVG מצויר, 24 פיקסל, כחול מלא */
.marked__mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marked__mark path {
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
}
/* הציור נעשה ב-stroke-dashoffset. זו לא תכונת פריסה, היא לא מפעילה
   חישוב מחדש, והיא הדרך היחידה לצייר קו במקום להופיע מוכן. */
.motion-on .marked__mark path { stroke-dashoffset: 30; }
.marked--yes.is-in .marked__mark path {
  animation: drawMark 420ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms + 160ms);
}
@keyframes drawMark { to { stroke-dashoffset: 0 } }

/* הווריאציה הישנה מבוססת ה-pseudo מבוטלת בסקשן 7, כי הסימן עבר ל-SVG */
.marked--yes li::before { content: none; }

/* סקשן 15 ממשיך עם הקו האלכסוני עד שייבנה, ומקבל את אותה מסגרת */
.marked--no li { padding-inline-start: calc(var(--s-3) + 24px + var(--s-3)); }
.marked--no li::before { inset-inline-start: var(--s-3); }

@media (min-width: 900px) {
  .marked li { padding: var(--s-4); gap: var(--s-4); }
  .marked li + li { margin-top: var(--s-2); }
  .marked--no li { padding-inline-start: calc(var(--s-4) + 24px + var(--s-4)); }
  .marked--no li::before { inset-inline-start: var(--s-4); }
}

/* ==========================================================================
   12. תנועה נוספת
   ========================================================================== */

/* קו התקדמות אנכי בצד ההתחלה של הדף */
.scroll-rail {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 2px;
  pointer-events: none;
}
.scroll-rail__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--magenta), var(--blue));
}
@media (max-width: 899px) { .scroll-rail { display: none; } }

/* ריחוף על שורות רשימה */
.pain__list li,
.promise__col li,
.day__list li,
.deliverables__grid li { transition: color 240ms var(--ease), transform 260ms var(--ease); }
.pain__list li:hover,
.day__list li:hover { color: var(--white); }

/* ניצוץ שעובר על הכפתור במעבר עכבר */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(
    to left,
    transparent,
    rgba(255, 255, 255, .55),
    transparent
  );
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.motion-on .btn:hover::after { animation: sheen 620ms var(--ease); }
@keyframes sheen {
  0%   { opacity: 0; transform: translateX(0) skewX(-18deg) }
  10%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(-260%) skewX(-18deg) }
}
/* הניצוץ על כפתור לבן חייב להיות כהה, אחרת הוא בלתי נראה */
.btn--primary::after {
  background: linear-gradient(
    to left,
    transparent,
    rgba(7, 7, 17, .22),
    transparent
  );
}

/* ==========================================================================
   13. עדכוני ביטול תנועה
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .marked__mark path { stroke-dashoffset: 0 !important; }
  .scroll-rail { display: none !important; }
  .hero__video { display: none !important; }
  .btn::after { display: none !important; }
  .pain__numeral, .deliverables__mesh { transform: none !important; }
  .why__floor { transform: perspective(700px) rotateX(56deg) !important; }
}

/* שכבות רקע שהפרלקסה מזיזה: הטרנספורם מורכב מ---py בלבד,
   חוץ מרצפת סקשן 5 שמוסיפה עליו סיבוב. */
.pain__numeral,
.deliverables__mesh { transform: translate3d(0, var(--py, 0px), 0); }

/* וידאו שסומן לפריים בלבד: מציגים את ה-poster ולא מנגנים */
.hero__video.is-poster-only { pointer-events: none; }

/* ==========================================================================
   14. סבב תנועה עמוק
   ========================================================================== */

/* --- הכרעה: הפס האופקי נמחק. נשאר הקו האנכי בצד ההתחלה בלבד. --- */
.scroll-progress { display: none; }

/* --- סקשן 11 מקבל ריפוד כפול. הוא הנשימה היחידה בדף. --- */
.followup { padding-block: calc(var(--s-section) * 2); }

/* --- סקשן 3: סימן פריים מצלמה גדול במקום מספר --- */
.pain__frame {
  position: absolute;
  top: 6%;
  inset-inline-end: -6%;
  width: min(52vw, 520px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate3d(0, var(--py, 0px), 0);
}
.pain__frame i {
  position: absolute;
  width: 34%;
  height: 34%;
  border: 6px solid rgba(255, 255, 255, .06);
}
.pain__frame i:nth-child(1) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.pain__frame i:nth-child(2) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.pain__frame i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.pain__frame i:nth-child(4) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }

/* --- הירו: תמונה סטטית כמסלול נפרד, ושיפוע כהה מלמטה --- */
.hero__still { width: 100%; height: 100%; object-fit: cover; }

/* החשכה אחידה מעל המדיה */
.hero__scrim { position: absolute; inset: 0; background: rgba(7, 7, 17, .65); }

/* שיפוע נוסף מלמטה למעלה, כדי שה-CTA והמיקרו-קופי יישבו על שחור כמעט מלא */
.hero__scrim-foot {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, var(--black) 6%, rgba(7, 7, 17, .82) 38%, transparent 100%);
}

/* --- אבק בהירו --- */
.hero__dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* --- קווי סריקה בכניסת סקשן --- */
main > section::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--scan, var(--magenta));
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
main > section:nth-of-type(even) { --scan: var(--blue); }
main > section:nth-of-type(odd)  { --scan: var(--magenta); }

.motion-on main > section.is-scanned::after {
  animation: scanPass 900ms var(--ease) forwards;
}
@keyframes scanPass {
  0%   { opacity: 0; transform: translateY(0) }
  12%  { opacity: .85 }
  88%  { opacity: .85 }
  100% { opacity: 0; transform: translateY(100vh) }
}

/* --- חשיפת כותרות במסכה שנפתחת מימין לשמאל --- */
.section-title { position: relative; }
.motion-on .section-title.is-masked { overflow: hidden; padding-block-end: .12em; margin-block-end: -.12em; }
.motion-on .section-title.is-masked::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sec-bg, var(--black));
  transform: translateX(0);
}
.motion-on .section-title.is-masked.is-in::before {
  animation: unmask 500ms var(--ease) forwards;
}
/* בעברית הקריאה מימין לשמאל, ולכן המסכה נסוגה שמאלה
   וחושפת קודם את תחילת המשפט. */
@keyframes unmask { to { transform: translateX(-101%) } }

/* צבע המסכה חייב להתאים לרקע הסקשן, אחרת רואים מלבן */
main > section { --sec-bg: var(--black); }
.day { --sec-bg: #0B0B18; }

/* --- מגנטיות הכפתורים --- */
.btn { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn--primary:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }

/* --- הרשת נעה לאט מאוד, פיקסל אחד לשנייה --- */
body::after { inset: -120px; }
.motion-on body::after { animation: gridDrift 80s linear infinite; }
@keyframes gridDrift { to { transform: translate3d(0, 80px, 0) } }

/* ==========================================================================
   15. עדכוני ביטול תנועה
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__dust { display: none !important; }
  main > section::after { display: none !important; }
  .section-title.is-masked { overflow: visible !important; }
  .section-title.is-masked::before { display: none !important; }
  body::after { animation: none !important; transform: none !important; }
  .btn { transform: none !important; }
}

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

.gfx { pointer-events: none; }
.gfx img {
  width: 100%;
  height: auto;
  opacity: .85;
  filter: saturate(.82);
}

/* ציר הזמן: יושב בין סקשן 8 לסקשן 9 ומחבר ביניהם */
.gfx--timeline {
  max-width: min(900px, 88vw);
  margin-inline: auto;
  padding-inline: var(--pad);
  background: #0B0B18;
  padding-block: var(--s-5);
}
/* הסקשנים משני צדדיו כהים, ולכן הרצועה נמשכת לרוחב מלא ברקע שלהם */
.gfx--timeline::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  z-index: -1;
}

/* ארגז הכלים: לצד הכותרת בסקשן 10 */
.deliverables__head {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
.gfx--toolbox { width: clamp(120px, 34vw, 190px); justify-self: center; }

@media (min-width: 900px) {
  .deliverables__head {
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
  }
  .gfx--toolbox { width: 190px; justify-self: end; }
}

/* חשיפה: עלייה של 20 פיקסל עם אטימות, 600 מילישניות */
.motion-on .gfx img { opacity: 0; transform: translateY(20px); }
.gfx.is-in img { animation: gfxIn 600ms var(--ease) forwards; }
@keyframes gfxIn { to { opacity: .85; transform: none } }

/* ציר הזמן נחשף משמאל לימין, בכיוון התקדמות התהליך.
   מכסה שנסוג ב-transform, ולא הנפשה של mask-position. אותה טכניקה
   כמו מסכת הכותרות, ונשארת בתוך הכלל של transform ו-opacity. */
.gfx--timeline { position: relative; overflow: hidden; }
.motion-on .gfx--timeline::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0B0B18;
  transform: translateX(0);
}
.motion-on .gfx--timeline.is-in::after {
  animation: sweepOut 600ms var(--ease) forwards;
}
@keyframes sweepOut { to { transform: translateX(101%) } }

/* ==========================================================================
   17. סקשן 12: המנחים
   ========================================================================== */

.hosts__grid { margin-top: var(--s-6); display: grid; gap: var(--s-6); }

.host { text-align: center; }

/* קומפוזיציה מוכנה של המסגרת ושני הדיוקנאות בקובץ אחד.
   הרקע של הקובץ הוא שחור אטום (#000) ולא שקוף, בעוד רקע הדף
   הוא #070711. בלי טיפול היה נראה מלבן כהה יותר. המסכה מרככת
   את ארבע הפאות כך שהקובץ נטמע ברקע במקום לשבת עליו כקופסה.
   השוליים השליליים מקזזים את השוליים השחורים של הקומפוזיציה. */
.hosts__stage {
  width: min(880px, 94vw);
  margin: var(--s-5) auto calc(var(--s-5) * -1);
}
.hosts__stage img {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(78% 68% at 50% 46%, #000 62%, transparent 96%);
          mask-image: radial-gradient(78% 68% at 50% 46%, #000 62%, transparent 96%);
}

.host__name { margin-top: var(--s-4); font-size: clamp(1.75rem, 5vw, 2.5rem); }
.host__role { display: block; margin-top: var(--s-2); color: var(--blue); }
.host .body-text { margin-top: var(--s-3); }
.hosts .closer { margin-top: var(--s-6); text-align: center; max-width: 34ch; margin-inline: auto; }

@media (min-width: 900px) {
  .hosts__grid { margin-top: var(--s-7); grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .hosts .closer { margin-top: var(--s-7); }
}

/* ==========================================================================
   18. סקשן 13: המלצות (מבנה מוכן, מושבת)
   ========================================================================== */

.testimonials__grid { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .testimonials__grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   19. סקשן 14: חוויית הבוטקאמפ
   ========================================================================== */

.venue .body-text { margin-top: var(--s-3); max-width: 62ch; }
.venue .body-text:first-of-type { margin-top: var(--s-6); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.tag-row .tag {
  padding: 10px var(--s-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* מקום לתמונת החלל. נשאר מוסתר עד שיגיע חומר מהמלון. */
.venue__photo { margin-top: var(--s-6); }
.venue__photo:empty { display: none; }

/* ==========================================================================
   20. סקשן 17: למה עכשיו
   ========================================================================== */

.whynow { text-align: center; }
.whynow .body-text { margin-top: var(--s-3); }
.whynow .body-text:first-of-type { margin-top: var(--s-6); }
.whynow .btn { margin-top: var(--s-6); }

/* ==========================================================================
   21. סקשן 18: הטופס
   הכללים עברו לסעיף 63. שלוש שכבות דרסו זו את זו ואוחדו שם.
   ========================================================================== */

.btn.is-loading { opacity: .7; cursor: wait; }

.apply__thanks { text-align: center; }
.apply__thanks:focus { outline: none; }
.apply__thanks-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  line-height: var(--lh-title);
}
.apply__thanks .body-text { margin-top: var(--s-2); }
.apply__thanks .btn { margin-top: var(--s-5); }

/* ==========================================================================
   22. אלמנטים גלובליים צפים
   ========================================================================== */

.wa-float {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 88px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(7, 7, 17, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-float::before {
  content: '';
  width: 24px;
  height: 24px;
  background: var(--white);
  -webkit-mask: var(--wa-icon) center / contain no-repeat;
          mask: var(--wa-icon) center / contain no-repeat;
}
:root {
  --wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.17c-.25.69-1.46 1.32-2 1.4-.51.08-1.16.11-1.87-.12-.43-.14-.98-.32-1.69-.63-2.97-1.28-4.91-4.27-5.06-4.47-.15-.2-1.21-1.61-1.21-3.07 0-1.46.77-2.18 1.04-2.48.27-.3.59-.37.79-.37.2 0 .39 0 .57.01.18.01.42-.7.81.62.4.95 1.35 3.28 1.47 3.52.12.24.2.52.04.82-.16.3-.24.49-.47.75-.24.27-.5.6-.71.8-.24.24-.49.5-.21.98.28.48 1.24 2.04 2.66 3.31 1.83 1.63 3.37 2.14 3.85 2.38.48.24.76.2 1.04-.12.28-.32 1.2-1.4 1.52-1.88.32-.48.64-.4 1.08-.24.44.16 2.79 1.32 3.27 1.56.48.24.8.36.92.56.12.2.12 1.16-.13 1.85z'/%3E%3C/svg%3E");
}

.sticky-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
.sticky-cta.is-hidden { opacity: 0; visibility: hidden; transform: translateY(100%); }

@media (min-width: 900px) {
  .wa-float { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .sticky-cta { transition: none !important; }
}

/* ==========================================================================
   23. תמונות רקע לסקשן
   קריאות קודמת לאווירה. כל תמונה מקבלת החשכה של 62 עד 75 אחוז לפי
   --scrim, ורוויה מונמכת ב-20 אחוז כדי שהמג׳נטה והכחול של המותג
   יישארו הצבעים החזקים בדף.
   מוגבל לארבע תמונות בכל הדף: הירו, 5, 14, 17.
   ========================================================================== */

.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sec-bg picture { display: block; height: 100%; }
.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(.8);
  /* scale נותן מרווח לפרלקסה בלי לחשוף שוליים ריקים */
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
}
.sec-bg__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 17, var(--scrim, .7));
}
/* התוכן תמיד מעל התמונה */
.why .container,
.venue .container,
.whynow .container { position: relative; z-index: 1; }

.why, .venue, .whynow { overflow: hidden; }

/* מובייל: התמונות כהות יותר, כי הטקסט צפוף יותר על מסך צר */
@media (max-width: 899px) {
  .sec-bg__scrim { background: rgba(7, 7, 17, calc(var(--scrim, .7) + .08)); }
}

/* ---- הירו: התמונה הסטטית ---- */
.hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* שני הפרצופים יושבים במחצית העליונה של הפריים */
  object-position: 50% 28%;
  filter: saturate(.8);
}
@media (max-width: 899px) {
  .hero__still { object-position: 50% 22%; }
}

/* שכבת החשכה נוספת, ממורכזת על עמודת התוכן.
   ההחשכה השטוחה לבדה חייבת להישאר בטווח 60 עד 75 אחוז, ובטווח הזה
   נקודות האור החזקות בתמונה עדיין הפילו את הטקסט המשני מתחת ל-4.5:1.
   הפתרון הוא החשכה מקומית מתחת לטקסט במקום להשטיח את כל התמונה. */
.sec-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 78% at 50% 50%, rgba(7, 7, 17, .72) 0%, rgba(7, 7, 17, .34) 62%, transparent 100%);
}

/* מיקרו-הקופי בהירו עולה מ---ink-3 ל---ink-2.
   מדידה על אזור התמונה שמאחוריו נתנה 2.94, מתחת לסף.
   זה הטקסט הדהוי ביותר בדף, ומעל תמונה הוא לא שורד. */
.hero__note { color: var(--ink-2); }

/* לוגו שהוא תג ממולא, ולא סימן קווי, לא שורד את brightness(0) invert(1):
   ההיפוך הופך את כל שטח התג ללבן אטום והמרקם נעלם. אותה מטרה של
   משפחה מונוכרומטית מושגת בו דרך grayscale, ששומר על ההיררכיה הפנימית. */
.logos__track .logos__badge {
  filter: grayscale(1) brightness(1.75) contrast(.92);
}

/* ==========================================================================
   24. סבב ליטוש: כפתורים, נראות תמונות, טופס, ריווח
   ========================================================================== */

/* ---- כפתור ראשי מזמין יותר ----
   במנוחה: לבן מלא עם הילה רכה במג׳נטה, כדי שייקרא כאזור פעיל.
   בריחוף: מילוי צבע מותג שנשטף פנימה מימין לשמאל, בכיוון הקריאה.
   הטקסט נשאר שחור גם בריחוף. לבן על מג׳נטה נותן יחס ניגודיות 3.20
   ולבן על כחול 2.73, שניהם מתחת לסף. שחור נותן 6.57 ו-7.68. */
.btn { isolation: isolate; }

.btn--primary {
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, .28),
    0 10px 34px -16px rgba(255, 43, 214, .55);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, var(--magenta), var(--blue));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--ease);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before,
.btn--primary:active::before { transform: scaleX(1); }

.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 43, 214, .55),
    0 16px 40px -14px rgba(255, 43, 214, .7);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before { transition: none; }
}

/* התגית בהירו נושאת עכשיו משפט ולא תווית קצרה,
   ולכן מרווח האותיות המוגדל מתפרק ויורד. */
.hero__tag { letter-spacing: .06em; }
.hero__tag-text .char { animation-delay: calc(200ms + var(--i) * 20ms); }

/* ---- נראות התמונות ----
   ההחשכה הייתה אגרסיבית מדי והתמונות כמעט נעלמו. ההחשכה השטוחה
   יורדת, והקריאות נשמרת דרך שכבת ההחשכה הממורכזת שמתחת לטקסט בלבד. */
.why  .sec-bg__scrim { background: rgba(7, 7, 17, .42); }
.venue .sec-bg__scrim { background: rgba(7, 7, 17, .40); }
.whynow .sec-bg__scrim { background: rgba(7, 7, 17, .48); }

.sec-bg::after {
  background: radial-gradient(116% 74% at 50% 50%, rgba(7, 7, 17, .82) 0%, rgba(7, 7, 17, .52) 58%, rgba(7, 7, 17, .12) 100%);
}

@media (max-width: 899px) {
  .why  .sec-bg__scrim { background: rgba(7, 7, 17, .50); }
  .venue .sec-bg__scrim { background: rgba(7, 7, 17, .48); }
  .whynow .sec-bg__scrim { background: rgba(7, 7, 17, .56); }
}

/* הירו: הווידאו נחשך פחות, השיפוע התחתון עושה את העבודה מתחת ל-CTA */
.hero__scrim { background: rgba(7, 7, 17, .46); }

/* אלמנטים גרפיים: מ-85 ל-96 אחוז */
.gfx img { opacity: .96; }
@keyframes gfxIn { to { opacity: .96; transform: none } }

/* ---- סקשן 12: התמונה בהירה יותר והטקסט קרוב יותר אליה ---- */
.hosts__stage img { opacity: .97; }
.hosts__stage {
  /* השוליים השליליים הוגדלו: לקומפוזיציה יש שוליים שחורים בתחתית,
     והטקסט היה נראה מנותק ממנה. */
  margin: var(--s-5) auto calc(var(--s-7) * -1);
}
.hosts__grid { margin-top: var(--s-3); }
@media (min-width: 900px) {
  .hosts__grid { margin-top: var(--s-4); }
}

/* ---- סקשנים 7 ו-15: ריווח הדוק יותר ----
   הרכיב משותף, ולכן ההידוק חל על שניהם ושומר על הזהות המבנית. */
.marked { margin-top: var(--s-5); }
.marked li { padding: var(--s-2) var(--s-3); }
.marked li + li { margin-top: 6px; }

@media (min-width: 900px) {
  .marked { margin-top: var(--s-6); }
  .marked li { padding: var(--s-3); gap: var(--s-3); }
  .marked li + li { margin-top: 8px; }
  .marked--no li { padding-inline-start: calc(var(--s-3) + 24px + var(--s-3)); }
  .marked--no li::before { inset-inline-start: var(--s-3); }
}

.nofit .closer { margin-top: var(--s-5); }


/* איזון סופי: ההחשכה השטוחה נשארת נמוכה כדי שהתמונה תיראה,
   וההחשכה הממורכזת מתחת לטקסט מתחזקת כדי לשמור על 4.5:1.
   התמונה נשארת בהירה בשוליים ומתעמעמת רק מתחת למילים. */
.sec-bg::after {
  background: radial-gradient(112% 72% at 50% 50%, rgba(7, 7, 17, .90) 0%, rgba(7, 7, 17, .62) 56%, rgba(7, 7, 17, .10) 100%);
}
.venue .sec-bg__scrim { background: rgba(7, 7, 17, .46); }
.why .sec-bg__scrim { background: rgba(7, 7, 17, .46); }

/* ההירו: שכבה כהה ממורכזת מאחורי עמודת התוכן.
   התגית במג׳נטה על פריים בהיר נתנה יחס 1.09, כלומר בלתי קריאה.
   השיפוע התחתון לבדו לא מגיע לגובה שבו התגית יושבת. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(84% 62% at 50% 42%, rgba(7, 7, 17, .82) 0%, rgba(7, 7, 17, .5) 58%, transparent 100%);
}

/* התגית בהירו נושאת עכשיו קריאה לפעולה ולא תווית, והיא יושבת מעל
   וידאו. טקסט מג׳נטה על פריים מואר נותן יחס 1.10 ואי אפשר להציל
   אותו בהחשכה סבירה: מג׳נטה דורשת רקע כמעט שחור כדי לעבור 4.5:1.
   הפתרון הוא לתת לתגית קרקע משלה: גלולה כהה עם מסגרת מג׳נטה
   וטקסט לבן. הנקודה נשארת מג׳נטה כסימן ולא כטקסט. */
.hero__tag {
  padding: 10px 18px;
  border: 1px solid rgba(255, 43, 214, .55);
  border-radius: 999px;
  background: rgba(7, 7, 17, .74);
  backdrop-filter: blur(6px);
  color: var(--white);
  width: fit-content;
  margin-inline: auto;
}

/* תמונת המנחים צריכה 97 אחוז, אבל היא יורשת את אנימציית הכניסה
   המשותפת שמסתיימת ב-96. animation-fill-mode: forwards מקבע את ערך
   הסיום של האנימציה מעל כל הצהרה רגילה, ולכן צריך keyframes משלה.
   זו הפעם השלישית שהמלכודת הזאת צצה בפרויקט. */
@keyframes hostsIn { to { opacity: .97; transform: none } }
.hosts__stage.is-in img { animation-name: hostsIn; }
.motion-off .hosts__stage img { opacity: .97; }

/* ==========================================================================
   25. תיקון: שכבות ההחשכה נערמו זו על זו
   שלוש שכבות נפרדות (החשכה שטוחה, החשכה ממורכזת, שיפוע תחתון)
   מתרבות ולא מתחברות. 0.46 ועוד 0.82 נותנים 0.90 בפועל, כלומר
   התמונה נעלמה. השכבה הממורכזת הענקית מבוטלת, ההחשכה השטוחה
   יורדת ל-20 אחוז, והקריאות נשמרת דרך לוח כהה צמוד לטקסט בלבד.
   ========================================================================== */

/* ביטול השכבות שגרמו לערימה */
.sec-bg::after { content: none; }
.hero__bg::after { content: none; }

/* התמונות ב-80 אחוז נראות */
.sec-bg__scrim,
.why .sec-bg__scrim,
.venue .sec-bg__scrim,
.whynow .sec-bg__scrim { background: rgba(7, 7, 17, .20); }

.hero__scrim { background: rgba(7, 7, 17, .20); }

@media (max-width: 899px) {
  .sec-bg__scrim,
  .why .sec-bg__scrim,
  .venue .sec-bg__scrim,
  .whynow .sec-bg__scrim { background: rgba(7, 7, 17, .26); }
}

/* השיפוע התחתון בהירו מרוכך: הוא נועד ל-CTA ולמיקרו-קופי,
   לא להשחיר את חצי הפריים. */
.hero__scrim-foot {
  height: 42%;
  background: linear-gradient(to top, rgba(7, 7, 17, .92) 0%, rgba(7, 7, 17, .55) 45%, transparent 100%);
}

/* לוח כהה צמוד לטקסט. זו השכבה היחידה שמגינה על הקריאות,
   והיא מוגבלת לעמודת התוכן במקום להחשיך את כל התמונה. */
.why .container,
.venue .container,
.whynow .container,
.hero__inner { isolation: isolate; }

.why .container::before,
.venue .container::before,
.whynow .container::before,
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5% -3%;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(7, 7, 17, .92) 0%,
    rgba(7, 7, 17, .86) 45%,
    rgba(7, 7, 17, .55) 78%,
    transparent 100%);
  pointer-events: none;
}

.why .container,
.venue .container,
.whynow .container { position: relative; }

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

.why .section-sub, .why .body-text,
.venue .section-sub, .venue .body-text, .venue .tag-row .tag,
.whynow .section-sub, .whynow .body-text { color: var(--white); }

/* הלוח מתרכך מ-92 ל-55 אחוז, ומקבל שוליים רכים דרך mask
   במקום דעיכה רדיאלית שהשאירה את הפינות חשופות. */
.why .container::before,
.venue .container::before,
.whynow .container::before,
.hero__inner::before {
  inset: -7% -5%;
  background: rgba(7, 7, 17, .55);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
}

/* הציטוט בסקשן 5 יושב מעל מקור אור חזק בתמונה, ואפילו טקסט לבן
   מעל הלוח נתן שם 2.64. הוא מקבל קרקע משלו במקום להחשיך את כל
   התמונה בגללו. זה גם מחזק את הכוונה המקורית: ציטוט על קיר. */
.why .quote {
  background: rgba(7, 7, 17, .78);
  padding-inline: var(--s-4);
  backdrop-filter: blur(2px);
}

/* גם תת הכותרת והמיקרו-קופי בהירו יושבים מעל וידאו.
   ink-2 מעל לוח 55 אחוז נותן 3.20 במקרה הגרוע, ולבן נותן 6.22. */
.hero__sub, .hero__note { color: var(--white); }

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

.marked li,
.deliverables__grid li,
.tag-row .tag,
.faq__item,
.shift__row {
  transition: border-color 260ms var(--ease), background-color 260ms var(--ease), transform 260ms var(--ease);
}

.marked--yes li:hover { border-color: var(--blue); background: rgba(0, 163, 255, .08); }
.marked--no  li:hover { border-color: var(--magenta); background: rgba(255, 43, 214, .08); }
.tag-row .tag:hover   { border-color: var(--magenta); background: rgba(255, 43, 214, .10); color: var(--white); }
.deliverables__grid li:hover::before { border-color: var(--magenta); }
.faq__item:hover { background: rgba(255, 43, 214, .05); }

/* ==========================================================================
   28. ריחוף על הלוגו בהירו
   ========================================================================== */

.hero__logo {
  transition: transform 520ms var(--ease), filter 520ms var(--ease);
  cursor: default;
}
.motion-on .hero__logo:hover {
  transform: translateY(-6px) scale(1.045) rotate(-1.2deg);
  filter: saturate(1.25) brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo { transition: none; }
  .hero__logo:hover { transform: none; filter: none; }
}

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

.shift { margin-top: var(--s-6); }

.shift__head,
.shift__row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: var(--s-2);
}

.shift__head {
  margin-bottom: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: .18em;
}
.shift__head-before { color: var(--ink-3); text-align: start; }
.shift__head-after  { color: var(--green); text-align: start; }

.shift__row {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.shift__row + .shift__row { margin-top: 8px; }
.shift__row:hover {
  border-color: var(--magenta);
  background: rgba(255, 43, 214, .06);
  transform: translateY(-2px);
}

.shift__from {
  position: relative;
  color: var(--ink-2);
  font-size: clamp(.9375rem, 2.2vw, 1.0625rem);
  width: fit-content;
}
/* קו חוצה שנמתח על המצב הישן */
.shift__from::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: .62em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
}

.shift__to {
  color: var(--white);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vw, 1.1875rem);
}

/* החץ: קו דק עם ראש, שנמתח לכיוון הקריאה */
.shift__arrow {
  position: relative;
  display: block;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: right center;
}
.shift__arrow::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--green);
  border-bottom: 1px solid var(--green);
  transform: rotate(45deg);
  opacity: 0;
}
.shift__row:hover .shift__arrow { background: var(--green); }

/* מצבי כניסה */
.motion-on .shift__row { opacity: 0; transform: translateY(14px); }
.motion-on .shift__to  { opacity: 0; transform: translateX(-16px); display: inline-block; }

.shift.is-in .shift__row {
  animation: shiftRowIn 520ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 140ms);
}
@keyframes shiftRowIn { to { opacity: 1; transform: none } }

.shift.is-in .shift__arrow {
  animation: lineX 360ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 140ms + 260ms);
}
.shift.is-in .shift__arrow::after {
  animation: fadeIn 240ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 140ms + 560ms);
}
.shift.is-in .shift__from::after {
  animation: lineX 320ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 140ms + 420ms);
}
.shift.is-in .shift__to {
  animation: shiftToIn 460ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 140ms + 520ms);
}
@keyframes shiftToIn { to { opacity: 1; transform: none } }

.shift__row:nth-of-type(1) { --d: 0 }
.shift__row:nth-of-type(2) { --d: 1 }
.shift__row:nth-of-type(3) { --d: 2 }
.shift__row:nth-of-type(4) { --d: 3 }
.shift__row:nth-of-type(5) { --d: 4 }
.shift__row:nth-of-type(6) { --d: 5 }

@media (max-width: 899px) {
  .shift__head, .shift__row { grid-template-columns: 1fr 28px 1fr; gap: 10px; }
  .shift__row { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shift__row, .shift__to { opacity: 1 !important; transform: none !important; }
  .shift__arrow { transform: scaleX(1) !important; }
  .shift__arrow::after { opacity: 1 !important; }
  .shift__from::after { transform: scaleX(1) !important; }
}

/* ==========================================================================
   30. סקשנים 8 ו-9: תווית היום גדולה וברורה
   ========================================================================== */

.day__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 3.4vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--day-accent);
}
.day .section-title { margin-top: var(--s-2); }

/* ==========================================================================
   31. רקעים חדשים והפרדה בין סקשנים
   סקשן עם רקע, סקשן בלי, לסירוגין. זה מה שנותן את ההפרדה.
   ========================================================================== */

.promise, .followup, .faq { overflow: hidden; }
.day--01 { overflow: hidden; background: transparent; }

.promise .container,
.followup .container,
.faq .container,
.day--01 .container { position: relative; isolation: isolate; }

.promise .container::before,
.followup .container::before,
.faq .container::before,
.day--01 .container::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -7% -5%;
  background: rgba(7, 7, 17, .55);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
  pointer-events: none;
}

/* כל טקסט שיושב מעל תמונה חייב להיות לבן מלא */
.promise .section-sub, .promise .shift__from,
.followup .section-sub, .followup .body-text,
.faq .faq__a p,
.day--01 .section-sub, .day--01 .day__list li { color: var(--white); }

.sec-bg img { object-position: var(--bg-pos, 50% 45%); }

/* ==========================================================================
   32. ריווח: צמצום מרווחים שהיו גדולים מדי
   ========================================================================== */

.deliverables .closer { margin-top: var(--s-5); }
.deliverables .btn { margin-top: var(--s-4); }
.followup .body-text:first-of-type { margin-top: var(--s-4); }
.followup .section-sub { margin-top: var(--s-2); }
.hosts .section-sub { margin-top: var(--s-2); }
.hosts__stage { margin-top: var(--s-3); }

@media (min-width: 900px) {
  .deliverables .closer { margin-top: var(--s-6); }
  .followup .body-text:first-of-type { margin-top: var(--s-5); }
}

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

.hosts .container { position: relative; z-index: 2; }
.host { position: relative; z-index: 2; }

.motion-on .host > * { opacity: 0; transform: translateY(18px); }
.hosts__grid.is-in .host > * {
  animation: shiftRowIn 520ms var(--ease) forwards;
  animation-delay: calc(var(--hd, 0) * 90ms + var(--cd, 0) * 220ms);
}
.host:nth-child(1) { --cd: 0 }
.host:nth-child(2) { --cd: 1 }
.host > *:nth-child(1) { --hd: 0 }
.host > *:nth-child(2) { --hd: 1 }
.host > *:nth-child(3) { --hd: 2 }
.host > *:nth-child(4) { --hd: 3 }

@media (prefers-reduced-motion: reduce) {
  .host > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   34. סקשן 15: הטקסט נבלע. לבן מלא, וכניסה שמדגישה כל שורה.
   ========================================================================== */

.marked--no li { color: var(--white); }
.marked--no li .marked__mark { stroke: var(--magenta); }


/* ---- תיקוני סבב 8 ---- */

/* המצב הישן קצת מעומעם מהחדש, אבל לא מספיק כדי ליפול מעל תמונה.
   ההבדל בין "לפני" ל"אחרי" נשען גם על משקל, גודל וקו חוצה,
   ולא על צבע בלבד, וזה גם נכון יותר מבחינת נגישות. */
.promise .shift__from { color: rgba(255, 255, 255, .9); font-weight: 400; }
.promise .shift__to { color: var(--white); }

/* סקשן 11 קיבל תמונת רקע ולכן הוא כבר לא "נשימה ריקה".
   הריפוד הכפול חוזר לרגיל, וזה מה שייצר 270 פיקסל בין הסקשנים. */
.followup { padding-block: var(--s-section); }

/* התמונה בסקשן 12 דחפה את הביוגרפיות מתחתיה עם שוליים שליליים
   של 96 פיקסל, ולכן הן נראו "מתחת לשכבת השחרה". */
.hosts__stage { margin-bottom: calc(var(--s-4) * -1); }
.hosts__grid { position: relative; z-index: 3; margin-top: var(--s-5); }

/* תווית "לפני" הייתה ב---ink-3 ונתנה 2.97 מעל התמונה */
.promise .shift__head-before { color: rgba(255, 255, 255, .88); }

/* מג׳נטה היא הצבע הבעייתי ביותר מעל תמונה: הלומיננס שלה 0.278,
   ולכן המילה המודגשת בהירו ותווית היום נתנו 1.94 מול פיקסל בהיר.
   בשני הסקשנים האלה הלוח שמאחורי הטקסט מעמיק ל-70 אחוז.
   התמונה עצמה נשארת ב-80 אחוז מחוץ לעמודת הטקסט. */
.hero__inner::before,
.day--01 .container::before { background: rgba(7, 7, 17, .70); }

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

.fit__layout { display: grid; gap: var(--s-5); }
.fit__text { min-width: 0; }

.fit__crew { justify-self: center; width: min(420px, 78vw); }
.fit__crew img { width: 100%; height: auto; }

@media (min-width: 900px) {
  .fit__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: center;
    gap: var(--s-6);
  }
  .fit__crew { justify-self: end; width: min(440px, 100%); }
}

/* כניסה: עלייה קלה עם אטימות, כמו שאר האלמנטים הגרפיים */
.motion-on .fit__crew img { opacity: 0; transform: translateY(24px); }
.fit__crew.is-in img { animation: crewIn 700ms var(--ease) forwards; }
@keyframes crewIn { to { opacity: 1; transform: none } }
.motion-off .fit__crew-a { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fit__crew-a { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   37. סקשן 6 מפוצל, וסקשן 17 בלי רקע
   ========================================================================== */

/* המעבר עצמו חוזר לרקע נקי. הלוח שמאחורי הטקסט מתבטל איתו,
   אחרת נשאר מלבן כהה מיותר על שחור. */
.promise .container::before { content: none; }
.promise .container { isolation: auto; }
.promise .section-sub { color: var(--ink-2); }
.promise .shift__from { color: var(--ink-2); font-weight: 400; }
.promise .shift__head-before { color: var(--ink-3); }

/* סקשן 17 חוזר לרקע נקי */
.whynow .container::before { content: none; }
.whynow .container { isolation: auto; }
.whynow .section-sub, .whynow .body-text { color: var(--ink-2); }
.whynow { overflow: visible; }

/* הבטחת האמינות: סקשן משלה, עם רקע */
.vow { position: relative; overflow: hidden; text-align: center; }
.vow .container { position: relative; isolation: isolate; }
.vow .container::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -12% -6%;
  background: rgba(7, 7, 17, .55);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%);
  pointer-events: none;
}
.vow .promise__credibility {
  margin-top: 0;
  margin-inline: auto;
  max-width: 30ch;
  color: var(--white);
}
.vow .promise__credibility::before { inset-inline-start: 50%; transform: translateX(-50%); }
.vow .btn { margin-top: var(--s-5); }

/* ==========================================================================
   38. הקו החוצה במרכז הטקסט ולא בחלקו העליון
   top: .62em התייחס לתיבת השורה כולה, שכוללת את גובה השורה,
   ולכן הקו נחת גבוה מדי. 50 אחוז עם היסט חצי גובה מדייק אותו.
   ========================================================================== */
.shift__from::after {
  top: 50%;
  transform: translateY(-50%) scaleX(0);
}
.shift.is-in .shift__from::after { animation-name: strikeX; }
@keyframes strikeX { to { transform: translateY(-50%) scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
  .shift__from::after { transform: translateY(-50%) scaleX(1) !important; }
}

/* אותו תיקון לקו החוצה בטור "לפני" הישן, אם הוא עוד בשימוש */
.promise__col--before li::after { top: 50%; transform: translateY(-50%) scaleX(0); }

/* ==========================================================================
   39. סקשן 8: הרקע מתפוגג בקצוות במקום להיחתך
   המסכה חלה על התמונה בלבד ולא על שכבת ההחשכה, אחרת היו נחשפים
   פיקסלים בהירים בשוליים.
   ========================================================================== */
.day--01 .sec-bg img {
  -webkit-mask-image: radial-gradient(128% 112% at 50% 50%, #000 48%, rgba(0,0,0,.55) 78%, transparent 100%);
          mask-image: radial-gradient(128% 112% at 50% 50%, #000 48%, rgba(0,0,0,.55) 78%, transparent 100%);
}

/* ==========================================================================
   40. סקשן 12: צמצום מרווחים נוסף
   ========================================================================== */
.hosts .section-sub { margin-top: 6px; }
.hosts__stage { margin-top: var(--s-2); margin-bottom: calc(var(--s-5) * -1); }
.hosts__grid { margin-top: var(--s-3); gap: var(--s-4); }
.host__name { margin-top: var(--s-2); }
.host__role { margin-top: 4px; }
.host .body-text { margin-top: 10px; }
.hosts .closer { margin-top: var(--s-4); }

@media (min-width: 900px) {
  .hosts__grid { margin-top: var(--s-4); gap: var(--s-5); }
  .hosts .closer { margin-top: var(--s-5); }
}

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

.fit__crew { position: relative; }
.fit__crew picture { display: block; }
.fit__crew picture + picture {
  position: absolute;
  inset: 0;
}
.fit__crew img { width: 100%; height: auto; display: block; }

.fit__crew-b { opacity: 0; }

.motion-on .fit__crew-a,
.motion-on .fit__crew-b { transition: opacity 180ms steps(2, end); }

/* המעבר בשני צעדים ולא בהדרגה: החלפה חלקה הייתה נראית כמו טשטוש,
   וצעדים נותנים תחושה של תזוזה אמיתית בין שני פריימים. */
.motion-on .fit__crew:hover .fit__crew-a,
.motion-on .fit__crew:focus-within .fit__crew-a { opacity: 0; }
.motion-on .fit__crew:hover .fit__crew-b,
.motion-on .fit__crew:focus-within .fit__crew-b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fit__crew-b { display: none; }
}

/* ==========================================================================
   42. פס הלוגואים: הבזק אור שעובר מימין לשמאל
   ========================================================================== */

.logos__viewport { position: relative; }
.logos__viewport::after {
  content: '';
  position: absolute;
  inset-block: -20%;
  width: 22%;
  inset-inline-start: -30%;
  pointer-events: none;
  background: linear-gradient(
    to left,
    transparent,
    rgba(255, 255, 255, .16) 35%,
    rgba(255, 43, 214, .22) 50%,
    rgba(255, 255, 255, .16) 65%,
    transparent
  );
  transform: skewX(-14deg);
  opacity: 0;
}
.motion-on .logos__viewport::after {
  animation: logosGlow 6.5s var(--ease) infinite;
}
/* הזוהר עובר מימין לשמאל, בכיוון הקריאה, ואז נח רוב הזמן */
@keyframes logosGlow {
  0%   { opacity: 0; transform: translateX(0) skewX(-14deg) }
  4%   { opacity: 1 }
  26%  { opacity: 1 }
  30%  { opacity: 0; transform: translateX(-620%) skewX(-14deg) }
  100% { opacity: 0; transform: translateX(-620%) skewX(-14deg) }
}

@media (prefers-reduced-motion: reduce) {
  .logos__viewport::after { display: none; }
}

/* ==========================================================================
   43. הלוגו בהירו: אנימציה בריחוף
   ========================================================================== */

.hero__logo { transform-origin: 50% 60%; }

.motion-on .hero__logo:hover {
  animation: logoPop 900ms var(--ease);
  transform: none;
  filter: none;
}
@keyframes logoPop {
  0%   { transform: none; filter: none }
  18%  { transform: translateY(-10px) scale(1.07) rotate(-2.5deg); filter: saturate(1.35) brightness(1.12) }
  38%  { transform: translateY(2px) scale(.985) rotate(1.6deg); filter: saturate(1.2) brightness(1.06) }
  56%  { transform: translateY(-4px) scale(1.028) rotate(-.9deg); filter: saturate(1.28) brightness(1.09) }
  74%  { transform: translateY(1px) scale(.996) rotate(.4deg); filter: saturate(1.12) brightness(1.03) }
  100% { transform: none; filter: none }
}

/* הבזק אור שחולף על הלוגו יחד עם הקפיצה */
.hero__logo-wrap { position: relative; display: inline-block; overflow: hidden; }
.hero__logo-wrap::after {
  content: '';
  position: absolute;
  inset-block: -10%;
  width: 40%;
  inset-inline-start: -50%;
  background: linear-gradient(to left, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.motion-on .hero__logo-wrap:hover::after { animation: logoSheen 900ms var(--ease); }
@keyframes logoSheen {
  0%   { opacity: 0; transform: translateX(0) skewX(-16deg) }
  15%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(-320%) skewX(-16deg) }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo:hover { animation: none; }
  .hero__logo-wrap::after { display: none; }
}

/* העטיפה יורשת את המרכוז והמידה שהיו על התמונה עצמה */
.hero__logo-wrap {
  width: clamp(128px, 22vw, 196px);
  margin: 0 auto var(--s-4);
}
.hero__logo-wrap picture { display: block; }
.hero__logo { width: 100%; margin: 0; }

@media (min-width: 900px) {
  .hero__logo-wrap { margin-bottom: var(--s-5); }
}

/* אנימציית הכניסה חלה על שני הפריימים וסיימה את שניהם ב-opacity 1
   עם fill forwards, ולכן הפריים השני נשאר גלוי לצמיתות והריחוף
   לא היה משנה כלום. זו הפעם הרביעית שהמלכודת הזאת צצה.
   הכניסה מוגבלת עכשיו לפריים הראשון בלבד. */
.fit__crew.is-in img { animation: none; }

.motion-on .fit__crew-a { opacity: 0; transform: translateY(24px); }
.fit__crew.is-in .fit__crew-a { animation: crewIn 700ms var(--ease) forwards; }

.motion-on .fit__crew-b { opacity: 0; transform: none; }
.motion-off .fit__crew-a { opacity: 1; transform: none; }

/* ==========================================================================
   44. שחרור אנימציית הכניסה אחרי שהסתיימה
   animation-fill-mode: forwards מנצח לא רק הצהרות רגילות אלא גם
   מצבי :hover. כל עוד האנימציה קיימת על האלמנט, שום ריחוף לא יוכל
   לשנות את האטימות שלו. ה-JS מוסיף is-done בסיום הכניסה, וכאן
   האנימציה מוסרת והמצב הסופי נקבע כהצהרה רגילה. מאותו רגע הריחוף עובד.
   ========================================================================== */

.fit__crew.is-done .fit__crew-a {
  animation: none;
  opacity: 1;
  transform: none;
}

.motion-on .fit__crew:hover .fit__crew-a,
.motion-on .fit__crew:focus-within .fit__crew-a { opacity: 0; }
.motion-on .fit__crew:hover .fit__crew-b,
.motion-on .fit__crew:focus-within .fit__crew-b { opacity: 1; }

.motion-off .fit__crew-b { display: none; }

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

.motion-on .fit__crew { opacity: 0; transform: translateY(24px); }
.fit__crew.is-in { animation: crewIn 700ms var(--ease) forwards; }

/* התמונות עצמן לא משתתפות בכניסה */
.motion-on .fit__crew img,
.motion-on .fit__crew-a,
.fit__crew.is-in img,
.fit__crew.is-in .fit__crew-a,
.fit__crew.is-done .fit__crew-a {
  animation: none;
  transform: none;
}
.motion-on .fit__crew-a { opacity: 1; }
.motion-on .fit__crew-b { opacity: 0; }

.motion-on .fit__crew:hover .fit__crew-a,
.motion-on .fit__crew:focus-within .fit__crew-a { opacity: 0; }
.motion-on .fit__crew:hover .fit__crew-b,
.motion-on .fit__crew:focus-within .fit__crew-b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fit__crew { opacity: 1 !important; transform: none !important; }
  .fit__crew-a { opacity: 1 !important; }
  .fit__crew-b { display: none !important; }
}

/* הכלל הישן `.motion-on .fit__crew img` הוא (0,2,1) ומנצח כל בורר
   שמבוסס מחלקות בלבד, כי הרכיב `img` נספר. לכן כל העקיפות כאן
   כוללות את שם הרכיב, אחרת הן מפסידות בשקט. */
.motion-on .fit__crew img.fit__crew-a { opacity: 1; }
.motion-on .fit__crew img.fit__crew-b { opacity: 0; }

.motion-on .fit__crew:hover img.fit__crew-a,
.motion-on .fit__crew:focus-within img.fit__crew-a { opacity: 0; }
.motion-on .fit__crew:hover img.fit__crew-b,
.motion-on .fit__crew:focus-within img.fit__crew-b { opacity: 1; }

/* ==========================================================================
   46. תיקון באג הלוגו בהירו
   אנימציית הריחוף החליפה את אנימציית הכניסה, וזו האחרונה היא שהחזיקה
   את opacity על 1 דרך fill forwards. ברגע שהיא הוחלפה, האטימות נפלה
   חזרה ל-0 מהכלל הבסיסי והלוגו נעלם. מה שנשאר גלוי היה רק ההבזק
   על עטיפה ריקה, וזה הריבוע הכהה עם השיין.
   הפתרון זהה לזה של סקשן 7: הכניסה עוברת לעטיפה, והריחוף נשאר על
   התמונה. שתי אנימציות לא נוגעות יותר באותה תכונה של אותו אלמנט.
   ========================================================================== */

/* ההבזק על הלוגו יורד. הוא נפרש על תיבת העטיפה ולא על צורת הלוגו,
   ולכן הוא נראה כמו פס לבן על ריק במקום כברק על הסימן. */
.hero__logo-wrap::after { content: none; }

.motion-on .hero__logo-wrap { opacity: 0; }
.is-loaded .hero__logo-wrap { animation: riseIn 420ms 350ms var(--ease) forwards; }

/* התמונה עצמה לא משתתפת בכניסה, ולכן הריחוף שולט בה בלי מתחרים */
.motion-on .hero__logo,
.is-loaded .hero__logo { animation: none; opacity: 1; transform: none; }

.motion-on .hero__logo-wrap:hover .hero__logo {
  animation: logoPop 900ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-wrap { opacity: 1 !important; animation: none !important; }
  .hero__logo { animation: none !important; }
}

/* ==========================================================================
   47. ההבזק בפס הלוגואים: תדירות גבוהה יותר
   ========================================================================== */
.motion-on .logos__viewport::after { animation-duration: 3.6s; }

/* ==========================================================================
   48. סקשנים 8 ו-9: איור לצד התוכן
   אותו מבנה בדיוק בשני הימים, כדי לשמור על התאומים.
   ========================================================================== */

.day__layout { display: grid; gap: var(--s-5); }
.day__body { position: relative; min-width: 0; }

.day__art { justify-self: center; width: min(360px, 76vw); }
.day__art img { width: 100%; height: auto; display: block; }

/* איור היום השני מגיע עם רקע משלו, ולכן הוא מקבל ריכוך שוליים
   כדי להיטמע ולא לשבת כמלבן על הרקע. */
.day__art--framed img {
  border-radius: var(--radius);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 68%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 68%, transparent 100%);
}

@media (min-width: 900px) {
  .day__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
    align-items: center;
    gap: var(--s-6);
  }
  .day__art { justify-self: end; width: min(400px, 100%); }
}

.motion-on .day__art { opacity: 0; transform: translateY(24px); }
.day__art.is-in { animation: crewIn 700ms var(--ease) forwards; }
.motion-off .day__art { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .day__art { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   49. סקשן 12: צמצום מרווחים אחרון
   ========================================================================== */
.hosts .section-sub { margin-top: 4px; }
.hosts__stage { margin-top: var(--s-1); margin-bottom: calc(var(--s-6) * -1); }
.hosts__grid { margin-top: var(--s-2); gap: var(--s-3); }
.host__name { margin-top: 6px; }
.host__role { margin-top: 2px; }
.host .body-text { margin-top: 8px; }
.hosts .closer { margin-top: var(--s-3); }

@media (min-width: 900px) {
  .hosts__grid { margin-top: var(--s-3); gap: var(--s-4); }
  .hosts .closer { margin-top: var(--s-4); }
}

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

/* ההחשכה האחידה מוחלפת בהחשכה מדורגת */
.day--01 .sec-bg__scrim {
  background: linear-gradient(
    to left,
    rgba(7, 7, 17, .22) 0%,
    rgba(7, 7, 17, .34) 26%,
    rgba(7, 7, 17, .62) 52%,
    rgba(7, 7, 17, .86) 74%,
    rgba(7, 7, 17, .93) 100%
  );
}

/* הלוח האחיד שמאחורי כל התוכן יורד, אחרת הוא היה מבטל את המדרג.
   במקומו לוח מקומי מאחורי עמודת הטקסט בלבד. */
.day--01 .container::before { content: none; }
.day--01 .container { isolation: auto; }

.day--01 .day__body { position: relative; isolation: isolate; }
.day--01 .day__body::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -6% -8%;
  background: rgba(7, 7, 17, .46);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 72%, transparent 100%);
  pointer-events: none;
}

/* במובייל האיור יורד מתחת לטקסט, ולכן המדרג האופקי מיותר
   ומוחלף בהחשכה אחידה. */
@media (max-width: 899px) {
  .day--01 .sec-bg__scrim { background: rgba(7, 7, 17, .42); }
}

/* ==========================================================================
   51. פס הלוגואים במובייל: קרוסלה שאפשר גם להחליק
   הגלילה נעשית ב-scrollLeft ולא ב-transform, כי transform לא ניתן
   להחלקה באצבע. המכל מוגדר ltr כדי שסמנטיקת scrollLeft תהיה אחידה
   בין דפדפנים, שכן ב-rtl חלקם מחזירים ערכים שליליים.
   ========================================================================== */

@media (max-width: 899px) {
  .logos__viewport {
    direction: ltr;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .logos__viewport::-webkit-scrollbar { display: none; }

  /* האנימציה מבוססת ה-transform מבוטלת. ה-JS מזיז את הגלילה. */
  .logos__track.is-marquee { animation: none; transform: none; }

  .logos__track {
    width: max-content;
    justify-content: flex-start;
    gap: var(--s-5);
    padding-inline: var(--s-3);
  }
  .logos__track img { height: 30px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .logos__viewport { overflow-x: auto; }
}

/* ==========================================================================
   52. סקשן 12: השורש היה בקובץ, לא ב-CSS
   36 אחוז מתמונת הקומפוזיציה היו שחור ריק: 14 אחוז למעלה ו-22 למטה.
   שלושת סבבי צמצום המרווחים הקודמים נלחמו בסימפטום עם שוליים
   שליליים, בזמן שהרווח היה אפוי בתוך הקובץ.
   הקובץ נחתך לתיבת התוכן שלו, ולכן כל העקיפות מיותרות עכשיו.
   ========================================================================== */

.hosts__stage {
  width: min(880px, 94vw);
  margin: var(--s-3) auto 0;
  aspect-ratio: auto;
}
.hosts__stage img {
  -webkit-mask-image: radial-gradient(78% 82% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(78% 82% at 50% 50%, #000 72%, transparent 100%);
}

.hosts__grid { margin-top: var(--s-3); }

@media (min-width: 900px) {
  .hosts__stage { margin-top: var(--s-4); }
  .hosts__grid { margin-top: var(--s-4); }
}

/* איור היום השני מוגש כמות שהוא, בלי ריכוך שוליים.
   הוא עומד בפני עצמו ולא צריך להיטמע ברקע. */
.day__art--framed img {
  -webkit-mask-image: none;
          mask-image: none;
  border-radius: var(--radius);
}

/* הידוק אחרון, ומסכה רחבה יותר: אחרי החיתוך התמונה צמודה לתוכן,
   ומסכה הדוקה הייתה מתחילה לכרסם בקצוות הקומפוזיציה. */
.hosts__stage {
  margin-top: var(--s-2);
}
.hosts__stage img {
  -webkit-mask-image: radial-gradient(92% 96% at 50% 50%, #000 82%, transparent 100%);
          mask-image: radial-gradient(92% 96% at 50% 50%, #000 82%, transparent 100%);
}
.hosts__grid { margin-top: var(--s-2); }

@media (min-width: 900px) {
  .hosts__stage { margin-top: var(--s-3); }
  .hosts__grid { margin-top: var(--s-3); }
}

/* ==========================================================================
   53. מסך התודה: ספירה קצרה ואז ההודעה
   הרצף: 1, 2, 3, "הקשב!", ואז הטקסט. אורך כולל כ-1.5 שניות.
   תחת prefers-reduced-motion הספירה יורדת וההודעה מוצגת מיד.
   ========================================================================== */

.thanks__count {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.1em;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 9vw, 4.5rem);
  line-height: 1;
  color: var(--magenta);
}
.thanks__count span {
  grid-area: 1 / 1;
  position: absolute;
  opacity: 0;
}
.thanks__count { position: relative; }

.motion-on .apply__thanks.is-counting .thanks__count span {
  animation: countBeat 420ms var(--ease) forwards;
}
.motion-on .apply__thanks.is-counting .thanks__count span:nth-child(1) { animation-delay: 0ms; }
.motion-on .apply__thanks.is-counting .thanks__count span:nth-child(2) { animation-delay: 320ms; }
.motion-on .apply__thanks.is-counting .thanks__count span:nth-child(3) { animation-delay: 640ms; }

@keyframes countBeat {
  0%   { opacity: 0; transform: scale(.55) }
  30%  { opacity: 1; transform: scale(1.12) }
  55%  { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(.92) }
}

.apply__thanks-title { display: block; }
.thanks__call {
  display: block;
  color: var(--magenta);
  letter-spacing: .04em;
  font-size: 1.15em;
}
.thanks__msg { display: block; margin-top: 4px; }

.motion-on .apply__thanks.is-counting .thanks__call,
.motion-on .apply__thanks.is-counting .thanks__msg,
.motion-on .apply__thanks.is-counting .thanks__sub,
.motion-on .apply__thanks.is-counting .thanks__cta { opacity: 0; }

.motion-on .apply__thanks.is-revealed .thanks__call {
  animation: callSnap 460ms var(--ease) forwards;
}
.motion-on .apply__thanks.is-revealed .thanks__msg  { animation: riseIn 420ms 220ms var(--ease) forwards; }
.motion-on .apply__thanks.is-revealed .thanks__sub  { animation: riseIn 420ms 360ms var(--ease) forwards; }
.motion-on .apply__thanks.is-revealed .thanks__cta  { animation: riseIn 420ms 500ms var(--ease) forwards; }

/* "הקשב" נכנס בחבטה קצרה, כמו פקודה */
@keyframes callSnap {
  0%   { opacity: 0; transform: scale(.7) }
  45%  { opacity: 1; transform: scale(1.09) }
  70%  { transform: scale(.98) }
  100% { opacity: 1; transform: scale(1) }
}

@media (prefers-reduced-motion: reduce) {
  .thanks__count { display: none; }
  .thanks__call, .thanks__msg, .thanks__sub, .thanks__cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* מספרי הספירה יושבים זה על זה במרכז מדויק. הם מחוץ לזרימה,
   ולכן המרכוז נקבע במפורש ולא נסמך על יישור המכל. */
.thanks__count span {
  grid-area: auto;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%) scale(.55);
  text-align: center;
}
@keyframes countBeat {
  0%   { opacity: 0; transform: translateY(-50%) scale(.55) }
  30%  { opacity: 1; transform: translateY(-50%) scale(1.12) }
  55%  { opacity: 1; transform: translateY(-50%) scale(1) }
  100% { opacity: 0; transform: translateY(-50%) scale(.92) }
}

/* ==========================================================================
   54. הערמת פריימי הקבוצה לא תלויה בעטיפת picture
   הכלל הקודם היה `picture + picture`, כלומר הוא נשען על מבנה
   שאפשר להסיר בלי לגעת ב-CSS. בגרסה הארוזה של הדף העטיפות הוסרו,
   הבורר הפסיק להתאים, והפריים השני נפל לזרימה הרגילה מתחת לראשון.
   המיקום עובר לתמונה עצמה, ולכן הוא עובד בשני המבנים.
   ========================================================================== */

.fit__crew { position: relative; }

.fit__crew img.fit__crew-b {
  position: absolute;
  top: 0;
  inset-inline: 0;
  width: 100%;
  height: auto;
}

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

.deliverables__grid li { display: flex; }

.deliverables__grid li::before {
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, .18);
}

.tool {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 84px;
  padding: var(--s-2);
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .92);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.deliverables__grid .deliverables__label {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* המספר בפינה עובר למג׳נטה */
.deliverables__grid .deliverables__num { color: var(--magenta); }

/* פלוס דק שמרמז שיש עוד */
.tool__plus {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 10px;
  width: 11px;
  height: 11px;
  transition: transform 320ms var(--ease);
}
.tool__plus::before,
.tool__plus::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: rgba(255, 255, 255, .5);
}
.tool__plus::after { transform: rotate(90deg); }

/* ריחוף ומגע: מסגרת מג׳נטה מלאה, הרמה, והפלוס מסתובב */
.deliverables__grid li:hover::before,
.deliverables__grid li:focus-within::before,
.deliverables__grid li:active::before { border-color: var(--magenta); }

.deliverables__grid li:hover,
.deliverables__grid li:focus-within,
.deliverables__grid li:active { transform: translateY(-4px); }

.tool:hover .tool__plus,
.tool:focus-visible .tool__plus,
.tool:active .tool__plus { transform: rotate(90deg); }

.tool:hover .tool__plus::before,
.tool:hover .tool__plus::after,
.tool:active .tool__plus::before,
.tool:active .tool__plus::after { background: var(--magenta); }

.tool:focus-visible { outline: 2px solid var(--magenta); outline-offset: -4px; }

@media (min-width: 900px) {
  .tool { min-height: 104px; padding: var(--s-3); }
}

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

/* ==========================================================================
   56. פאנל הכלים
   ========================================================================== */

.tool-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s-3);
}
.tool-modal[hidden] { display: none; }

.tool-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
}
.motion-on .tool-modal.is-open .tool-modal__overlay {
  animation: fadeIn 200ms var(--ease) forwards;
}
.motion-off .tool-modal__overlay { opacity: 1; }

.tool-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: #0C0C18;
  border: 1px solid var(--line-2);
  text-align: center;
  transform-origin: center center;
}

/* פינות המצלמה בפאנל */
.tool-modal__panel > .frame { inset: 10px; }
.tool-modal__panel .frame__corner { width: 22px; height: 22px; }

/* פתיחה: הכרטיס גדל אל הפאנל. המרחק והקנה מידה מחושבים ב-JS
   ומוזרקים כמשתנים, וכאן רק מנגנים אותם. transform ו-opacity בלבד. */
.motion-on .tool-modal.is-open .tool-modal__panel {
  animation: panelGrow 320ms var(--ease) forwards;
}
@keyframes panelGrow {
  from {
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(var(--from-s, .5));
  }
  to { opacity: 1; transform: none; }
}
.motion-off .tool-modal__panel { opacity: 1; }

.tool-modal__close {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.tool-modal__close::before,
.tool-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 11px;
  width: 18px;
  height: 1.5px;
  background: rgba(255, 255, 255, .72);
  transition: background 200ms var(--ease);
}
.tool-modal__close::before { transform: rotate(45deg); }
.tool-modal__close::after  { transform: rotate(-45deg); }
.tool-modal__close:hover::before,
.tool-modal__close:hover::after { background: var(--magenta); }
.tool-modal__close:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.tool-modal__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--magenta);
}

.tool-modal__title {
  margin-top: var(--s-2);
  font-size: clamp(1.375rem, 4.4vw, 1.875rem);
  line-height: 1.25;
  color: var(--white);
  text-wrap: balance;
}

/* שורת הכאב בלבן מלא */
.tool-modal__pain {
  margin-top: var(--s-4);
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--white);
}

/* שורת הפתרון בלבן 85 אחוז, עם קו מג׳נטה קצר מעליה */
.tool-modal__fix {
  position: relative;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}
.tool-modal__fix::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 44px;
  height: 2px;
  background: var(--magenta);
}

/* מעבר בין כרטיסים: התוכן מחליק, הפאנל נשאר במקומו */
.motion-on .tool-modal__slide.is-sliding {
  animation: slideSwap 260ms var(--ease);
}
@keyframes slideSwap {
  0%   { opacity: 0; transform: translateX(var(--slide-from, 0)) }
  100% { opacity: 1; transform: none }
}

@media (min-width: 900px) {
  .tool-modal__panel { padding: var(--s-7) var(--s-6) var(--s-6); }
  .tool-modal__panel > .frame { inset: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-modal__overlay { opacity: 1 !important; animation: none !important; }
  .tool-modal__panel { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tool-modal__slide { animation: none !important; }
}

/* נעילת גלילה בזמן שהפאנל פתוח */
.is-tool-open { overflow: hidden; }

/* פס הגלילה שומר מקום תמיד, ולכן נעילת הגלילה בזמן שהפאנל פתוח
   לא מזיזה את התוכן. הפיצוי הידני ב-JS היה תלוי בצד שבו הדפדפן
   מציב את פס הגלילה, וב-RTL זה לא אחיד. הדף גולל תמיד, ולכן
   השוליים השמורים תפוסים ממילא ואין לזה מחיר ויזואלי. */
html { scrollbar-gutter: stable; }

/* ==========================================================================
   57. אינסטגרם בפוטר
   ========================================================================== */

.footer__social {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-block: var(--s-3) var(--s-1);
  list-style: none;
  padding: 0;
}
.footer__social a {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  text-decoration: none;
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.footer__social a:hover,
.footer__social a:focus-visible { color: var(--white); transform: translateY(-2px); }
.footer__social a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 4px; }
.footer__social svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .footer__social a { transition: none; }
  .footer__social a:hover { transform: none; }
}

/* ==========================================================================
   58. תפריט נגישות: הכפתור והפאנל
   הכפתור בצד הנגדי לוואטסאפ. בעברית inline-end הוא שמאל, ושם
   יושב הוואטסאפ, ולכן הנגישות יושבת ב-inline-start.
   ========================================================================== */

.a11y-btn {
  position: fixed;
  inset-inline-start: 16px;
  bottom: 88px;
  z-index: 61;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(7, 7, 17, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.a11y-btn:hover,
.a11y-btn[aria-expanded="true"] { color: var(--white); border-color: var(--magenta); transform: translateY(-2px); }
.a11y-btn:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

@media (min-width: 900px) {
  .a11y-btn { bottom: 24px; }
}

/* ---- הפאנל: לוח צדדי קומפקטי מעל הכפתור, לא מודאל מסך מלא ---- */
.a11y-panel { position: fixed; inset: 0; z-index: 62; }
.a11y-panel[hidden] { display: none; }

.a11y-panel__box {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 150px;
  width: min(300px, calc(100vw - 32px));
  padding: var(--s-3);
  background: #0C0C18;
  border: 1px solid var(--line);
  text-align: start;
  transform-origin: bottom left;
}

.motion-on .a11y-panel__box { animation: a11yPop 220ms var(--ease) forwards; }
@keyframes a11yPop {
  from { opacity: 0; transform: translateY(10px) scale(.96) }
  to   { opacity: 1; transform: none }
}

@media (min-width: 900px) {
  .a11y-panel__box { bottom: 86px; }
}

.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}
.a11y-panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--white);
}

.a11y-panel__close {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.a11y-panel__close::before,
.a11y-panel__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  width: 16px;
  height: 1.5px;
  background: rgba(255, 255, 255, .72);
  transition: background 200ms var(--ease);
}
.a11y-panel__close::before { transform: rotate(45deg); }
.a11y-panel__close::after  { transform: rotate(-45deg); }
.a11y-panel__close:hover::before,
.a11y-panel__close:hover::after { background: var(--magenta); }
.a11y-panel__close:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.a11y-list {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--s-2);
  padding: 0;
  list-style: none;
}

/* כל מתג הוא button עם aria-pressed, לא checkbox מעוצב */
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.a11y-toggle:hover { border-color: rgba(255, 255, 255, .3); }
.a11y-toggle:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.a11y-toggle[aria-pressed="true"] { border-color: var(--magenta); background: rgba(255, 43, 214, .1); }

.a11y-toggle__state {
  flex: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .75rem;
  color: rgba(255, 255, 255, .58);
}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__state { color: var(--magenta); }

.a11y-reset {
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 1px solid var(--line);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.a11y-reset:hover { color: var(--white); border-color: var(--magenta); }
.a11y-reset:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.a11y-panel__note {
  margin-block-start: var(--s-1);
  font-family: var(--font-ui);
  font-size: .75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}

.a11y-panel__link {
  display: inline-block;
  margin-block-start: var(--s-2);
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a11y-panel__link:hover { color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
  .a11y-btn, .a11y-toggle, .a11y-reset, .a11y-panel__close::before, .a11y-panel__close::after { transition: none; }
  .a11y-btn:hover { transform: none; }
  .a11y-panel__box { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   59. מצבי הנגישות עצמם
   ========================================================================== */

/* ---- עצירת אנימציות ----
   שכבת התנועה ב-JS כבר לא מוסיפה motion-on כשהמתג דלוק, ולכן רוב
   האנימציות פשוט לא נכתבות. הכלל הזה סוגר את מה שנשאר: מעברים
   שיושבים על אלמנטים בלי תלות במחלקת התנועה. */
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ---- עצירת מדיה ----
   הווידאו נעצר אבל נשאר במקומו ומציג פריים סטטי: אם הוא כבר ניגן
   הוא קופא על הפריים הנוכחי, ואם לא, ה-poster הוא הפריים.
   הסתרה מוחלטת הייתה משאירה הירו שחור וריק. */
html.a11y-nomedia .hero__dust { display: none; }

/* ---- הדגשת קישורים ----
   קו תחתון וצבע מובחן לכל קישור. הכפתורים כבר נושאים רקע מלא,
   ולכן הם מקבלים מסגרת במקום קו תחתון. */
/* קישור הדילוג מוחרג: יש לו רקע לבן משלו, ומג׳נטה עליו נופל
   מתחת ל-4.5:1. החרגה בסלקטור עצמו ולא בכלל דורס, כי כלל דורס
   עם אותה חשיבות היה מפסיד על ספציפיות. */
html.a11y-links a:not(.btn):not(.skip-link),
html.a11y-links .footer__social a,
html.a11y-links .footer__links a {
  color: var(--magenta) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
html.a11y-links button:not(.a11y-toggle):not(.a11y-reset):not(.a11y-btn),
html.a11y-links .btn { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* ---- ניגודיות גבוהה ----
   כל טקסט עולה ללבן מלא, לוחות הרקע מתחת לטקסט מעל תמונות
   מעמיקים, והמסגרות מתחזקות. */
html.a11y-contrast {
  --ink-2:  #FFFFFF;
  --ink-3:  rgba(255, 255, 255, .88);
  --line:   rgba(255, 255, 255, .55);
  --line-2: rgba(255, 255, 255, .34);
  --scrim:  rgba(0, 0, 0, .86);
  --magenta: #FF6BE2;
  --blue:    #58C4FF;
  --green:   #6BFF9B;
}
html.a11y-contrast body { background: #000; }
html.a11y-contrast p,
html.a11y-contrast li,
html.a11y-contrast dd,
html.a11y-contrast dt,
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast h4, html.a11y-contrast figcaption,
html.a11y-contrast label,
html.a11y-contrast .tag { color: #FFFFFF; }

/* לוחות הרקע מתחת לטקסט מעל תמונות מעמיקים ל-86 אחוז */
html.a11y-contrast .sec-bg::after,
html.a11y-contrast [class$="__scrim"] { background: var(--scrim) !important; }

/* התמונות עצמן מתעמעמות, כדי שהטקסט ישלוט */
html.a11y-contrast .sec-bg img { opacity: .35; }

html.a11y-contrast .tool-modal__panel,
html.a11y-contrast .a11y-panel__box { background: #000; border-color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   60. דף משפטי: הצהרת נגישות
   ========================================================================== */

.legal { padding-block: var(--s-7) var(--s-6); }
.legal__back {
  display: inline-block;
  margin-block-end: var(--s-4);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__back:hover { color: var(--magenta); }

.legal__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -.02em;
  color: var(--white);
}

.legal__block { margin-block-start: var(--s-5); }
.legal__block h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.25;
  color: var(--white);
  margin-block-end: var(--s-2);
}
.legal__block p, .legal__block li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.legal__block ul { margin-block-start: var(--s-2); padding-inline-start: var(--s-3); }
.legal__block li { margin-block-start: 6px; }

/* מקומות למילוי. הסימון הוויזואלי נועד לוודא שאף בלוק לא נשכח
   לפני עלייה לאוויר. */
.legal__todo {
  padding: var(--s-2);
  border-inline-start: 3px solid var(--magenta);
  background: rgba(255, 43, 214, .07);
  color: var(--white);
}

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

html.intro-settled .hero .frame__corner,
/* העטיפה ולא רק הלוגו: אנימציית הכניסה יושבת על העטיפה, כדי
   שהכניסה והריחוף לא ינפישו את אותו מאפיין על אותו אלמנט.
   בלי השורה הזו הלוגו נעלם כשמדליקים תנועה מחדש. */
html.intro-settled .hero__logo-wrap,
html.intro-settled .hero__logo,
html.intro-settled .hero__tag,
html.intro-settled .hero__title .w,
html.intro-settled .hero__lead,
html.intro-settled .hero__sub,
html.intro-settled .hero .btn,
html.intro-settled .hero__note,
html.intro-settled .hero__cue,
html.intro-settled .hero__tag-text .char,
html.intro-settled .pain__list li,
html.intro-settled .promise__col li,
html.intro-settled .marked li,
html.intro-settled .day__list li,
html.intro-settled .deliverables__label,
html.intro-settled .deliverables__num,
html.intro-settled .promise__credibility,
html.intro-settled .section-title {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

html.intro-settled .pain__list li::before,
html.intro-settled .promise__col--after li::before,
html.intro-settled .day__list li::before,
html.intro-settled .deliverables__grid li::before {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
html.intro-settled .marked--yes li::before { opacity: 1 !important; transform: rotate(45deg) !important; }
html.intro-settled .marked--no li::before  { opacity: 1 !important; transform: rotate(-45deg) !important; }
html.intro-settled .promise__col--before li { opacity: .7 !important; }
html.intro-settled .day__track-fill { transform: scaleY(1) !important; }
html.intro-settled .section-title.is-masked::after { display: none !important; }

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

.legal__wrap {
  width: 100%;
  max-width: calc(720px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.legal--doc .legal__title { margin-block-end: var(--s-2); }

/* ---- תוכן העניינים ----
   רשימה ממוספרת אמיתית, כדי שהמספור יתאים לכותרות במסמך
   ולא יידרש לתחזק אותו ידנית בשני מקומות. */
.legal__toc {
  margin-block: var(--s-4) var(--s-6);
  padding: var(--s-3);
  border: 1px solid var(--line-2);
}
.legal__toc-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-ui);
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-block-end: var(--s-2);
}
.legal__toc ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: var(--s-3);
}
.legal__toc li {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-2);
}
.legal__toc a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.legal__toc a:hover { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.legal__toc a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

/* ---- כותרות הסעיפים ----
   scroll-margin-block-start נדרש כדי שקפיצה מתוכן העניינים לא
   תדביק את הכותרת לקצה העליון של החלון. */
.legal--doc h2 { scroll-margin-block-start: var(--s-4); }
.legal__num { color: var(--magenta); }

.legal--doc h3 {
  margin-block: var(--s-3) var(--s-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--white);
}

.legal--doc .legal__block p + p { margin-block-start: var(--s-2); }
.legal--doc .legal__block a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.legal--doc .legal__block a:hover { color: var(--magenta); }

/* ---- רשימות הגדרה: ספקי שירות וסוגי עוגיות ---- */
.legal__defs { margin-block-start: var(--s-3); }
.legal__defs dt {
  margin-block-start: var(--s-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--white);
}
.legal__defs dd {
  margin: 4px 0 0;
  padding-inline-start: var(--s-2);
  border-inline-start: 1px solid var(--line-2);
}

/* השדה היחיד שנותר למילוי בתקנון */
.legal__todo-inline {
  padding: 1px 6px;
  background: rgba(255, 43, 214, .12);
  border-block-end: 2px solid var(--magenta);
  color: var(--white);
}

.legal__updated {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line-2);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--ink-3);
}

/* מסמך קריאה: אין תנועה, גם כשהמשתמש לא ביקש reduced motion */
.legal * { animation: none !important; }

/* ==========================================================================
   63. סקשן 18: הטופס
   איחוד של שלוש שכבות שדרסו זו את זו. זהו המקום היחיד שבו הטופס
   מעוצב, ואין להוסיף מעליו שכבה רביעית.

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

.apply .container--narrow { max-width: calc(560px + var(--pad) * 2); }

.apply__box {
  position: relative;
  margin-top: var(--s-4);
  padding: 0 var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-2);
}

@media (min-width: 900px) {
  .apply__box { margin-top: var(--s-5); padding: 0 var(--s-5) var(--s-5); }
}

/* ---- כותרת הסלייט ----
   הפסים האלכסוניים הם ציטוט של לוח הסימון בצילום. הם דקורטיביים
   לחלוטין ולכן הרצועה כולה aria-hidden. */
.slate {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline: calc(var(--s-3) * -1);
  margin-block-end: var(--s-4);
  padding-inline: var(--s-3);
  border-block-end: 1px solid var(--line-2);
}
@media (min-width: 900px) {
  .slate { margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
}

.slate__stripes {
  flex: 1;
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--magenta) 0 8px,
    transparent 8px 16px
  );
  opacity: .5;
}

.slate__label {
  flex: none;
  padding-block: 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: .12em;
  color: var(--ink-2);
}

/* ---- שדה ---- */
.field { margin: 0 0 var(--s-3); padding: 0; border: 0; }

.field label,
.field legend {
  display: block;
  margin-block-end: 8px;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--white);
}

/* המספר באותה טיפוגרפיה בדיוק כמו בקיר הכלים, כדי שהדף יקרא
   כמערכת אחת ולא כאוסף רכיבים */
.field__num {
  margin-inline-end: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--magenta);
  transition: color 220ms var(--ease);
}

/* ---- קלט: קו דק, בלי מילוי ובלי פינות מעוגלות ----
   תיבות מלאות ומעוגלות היו הדבר היחיד בדף שנראה כמו טופס גנרי. */
.field input {
  width: 100%;
  padding: 10px 2px;
  /* line-height מפורש: הירושה של 1.7 מהגוף מרחיקה את השדה מהתווית
     ושוברת את הקשר הוויזואלי ביניהם */
  line-height: 1.4;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 220ms var(--ease);
}
.field input:hover { border-block-end-color: rgba(255, 255, 255, .34); }
.field input:focus {
  outline: none;
  border-block-end-color: var(--magenta);
}
/* הפוקוס מסומן בקו המג׳נטה עצמו, שעבה וברור דיו, ולכן אין צורך
   במסגרת נוספת שהייתה מתנגשת איתו */
.field input:focus-visible { outline: none; }

/* השדות הפתוחים קטנים במעט, כי הם לא חובה */
#f-portfolio, #f-stuck { font-size: .9375rem; }

.field.has-error input { border-block-end-color: #FF5C5C; }
.field.has-error .field__num { color: #FF7A7A; }

.field__error {
  margin-block-start: 4px;
  min-height: 0;
  font-size: .75rem;
  line-height: 1.4;
  color: #FF7A7A;
}

.form-error {
  margin-block-start: var(--s-2);
  font-size: .9375rem;
  color: #FF7A7A;
  text-align: center;
}

/* ---- תגיות לחיצות ----
   פינות חדות ולא גלולות. הדף כולו ב---radius של 2 פיקסלים,
   והגלולות היו החריגה היחידה. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }

.chip {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color 220ms var(--ease), color 220ms var(--ease), background 220ms var(--ease);
}
.chip:hover { border-color: rgba(255, 255, 255, .4); color: var(--white); }
.chip:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.chip[aria-checked="true"] {
  background: rgba(255, 43, 214, .12);
  border-color: var(--magenta);
  color: var(--white);
}

/* ---- שליחה ---- */
.apply__form .btn { margin-block-start: var(--s-4); min-height: 52px; }

.apply__note {
  margin-block-start: var(--s-2);
  font-family: var(--font-ui);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .field input, .chip, .field__num { transition: none; }
}

/* ==========================================================================
   64. מלכודת דבש ו-Turnstile
   ========================================================================== */

/* מוסתרת מהעין ומקוראי מסך, אבל נשארת בפריסה ובמיקוד של בוטים.
   לא display:none ולא visibility:hidden, כי בוטים מזהים את אלה
   ומדלגים על השדה. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cf-turnstile {
  margin-block-start: var(--s-3);
  display: flex;
  justify-content: center;
  min-height: 65px;
}

/* ==========================================================================
   65. דף 404
   ========================================================================== */

.notfound {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--s-4);
}

.notfound__inner {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: var(--s-7) var(--s-4);
  text-align: center;
}

.notfound__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--magenta);
}

.notfound__title {
  margin-block-start: var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}

.notfound__sub {
  margin-block-start: var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: balance;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

/* וריאנט קו, לפעולה משנית. הכפתור הראשי נשאר יחיד ובולט. */
.btn--line {
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  box-shadow: none;
}
.btn--line:hover { border-color: var(--magenta); }