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

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

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

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

/* שאלת הפתיחה. בגודל ה-h2 האחיד של שאר הסקשנים ולא בגודל ההצהרה
   שמתחתיה: היא המסגרת, לא הפאנץ׳ */
.s08__q{
  font-family:var(--f-head);font-weight:800;
  font-size:38px;line-height:52px;
  color:#fff;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 44px;
}
.s08__title{
  font-family:var(--f-head);font-weight:800;
  /* בלי גודל משלו: יורש את --h2 מהטוקנים, כמו כל שאר כותרות
     הסקשנים. הדריסה ל-60px הפכה אותו לכותרת הגדולה בדף וגרמה לו
     להיקרא כ-h1 */
  font-size:var(--h2);line-height:var(--h2-lh);
  color:#fff;
  letter-spacing:-.015em;
}

/* ארבע המילים. הרווח ביניהן קטן מאוד (10px) בכוונה - זה גוש אחד,
   לא ארבע הצהרות נפרדות */
.s08__known{
  margin-top:60px;
  display:flex;flex-direction:column;gap:10px;
  list-style:none;
  font-family:var(--f-head);font-weight:800;
  font-size:58px;line-height:72px;
  color:var(--sky);
  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:72px;
  font-family:var(--f-body);font-weight:600;
  font-size:36px;line-height:52px;
  color:#fff;
}
.s08__punch{
  margin-top:60px;
  font-family:var(--f-head);font-weight:800;
  font-size:46px;line-height:58px;
  color:var(--sky);
  letter-spacing:-.01em;
}

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

/* ============ mobile ============ */
@media (max-width:1199px){
  .s08{padding-block:60px;}
  .s08__q{font-size:26px;line-height:36px;margin-bottom:32px;}
  .s08__known{margin-top:44px;gap:6px;font-size:36px;line-height:48px;}
  .s08__ask{margin-top:52px;font-size:27px;line-height:40px;}
  .s08__punch{margin-top:44px;font-size:32px;line-height:42px;}
}

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