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

/* עוטפי העמודות. בנייד הם שקופים לפריסה,
   ולכן סדר האלמנטים והמרווחים בטלפון לא זזים בכלל. */
.col{display:contents}

/* הדמות של חלק 7 נכנסת רק בגרסת המחשב */
.shoot-fig{display:none}


@media (min-width:900px){

/* ==========================================================
   1. המסגרת של הדף
   ========================================================== */
:root{
  --pad:40px;
  /* הטלפון לא גולש מהמסך גם על מסך נמוך */
  --phone-w:min(300px, 26vw, 44svh);
  --col-gap:clamp(26px, 3.4vw, 56px);
  --sec-max:1040px;

  /* הסיקווגל במחשב: כמעט ישר, ונמשך מעט מעבר לשני קצות המסך,
     ככה אין רווח בפינות ואין קיטוע בקצוות */
  --sq-h:132px;
  --sq-rot:1.3deg;
  --sq-w:106vw;
  --sq-mt:-4px;
  --sq-mb:-4px;
}

body{font-size:19px}

.sec{
  width:100%;
  max-width:var(--sec-max);
  margin-inline:auto;
  padding-block:96px;
  gap:20px;
}


/* ==========================================================
   2. סרגל ההתקדמות
   אותו קו מצויר ביד, ארוך יותר ועם פחות אוויר בקצוות.
   בלי מספרים, רק תחושה של התקדמות.
   ========================================================== */
.rail{
  left:clamp(14px, 3vw, 52px);
  /* הרוחב נשאר גדול מספיק כדי שהגובה הוא שקובע את הגודל */
  width:76px;
  height:min(92svh, 940px);
}
/* הקו נמתח יחד עם הגובה, ולכן העובי כאן קטן יותר
   וממשיך להצטייר באותו משקל על המסך */
.rail .line{stroke-width:1.1;opacity:.22}
.rail .fill{stroke-width:2}
.rail .stop .dot{stroke-width:1;r:2.9}
.rail .stop .tick{stroke-width:1.15}
/* על מסך צר יותר הסרגל נסוג אל הקצה, כדי להשאיר אוויר בינו לבין התוכן */
@media (max-width:1200px){
  .rail{left:8px;width:60px;height:min(88svh, 820px)}
}


/* ==========================================================
   3. הסיקווגל, מקצה לקצה
   ברוחב מסך גדול הזווית של הנייד נעשית מוגזמת,
   ולכן היא כמעט מתאפסת, והקו יוצא מעט מעבר לשני הצדדים.
   ========================================================== */
.squig--air{--sq-mt:38px;--sq-mb:38px}
.squig--in{--sq-h:96px;--sq-rot:.9deg;margin-top:64px;margin-bottom:64px}
.squig .sq-white{stroke-width:6}
.squig .sq-ink{stroke-width:1.8}


/* ==========================================================
   4. פריסה לרוחב
   עברית נקראת מימין, ולכן הטקסט מימין והצילום משמאל,
   באותו סדר בכל החלקים כדי שהעין תדע איפה להתחיל.
   ========================================================== */
.sec--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:var(--col-gap);
  row-gap:18px;
  justify-items:center;
}
.sec--split > .col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:520px;
}
/* הטקסט שמעל יורד עד אמצע העמודה, והטקסט שמתחת ממשיך ממנה.
   ככה כל גוש הטקסט יושב בגובה מרכז הצילום. */
.sec--split > .col--a{grid-column:1;grid-row:1;align-self:end}
.sec--split > .col--b{grid-column:1;grid-row:2;align-self:start}
.sec--split > .col--m{
  grid-column:2;grid-row:1 / span 2;
  align-self:center;
  width:auto;max-width:440px;
}
.sec--split > .col--full{
  grid-column:1 / -1;grid-row:3;
  max-width:none;
  margin-top:10px;
}

/* רוחב הטקסט גדל כדי שהשורות לא יישברו באמצע */
.sec--split .body,
.sec--split .hint,
.sec--split .bonus__lede{max-width:430px}
.sec--split .answer{max-width:420px;min-height:3.2em}
.sec--split .sum{max-width:34ch}
/* התיבה נצמדת לטקסט שבתוכה, ולכן האוויר בין הטקסט לקצה
   יוצא זהה בכל תיבות הטיפ, בלי קשר לאורך הטקסט */
.sec--split .tip--note{margin-inline:0;width:fit-content;max-width:460px}

.sec--split .phone{margin-top:0}

/* שלושת החלקים האלה מרימים את גוש הטקסט בשתי שורות,
   כדי שהוא יישב גבוה יותר מול הצילום שלצידו */
#s1 .col--a, #s1 .col--b,
#s3 .col--a, #s3 .col--b,
#s4 .col--a, #s4 .col--b{transform:translateY(-56px)}

/* רוחב תיבות הטיפ שנמדד בעורך החי (25.8.2026) */
#s1 .tip--note{width:390px;max-width:390px}
#s4 .tip--note{width:344px;max-width:344px}
#s6 .tip--note{width:392px;max-width:392px}
.sec--split .col--m .hint{max-width:100%;margin-top:2px}


/* ==========================================================
   5. גדלים
   ========================================================== */
.blob-title{font-size:54px}
.bonus__kicker{font-size:54px}

.sum{font-size:22px;padding:16px 34px 17px}
.tip{font-size:18.5px}
.tip--note{padding:24px 22px 20px}
.pill{font-size:1rem;padding:11px 20px}

/* בקרוסלה ובכפתורים העגולים כדאי שיהיה ברור שאפשר ללחוץ */
.pill,.zbtn,.dots button,.playbtn,.reveal__cue{cursor:pointer}


/* ==========================================================
   5א. הכפתורים
   אותו כתב יד ואותו גודל בכל הדף, בגודל הגדול,
   ותנועה קטנה שמזמינה אצבע.
   ========================================================== */
.btn--big,
.btn--hand,
.outro__btn{
  font-family:var(--font-head);
  font-weight:400;
  font-size:52px;
  line-height:1;
  /* כתב היד יושב גבוה בתיבת האות, ולכן יש יותר אוויר מלמעלה */
  padding:22px 42px 16px;
  min-height:0;
}
.btn__ico{width:46px}

/* מרחפים מעל, והכפתור עולה טיפה ונוטה. לוחצים, והוא שוקע. */
.btn{transition:transform .2s cubic-bezier(.34,1.2,.5,1)}
.btn:hover{transform:translateY(-4px) rotate(-1.2deg)}
.btn:active{transform:translateY(2px) rotate(0)}
.btn:disabled:hover{transform:none}

/* בזמן שהכפתור נושם מעצמו, המעבר עם העכבר מפנה לו מקום */
.btn--wake.is-live:hover{animation:none;transform:translateY(-4px) rotate(-1.2deg)}

/* הלחיצה תמיד מורגשת, גם כשהכפתור באמצע הנשימה */
.btn--wake.is-live:active{animation:none;transform:translateY(3px) rotate(0)}

/* גם הכפתורים הקטנים מגיבים */
.pill,.zbtn,.dots button{transition:transform .18s ease}
.pill:hover{transform:translateY(-2px)}
.zbtn:hover,.dots button:hover{transform:scale(1.18)}


/* ==========================================================
   6. הפתיחה
   ========================================================== */
.sec--intro{padding-block:110px}

/* הכותרת ותת הכותרת בשורה אחת. שבירות השורה של הנייד מתבטלות כאן,
   והרווח שאחרי כל שבירה הוא שמחזיק את הרווח בין המילים. */
.sec--intro .blob-intro{padding-inline:60px;padding-top:26px;padding-bottom:30px}
.sec--intro .blob-intro .title br,
.sec--intro .blob-intro .sub br,
.sec--intro .lede br{display:none}
.sec--intro{--hero-font:min(68px, 6.2vw)}
.sec--intro .blob-intro .title{font-size:var(--hero-font);white-space:nowrap}
.sec--intro .blob-intro .sub{font-size:min(25px, 2.3vw);white-space:nowrap;margin-top:6px}

/* הלוגו מציץ מהפינה הימנית של הכתם, חציו על הכתם וחציו על הרקע.
   ההזזה ימינה נגזרת מגודל הכותרת, כי הכותרת היא שקובעת את רוחב הכתם,
   וככה הלוגו נשאר על הפינה גם כשהמסך צר יותר.
   אם הכותרת משתנה, מכווננים כאן: --logo-x ימינה, --logo-drop כלפי מטה. */
.sec--intro{
  --logo-x:calc(var(--hero-font) * 3.154 + 44px);
  --logo-drop:82px;
}
/* ההזזה לצד יושבת על left, וההזזה למטה והזווית על transform.
   שלושת הערכים נמדדו בעורך החי (25.8.2026) */
.sec--intro .logo{
  width:110px;
  position:relative;
  left:var(--logo-x);
  z-index:2;
  margin-bottom:calc(var(--logo-drop) * -1);
  transform:translate(1px, 98px) rotate(9deg);
}

/* הפסקה נפרשת לרוחב, עם השורות מחוברות */
.sec--intro .lede{
  font-size:21px;
  max-width:min(1000px, 100%);
  margin-top:40px;
  line-height:1.75;
  /* מחלק את הטקסט לשורות באורך דומה במקום שורה ארוכה ושורה קצרה */
  text-wrap:balance;
}

/* הנעילה שב styles.css חזקה יותר מהכלל הכללי של הכפתורים,
   ולכן הגודל האחיד נכתב כאן שוב */
/* אוויר הכפתור נמדד בעורך החי (25.8.2026) */
.sec--intro .btn{font-size:52px;padding:14px 26px 13px;margin-top:52px}


/* ==========================================================
   7. חלק 4, גלריית היציבות
   הקרוסלה יושבת בעמודה השמאלית, עם הצצה לתמונה הבאה
   ========================================================== */
/* קרוסלה שמראה תמונה אחת שלמה בכל פעם, בלי חיתוך בצדדים,
   במסגרת גבוהה יותר, ועם חצים לשני הצדדים */
#s4 .col--m{width:100%;max-width:440px}
#s4 .carousel{width:100%;margin-inline:0;position:relative}
#s4 .carousel__track{--slide:100%;gap:0}
#s4 .slide{opacity:1;transform:none}
#s4 .slide .ph--sq{aspect-ratio:3/4}
#s4 .slide figcaption{padding-top:12px;font-size:.95rem}

/* חצים עגולים בקו יד, אחד בכל צד, מחוץ לתמונה */
.carousel__arrow{
  position:absolute;
  top:calc(50% - 26px);
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--cream);
  color:var(--ink);
  /* אותו קו דק עם הרעד הקצר של התיבה ושל עיגול הטיפ */
  border:1.8px solid var(--ink);
  filter:url(#wob-fine);
  z-index:3;
  transition:transform .18s ease;
}
.carousel__arrow:hover{transform:scale(1.12)}
.carousel__arrow--prev{inset-inline-start:-24px}
.carousel__arrow--next{inset-inline-end:-24px}
.carousel__arrow svg{width:20px;height:20px;display:block}
/* גם הציור שבפנים מתדקק, כדי שלא יהיה עבה מהעיגול */
.carousel__arrow svg path{stroke-width:2}

.dots{margin-top:18px}
.dots button{width:11px;height:11px}


/* ==========================================================
   7א. חלק 5, תיבת הטיפ
   השורות מתחברות והטקסט נפרש, כדי שהוא ישב יפה בתוך הכתם
   ========================================================== */
#s5 .tip--note br{display:none}


/* ==========================================================
   8. חלק 6, הבונוס שבסוף
   ========================================================== */
/* שתי הפתקיות זו לצד זו, כל אחת עם הטייפ שלה למעלה */
.notes{
  flex-direction:row;
  align-items:flex-start;
  gap:38px;
  max-width:660px;
  margin-top:46px;
}
.snote-wrap{flex:1 1 0;width:auto}
.snote-wrap--2{margin-top:26px}
/* פתקייה כמעט מרובעת: גובה קבוע לשתיהן, והטקסט יושב במרכז הנייר.
   השורות נשברות לבד ומתאזנות, ולכן השבירות של הנייד יורדות כאן. */
.snote{
  min-height:240px;
  display:flex;flex-direction:column;justify-content:center;
  padding:34px 30px 32px;
}
.snote__t{font-size:46px;margin-bottom:4px}
.snote__p{font-size:17.5px;margin-top:2px;text-wrap:balance}
.snote__p br{display:none}
.bonus__lede{max-width:460px;font-size:17px}


/* ==========================================================
   9. עכשיו את מצלמת
   הכותרת והציור מכוילים ביד, ולכן הם גדלים יחד כגוש אחד
   ========================================================== */
.sec--tight{padding-block:84px}

/* הציור יושב על פינת הכתם באותו יחס של הלוגו בפתיחה:
   כשלושה רבעים מגובה הכתם, נטוי 9 מעלות,
   ובולט מעט מעבר לקצה הימני ומעט מתחת לתחתית. */
#s7 .titlerow{transform:none;align-items:flex-end;gap:0;margin-block:14px}
#s7 .titlerow .blob-title{
  transform:none;
  font-size:58px;
  padding-inline:46px;
  padding-block:18px 14px;
}
#s7 .titlerow .bt-txt{transform:translate(-11px, 0)}
/* הנטייה עוברת מהציור הפנימי אל המסגרת, כדי שתהיה זהה לזו של הלוגו */
#s7 .titleico svg{transform:none}
#s7 .titleico{
  width:58px;
  align-self:flex-end;
  margin-inline-end:-41px;
  /* נמדד בעורך החי (25.8.2026) */
  transform:translate(-23px, -12px) rotate(9deg);
}
.sec--tight .body--big{max-width:520px;font-size:1.2rem;line-height:1.75}
.sec--tight .sum{font-size:24px;max-width:34ch;padding:14px 30px 15px}

/* הטקסט במרכז הגובה של הדמות */
#s7 .col--a{grid-row:1 / span 2;align-self:center}
#s7 .col--m{align-self:end}

/* הדמות נכנסת אל הרקע בדהייה רכה בתחתית, כמו בדף הנחיתה */
#s7 .shoot-fig{
  display:block;
  /* המידה והמיקום נמדדו בעורך החי (25.8.2026) */
  width:min(306px, 30vw);
  transform:translate(45px, -20px);
  height:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 100%);
}


/* ==========================================================
   10. הכרטיסייה
   הכותרת לרוחב מלא, הכרטיסייה משמאל, הטקסט והטופס מימין
   ========================================================== */
.sec--card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:var(--col-gap);
  row-gap:20px;
  justify-items:center;
}
/* הכותרת יושבת מימין מעל הטקסט, והכרטיס משמאל במרכז הגובה שלהם */
.sec--card > .blob-title{grid-column:1;grid-row:1;font-size:50px;align-self:end}
.sec--card > .col--m{
  grid-column:2;grid-row:1 / span 2;
  align-self:center;
  display:flex;flex-direction:column;align-items:center;
}
.sec--card > .col--b{
  grid-column:1;grid-row:2;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;width:100%;max-width:460px;
  align-self:start;
}
.cardshot{width:min(26vw,280px)}
.cardwrap{margin-top:0;margin-bottom:0}
.sec--card .body{max-width:430px}
.mail{max-width:400px;margin-top:14px}
.mail__ask{max-width:400px;font-size:14.5px}
.agree{max-width:360px}
.agree__t{font-size:14.5px}
.got__img{width:min(30vw,260px)}


/* ==========================================================
   11. הבונוס והתחתית
   ========================================================== */
.sec--set{padding-block:86px 34px}
.sec--set .blob-intro{padding-inline:44px}
.sec--set .blob-intro .title{font-size:70px}
.sec--set .blob-intro .sub{font-size:22px}
.sec--set .body{max-width:520px;margin-top:18px}

.acc{max-width:640px;padding-inline:30px}
/* העיגול טיפה גדול יותר על מסך רחב */
.acc summary::after{width:36px;height:36px;background-size:15px 1.8px, 1.8px 15px}
.acc[open] summary::after{background-size:15px 1.8px, 0 0}
.acc--solo{max-width:640px;margin-top:18px}
.sec--set .acc--solo{max-width:640px;margin-top:12px}
.acc summary{font-size:19px;min-height:60px}
.acc__body{font-size:17.5px}

.outro{margin-top:112px}
.outro__t{font-size:22px;max-width:560px}
.outro__s{font-size:18px;max-width:560px}
/* הכפתור לוואטסאפ, על בסיס הגודל שנמדד בעורך החי (24.8.2026) */
.outro__btn{margin-top:29px;padding:20px 32px 15px}

/* הקו הצהוב נוגע בשני קצות המסך, גם כשהסעיף עצמו ממורכז וצר */
.foot-rule{margin-inline:calc(50% - 50vw);margin-top:300px}
.outro + .foot-rule{margin-top:140px}
.foot{padding-top:8px}
.logo--sm{width:66px}
.foot__name{font-size:18px}
.foot__handle{font-size:18px}

} /* סוף גרסת המחשב */


/* ==========================================================
   מסך רחב במיוחד: רק קצת יותר אוויר, בלי לשנות את הפריסה
   ========================================================== */
@media (min-width:1500px){
  :root{--sec-max:1120px;--phone-w:min(320px, 24vw, 46svh)}
  .sec{padding-block:110px}
  /* על מסך רחב הכותרת גדלה, והלוגו הולך אחריה לבד */
  .sec--intro{--hero-font:min(84px, 5.4vw)}
  .sec--intro .logo{width:118px}
  .sec--intro .blob-intro .sub{font-size:29px}
}