/* ==========================================================================
   HarB Check · /hisachon-layeladim · עיצוב ייעודי לדף
   נטען אחרי styles.css (טוקנים/רכיבים משותפים) ולפני ה-JS הייעודי. כל
   הכללים כאן מוגבלים למחלקות/מזהים חדשים שאינם קיימים בדף הקיים — כדי
   שלא לדלוף לדף "עבר ביטוחי" או ל-Admin. ראו הבקשה §3.
   ========================================================================== */

/* ---------------- Hero · תמונת משפחה responsive art-direction ---------------- */
.hero-media{margin-top:22px}
.hero-media picture{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-3)}
/* v2.0.3-astra-fix (חסם 3) · <picture><source media>+<img> יחיד במקום שני
   <img> נפרדים: הדפדפן בוחר source לפני ה-fetch, כך שרק קובץ אחד יורד
   בפועל לכל breakpoint. display:none על ה-<img> הלא-רלוונטי לא מנע הורדה
   (רשת) — רק הסתיר ויזואלית — ולכן שני החיתוכים תמיד ירדו יחד. עכשיו יש
   מחלקה יחידה .hero-img על ה-<img> היחיד שקיים בפועל בזמן ריצה. */
.hero-img{display:block;width:100%;aspect-ratio:16/10;height:clamp(124px,19vh,168px);object-fit:cover;background:#0B2947}
@media (min-width:760px){
  .hero-media{margin-top:0}
  .hero-img{aspect-ratio:4/3;height:auto}
}

/* ---------------- כרטיס ליד רציף דו-שלבי (#leadFlow) · v2.0.20-child-savings-conversion-recovery ----------------
   Mobile-first: כרטיס לבן קומפקטי (כמו "השאירו פרטים ונתחיל" בפרודקשן),
   עם אותם .field/.inp/.err/.consent/.btn/.wz-body/.wz-nav/.success/
   .date-grid/.pips משותפים ל-styles.css — אין הגדרה כפולה של הרכיבים
   עצמם, רק המעטפת/הריווח הספציפיים לכרטיס הזה. מנוע יחיד: child-savings-
   flow.js. ראו CHILD-SAVINGS-TWO-STAGE.md. */
.lead-sec{padding-block:34px}
.lead-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:26px 20px 28px
}
.lead-stage{display:none}
.lead-stage.is-active{display:block;animation:stepIn .34s ease both}
.lead-card-title{font-size:19px}
.lead-card-sub{margin-top:6px;font-size:14.5px;color:var(--body)}
.lead-card .wz-body .field{margin-top:14px}
.lead-card .wz-body .consent{margin-top:14px}
#csInitialSubmit{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px}
#csInitialSubmit svg{width:18px;height:18px;flex:none}
.lead-enrich-ok{
  display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:var(--ok);margin-bottom:4px
}
.lead-enrich-ok svg{width:19px;height:19px;flex:none}
.lead-card .pips{margin-top:16px;margin-bottom:4px}
.enrich-step{display:none}
.enrich-step.is-active{display:block;animation:stepIn .32s cubic-bezier(.22,.7,.3,1) both}
.enrich-step .q{font-size:clamp(19px,5vw,23px);margin-top:18px}
@media (min-width:1000px){
  .lead-card{max-width:640px;margin-inline:auto;padding:32px 32px 34px}
  .lead-card-title{font-size:21px}
}

/* ---------------- נקודת המרה בסימולטור (#simLeadHost) · v2.0.20 ----------------
   אין מנוע טופס שני: לחיצה מזיזה את #leadFlow עצמו לתוך התיבה הזו
   (child-savings-flow.js) — ראו index.html §6. */
.sim-lead-hook{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.sim-lead-hook-text{font-size:15px;font-weight:700;color:var(--n-800);margin-bottom:12px}
.sim-lead-host{margin-top:18px}
.sim-lead-host:not([hidden]) .lead-card{box-shadow:var(--sh-2)}
.sim-lead-host[hidden]{display:none}

/* hero-grid מוגדר כ-2 עמודות ב-styles.css מ-1000px ומעלה, אך ל-.hero-copy
   בדף הזה אין עמודה שנייה (האשף גלוי בזרימת העמוד, לא בעמודת ה-hero) —
   בלי זה תיוותר עמודה שנייה ריקה. */
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1fr}
}

/* ---------------- QA ידני · Desktop oversized (Responsive-only fix) ----------------
   ללא שינוי עיצוב/שפה חזותית — רק scale/רוחב/gap ב-Desktop. תופעת-לוואי
   של הוזזת האשף למודאל (למעלה): hero-copy (ועימו תמונת ה-Hero) נמתח כעת
   לרוחב ה-container המלא (1160px), מה שהפך את כל הדף למרגיש "מוגדל".
   מ-1000px ומעלה בלבד — 768px ומטה (טאבלט/מובייל) לא נגעו בהם. */
@media (min-width:1000px){
  .hero-grid{max-width:700px;margin-inline:auto}
  .hero{padding-block:44px 56px}

  /* סימולטור: כרטיס מצומצם וממורכז. #simChart הוא SVG עם viewBox קבוע
     (300×180, savings-simulator.js — לא נגעתי בלוגיקה/בנתונים) כך שגובהו
     המוצג פרופורציוני לרוחבו המוצג בלבד: צמצום רוחב הכרטיס כאן פותר גם
     את "הגרף גבוה מדי" בלי שום שינוי בקוד היוצר את הגרף. */
  .sim{max-width:640px;margin-inline:auto}

  /* דוגמת המשפחה: קומפקטית יותר, לא משתלטת על ה-viewport. */
  .case-study{max-width:920px;margin-inline:auto}
  .case-flow{gap:8px}
}

/* ---------------- PENDING LEGAL APPROVAL badge ליד ה-consent ---------------- */
.legal-pending{
  display:inline-flex;gap:7px;align-items:center;background:#FFF7EA;border:1px solid #F0DCBB;color:var(--warn);
  border-radius:11px;padding:7px 11px;font-size:12px;font-weight:800;letter-spacing:.02em;margin-bottom:10px
}
.legal-pending svg{width:14px;height:14px;flex:none}

/* ---------------- Savings simulator ---------------- */
.sim{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh-2)}
.sim-children{display:grid;gap:14px}
.sim-child{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;background:#FCFDFF}
.sim-child-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sim-child-name{font-size:15px;font-weight:800;color:var(--n-900)}
.sim-child-remove{
  width:32px;height:32px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;
  color:var(--muted);cursor:pointer;font-size:14px
}
.sim-child-remove:hover{background:var(--bg);color:var(--err)}
.sim-field{margin-top:14px}
.sim-field:first-of-type{margin-top:0}
.sim-age-row,.sim-amount-row{display:flex;align-items:center;gap:12px}
.sim-age-row input[type="range"],.sim-amount-row input[type="range"],.sim-rate-row input[type="range"]{
  flex:1;min-width:0;accent-color:var(--b-500);height:44px
}
.sim-age-out{min-width:34px;text-align:center;font-weight:800;color:var(--n-900);background:var(--bg);border-radius:10px;padding:6px 8px;font-size:14.5px}
.sim-amount-num{display:flex;align-items:center;gap:4px;flex:none;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:0 10px;min-height:44px}
.sim-amount-num span{color:var(--muted);font-weight:700}
.sim-amount-input{width:74px;border:none;background:none;font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);min-height:42px;padding:0}
.sim-amount-input:focus{outline:none}
.sim-target-row{display:flex;gap:8px}
.sim-target-btn{
  flex:1;min-height:44px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;
  font-size:15px;font-weight:800;color:var(--n-800);cursor:pointer
}
.sim-target-btn.is-active{border-color:var(--b-500);background:var(--b-050);color:var(--b-600)}
.sim-add{
  margin-top:14px;width:100%;min-height:48px;border-radius:14px;border:1.5px dashed var(--line-2);
  background:var(--bg);color:var(--b-600);font-weight:800;font-size:15px;cursor:pointer
}
.sim-add:hover{background:#E7EEF7}
.sim-add[hidden]{display:none}

.sim-rate{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sim-rate-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.sim-rate-num{display:flex;align-items:center;gap:4px;flex:none;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;padding:0 10px;min-height:44px}
.sim-rate-num input{width:52px;border:none;background:none;font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);min-height:42px}
.sim-rate-num input:focus{outline:none}
.sim-disclosure{margin-top:10px;font-size:12.8px;line-height:1.6;color:var(--muted)}

.sim-result{margin-top:22px;padding:18px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--b-050),#fff);border:1px solid #DCE9FB}
.sim-result-main{display:flex;flex-direction:column;gap:4px}
.sim-result-label{font-size:13.5px;font-weight:700;color:var(--b-600)}
.sim-result-value{font-size:clamp(28px,7vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--n-900)}
.sim-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.sim-result-grid>div{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.sim-result-n{font-size:16.5px;font-weight:800;color:var(--n-900)}
.sim-result-grid span:last-child{font-size:12.3px;color:var(--muted);font-weight:600}

.sim-child-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.sim-child-tabs[hidden]{display:none}
.sim-child-tab{min-height:40px;padding:0 14px;border-radius:11px;border:1.5px solid var(--line-2);background:#fff;font-size:13.5px;font-weight:700;color:var(--n-700);cursor:pointer}
.sim-child-tab.is-active{border-color:var(--b-500);background:var(--b-050);color:var(--b-600)}

.sim-tabs{display:flex;gap:8px;margin-top:16px;border-bottom:1px solid var(--line)}
.sim-tabs button{
  min-height:44px;padding:0 6px;border:none;background:none;font-size:14.5px;font-weight:800;color:var(--muted);
  cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px
}
.sim-tabs button[aria-selected="true"]{color:var(--b-600);border-color:var(--b-500)}
.sim-chart-panel{margin-top:14px}
.sim-chart-panel[hidden]{display:none}
#simChart{width:100%;height:auto;display:block;max-width:100%}
.sim-table-panel{margin-top:14px;overflow-x:auto}
.sim-table-panel[hidden]{display:none}
.sim-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:320px}
.sim-table th,.sim-table td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line)}
.sim-table th{color:var(--muted);font-weight:700;font-size:12.3px}
.sim-table td:first-child,.sim-table th:first-child{text-align:start}

.sim-family{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.sim-family[hidden]{display:none}
.sim-family h3{font-size:16.5px}
.sim-family-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.sim-family-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--body);background:var(--bg);border-radius:11px;padding:9px 12px}
.sim-family-total{margin-top:12px;font-size:15px;color:var(--n-900)}
.sim-family-note{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--muted)}

.sim-cta{margin-top:22px;display:flex;justify-content:center}
.sim-cta .btn{width:100%}
@media (min-width:600px){.sim-cta .btn{width:auto;min-width:280px}}

/* ---------------- Family case study ---------------- */
.case-study{display:grid;gap:22px}
.case-media picture{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2)}
/* QA ידני · תיקון שורש (לא crop): לא הוצהר height כאן, כך ש-height="675"
   ב-HTML (attribute הנוכחות) "דלף" כ-CSS height קבוע — בעוד width:100%
   הגיב לרוחב ה-viewport. בתיבה צרה (מובייל) זה יצר תיבה גבוהה/צרה
   שגויה (למשל 337×675 ב-375px, במקום 337×189.5 לפי 16:9), ו-object-fit:
   cover "כיסה" אותה בכך שהציג רק פס אנכי צר וממורכז מהתמונה — מה שחתך
   את אחד הילדים בפועל. height:auto מבטיח שהגובה תמיד ייגזר מ-aspect-ratio
   בהתאם לרוחב בפועל, בכל breakpoint — התמונה/החיתוך המאושרים לא השתנו. */
.case-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.case-caption{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.case-flow{display:grid;gap:10px}
.case-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:15px}
.case-row b{color:var(--n-900);font-size:17px}
.case-row.is-before b{color:var(--err)}
.case-row.is-after b{color:var(--ok)}
.case-arrow{display:flex;justify-content:center;color:var(--b-500)}
.case-arrow svg{width:20px;height:20px;transform:rotate(-90deg)}
.case-split{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.case-split .case-row{flex:1 1 160px}
.case-result{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.case-result .stat-card{background:linear-gradient(160deg,var(--b-050),#fff);border:1px solid #DCE9FB;border-radius:14px;padding:14px;text-align:center}
.case-result .stat-card b{display:block;font-size:22px;font-weight:800;color:var(--n-900)}
.case-result .stat-card span{font-size:12.5px;color:var(--muted)}
.case-disclosure{margin-top:14px;font-size:12.8px;line-height:1.6;color:var(--muted)}
@media (min-width:900px){
  .case-study{grid-template-columns:1fr 1.1fr;align-items:center}
}

/* ---------------- Floating bot (CTA צף → פאנל קומפקטי → Wizard) ---------------- */
.fbot{position:fixed;inset-inline-end:auto;right:14px;left:auto;bottom:calc(78px + env(safe-area-inset-bottom));z-index:58;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fbot>*{pointer-events:auto}
@media (min-width:760px){.fbot{right:22px;bottom:22px}}

.fbot-launcher{
  width:62px;height:62px;flex:none;border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(150deg,var(--c-500),var(--b-500) 55%,var(--n-800));
  box-shadow:0 18px 36px -14px rgba(6,32,64,.82),inset 0 1px 0 rgba(255,255,255,.3);
  display:grid;place-items:center;transition:transform .2s,box-shadow .2s
}
.fbot-launcher:hover{transform:translateY(-2px)}
.fbot-launcher:focus-visible{outline:3px solid var(--c-300);outline-offset:3px}
.fbot-launcher svg{width:28px;height:28px}
.fbot.open .fbot-launcher{display:none}

.fbot-panel{
  display:none;flex-direction:column;gap:12px;padding:18px;
  /* v2.0.3-astra-fix (חסם 4) · calc(100vw - 90px) הוא האיבר הקובע ב-375px:
     מבטיח שהקצה השמאלי של הפאנל (עוגן ב-right) לא יגיע לכפתור הנגישות
     (.a11y-fab, left:14px, width:48px) — 14+48+gap כלשהו ≈ 90px משוריין
     מהצד השני. ב-84vw/320px "הרגילים" הפאנל היה נמתח עד לחפיפה איתו. */
  width:min(320px,84vw,calc(100vw - 90px));
  background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-3)
}
.fbot.open .fbot-panel{display:flex;animation:teaseIn .28s cubic-bezier(.22,.7,.3,1) both}
.fbot-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fbot-panel-title{font-size:16px;font-weight:800;color:var(--n-900);line-height:1.4}
.fbot-panel-sub{margin-top:6px;font-size:13.6px;color:var(--body);line-height:1.55}
.fbot-close{width:32px;height:32px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.fbot-close:hover{background:var(--bg)}
.fbot-actions{display:grid;gap:9px}
.fbot-actions .btn{width:100%}

/* v2.0.20-child-savings-conversion-recovery · הפאנל מריץ בתוכו את אותו
   #leadFlow (floating-bot.js מזיז את ה-DOM node עצמו לכאן) — לא מנוע שני.
   .fbot.engaged מורחב כדי שהכרטיס (שם/ת"ז/טלפון וכו') לא יידחס. */
.fbot-flow-host[hidden]{display:none}
.fbot-flow-host .lead-card{box-shadow:none;border:none;padding:0}
.fbot.engaged .fbot-panel{width:min(380px,92vw,calc(100vw - 40px));max-height:82vh;overflow-y:auto}

/* מובייל: כשה-CTA הדביק מוצג, הפאנל/הלאנצ'ר לא מתנגשים איתו (אותה מתכונת
   מיקום כמו .chat בדף הקיים). */
body.floating-bot-open .sticky-cta{transform:translateY(130%)}

/* ---------------- 4 כרטיסי יתרון · 2×2 במובייל, שורה אחת בדסקטופ ----------------
   .cards המשותף (styles.css) הוא עמודה אחת מתחת ל-760px — כאן, בדף הזה
   בלבד (#benefits), 2×2 גם במובייל (375/390/430), לפי המפרט המאושר.
   מ-760px ומעלה: לא נוגעים ב-.cards בכלל — 2 עמודות (760px) ואז 4 עמודות
   (1000px) בדיוק כמו כל דף אחר, כדי ש-#benefits (מזהה, specificity גבוה
   יותר) לא ידרוס את שורת ה-4 כרטיסים המשותפת בדסקטופ. */
#benefits .card{padding:16px 14px;border-radius:18px}
#benefits .card .ic{width:40px;height:40px;border-radius:12px;margin-bottom:10px}
#benefits .card .ic svg{width:18px;height:18px}
#benefits .card h3{font-size:17px;line-height:1.25}
#benefits .card p{margin-top:6px;font-size:13.5px;line-height:1.5}
@media (max-width:759px){
  #benefits .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  #benefits .card{padding:14px 12px;border-radius:16px}
  #benefits .card .ic{width:36px;height:36px;margin-bottom:8px}
  #benefits .card h3{font-size:15.5px}
  #benefits .card p{font-size:12.8px;line-height:1.45}
}

/* ---------------- זוהר CTA ראשי (child_savings בלבד — עיצוב ייעודי לדף זה) ----------------
   .btn.is-pulse הבסיסי (styles.css, משותף) נשאר ללא שינוי — התוספת כאן
   רק מחזקת אותו: טבעת זוהר נושמת + hover/press בולט יותר. מוגבל לגמרי
   לדף הזה (הקובץ נטען רק כאן) — אין שינוי חזותי בכל דף אחר. */
.btn-primary{transition:transform .15s ease,box-shadow .15s ease}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn.is-pulse{animation:ctaGlow 4s ease-out 1.2s infinite,ctaGlowRing 2.8s ease-in-out .3s infinite}
@keyframes ctaGlowRing{
  0%,100%{box-shadow:0 12px 26px -14px rgba(14,76,180,.95),inset 0 1px 0 rgba(255,255,255,.25),0 0 0 0 rgba(37,99,235,.28)}
  50%{box-shadow:0 14px 30px -12px rgba(14,76,180,1),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 7px rgba(37,99,235,0)}
}
@media (prefers-reduced-motion:reduce){
  .btn-primary{transition:none}
  .btn-primary:hover,.btn-primary:active{transform:none}
  .btn.is-pulse{animation:none}
}
/* v2.0.21-a11y-no-motion-parity · "עצירת אנימציות" בתפריט הנגישות
   (html.a11y-no-motion, a11y.js) חייב לכבות בדיוק את מה ש-prefers-
   reduced-motion מכבה למעלה — לא רק את ה-animation של is-pulse, אלא גם
   את ה-transition/transform של hover/press על כל .btn-primary בדף הזה. */
html.a11y-no-motion .btn-primary{transition:none}
html.a11y-no-motion .btn-primary:hover,html.a11y-no-motion .btn-primary:active{transform:none}
html.a11y-no-motion .btn.is-pulse{animation:none}