/* ============================================================
   לחיות בטוב · דף נחיתה
   שחזור של הדף הקיים, עם רספונסיביות אמיתית לנייד ולטאבלט.
   נקודות שבירה: 1024 טאבלט · 900 שבירת ההירו · 767 נייד · 400 נייד צר
   ============================================================ */

:root{
  --blue:#1E63C7;
  --purple:#7C2D96;
  --grad:linear-gradient(90deg,var(--blue) 0%,var(--purple) 100%);
  --navy-top:#1D1B4B;
  --navy-bot:#6E6096;
  --pink:#E0246C;
  --pink-d:#C21F5E;
  --indigo:#4E3191;
  --ink:#1F1D4E;
  --grey-txt:#6E6E6E;
  --grey-bg:#F1F1F1;
  --track:#E4E4E4;
  --white:#FFFFFF;
  --font:"Rubik","Heebo","Assistant","Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  direction:rtl;
  background:var(--white);
  color:var(--grey-txt);
  font-family:var(--font);
  font-size:15.5px;
  line-height:1.9;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
img{max-width:100%;height:auto;display:block;}
strong{font-weight:600;}

/* ---------- מיכלים ---------- */
.wrap{width:100%;max-width:800px;margin-inline:auto;padding-inline:20px;}
.wrap--wide{max-width:1100px;}

.sec{padding:58px 0;}
.sec--white{background:var(--white);}
.sec--grey{background:var(--grey-bg);padding-bottom:50px;}
.sec--navy{
  background:linear-gradient(180deg,var(--navy-top) 0%,var(--navy-bot) 100%);
  color:var(--white);
  padding:56px 0 66px;
}
.sec--navy h2{color:var(--white);}

/* ---------- כותרות ---------- */
h1,h2{margin:0;font-weight:700;line-height:1.35;}
h1{
  font-size:33px;font-weight:800;line-height:1.28;
  letter-spacing:-.4px;color:var(--white);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
h2{font-size:27px;text-align:center;}
.h2--indigo{color:var(--indigo);margin-top:34px;line-height:1.4;}
.h2--dark{color:#111111;margin-top:16px;font-size:26px;line-height:1.4;}
.sec--navy h2{font-size:28px;}

.body{margin-top:18px;text-align:center;}
.body p{font-size:15.5px;line-height:1.9;}

/* ---------- כפתור ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pink);color:var(--white);
  font-family:var(--font);font-size:18px;font-weight:600;
  padding:17px 40px;border:0;border-radius:40px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 4px 14px rgba(224,36,108,.28);
  transition:transform .16s ease,background-color .2s ease;
}
.btn:hover{background:var(--pink-d);transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.btn svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto;}
.btn--center{display:inline-flex;margin:30px auto 0;}
.sec .wrap > .btn--center,
.sec .wrap > a.btn--center{display:flex;width:max-content;max-width:100%;}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{
  background:var(--grad);
  padding:64px 0 60px;
  color:var(--white);
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.hero__text{text-align:center;}
.hero__lead{
  margin-top:22px;
  text-align:right;
  font-size:15.5px;
  line-height:1.85;
  color:var(--white);
}
.hero__vol{margin-top:24px;}
.hero__vol p{
  margin:0;font-weight:500;line-height:1.9;
  /* שורה אחת לכל משפט, גם במסך צר. הגופן מתכווץ בדיוק כמה
     שצריך כדי להיכנס, במקום שהמשפט יישבר לשתיים. */
  white-space:nowrap;
  font-size:min(15px, calc((100vw - 44px) / 25.5));
}
.hero__note{
  margin-top:12px;font-size:13.5px;
  color:rgba(255,255,255,.85);
}
.hero .btn{margin-top:26px;}

/* ---------- בר התקדמות ---------- */
.progress{margin-top:24px;}
.progress__title{
  font-size:16px;font-weight:600;color:var(--white);
  margin-bottom:8px;
}
.progress__track{
  width:100%;height:30px;background:var(--track);
  overflow:hidden;
}
.progress__fill{
  height:100%;background:var(--pink);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;
  color:var(--white);font-size:14.5px;line-height:1;
  white-space:nowrap;
}
.progress__fill strong{font-weight:600;}
.progress__fill span{font-weight:400;opacity:.95;}

/* ============================================================
   רצועות גרדיאנט
   ============================================================ */
.band{
  background:var(--grad);
  color:var(--white);
  border-radius:10px;
  padding:16px 18px;
  text-align:center;
}
.band p{margin:0;font-size:15.5px;line-height:1.6;}
.band__strong{font-weight:600;}
.band--promise{
  margin-top:36px;
  background:linear-gradient(90deg,#4C3A7A 0%,#1D1B4B 100%);
}

/* ============================================================
   2 · הקרב שאחרי הקרב
   ============================================================ */
.sec--navy .lead-strong{
  margin-top:18px;text-align:center;
  font-size:16.5px;font-weight:600;line-height:1.7;color:var(--white);
}
.sec--navy .lead-soft{margin-top:10px;text-align:center;}
.sec--navy .lead-soft p{
  margin:0 0 6px;font-size:15.5px;line-height:1.9;
  color:rgba(255,255,255,.92);
}

/* ============================================================
   3 · רשת עיתונות
   ============================================================ */
.press{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:36px;
  /* בלי זה הרשת מותחת כל כרטיס לגובה של הגבוה ביותר,
     ומתחת לכתבות הנמוכות נפתח שטח לבן ריק */
  align-items:start;
}

/* ============================================================
   5 · פוטר
   ============================================================ */
.foot__text{
  margin-top:22px;text-align:center;
  font-size:14.5px;font-weight:600;line-height:1.95;color:var(--ink);
}
.rights{background:var(--grey-bg);padding-bottom:26px;}
.rights p{
  margin:0;text-align:center;
  font-size:13px;line-height:1.7;color:#8A8A8A;
}

/* ============================================================
   מצייני מקום לתמונות.
   הקופסה האפורה נראית רק כל עוד אין קובץ. ברגע שהתמונה
   האמיתית נטענת היא מכסה אותה, וכשאין קובץ ה-img נמחק
   ונשארת קופסה מסודרת עם שם התמונה במקום אייקון שבור.
   ============================================================ */
.ph{
  position:relative;width:100%;
  background:repeating-linear-gradient(135deg,#F2F2F2 0 14px,#E9E9E9 14px 28px);
  border:1px solid #E0E0E0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  position:absolute;
  font-size:12.5px;font-weight:600;letter-spacing:1px;color:#9A9A9A;
  background:rgba(255,255,255,.88);
  border:1px solid #DDD;padding:9px 16px;
  pointer-events:none;
}
.ph img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
}
/* יחסי הקופסאות נשמרים תמיד, גם עם תמונה וגם בלעדיה,
   כדי שהפריסה לא תזוז בין מצב ריק למצב מלא */
.ph--portrait{aspect-ratio:4/5;}
.ph--portrait img{object-fit:cover;}          /* פורטרט אפשר לחתוך */
.ph--article{aspect-ratio:16/10;margin-top:34px;}
.ph--clip{aspect-ratio:4/3;}
.ph--article img,.ph--clip img,.ph--logo img{object-fit:contain;}  /* כתבות ולוגו לעולם לא */
.ph--logo{aspect-ratio:16/5;max-width:600px;margin-inline:auto;}
.ph--logo-sm{aspect-ratio:16/5;max-width:260px;margin-top:30px;}

/* ברגע שיש קובץ תמונה, ההצללה והתווית נעלמות, והמסגרת
   מוותרת על היחס הקבוע ומקבלת את היחס של התמונה עצמה.
   בלי זה כל תמונה שהיחס שלה שונה מהמסגרת מקבלת פסים ריקים. */
.ph:has(img)::after{display:none;}
.ph:has(img){
  background:var(--white);border-color:#EEEEEE;
  aspect-ratio:auto;
}
.ph:has(img) img{position:static;width:100%;height:auto;}
.ph--logo:has(img){border:0;}

/* ============================================================
   בר דביק לנייד. מוסתר לגמרי בדסקטופ ובטאבלט.
   ============================================================ */
.sticky{display:none;}

/* ============================================================
   טאבלט · עד 1024
   ============================================================ */
@media(max-width:1024px){
  .sec{padding:46px 0;}
  .sec--navy{padding:46px 0 54px;}
  .hero{padding:52px 0 48px;}
  .wrap{padding-inline:24px;}
  h1{font-size:27px;}
  h2{font-size:25px;}
  .sec--navy h2{font-size:26px;}
  .h2--dark{font-size:24px;}
  .hero__grid{gap:32px;}
  .band{padding:14px 14px;}
}

/* ============================================================
   שבירת ההירו לעמודה אחת · עד 900
   הכותרת, הבר והכפתור קודם. התמונה יורדת מתחתיהם,
   כמו בדף הישן, כדי שהקריאה לפעולה לא תידחף מתחת לקיפול.
   ============================================================ */
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:24px;}
  /* התמונה שהועלתה ריבועית, אז המסגרת ריבועית ושום דבר לא נחתך */
  .ph--portrait{aspect-ratio:1/1;}
  .hero__lead{text-align:center;}
  .press{grid-template-columns:1fr;gap:16px;}
}

/* ============================================================
   נייד · עד 767
   ============================================================ */
@media(max-width:767px){
  body{font-size:15px;}
  .wrap{padding-inline:18px;}
  .sec{padding:34px 0;}
  .sec--grey{padding-bottom:32px;}
  .sec--navy{padding:34px 0 40px;}
  .hero{padding:36px 0 40px;}

  h1{font-size:23px;line-height:1.4;}
  h2{font-size:21px;}
  .sec--navy h2{font-size:22px;}
  .h2--indigo{font-size:21px;margin-top:28px;}
  .h2--dark{font-size:21px;}
  .body p,.hero__lead{font-size:14.5px;}

  .btn{font-size:16.5px;padding:15px 26px;width:100%;}
  .btn--center{margin-top:26px;}
  .sec .wrap > .btn--center,
  .sec .wrap > a.btn--center{width:100%;}

  .progress__title{font-size:14.5px;}
  .progress__track{height:28px;}
  .progress__fill{font-size:13px;padding:0 8px;}

  .band{padding:14px 14px;border-radius:8px;}
  .band p{font-size:14px;line-height:1.55;}
  .band--promise{margin-top:28px;}

  .ph--article{margin-top:26px;}
  .ph::after{font-size:11.5px;padding:7px 12px;}
  .ph--logo-sm{margin-top:24px;}
  .press{margin-top:26px;}

  .foot__text{font-size:13.5px;}
  .rights p{font-size:12px;}

  /* בר דביק */
  .sticky{
    display:block;position:fixed;inset-inline:0;bottom:0;z-index:50;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);
    border-top:1px solid #E4E4E4;
  }
  .sticky .btn{
    width:100%;padding:14px 18px;font-size:16.5px;
    box-shadow:none;
  }
  /* מרווח כדי שהבר לא יכסה את שורת הזכויות */
  .rights{padding-bottom:calc(26px + 74px);}
}

/* ============================================================
   נייד צר · עד 400
   ============================================================ */
@media(max-width:400px){
  .wrap{padding-inline:15px;}
  h1{font-size:21px;}
  .btn{font-size:15.5px;padding:14px 18px;}
  .progress__fill{font-size:12px;padding:0 6px;}
  .progress__fill span{display:none;}   /* אין מקום לשניהם, המספר חשוב יותר */
}

/* ============================================================
   פופ-אפ התרומה
   ============================================================ */
body.is-locked{overflow:hidden;}

.modal{position:fixed;inset:0;z-index:100;display:flex;}
.modal[hidden]{display:none;}
.modal__scrim{
  position:absolute;inset:0;background:rgba(16,12,34,.62);
  backdrop-filter:blur(2px);
}
.modal__box{
  position:relative;z-index:1;
  width:100%;max-width:560px;
  margin:auto;
  background:var(--white);
  border-radius:14px;
  padding:30px 30px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.modal__box{animation:none;}}

.modal__x{
  position:absolute;inset-inline-end:14px;inset-block-start:12px;
  width:38px;height:38px;
  background:none;border:0;border-radius:50%;
  font-size:28px;line-height:1;color:#9A9A9A;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal__x:hover{background:#F2F2F2;color:#333;}
.modal__x:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}

.modal__title{
  margin:0 44px 22px 0;
  font-size:20px;font-weight:600;line-height:1.45;
  color:#111;text-align:right;
}

/* ---------- מדרגות הסכום ---------- */
/* ---------- שדות ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block;margin-bottom:6px;
  font-size:14px;font-weight:500;color:#333;
}
.field .opt{font-weight:400;color:#A0A0A0;font-size:12.5px;}
.field input,.field textarea{
  width:100%;
  direction:rtl;          /* כרום כופה LTR על type=tel, זה מחזיר אותו */
  font-family:var(--font);font-size:16px;   /* 16 מונע זום אוטומטי ב-iOS */
  color:#111;background:var(--white);
  border:1.5px solid #E2E2E2;border-radius:9px;
  padding:12px 14px;
  transition:border-color .15s ease;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.6;}
.field input::placeholder,.field textarea::placeholder{color:#B4B4B4;}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--purple);
}
.field input.is-bad,.field textarea.is-bad{border-color:#D64545;}
.hint{margin:6px 0 0;font-size:12.5px;color:#9A9A9A;line-height:1.5;}
.err{margin:6px 0 0;font-size:12.5px;color:#D64545;line-height:1.5;min-height:0;}
.err:empty{display:none;}

/* ---------- תיבת בחירה ---------- */
[hidden]{display:none !important;}

.selectwrap{position:relative;}
.selectwrap select{
  width:100%;
  font-family:var(--font);font-size:16px;   /* 16 מונע זום אוטומטי ב-iOS */
  color:#111;background:var(--white);
  border:1.5px solid #E2E2E2;border-radius:9px;
  padding:12px 14px;padding-left:42px;      /* מקום לחץ */
  appearance:none;-webkit-appearance:none;
  cursor:pointer;line-height:1.4;
  transition:border-color .15s ease;
}
.selectwrap select:focus{outline:none;border-color:var(--purple);}
.selectwrap select.is-bad{border-color:#D64545;}
.selectwrap__arrow{
  position:absolute;top:50%;left:13px;transform:translateY(-50%);
  width:20px;height:20px;fill:#9A9A9A;pointer-events:none;
}

/* ---------- שדה סכום חופשי ----------
   בלי חיצי מספר, שלא ידחפו את הספרות ויישרו אותן לא נכון ב-RTL */
#f-custom::-webkit-outer-spin-button,
#f-custom::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#f-custom{-moz-appearance:textfield;}

/* ---------- הסכמה ---------- */
.check{
  display:flex;align-items:flex-start;gap:9px;
  margin:4px 0 0;font-size:13.5px;line-height:1.6;color:#555;cursor:pointer;
}
.check input{
  width:19px;height:19px;margin:2px 0 0;flex:0 0 auto;
  accent-color:var(--pink);cursor:pointer;
}
.check a{color:var(--purple);}

/* ---------- שליחה ---------- */
.btn--submit{
  width:100%;margin-top:20px;
  border-radius:10px;padding:16px 20px;font-size:17px;
}
.btn--submit:disabled{opacity:.7;cursor:default;transform:none;}
.modal__note{
  margin:12px 0 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:#9A9A9A;
}

/* ---------- פוטר הפופ-אפ ---------- */
.modal__foot{
  margin-top:22px;padding-top:18px;border-top:1px solid #EEE;
  text-align:center;
}
.modal__foot .ph--logo-sm{max-width:150px;margin:0 auto;}
.modal__foot p{
  margin:8px 0 0;font-size:12px;color:#A8A8A8;
}

/* ---------- טאבלט ונייד ---------- */
@media(max-width:767px){
  .modal__box{
    max-width:none;margin:0;border-radius:0;
    min-height:100dvh;max-height:none;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  }
  .modal__title{font-size:18px;margin-bottom:18px;margin-inline-end:40px;}
  .btn--submit{font-size:16px;padding:15px 18px;}
}

@media(max-width:400px){
  .modal__title{font-size:17px;}
}