/* =====================================================================
   מיזינסקי — שכבת האתר מעל גיליון המצגת
   ---------------------------------------------------------------------
   styles.css הוא עותק מדויק של המצגת ולא נוגעים בו. כל מה שצריך
   בשביל אתר יושב כאן, בקובץ נפרד שנטען אחריו. ככה, כשהמצגת
   מתעדכנת, מחליפים את styles.css ואף שינוי לא הולך לאיבוד.

   שלושה דברים בקובץ הזה:
   1. ביטול גאומטריית השקפים (גובה מסך מלא וחיתוך התוכן)
   2. האדר ופוטר של אתר
   3. עמודים משפטיים
   ===================================================================== */

/* =====================================================================
   1 · ביטול מצב שקפים
   ---------------------------------------------------------------------
   בגיליון המצגת כל סקשן נעול ל-height:100vh עם overflow:hidden, כדי
   ששקף יהיה בדיוק מסך אחד. בגלילה ארוכה זה חותך תוכן, אז מבטלים רק
   את הגאומטריה. display:flex נשאר כמו שהוא, כי הוא מה שממרכז את
   התוכן, והוא לא מזיק כשהגובה נגזר מהתוכן.
   ===================================================================== */
#site > section,
.slide,
.inv-part {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* מקצב אחיד בין סקשנים. במצגת הריווח היה 40px כי כל שקף היה ממורכז
   בתוך מסך שלם, ובגלילה רצופה זה נראה דחוס. */
#site > section { padding: 96px 0 }
.slide          { padding: 72px 0 }
.inv-part       { padding: 72px 0 }

/* הפתיח נשאר מסך מלא, זה הדבר היחיד שצריך אותו */
#site > section.hero { min-height: 100vh; padding: 0 }

/* המנועים: כל מנוע הוא שקף בפני עצמו במצגת, וכאן הם רצף */
#solution .sec-head { padding: 0 0 8px }
#solution .pillar   { padding: 56px 0 }

/* האינפוגרפיקה של מסע הלקוח.
   במצגת רוחבה נגזר מגובה המסך (100vh * יחס התמונה) כדי שתיכנס לשקף.
   בגלילה אין אילוץ גובה, אז היא נגזרת מהרוחב כמו כל תמונה. */
.jm-slide { padding: 0 }
.jm-wrap  { width: 100%; max-width: 1600px }

/* עוגנים: הניווט העליון צף, אז קפיצה לעוגן חייבת לקזז את גובהו.
   במצגת הקיזוז אופס כי לא היה ניווט. */
#site > section,
.slide,
.inv-part,
.pillar { scroll-margin-top: 84px }

/* =====================================================================
   2 · האדר
   ---------------------------------------------------------------------
   עיצוב הניווט כבר קיים בגיליון המצגת (.nav ומטה), הוא פשוט לא הופעל
   במצב שקפים. כאן רק משלימים את מה שחסר.
   ===================================================================== */
.nav-cta { text-decoration: none }

/* בפתיח הניווט שקוף לגמרי ומתמלא בגלילה, כי הפתיח כהה ממילא */
.nav:not(.scrolled) { background: transparent; border-bottom-color: transparent }

/* ---- הלוגו ----
   במצגת הוא 34 פיקסלים, קטן מהלוגו שבפוטר. הוא סימן המותג הראשון
   שרואים, אז הוא גדל ל-60. הריפוד האנכי צומצם ב-2 כדי שהסרגל
   לא יתנפח יותר מדי: 60 ועוד 24 יוצא 84 במקום 62. */
.nav-inner { padding-top: 12px; padding-bottom: 12px }
.nav .logo img { height: 60px }

/* העוגנים מקוזזים לפי גובה הסרגל החדש, אחרת קפיצה לעוגן
   נוחתת מתחת לניווט והכותרת נחתכת. */
#site > section,
.slide,
.inv-part,
.pillar { scroll-margin-top: 104px }

@media (max-width: 860px) {
  .nav .logo img { height: 46px }
  #site > section, .slide, .inv-part, .pillar { scroll-margin-top: 86px }
}

/* =====================================================================
   3 · פוטר
   ---------------------------------------------------------------------
   הפוטר של המצגת הוא שורה אחת עם תווית "כלי פנימי". אתר צריך פוטר
   מלא, אז זה נבנה כאן, בשפה של המצגת: רקע --ink, ליים להדגשה.
   ===================================================================== */
.site-foot { background: var(--ink); color: #fff; padding: 64px 0 28px }
.site-foot a { color: rgba(255,255,255,.72); transition: color .18s var(--ease) }
.site-foot a:hover { color: var(--pop) }

.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.foot-brand .logo img { height: 52px; width: auto; display: block; margin-bottom: 16px }
.foot-brand p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  max-width: 34ch;
}

.foot-col h4 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  margin-bottom: 14px;
}
.foot-col ul { list-style: none }
.foot-col li { margin-bottom: 9px }
.foot-col a { font-size: 14px }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
}
.foot-social { display: flex; gap: 10px }
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  font-size: 15px;
}
.foot-social a:hover { border-color: var(--pop); background: rgba(200,255,61,.1) }
.foot-copy { font-size: 13px; color: rgba(255,255,255,.45) }

@media (max-width: 900px) {
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr }
  .foot-bottom { justify-content: center; text-align: center }
}

/* =====================================================================
   4 · עמודים משפטיים
   ---------------------------------------------------------------------
   שלושת העמודים נלקחו מהאתר החי כמו שהם. הטיפוגרפיה כאן היא של
   המצגת, כדי שלא ייראו כמו אתר אחר.
   ===================================================================== */
.legal-wrap { padding: 148px 0 96px; background: var(--bg) }
.legal-page { max-width: 780px; margin-inline: auto }

.legal-page h1 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: 28px;
  color: var(--ink);
}
.legal-page h2 {
  font-family: 'Secular One', sans-serif;
  font-weight: 400;
  font-size: 22px;
  margin: 36px 0 12px;
  color: var(--ink);
}
.legal-page h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; color: var(--ink) }
.legal-page p,
.legal-page li { font-size: 16px; line-height: 1.8; color: var(--muted) }
.legal-page p { margin-bottom: 14px }
.legal-page ul, .legal-page ol { margin: 0 20px 18px 0 }
.legal-page li { margin-bottom: 7px }
.legal-page a { color: var(--accent); text-decoration: underline }
.legal-page strong, .legal-page b { color: var(--ink) }
.legal-page table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 15px }
.legal-page th, .legal-page td { border: 1px solid var(--line); padding: 10px 12px; text-align: right }
.legal-page th { background: var(--bg-alt); font-weight: 700; color: var(--ink) }

/* =====================================================================
   5 · טופס יצירת קשר
   ---------------------------------------------------------------------
   השדות זהים לטופס של האתר החי, כולל ה-id-ים, כדי שהמטפל הקיים
   ב-main.js יעבוד עליו בלי שינוי. העיצוב הוא של המצגת.
   ===================================================================== */
.cf-wrap {
  max-width: 720px;
  margin: 34px auto 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}

.cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.cf-wide { grid-column: 1 / -1 }

.cf-field { display: flex; flex-direction: column; gap: 7px }
.cf-field label { font-size: 14px; font-weight: 700; color: var(--ink) }

.cf-field input,
.cf-field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--txt);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cf-field textarea { resize: vertical; min-height: 108px }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.cf-field ::placeholder { color: var(--faint) }

/* מלכודת הבוטים. מוסתרת מהעין ומקוראי מסך, אבל קיימת בטופס. */
.cf-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0;
}

.cf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer }
.cf-check input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px }
.cf-check span { font-size: 14px; line-height: 1.55; color: var(--muted) }

.cf-submit {
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 30px;
  padding: 15px 28px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent) }
.cf-submit:disabled { opacity: .6; cursor: default; transform: none }

.form-result:empty { display: none }
.form-result.cf-blocked {
  margin-top: 16px; padding: 13px 16px;
  background: var(--bg-alt); border: 1px dashed var(--line);
  border-radius: var(--r-sm); font-size: 14.5px; color: var(--muted);
}

/* רגע האישור. הצלחה היא מצב ולא רצועת הודעה, כמו באתר החי. */
.form-result.cf-ok {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 200px; text-align: center;
}
.form-result.cf-ok b {
  font-family: 'Secular One', sans-serif; font-weight: 400;
  font-size: 24px; color: var(--ink);
}
.form-result.cf-ok span { font-size: 15px; color: var(--muted) }

.cf-note {
  margin-top: 16px; font-size: 13px; color: var(--faint);
  display: flex; align-items: center; gap: 7px;
}
.cf-note i { color: var(--amber) }

@media (max-width: 620px) {
  .cf-wrap { padding: 22px }
  .cf-form { grid-template-columns: 1fr }
}

/* =====================================================================
   6 · שלט הבמה
   ---------------------------------------------------------------------
   רצועה שמסמנת שזו גרסת עבודה ולא האתר. יורדת כשמפסיקים לבדוק.
   ===================================================================== */
/* הרצועה צפה, ולכן היא מכסה את תחתית כל מסך. הריפוד הזה מפנה לה
   מקום משלה, אחרת היא חותכת שורה בכל סקשן שנגמר בתחתית החלון. */
body { padding-bottom: 34px }

.staging-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 400;
  background: var(--pop);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  padding: 7px 14px;
}