/* ============ 04 · זאת אני ============
   Figma: desktop 277:522 (1280×1140) / mobile 277:545 (390×1156).

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

.s04{
  background:var(--cream);
  padding-block:80px;
}
.s04__wrap{
  /* פיגמה: תוכן 1040 בתוך 1280, כלומר 120 מכל צד. ה-.section כבר נותן
     100, והשאר נוצר מאליו מהמקסימום - כך זה נשאר נכון גם מתחת ל-1280 */
  width:100%;max-width:1040px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  /* בפיגמה כל המרווחים בעמודה זהים - 36 בדסקטופ, 30 במובייל. gap אחד
     במקום חמישה margin נפרדים, כך שהקצב לא יכול להישבר בעריכה */
  gap:36px;
  text-align:center;
}

/* עמודת הטקסט צרה מרוחב הסקשן (680 מתוך 1040): שורה ארוכה מדי קשה
   לקריאה, ובסקשן הזה כל שורה היא משפט שצריך לנחות */
.s04__col{
  width:100%;max-width:680px;
  display:flex;flex-direction:column;align-items:center;
  gap:36px;
}

.s04__title{
  font-family:var(--f-head);font-weight:700;
  font-size:34px;line-height:45px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.s04__lede{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:36px;
  color:#3e3e3e;                 /* פיגמה: #141414 ב-82% */
}
.s04__claim{
  font-family:var(--f-body);font-weight:600;
  font-size:24px;line-height:39px;
  color:var(--ink);
}
.s04__pair{
  display:flex;flex-direction:column;gap:14px;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:33px;
  color:#3e3e3e;
}
.s04__pair .em{color:var(--sky-deep);font-weight:700;}

/* ---------- שלושת ה-V ---------- */
.s04__list{
  display:flex;flex-direction:column;gap:18px;
  width:100%;
}
.s04__item{
  display:flex;justify-content:center;align-items:flex-start;
  gap:14px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:33px;
  color:#353535;                 /* פיגמה: #141414 ב-86% */
  text-align:right;
}
.s04__item svg{
  flex:none;
  width:22px;height:22px;
  margin-top:5px;                /* יישור אופטי לקו הבסיס של השורה הראשונה */
}

/* ============ mobile ============ */
@media (max-width:1199px){
  .s04{padding-block:60px;}
  .s04__wrap,.s04__col{gap:30px;}
  .s04__title{font-size:26px;line-height:34px;}
  .s04__lede{font-size:22px;line-height:36px;}
  .s04__claim{font-size:24px;line-height:39px;}
  .s04__pair{gap:12px;}
  .s04__list{gap:16px;}
}