/* ============================================================
   מיכל נינה כהנר — מערכת העיצוב
   ------------------------------------------------------------
   הרעיון: אתר שנושם. הרבה אוויר, טיפוגרפיה דקה, ריתמוס איטי.

   ⭐ הפלטה (גרסה 3, 06.09.2026) נגזרה מהבאנר החדש שנינה יצרה:
   אישה בקו אחד, עלים, גבעות, שמש. שמנת חמה, ירוק-טורקיז כהה,
   טרקוטה, מרווה ואפרסק. הסגול של הגרסאות הקודמות ירד לגמרי,
   כי הוא לא נמצא בבאנר ואי אפשר היה ליישב בינו לבין הטרקוטה.

   ⚠️ שמות המשתנים נשארו כפי שהיו (--plum, --violet, --lilac).
   הם היסטוריים ומתארים תפקיד ולא גוון: --plum = הרצועה הכהה,
   --violet = צבע הפעולה, --lilac = הרצועה החמה הבהירה. שינוי שמות
   היה מחייב מעבר על כל 900 השורות ועל אחד עשר העמודים בלי תמורה.

   שני מסלולים, ולכל אחד גוון מבטא משלו על אותו בסיס:
     טרקוטה (violet) = נשים והמסלול הכללי
     מרווה (teal) = בני נוער
   הכפתורים והרצועות הכהות זהים בשניהם: ירוק-טורקיז כהה עם כיתוב שמנת.

   כל צירוף טקסט-רקע נמדד ועובר 4.5:1 לפחות (WCAG AA).
   ⚠️ ירוק המרווה מהבאנר (#778672) נותן 3.48 על השמנת ולכן אינו משמש
   לטקסט. הוא יורד לגבולות ולרקעים, והטקסט לוקח את #4F6152 (5.98).
   ============================================================ */

:root{
  /* --- בסיס --- */
  --paper:#FAF2E8;      /* שמנת חמה, הרקע הראשי. הגוון של הבאנר */
  --lilac:#F6E9DC;      /* רצועה חמה בהירה, נגזרת האפרסק */
  --plum:#08363A;       /* ירוק-טורקיז כהה, רצועות כהות. לבן עליו 13.1 */
  --plum-2:#0E474B;     /* אותו גוון בהיר יותר, לשכבות */
  --ink:#1F3A38;        /* טקסט ראשי. 11.0 על שמנת, 10.2 על הרצועה החמה */
  --muted:#58645C;      /* טקסט משני. 5.6 על שמנת, 5.19 בגרוע ביותר */
  --dim:#CBDAD3;        /* טקסט משני על כהה. 9.07 על הירוק-טורקיז */
  --line:rgba(31,58,56,.14);
  --line-dark:rgba(250,242,232,.16);

  /* --- מסלול 1: נשים והמסלול הכללי --- */
  --violet:#08363A;     /* רקע כפתור: ירוק-טורקיז כהה. שמנת עליו 11.8 */
  --violet-ink:#A0472F; /* טרקוטה. 5.51 על שמנת, 4.96 בגרוע ביותר */
  --violet-soft:#F6E9DC;/* רצועה חמה רכה */
  --violet-glow:#E9B192;/* אפרסק, טקסט על הרצועה הכהה. 6.98 */

  /* --- מסלול 2: בני נוער --- */
  --teal:#08363A;     /* אותו כפתור. שני המסלולים לא נבדלים בפעולה */
  --teal-ink:#4F6152; /* מרווה כהה. 5.98 על שמנת, 5.58 בגרוע ביותר */
  --teal-soft:#E9EEE4;/* מרווה בהירה */
  --teal-glow:#A2AA98;/* מרווה, טקסט על הרצועה הכהה. 5.46 */

  /* צבע המבטא כערוצים, כדי שהצללים וטבעות הפוקוס יתחלפו יחד איתו */
  --accent-rgb:160 71 47;

  --shadow:0 1px 2px rgba(8,54,58,.05), 0 8px 30px rgba(8,54,58,.07);
  --shadow-lg:0 2px 6px rgba(8,54,58,.06), 0 24px 70px rgba(8,54,58,.11);
  --r:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1180px;
}

/* מיתוג העמוד לפי מסלול.
   עמוד מרחב נשימה מחליף את משתני הסגול בירוק-מים, וכל מה שנגזר מהם
   (כפתורים, צללים, טבעות פוקוס, הפלוס בשאלות, חצים, סימן הציטוט)
   עובר איתו. כך אין צורך במחלקת מודיפייר לכל רכיב בנפרד. */
.t-teal{
  --violet:var(--teal);
  --violet-ink:var(--teal-ink);
  --violet-soft:var(--teal-soft);
  --violet-glow:var(--teal-glow);
  --accent-rgb:79 97 82;
}
.t-teal ::selection{background:var(--teal-soft)}

/* ⚠️ overflow-x חייב לשבת גם על html. על body בלבד הוא רק מתפשט לחלון
   והדף נוחת דחוף שמאלה במובייל ב-RTL. */
html,body{overflow-x:hidden;max-width:100%}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ⚠️ משפחה אחת לכל האתר. עד 09.08 היו כאן Assistant לכותרות ו-Heebo לגוף,
   ושתיהן סאנס עבריות גיאומטריות דומות מאוד. ההבדל היה קטן מכדי להיקרא
   כהחלטה וגדול מספיק כדי להיראות כמו תקלה. עידו: "תראה כמה פונטים במקום 1".
   ההיררכיה נבנית ממשקל וגודל, לא ממשפחה. גם חוסך הורדת פונט שלם. */
body{
  font-family:'Assistant',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(16.5px,1.05vw,18.5px);
  line-height:1.95;
  color:var(--ink);
  background:var(--paper);
  direction:rtl;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ⚠️ פקדי טופס **לא** יורשים font-family מ-body. גיליון הסגנון של הדפדפן
   נותן להם Arial, ולכן כפתורי השליחה יצאו בפונט אחר מכל האתר. נתפס במדידה
   של משפחת הפונט בפועל על כל אלמנט, לא בקריאת ה-CSS. */
button,input,select,textarea{font-family:inherit}

::selection{background:var(--violet-soft);color:var(--ink)}

/* ============ מידת השורה ============
   ⛔⛔ זה היה הליקוי הגדול באתר, והוא לא נראה כמו ליקוי עיצובי אלא כמו
   "יותר מדי טקסט". פסקאות הגוף רצו ב-112 עד 136 תווים לשורה (נמדד בפועל
   ב-1180px). הטווח הקריא הוא 60 עד 75. מעליו העין מאבדת את תחילת השורה
   הבאה, וכל פסקה נקראת ככפול מאורכה. אותו טקסט בדיוק, ברוחב 66, נקרא
   בערך בחצי מהמאמץ, בלי לגעת במילה אחת.
   ⚠️ קאפ ולא רוחב קבוע. בלוקים שכבר צרים (כרטיסים, עדויות, טפסים) לא זזים,
   ולכן אפשר להחיל את זה רוחבית בלי לעבור עמוד עמוד. hero__sub ו-small
   מגדירים לעצמם מידה צרה יותר וגוברים בספציפיות. */
:root{
  --measure:66ch;        /* פסקת גוף */
  --measure-lead:54ch;   /* פסקת פתיח, גדולה יותר ולכן צרה יותר בתווים */
}

main p,
main li > span,
.step p,
.step h3{ max-width:var(--measure) }

main .lead{ max-width:var(--measure-lead) }

/* אוויר בין פסקאות. 1.05em היה צמוד מדי לגובה שורה של 1.95 */
main p + p{ margin-block-start:1.35em }

/* ============ טיפוגרפיה ============ */

h1,h2,h3,h4{
  /* הכותרות בירוק-טורקיז הכהה של הבאנר, לא בצבע הגוף.
     .band--plum ו-.foot מחזירים אותן לשמנת בסלקטור ספציפי יותר. */
  color:var(--plum);
  /* כל הכותרות בפרנק (בקשת עידו 15.09). עד עכשיו פרנק ישב מוטבע, כותרת
     כותרת, מסרגל העורך של מיכל, והאתר ערבב סריף וסאנס באותו תפקיד.
     הגוף, העיניות והטפסים נשארים ב-Assistant. */
  font-family:'Frank Ruhl Libre',Georgia,serif;
  font-weight:300;
  line-height:1.24;
  letter-spacing:-.015em;
  text-wrap:balance;
}
/* כותרת משנה בתוך טקסט רץ (הסיפור השני בעמוד הטיפול). היא פסקה שנערכת
   בעורך ולכן לא h3, אבל נראית כמו כותרת: אותו פרנק, אותה סקאלה של .d4. */
.story-title{
  font-family:'Frank Ruhl Libre',Georgia,serif;
  font-size:clamp(21px,2.2vw,27px);font-weight:400;line-height:1.35;
  color:var(--plum);letter-spacing:-.01em;text-wrap:balance;
  margin-block:1.8em .5em;
}
/* קו הפרפרים גם בין שני הסיפורים מהקליניקה (בקשת עידו 15.09), כמו בעמוד הכתיבה */
.story-title::before{
  content:"";display:block;width:100%;aspect-ratio:1400/139;
  margin-block:.4em 1.4em;
  background:url("img/butterfly.png?v=1") center/contain no-repeat;
}
@media (max-width:560px){
  .story-title::before{aspect-ratio:800/139;background-size:cover}
}
h1 strong,h2 strong,h3 strong{font-weight:600}
h1 em,h2 em,h3 em{font-style:normal;font-weight:400}

.d1{font-size:clamp(38px,6.6vw,74px);line-height:1.13}
.d2{font-size:clamp(30px,4.4vw,52px)}
.d3{font-size:clamp(25px,3.1vw,37px)}
.d4{font-size:clamp(21px,2.2vw,27px);font-weight:400;line-height:1.4}

p{text-wrap:pretty}
p + p{margin-block-start:1.05em}

.lead{
  font-size:clamp(18px,1.5vw,22.5px);
  line-height:1.85;
  font-weight:300;
  color:var(--ink);
}
.small{font-size:.86em;line-height:1.75;color:var(--muted)}

/* עינית — הכותרת הקטנטנה מעל הכותרת */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:12.5px;font-weight:500;letter-spacing:.18em;
  text-transform:none;color:var(--muted);
  margin-block-end:20px;
}
.eyebrow::before{
  content:"";width:34px;height:1px;background:currentColor;opacity:.5;flex:none;
}
.eyebrow--violet{color:var(--violet-ink)}
.eyebrow--teal{color:var(--teal-ink)}
.eyebrow--light{color:var(--dim)}
.eyebrow--center{justify-content:center}

/* ============ פריסה ============ */

.wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto}
.wrap--narrow{width:min(760px,calc(100% - 44px))}
.wrap--mid{width:min(920px,calc(100% - 44px))}

.band{padding-block:clamp(70px,9.5vw,140px);position:relative}
.band--tight{padding-block:clamp(52px,6.5vw,92px)}
.band--tint{background:var(--lilac)}
.band--plum{background:var(--plum);color:var(--paper)}
.band--plum h1,.band--plum h2,.band--plum h3{color:var(--paper)}
.band--plum .lead{color:rgba(250,242,232,.9)}
.band--plum p{color:rgba(250,242,232,.82)}
.band--violet{background:var(--violet-soft)}
.band--mint{background:var(--teal-soft)}

.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,80px);align-items:center;
}
.split--wide{grid-template-columns:1.15fr .85fr}
.split--flip>*:first-child{order:2}
/* סקציית ארגז הכלים: טור הכותרת קצר ורשימת הכלים ארוכה פי שלושה.
   במרכוז אנכי הכותרת צפה באמצע שטח ריק, לכן היא נצמדת למעלה ונשארת
   גלויה בגלילה לאורך הרשימה. במובייל (טור אחד) זה לא חל. */
@media (min-width:861px){
  .split:has(.marks){align-items:start}
  .split:has(.marks)>div:first-child{position:sticky;top:110px}
}

@media (max-width:860px){
  .split,.split--wide{grid-template-columns:1fr}
  .split--flip>*:first-child{order:0}
}

/* ============ ניווט ============ */

.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(250,242,232,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-block-end:1px solid var(--line);
}
.nav__in{
  width:min(var(--wrap),calc(100% - 44px));margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  min-height:70px;
}
.mark{
  text-decoration:none;display:flex;flex-direction:row;align-items:center;gap:12px;line-height:1.18;flex:none;
}
.mark__logo{height:50px;width:auto;object-fit:contain;flex:none;display:block}
.mark__txt{display:flex;flex-direction:column;min-width:0}
.mark b{
  font-weight:400;
  font-size:19px;letter-spacing:.02em;color:var(--ink);
}
.mark small{font-size:11.5px;letter-spacing:.13em;color:var(--muted);font-weight:300}
.foot .mark__logo{height:58px}
@media (max-width:560px){.mark__logo{height:44px}.mark b{font-size:17.5px}}

.menu{list-style:none;display:flex;align-items:center;gap:5px;margin-inline-start:auto}
.menu a{
  text-decoration:none;font-size:15.5px;font-weight:300;color:var(--ink);
  padding:9px 13px;border-radius:99px;display:block;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.menu a:hover{background:rgba(31,58,56,.055)}
.menu a[aria-current="page"]{color:var(--violet-ink);font-weight:400}
/* ⚠️ `.menu a` (0,1,1) גובר על `.btn` (0,1,0), ובלי השורה הזאת כפתור ה-CTA
   בתפריט מקבל טקסט בצבע הדיו על רקע המבטא. יחס הניגודיות שם 1.7, כלומר
   בלתי קריא. נתפס במדידה על האלמנט הנטען, לא בקריאת ה-CSS. */
.menu a.btn{color:var(--paper)}
.menu a.btn:hover{background:var(--violet)}

.burger{
  display:none;margin-inline-start:auto;
  width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.burger span{width:21px;height:1.5px;background:var(--ink);transition:.3s var(--ease);border-radius:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .menu{
    position:fixed;inset:70px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-block-end:1px solid var(--line);
    padding:10px 22px 26px;margin:0;
    max-height:calc(100dvh - 70px);overflow-y:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.32s var(--ease);
  }
  .menu.open{transform:none;opacity:1;pointer-events:auto}
  .menu a{padding:15px 4px;font-size:17px;border-block-end:1px solid var(--line);border-radius:0}
  .menu li:last-child a{border:0}
  .menu .btn{margin-block-start:16px;width:100%;justify-content:center}
}

/* ============ כפתורים ============ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:99px;
  font-size:16.5px;font-weight:400;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  background:var(--violet);color:var(--paper);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  box-shadow:0 2px 14px rgb(var(--accent-rgb) / .22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgb(var(--accent-rgb) / .3)}
.btn--teal{background:var(--teal);box-shadow:0 2px 14px rgb(63 110 107 / .22)}
.btn--teal:hover{box-shadow:0 8px 26px rgb(63 110 107 / .3)}
.btn--ink{background:var(--ink);box-shadow:0 2px 14px rgba(31,58,56,.2)}
.btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none;
}
.btn--ghost:hover{background:rgba(31,58,56,.05);box-shadow:none}
.band--plum .btn--ghost{color:var(--paper);border-color:var(--line-dark)}
.band--plum .btn--ghost:hover{background:rgba(250,242,232,.09)}
.btn--sm{padding:11px 22px;font-size:15px}
.btn--nav{padding:10px 20px;font-size:15px}

.btns{display:flex;flex-wrap:wrap;gap:13px}
.btns--center{justify-content:center}

.arrow{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-size:16px;font-weight:400;color:var(--violet-ink);
  border-block-end:1px solid currentColor;padding-block-end:2px;
  transition:gap .25s var(--ease);
}
.arrow::after{content:"←";font-size:1.05em;transition:transform .25s var(--ease)}
.arrow:hover{gap:12px}
.arrow--teal{color:var(--teal-ink)}
.arrow--light{color:var(--violet-glow)}

/* ============ ההירו ============ */

.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(50px,7vw,96px) clamp(60px,8vw,110px);
  background:
    radial-gradient(95% 70% at 94% 2%,rgba(233,177,146,.34) 0%,rgba(233,177,146,0) 62%),
    radial-gradient(80% 60% at 0% 100%,rgba(162,170,152,.18) 0%,rgba(162,170,152,0) 64%),
    var(--paper);
}
/* עמוד הנוער נוטה למרווה ולא לאפרסק. אותה שפה, טמפרטורה אחרת. */
.t-teal .hero{
  background:
    radial-gradient(95% 70% at 94% 2%,rgba(162,170,152,.30) 0%,rgba(162,170,152,0) 62%),
    radial-gradient(80% 60% at 0% 100%,rgba(233,177,146,.20) 0%,rgba(233,177,146,0) 64%),
    var(--paper);
}
.hero__in{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(34px,5vw,72px);align-items:center;
}
.hero__sub{
  font-size:clamp(18px,1.55vw,23px);line-height:1.8;color:var(--muted);
  margin-block-start:26px;max-width:34ch;
}
.hero__kicker{
  font-size:14px;letter-spacing:.16em;color:var(--muted);font-weight:400;
  margin-block-end:26px;display:block;
}

/* ⚠️ תווית הקהל. בגרסה הראשונה היא הייתה `hero__kicker`: 14px, אפור, מעל
   הכותרת, כלומר בדיוק במקום שהעין מדלגת עליו. בעמוד שכל כולו מוגדר על ידי
   הקהל שלו, ושמקבל תנועה ממומנת, **מי הקהל חייב להיות הדבר השני שרואים
   אחרי הכותרת, לא הערת שוליים.** לכן גלולה צבעונית ולא שורת טקסט. */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:99px;
  background:var(--violet-soft);color:var(--violet-ink);
  font-size:16px;font-weight:500;
  line-height:1.35;margin-block-end:26px;
  border:1px solid rgb(var(--accent-rgb) / .18);
}
.badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--violet);flex:none;
}
@media (max-width:520px){.badge{font-size:15px;padding:9px 16px}}

/* שורת ההתאמה, מיד מתחת לכותרת. מי בדיוק ואיפה, כדי שהורה יידע תוך שנייה
   אם הילד שלו בכלל בטווח. ⚠️ בצבע הדיו ולא באפור: זו שורת סינון, לא קרדיט. */
/* שורת ההבטחה של ההרצאה. שם ההרצאה מתפצל לשניים: השם בכותרת, וההבטחה
   כאן. בשורה אחת ב-d1 הוא היה נשבר לארבע שורות במובייל. */
.hero__tagline{
  margin-block-start:14px;
  font-size:clamp(21px,2.5vw,31px);font-weight:300;line-height:1.3;
  color:var(--violet-ink);text-wrap:balance;
}

.hero__line{
  margin-block-start:18px;font-size:clamp(17px,1.35vw,19.5px);
  line-height:1.6;color:var(--ink);font-weight:400;
  padding-inline-start:15px;border-inline-start:3px solid rgb(var(--accent-rgb) / .45);
}
/* פסקת הפתיח של עמוד ההרצאה. ⚠️ `.hero__sub` הרגיל הוא 23px ברוחב 34 תווים,
   וזה נכון למשפט סצנה קצר. פסקה שמתארת מה תהיה ההרצאה נשברת שם לחמש שורות
   ונראית כמו קיר. כאן מעט קטן יותר ומעט רחב יותר, ולכן שלוש שורות. */
.hero__sub--intro{
  font-size:clamp(17px,1.35vw,19.5px);line-height:1.75;
  max-width:46ch;margin-block-start:22px;
}

/* ⚠️ מודיפייר, ולא שינוי של .hero__line עצמו. בעמודי בני נוער והטיפול
   השורה הזאת היא משפט רץ, ו-display:flex היה מפרק אותו לפריטים נפרדים
   ושובר את המשפט. כאן היא רשימת עובדות סרוקה, ולכן היא flex. */
.hero__line--facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;
  line-height:1.4;
}
.hero__line--facts strong{font-weight:600}
.hero__line--facts span{display:inline-flex;align-items:center;gap:14px;color:var(--muted)}
.hero__line--facts span::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--violet);opacity:.55;flex:none;
}

/* שורת האמון. מי אני והוותק, ממש לפני הכפתורים.
   ⚠️ הורה מוסר את הילד שלו לזרה. בלי שם וּותק במסך הראשון,
   כל הקופי הרגשי מגיע ממישהי אלמונית. */
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin-block-start:26px;font-size:14.5px;color:var(--muted);
}
/* דיוקן קטן בשורת האמון. בעמוד שבו הורה מחליט אם להעביר שעה עם האישה
   הזאת, פנים בהירו שוות יותר מעוד שורת טקסט. */
.hero__trust img{
  width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:var(--shadow);
}
.hero__trust b{font-weight:500;color:var(--ink)}
.hero__trust span{display:inline-flex;align-items:center;gap:12px}
.hero__trust span::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--violet);opacity:.55;flex:none;
}
/* שורת האמון בעמוד הנוער התארכה ונשברה לשתי שורות. במסכים שיש בהם מקום
   היא נשארת אחת, ומתחת ל-760px היא חוזרת להתגלגל כדי לא לגלוש. */
.hero__trust--one{flex-wrap:wrap;white-space:normal}
@media (min-width:1140px){.hero__trust--one{flex-wrap:nowrap;white-space:nowrap}}

/* הדיוקן בעמוד "מי אני" גדל מעט, בקשת מיכל. רק בדסקטופ, כי במובייל
   הוא כבר תופס את מלוא הרוחב. */
@media (min-width:861px){
  .portrait--lg{transform:scale(1.08);transform-origin:center}
}

.hero__btns{margin-block-start:38px}

.portrait{position:relative}
.portrait img{
  width:100%;border-radius:200px 200px 26px 26px;
  aspect-ratio:1/1.14;object-fit:cover;object-position:center 22%;
  box-shadow:var(--shadow-lg);
}
/* טבעות הנשימה — המוטיב החוזר של האתר */
.rings{
  position:absolute;inset:-9% -7% auto auto;width:58%;aspect-ratio:1;
  pointer-events:none;z-index:-1;opacity:.5;
}
.rings circle{fill:none;stroke:var(--violet);stroke-width:.7}

@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  /* ⚠️ הכותרת קודמת לתמונה במובייל. כשהתמונה ראשונה היא לוקחת מסך שלם,
     והמבקרת נוחתת על פורטרט בלי מילה אחת שמסבירה איפה היא. */
  .portrait{max-width:290px;margin-inline:auto}
  .portrait img{border-radius:150px 150px 22px 22px}
  .hero__sub{max-width:none}
}

/* ============ תמונות בגוף העמוד ============ */

.photo{
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--lilac);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.photo--wide img{aspect-ratio:4/3}
.photo--pano img{aspect-ratio:16/9}
.photo--sq img{aspect-ratio:1/1}
/* ברצועה כהה המסגרת רכה יותר, אחרת הצל נבלע והתמונה נראית מודבקת */
.band--plum .photo{box-shadow:0 24px 70px rgba(0,0,0,.28)}

/* כרטיס "מי שתפגשו". דיוקן קטן וארבע שורות, לא עמוד אודות שלם */
.meet{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);
  align-items:center;
}
.meet__photo{width:clamp(140px,17vw,210px);flex:none}
.meet__photo img{border-radius:50%;aspect-ratio:1/1;object-fit:cover;
  box-shadow:var(--shadow-lg);display:block;width:100%}
@media (max-width:640px){
  .meet{grid-template-columns:1fr;gap:22px;text-align:start}
  .meet__photo{width:132px}
}

/* ============ שני המסלולים — לב האתר ============ */

.tracks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
@media (max-width:820px){.tracks{grid-template-columns:1fr}}

.track{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  --pad:clamp(30px,3.6vw,48px);
  padding:var(--pad);
  border-radius:var(--r);text-decoration:none;
  background:var(--paper);border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:var(--shadow);
}
.track:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
/* תמונת מצב רוח בראש הכרטיס, בלידה עד הקצוות.
   ⚠️ המרווח השלילי חייב להיות בדיוק --pad, ולכן הריפוד עבר למשתנה.
   .track::before (הפס בצבע המבטא) יושב מעליה וסוגר אותה למעלה. */
.track__img{
  margin:calc(var(--pad)*-1) calc(var(--pad)*-1) clamp(22px,2.4vw,30px);
  overflow:hidden;background:var(--lilac);
}
.track__img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}
.track::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:var(--violet);
}
.track--teal::before{background:var(--teal)}
.track__num{
  font-size:13px;letter-spacing:.2em;
  color:var(--violet-ink);font-weight:500;margin-block-end:16px;display:block;
}
.track--teal .track__num{color:var(--teal-ink)}
.track h3{font-size:clamp(26px,2.9vw,34px);margin-block-end:14px}
.track__for{
  font-size:15px;color:var(--muted);margin-block-end:22px;
  padding-block-end:20px;border-block-end:1px solid var(--line);
}
.track p{color:var(--muted);flex:1}
.track__go{
  margin-block-start:26px;display:inline-flex;align-items:center;gap:9px;
  font-size:16.5px;font-weight:400;color:var(--violet-ink);
}
.track--teal .track__go{color:var(--teal-ink)}
.track__go::after{content:"←";transition:transform .3s var(--ease)}
.track:hover .track__go::after{transform:translateX(-5px)}
/* טבעת נשימה דהויה בפינה */
.track__ring{
  position:absolute;inset-block-end:-30%;inset-inline-start:-14%;
  width:52%;aspect-ratio:1;pointer-events:none;opacity:.16;
}
.track__ring circle{fill:none;stroke:var(--violet);stroke-width:1}
.track--teal .track__ring circle{stroke:var(--teal)}

/* ============ ציטוט ============ */

.pull{
  font-weight:200;
  font-size:clamp(25px,3.5vw,42px);line-height:1.42;letter-spacing:-.015em;
  text-wrap:balance;
}
.pull em{font-style:normal;font-weight:400;color:var(--violet-glow)}
.band--tint .pull em,.band--violet .pull em,.band--mint .pull em{color:var(--violet-ink)}
.pull__by{
  display:block;margin-block-start:24px;
  font-size:14px;letter-spacing:.13em;color:var(--muted);
}
.band--plum .pull__by{color:var(--dim)}

/* ============ רשימת הכאבים ============ */

/* ⚠️ הרשת בנויה על מרווח של פיקסל שמראה את צבע הרקע כקו מפריד. המשמעות
   היא ש**תא ריק נראה כמו בלוק אפור שבור**, ולכן אסור להשתמש כאן ב-auto-fit:
   מספר העמודות חייב לחלק את מספר הפריטים. שש קופסאות ← שלוש, שתיים, אחת.
   ארבע קופסאות ← .pains--two. נתפס בצילום ולא בקריאת הקוד. */
/* ⛔ הקו התחתון של הרשת. הגובה יוצא שבור (למשל 536.22px), ולכן גבול של 1px
   בתחתית נוחת על חצי פיקסל מכשיר ונמרח לאפס. הקווים הפנימיים שורדים כי הם
   רווח של 1px ברקע ולא גבול. התוצאה: השורה האחרונה נראית פתוחה, וזה מה
   שמיכל דיווחה עליו (13.09.2026). 2px בתחתית שורדים את העיגול, ובשקיפות
   של 14% ההבדל בעובי לא נראה. */
.pains{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-block-end-width:2px;border-radius:var(--r);
  overflow:hidden;
}
.pains--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.pains,.pains--two{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.pains,.pains--two{grid-template-columns:1fr}}
.pains li{
  background:var(--paper);padding:clamp(24px,2.7vw,34px);
  font-size:17px;line-height:1.7;
}
.band--tint .pains li{background:var(--lilac)}
.band--mint .pains li{background:var(--teal-soft)}
.band--mint .pains{background:rgba(8,54,58,.13);border-color:rgba(8,54,58,.13)}
.pains b{
  display:block;font-weight:400;
  font-size:19.5px;color:var(--ink);margin-block-end:9px;
}
.pains span{color:var(--muted);font-size:16px}

/* ============ שלבים ============ */

.steps{list-style:none;display:grid;gap:clamp(20px,2.6vw,30px)}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,30px);
  align-items:start;
}
.step__n{
  font-weight:200;font-size:clamp(34px,4vw,54px);
  line-height:1;color:var(--violet);opacity:.4;min-width:1.6em;
}
.step--teal .step__n{color:var(--teal)}
.step h3{font-size:clamp(20px,2.1vw,25px);margin-block-end:8px;font-weight:400}
.step p{color:var(--muted)}

/* ============ סימני V ============ */

.marks{list-style:none;display:grid;gap:16px}
.marks li{
  position:relative;padding-inline-start:32px;font-size:17px;line-height:1.75;
  color:var(--muted);
}
.marks li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--violet);
}
.marks--teal li::before{border-color:var(--teal)}
.band--plum .marks li{color:rgba(250,242,232,.82)}
.band--plum .marks li::before{border-color:var(--violet-glow)}

/* ============ עובדות ============ */

.facts{
  display:grid;grid-template-columns:auto 1fr;gap:14px 22px;
  font-size:16.5px;align-items:baseline;
}
.facts dt{color:var(--muted);font-size:14.5px;letter-spacing:.05em}
.facts dd{color:var(--ink)}
.band--plum .facts dt{color:var(--dim)}
.band--plum .facts dd{color:var(--paper)}

/* ============ עדות ============ */

.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(30px,3.8vw,52px);box-shadow:var(--shadow);position:relative;
}
.band--tint .quote{background:var(--paper)}
.quote::before{
  content:"”";position:absolute;inset-block-start:6px;inset-inline-start:26px;
  font-family:'Assistant',serif;font-size:96px;line-height:1;
  color:var(--violet);opacity:.16;
}
.quote p{font-size:clamp(17.5px,1.35vw,20px);line-height:1.85;color:var(--ink)}
.quote__by{
  margin-block-start:22px;padding-block-start:20px;border-block-start:1px solid var(--line);
  font-size:14.5px;color:var(--muted);
}

/* ============ רשת עדויות ============
   ⚠️ בכוונה **לא** בטכניקת המרווח של פיקסל שמשמש כקו מפריד (כמו .pains).
   מספר העדויות משתנה, ותא ריק שם נראה כמו בלוק שבור. כאן כל כרטיס נושא
   מסגרת משלו, ולכן כל מספר פריטים נראה תקין. */
.tgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,24px);align-items:stretch;
}
.tcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,36px);box-shadow:var(--shadow);position:relative;
}
.band--tint .tcard,.band--mint .tcard,.band--violet .tcard{background:var(--paper)}
.tcard::before{
  content:"”";position:absolute;inset-block-start:2px;inset-inline-start:22px;
  font-family:'Assistant',serif;font-size:72px;line-height:1;
  color:var(--violet);opacity:.15;
}
.tcard p{font-size:16.5px;line-height:1.85;color:var(--ink)}
.tcard p + p{margin-block-start:.85em}
.tcard__by{
  margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid var(--line);
  font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;
}
.tcard__by b{font-weight:500;color:var(--violet-ink)}
.tcard__by span{opacity:.85}
/* ⛔ שורת חתימה בלי שם. ב-06.09 מחקנו אותן והן חזרו, כי העורך מכניס
   <span><br></span> כשבלוק מתרוקן, ואז נשאר קו מפריד ורווח לבן בלי טקסט.
   שני הכללים מפילים אותה ויזואלית, והיא חוזרת לבד ברגע שנכתב שם. */
.tcard__by:empty{display:none}
.tcard__by:has(> span:only-child > br:only-child){display:none}
/* כרטיס רחב, לעדות ארוכה שלא הגיוני לחתוך */
.tcard--wide{grid-column:1/-1}
@media (min-width:1000px){.tcard--wide{grid-column:span 2}}

/* ============ טופס ============ */

.form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.2vw,42px);box-shadow:var(--shadow-lg);
}
/* ⚠️ הטופס יושב לרוב בתוך רצועה כהה, אבל הרקע שלו עצמו בהיר. בלי הביטול
   הזה כללי הטקסט הבהיר של band--plum דולפים פנימה, והכותרת והתת-כותרת
   של הטופס יוצאות קרם על קרם, כלומר בלתי נראות לגמרי. */
.band--plum .form{border-color:transparent;color:var(--ink)}
.band--plum .form h1,
.band--plum .form h2,
.band--plum .form h3{color:var(--ink)}
.band--plum .form p{color:var(--muted)}
.band--plum .form .lead{color:var(--ink)}
/* טופס רזה להירו. חמישה שדות ושני צ'קבוקסים במסך הראשון נראים כמו טופס
   של רשות ממשלתית ומרתיעים. בראש העמוד מבקשים שם וטלפון בלבד, ואת שאר
   השאלות שומרים לטופס התחתון, אחרי שהמבקר כבר קרא והשתכנע. */
.form--slim{padding:clamp(22px,2.4vw,30px)}
.form--slim .form__title{font-size:clamp(19px,1.8vw,22px)}
.form--slim .form__sub{margin-block-end:18px;font-size:15px}
.form--slim .field{margin-block-end:12px}
.form--slim .consent{margin-block:16px 18px}

.form__title{font-size:clamp(21px,2.1vw,26px);font-weight:400;margin-block-end:8px;color:var(--ink)}
.form__sub{font-size:15.5px;color:var(--muted);margin-block-end:24px;line-height:1.7}
.field{margin-block-end:14px}
/* שני שדות קצרים בשורה אחת. חוסך גובה בלי לפגוע ביעד המגע:
   הקלט נשאר בגובה 46px גם אחרי הצמצום. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
.field label{
  display:block;font-size:14px;color:var(--muted);margin-block-end:7px;letter-spacing:.02em;
}
.field input,.field textarea,.field select{
  width:100%;padding:11px 15px;font:inherit;font-size:16px;
  color:var(--ink);background:#FFFDF9;
  border:1px solid var(--line);border-radius:12px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:74px;resize:vertical;line-height:1.65}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .16);
}
.form--teal .field input:focus,.form--teal .field textarea:focus,.form--teal .field select:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px rgb(63 110 107 / .16);
}
.field select{appearance:none;background-image:none;cursor:pointer}
.field select option{color:var(--ink);background:#FFFDF9}
/* ⚠️ מלכודת RTL: הסתרה בעזרת inset-inline-start שלילי דוחפת את האלמנט
   9999px ימינה בעברית, כלומר אל מחוץ למסך בכיוון תחילת השורה. גם כשה-
   overflow חתוך, חלק מהדפדפנים נוחתים על העמוד בגלילה אופקית ולא באפס,
   והמבקר רואה דף גזור. הדפוס הבטוח הוא clip-path, שלא יוצר גלישה בכלל. */
.hp{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* צ'קבוקסים — שניהם באותו גודל ובאותו צבע בדיוק.
   צ'קבוקס אופציונלי מעוצב חלש הוא dark pattern. */
.consent{display:grid;gap:12px;margin-block:20px 22px}
/* ⚠️ אסור display:grid על ה-label. הילדים שלו הם תיבה, טקסט חופשי, קישור,
   ועוד טקסט, וכל אחד מהם הופך לתא נפרד ברשת. המשפט מתפרק לשלוש שורות
   מנותקות והקישור נוחת לבד. מיקום מוחלט של התיבה שומר על משפט אחד רציף. */
.consent label{
  display:block;position:relative;padding-inline-start:28px;
  font-size:14px;line-height:1.65;color:var(--muted);cursor:pointer;
}
.consent input[type="checkbox"]{
  position:absolute;inset-inline-start:0;inset-block-start:3px;
  width:17px;height:17px;accent-color:var(--violet);cursor:pointer;
}
.form--teal .consent input[type="checkbox"]{accent-color:var(--teal)}
.consent a{color:var(--violet-ink)}
.form__btn{width:100%;margin-block-start:4px}
.form-status{
  display:block;margin-block-start:14px;font-size:15px;min-height:1.4em;text-align:center;
}

/* ⚠️ המאפיין hidden לבדו לא מסתיר אלמנט שיש לו display מפורש ב-CSS
   (.consent ו-.field-row הם grid, .btn הוא inline-flex). בלי הכלל הזה
   הסתרת גוף הטופס אחרי הרשמה פשוט לא הייתה קורית. */
[hidden]{display:none !important}

/* בועת ההצטרפות לקבוצה. נחשפת במקום גוף הטופס אחרי הרשמה מוצלחת בלבד,
   ולכן הפעולה השנייה לעולם לא מתחרה בפעולה הראשונה. */
.joined{text-align:center;padding-block:clamp(4px,1.2vw,12px)}
.joined__t{font-size:clamp(20px,2vw,25px);font-weight:400;color:var(--ink);margin-block-end:10px}
.joined__s{
  font-size:15.5px;color:var(--muted);line-height:1.7;
  margin-block-end:22px;max-width:38ch;margin-inline:auto;
}
.joined .btn{width:100%}
.joined__n{margin-block-start:14px;font-size:13.5px;color:var(--muted)}

/* ============ שאלות ותשובות ============ */

.faq{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.faq details{background:var(--paper)}
.band--tint .faq details{background:var(--lilac)}
.faq summary{
  padding:clamp(19px,2.1vw,26px) clamp(22px,2.4vw,30px);
  cursor:pointer;list-style:none;
  font-size:clamp(17.5px,1.5vw,20px);font-weight:400;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:24px;font-weight:200;color:var(--violet);flex:none;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--violet-ink)}
.faq__a{
  padding:0 clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px);
  color:var(--muted);font-size:16.5px;
}

/* ============ כתיבה (קול המורה) ============ */

.piece{
  padding-block:clamp(38px,4.6vw,62px);
}
.piece:first-of-type{padding-block-start:0}
/* המעבר בין טקסט לטקסט: קו הפרפרים (בקשת עידו 15.09, הקובץ מהדרייב).
   במקום הקו הדק שהיה כאן. רקע של פסאודו ולא <img>, כדי שלא ייכנס לעורך
   של מיכל ולא יזיז את מזהי העריכה. PNG פלטה, 1400px, 25KB, רקע שקוף. */
.piece + .piece{padding-block-start:0}
.piece + .piece::before{
  content:"";display:block;width:100%;aspect-ratio:1400/139;
  margin-block-end:clamp(38px,4.6vw,62px);
  background:url("img/butterfly.png?v=1") center/contain no-repeat;
}
/* בטלפון הקו המלא יוצא בגובה 34px והפרפרים נבלעים. מראים את האמצע
   (שלושת הפרפרים המרכזיים) בגודל כמעט כפול, בלי קובץ נוסף. */
@media (max-width:560px){
  .piece + .piece::before{aspect-ratio:800/139;background-size:cover}
}
.piece__meta{
  font-size:13px;letter-spacing:.15em;color:var(--muted);margin-block-end:14px;display:block;
}
.piece h2{font-size:clamp(24px,2.8vw,34px);margin-block-end:22px}
.piece__body{font-size:17.5px;line-height:2.05;color:var(--ink)}
.piece__body p{margin-block-start:1.15em}
.piece__body p:first-child{margin:0}
/* בלי הדגשה בטרקוטה בטקסטים של מיכל (בקשת עידו 15.09): טקסט זורם.
   התגית <em> נשארת בקובץ, רק הצבע יורד. */
.piece__body em{font-style:normal;color:inherit}

/* ============ פוטר ============ */

.foot{background:var(--plum);color:var(--paper);padding-block:clamp(50px,6vw,78px) 30px}
.foot .mark b{color:var(--paper)}
.foot .mark small{color:var(--dim)}
.foot__top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-block-end:clamp(30px,4vw,46px);
}
@media (max-width:760px){.foot__top{grid-template-columns:1fr;gap:30px}}
.foot__tag{font-size:13px;line-height:1.65;color:rgba(250,242,232,.72);margin-block-start:14px;max-width:42ch}
.foot h4{
  /* תווית עמודה מרווחת ב-13px, לא כותרת. סריף בגודל הזה נשבר. */
  font-family:'Assistant',system-ui,sans-serif;
  font-size:13px;letter-spacing:.16em;color:var(--dim);font-weight:400;margin-block-end:16px;
}
.foot__nav{display:grid;gap:11px}
.foot__nav a{
  text-decoration:none;font-size:16px;color:rgba(250,242,232,.85);
  transition:color .25s var(--ease);width:fit-content;
}
.foot__nav a:hover{color:var(--violet-glow)}
.foot__base{
  border-block-start:1px solid var(--line-dark);padding-block-start:26px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:rgba(250,242,232,.65);
}
.foot__base a{color:inherit;text-decoration:none}
.foot__base a:hover{color:var(--violet-glow);text-decoration:underline}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.built-by{
  background:var(--plum);color:rgba(250,242,232,.42);
  text-align:center;font-size:12.5px;padding-block-end:22px;
}
.built-by a{color:rgba(250,242,232,.6)}

/* ============ וואטסאפ צף ============ */

.wa{
  position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:880;
  width:54px;height:54px;border-radius:50%;
  background:#0F7A6C;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(15,122,108,.34);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px}
@media (max-width:600px){.wa{width:50px;height:50px;inset-block-end:16px;inset-inline-start:16px}}

/* ============ עמודים משפטיים ============ */

.legal-hero{padding-block:clamp(48px,6vw,86px) clamp(28px,3.4vw,44px);background:var(--lilac)}
.legal-date{font-size:14px;color:var(--muted);margin-block-start:18px}
.legal-sec{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,30px);
  padding-block:clamp(24px,3vw,38px);border-block-start:1px solid var(--line);
}
.legal-sec:first-child{border:0}
.legal-num{
  font-weight:200;font-size:clamp(22px,2.4vw,30px);
  color:var(--violet);opacity:.45;line-height:1.3;
}
.legal-txt h2{font-size:clamp(20px,2vw,25px);margin-block-end:12px;font-weight:400}
.legal-txt p{color:var(--muted);font-size:16.5px}

/* ============ נגישות ותנועה ============ */

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--violet);outline-offset:3px;border-radius:6px;
}
.band--plum a:focus-visible{outline-color:var(--violet-glow)}

.skip{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2000;
  width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  border-end-start-radius:12px;text-decoration:none;font-size:15px;
}

/* ⚠️ ה-keyframes חייבים להיות מוגדרים בקובץ הזה עצמו, ומצב הסיום מוצהר
   במפורש גם ב-prefers-reduced-motion. animation שמפנה ל-keyframes שלא
   נטען לא זורק שגיאה, הוא פשוט לא רץ, והאלמנט נשאר בלתי נראה. */
.rise{opacity:0;transform:translateY(20px)}
.rise.in{animation:rise .85s var(--ease) forwards}
.rise.in[data-d="1"]{animation-delay:.1s}
.rise.in[data-d="2"]{animation-delay:.2s}
.rise.in[data-d="3"]{animation-delay:.3s}
.rise.in[data-d="4"]{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none}}

.breathe{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.055);opacity:.75}
}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.in{opacity:1!important;transform:none!important;animation:none!important}
  .breathe{animation:none;opacity:.55}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* בלי JS — לא משאירים את התוכן בלתי נראה */
.no-js .rise{opacity:1;transform:none}

/* ============ כתב יד ============
   גברת לוין, של אאא, ברישיון SIL OFL 1.1. מותר מסחרית, מותר להטמעה
   באתר, בלי חובת קרדיט בעמוד. **נינה בחרה אותו בעצמה** מתוך ארבעת
   פונטי כתב היד העבריים היחידים שקיימים בגוגל פונטס.

   שני שימושים:
   1. המחלקה .hand ומה שמחיל אותה כאן, על מקומות אישיים בלבד.
   2. בחירה של נינה בסרגל העורך (מפתח `yad`), שנוחתת כ-font-family מוטבע.

   ⚠️ **משקל אחד בלבד (400).** אין 300 ואין 700. לכן:
   - אין טעם לבקש משקל דק. בקשה ל-300 פשוט תקבל את ה-400.
   - בקשה ל-600 ומעלה מייצרת **בולד מזויף** שהדפדפן מסמן בעצמו, וזה
     מכער כתב יד. לכן כל מקום שמקבל את הפונט מקבל גם font-weight:400
     מפורש, כדי לנטרל מחלקה שמבקשת יותר.
   ⚠️ הפונט **רחב ועבה מ-Assistant** באותו גודל, ולכן מקומות שקיבלו אותו
   יורדים בגודל ולא עולים. זה הפוך מהאינטואיציה ומפונטים אחרים. */
.hand,
[style*="Gveret"][style]{
  font-weight:400;
  letter-spacing:0;      /* המרווח השלילי של הכותרות הורס את חיבורי הקו */
  font-style:normal;
}

/* הציטוט הגדול — המילים שלה עצמה. כאן כתב היד הכי מרוויח.
   ⚠️ .pull במקור הוא 200 ב-clamp עד 42px. גברת לוין עבה בהרבה, ובגודל
   הזה הוא צועק. לכן הטווח יורד, ומשקל 400 (היחיד שקיים) מחליף את ה-200. */
.pull{
  font-family:'Gveret Levin',cursive;
  font-weight:400;letter-spacing:0;
  font-size:clamp(23px,3vw,36px);line-height:1.5;
}
.pull em{font-weight:400}

/* החתימה מתחת לציטוט, ושמות החותמים על העדויות. שם בכתב יד קורא כמו
   חתימה ולא כמו שדה במסד נתונים.
   ⚠️ `.tcard__by b` מבקש 500. עם משקל אחד בלבד זה עדיין נופל ל-400 ולא
   מזייף, אבל אנחנו כותבים 400 מפורש כדי שזה יישאר נכון גם אם מישהו
   יעלה את המחלקה ל-600 בעתיד. */
.pull__by,
.tcard__by b{
  font-family:'Gveret Levin',cursive;
  font-weight:400;letter-spacing:0;
}
.pull__by{font-size:15px}
.tcard__by b{font-size:15.5px}

/* ⛔ מרכאות הפתיחה הדקורטיביות (.quote::before/.tcard::before) נשארות
   ב-Assistant בכוונה. גברת לוין הוא פונט של כתב יד עם מפת תווים חלקית,
   ותו כמו ” עלול לצאת ריק או כמלבן. תו דקורטיבי בודד הוא בדיוק המקום
   שבו נפילה כזו לא נראית עד שמישהו מדווח עליה. */