/* ============ עמודי המשנה ============
   מדיניות פרטיות, הצהרת נגישות, תקנון, תודה, 404.

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

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

.page{
  background:var(--cream);
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ---------- הכותרת העליונה ---------- */
.page__top{
  background:var(--navy);
  padding:24px var(--margin);
}
.page__top-in{
  width:100%;max-width:var(--content);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.page__logo{display:block;}
.page__logo img{display:block;width:88px;height:auto;}
.page__back{
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--sky-tint);
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
  border-radius:var(--r-pill);
  padding:6px 4px;
}
.page__back:hover{color:#fff;}
.page__back:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}
.page__back svg{width:20px;height:20px;flex:none;}

/* אותו קישור חוזר גם בתוך גוף העמוד של תודה ו-404, ושם הרקע קרם ולא
   נייבי. תכלת בהירה על קרם היא בערך 1.1:1 - כלומר בלתי נראית בפועל.
   כאן הוא נצבע בכחול העמוק ומקבל קו תחתון, כי בגוף העמוד הוא הפעולה
   היחידה שיש והוא צריך להיקרא ככזו */
.state .page__back{
  color:var(--sky-deep);
  text-decoration:underline;text-underline-offset:6px;
}
.state .page__back:hover{color:var(--navy);}

/* ---------- גוף העמוד ---------- */
.page__body{
  flex:1;
  /* 780 ולא 1080: שורה של טקסט משפטי שנמתחת על 1080 פיקסל קשה לעקוב
     אחריה - העין מאבדת את השורה בחזרה. 780 נותן בערך 90 תווים לשורה */
  width:100%;max-width:780px;margin-inline:auto;
  padding:64px var(--margin) 96px;
}
.page__eyebrow{
  font-family:var(--f-body);font-weight:600;
  font-size:22px;line-height:30px;
  color:var(--sky-deep);
  margin-bottom:12px;
}
.page__title{
  font-family:var(--f-head);font-weight:800;
  font-size:52px;line-height:62px;
  color:var(--navy);
  letter-spacing:-.015em;
  margin-bottom:16px;
}
.page__updated{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:32px;
  color:var(--muted);
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
}

.page__body h2{
  font-family:var(--f-head);font-weight:800;
  font-size:32px;line-height:42px;
  color:var(--ink);
  letter-spacing:-.01em;
  margin:52px 0 16px;
}
.page__body h3{
  font-family:var(--f-body);font-weight:700;
  font-size:24px;line-height:34px;
  color:var(--ink);
  margin:28px 0 10px;
}
.page__body p{
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:38px;
  color:var(--body);
  margin-bottom:18px;
}
.page__body ul,
.page__body ol{
  margin:0 0 22px;padding-inline-start:26px;
}
.page__body li{
  font-family:var(--f-body);font-weight:400;
  font-size:23px;line-height:38px;
  color:var(--body);
  margin-bottom:10px;
}
.page__body a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:4px;}
.page__body a:hover{color:var(--navy);}
.page__body a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px;}
.page__body strong{font-weight:700;color:var(--ink);}

/* ---------- קופסת פרטי קשר ---------- */
.page__box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:28px 32px;
  margin:32px 0;
}
.page__box p:last-child{margin-bottom:0;}

/* ---------- מציין מקום לפרט שממתין לטל ---------- */
/* צהוב ולא אדום: זה לא באג, זה שדה שממתין למידע. הוא חייב להיות בולט
   מספיק כדי שאי אפשר יהיה לעלות לאוויר בטעות בלי למלא אותו */
.page__todo{
  background:#fdf6e3;
  border:1px dashed #c8a94a;
  border-radius:10px;
  padding:2px 10px;
  font-weight:600;
  color:#7a5f12;
}

/* ---------- הפוטר של עמודי המשנה ---------- */
.page__foot{
  background:var(--navy);
  padding:40px var(--margin);
}
.page__foot-in{
  width:100%;max-width:var(--content);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;
}
.page__foot ul{display:flex;flex-wrap:wrap;gap:28px;list-style:none;}
.page__foot a{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:32px;
  color:#ccccc9;text-decoration:none;
}
.page__foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.page__foot a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px;}
.page__foot p{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:32px;
  color:#b8b8b5;
}

/* ============ עמודי תודה ו-404 ============
   שניהם עמודים שמגיעים אליהם בלי כוונה - אחד אחרי פעולה, אחד אחרי
   טעות - ולכן שניהם ממורכזים אנכית ובנויים סביב משפט אחד וכפתור אחד */
/* הלוגו של דף התודה - אותו גודל ואותו גובה בדיוק כמו בהירו של דף הנחיתה
   (166 ברוחב ב-48 מלמעלה בדסקטופ, 133 ב-19 במובייל), רק ממורכז במקום
   בצד. דף התודה מרוכז לכל אורכו ולוגו בצד היה נראה תלוש ממנו */
.ty__brand{display:flex;justify-content:center;padding-top:48px;}
.ty__brand a{display:block;width:166px;}
.ty__brand img{display:block;width:100%;height:auto;}

.state{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:80px var(--margin) 96px;
}
.state__in{width:100%;max-width:720px;}
.state__mark{
  width:88px;height:88px;border-radius:999px;
  background:var(--sky-tint);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;
}
.state__mark svg{width:44px;height:44px;}
.state__title{
  font-family:var(--f-head);font-weight:800;
  font-size:52px;line-height:62px;
  color:var(--navy);
  letter-spacing:-.015em;
  margin-bottom:18px;
}
.state__lede{
  font-family:var(--f-body);font-weight:400;
  font-size:26px;line-height:42px;
  color:var(--body);
  margin-bottom:36px;
}

/* ---------- שלבי ההמשך בעמוד התודה ---------- */
.steps{
  list-style:none;
  display:flex;flex-direction:column;gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  text-align:right;
  margin-bottom:40px;
  overflow:hidden;
}
.steps li{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px 28px;
}
.steps li + li{border-top:1px solid var(--line);}
.steps__n{
  flex:none;
  width:40px;height:40px;border-radius:999px;
  background:var(--sky-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-head);font-weight:800;font-size:22px;
}
.steps__t{
  font-family:var(--f-body);font-weight:700;
  font-size:24px;line-height:32px;
  color:var(--ink);
  margin-bottom:4px;
}
.steps__d{
  font-family:var(--f-body);font-weight:400;
  font-size:22px;line-height:32px;
  color:var(--body);
}

/* ---------- מקום לסרטון בעמוד התודה ---------- */
/* עדיין לא הוחלט אם טל מצלם סרטון כאן. המסגרת קיימת ומוסתרת; ברגע
   שיהיה סרטון מסירים את hidden ומכניסים את המזהה */
.state__video{
  width:100%;aspect-ratio:16 / 9;
  border-radius:var(--r-media);
  overflow:hidden;
  background:var(--placeholder-dark);
  margin-bottom:36px;
}
.state__video iframe{width:100%;height:100%;border:0;display:block;}

/* ============ mobile ============ */
@media (max-width:1199px){
  .page__top{padding:18px 24px;}
  .page__logo img{width:72px;}
  .page__back{font-size:22px;}
  .page__body{padding:44px 24px 72px;}
  .page__title{font-size:36px;line-height:46px;}
  .page__body h2{font-size:26px;line-height:36px;margin:40px 0 12px;}
  .page__body h3{font-size:23px;line-height:32px;}
  .page__body p,
  .page__body li{font-size:22px;line-height:36px;}
  .page__updated{font-size:22px;padding-bottom:24px;margin-bottom:34px;}
  .page__box{padding:22px 20px;}
  .page__foot{padding:32px 24px;}
  .page__foot-in{flex-direction:column;align-items:flex-start;gap:18px;}
  .page__foot ul{flex-direction:column;gap:14px;}

  .ty__brand{padding-top:19px;}
  .ty__brand a{width:133px;}
  .state{padding:60px 24px 72px;}
  .state__title{font-size:36px;line-height:46px;}
  .state__lede{font-size:23px;line-height:36px;}
  .state__mark{width:72px;height:72px;margin-bottom:22px;}
  .state__mark svg{width:36px;height:36px;}
  .steps li{padding:20px;gap:14px;}
  .steps__n{width:36px;height:36px;font-size:22px;}
  .steps__t{font-size:23px;line-height:32px;}
  .steps__d{font-size:22px;line-height:32px;}
}

/* ============ דף תודה: מסך פתיחה עם הסרטון ============
   סקשן בגובה מסך מלא על הנייבי. הוא נושא את כל מה שצריך כדי שהגולשת
   תלחץ פליי, ורק את זה: לוגו, אישור שהפרטים נקלטו, וסרטון.
   100svh ולא 100vh - באייפון 100vh מודד את החלון בלי סרגל הכתובות של
   ספארי, כלומר גבוה יותר מהשטח שנראה בפועל, והסרטון נחתך מלמטה.
   min-height ולא height כדי שבמסך נמוך מאוד התוכן יגלוש ולא ייחתך. */
.tyv{
  min-height:100svh;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  padding:32px var(--margin) 48px;
  box-sizing:border-box;
}
.tyv__in{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;}

/* הלוגו כאן יושב בתוך פלקס ולא בראש העמוד, ולכן מאפס את הריפוד
   שהמחלקה נושאת בשאר העמודים */
.tyv .ty__brand{padding-top:0;margin-bottom:28px;}

.tyv .state__mark{margin-bottom:20px;}

.tyv__title{
  font-family:var(--f-head);font-weight:800;
  color:var(--cream);
  font-size:44px;line-height:54px;
  text-align:center;text-wrap:balance;
  margin:0 0 28px;
}

/* aspect-ratio על העוטף ולא על ה-div של הנגן: כך גובה הסקשן מחושב
   בזמן הרינדור הראשון, לפני שהסקריפט החיצוני של Voomly בכלל נטען,
   ואין קפיצת לייאאוט כשהנגן מופיע. */
.tyv__video{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--r-media);
  overflow:hidden;
  background:#1a2340;
}
.tyv__video .voomly-embed{width:100%;height:100%;border-radius:0;}

/* הסקשן השני חוזר לקרם. הוי כבר הופיע למעלה ולכן לא חוזר כאן. */
.tyv + .state{padding-top:72px;}

@media (max-width:767px){
  .tyv{padding:24px var(--margin) 36px;}
  .tyv .ty__brand{margin-bottom:22px;}
  .tyv .ty__brand a{width:133px;}
  .tyv .state__mark{margin-bottom:16px;}
  .tyv__title{font-size:36px;line-height:46px;margin-bottom:22px;}
  .tyv + .state{padding-top:56px;}
}