/* ============ 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;
  }
  /* 8 ולא 32: רותם ביקש לצמצם משמעותית את המרווח בין הכפתור האחרון לתמונת טל */
  .s16__form{margin-bottom:8px;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:18px;}
  .s16__field + .s16__field{margin-top:14px;}
  .s16__field input{font-size:19px;line-height:26px;}
  /* צומצם עוד: כשהמקלדת עולה בפופ-אפ, פחות אוויר בין השדות לכפתור
     נותן לו סיכוי טוב יותר להישאר כולו בתוך המסגרת הנראית בלי גלילה */
  .cta--send{margin-top:10px;white-space:normal;}
  .s16__fine{margin-top:10px;}
  /* היו כאן 140 פיקסלים של נייבי ריק מעל התמונה (584 מול תמונה בגובה 444) -
     טל ביקשה לצמצם משמעותית את המרווח מהכפתור האחרון לתמונה, אז המסגרת
     עכשיו בגובה התמונה עצמה בדיוק. הכרטיס נשאר bottom:0 כמו התמונה,
     כך שהראש והכתפיים נשארים גלויים */
  .s16__tal{min-height:444px;height:auto;}
  .s16__tal img{top:auto;bottom:0;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:16px;}
  .s16__opt{gap:10px;}
  .s16__opt-dot{width:24px;height:24px;}
  .s16__consent{margin-top:10px;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;}
}