/* ============ 16 · ההצעה + הטופס ============
   Figma: desktop 279:571 (1280×800) / מובייל 279:609 (390×1354).

   הסקשן שכל הדף מוביל אליו. הוא כהה כדי שהטופס הלבן יהיה הדבר הבהיר
   ביותר במסך ברגע שמגיעים אליו - זה כל הטריק, אין כאן שום אפקט.

   סדר ה-DOM: קודם הטופס, אחר כך טל. בדסקטופ ה-grid מציב את הטופס
   בעמודה הראשונה (ימין ב-RTL) ואת טל משמאל, ובמובייל הסדר הטבעי כבר
   נכון - הטופס למעלה, טל מתחת. */

/* z-index כדי שטל יוכל לחרוג אל תוך הפוטר בלי שרקע הפוטר יכסה אותו.
   שני הסקשנים באותו כחול כהה, ולכן החריגה נראית כמו רצף אחד */
.s16{
  background:var(--card-off);
  /* מסך מלא בדיוק: זה הסקשן שסוגר את הדף, והוא צריך למלא את המסך בלי
     שיישאר מתחתיו עוד חצי מסך של כלום. אין padding למטה - הקצה התחתון
     של הסקשן הוא קו הפוטר, וזה מה שמאפשר לטל להיצמד אליו בדיוק */
  min-height:100vh;
  /* flex-end ולא center: הקצה התחתון של התוכן חייב להיות הקצה התחתון
     של הסקשן, אחרת נשאר פס ריק בין טל לפוטר. העודף נופל למעלה */
  display:flex;align-items:flex-end;
  padding-block:48px 0;
  position:relative;z-index:1;
}
.s16__wrap{
  flex:1 1 auto;
  width:100%;max-width:var(--content);margin-inline:auto;
  display:grid;
  grid-template-columns:560px 460px;   /* 560 + 60 + 460 = 1080 */
  gap:60px;
  /* stretch כדי שהעמודה של טל תקבל בדיוק את הגובה של הטופס. זה מה
     שמאפשר לעגן את תיבת ההודעה לקו התחתון של הטופס במקום לנחש גובה */
  align-items:stretch;
}

/* ---------- הטופס ---------- */
.s16__form{
  background:#fff;border-radius:var(--r-card);
  padding:36px 40px;
  /* ה-margin התחתון הוא מה שמרחיק את הטופס מקו הפוטר. הוא גם מגדיל את
     גובה השורה, ולכן העמודה של טל נמתחת עד לקצה התחתון של הסקשן - שם
     הוא נצמד לפוטר, בעוד הטופס עוצר 48 פיקסל מעליו */
  margin-bottom:48px;
  text-align:right;
}
.s16__form h2{
  font-family:var(--f-head);font-weight:800;
  font-size:32px;line-height:42px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.s16__form .s16__lede{
  margin-top:18px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--body);
}
.s16__field{margin-top:20px;display:block;}
.s16__field + .s16__field{margin-top:14px;}
.s16__field > span{
  display:block;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:28px;
  color:var(--muted);
}
/* שדה בלי מסגרת, רק קו תחתון - זה מה שמונע מהטופס להיראות כמו טופס
   של מערכת. הקו מקבל את צבע המותג ברגע שנוגעים בשדה */
/* שדות גלולה כמו הרפרנס שטל בחר: מסגרת מלאה, פינות עגולות לגמרי,
   רקע לבן. ה-placeholder הוא התווית */
.s16__field input{
  width:100%;
  margin-top:0;padding:14px 22px;
  border:1px solid #d9d9d6;
  border-radius:999px;background:#fff;
  font-family:var(--f-body);font-weight:400;
  font-size:20px;line-height:28px;
  color:var(--ink);
  direction:rtl;text-align:right;
  transition:border-color .2s var(--ease);
}
.s16__field input::placeholder{color:#9e9e9e;}
.s16__field input:focus{outline:0;border-color:var(--sky-deep);}
.s16__field input:focus-visible{outline:2px solid var(--sky-deep);outline-offset:6px;}

/* כפתור השליחה הוא רכיב ה-CTA עצמו, לא כפתור נפרד: אותו עיגול קרם, אותה
   מסילת חצים, אותו הובר. הדבר היחיד שנדרס כאן הוא הרוחב - בפיגמה הוא
   נמתח על כל הטופס, וזה גם מה שהופך אותו ליעד הגדול ביותר במסך */
.cta--send{
  width:100%;margin-top:28px;
  font-family:var(--f-head);
}
/* ״הבא״ הוא צעד ביניים, לא השליחה. מילה אחת לא צריכה את כל רוחב
   הטופס, וכפתור צר וממורכז מבדיל אותו מכפתור השליחה של השלב השני */
.s16__step[data-s="1"] .cta--send{
  width:fit-content;min-width:210px;margin-inline:auto;
}
/* חזרה לשלב הראשון. קישור טקסטואלי ולא כפתור שני: במסך אחד עם
   שני כפתורים באותו משקל אי אפשר לדעת מה הפעולה הראשית */
.s16__back{
  display:block;margin:18px auto 0;
  background:none;border:0;padding:6px 4px;cursor:pointer;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--muted);
  text-decoration:underline;text-underline-offset:4px;
}
.s16__back:hover{color:var(--ink);}
.s16__back:focus-visible{outline:2px solid var(--sky-deep);outline-offset:4px;border-radius:6px;}

.s16__fine{
  margin-top:16px;
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--muted);
  text-align:center;
}

/* ---------- טל + תיבת ההודעה ---------- */
.s16__tal{
  position:relative;
  min-height:600px;
}
/* bottom:0 והעמודה נגמרת בדיוק בקצה התחתון של הסקשן - כלומר קו החיתוך
   של טל הוא קו הפוטר עצמו. הוא לא חורג פנימה ולא תלוי באוויר מעליו */
.s16__tal img{
  position:absolute;bottom:0;right:0;
  width:460px;height:596px;object-fit:contain;object-position:bottom;
}
/* התיבה יושבת על הכתף של טל בכוונה: היא ההבטחה שלו, לא כותרת של הדף */
/* התיבה מיישרת קו תחתון עם הטופס: שני הבלוקים נגמרים באותו קו, וזה מה
   שמחזיק את הסקשן כשני עמודים ולא כשני אלמנטים שצפים בנפרד */
.s16__note{
  /* אותם 48 פיקסל של הטופס: שתי העמודות נגמרות באותו קו תחתון */
  position:absolute;bottom:48px;left:0;
  width:320px;
  background:#fff;
  border-radius:var(--r-card);
  padding:26px;
  text-align:right;
}
.s16__note h3{
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--sky-deep);
}
.s16__note ul{margin-top:14px;list-style:none;}
.s16__note li{
  padding-block:9px;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:32px;
  color:var(--ink);
}
.s16__note li:first-child{padding-top:0;}

/* ============ mobile ============ */
@media (max-width:1199px){
  /* במובייל התוכן ממילא גבוה ממסך אחד, ולכן ה-100vh הוא רק רצפה */
  .s16{padding-block:var(--sec-y) 0;}
  .s16__wrap{
    display:flex;flex-direction:column;gap:20px;
    align-items:stretch;
  }
  .s16__form{margin-bottom:32px;padding:32px 24px;}
  .s16__form h2{font-size:24px;line-height:32px;}
  .s16__form .s16__lede{margin-top:16px;font-size:22px;line-height:32px;}
  .s16__field{margin-top:28px;}
  .s16__field + .s16__field{margin-top:22px;}
  .s16__field input{font-size:19px;line-height:26px;}
  .cta--send{margin-top:28px;white-space:normal;}
  .s16__fine{margin-top:16px;}
  /* היו כאן 116 פיקסלים של נייבי ריק מעל התמונה, והכרטיס ישב מספיק
     גבוה כדי לכסות לטל את הפנים. עכשיו המסגרת בגובה התמונה עצמה
     ועוד 140 מתחתיה, הכרטיס יורד אל הקצה התחתון - וכך נשארים גלויים
     הראש והכתפיים, שזה כל הטעם בתמונה של אדם */
  .s16__tal{min-height:584px;height:auto;}
  .s16__tal img{top:auto;bottom:140px;right:0;width:342px;height:444px;}
  .s16__note{top:auto;bottom:0;left:11px;width:min(320px,100%);}
}

/* ---------- הודעת הטופס ---------- */
/* הודעה אחת מתחת לשדות, ולא בועה מרחפת ליד כל שדה: הבועה של הדפדפן
   מגיעה באנגלית ובכיוון הפוך, ולכן הטופס נושא novalidate והבדיקה היא
   שלנו. השדה עצמו נצבע באדום, וההודעה אומרת מה לתקן ולא מה נכשל */
.s16__msg{
  min-height:0;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--red);
}
.s16__msg:empty{display:none;}
.s16__field input.is-bad{
  border-color:var(--red);
  background:var(--red-tint);
}

/* ============ אישור מדיניות ============
   ריבוע מצויר ב-CSS ולא ה-checkbox המקורי: אי אפשר לעצב את המקורי בלי
   appearance:none, וברגע שמאפסים אותו מאבדים גם את סימן הוי במובייל.
   לכן ה-input האמיתי נשאר קיים, פעיל ובמסלול המקלדת, ורק שקוף ופרוס
   על כל ה-label - כך שלחיצה בכל מקום בטקסט מסמנת, וקוראי מסך מקבלים
   שדה תקני עם התווית המלאה. */
/* שאלות הסינון. fieldset ולא div כדי שקורא מסך יקריא את השאלה לפני
   התשובה. ה-reset על fieldset חובה - לדפדפן יש עליו מסגרת וריפוד משלו.
   העיגול מצויר ב-CSS ולא ב-SVG, כמו הוי של האישור */
.s16__q{
  margin-top:26px;
  border:0;padding:0;min-inline-size:0;
}
.s16__q legend{
  padding:0;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:28px;
  color:var(--muted);
}
.s16__q-opt{font-weight:400;color:#9e9e9e;}
.s16__opt{
  margin-top:12px;
  display:flex;align-items:flex-start;gap:12px;
  position:relative;cursor:pointer;
}
.s16__opt input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;
}
.s16__opt-dot{
  flex:0 0 auto;
  width:26px;height:26px;margin-top:3px;
  border:2px solid var(--line);
  border-radius:var(--r-pill);
  background:#fff;
  position:relative;
  transition:border-color .15s ease;
}
.s16__opt-dot::after{
  content:'';position:absolute;
  left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:var(--r-pill);background:var(--sky-deep);
  opacity:0;transform:scale(.4);
  transition:opacity .12s ease, transform .12s ease;
}
.s16__opt input:checked ~ .s16__opt-dot{border-color:var(--sky-deep);}
.s16__opt input:checked ~ .s16__opt-dot::after{opacity:1;transform:scale(1);}
.s16__opt input:focus-visible ~ .s16__opt-dot{outline:2px solid var(--sky-deep);outline-offset:3px;}
.s16__opt-txt{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--ink);
}
.s16__q.is-bad .s16__opt-dot{border-color:var(--red);}

.s16__consent{
  margin-top:26px;
  display:flex;align-items:flex-start;gap:12px;
  position:relative;cursor:pointer;
}
.s16__consent input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;
}
.s16__consent-box{
  flex:0 0 auto;
  width:26px;height:26px;margin-top:3px;
  border:2px solid var(--line);
  border-radius:6px;
  background:#fff;
  position:relative;
  transition:border-color .15s ease, background-color .15s ease;
}
/* הוי מצויר משני קווים מסובבים ולא מ-SVG: אלמנט אחד פחות בעמוד */
.s16__consent-box::after{
  content:'';position:absolute;
  left:7px;top:3px;width:7px;height:13px;
  border:solid #fff;border-width:0 2.6px 2.6px 0;
  transform:rotate(45deg) scale(.5);
  opacity:0;transition:opacity .12s ease, transform .12s ease;
}
.s16__consent input:checked ~ .s16__consent-box{
  background:var(--sky-deep);border-color:var(--sky-deep);
}
.s16__consent input:checked ~ .s16__consent-box::after{opacity:1;transform:rotate(45deg) scale(1);}
.s16__consent input:focus-visible ~ .s16__consent-box{outline:2px solid var(--sky-deep);outline-offset:3px;}

.s16__consent-txt{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:30px;
  color:var(--muted);
}
.s16__consent-txt a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:3px;}
.s16__consent-txt a:hover{color:var(--navy);}

/* מצב שגיאה: מסומן על ה-label כי הריבוע הנראה הוא span ולא ה-input */
.s16__consent.is-bad .s16__consent-box{border-color:var(--red);}

@media (max-width:1199px){
  .s16__q{margin-top:22px;}
  .s16__opt{gap:10px;}
  .s16__opt-dot{width:24px;height:24px;}
  .s16__consent{margin-top:22px;gap:10px;}
  .s16__consent-box{width:24px;height:24px;}
  .s16__consent-box::after{left:6px;top:3px;width:6px;height:12px;}
  .s16__consent-txt{font-size:22px;line-height:30px;}
}

/* ---------- עמודת הקופי (במקום הטופס שהיה כאן) ---------- */
/* הטופס עבר לחלון צף, ומה שנשאר בסקשן הוא ההבטחה והכפתור. אין כרטיס
   לבן: הטקסט יושב ישירות על הנייבי, כמו בכל סקשן כהה אחר בדף */
.s16__copy{
  align-self:flex-end;
  margin-bottom:48px;      /* אותו מרחק מקו הפוטר שהיה לטופס */
  text-align:right;
}
.s16__copy h2{
  font-family:var(--f-head);font-weight:800;
  font-size:var(--h2);line-height:var(--h2-lh);
  color:var(--navy);
  letter-spacing:-.01em;
}
.s16__copy .s16__lede{
  margin-top:18px;
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:34px;
  color:var(--body);
  max-width:520px;
}
.s16__copy .cta{margin-top:36px;}

@media (max-width:1199px){
  .s16__copy{margin-bottom:32px;}
  .s16__copy h2{font-size:var(--h2);line-height:var(--h2-lh);}
  .s16__copy .s16__lede{margin-top:16px;font-size:22px;line-height:32px;}
  .s16__copy .cta{margin-top:28px;}
}