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

   הפלטה: סגול, ירוק-מים ופסטלים (בקשת עידו, 09.08.2026).
   הסגול הוא הבחירה של נינה עצמה. בתשובות האשף של עמוד הנחיתה שלה
   היא כתבה בשדה הצבע "שמנת וסגול", ו-#6B4C8A הוא הגוון שהמחולל
   נתן לה. הוא נשמר כאן כמו שהוא.

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

   ⚠️ הפסטליות יושבת ברקעים, לא במבטאים. ניסיתי גוונים בהירים יותר
   לכפתורים ולקישורים והם נפלו מתחת ל-4.5 (ירוק-מים #40807A נותן 3.9
   על הלילך). לכן הרקעים רכים והמבטאים נשארים רוויים מספיק כדי לקרוא.

   כל צירוף טקסט-רקע נמדד ועובר 4.5:1 לפחות (WCAG AA).
   ============================================================ */

:root{
  /* --- בסיס --- */
  --paper:#FDF8F2;      /* שמנת, הרקע הראשי. הגוון של נינה עצמה */
  --lilac:#F2EAF7;      /* לילך פסטלי, רצועות מתחלפות */
  --plum:#3E2C55;       /* סגול עמוק, רצועות כהות. לבן עליו 12.38 */
  --plum-2:#4A3663;     /* סגול עמוק בהיר יותר, לשכבות */
  --ink:#2E2438;        /* טקסט ראשי. 13.95 על שמנת, 12.55 על לילך */
  --muted:#665A73;      /* טקסט משני. 6.07 על שמנת, 5.16 בגרוע ביותר */
  --dim:#CFC2DC;        /* טקסט משני על כהה. 7.31 על הסגול העמוק */
  --line:rgba(46,36,56,.13);
  --line-dark:rgba(253,248,242,.16);

  /* --- מסלול 1: טיפול אישי --- */
  --violet:#6B4C8A;     /* רקע כפתור. לבן עליו 6.94. הגוון שנינה בחרה */
  --violet-ink:#63457F; /* טקסט על בהיר. 7.4 על שמנת, 6.29 בגרוע ביותר */
  --violet-soft:#EDE3F5;/* רצועת סגול רכה */
  --violet-glow:#C9A9E0;/* טקסט על הסגול העמוק. 6.03 */

  /* --- מסלול 2: מרחב נשימה --- */
  --breath:#3F6E6B;     /* רקע כפתור. לבן עליו 5.75 */
  --breath-ink:#3F6E6B; /* טקסט על בהיר. 5.44 על שמנת, 4.63 בגרוע ביותר */
  --breath-soft:#E7F1EF;/* מנטה פסטלית */
  --breath-glow:#A8D5CE;/* טקסט על הסגול העמוק. 7.71 */

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

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

/* מיתוג העמוד לפי מסלול.
   עמוד מרחב נשימה מחליף את משתני הסגול בירוק-מים, וכל מה שנגזר מהם
   (כפתורים, צללים, טבעות פוקוס, הפלוס בשאלות, חצים, סימן הציטוט)
   עובר איתו. כך אין צורך במחלקת מודיפייר לכל רכיב בנפרד. */
.t-breath{
  --violet:var(--breath);
  --violet-ink:var(--breath-ink);
  --violet-soft:var(--breath-soft);
  --violet-glow:var(--breath-glow);
  --accent-rgb:63 110 107;
}
.t-breath ::selection{background:var(--breath-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}}

body{
  font-family:'Heebo','Assistant',system-ui,sans-serif;
  font-weight:300;
  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}

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

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

h1,h2,h3,h4{
  font-family:'Assistant','Heebo',system-ui,sans-serif;
  font-weight:300;
  line-height:1.24;
  letter-spacing:-.015em;
  text-wrap:balance;
}
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--breath{color:var(--breath-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(253,248,242,.9)}
.band--plum p{color:rgba(253,248,242,.82)}
.band--violet{background:var(--violet-soft)}
.band--mint{background:var(--breath-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 (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(253,248,242,.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:column;line-height:1.18;flex:none;
}
.mark b{
  font-family:'Assistant',sans-serif;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}

.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(46,36,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:#fff}
.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-family:'Assistant',sans-serif;font-size:16.5px;font-weight:400;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  background:var(--violet);color:#fff;
  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--breath{background:var(--breath);box-shadow:0 2px 14px rgb(63 110 107 / .22)}
.btn--breath:hover{box-shadow:0 8px 26px rgb(63 110 107 / .3)}
.btn--ink{background:var(--ink);box-shadow:0 2px 14px rgba(46,36,56,.2)}
.btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none;
}
.btn--ghost:hover{background:rgba(46,36,56,.05);box-shadow:none}
.band--plum .btn--ghost{color:var(--paper);border-color:var(--line-dark)}
.band--plum .btn--ghost:hover{background:rgba(253,248,242,.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--breath{color:var(--breath-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(120% 90% at 88% 8%,rgba(233,220,245,.9) 0%,rgba(233,220,245,0) 55%),
    radial-gradient(100% 80% at 6% 95%,rgba(214,235,230,.85) 0%,rgba(214,235,230,0) 58%),
    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__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}
}

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

.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;
  padding:clamp(30px,3.6vw,48px);
  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)}
.track::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:var(--violet);
}
.track--breath::before{background:var(--breath)}
.track__num{
  font-family:'Assistant',sans-serif;font-size:13px;letter-spacing:.2em;
  color:var(--violet-ink);font-weight:500;margin-block-end:16px;display:block;
}
.track--breath .track__num{color:var(--breath-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--breath .track__go{color:var(--breath-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--breath .track__ring circle{stroke:var(--breath)}

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

.pull{
  font-family:'Assistant',sans-serif;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. נתפס בצילום ולא בקריאת הקוד. */
.pains{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);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(--breath-soft)}
.band--mint .pains{background:rgba(62,44,85,.13);border-color:rgba(62,44,85,.13)}
.pains b{
  display:block;font-family:'Assistant',sans-serif;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-family:'Assistant',sans-serif;font-weight:200;font-size:clamp(34px,4vw,54px);
  line-height:1;color:var(--violet);opacity:.4;min-width:1.6em;
}
.step--breath .step__n{color:var(--breath)}
.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--breath li::before{border-color:var(--breath)}
.band--plum .marks li{color:rgba(253,248,242,.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);
}

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

.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__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:15px}
.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:13px 16px;font:inherit;font-size:16px;
  color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:13px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.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--breath .field input:focus,.form--breath .field textarea:focus,.form--breath .field select:focus{
  border-color:var(--breath);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:#fff}
/* ⚠️ מלכודת 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--breath .consent input[type="checkbox"]{accent-color:var(--breath)}
.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;
}

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

.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-family:'Assistant',sans-serif;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{
  border-block-start:1px solid var(--line);
  padding-block:clamp(38px,4.6vw,62px);
}
.piece:first-of-type{border:0;padding-block-start:0}
.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}
.piece__body em{font-style:normal;color:var(--violet-ink)}

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

.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:15.5px;color:rgba(253,248,242,.72);margin-block-start:16px;max-width:32ch}
.foot h4{
  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(253,248,242,.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(253,248,242,.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(253,248,242,.42);
  text-align:center;font-size:12.5px;padding-block-end:22px;
}
.built-by a{color:rgba(253,248,242,.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-family:'Assistant',sans-serif;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}