/* ============ 08 · הבעיה היא לא חוסר ידע ============
   Figma: desktop 278:112 (1280×1174) / mobile 278:129 (390×1010).

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

.s08{
  background:var(--sky-deep);
  padding-block:var(--sec-y);
}
.s08__wrap{
  width:100%;max-width:860px;margin-inline:auto;
  text-align:center;
}

/* הקו התחתון בלבן פשוט, כדי שייראה על רקע הנייבי הכהה של הסקשן.
   הסקשן לא נושא את המחלקה section--navy ולכן צריך כלל משלו */
.s08 .uline{background-image:linear-gradient(#fff,#fff);}

/* grad-gold ברירת המחדל זהה לרקע הנייבי של הסקשן וייעלם עליו - כאן היא לבן */
.s08 .grad-gold{color:var(--cream);}

.s08__title{
  font-family:var(--f-head);font-weight:800;
  color:var(--cream);
  letter-spacing:-.015em;
}
/* שתי הכותרות - ״מה ההבדל?״ ו-״הן ידעו בדיוק כמוך״ - הוגדלו לאותו
   גודל (h1) ונקראות עכשיו כמשפט אחד רציף בשתי שורות, אחרי שהפסקה
   שביניהן הוסרה */
.s08__title--top{margin:0 0 24px;font-size:66px;line-height:76px;}
.s08__title--sub{margin:0;font-size:66px;line-height:76px;}

/* ארבע המילים. הרווח ביניהן קטן מאוד (10px) בכוונה - זה גוש אחד,
   לא ארבע הצהרות נפרדות */
.s08__known{
  margin-top:48px;
  display:flex;flex-direction:column;gap:10px;
  list-style:none;
  font-family:var(--f-head);font-weight:800;
  font-size:42px;line-height:54px;
  color:var(--cream);
  letter-spacing:-.015em;
}

/* אותה אנימציה של שאר הדף, רק מדורגת: כל מילה נוחתת בתורה. מנטרלים את
   ה-reveal של ההורה כדי שהילדים יוכלו להשתמש ב-transform בעצמם */
.s08__known.reveal{opacity:1;transform:none;}
.s08__known li{opacity:0;transform:translateY(12px);}
.s08__known.is-in li{
  opacity:1;transform:none;
  transition:opacity .45s var(--ease-out) var(--sd),
             transform .45s var(--ease-out) var(--sd);
}
.s08__known li:nth-child(1){--sd:0ms;}
.s08__known li:nth-child(2){--sd:140ms;}
.s08__known li:nth-child(3){--sd:280ms;}
.s08__known li:nth-child(4){--sd:420ms;}

.s08__ask{
  margin-top:32px;
  font-family:var(--f-body);font-weight:600;
  font-size:32px;line-height:45px;
  color:var(--cream);
}
.s08__punch{
  margin-top:40px;
  font-family:var(--f-head);font-weight:800;
  font-size:40px;line-height:53px;
  color:var(--cream);
  letter-spacing:-.01em;
}

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

/* הפאנל סוגר את הסקשן ומעביר אותנו להצעה: הוא כהה מהרקע בדרגה אחת
   בלבד, כך שהוא נקרא כהמשך ולא כקופסה זרה שהודבקה */

/* ============ mobile ============ */
@media (max-width:1199px){
  .s08{padding-block:var(--sec-y);}
  /* כל המרווחים בתוך הסקשן זהים: קודם הם רצו 28/32/36/60/44 והעין
     קראה את זה כרשלנות - הרשימה נראתה תלושה משתי השורות שמסביבה */
  .s08__title--top{margin-bottom:20px;font-size:34px;line-height:42px;}
  .s08__title--sub{font-size:34px;line-height:42px;}
  .s08__known{margin-top:40px;gap:6px;font-size:26px;line-height:34px;}
  .s08__ask{margin-top:24px;font-size:25px;line-height:36px;}
  .s08__punch{margin-top:32px;font-size:27px;line-height:37px;}
}

@media (prefers-reduced-motion:reduce){
  .s08__known li{opacity:1;transform:none;}
}


/* ---- שלושת הווים ----
   טל ביקש להשאיר את שלושת הווים מהדף המקורי. הוי הוא סימן ולא טקסט,
   ולכן הוא aria-hidden ויושב בגודל קבוע כדי שכל שלוש השורות יתחילו
   באותו ציר ולא יזוזו זו ביחס לזו */
.s08__v{
  display:inline-block;width:1.15em;
  margin-inline-end:.28em;
  color:var(--cream);font-weight:800;
  font-size:1.4em;
}