/* ============================================================
   bendylife · סטודיו נשימה · מורן אור
   מערכת עיצוב: אור, חול, יער

   פלטה מאושרת
     SAND      #F2EDE4   רקע
     FOREST    #2E4A45   אקסנט טקסטואלי, כותרות משניות
     SAGE      #7F9C8C   אלמנטים גרפיים, מילויים
     GOLD      #D8B26E   כפתורים ו-CTA בלבד (לעולם לא טקסט קטן)
     CHARCOAL  #2F2F2F   טקסט גוף

   הערה על שמות המשתנים: --ink* הם הרקעים ו--paper* הם הטקסט.
   השמות היסטוריים והפוכים אינטואיטיבית, אבל ה-HTML מפנה אליהם
   ב-inline styles ולכן אסור לשנות אותם. --ember = FOREST.
   ============================================================ */

:root{
  /* ---- הפלטה הגולמית ---- */
  --sand:      #F2EDE4;
  --forest:    #2E4A45;
  --sage:      #7F9C8C;
  --gold:      #D8B26E;
  --gold-dp:   #C39A52;
  --charcoal:  #2F2F2F;

  /* ---- רקעים (מבהיר לעמוק) ----
     גוון שמנת, לא בז'. עידו ביקש רקע בהיר יותר בכל האתר */
  --ink:       #FDFBF7;   /* שמנת, הרקע הראשי */
  --ink-2:     #FAF7F1;   /* שמנת עמוקה קמעה */
  --ink-3:     #F6F2EA;   /* רצועה שלישית */
  --ink-4:     #EBE5D9;

  /* ---- טקסט ---- */
  --paper:     #2F2F2F;   /* CHARCOAL */
  --paper-2:   #4C5A55;   /* אפור-מרווה עמוק, טקסט משני */
  --paper-3:   #5C6964;   /* מרוסן, מטא ופרטים */

  /* ---- אקסנטים ---- */
  --ember:     #2E4A45;   /* FOREST */
  --ember-lo:  #7F9C8C;   /* SAGE */
  --sage-wash: #E3EAE4;

  /* ---- ערוצי RGB לשקיפויות ---- */
  --ink-rgb:    253 251 246;
  --paper-rgb:  47 47 47;
  --forest-rgb: 46 74 69;
  --sage-rgb:   127 156 140;
  --gold-rgb:   216 178 110;

  /* ---- קווים ---- */
  --line:      rgb(var(--forest-rgb) / .14);
  --line-2:    rgb(var(--forest-rgb) / .28);
  --line-3:    rgb(var(--forest-rgb) / .46);

  /* ---- מידות ---- */
  --max:       1320px;
  --gut:       clamp(20px, 5vw, 72px);
  /* המרחק מקצה התוכן ועד קצה החלון. משמש כדי לתת ללוח ההירו לדמם החוצה */
  --bleed-i:   calc(max(0px, (100vw - var(--max)) / 2) + var(--gut));

  --r-xs:      3px;
  --r-sm:      5px;
  --r-md:      8px;
  --r-lg:      14px;

  /* ---- צללים: תמיד סביבתי רחב + מגע קרוב ---- */
  --sh-1: 0 1px 2px rgb(var(--forest-rgb) / .05), 0 8px 20px -14px rgb(var(--forest-rgb) / .18);
  --sh-2: 0 2px 5px rgb(var(--forest-rgb) / .05), 0 26px 50px -30px rgb(var(--forest-rgb) / .26);
  --sh-3: 0 4px 9px rgb(var(--forest-rgb) / .06), 0 48px 90px -46px rgb(var(--forest-rgb) / .34);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Assistant', system-ui, sans-serif;
  font-weight:300;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* גרעין נייר עדין מעל הכל. שומר על החול מלהיראות דיגיטלי מדי */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.022;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--sage-wash); color:var(--forest); }

:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
  border-radius:2px;
}

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

h1,h2,h3,h4,h5{
  font-family:'Heebo', system-ui, sans-serif;
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

/* הכותרת הראשית של כל עמוד: פחם, המשקל הכבד ביותר של העמוד */
h1{ color:var(--paper); }
/* כותרות משניות: יער. זה צבע המותג המוביל */
h2{ color:var(--ember); }
h3,h4,h5{ color:var(--paper); }

.d1{ font-size:clamp(3.1rem, 10.6vw, 9.4rem); font-weight:200; letter-spacing:-.035em; line-height:.98; }
.d2{ font-size:clamp(2.35rem, 5.9vw, 5.1rem); font-weight:250; letter-spacing:-.03em; line-height:1.04; }
.d3{ font-size:clamp(1.85rem, 3.4vw, 2.95rem); font-weight:300; letter-spacing:-.024em; line-height:1.12; }
.d4{ font-size:clamp(1.28rem, 1.9vw, 1.68rem); font-weight:400; letter-spacing:-.012em; line-height:1.28; }

.lead{
  font-size:clamp(1.1rem, 1.5vw, 1.34rem);
  line-height:1.62;
  color:var(--paper-2);
  font-weight:300;
  max-width:54ch;
}

p{ margin:0 0 1.1em; max-width:62ch; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.muted{ color:var(--paper-3); }

/* תווית קטנה עם ריווח, בסגנון קרדיטים */
.eyebrow{
  font-family:'Heebo', sans-serif;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ember);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(20px,2.4vw,30px);
  line-height:1.4;
}
.eyebrow::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(to left, var(--line-2), rgb(var(--sage-rgb) / .18) 55%, transparent);
  max-width:190px;
}
.eyebrow--plain::after{ display:none; }

/* מספור בסגנון תסריט */
.num{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--ember);
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
/* המספר בראש כרטיס בעמוד הקורס: מקבל קו זהב מתחתיו */
.card .num{
  padding-block-end:9px;
  border-block-end:2px solid var(--gold);
}

/* ============================================================
   מבנה ורצועות
   ============================================================ */

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
}

section{ position:relative; }

.band{ padding-block:clamp(78px, 11.5vh, 164px); }
.band--tight{ padding-block:clamp(54px, 7.5vh, 100px); }

/* מעברי הגוון בין הרצועות: הפרש קטן פלוס שערה, כדי שייקרא כנשימה ולא כקופסה */
.band--ink2{
  background:var(--ink-2);
  box-shadow:inset 0 1px 0 rgb(var(--forest-rgb) / .07), inset 0 -1px 0 rgb(var(--forest-rgb) / .07);
}
/* בלי נשיפת מרווה. הגוון הירקרק הוריד את הרצועה לאפור דהוי */
.band--ink3{
  background:var(--ink-3);
  box-shadow:inset 0 1px 0 rgb(var(--forest-rgb) / .09), inset 0 -1px 0 rgb(var(--forest-rgb) / .09);
}

.rule{ height:1px; background:var(--line); border:0; margin:0; }

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

.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:100;
  padding-block:19px;
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s, box-shadow .45s;
  border-block-end:1px solid transparent;
}
/* נשיפת אור מתחת לתפריט, כדי שהקישורים ייקראו גם מעל תצלום */
.nav::before{
  content:'';
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:210%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--ink-rgb) / .94) 0%,
    rgb(var(--ink-rgb) / .84) 30%,
    rgb(var(--ink-rgb) / .46) 62%,
    rgb(var(--ink-rgb) / 0) 100%);
  transition:opacity .45s var(--ease);
}
.nav.is-stuck{
  background:rgb(var(--ink-rgb) / .90);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  padding-block:12px;
  border-block-end-color:var(--line);
  box-shadow:0 12px 30px -26px rgb(var(--forest-rgb) / .5);
}
.nav.is-stuck::before{ opacity:0; }

.nav__in{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* ---- הוורדמארק ---- */
.mark{
  font-family:'Syne', sans-serif;
  font-weight:700;
  font-size:1.24rem;
  letter-spacing:-.028em;
  direction:ltr;
  display:inline-flex;
  align-items:baseline;
  gap:0;
  line-height:1;
  color:var(--paper);
  transition:color .3s;
}
.mark b{
  font-weight:inherit;
  color:inherit;
  transition:color .3s;
}
/* הוורדמארק אחיד. אין שום הבדל בין Bendy ל-Life: אותו פונט,
   אותו משקל, אותו צבע, בלי איטליק. תגיות ה-b וה-i נשארו ב-HTML
   רק כדי לא לגעת ב-16 מקומות, והן מנוטרלות כאן */
.mark i{
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
}
.mark small{
  font-family:'Heebo', sans-serif;
  font-size:.57rem;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--paper-3);
  direction:rtl;
  margin-inline-start:12px;
  padding-inline-start:12px;
  border-inline-start:1px solid var(--line-2);
  white-space:nowrap;
}
.nav .mark:hover{ color:var(--forest); }

.menu{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.3vw,36px);
  list-style:none;
  margin:0;
  padding:0;
  font-size:.94rem;
  font-weight:400;
}
.menu a{
  position:relative;
  padding-block:7px;
  color:var(--paper-2);
  transition:color .3s;
}
.menu a::after{
  content:'';
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:width .4s var(--ease-out);
}
.menu a:hover{ color:var(--forest); }
.menu a:hover::after{ width:100%; }
.menu a[aria-current]{ color:var(--forest); font-weight:500; }
.menu a[aria-current]::after{ width:100%; background:var(--forest); }

/* ---- כפתור ה-CTA בתפריט ----
   נכתב כ-.menu .btn--nav ולא כ-.btn--nav, כדי לגבור על .menu a
   ששולט בצבע ובריפוד של כל קישור בתפריט */
.menu .btn--nav{
  min-height:0;
  padding:10px 21px;
  font-size:.87rem;
  font-weight:500;
  color:var(--paper);
  white-space:nowrap;
  box-shadow:0 1px 2px rgb(var(--forest-rgb) / .06), 0 10px 20px -14px rgb(var(--gold-rgb) / .9);
}
.menu .btn--nav::after{ display:none; }   /* בלי הקו התחתון של התפריט */
.menu .btn--nav:hover{ color:var(--ink); transform:translateY(-1px); }
.nav.is-stuck .menu .btn--nav{ padding-block:9px; }

.burger{
  display:none;
  background:none;
  border:0;
  padding:11px;
  cursor:pointer;
  color:var(--forest);
}
.burger span{
  display:block;
  width:24px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  margin:6px 0;
  transition:transform .38s var(--ease-out), opacity .25s;
}
.nav.is-open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2){ opacity:0; }
.nav.is-open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:860px){
  .burger{ display:block; }
  .menu{
    position:fixed;
    inset:0;
    background:
      radial-gradient(90% 60% at 100% 0%, rgb(var(--sage-rgb) / .16), transparent 62%),
      radial-gradient(80% 50% at 0% 100%, rgb(var(--gold-rgb) / .14), transparent 60%),
      var(--ink);
    flex-direction:column;
    justify-content:center;
    gap:6px;
    font-size:clamp(1.7rem,7vw,2.3rem);
    font-family:'Heebo',sans-serif;
    font-weight:250;
    letter-spacing:-.02em;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .6s var(--ease-out);
  }
  .nav.is-open .menu{ clip-path:inset(0 0 0 0); }
  .menu a{ color:var(--paper); }
  .menu a::after{ height:2px; }
  .menu li{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
  .nav.is-open .menu li{ opacity:1; transform:none; }
  .nav.is-open .menu li:nth-child(1){ transition-delay:.12s; }
  .nav.is-open .menu li:nth-child(2){ transition-delay:.18s; }
  .nav.is-open .menu li:nth-child(3){ transition-delay:.24s; }
  .nav.is-open .menu li:nth-child(4){ transition-delay:.30s; }
  .nav.is-open .menu li:nth-child(5){ transition-delay:.36s; }
  .nav__in{ position:relative; z-index:2; }
  .burger{ position:relative; z-index:3; }
  .mark small{ display:none; }
  /* ב-overlay הפריטים ענקיים. הכפתור מקבל רוחב תוכן, ממורכז,
     עם אוויר מעליו, כדי שייקרא ככפתור ולא כפריט תפריט שהשתבש */
  .menu li:last-child{ align-self:center; margin-block-start:clamp(22px,5vw,34px); }
  .menu .btn--nav{ padding:15px 34px; font-size:1rem; }

  /* ⚠️ באג שתוקן: backdrop-filter על .nav הופך אותו לבלוק מכיל של
     position:fixed, ואז תפריט המובייל (.menu עם inset:0) נחתך לגובה
     הבר במקום לכסות את המסך. זה קרה רק אחרי גלילה של 24px, כי רק
     אז נוספת המחלקה is-stuck. רקע אטום במקום הטשטוש */
  .nav.is-stuck{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgb(var(--ink-rgb) / .97);
  }
}
/* מ-1040 ומטה מוותרים על תת-הכיתוב של הלוגו, כדי שהתפריט
   פלוס הכפתור לא ידחקו אותו */
@media (max-width:1040px){
  .mark small{ display:none; }
}

/* ============================================================
   מסגרות תמונה
   ============================================================ */

.frame{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--ink-3);
  border-radius:var(--r-sm);
  isolation:isolate;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--ease), filter 1.3s var(--ease);
  filter:saturate(.97) contrast(1.015) brightness(1.015);
}
/* טבעת פנימית דקה: נותנת לתצלום קצה מוגדר על החול */
.frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgb(var(--forest-rgb) / .09);
}
a:hover .frame img,
.frame:hover img{ transform:scale(1.04); }

/* מצב "אין עדיין תמונה" */
.frame.is-empty img{ display:none; }
.frame.is-empty{
  background:
    linear-gradient(140deg, rgb(var(--sage-rgb) / .3), transparent 58%),
    repeating-linear-gradient(45deg, rgb(var(--forest-rgb) / .04) 0 1px, transparent 1px 12px),
    var(--ink-3);
}
.frame.is-empty::before{
  content:'';
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  translate:-50% -50%;
  width:40px; height:40px;
  border:1px solid var(--line-2);
  border-radius:50%;
  opacity:.55;
}
.frame.is-empty::after{
  content:attr(data-slot) ' · ' attr(data-ratio);
  position:absolute;
  inset:auto auto 14px 14px;
  font-family:'Syne',sans-serif;
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--paper-2);
  direction:ltr;
  background:rgb(var(--ink-rgb) / .86);
  padding:5px 9px;
  border-radius:var(--r-xs);
  box-shadow:none;
}

.r-portrait{ aspect-ratio:4/5; }
.r-square { aspect-ratio:1/1; }
.r-wide   { aspect-ratio:16/9; }
.r-cine   { aspect-ratio:21/9; }
.r-tall   { aspect-ratio:3/4; }
/* 4:3, היחס הטבעי של a4.png (1.355). חלון בדיוק במידה של הקובץ
   שומר על שתי הדמויות בפריים, כי כל חיתוך לפורטרט מוחק את המורה */
.r-photo  { aspect-ratio:4/3; }

/* צילום הרנטגן בעמוד הסיפור.
   contain ולא cover, כדי שעמוד השדרה לא ייחתך.
   בלי aspect-ratio ועם align-self:stretch, ולכן הגובה נקבע על ידי
   עמודת הטקסט שלצידו והתמונה לעולם לא גבוהה ממנה. הרקע שקוף,
   כך שהשחור שנראה הוא של הצילום עצמו ולא מלבן מסביבו */
.frame--xray{
  aspect-ratio:auto;
  align-self:stretch;
  background:none;
  border-radius:0;
  min-height:0;
}
/* התמונה מוצאת מזרימת המסמך. כך היא לא תורמת גובה לשורת הגריד,
   גובה השורה נקבע על ידי עמודת הטקסט, והתמונה נמתחת אליו.
   בלי זה הפיגורה מקבלת את הגובה הטבעי של הצילום ומגביהה את השורה */
.frame--xray img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
}
.frame--xray::after{ content:none; }
.frame--xray:hover img,
a:hover .frame--xray img{ transform:none; }

/* במובייל העמודות נערמות ואין טקסט לצידו שיקבע גובה,
   ולכן נדרש גובה מפורש */
@media (max-width:880px){
  .frame--xray{ align-self:center; height:min(52svh, 420px); }
}

/* ============================================================
   כפתורים
   GOLD הוא צבע הפעולה. הוא לא מופיע בשום מקום אחר כמילוי מלא.
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  padding:15px 34px;
  font-family:'Heebo',sans-serif;
  font-size:.96rem;
  font-weight:500;
  letter-spacing:.005em;
  border:1px solid var(--gold);
  border-radius:var(--r-sm);
  background:var(--gold);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 1px 2px rgb(var(--forest-rgb) / .06), 0 14px 26px -18px rgb(var(--gold-rgb) / .9);
  transition:color .38s var(--ease), border-color .38s var(--ease),
             box-shadow .38s var(--ease), transform .38s var(--ease-out);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--forest);
  translate:0 101%;
  transition:translate .48s var(--ease-out);
  z-index:1;
}
.btn:hover{
  color:var(--ink);
  border-color:var(--forest);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgb(var(--forest-rgb) / .08), 0 20px 34px -20px rgb(var(--forest-rgb) / .55);
}
.btn:hover::before{ translate:0 0; }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent;
  color:var(--forest);
  border-color:var(--line-3);
  box-shadow:none;
}
.btn--ghost::before{ background:var(--forest); }
.btn--ghost:hover{
  color:var(--ink);
  border-color:var(--forest);
  box-shadow:0 18px 30px -22px rgb(var(--forest-rgb) / .5);
}

.btns{ display:flex; flex-wrap:wrap; gap:14px; }

/* קישור טקסט עם חץ */
.arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Heebo',sans-serif;
  font-size:.94rem;
  font-weight:500;
  color:var(--ember);
  padding-block:5px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .35s, gap .35s var(--ease-out);
}
.arrow::after{ content:'←'; font-size:1.05em; transition:translate .35s var(--ease-out); }
.arrow:hover{ box-shadow:inset 0 -1px 0 var(--gold); gap:16px; }
.arrow:hover::after{ translate:-4px 0; }

/* ============================================================
   הירו וכותרי העמודים: פיצול

   כל התצלומים כאן הם פוזות אנכיות. עמידות ידיים, הקשתות, גשרים.
   כל שכבה שנפרשת מעליהם חותכת גוף אנושי לשניים, וכל יחס רחב
   מוחק ראשים. לכן:

   התצלום בעמודה אחת, הטקסט בעמודה השנייה על חול אטום.
   אפס אוברליי, אפס מסק, אפס גרדיאנט מעל תצלום. התמונה שלמה
   ב-100% משטחה, והטקסט קריא ב-100% כי הוא על רקע אטום.

   העמודה של התצלום גבוהה יותר מרוחבה, ולכן object-fit חותך
   רק את הצדדים הריקים ושומר את מלוא הגובה. הראש והגו שלמים.
   התצלום מתחיל מתחת לתפריט, כדי שגם התפריט לא ידרוש צעיף.
   ============================================================ */

.hero,
.phero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-block-start:clamp(74px, 9vh, 102px);
  overflow:hidden;
}
/* גם ההירו הראשי וגם ההירו הפנימי מתנהגים אותו דבר: עמודת תצלום
   ביחס טבעי, ממורכזת, ולידה עמודת טקסט על חול. אף תצלום לא נמתח
   לגובה של חלון שלם, כי זה מה שחתך את הדמויות */
.hero,
.phero{
  align-items:center;
}

/* ---- עמודת התצלום ---- */
.hero__media,
.phero__bg{
  position:relative;
  inset:auto;
  z-index:0;
  grid-column:2;   /* ב-RTL זו העמודה השמאלית. מדממת אל קצה החלון */
  grid-row:1;
  min-width:0;
  overflow:hidden;
}
/* ⚠️ כלל ברזל: יחס החלון זהה ליחס הקובץ, לכל תמונה בנפרד.
   עידו מסגר כל תצלום ידנית כדי שהדמות לא תיחתך, ולכן כל יחס
   אחיד שנכפה מלמעלה הורס את המסגור שלו. החיתוך כאן הוא אפס.
   אם מחליפים תמונה, חובה לעדכן גם את היחס למטה. */
.hero__media,
.phero__bg{
  aspect-ratio:3/2;          /* ברירת מחדל, נדרסת לפי הקובץ */
  align-self:center;
}
.hero__media:has([data-slot*="hero-main"])         { aspect-ratio:3 / 1; }
.hero__media:has([data-slot*="course-hero"])       { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="story-hero"])          { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="classes-hero"])        { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="pelvis-wide"])         { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="back-wide"])           { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="deepening-wide"])      { aspect-ratio:3 / 1; }
.phero__bg:has([data-slot*="vinyasa-wide"])        { aspect-ratio:1536 / 1024; }
/* ---- תקרת גובה להדר ----
   התמונות כמעט המרובעות (יחס 0.98 ו-1.09) מילאו עמודה של חצי מסך
   ויצרו הדר של יותר מ-900 פיקסלים. מצמצמים להן את הרוחב כך שהגובה
   נוחת סביב שני שליש מסך. אפס חיתוך: היחס נשמר, רק הגודל קטן. */
/* שום דבר לא מונח מעל התצלום. גם לא טבעת של פיקסל */
.hero__media .frame::after,
.phero__bg .frame::after{ display:none; }
.hero__media .frame img,
.phero__bg .frame img,
.hero__media .frame:hover img,
.phero__bg .frame:hover img{
  transform:none;
  transition:none;
  filter:saturate(1) contrast(1.01) brightness(1.01);
}

/* ---- קדר ----
   הקבצים נחתכו מראש ב-build-media.js לפי מיקוד שנבדק בעין, ולכן
   כאן אין צורך בהיסטים לכל תמונה. החלון והקובץ באותו יחס.
   היסט אנכי קל למעלה, כי הראשים תמיד בחלק העליון של הפריים,
   וכך גם אם תקרת הגובה חותכת משהו זה יהיה הרצפה ולא הראש */
.hero__media .frame img,
.phero__bg .frame img{ object-position:50% 42%; }

/* ---- עמודת הטקסט: חול אטום ---- */
.hero__in,
.phero .wrap{
  grid-column:1;
  grid-row:1;
  align-self:center;
  position:relative;
  z-index:2;
  max-width:none;
  margin:0;
  min-width:0;
  /* בצד החיצוני מיישרים לקו התוכן של שאר העמוד, בצד הפנימי אוויר */
  padding-inline:var(--bleed-i) clamp(30px, 4.6vw, 84px);
  padding-block:clamp(40px,6vh,72px);
}

.hero__panel,
.phero .hero__panel{
  position:static;
  max-width:34ch;
  padding:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  box-shadow:none;
}
.hero__panel::before,
.phero .hero__panel::before{ content:none; display:none; }

/* ---- לוקאפ ההירו, לפי המוקאפ שעידו אישר ----
   וורדמארק גדול, כותרת קצרה, שורת תחומים, ושורת מיקום. בלי פסקה */
.hero__mark{
  display:block;
  font-family:'Syne', sans-serif;
  font-size:clamp(2.1rem, 3.4vw, 3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  direction:ltr;
  text-align:start;
  margin-block:0 clamp(16px,1.9vw,26px);
}
/* התווית מעל הוורדמארק צמודה אליו, זו יחידה אחת */
.hero__panel .eyebrow{ margin-block-end:clamp(10px,1.1vw,15px); }
/* אחיד, בדיוק כמו בבר העליון. אין הבדל בין Bendy ל-Life */
.hero__mark{ font-weight:700; color:var(--paper); }
.hero__mark b,
.hero__mark i{
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
}

.hero__disc{
  font-family:'Heebo', sans-serif;
  font-size:clamp(.82rem, 1.05vw, .96rem);
  font-weight:400;
  letter-spacing:.16em;
  color:var(--ember);
  margin-block:0 clamp(14px,1.6vw,20px);
  max-width:none;
}

.hero .d1{
  margin-block:0 clamp(12px,1.5vw,18px);
  font-size:clamp(1.9rem, 3.1vw, 3.2rem);
  font-weight:300;
  letter-spacing:-.025em;
  line-height:1.14;
}
.hero__sub{
  font-size:clamp(1.02rem,1.25vw,1.18rem);
  font-weight:300;
  line-height:1.62;
  color:var(--paper-2);
  max-width:34ch;
  margin-block-end:clamp(24px,2.8vw,34px);
}
/* האמירה שפותחת את הכרטיס: גדולה יותר, ביער, וממנה נגזר הקצב */
.hero__sub strong{
  display:block;
  font-family:'Heebo',sans-serif;
  font-weight:400;
  font-size:clamp(1.12rem, 1.45vw, 1.38rem);
  line-height:1.42;
  letter-spacing:-.015em;
  color:var(--ember);
  margin-block-end:clamp(12px,1.3vw,17px);
}
.hero__sub span{
  display:block;
  font-size:clamp(.9rem, 1.02vw, 1rem);
  line-height:1.6;
  color:var(--paper-3);
}
.hero .btn{ padding-inline:clamp(18px,1.9vw,26px); }

.phero h1{ font-size:clamp(2.1rem, 3.6vw, 3.5rem); }
.phero .lead{ max-width:34ch; font-size:clamp(1rem,1.2vw,1.14rem); }
.phero .hero__panel .eyebrow{ margin-block-end:clamp(16px,1.8vw,22px); }

/* מונה גלילה: יושב בתחתית עמודת הטקסט, על חול. לא על התצלום */
.scroller{
  position:absolute;
  inset-block-end:clamp(20px,3vh,34px);
  inset-inline-start:var(--bleed-i);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  font-family:'Syne',sans-serif;
  font-weight:600;
  font-size:.58rem;
  letter-spacing:.26em;
  color:var(--paper-3);
  direction:ltr;
  text-transform:uppercase;
}
/* קו סטטי. בלי לולאה. הלקוח לא רוצה שום דבר שזז מעצמו */
.scroller i{
  display:block;
  width:1px;
  height:48px;
  background:linear-gradient(var(--forest), rgb(var(--forest-rgb) / 0));
}

/* ============================================================
   לוח הזכוכית. עמוד הבית בלבד.

   עידו מסגר מחדש את media/hero-main.jpg במיוחד בשביל הלוח:
   הדמות בשליש השמאלי עד המרכז, וכל מה שמימין לה קיר, שיח
   ורצפה. מדידת פיקסלים מאשרת: גוון עור מופיע בין 0.30 ל-0.65
   מרוחב הפריים, ומ-0.65 והלאה יש אפס. הלוח יושב באזור הזה
   בלבד ולכן לא נוגע בה.

   התיחום נעשה ב-:has() לפי שם הקובץ, ולכן הוא חל רק על
   התצלום שנבנה בשבילו. כל שאר העמודים נשארים בפיצול.
   בדפדפן בלי :has() העמוד נופל בחזרה לפיצול, שגם הוא תקין.
   ============================================================ */
@media (min-width:901px){
 /* ⚠️ הגובה נקבע מיחס התצלום ולא מגובה המסך. כשקבעתי גובה לפי svh
    החלון יצא רחב מהתמונה, החיתוך אכל מהגובה, והידיים של מורן נחתכו.
    עכשיו החלון והקובץ באותו יחס בדיוק ולכן החיתוך אפס. */
 .hero:has(.frame[data-slot*="hero-main"]){
  display:block;
  position:relative;
  min-height:0;
  padding-block-start:0;
 }
 /* ⚠️ למה 3:1, ולמה אסור להחליף כאן תמונה צרה יותר.
    חלון ההירו משתנה לפי המסך: viewportWidth חלקי 80svh. במסך רחב
    ונמוך זה מגיע ל-2.8. כל קובץ צר מזה מכריח את הדפדפן לחתוך לגובה,
    ואז או שהידיים והמזרן נעלמים או שהרגליים נעלמות. אין עיגון
    שפותר את זה, כי פשוט אין מספיק גובה בקובץ.

    התמונה הזאת היא 3:1, כלומר רחבה מכל חלון אפשרי. לכן object-fit
    חותך רק בצדדים, והגובה נשאר שלם תמיד: מהרגליים ועד קצה המזרן.
    הרקע שנוסף בצדדים הורחב ב-AI בדיוק בשביל להיחתך.

    אם מחליפים תמונה כאן, היא חייבת להישאר 3:1 ורחבה יותר מ-2.8,
    עם הדמות בשליש השמאלי עד המרכז ורקע נקי מימין בשביל הכרטיס. */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__media{
  position:static;
  width:100%;
  align-self:auto;

  /* הגובה נקבע ישירות ולא דרך aspect-ratio, וזה מה שהקובץ הרחב
     מאפשר. כל עוד יחס החלון קטן מ-3, החיתוך הוא בצדדים בלבד
     והגובה נשאר שלם. calc(100vw / 3) הוא רצפת הבטיחות: הוא מבטיח
     שהחלון לעולם לא יהיה רחב מ-3:1, גם במסך אולטרה רחב, ולכן
     חיתוך לגובה לא יכול לחזור. 78svh נותן הדר גבוה ונעים במסך רגיל,
     ומספיק גובה כדי שכרטיס הזכוכית ייכנס בפנים ולא יגלוש למטה. */
  height:max(calc(100vw / 3), 78svh);
 }
 /* מצמידים את ה-frame לגובה המדיה. בלי זה, במקרה הנדיר שהתקרה
    כן נכנסת לפעולה (מסך אולטרה רחב), ה-frame נשאר בגובה הטבעי
    ו-overflow:hidden חותך אותו מלמטה במקום ש-object-fit יטפל בזה */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__media .frame{
  height:100%;
 }
 /* כשהחלון צר מ-16:9 נחתך מעט מהרוחב. עיגון לימין דואג שהחיתוך
    ייפול תמיד בשוליים השמאליים, שהם קיר ועצים מטושטשים, ולעולם
    לא באזור הנקי שעידו מסגר בימין בשביל הלוח */
 /* החיתוך היחיד הוא בצדדים. מרכוז שומר גם על הדמות בשליש השמאלי
    וגם על הרקע הנקי מימין, שעליו יושב הכרטיס */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__media .frame img{
  height:100%;
  object-position: 50% 50%;
 }
 /* הכרטיס מרחף מעל התצלום, ממורכז אנכית, עם אוויר מכל צד */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__in{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  width:100%;
  padding-inline:clamp(30px, 6vw, 130px) var(--gut);
  padding-block:clamp(60px,7vw,96px);
 }
 /* ---- כרטיס הזכוכית ----
    מלבן מוגדר שמרחף מעל התצלום: פינות מעוגלות, מסגרת דקה, צל,
    ורקע חצי שקוף שמטשטש את מה שמאחוריו. אפשר לראות את הקיר
    והשיחים דרכו. זה מה שהופך אותו לזכוכית ולא לשטח לבן */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{
  position:relative;
  /* רוחב קבוע. בלי זה פריט הפלקס מתכווץ לרוחב המילה הארוכה ביותר
     והכרטיס יוצא צר וגבוה */
  flex:0 0 auto;
  width:clamp(320px, 33vw, 520px);
  max-width:100%;
  padding:clamp(30px,2.8vw,48px) clamp(26px,2.5vw,42px);
  background:rgb(var(--ink-rgb) / .70);
  backdrop-filter:blur(30px) saturate(1.4);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgb(255 255 255 / .55);
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 6px rgb(var(--forest-rgb) / .07),
    0 34px 76px -36px rgb(var(--forest-rgb) / .42);
 }
 /* דפדפן בלי backdrop-filter מקבל רקע אטום יותר, כדי שהטקסט ייקרא */
 @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{
    background:rgb(var(--ink-rgb) / .93);
  }
 }
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel::before{ content:none; display:none; }
 /* היררכיה: סטודיו נשימה הוא הגדול, ומתחתיו הוורדמארק. הכל ממורכז */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__panel{ text-align:center; }
 .hero:has(.frame[data-slot*="hero-main"]) .d1{
  font-size:clamp(2.2rem, 3.3vw, 3.5rem);
  font-weight:250;
  line-height:1.06;
  margin-block:0 clamp(12px,1.3vw,18px);
 }
 .hero:has(.frame[data-slot*="hero-main"]) .hero__mark{
  font-size:clamp(1.35rem, 1.95vw, 2.05rem);
  text-align:center;
  margin-block:0 clamp(18px,2vw,26px);
  padding-block-end:clamp(16px,1.8vw,24px);
  border-block-end:1px solid var(--line-2);
 }
 /* שתי דרגות: האמירה גדולה ובצבע המותג, והפרטים קטנים ומרוסנים */
 .hero:has(.frame[data-slot*="hero-main"]) .hero__sub{
  max-width:none;
  margin-block-end:clamp(22px,2.5vw,32px);
 }
 .hero:has(.frame[data-slot*="hero-main"]) .btns{ justify-content:center; }
 .hero:has(.frame[data-slot*="hero-main"]) .btns{ gap:10px; }
 .hero:has(.frame[data-slot*="hero-main"]) .scroller{ display:none; }
}

/* ============================================================
   מתחת ל-900: אותו עיקרון, מוערם. תצלום למעלה, טקסט מתחת.
   אפס חפיפה.
   ============================================================ */
@media (max-width:900px){
  .hero,
  .phero{
    display:block;
    min-height:0;
    padding-block-start:clamp(70px,9vh,92px);
  }
  .hero__media,
  .phero__bg{
    width:100%;
    align-self:auto;
  }
  /* במובייל אין חיתוך בכלל. החלון תמיד ביחס של הקובץ עצמו,
     ולכן הפריים המלא נראה והדמות שלמה מכף רגל ועד ראש.
     חיתוך לפורטרט הוא מה שחתך אותה קודם */
  /* היחסים לכל תמונה נקבעים למעלה וחלים גם כאן. רק מבטלים תקרות */
  .hero__media,
  .phero__bg{ max-height:none; }
  /* קריאות במובייל: אף טקסט לא יורד מתחת ל-12px, ויעדי מגע 44px */
  .eyebrow{ font-size:.78rem; letter-spacing:.2em; }
  .arrow{ min-height:44px; align-items:center; }
  .item__meta{ font-size:.88rem; }
  /* אותה היררכיה כמו בדסקטופ: שם הסטודיו גדול, הוורדמארק מתחתיו */
  /* אותה יחידה ממורכזת כמו בדסקטופ. בלי זה כל שורה מתיישרת אחרת */
  .hero .hero__panel{ text-align:center; }
  .hero .d1{ font-size:clamp(2rem, 8.4vw, 2.9rem); font-weight:250; margin-block-end:10px; }
  .hero__mark{ font-size:clamp(1.2rem, 5.2vw, 1.7rem); text-align:center; margin-block:0 18px; padding-block-end:16px; border-block-end:1px solid var(--line-2); }
  .hero .hero__sub{ max-width:none; margin-inline:auto; }
  .hero .btns{ justify-content:center; }
  .hero__media .frame img,
  .phero__bg .frame img{ object-position:50% 50%; }

  .hero__in,
  .phero .wrap{
    padding-inline:var(--gut);
    padding-block:clamp(28px,6vw,44px) clamp(6px,2vw,14px);
  }
  .hero__panel,
  .phero .hero__panel{ max-width:none; }
  .hero__sub{ max-width:38ch; }
  .phero .lead{ max-width:44ch; }
  .scroller{ display:none; }
}

/* ============================================================
   כרטיסי השיעורים
   ============================================================ */

.cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(30px, 3.6vw, 60px) clamp(26px, 3.2vw, 54px);
}

.item{
  display:block;
  position:relative;
  transition:transform .5s var(--ease-out);
}
.item .frame{
  aspect-ratio:4/5;
  margin-block-end:clamp(16px,1.9vw,24px);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:box-shadow .55s var(--ease), transform .55s var(--ease-out);
}
/* וילון אור חמים שעולה מתחתית התצלום בריחוף */
.item .frame::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to top,
    rgb(var(--forest-rgb) / .34) 0%,
    rgb(var(--forest-rgb) / .10) 26%,
    rgb(var(--forest-rgb) / 0) 52%);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.item:hover{ transform:translateY(-5px); }
.item:hover .frame{ box-shadow:var(--sh-2); }
.item:hover .frame::before{ opacity:1; }

.item__num{
  position:absolute;
  inset-block-start:14px;
  inset-inline-start:14px;
  z-index:2;
  background:rgb(var(--ink-rgb) / .9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--forest);
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.1em;
  padding:6px 11px;
  border-radius:100px;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.item:hover .item__num{ background:var(--gold); color:var(--paper); }

.item__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.item h3{
  font-size:clamp(1.45rem,2.35vw,2.05rem);
  font-weight:300;
  letter-spacing:-.026em;
  color:var(--paper);
  transition:color .35s;
}
.item:hover h3{ color:var(--ember); }
.item__go{
  font-size:1.25rem;
  color:var(--ember);
  flex:none;
  transition:translate .42s var(--ease-out);
}
.item:hover .item__go{ translate:-8px 0; }

.item__meta{
  margin-block-start:11px;
  padding-block-start:11px;
  border-block-start:1px solid var(--line);
  font-size:.84rem;
  color:var(--paper-3);
  display:flex;
  flex-wrap:wrap;
  gap:5px 14px;
}
.item__meta span{ position:relative; }
.item__meta span + span{ padding-inline-start:15px; }
.item__meta span + span::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.6em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--ember-lo);
}
.item__desc{
  margin-block-start:13px;
  font-size:1rem;
  line-height:1.62;
  color:var(--paper-2);
  max-width:44ch;
}

/* שורת "מכאן ממשיכים" */
.cards--row .item .frame{ aspect-ratio:16/11; }
.cards--row .item h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); }

/* הכרטיס הרחב, לקורס הדגל. מישור מורם שעובד על כל הרצועות */
.item--wide{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,3.2vw,54px);
  align-items:center;
  padding:clamp(16px,1.9vw,26px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    linear-gradient(142deg, rgb(255 255 255 / .78), rgb(255 255 255 / .3) 62%),
    linear-gradient(142deg, rgb(var(--sage-rgb) / .1), rgb(var(--gold-rgb) / .07));
  box-shadow:var(--sh-1);
  transition:box-shadow .55s var(--ease), transform .5s var(--ease-out), border-color .5s;
}
.item--wide:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-5px); }
.item--wide .frame{ aspect-ratio:16/11; margin:0; }
.item--wide h3{ font-size:clamp(1.7rem,3.1vw,2.8rem); }
.item--wide .item__desc{ font-size:1.05rem; max-width:48ch; }
.item--wide .item__meta{ border-block-start-color:var(--line-2); }

@media (max-width:820px){
  .cards{ grid-template-columns:1fr; gap:40px; }
  .item--wide{ grid-template-columns:1fr; align-items:start; }
  /* 16:11 גם במובייל, זהה ליחס של course-wide.jpg. כל סטייה כאן
     חוזרת לחתוך את הראש */
  .item--wide .frame{ aspect-ratio:16/11; margin-block-end:20px; }
}

/* ============================================================
   רשתות ובלוקים
   ============================================================ */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5.2vw,92px);
  align-items:center;
}
.split--tilt{ grid-template-columns:1.04fr .96fr; align-items:end; }
@media (max-width:880px){
  .split, .split--tilt{ grid-template-columns:1fr; gap:40px; align-items:start; }
}

.cols3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(244px,1fr));
  gap:clamp(26px,3vw,50px) clamp(24px,2.8vw,48px);
}

.card{
  position:relative;
  border-block-start:1px solid var(--line-2);
  padding-block-start:24px;
  transition:border-color .45s var(--ease);
}
.card::before{
  content:'';
  position:absolute;
  inset-block-start:-1px;
  inset-inline-start:0;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width .55s var(--ease-out);
}
.card:hover::before{ width:46px; }
.card h4{ margin-block-end:12px; color:var(--paper); }
.card p{ color:var(--paper-2); font-size:.98rem; margin-bottom:0; }

/* ציטוט ענק */
.pull{
  position:relative;
  font-family:'Heebo',sans-serif;
  font-weight:250;
  font-size:clamp(1.85rem,4.8vw,3.9rem);
  line-height:1.13;
  letter-spacing:-.035em;
  color:var(--paper);
  max-width:19ch;
  margin:0;
  text-wrap:balance;
}
.pull::before{
  content:'';
  display:block;
  width:52px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  margin-block-end:clamp(22px,2.8vw,34px);
}
.pull em{ font-style:normal; color:var(--ember); }
[style*="text-align:center"] .pull::before{ margin-inline:auto; }
.pull__by{
  display:block;
  margin-block-start:26px;
  font-family:'Heebo',sans-serif;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-3);
}

/* רשימת נקודות */
.marks{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.6vw,19px); }
.marks li{
  position:relative;
  padding-inline-start:28px;
  color:var(--paper-2);
  font-size:1.02rem;
  line-height:1.62;
}
.marks li::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.62em;
  width:11px;
  height:11px;
  border-radius:50%;
  border:2px solid var(--gold);
}

/* טבלת פרטים */
.facts{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(20px,2.6vw,44px);
  margin:0;
  border-block-start:1px solid var(--line-2);
}
.facts dt{
  font-family:'Heebo',sans-serif;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember);
  padding-block:16px;
  border-block-end:1px solid var(--line);
  white-space:nowrap;
  align-self:center;
}
.facts dd{
  margin:0;
  padding-block:16px;
  border-block-end:1px solid var(--line);
  color:var(--paper-2);
  font-size:1rem;
  line-height:1.55;
  align-self:center;
}
@media (max-width:620px){
  .facts{ grid-template-columns:1fr; }
  .facts dt{ padding-block:16px 0; border:0; }
  .facts dd{ padding-block:4px 16px; }
}

/* מחירון */
.price{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 22px;
  align-items:baseline;
  padding:14px clamp(8px,1.2vw,14px);
  margin-inline:calc(-1 * clamp(8px,1.2vw,14px));
  border-block-end:1px solid var(--line);
  border-radius:var(--r-xs);
  transition:background .3s var(--ease);
}
.price:first-of-type{ border-block-start:1px solid var(--line); }
.price:hover{ background:rgb(var(--sage-rgb) / .1); }
.price b{ font-weight:500; color:var(--paper); font-size:1.02rem; }
.price i{ font-style:normal; display:block; font-size:.85rem; color:var(--paper-3); line-height:1.5; margin-block-start:2px; }
.price em{
  font-style:normal;
  font-family:'Heebo',sans-serif;
  font-weight:400;
  font-size:1.22rem;
  color:var(--ember);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* גלריה: פסיפס עריכתי */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.gallery .frame:nth-child(3n+1){ aspect-ratio:3/4; }
.gallery .frame:nth-child(3n+2){ aspect-ratio:1/1; }
.gallery .frame:nth-child(3n+3){ aspect-ratio:4/5; }

@media (min-width:900px){
  .gallery{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:clamp(158px,15.5vw,244px);
    gap:clamp(10px,1vw,14px);
  }
  /* :nth-child(n) כדי לגבור על יחסי הממדים של ברירת המחדל בסלקטיביות זהה */
  .gallery .frame:nth-child(n){ aspect-ratio:auto; height:100%; }
  .gallery .frame:nth-child(1){ grid-column:span 4; grid-row:span 2; }
  .gallery .frame:nth-child(2){ grid-column:span 4; }
  .gallery .frame:nth-child(3){ grid-column:span 4; }
  .gallery .frame:nth-child(4){ grid-column:span 3; }
  .gallery .frame:nth-child(5){ grid-column:span 3; }
  .gallery .frame:nth-child(6){ grid-column:span 2; }
}

/* ============================================================
   CTA
   ============================================================ */

.cta{
  position:relative;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 88% at 50% 0%,   rgb(var(--gold-rgb) / .20), transparent 62%),
    radial-gradient(95% 80% at 100% 100%, rgb(var(--sage-rgb) / .26), transparent 64%),
    radial-gradient(85% 70% at 0% 100%,   rgb(var(--sage-rgb) / .14), transparent 60%),
    var(--ink-2);
  box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.cta .eyebrow{ justify-content:center; }
.cta .d2{ margin-block-end:clamp(18px,2.2vw,26px); }
.cta .lead{ margin-inline:auto; margin-block-end:clamp(30px,3.6vw,44px); }
.cta .btns{ justify-content:center; }

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

.foot{
  position:relative;
  background:var(--ink-3);
  box-shadow:inset 0 1px 0 var(--line-2);
  padding-block:clamp(52px,7vh,88px) 32px;
  font-size:.94rem;
}
/* ---- הגוש הממורכז ---- */
.foot__mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  padding-block-end:clamp(30px,4vh,44px);
  border-block-end:1px solid var(--line);
}
.foot .mark{ font-size:1.45rem; }
.foot__tag{
  margin:14px 0 0;
  color:var(--paper-3);
  font-size:.92rem;
  max-width:44ch;
}

/* ---- שלושת הקישורים ---- */
.foot__nav{
  margin-block-start:clamp(26px,3.4vh,38px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px clamp(22px,3.4vw,44px);
}
.foot__nav a{
  font-family:'Heebo',sans-serif;
  font-size:1rem;
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--paper);
  padding-block-end:4px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:color .3s, box-shadow .3s;
}
.foot__nav a:hover,
.foot__nav a:focus-visible{ color:var(--forest); box-shadow:inset 0 -1px 0 var(--gold); }

/* ---- שלושת האייקונים ---- */
.foot__social{
  list-style:none;
  margin:clamp(24px,3.2vh,34px) 0 0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:14px;
}
.foot__social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line-2);
  color:var(--forest);
  background:transparent;
  transition:background .3s, border-color .3s, color .3s, transform .35s var(--ease-out);
}
.foot__social svg{ width:20px; height:20px; display:block; }
.foot__social a:hover,
.foot__social a:focus-visible{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--ink);
  transform:translateY(-2px);
}

/* ---- שורת הבסיס ---- */
.foot__base{
  padding-block-start:22px;
  display:flex;
  flex-wrap:wrap;
  gap:8px clamp(16px,2.4vw,28px);
  justify-content:center;
  align-items:center;
  text-align:center;
  color:var(--paper-3);
  font-size:.8rem;
  letter-spacing:.01em;
}
.foot__legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px clamp(14px,2vw,24px);
}
.foot a{ color:inherit; transition:color .3s, box-shadow .3s; }
.foot__base a{ box-shadow:inset 0 -1px 0 transparent; }
.foot__base a:hover,
.foot__base a:focus-visible{ color:var(--forest); box-shadow:inset 0 -1px 0 var(--line-2); }

@media (max-width:520px){
  .foot__nav{ gap:10px 26px; }
  .foot__base{ flex-direction:column; gap:12px; }
}

/* וואטסאפ צף */
.wa{
  position:fixed;
  inset-block-end:22px;
  inset-inline-start:22px;
  z-index:90;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold);
  color:var(--paper);
  display:grid;
  place-items:center;
  box-shadow:0 3px 8px rgb(var(--forest-rgb) / .12), 0 16px 34px -14px rgb(var(--gold-rgb) / .95);
  transition:transform .4s var(--ease-out), background .35s, color .35s, box-shadow .4s;
}
.wa:hover{
  transform:translateY(-4px) scale(1.05);
  background:var(--forest);
  color:var(--ink);
  box-shadow:0 3px 8px rgb(var(--forest-rgb) / .16), 0 22px 40px -16px rgb(var(--forest-rgb) / .7);
}
.wa svg{ width:26px; height:26px; }

/* ============================================================
   אנימציית כניסה
   ============================================================ */

.rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rise.in{ opacity:1; transform:none; }
.rise[data-d="1"]{ transition-delay:.08s; }
.rise[data-d="2"]{ transition-delay:.16s; }
.rise[data-d="3"]{ transition-delay:.24s; }
.rise[data-d="4"]{ transition-delay:.32s; }
.rise[data-d="5"]{ transition-delay:.40s; }

@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
*{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ============================================================
   קריאות במובייל. הבלוק הזה חייב להיות אחרון בקובץ, כי .facts dt
   ו-.pull__by מוגדרים אחרי מדיה קוורי המובייל הראשי ולכן גברו עליו.
   אף טקסט לא יורד מתחת ל-12px.
   ============================================================ */
@media (max-width:900px){
  .facts dt{ font-size:.78rem; letter-spacing:.14em; }
  .pull__by{ font-size:.8rem; letter-spacing:.14em; }
  .foot__base{ font-size:.82rem; }
  .mark small{ font-size:.62rem; }
}

/* ============================================================
   לוח השיעורים החי מארבוקס
   ============================================================ */
.sched-head{ padding-block:clamp(120px,15vh,190px) clamp(24px,3vw,40px); }

.sched{
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--sh-2);
}
.sched__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px clamp(16px,2vw,26px);
  background:var(--ink-2);
  border-block-end:1px solid var(--line);
  font-family:'Heebo',sans-serif;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ember);
}
.sched__bar .arrow{ letter-spacing:normal; text-transform:none; font-size:.9rem; }
/* ארבוקס מגיש אפליקציה מלאה. גובה נדיב כדי שלא ייווצר גלילה בתוך גלילה */
.sched__frame{
  display:block;
  width:100%;
  height:clamp(620px, 84svh, 980px);
  border:0;
  background:#fff;
}
@media (max-width:700px){
  .sched__frame{ height:clamp(560px, 78svh, 760px); }
  .sched__bar{ font-size:.72rem; }
}

/* עמוד הסיפור: הירו עם פורטרט אנכי, שמתאים לעמוד על אדם */


/* עמוד הקורס במובייל: הכיתוב בהירו ארוך משל האחרים ומנפח את ההדר.
   מקצרים את המידה ואת המרווחים כדי לחזור לטווח של שאר האתר */
@media (max-width:900px){
  .hero__sub{ font-size:1rem; line-height:1.6; margin-block-end:20px; }
  .hero .btns{ gap:10px; }
  .hero .btn{ padding-block:13px; }
}

/* ============================================================
   עמודים משפטיים: פרטיות, תקנון, הצהרת נגישות
   ============================================================ */
.legal-head{ padding-block:clamp(120px,15vh,190px) clamp(24px,3vw,40px); }

.legal{
  max-width:70ch;
  margin-inline:auto;
  font-size:1.02rem;
  line-height:1.78;
  color:var(--paper-2);
}
.legal > * + *{ margin-block-start:1.05em; }
.legal h2{
  font-family:'Heebo',sans-serif;
  font-size:clamp(1.32rem,2.1vw,1.62rem);
  font-weight:350;
  letter-spacing:-.018em;
  line-height:1.3;
  color:var(--ember);
  margin-block-start:2.4em;
  padding-block-end:.5em;
  border-block-end:1px solid var(--line);
}
.legal h2:first-child{ margin-block-start:0; }
.legal h3{
  font-family:'Heebo',sans-serif;
  font-size:1.02rem;
  font-weight:500;
  color:var(--paper);
  margin-block-start:1.9em;
}
.legal p{ margin-block:0; }
.legal strong{ font-weight:600; color:var(--paper); }
.legal ul,.legal ol{ margin-block:0; padding-inline-start:1.35em; display:grid; gap:.5em; }
.legal li::marker{ color:var(--ember-lo); }
.legal a{
  color:var(--ember);
  box-shadow:inset 0 -1px 0 var(--line-2);
  transition:box-shadow .3s;
}
.legal a:hover,.legal a:focus-visible{ box-shadow:inset 0 -1px 0 var(--gold); }

/* שורת "עדכון אחרון" ותיבות הדגשה */
.legal__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-family:'Heebo',sans-serif;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-3);
  padding-block-end:1.6em;
  border-block-end:1px solid var(--line);
  margin-block-end:2.2em;
}
.legal__note{
  background:var(--sage-wash);
  border-inline-start:2px solid var(--ember-lo);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  font-size:.96rem;
}
.legal__note p{ margin-block:0; }
.legal__note > * + *{ margin-block-start:.7em; }

@media (max-width:600px){
  .legal{ font-size:.98rem; line-height:1.74; }
}

/* ============================================================
   תוסף הנגישות
   ============================================================ */

/* ---- הכפתור הצף ---- */
.a11y-btn{
  position:fixed;
  inset-block-end:22px;
  inset-inline-end:22px;
  z-index:95;
  width:52px; height:52px;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--ink);
  color:var(--forest);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--sh-2);
  transition:background .3s, color .3s, transform .35s var(--ease-out);
}
.a11y-btn svg{ width:26px; height:26px; display:block; }
.a11y-btn:hover{ background:var(--forest); color:var(--ink); transform:translateY(-2px); }

/* ---- הלוח ---- */
.a11y-panel{
  position:fixed;
  inset-block-end:86px;
  inset-inline-end:22px;
  z-index:96;
  width:min(310px, calc(100vw - 44px));
  max-height:min(74svh, 620px);
  overflow-y:auto;
  background:var(--ink);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:20px;
  font-size:.94rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .28s, transform .32s var(--ease-out), visibility .28s;
}
.a11y-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

.a11y-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block-end:14px;
  margin-block-end:14px;
  border-block-end:1px solid var(--line);
}
.a11y-panel__head h2{
  margin:0;
  font-family:'Heebo',sans-serif;
  font-size:1rem;
  font-weight:500;
  color:var(--paper);
}
.a11y-close{
  border:0; background:none; cursor:pointer;
  font-size:1.5rem; line-height:1;
  color:var(--paper-3);
  padding:2px 6px; border-radius:var(--r-sm);
  transition:color .3s;
}
.a11y-close:hover{ color:var(--forest); }

.a11y-group{ display:grid; gap:8px; }
.a11y-group + .a11y-group{ margin-block-start:16px; }
.a11y-group h3{
  margin:0 0 2px;
  font-family:'Heebo',sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
}
.a11y-opt{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--ink-2);
  color:var(--paper);
  font-family:'Assistant',sans-serif;
  font-size:.92rem;
  cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.a11y-opt:hover{ border-color:var(--line-2); background:var(--ink-3); }
.a11y-opt[aria-pressed="true"]{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--ink);
}
.a11y-opt svg{ width:17px; height:17px; flex:none; }
.a11y-reset{
  margin-block-start:16px;
  width:100%;
  padding:10px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:none;
  color:var(--paper-2);
  font-family:'Assistant',sans-serif;
  font-size:.88rem;
  cursor:pointer;
  transition:color .25s, border-color .25s;
}
.a11y-reset:hover{ color:var(--forest); border-color:var(--forest); }
.a11y-panel__foot{
  margin-block-start:14px;
  padding-block-start:12px;
  border-block-start:1px solid var(--line);
  font-size:.82rem;
  color:var(--paper-3);
  text-align:center;
}
.a11y-panel__foot a{ color:var(--ember); box-shadow:inset 0 -1px 0 var(--line-2); }

@media (max-width:520px){
  .a11y-btn{ inset-block-end:18px; inset-inline-end:18px; width:48px; height:48px; }
  .a11y-panel{ inset-block-end:76px; inset-inline-end:18px; }
}

/* ------------------------------------------------------------
   מצבי הנגישות עצמם. נדבקים ל-html דרך data-a11y-*
   ------------------------------------------------------------ */

/* הגדלת טקסט. כל האתר ב-rem, ולכן שינוי בשורש מזיז הכל */
html[data-a11y-font="1"]{ font-size:112.5%; }
html[data-a11y-font="2"]{ font-size:125%; }
html[data-a11y-font="3"]{ font-size:140%; }

/* ניגודיות גבוהה */
html[data-a11y-contrast="high"]{
  --ink:#FFFFFF; --ink-2:#FFFFFF; --ink-3:#F4F4F4; --ink-4:#E8E8E8;
  --paper:#000000; --paper-2:#1A1A1A; --paper-3:#262626;
  --ember:#12312C; --ember-lo:#2E4A45; --sage-wash:#EDF2EE;
  --line:rgb(0 0 0 / .34); --line-2:rgb(0 0 0 / .55); --line-3:rgb(0 0 0 / .78);
}

/* מונוכרום. הפילטר על ילדי body ולא על html, כי filter על השורש
   הופך אותו לבלוק מכיל ומשבש אלמנטים ב-position:fixed */
html[data-a11y-contrast="mono"] body > *{ filter:grayscale(1); }

/* הדגשת קישורים.
   התפריט הראשי מוחרג: יש לו כבר קו זהב משלו דרך .menu a::after,
   וקו דפדפן נוסף מעליו נראה שבור. במקומו מוצג הקו שלו במלוא הרוחב */
html[data-a11y-links="1"] a:not(.btn):not(.mark):not(.a11y-opt):not(.a11y-btn){
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
/* ההחרגה נכתבת כביטול נפרד ולא כ-:not(.menu a), כי :not עם צירוף
   מורכב הוא Selectors L4. אם דפדפן לא תומך, כל הכלל נופל והדגשת
   הקישורים מתה. !important כאן כי לסלקטור שלמעלה ספציפיות גבוהה */
html[data-a11y-links="1"] .menu a{ text-decoration:none !important; }
html[data-a11y-links="1"] .menu a::after{ width:100%; opacity:.5; }
html[data-a11y-links="1"] .menu a[aria-current]::after{ opacity:1; }

/* פונט קריא */
html[data-a11y-readable="1"] body,
html[data-a11y-readable="1"] .d1,
html[data-a11y-readable="1"] .d2,
html[data-a11y-readable="1"] .d3,
html[data-a11y-readable="1"] .d4,
html[data-a11y-readable="1"] h1,
html[data-a11y-readable="1"] h2,
html[data-a11y-readable="1"] h3,
html[data-a11y-readable="1"] h4,
html[data-a11y-readable="1"] h5,
html[data-a11y-readable="1"] .lead,
html[data-a11y-readable="1"] .eyebrow{
  font-family:'Arial','Assistant',sans-serif;
  letter-spacing:normal;
  font-weight:400;
}
html[data-a11y-readable="1"] .d1,
html[data-a11y-readable="1"] .d2{ font-weight:500; }

/* ריווח טקסט */
html[data-a11y-spacing="1"] body{
  line-height:1.9;
  letter-spacing:.04em;
  word-spacing:.14em;
}
html[data-a11y-spacing="1"] p{ line-height:2; }

/* עצירת אנימציות */
html[data-a11y-motion="off"] *{
  animation:none;
  transition:none;
  scroll-behavior:auto;
}
html[data-a11y-motion="off"] .rise{ opacity:1; transform:none; }

/* דילוג לתוכן */
.a11y-skip{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:50%;
  translate:-50% -140%;
  z-index:200;
  background:var(--forest);
  color:var(--ink);
  padding:12px 22px;
  border-radius:0 0 var(--r-md) var(--r-md);
  font-family:'Heebo',sans-serif;
  font-size:.9rem;
  transition:translate .25s var(--ease-out);
}
.a11y-skip:focus{ translate:-50% 0; }

/* מיקוד גלוי בכל האתר. בסיס נגישות, לא רק כשהתוסף פעיל */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ============================================================
   הסכמה לעוגיות ולמעקב
   הבאנר חוסם את הפיקסל בפועל, לא רק מצהיר עליו
   ============================================================ */

.cbar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:120;
  background:var(--ink);
  border-block-start:1px solid var(--line-2);
  box-shadow:0 -8px 40px -20px rgb(var(--forest-rgb) / .5);
  padding:clamp(18px,2.4vw,26px) 0;
  transform:translateY(110%);
  transition:transform .45s var(--ease-out);
}
.cbar.is-open{ transform:translateY(0); }

.cbar__in{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,44px);
}
.cbar__txt{ flex:1 1 auto; min-width:0; }
.cbar__txt h2{
  margin:0 0 6px;
  font-family:'Heebo',sans-serif;
  font-size:1.02rem;
  font-weight:500;
  color:var(--paper);
}
.cbar__txt p{
  margin:0;
  font-size:.92rem;
  line-height:1.62;
  color:var(--paper-2);
  max-width:74ch;
}
.cbar__txt a{ color:var(--ember); box-shadow:inset 0 -1px 0 var(--line-2); }
.cbar__txt a:hover{ box-shadow:inset 0 -1px 0 var(--gold); }

.cbar__btns{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.cbtn{
  font-family:'Heebo',sans-serif;
  font-size:.92rem;
  font-weight:400;
  padding:12px 22px;
  border-radius:var(--r-md);
  border:1px solid var(--line-2);
  background:none;
  color:var(--paper);
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s, border-color .25s, color .25s;
}
.cbtn:hover{ border-color:var(--forest); color:var(--forest); }
.cbtn--main{
  background:var(--gold);
  border-color:var(--gold);
  color:#33240A;
  font-weight:500;
}
.cbtn--main:hover{ background:var(--gold-dp); border-color:var(--gold-dp); color:#33240A; }
.cbtn--link{
  border:0;
  padding:12px 6px;
  color:var(--paper-3);
  box-shadow:inset 0 -1px 0 transparent;
}
.cbtn--link:hover{ color:var(--forest); box-shadow:inset 0 -1px 0 var(--line-2); }

@media (max-width:940px){
  .cbar__in{ flex-direction:column; align-items:stretch; gap:16px; }
  .cbar__btns{ justify-content:flex-start; }
  .cbtn{ flex:1 1 auto; text-align:center; }
  .cbtn--link{ flex-basis:100%; }
}

/* ---- לוח ההעדפות ---- */
.cprefs{
  position:fixed;
  inset:0;
  z-index:130;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgb(var(--forest-rgb) / .34);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.cprefs.is-open{ opacity:1; visibility:visible; }
.cprefs__box{
  width:min(560px, 100%);
  max-height:86svh;
  overflow-y:auto;
  background:var(--ink);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:clamp(22px,3vw,34px);
  transform:translateY(12px);
  transition:transform .35s var(--ease-out);
}
.cprefs.is-open .cprefs__box{ transform:translateY(0); }
.cprefs__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-block-end:16px;
  border-block-end:1px solid var(--line);
}
.cprefs__head h2{
  margin:0;
  font-family:'Heebo',sans-serif;
  font-size:1.24rem;
  font-weight:400;
  color:var(--paper);
}

/* שורת קטגוריה */
.crow{
  padding-block:20px;
  border-block-end:1px solid var(--line);
}
.crow__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.crow__top h3{
  margin:0;
  font-family:'Heebo',sans-serif;
  font-size:1rem;
  font-weight:500;
  color:var(--paper);
}
.crow p{
  margin:8px 0 0;
  font-size:.9rem;
  line-height:1.6;
  color:var(--paper-2);
}
.crow__fixed{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:'Heebo',sans-serif;
  color:var(--ember-lo);
  white-space:nowrap;
}

/* מתג */
.csw{
  flex:none;
  position:relative;
  width:46px; height:26px;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:var(--ink-3);
  cursor:pointer;
  padding:0;
  transition:background .25s, border-color .25s;
}
.csw::after{
  content:'';
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--paper-3);
  transition:translate .28s var(--ease-out), background .25s;
}
.csw[aria-checked="true"]{ background:var(--forest); border-color:var(--forest); }
.csw[aria-checked="true"]::after{ translate:-20px 0; background:var(--ink); }

.cprefs__foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-block-start:22px;
}
.cprefs__foot .cbtn{ flex:1 1 auto; text-align:center; }

/* הכפתורים הצפים נדחפים מעל הבאנר כל עוד הוא פתוח */
body.has-cbar .wa,
body.has-cbar .a11y-btn{ inset-block-end:calc(22px + var(--cbar-h, 0px)); }
body.has-cbar .a11y-panel{ inset-block-end:calc(86px + var(--cbar-h, 0px)); }
@media (max-width:520px){
  body.has-cbar .wa,
  body.has-cbar .a11y-btn{ inset-block-end:calc(18px + var(--cbar-h, 0px)); }
  body.has-cbar .a11y-panel{ inset-block-end:calc(76px + var(--cbar-h, 0px)); }
}

/* טבלת העוגיות בעמוד הפרטיות */
.ctable{ overflow-x:auto; }
.ctable table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:.92rem;
}
.ctable th,.ctable td{
  text-align:start;
  vertical-align:top;
  padding:12px 14px;
  border-block-end:1px solid var(--line);
}
.ctable th{
  font-family:'Heebo',sans-serif;
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ember);
  background:var(--ink-2);
}
.ctable td:first-child{ font-weight:600; color:var(--paper); white-space:nowrap; }

/* קישורים בתוך פסקת טקסט חייבים להיות ניתנים לזיהוי גם בלי צבע (WCAG 1.4.1).
   הכלל הגלובלי a{text-decoration:none} הסיר את הקו, וקישור בתוך <p> נשאר מובחן
   בצבע בלבד. מוחזר קו תחתון לקישורים בתוך טקסט רץ בלבד, לא לכפתורים ולניווט.

   תוקן 27.07: הסלקטור היה li > a, שתפס את כל התפריט הראשי (כל פריט
   תפריט הוא a בתוך li) ואת אייקוני הרשתות בפוטר, וצייר קו תחתון מתחת
   לכולם. הכוונה הייתה טקסט רץ בלבד, ולכן חלק ה-li צומצם לעמודים
   המשפטיים, שם באמת יש קישורים בתוך רשימות. */
p > a:not(.btn):not(.mark):not([class*="btn"]),
.legal li > a:not(.btn):not(.mark):not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   ההירו במובייל
   ------------------------------------------------------------
   מתחת ל-900 העמודות נערמות: תמונה למעלה, טקסט מתחת. קובץ 3:1
   על מסך של 375 יוצא פס בגובה 125 פיקסלים, וזה מה שנראה חובבני.
   כאן החלון הופך לאנכי, ו-object-fit חותך רק בצדדים מתוך אותו
   קובץ רחב. הגובה נשאר שלם: רגליים, ידיים ומזרן.
   הדמות יושבת סביב 42% מרוחב הקובץ, ולכן שם ממקדים את החיתוך.
   ============================================================ */
@media (max-width:900px){
  .hero__media:has([data-slot*="hero-main"]){ aspect-ratio:4 / 5; }
  .hero__media:has([data-slot*="hero-main"]) .frame{ height:100%; }
  .hero__media:has([data-slot*="hero-main"]) .frame img{
    height:100%;
    object-position:42% 50%;
  }
}

/* ============================================================
   הירו פול-ליד לעמודים הפנימיים
   ------------------------------------------------------------
   אותו דפוס בדיוק כמו עמוד הבית: תצלום מקצה לקצה וכרטיס זכוכית
   מרחף מעליו. מופעל דרך המחלקה is-bleed על תגית ה-header, ולכן
   עמוד שעדיין אין לו תמונה רחבה נשאר בפיצול הישן ולא נשבר.

   ⚠️ תנאי הכניסה: התמונה חייבת להיות 3:1. כל קובץ צר יותר יחזיר
   את חיתוך הגובה שרדף אותנו ב-27.07. הרצפה calc(100vw / 3)
   מבטיחה שיחס החלון לעולם לא יעבור 3, ולכן החיתוך הוא בצדדים בלבד.
   ============================================================ */
@media (min-width:901px){
  .is-bleed{
    display:block;
    position:relative;
    padding-block-start:0;
    overflow:hidden;
  }
  .is-bleed .hero__media,
  .is-bleed .phero__bg{
    position:static;
    width:100%;
    max-width:none;
    margin-inline:0;
    align-self:auto;
    height:max(calc(100vw / 3), 68svh);
  }
  /* בלי ההצמדה הזאת ה-frame נשאר בגובה הטבעי ו-overflow חותך מלמטה */
  .is-bleed .hero__media .frame,
  .is-bleed .phero__bg .frame{ height:100%; }
  .is-bleed .hero__media .frame img,
  .is-bleed .phero__bg .frame img{
    height:100%;
    object-position:50% 50%;
  }

  /* שכבת הטקסט מרחפת מעל התצלום, ממורכזת אנכית */
  .is-bleed .hero__in,
  .is-bleed > .wrap{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    align-items:center;
    max-width:none;
    margin:0;
    padding-inline:clamp(30px, 6vw, 130px) var(--gut);
    padding-block:clamp(50px,6vw,86px);
  }

  /* כרטיס הזכוכית, זהה לזה של עמוד הבית */
  .is-bleed .hero__panel{
    position:relative;
    flex:0 0 auto;
    width:clamp(320px, 34vw, 540px);
    max-width:100%;
    padding:clamp(28px,2.6vw,44px) clamp(24px,2.4vw,40px);
    background:rgb(var(--ink-rgb) / .70);
    backdrop-filter:blur(30px) saturate(1.4);
    -webkit-backdrop-filter:blur(30px) saturate(1.4);
    border:1px solid rgb(255 255 255 / .55);
    border-radius:var(--r-lg);
    box-shadow:
      0 2px 6px rgb(var(--forest-rgb) / .07),
      0 34px 76px -36px rgb(var(--forest-rgb) / .42);
  }
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .is-bleed .hero__panel{ background:rgb(var(--ink-rgb) / .93); }
  }
  .is-bleed .hero__panel::before{ content:none; display:none; }
  .is-bleed .hero__panel .lead{ max-width:none; }
  .is-bleed .scroller{ display:none; }
}

/* ============================================================
   הירו פול-ליד במובייל
   ------------------------------------------------------------
   מתחת ל-901 הבלוק של is-bleed לא פועל, ולכן העמודים נפלו לפיצול
   הישן והציגו את הקובץ הרחב כפס דק. כאן החלון הופך לאנכי (4:5),
   ו-object-fit חותך מאותו קובץ 3:1 רק ברוחב. הגובה נשאר שלם.

   לא נדרשות תמונות נפרדות למובייל.

   ⚠️ הסלקטורים כוללים :has() במכוון. בלעדיו הם מפסידים בספציפיות
   לכללי aspect-ratio:3/1 הגלובליים, והחלון היה נשאר רחב.
   ה-object-position מכוון לפי מיקום הדמות בכל קובץ, שנמדד ידנית.
   ============================================================ */
@media (max-width:900px){
  .is-bleed .phero__bg:has([data-slot*="story-hero"]),
  .is-bleed .phero__bg:has([data-slot*="classes-hero"]),
  .is-bleed .hero__media:has([data-slot*="course-hero"]),
  .is-bleed .phero__bg:has([data-slot*="pelvis-wide"]),
  .is-bleed .phero__bg:has([data-slot*="back-wide"]),
  .is-bleed .phero__bg:has([data-slot*="deepening-wide"]){
    aspect-ratio:4 / 5;
    width:100%;
    max-width:none;
    margin-inline:0;
    height:auto;
    max-height:none;
  }
  .is-bleed .hero__media .frame,
  .is-bleed .phero__bg .frame{ height:100%; }
  .is-bleed .hero__media .frame img,
  .is-bleed .phero__bg .frame img{ height:100%; }

  /* מיקוד אופקי לפי מרכז הדמות בכל תצלום */
  .is-bleed .phero__bg:has([data-slot*="story-hero"]) .frame img   { object-position:42% 50%; }
  .is-bleed .phero__bg:has([data-slot*="classes-hero"]) .frame img { object-position:47% 50%; }
  .is-bleed .hero__media:has([data-slot*="course-hero"]) .frame img{ object-position:50% 50%; }
  .is-bleed .phero__bg:has([data-slot*="pelvis-wide"]) .frame img  { object-position:54% 50%; }
  .is-bleed .phero__bg:has([data-slot*="back-wide"]) .frame img    { object-position:50% 50%; }
  .is-bleed .phero__bg:has([data-slot*="deepening-wide"]) .frame img{ object-position:47% 50%; }
}

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

   תווית מעל השדה ולא placeholder, לפי מחקר ההמרה. שדה הטלפון
   ב-dir=ltr, אחרת הספרות מתהפכות בעברית.
   ============================================================ */
.lead{
  max-width:560px;
  margin-inline:auto;
  margin-block-start:clamp(26px,3.4vw,40px);
  text-align:start;
}
.lead__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:560px){ .lead__row{ grid-template-columns:1fr; } }

.lead__field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lead__field label{
  font-family:'Heebo',sans-serif;
  font-size:.84rem;
  font-weight:500;
  color:var(--paper-2);
  letter-spacing:.01em;
}
.lead__field input{
  font-family:'Assistant',sans-serif;
  font-size:1rem;
  color:var(--paper);
  background:rgb(var(--ink-rgb) / .92);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  padding:13px 15px;
  width:100%;
  min-width:0;
  transition:border-color .25s, box-shadow .25s;
}
.lead__field input:focus{
  outline:none;
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgb(var(--forest-rgb) / .12);
}
.lead__field input[type="tel"]{ text-align:start; }
.lead__field.is-bad input{ border-color:#B4443A; }

.lead__err{
  font-size:.8rem;
  color:#B4443A;
  min-height:1em;
  line-height:1.3;
}
.lead__err:empty{ min-height:0; }

.lead .btn{
  margin-block-start:16px;
  width:100%;
  justify-content:center;
}
.lead__note{
  margin-block-start:12px;
  font-size:.84rem;
  line-height:1.6;
  color:var(--paper-3);
  text-align:center;
}

/* מפריד עדין בין הכפתור הישיר לטופס */
.lead__or{
  display:flex;
  align-items:center;
  gap:14px;
  margin-block-start:clamp(24px,3vw,34px);
  color:var(--paper-3);
  font-family:'Heebo',sans-serif;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.lead__or::before,
.lead__or::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}

/* ============================================================
   רצועת CTA חוזרת
   ------------------------------------------------------------
   נשתלת בנקודות ההחלטה לאורך העמוד, לא רק בסוף. אותו טקסט
   כפתור חוזר בכל המופעים, כי חזרה בונה זיכרון והכרעה.
   רצועה דקה במכוון, שלא תתחרה בסקציות התוכן.
   ============================================================ */
.ctastrip{
  padding-block:clamp(28px,4vh,44px);
  background:var(--ink-4);
  box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.ctastrip__in{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px clamp(20px,3vw,40px);
  text-align:center;
}
.ctastrip p{
  margin:0;
  font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.5;
  color:var(--paper);
  max-width:46ch;
}
.ctastrip .btn{ flex:none; }
@media (max-width:640px){
  .ctastrip__in{ flex-direction:column; }
  .ctastrip .btn{ width:100%; justify-content:center; }
}