/* ⭐ הגופנים הלטיניים הוסרו במכוון, וזה החיסכון הגדול ביותר בדף.
   הם נטענו במלואם — 43KB ל-Frank Ruhl ו-29KB ל-Heebo, סה"כ 72KB —
   בדף שאין בו אות לטינית אחת. זה היה כבד יותר מכל התמונות ביחד.
   התת-קבוצה העברית מכילה גם ספרות, ולכן "111" ו-"188" מרונדרים ממנה.
   אם ייכנס בעתיד טקסט לטיני אמיתי, להחזיר אותם **עם unicode-range**
   ולא בלי, אחרת הם יורדים תמיד. */
@font-face{font-family:"Frank Ruhl Libre";src:url("../assets/fonts/frank-ruhl-libre-hebrew.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:Heebo;src:url("../assets/fonts/heebo-hebrew.woff2") format("woff2");font-weight:300 800;font-display:swap}
/* ⭐ פונט הכותרות. הלל ביקש "בו מולדת", שהוא פונט בתשלום של בן אורי
   (520 ש"ח). Suez One הוא הקרוב לו ביותר מבין החינמיים שאפשר להשתמש
   בהם מיד: סריפי כבד עם נוכחות של כריכת ספר, רישיון פתוח, משקל אחד.
   ⚠️ 6.7KB בלבד — תת-הקבוצה העברית בלבד. הלטינית לא נטענת, כי אין
      בדף אות לטינית אחת. אותו שיקול כמו בשני הפונטים הקיימים.
   🔴 ולכן גם **אין בו ספרות**. טווח היוניקוד העברי אינו כולל 0-9,
      ולכן "119 ₪" בפונט הזה היה נשבר באמצע: האותיות מסואץ והספרות
      מפונט אחר. כל מה שמכיל מספר עבר במפורש ל-Heebo. */
@font-face{font-family:"Suez One";src:url("../assets/fonts/suez-one-hebrew.woff2") format("woff2");font-weight:400;font-display:swap}

/* ══════════ סולם טיפוגרפי: חמישה גדלים, וזהו ══════════
   🔴 נמדד על הדף החי: **ארבעה-עשר** גדלי פונט שונים מרונדרים בפועל
   (59, 40, 31, 29, 22, 20, 19, 18, 17, 16, 15, 14, 13, 12). עין לא
   סורקת ארבעה-עשר גדלים, היא מאבדת את ההיררכיה ומתעייפת.
   ⭐ ההבחנה בין רמות נוצרת מ**משקל, צבע ומרווח אותיות**, לא מגודל.
   אותם 16px יכולים להיות פסקה או תווית בולד עם ריווח, והעין מבחינה
   במשקל הרבה לפני שהיא מבחינה בהפרש של שני פיקסלים.
   ⚠️ כל הערכים כפולות של 4, כדי שהסולם יישאר סולם ולא אוסף. */
:root{
  --t-cap:12px;    /* תווית, eyebrow, הערת שוליים */
  --t-body:16px;   /* גוף הטקסט */
  --t-lead:20px;   /* משפט מוביל, כותרת כרטיס, מחיר */
  --t-h2:clamp(30px,8vw,44px);   /* כותרת סעיף */
  --t-h1:clamp(40px,13vw,56px);  /* שם המותג בהירו */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-synthesis-weight:none;font-weight:var(--dw);letter-spacing:var(--tr);line-height:1.18;margin:0;
  /* ⭐ מחלק את הכותרת לשורות מאוזנות במקום להשאיר מילה בודדת בשורה
     אחרונה. זה ההבדל הכי גדול בין כותרת שנראית מסודרת לכותרת שנראית
     כאילו נשפכה. דפדפן ישן פשוט מתעלם — אין מחיר. */
  text-wrap:balance}
/* ⚠️ h3 בלי כלל מפורש נופל לברירת המחדל של הדפדפן, 1.17em, כלומר 19px.
   זה מה שהחזיר גודל שישי לסולם בסעיף "איך אפשר להיפגש" — שלוש כותרות
   שאף כלל שלנו לא נגע בהן. ברירת מחדל על הסולם סוגרת את כל המשפחה. */
h3{font-size:var(--t-lead)}
/* אותה כוונה בטקסט רץ: מונע "יתום", מילה אחת לבד בשורה האחרונה של פסקה. */
p,li{text-wrap:pretty}

/* מיקוד נראה לעין. דרישת ת"י 5568, ולא קישוט. */
a:focus-visible,button:focus-visible{outline:3px solid var(--accentText);outline-offset:3px;border-radius:4px}
.skip{position:absolute;right:-9999px;top:0;background:var(--btnBg);color:var(--onAccent);padding:10px 16px;z-index:99}
.skip:focus{right:8px;top:8px}

/* 🔴 באג פריסה שהיה כאן מהיום הראשון ולא נראה כבאג: אותו אלמנט נושא גם
   את התגית section וגם את המחלקה .wrap. הקיצור padding:0 20px שבכלל
   המחלקה גובר על כלל התגית (מחלקה חזקה מתגית), ולכן **האפס שלו איפס את
   הריווח האנכי של כל הסעיפים בדף**. הסעיפים נגעו זה בזה, וכותרת של סעיף
   חדש התחילה מיד אחרי הפסקה הקודמת. זה מה שגרם לדף להיראות שפוך.
   התיקון: כל כלל נוגע רק בציר שלו. אופקי במחלקה, אנכי בתגית.
   ⚠️ בלי גרשיים אחוריים בהערה הזו — היא יושבת בתוך תבנית מחרוזת. */
.wrap{max-width:760px;margin:0 auto;padding-inline:20px}
section{padding-block:56px}
.eyebrow{font-size:var(--t-cap);letter-spacing:.14em;color:var(--muted);font-weight:700;margin:0 0 14px}

/* ⭐ מידול מ-tanyaclub: סרגל עליון **דביק** בגוון הרקע, הלוגו בקצה אחד
   וכפתור גלולה אחד בקצה השני. אצלם יש גם תפריט מלא, וכאן לא — דף נחיתה
   אחד אינו אתר, ותפריט היה שולח אנשים החוצה מהמשפך במקום לתוכו.
   🔴 זה גם עונה על ממצא מסבב ה-UX: דף של 12 מסכים בלי שום דרך לחזור
      לארבע הדרכים בלי לגלול ידנית. */
.topbar{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:9px 18px}
.topbar .mark{width:32px;height:32px;flex:0 0 auto;
  background:url("../assets/art/logo-96.webp") center/contain no-repeat}
.topbar .nm{font-family:var(--display);font-size:var(--t-body);white-space:nowrap}
.topbar .btn{margin-inline-start:auto;padding:8px 16px;font-size:var(--t-cap)}
/* ⚠️ הסרגל חופה על היעד כשקופצים לעוגן. בלי זה הכותרת של הסעיף מסתתרת
   מתחתיו בדיוק אחרי הלחיצה. */
:target{scroll-margin-top:62px}
section[id]{scroll-margin-top:62px}

/* ---------- הירו ---------- */
.hero{background:var(--heroBg);padding:var(--heroPad);text-align:center;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(40px,var(--h1),56px);margin:0 0 6px}

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

/* 1 · קלף — עיטור קו כפול מתחת לשם, כמו שער של ספר */
.h-ornament .hero h1::after{content:"";display:block;width:74px;height:0;margin:16px auto 0;
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding-top:3px;opacity:.6}

/* 2 · מרחב — יישור לימין, עמודה צרה, הרבה אוויר. אסימטרי בכוונה. */
.h-aside .hero{text-align:right}
.h-aside .hero .tag,.h-aside .hero .lead{margin-inline:0}
.h-aside .hero .btns{justify-content:flex-start}
.h-aside .hero .live{margin-inline:0;text-align:right}
.h-aside .hero h1{font-weight:400}

/* 3 · ליל לימוד — הילה חמה סביב השם */
.h-glow .hero h1{text-shadow:0 0 40px rgba(200,135,63,.28)}

/* 4 · קו הזהב — מסגרת שיער זהובה סביב ההירו. הזהב כקו, לא כטקסט. */
.h-framed .hero{position:relative}
.h-framed .hero::after{content:"";position:absolute;inset:14px;border:1px solid var(--accent);
  opacity:.55;pointer-events:none;border-radius:var(--r)}

/* 5 · כריכה — בלוק יין מלא רוחב עם טקסט שמנת. הכי שונה מכולן במבט ראשון. */
.h-masthead .hero{--ink:#F7F2E9;--muted:#DDC9C2;--accentText:#F7F2E9;--line:#7C2B36;--surface:#4B1019;
  color:#F7F2E9;border-bottom:0}
.h-masthead .hero .btn{background:#F7F2E9;color:#5E1622}
/* 6 · היכל — האיור של אלון ממלא את כל החלק העליון, והטקסט יושב בתוכו.
   ⚠️ מקור התמונה הוא **הסצנה שבתוך טבעת הזהב**, לא הלוגו המלא. מדליון
      עגול לא ממלא מלבן: מתיחה שלו הייתה מרסקת את העיגול, ו-cover על
      הקובץ העגול היה חותך את הטבעת לחצאים. החיתוך נעשה ב-qa/make-logo.mjs.
   ⚠️ שני קבצים, ורק אחד נטען בכל מסך. מלבן רחב ומלבן גבוה הם חיתוכים
      שונים מתוך עיגול, וקובץ אחד היה חותך בטלפון את הצמרת.
   ⚠️ הסמל הנפרד מוסתר כאן בכוונה. האיור **הוא** הלוגו בגרסה הזו, ומדליון
      קטן מעליו היה אומר את אותו דבר פעמיים. */
.h-immersive .hero{--ink:var(--heroInk);--muted:#E7D6CE;--accentText:var(--heroInk);--line:rgba(247,242,233,.30);
  --surface:rgba(0,0,0,.28);
  position:relative;isolation:isolate;color:var(--heroInk);border-bottom:0;overflow:hidden}
.h-immersive .emblem{display:none}
.h-immersive .hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../assets/art/hero-tall.webp") center/cover no-repeat}
/* ⭐ הצעיף הוא מה שהופך את זה לקריא. מתחת לקרני השמש הזהובות טקסט שמנת
   נעלם לגמרי. המעבר מתחזק כלפי מטה, כי שם יושבות השאלות בגופן קטן —
   הכותרת הגדולה סובלת פחות. נמדד על הפיקסלים בפועל, לא מוערך. */
.h-immersive .hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--heroVeilTop) 0%,var(--heroVeilMid) 40%,var(--heroVeilBot) 100%)}
/* 🔴 מדוע לוח ולא רק הכהיה כללית: **נמדד**, לא הוערך. דגימת הפיקסל
   הבהיר ביותר מאחורי כל שורה, אחרי חישוב cover ואחרי מיזוג הצעיף,
   הראתה שחמש משש השורות נופלות מתחת לתקן — הכותרת על 2.09 כשנדרש 3.
   הסיבה: מתחת לטקסט יש שמש זהובה כמעט-לבנה, ואין עוצמת גרדיאנט שמצילה
   טקסט שמנת מעליה בלי להרוג את האיור.
   לוח חצי-שקוף פותר את שניהם: מאחורי הטקסט הרקע חסום ו**ידוע**, ומחוץ
   ללוח האיור נשאר חי בצעיף קל. אימות חוזר אחרי השינוי, לא הנחה. */
.h-immersive .heroIn{background:var(--heroPanel);border:1px solid rgba(247,242,233,.16);
  padding:40px 22px 36px;max-width:620px;margin:0 auto;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.h-immersive .hero h1{text-shadow:0 2px 18px var(--heroShadow)}
.h-immersive .hero .btn{background:var(--heroBtnBg);color:var(--heroBtnInk);border-color:var(--heroBtnBg)}
.h-immersive .hero .btn.ghost{background:transparent;color:var(--heroInk);border-color:var(--heroInk)}

.hero .teacher{font-size:var(--t-cap);color:var(--muted);letter-spacing:.16em;margin:0 0 22px}
.hero .tag{font-size:var(--t-lead);color:var(--ink);margin:0 auto 10px;max-width:22ch}
/* ⭐ המשפט הפותח של הספר. בגופן הכותרות ולא בגופן הגוף, כי זה ציטוט
   מהספר ולא טקסט ממשק. איזון-שורות אוטומטי מכובה בכוונה: השורות כבר
   שבורות ידנית כפי שאלון כתב אותן, ואיזון אוטומטי היה משנה לו את השיר.
   הקו הזהוב מתחת הוא הזהב כ**חומר**, לא כטקסט — הלקח מגרסה 4. */
/* 🔴 הגודל והרוחב **נמדדו** ולא נבחרו לפי מראה. שתי השורות של אלון חייבות
   להישאר שתיים, אחרת השיר הופך לפסקה. סריקה של כל צירוף גודל-רוחב בדפדפן
   בשלושה רוחבי טלפון הראתה את הגבול: 34ch, ו-17px ב-360 · 19px ב-390 ·
   22px ב-430. clamp(16px,4.7vw,24px) יושב מתחת לגבול בכל השלושה.
   ⚠️ לא להגדיל "כי יש מקום". ב-360 פיקסל זה נשבר לארבע שורות. */
.hero .heroQuote{font-family:var(--display);font-weight:var(--dw);
  font-size:clamp(16px,4.7vw,24px);line-height:1.55;color:var(--ink);
  margin:0 auto 20px;max-width:34ch;text-wrap:initial;letter-spacing:var(--tr)}
.hero .heroQuote::after{content:"";display:block;width:58px;height:2px;
  margin:18px auto 0;background:var(--accent);opacity:.85}
.hero .lead,.askBlock .lead{color:var(--muted);max-width:38ch;margin:0 auto;font-size:var(--t-body)}

.price{display:inline-flex;align-items:baseline;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 22px;margin-bottom:26px}
.price b{font-family:var(--body);font-weight:800;font-size:var(--t-h2);line-height:1;color:var(--accentText)}
.price span{font-size:var(--t-cap);color:var(--muted)}

.btn{display:inline-block;background:var(--btnBg);color:var(--onAccent);text-decoration:none;
  padding:15px 34px;border-radius:var(--r);font-weight:700;font-size:var(--t-body);border:0}
.btn.ghost{background:transparent;color:var(--accentText);border:1.5px solid var(--accentText);margin-inline-start:10px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- סמל המותג בהירו ----------
   🔴 כאן ישב "דיוקן של אלון לוי" — והתמונה בדמו **לא הייתה דיוקן שלו**.
      היא איור עץ חיים על רקע כחול, והטקסט החלופי שיקר עליה. אין בידינו
      שום תצלום אמיתי של אלון, ולכן אי אפשר היה לממש את ההמלצה להציג אותו.
   ⭐ מה שנעשה במקום: סמל מותג, בדיוק כפי שוורשבסקי עושה — המורה מוצג
      דרך מיתוג ולא דרך פורטרט. alt ריק כי הסמל דקורטיבי לחלוטין;
      alt מומצא על עיטור הוא רעש לקורא מסך, לא נגישות. */
/* 🔴 זהו הלוגו האמיתי של אלון, מהקובץ ששלח במייל ב-14.09. לא סמל שייצרנו.
   אסור להחליף אותו בשום איור משלנו, בשום גרסה.

   ⚠️ **תמונה, לא מסכה** — וזו היפוך של מה שהיה כאן קודם. הסמל הקודם היה
   צורה בצבע אחד, ולכן mask נתן לו את צבע הגרסה בחינם. הלוגו של אלון הוא
   איור מלא צבע (עץ אדום, כנפיים, טבעת זהב, שמיים, הרים). mask היה מוחק
   את כל הצבע שלו ומשאיר כתם אחיד בצבע הגרסה — כלומר מוחק את המותג.
   ⚠️ הרקע הלבן הוסר בחיתוך מעגלי ב-qa/make-logo.mjs, ולכן הקובץ שקוף
   ויושב נכון גם על הגרסה הכהה. אין צורך בנכס שני לכל גוון.
   ⚠️ 140px ולא 92px. זה איור עשיר בפרטים, ובגודל הקודם הוא נקרא ככתם. */
.emblem{display:block;width:140px;height:140px;margin:0 auto 16px;
  background:url("../assets/art/logo-360.webp") center/contain no-repeat}

/* ---------- שאלות הפתיחה שלו ---------- */
.hero .kicker{font-size:var(--t-cap);letter-spacing:.08em;color:var(--muted);margin:0 0 14px}
/* ⭐ 15.09 — שאלות הפתיחה היו בלוק **מיושר-ימין בתוך הירו ממורכז**, ברוחב
   30 תווים. התוצאה: גוש שנראה מוסט משאר ההירו, עם נקודות תבליט ושורות
   שנשברות באמצע שאלה. בהירו ממורכז כל דבר צריך להיות ממורכז.
   עכשיו: שאלה לשורה, ממורכזת, בלי תבליט, עם אוויר בין השאלות. נקרא
   כרצף שאלות שנוגעות בקורא — וזו בדיוק המטרה שלהן. */
/* 🔴 אלון, בכתב במייל 15.09: "לייצר אחידות במרכוז הטקסט", ובעל פה:
   "שלא פתאום כותרת ימין, זה באמצע, שהכל פרוס בצורה מקצועית".
   נמדד על הדף: 103 אלמנטים מיושרים לתחילת השורה מול 7 ממורכזים, וחמישה
   מהשבעה הם בדיוק השאלות האלה. הן היו ממורכזות כשישבו בתוך ההירו
   הממורכז, וזה היה נכון. ברגע שירדו לסעיף משלהן בגוף הדף הן הפכו
   לחריג היחיד בסביבה מיושרת. ציר אחד לכל הדף. */
/* 🔴 היה 33ch, ו"יש בך כמיהה להכיר את / הבורא באמת?" נשבר באמצע
   המשפט. שאלה שנשברת קוראים פעמיים. 42ch מחזיק כל שאלה בשורה. */
.ask{list-style:none;margin:24px 0 20px;padding:0;max-width:42ch;text-align:start}
.ask li{margin-bottom:10px;font-size:var(--t-lead);line-height:1.6;color:var(--muted)}
.h-aside .ask{margin-inline:0;text-align:start}

/* ---------- שלושה מסלולים ---------- */
/* ⭐ 15.09 — סידור מחדש של כרטיס המסלול. קודם הכל היה **ממורכז**: אייקון,
   תווית, שם, תיאור, מחיר וכפתור, כולם על ציר אחד ובמשקל דומה. טקסט רץ
   ממורכז משאיר שני קצוות משוננים, העין מחפשת כל שורה מחדש, ושום דבר לא
   מוביל. ארבעה כרטיסים כאלה זה ארבע פעמים אותו רעש.
   עכשיו: יישור לתחילת השורה (ימין), היררכיה בארבע מדרגות, והמחיר מקבל
   שורה משלו מעל קו דק. הכרטיס גם נמוך יותר, כדי שאפשר יהיה **להשוות**
   בין מסלולים בלי לגלול — וזו כל מטרת הסעיף הזה. */
/* ⭐ מידול מ-tanyaclub, אחרי צפייה בדף החי: הכרטיסים שלהם **חסרי מסגרת
   וחסרי רקע**. הם צפים על הקרם, ומה שמעגן כל אחד הוא **עיגול דק** עם
   הדימוי בתוכו. התוצאה קלילה ועריכותית, במקום רשת של קופסאות.
   ⚠️ מה שלא נלקח מהם: הטקסט בכרטיסים שלהם ממורכז. אצלנו התיאורים ארוכים
      יותר, וטקסט רץ ממורכז נשאר אנטי-דפוס. היישור נשאר לתחילת השורה. */
.tracks{display:grid;gap:26px}
.track{background:none;border:0;border-radius:0;
  padding:0;text-align:start;display:flex;flex-direction:column}
/* העיגול: טבעת דקה בצבע הקו, והאייקון במרכזה. אותו מכשיר בדיוק שמעגן
   אצלם כל ספר וכל קורס. */
/* ⚠️ הטבעת **אינה** על האלמנט הממוסך. mask חותך את כל הרינדור של
   האלמנט, כולל ה-border שלו, ולכן טבעת על .ico נמחקה בשקט ולא הופיעה.
   .ring היא שכבה נפרדת שנושאת את העיגול, ו-.ico יושב בתוכה. */
.ring{width:78px;height:78px;flex:0 0 auto;margin:0 0 14px;
  border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center}
.ring .ico{width:34px;height:34px;margin:0;opacity:.55}
.track:hover .ring .ico{opacity:.85}
/* ---------- אייקונים מותאמים ----------
   ⛔ החליפו אימוג'ים גנריים (📖 💻 ❤️ 👤 🙏 😊 🧠 ✨). אימוג'י נראה שונה
      בכל מערכת הפעלה, אינו חלק מהמיתוג, ומוזיל דף שכל אמינותו בכנות.
   ⭐ נוצרו כשני גיליונות ב-gpt-image-2 ונחתכו לעשרה קבצים.
      נטענים כ-mask ולא כתמונה, ולכן **כל אייקון מקבל את צבע הגרסה מעצמו**
      וקובץ אחד משרת את כל חמש הגרסאות כולל הכהה. אותה טכניקה כמו הסמל. */
.ico{display:block;width:46px;height:46px;margin:0 auto 10px;background:var(--muted);opacity:.62;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico.sm{width:30px;height:30px;margin:0 0 8px}
.h-aside .track .ico{margin-inline:0}
/* 🔴 רגרסיה 23.09: שני כרטיסי הספר אוחדו לכרטיס אחד בשם book, ולא היה
   .i-book. אייקון בלי מסכה מציג ריבוע אפור מלא, כי הרקע צבוע והמסכה
   חסרה. משתמש במסכה של הספר המודפס — זה עדיין הספר. */
.i-book{-webkit-mask-image:url("../assets/art/icons/book-print.webp");mask-image:url("../assets/art/icons/book-print.webp")}
.i-book-print{-webkit-mask-image:url("../assets/art/icons/book-print.webp");mask-image:url("../assets/art/icons/book-print.webp")}
.i-book-digital{-webkit-mask-image:url("../assets/art/icons/book-digital.webp");mask-image:url("../assets/art/icons/book-digital.webp")}
.i-community{-webkit-mask-image:url("../assets/art/icons/community.webp");mask-image:url("../assets/art/icons/community.webp")}
.i-meeting{-webkit-mask-image:url("../assets/art/icons/meeting.webp");mask-image:url("../assets/art/icons/meeting.webp")}
.i-love{-webkit-mask-image:url("../assets/art/icons/love.webp");mask-image:url("../assets/art/icons/love.webp")}
.i-prayer{-webkit-mask-image:url("../assets/art/icons/prayer.webp");mask-image:url("../assets/art/icons/prayer.webp")}
.i-joy{-webkit-mask-image:url("../assets/art/icons/joy.webp");mask-image:url("../assets/art/icons/joy.webp")}
.i-imagination{-webkit-mask-image:url("../assets/art/icons/imagination.webp");mask-image:url("../assets/art/icons/imagination.webp")}
.i-study{-webkit-mask-image:url("../assets/art/icons/study.webp");mask-image:url("../assets/art/icons/study.webp")}
.i-kabbalah{-webkit-mask-image:url("../assets/art/icons/kabbalah.webp");mask-image:url("../assets/art/icons/kabbalah.webp")}
/* האייקון יורד לגודל סימן ולא איור, ועובר לתחילת השורה עם השאר.
   ⚠️ צריך margin-inline מפורש: הכלל הכללי של .ico מיישר במרכז. */
.track .ico{width:34px;height:34px;margin:0 0 12px}
.track .kick{font-size:var(--t-cap);letter-spacing:.14em;color:var(--muted);margin:0 0 5px}
.track h3{font-size:var(--t-lead);margin-bottom:7px}
.track .d{font-size:var(--t-body);color:var(--muted);margin:0 0 16px;flex:1 1 auto}
/* אזור המחיר: קו דק מפריד אותו מהתיאור, הסכום גדול ובצבע המותג והסייג
   קטן ואפור. הסכום הוא הנתון שבגללו עוצרים, ולכן הוא לא באותו משקל
   כמו שורת תיאור. */
.track .pr{margin:0 0 14px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.track .pr b{font-family:var(--body);font-size:var(--t-lead);line-height:1;color:var(--accentText);font-weight:800}
.track .pr span{font-size:var(--t-cap);color:var(--muted)}
/* הכפתור נצמד לתחילת השורה ולא נמתח לכל הרוחב. ארבעה כפתורים ברוחב מלא
   נקראים כארבע הודעות דחופות במקום כארבע אפשרויות. */
/* ⚠️ .btn.ghost נושא margin-inline-start:10px, שנועד להפריד בין שני כפתורים
   שכנים בהירו. בתוך כרטיס הוא היחיד, והמרווח הזה הסיט אותו פנימה ביחס
   לכל שאר תוכן הכרטיס — הקו הימני נשבר בדיוק בשורה האחרונה. מאופס כאן. */
.track .btn{align-self:flex-start;margin-inline-start:0}

/* ---------- מבנה המפגש ---------- */
/* יושר לתחילת השורה כמו כל השאר. במובייל הוא ממילא תופס את כל הרוחב ולא
   ניכר הבדל, אבל במסך רחב שורה ממורכזת בין כותרת מיושרת לרשימה מיושרת
   שוברת את הציר ונראית כטעות. */
.when{text-align:start;font-family:var(--body);font-weight:700;font-size:var(--t-lead);color:var(--accentText);margin:0 0 20px}
/* ⭐ מידול מ-tanyaclub: בתוך הרצועה הכהה שלהם אין קופסאות. יש **שורות
   מופרדות בקו שיער**, תווית קצרה בצד אחד ותיאור בצד השני. זה נקרא כמו
   תוכן עניינים ולא כמו רשת, וזה מה שנותן לרצועה את האופי העריכותי.
   ⚠️ הרקע ירד לשקוף. קופסה בתוך רצועה כהה היא קופסה בתוך קופסה. */
.stages{list-style:none;margin:0;padding:0;display:grid;gap:0;
  background:none;border:0;border-radius:0;overflow:visible}
.stages li{background:none;padding:18px 0;display:flex;gap:16px;align-items:flex-start;
  border-top:1px solid var(--line)}
.stages li:first-child{border-top:0}
/* ⚠️ accentText ולא accent, ואטימות .75 ולא .5. בגרסת הזהב המספר נפל
   ל-2.93 מול 3.0 הנדרשים לטקסט גדול. אותו שורש כמו בסבב הראשון:
   accent הוא חומר, accentText הוא טקסט. */
.stages .n{font-family:var(--body);font-weight:800;font-size:var(--t-lead);color:var(--accentText);opacity:.75;flex:0 0 auto}
.stages h3{font-size:var(--t-body);margin-bottom:2px}
.stages h3 em{font-style:normal;display:inline-block;margin-inline-start:10px;
  font-size:12px;color:var(--accentText);font-family:var(--body);font-weight:600;
  border:1px solid var(--line);border-radius:99px;padding:2px 10px;line-height:1.5;
  vertical-align:middle}
.band .stages h3 em{border-color:rgba(247,240,225,.28)}
.stages p{margin:0;color:var(--muted);font-size:var(--t-body)}
.note{margin:16px 0 0;font-size:var(--t-body);color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}

/* ---------- מה מקבלים ---------- */
/* ⭐ 15.09 — היה כאן ענן גלולות ממורכזות ברוחב משתנה. זה נקרא כענן
   מילים ולא כרשימה: כל שורה מתחילה במקום אחר, אי אפשר לסרוק, והפריט
   הארוך ("אפשרות לשאול ולשתף...") נשבר לשתי שורות בתוך גלולה ונראה שבור.
   עכשיו רשימה אמיתית: שורה לפריט, סימון אחיד בתחילתה, קו מפריד דק.
   העין יורדת בעמודה אחת וסופרת מה מקבלים — וזו בדיוק המשימה כאן. */
.gets{list-style:none;margin:0 0 22px;padding:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.gets li{font-size:var(--t-body);color:var(--ink);padding:13px 18px;
  display:flex;gap:11px;align-items:flex-start;border-top:1px solid var(--line)}
.gets li:first-child{border-top:0}
/* הסימון הוא צורה ולא תו טקסט: תווי וי ועיגול מתרנדרים שונה בכל מערכת
   הפעלה, ו-RTL הופך חלק מהם. נקודה בצבע המותג עובדת בכל מקום. */
.gets li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.62em;
  border-radius:50%;background:var(--accentText)}
.book .pt{font-size:var(--t-cap);letter-spacing:.12em;color:var(--muted);margin:0 0 6px}

/* ════════ מידול עיצוב מהרפרנסים ════════
   שני הרפרנסים לא משנים את הקופי ולא את המיתוג. מה שנלקח מהם הוא
   **השפה הוויזואלית** בלבד:
     · tanyaclub — טיפוגרפיה עברית גדולה מאוד, רצועת תמונה מלאת רוחב,
       מעבר בגזרה אורגנית אל בלוק כהה, כפתורי גלולה עם חץ, מספור גדול.
     · levlomedahava — רשת כרטיסים חמה, זהות מובלת לוגו.
   הפלטה נשארת של אלון: יין ושמנת. לא טורקיז ולא זהב של הרפרנס. */

/* הכותרות גדלות משמעותית. ברפרנס הן הדבר הראשון שתופס את העין.
   ⚠️ בורר ספציפי יותר בכוונה. h2 לבד נמצא באותה ספציפיות ככלל
   הטיפוגרפיה שלמעלה, והכלל שניצח היה תלוי בסדר — הכותרות נשארו 26px.
   (שוב: בלי גרש אחורי בהערה הזו, היא בתוך תבנית מחרוזת.) */
main h2,.band h2{font-size:var(--t-h2);line-height:1.1;margin-bottom:18px}

/* מעבר בגזרה אורגנית בין בלוק בהיר לכהה. inline SVG, אפס בקשות רשת. */
.tear{display:block;width:100%;height:38px;margin:0;line-height:0}
.tear svg{display:block;width:100%;height:100%}

/* רצועה כהה מלאת רוחב, כמו אצל הרפרנס אחרי ההירו.
   ⚠️ משתנה bandBg ולא accent. בגרסת הגחלת ובגרסת הזהב האקסנט **בהיר**,
   וטקסט שמנת עליו נפל ל-1.11 מול 4.5 הנדרשים. הרצועה חייבת גוון כהה
   משלה בכל גרסה, ולא את צבע המותג באשר הוא. */
.band{background:var(--bandBg);color:var(--bandInk);padding:54px 0}
.band h2,.band .when{color:var(--bandInk)}
.band .eyebrow{color:var(--bandInk);opacity:.8}
.band .stages{background:none;border:0}
.band .stages li{background:transparent;border-top-color:rgba(247,242,233,.22)}
.band .stages h3{color:var(--bandInk)}
/* 🔴 היה var(--onAccent). זה עבד כל עוד הרצועה הייתה יין ו-onAccent היה
   לבן. בפלטת שחור-וזהב onAccent הוא כמעט-שחור והרצועה שחורה, ולכן
   ארבע כותרות השלבים נעלמו לגמרי. onAccent הוא "הטקסט שיושב על מילוי
   האקסנט" — הרצועה אינה מילוי אקסנט, ולכן הצבע הנכון הוא bandInk.
   ⚠️ הבדיקה לא תפסה: אלמנט בניגודיות 1.0 על רקע זהה נבלע בשקט. */
.band .stages h3{color:var(--bandInk)}
.band .stages h3 em,.band .stages p{color:rgba(247,242,233,.78)}
/* ⚠️ אטימות .45 נתנה 1.11 מול 4.5 הנדרשים על הרצועה הכהה של גרסת
   ליל לימוד. מספר שלב הוא טקסט לכל דבר ולא קישוט, ולכן חייב לעבור כטקסט. */
.band .stages .n{color:var(--bandInk);opacity:.72}
.band .note{background:rgba(0,0,0,.16);border-color:rgba(0,0,0,.16);color:rgba(247,242,233,.85)}

/* כפתורי גלולה עם חץ, כמו ברפרנס. הגלולה גוברת על radius הגרסה בכוונה —
   זו צורת הכפתור ברפרנס, ולכן זה חלק מהמידול. */
.btn{border-radius:999px;padding:14px 30px;display:inline-flex;align-items:center;gap:10px}
/* 🔴 החיצים הוסרו מכל הכפתורים באתר, הכרעת הילל 23.09: "זה נראה
   גנרי לחלוטין". וזה נכון, וזה גם בדיוק מה שהכשיל אותנו פעמיים:
   כיוון החץ ב-RTL נשבר שוב ושוב, והוא מעולם לא הוסיף מידע שהטקסט
   לא אמר. כפתור שכתוב עליו "לפרטים על הספר" לא צריך חץ שיסביר
   שהוא מוביל למקום.
   ⚠️ אל תחזיר "בשביל אפקט hover" — יש כבר שינוי אטימות. */
.btn.small{padding:9px 18px}

/* רצועת תמונה מלאת רוחב, לא כרטיס */
.still{margin:0}
.still img{width:100%;height:auto;border-radius:0;display:block;aspect-ratio:3/1.35;object-fit:cover}

/* ---------- תנועה ----------
   ⚠️ הלל ביקש "פריימושן". Framer Motion היא ספריית React, והמערכת כאן
   סטטית בלי React ובלי שלב בנייה, ותחת אילוץ מהירות טעינה מפורש שלו.
   אותה תחושה מושגת ב-CSS בלבד: **אפס בייטים ואפס בקשות רשת**.
   ⚠️ ומכבד prefers-reduced-motion — למי שביקש להפחית תנועה בהגדרות
   המערכת, הכל מופיע מיד. זו דרישת נגישות ולא נדיבות. */
/* ⭐ אוצר התנועה נלקח מ-tanyaclub, אחרי שנמדד על הדף החי שלהם ולא נוחש:
     · riseUp  0.9s  cubic-bezier(0.22, 1, 0.36, 1)   ← עקומת הכניסה שלהם
     · zoomIn  0.75s                                   ← הופעה בהגדלה
     · כרטיס בריחוף: transform ב-0.4s, שאר המאפיינים ב-0.3s
   ⚠️ מה שלא נלקח מהם: הם טוענים jQuery ובונה-דפים שלם. כאן הכל CSS,
      אפס בייטים ואפס בקשות רשת, כי מהירות טעינה היא דרישה מפורשת.
   ⚠️ ולא נלקחה הטיפוגרפיה שלהם: נמדדו אצלם **שישה-עשר** גדלי פונט. */
@media(prefers-reduced-motion:no-preference){
  /* העקומה האחת של הדף. linear מרגיש מכני, וערבוב עקומות מרגיש מרושל. */
  :root{--ease:cubic-bezier(.22,1,.36,1)}

  .reveal{opacity:0;transform:translateY(20px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* כניסת ההירו במדרגות. כל אלמנט מאחר ב-90ms אחרי קודמו, וכך הפתיחה
     נקראת כרצף ולא כקפיצה אחת של הכל יחד. */
  .hero .emblem{animation:bloom .75s var(--ease) both}
  .hero h1{animation:rise .9s .09s var(--ease) both}
  .hero .tag{animation:rise .9s .18s var(--ease) both}
  .hero .kicker{animation:rise .9s .27s var(--ease) both}
  .hero .teacher{animation:rise .9s .36s var(--ease) both}
  .hero .btns{animation:rise .9s .45s var(--ease) both}

  /* ⭐ stagger בתוך רשתות, ב-CSS בלבד ובלי שורת JS. 90ms בין פריט
     לפריט, חסום על חמישה כדי שהפריט האחרון לא יאחר בשנייה שלמה. */
  .tracks>*:nth-child(2),.items>*:nth-child(2),.gets li:nth-child(2){transition-delay:.09s}
  .tracks>*:nth-child(3),.items>*:nth-child(3),.gets li:nth-child(3){transition-delay:.18s}
  .tracks>*:nth-child(4),.items>*:nth-child(4),.gets li:nth-child(4){transition-delay:.27s}
  .items>*:nth-child(n+5),.gets li:nth-child(n+5){transition-delay:.36s}

  /* ריחוף: הכרטיס מתרומם, המסגרת מקבלת את צבע המותג, וצל רך נפתח.
     פיצול הזמנים הוא שלהם — התנועה איטית מעט מהצבע, וזה מה שגורם
     לזה להרגיש חומרי ולא מתג. */
  .track,.faq details,.gets li{
    transition:transform .4s var(--ease),border-color .3s ease,box-shadow .3s ease}
  /* כרטיס בלי מסגרת: אין קו לצבוע ואין קופסה להרים. הריחוף עובר
     לטבעת ולאייקון, וזה גם מה שקורה אצלם. */
  .track:hover{transform:translateY(-3px)}
  .ring,.ring .ico{transition:opacity .3s ease,border-color .3s ease}
  .track:hover .ring{border-color:var(--accentText)}
  .faq details:hover{border-color:var(--accentText)}
  .btn{transition:transform .3s var(--ease),box-shadow .3s ease,opacity .15s ease}
  .btn:hover{transform:scale(1.02);box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
  /* החץ נמשך קדימה בריחוף. רמז כיווני זעיר, לא אפקט. */
  .btn::after{transition:transform .3s var(--ease)}
  .btn:hover::after{transform:translateX(-4px)}

  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes bloom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
}

/* ---------- שאלות נפוצות ---------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;margin-bottom:10px}
/* ⚠️ היה float:inline-end על הסימן. float נצמד לתחתית הבלוק כשהשאלה
   נשברת לשתי שורות, ואז הפלוס צף לבדו בשורה השנייה ונראה כמו תקלה.
   שורת flex מצמידה אותו לקצה ומיישרת אותו לשורה הראשונה תמיד. */
.faq summary{cursor:pointer;font-weight:700;font-size:var(--t-body);list-style:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
/* ⚠️ summary אינו a ואינו button, ולכן כלל המיקוד הכללי לא תפס אותו:
   עשרת הקישורים קיבלו טבעת יין בעובי 3, ושבע השאלות קיבלו את קו
   ברירת המחדל האפור של הדפדפן. אותה טבעת לכולם. */
.faq summary:focus-visible{outline:3px solid var(--accentText);outline-offset:3px;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:700;flex:0 0 auto;line-height:1.35}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted);font-size:var(--t-body)}

/* ---------- תמונת האווירה ---------- */
/* ⚠️ הכריכה בתמונה **ריקה בכוונה**. הספר עוד לא יצא, ולצייר לו כריכה
   מומצאת זו בדיוק ההמצאה שאסורה בפרויקט הזה. */
.still{margin:0 0 22px}
.still img{width:100%;height:auto;border-radius:var(--r);display:block}

/* ---------- עובדות יבשות ---------- */
.facts{margin:18px 0 0;display:grid;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts>div{background:var(--bg);padding:14px 20px;display:flex;gap:12px;align-items:baseline}
.facts dt{font-weight:700;font-size:var(--t-body);min-width:70px}
.facts dd{margin:0;color:var(--muted);font-size:var(--t-body)}

.aboutText{color:var(--muted);margin:0}

/* ---------- השיעור החי ---------- */
.live{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);
  padding:22px;margin:0 auto;max-width:520px;text-align:center}
.live .k{font-size:var(--t-cap);letter-spacing:.12em;color:var(--muted);margin:0 0 6px}
.live .v{font-family:var(--body);font-weight:700;font-size:var(--t-lead);color:var(--accentText);margin:0 0 8px}
.live .n{font-size:var(--t-cap);color:var(--muted);margin:0}

/* ---------- רשימות ---------- */
h2{font-size:var(--t-h2);margin-bottom:26px}
.items{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.item{background:var(--bg);padding:20px 22px}
.item h3{font-size:var(--t-lead);margin-bottom:4px}
.item p{margin:0;color:var(--muted);font-size:var(--t-body);line-height:1.65}

.cats{display:grid;gap:14px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.cat h3{font-size:var(--t-lead);color:var(--ink);margin-bottom:3px}
.cat p{margin:0;color:var(--muted);font-size:var(--t-body)}

/* ---------- הספר ---------- */
/* ⭐ 15.09 — גם כאן ירד המרכוז. הסכום לבדו נראה טוב ממורכז, אבל מתחתיו
   יושבת פסקת תנאי ביטול ותווית הנחה — טקסט רץ שממורכז נקרא כמו שיר.
   ציר אחד לכל הדף: הכל מתחיל מאותו קו ימני, כמו בכרטיסי המסלולים. */
.book{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;text-align:start}
.book p{color:var(--muted);margin:0;max-width:46ch}
/* ⚠️ היה גלולה (border-radius:999px). הטקסט כאן הוא משפט שלם ולא תווית,
   הוא נשבר לשתי שורות, וגלולה דו-שורתית נראית שבורה. עכשיו בלוק בפינות
   של הגרסה, עם רווח שורות שמתאים למשפט. */
/* ── כפתור יחיד לסגירת משפך ──
   ⭐ הכלל שהלל נתן: בכל מקום כפתור אחד, ויעד ספציפי. שני כפתורים זה
   לצד זה מחזירים את ההחלטה לגולש במקום להוביל אותה, וכשכולם מצביעים
   על אותו עוגן הם גם פשוט לא עובדים. */
.oneCta{margin:26px 0 0}
/* ⚠️ "ב-101 ₪" נשבר בין שורות: המספר נשאר בסוף השורה והמטבע פתח את
   הבאה. מספר ומטבע הם יחידה אחת ונקראים ככזו. */
.nb{white-space:nowrap}
.fine{font-size:var(--t-cap);color:var(--muted);margin:-8px 0 14px}
.bridge{font-family:var(--display);font-size:var(--t-lead);color:var(--accentText);
  margin:30px 0 0;max-width:30ch}
h3.sub{font-size:var(--t-lead);margin:34px 0 10px}
.badge{display:inline-block;background:var(--accentSoft);color:var(--accentText);
  border-radius:var(--r);padding:11px 16px;font-weight:700;font-size:var(--t-body);
  line-height:1.55;margin-top:18px;max-width:42ch}

/* ---------- מי מלמד ---------- */
.stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--body);font-weight:800;font-size:var(--t-lead);color:var(--accentText);line-height:1.1}
.stat span{font-size:var(--t-cap);color:var(--muted)}

/* ---------- סיום ---------- */
/* ⚠️ גם סעיף הסגירה יושר. הוא היה ממורכז, וזה נראה סביר בפני עצמו,
   אבל הוא היה החריג השני והאחרון בדף. */
.end{text-align:start;border-top:1px solid var(--line)}
.end p{color:var(--muted);margin:0 0 24px}
footer{padding:26px 20px 40px;text-align:center;color:var(--muted);font-size:var(--t-cap);border-top:1px solid var(--line)}

/* ⛔ ענף המים הוסר בהוראת אלון, פגישת 14.09.2026:
   "ולא צריך את העלים האלה... תראה במעברי דף, יש עלה כזה שהוא שם, ענף...
    כן, בלי אלמנטים. יש את הלוגו שהוא די דומיננטי, ואחרי זה כל המעברים
    יכולים להיות נקיים, ובספר יהיה כמובן את הכריכה של הספר."
   הקובץ assets/art/sprig-360.webp נשאר על הדיסק אבל אינו נטען.
   (בלי גרש אחורי בהערה הזו — היא יושבת בתוך תבנית מחרוזת, וגרש אחורי
    סוגר אותה ושובר את הבנייה.)
   אל תחזיר אותו בלי שאלון יבקש. */

/* גרעיניות נייר — inline SVG, אפס בקשות רשת ואפס משקל מדיד */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}

@media(min-width:720px){
  /* ⚠️ הסולם עולה במסך רחב, אבל נשאר **חמישה גדלים**. מגדילים את
     המשתנים, לא מוסיפים מדרגה חדשה. */
  /* ⚠️ --t-h2 לא מוגדר כאן מחדש. הוא clamp עם vw ולכן כבר גדל מעצמו,
     וערך קבוע היה **מקטין** אותו במסך רחב. */
  :root{--t-body:18px; --t-lead:22px}
  .emblem{width:164px;height:164px}
  /* במסך רחב נטען החיתוך האופקי. הגבוה היה מציג במסך רחב רצועה צרה
     מהצמרת בלבד, בלי ההרים ובלי השורשים. */
  .h-immersive .hero::before{background-image:url("../assets/art/hero-wide.webp")}
  .t-brand .hero::before{background-image:none}
  .h-immersive .hero{min-height:74svh;display:grid;align-content:center}
  .facts>div{padding:16px 24px}
  .items{grid-template-columns:1fr 1fr}
  .tracks{grid-template-columns:1fr 1fr}
  /* ⚠️ נוסה כאן פריסה לשתי עמודות במסך רחב, והוחזר. שבעה פריטים משאירים
     תא יתום, והפריט הארוך מגביה את השורה שלו ומשאיר חצי תא ריק עם קו
     מפריד שנקטע. עמודה אחת קצת ריקה מצד אחד — אבל חד-משמעית. */
  section{padding-block:80px}
}
@media(prefers-reduced-motion:no-preference){
  .btn{transition:opacity .15s ease}
  .btn:hover{opacity:.88}
}

/* ======================================================================
   HERO של הפלטה הנעולה - .t-brand בלבד. ממודל לפי הרפרנס tanyaclub.
   ======================================================================
   מה נמדד מהמקור (wp-content/uploads/elementor/css/post-5.css):

   | דרגה            | מובייל (max-767) | דסקטופ |
   |-----------------|------------------|--------|
   | primary  כותרת  | 15vw             | 7.3vw  |
   | משנית           | 11vw             | 3.3vw  |
   | secondary       | 7vw              | 2vw    |
   | accent          | 5.5vw            | 1.1vw  |
   | text     גוף    | 4.2vw            | 1.2vw  |

   הכל ב-vw, בלי clamp, ועם קפיצות ענק בין דרגות. line-height 1.2em.
   הסולם שלנו היה clamp(40px,15vw,56px) - תקרה שחתכה בדיוק את האפקט.

   מילוי הכותרות אצלם הוא גרדיאנט ולא צבע אחיד:
     linear-gradient(89deg,#143B3E 0.24%,#2A5A5D 89.25%) עם background-clip:text
   אצלם פטרול-על-בהיר, אצלנו אותו מנגנון בזהב-על-שחור. 89 מעלות ולא 90,
   וזו הטיה קלה שמונעת מהמעבר להיראות פס אופקי - ככה מתכת נראית מתכת.

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

.heroName{display:none}
.t-brand .emblem{display:none}

/* ⚠️ ביטול תמונת הרקע מלאת המסך שירשנו מגרסה 6. שם האיור של אלון מילא
   את כל ההירו, והאדום-כתום שלו משך את העמוד לאש במקום לשחור וזהב.
   כאן הוא חוזר לתפקידו במקור: אובייקט בעמודה, לא טפט. */
/* ⚠️ content:none לבדו **לא מנע את ההורדה**. נמדד: hero-tall.webp נמשך
   129KB בכל טעינה ראשונה של הפלטה הנעולה, לתמונה שאינה מוצגת כלל.
   חייבים לאפס גם את background-image, ובשני הברייקפוינטים. */
.t-brand .hero::before{content:none;background-image:none}
.t-brand .hero::after{content:none;background-image:none}
/* ── אטמוספירה. זה ההבדל הגדול ביותר מול הרפרנס, והוא לא צבע ──
   ההירו שלהם הוא צילום יער בערפל בניגודיות נמוכה, והטקסט יושב עליו ישר.
   שלנו היה שחור שטוח עם שני גרדיאנטים, כלומר אפס עומק.
   ⭐ הנכס היה אצלנו כבר מ-15.09 ולא נגענו בו: התמונה שאלון שלח "לאתר".
   🔴 **לא התמונה המלאה.** cover על מסך 9:16 עשה זום לפנים של אלון,
   וההירו נראה כמו פורטרט ענק מטושטש. נחתך ה**שליש השמאלי בלבד** —
   צללית המדיטציה, פרח החיים והזריחה — וטושטש. 10KB במובייל.
   הפנים נשארות לסעיף הקהילה, שם הן הנושא ולא הרקע.
   🔴 היא **תשתית ולא נושא**: היא נחנקת מתחת לצעיף כבד עד שנשאר ממנה
   רק עומק. ברגע שרואים אותה כתמונה היא מתחרה בטקסט ומאבדים את שניהם. */
.t-brand .hero{background:
    linear-gradient(180deg,rgba(10,10,11,.82) 0%,rgba(42,10,17,.80) 46%,rgba(12,12,13,.94) 100%),
    radial-gradient(120% 80% at 76% 6%,rgba(94,22,34,.42) 0%,rgba(12,12,13,0) 62%),
    url("../assets/art/atmo-left-620.webp") center 30%/cover no-repeat,
    var(--bg);
  padding:var(--heroPad);min-height:auto;display:block}
@media(min-width:900px){
  .t-brand .hero{background-image:
    linear-gradient(180deg,rgba(10,10,11,.80) 0%,rgba(42,10,17,.78) 46%,rgba(12,12,13,.94) 100%),
    radial-gradient(90% 90% at 78% 10%,rgba(94,22,34,.40) 0%,rgba(12,12,13,0) 62%),
    url("../assets/art/atmo-left-1100.webp")}
}

/* 🔴 הרקע הרדיאלי של ההירו נגמר בקו אופקי חד מול הסקשן הבא, והתפר
   נראה כמו שתי תמונות שהודבקו. דהייה של 120 פיקסל אל צבע הרקע. */
.t-brand .hero{position:relative}
.t-brand .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.t-brand .heroIn{position:relative;z-index:1;background:none;border:0;padding:0;max-width:1180px;
  margin:0 auto;backdrop-filter:none;-webkit-backdrop-filter:none;
  display:grid;gap:34px;justify-items:center}
/* 🔴 יישור לימין בכל הרוחבים, לא מרכוז במובייל.
   כל הרפרנס יושב על ציר אחד, וזה בדיוק מה שאלון ביקש בנקודה 7:
   "שלא פתאום כותרת ימין, זה באמצע, כאילו שהכל פרוס בצורה מקצועית". */
.t-brand .heroText{text-align:start;max-width:36rem;justify-self:stretch}

/* ⭐ הוגדל 23.09 לבקשת אלון: "אפשר אפילו גדולה יותר".
   ⚠️ **16.2vw הוא התקרה, ונמדד אחרי המרכוז.** סריקה ב-360, 390 ו-430
   נתנה 16.5vw כגבול שבו "אהבת בראשית" עדיין בשורה אחת. 16.2 משאיר
   שוליים.
   🔴 ב-17.5vw, שהיה כאן רגע, השם נשבר לשתי שורות. המרכוז צמצם את
   הרוחב הזמין, ולכן גודל שנמדד לפני המרכוז כבר לא תקף. */
.t-brand .hero h1{font-size:16.2vw;line-height:.92;margin:0 0 2px;letter-spacing:-.04em}
/* ══════════════════════════════════════════════════════════════════
   🔴 מרכוז במובייל. הכרעת אלון 23.09, שלוש פעמים נפרדות:
   [03:09] "שהכל יהיה ממורכז"
   [04:26] "בפלאפון שהכותרת, השם והטקסט, הכל בקו אמצע"
   [54:07] "מאוד חשוב לי שבפלאפון הדברים שצריכים להיות ממורכזים
            יהיו ממורכזים"
   ⚠️ **זה היפוך של מה שמידלנו מהרפרנס**, שכולו מיושר להתחלה.
   אל תחזיר יישור לימין במובייל "כי ככה ברפרנס". הלקוח הכריע.
   ⭐ בדסקטופ הטקסט חוזר ליישור להתחלה, כי שם יש שתי עמודות
   והמרכוז היה מנתק את הטקסט מהאובייקט שלצידו. הוא דיבר על פלאפון.
   ══════════════════════════════════════════════════════════════════ */
.t-brand .heroText{text-align:center}
.t-brand .heroText .btns{justify-content:center}

/* ── השם ──
   [08:44] "אלון לוי גם במרכז, גם קצת יותר בגדול,
            כי בפלאפון זה מופיע מאוד בקטן" */
.t-brand .heroName{display:block;font-family:var(--display);font-weight:var(--dw);
  font-size:7.4vw;line-height:1.05;margin:4px 0 20px;letter-spacing:-.01em;
  color:var(--ink)}

/* ── הקו הסימטרי ──
   שני חצאי קו נמתחים לרוחב מלא, והעיטור יושב במרכזם בגודל קבוע.
   ⚠️ הקו משתמש ב-preserveAspectRatio="none" ולכן הוא נמתח בלי להתעבות.
   העיטור **לא** נמתח, אחרת הוא היה מתעוות ברוחבים שונים. */
.t-brand .heroRule{position:relative;display:grid;place-items:center;
  height:26px;margin:2px 0 0;color:var(--accent)}
.t-brand .ruleLine{position:absolute;inset:0;width:100%;height:100%}
.t-brand .ruleOrn{position:relative;z-index:1;height:26px;width:auto}
@media(prefers-reduced-motion:no-preference){
  /* נמשך מהמרכז החוצה, ולכן סימטרי גם באמצע התנועה. */
  .t-brand .heroRule{clip-path:inset(0 50% 0 50%)}
  .t-brand .heroRule.hin{clip-path:inset(0 0 0 0);
    transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) var(--d,0s)}
}


/* ⭐ הזהב מנוּמן. ברפרנס הוא מופיע בארבעה תפקידים בלבד בכל הדף:
   משיכת העט · גלולת הפעולה · קווים דקים · הקו מתחת ללוגו.
   לכן המילוי הזהוב נשאר **רק על ה-H1**, שהוא רגע הזהב היחיד והגדול.
   קודם הוא היה גם על השם, וזה היה יותר זהב מאשר ברפרנס עצמו. */
.t-brand .hero h1{
  background:linear-gradient(89deg,#9C7F49 0.24%,#E8D4A4 89.25%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  padding:.06em 0}
/* 🔴 ה-color נשאר מוגדר גם כשהוא בלתי נראה. זה מה שהדפדפן ייתן ב-
   forced-colors, בקורא מסך, ובכל מקום שבו background-clip לא נתמך.
   אל תסיר אותו "כי הוא מיותר" - הוא רשת הביטחון. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .t-brand .hero h1{-webkit-text-fill-color:currentColor}
}

/* הגוף בסולם שלהם. 4.6vw ב-390 הוא 17.9px, מתחת לגבול 19px שמדדנו
   לשתי השורות של אלון. ⚠️ לא להגדיל - ב-360 זה נשבר לארבע שורות. */
.t-brand .hero .heroQuote{font-size:4.6vw;line-height:1.34;max-width:none;
  margin:0 auto 14px;color:var(--ink);font-weight:400}
.t-brand .hero .heroQuote::after{margin:16px auto 0;width:64px}
.t-brand .heroLead{font-size:4.1vw;line-height:1.55;color:var(--muted);
  margin:0 auto 26px;max-width:40ch}
.t-brand .hero .teacher{display:none}

/* ── האובייקט: האיור של אלון עם טבעות זהב קונצנטריות מאחוריו ── */
.t-brand .heroObject{position:relative;display:grid;place-items:center;
  width:min(74vw,320px);aspect-ratio:1}
/* 🔴 היה עיגול עם מסגרת זהב עבה, וזה נקרא כמדבקה שהודבקה על הדף.
   ברפרנס כל התמונות העגולות הן וינייטה רכה שנמסה לרקע, בלי שום מסגרת.
   ה-mask מוחק את השוליים ולכן גם טבעת הזהב שצרובה בקובץ נעלמת. */
.t-brand .objImg{position:relative;z-index:1;width:88%;height:88%;
  background:url("../assets/art/logo-360.webp") center/contain no-repeat;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 43%,rgba(0,0,0,.70) 51%,transparent 59%);
  mask-image:radial-gradient(circle at 50% 50%,#000 43%,rgba(0,0,0,.70) 51%,transparent 59%)}
/* שלוש טבעות בקו דק, חלקן חורגות מהמסגרת - "הילה" לפי המפרט.
   הצבע זהב ב-30 אחוז: קו מבני, לא אלמנט שמתחרה באיור. */
.t-brand .rings{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(191,160,106,.34)}
.t-brand .rings::before,.t-brand .rings::after{content:"";position:absolute;
  border-radius:50%;border:1px solid rgba(191,160,106,.20)}
.t-brand .rings::before{inset:-9%}
.t-brand .rings::after{inset:11%;border-color:rgba(191,160,106,.13)}

/* ── גלים מהלוגו ──
   🔴 **הגלים יוצאים מהלוגו ולא מעוותים אותו.** אפשר היה לעשות עיוות
   מים אמיתי עם feTurbulence ו-feDisplacementMap, אבל זה היה מכופף את
   הלוגו של אלון. הלוגו הוא נכס מותג שאסור לגעת בו, וזה כבר חוק ברזל
   בפרויקט. גלים סביבו נותנים את אותה תחושה בלי לשנות אותו בכלל.
   ⭐ אפס משקל: שלוש טבעות CSS, בלי תמונה ובלי ספרייה.
   ⚠️ רק transform ו-opacity מונפשים, כדי שהדפדפן יריץ את זה בכרטיס
   המסך ולא ידרוש חישוב פריסה מחדש בכל פריים. */
/* ⚠️ inset חיובי ולא 0. ב-inset:0 הטבעת מתחילה בגודל האובייקט המלא,
   ובשיא ההתרחבות היא חרגה מהמסך בשלושה רוחבים. נתפס בבדיקה, לא בעין:
   ההירו חותך אותה ולכן לא נוצר פס גלילה, אבל האלמנט עצמו יצא החוצה. */
.t-brand .waves{position:absolute;inset:15%;z-index:-1;pointer-events:none}
.t-brand .waves i{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(191,160,106,.55);opacity:0;transform:scale(.8)}
@media(prefers-reduced-motion:no-preference){
  /* שבע שניות ללולאה, ובהשהיות של שליש ממנה. איטי מספיק כדי להיקרא
     כנשימה ולא כאנימציית טעינה. */
  .t-brand .waves i{animation:ripple 7s cubic-bezier(.2,.6,.3,1) infinite}
  .t-brand .waves i:nth-child(2){animation-delay:2.33s}
  .t-brand .waves i:nth-child(3){animation-delay:4.66s}
}
/* 🔴 הגל מגיע **בדיוק אל הטבעת החיצונית** ולא נעצר לפניה.
   החישוב, ולא ניחוש: הטבעת החיצונית היא inset:-9% על תיבת האובייקט,
   כלומר 118% ממנה. תיבת הגלים היא inset:15%, כלומר 70% מהאובייקט.
   118 חלקי 70 נותן 1.69, וזה הקנה מידה שבו הגל נוגע בטבעת.
   ⚠️ אם משנים את inset של .waves או של .rings, הערך הזה מפסיק להיות
   נכון והגל יעצור באוויר או יחרוג. שלושתם קשורים.
   ⭐ הדעיכה נמשכת עד 92 אחוז ולא נגמרת מוקדם, כדי שהעין תראה את הגל
   **מגיע** אל הטבעת ולא נעלם בדרך. */
@keyframes ripple{
  0%{opacity:0;transform:scale(.86)}
  10%{opacity:.6}
  78%{opacity:.34}
  92%{opacity:.10}
  100%{opacity:0;transform:scale(1.69)}
}

/* ── כפתור הגלולה של המקור ── */
.t-brand .btn.pill{display:inline-flex;align-items:center;gap:12px;
  border-radius:999px;padding:9px 10px 9px 22px;font-size:4vw;font-weight:700}
/* ⚠️ הכפתור הכללי מוסיף חץ טקסטואלי ב-::after. בגלולה החץ יושב בתוך
   העיגול, ובלי ביטול מפורש מופיעים **שני חצים** זה ליד זה. */
/* החץ מצויר ב-CSS ולא באייקון-פונט ולא ב-SVG חיצוני: אפס בקשת רשת. */
/* 🔴 היה rotate(45deg) עם border-left+bottom, שנותן חץ ימינה.
   בדף RTL "קדימה" הוא שמאלה, וכל שאר הכפתורים בדף מציגים ←.
   שני כיוונים באותו דף קוראים כמו שני מסרים. */
/* ⛔ כאן ישב עיגול עם חץ בתוך הגלולה. הוסר יחד עם שאר החיצים.
   הגלולה נשארת, בלי האייקון. */

@media(min-width:768px){
  .t-brand .hero{padding:96px 24px 88px}
  /* RTL: הפריט הראשון ב-DOM נוחת מימין. הטקסט ראשון, האובייקט אחריו. */
  .t-brand .heroIn{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
    align-items:center;gap:56px;justify-items:stretch}
  .t-brand .heroText{text-align:start;max-width:none}
  .t-brand .hero h1{font-size:8.6vw}
  .t-brand .heroName{font-size:2.5vw;margin-bottom:24px}
  .t-brand .hero .heroQuote{font-size:2vw;margin-inline:0}
  .t-brand .hero .heroQuote::after{margin-inline:0}
  .t-brand .heroLead{font-size:1.2vw;margin-inline:0}
  .t-brand .btn.pill{font-size:1.15vw}
  .t-brand .heroObject{width:100%;max-width:420px;justify-self:center}
}
@media(min-width:1400px){
  /* מעל הרוחב הזה vw שובר את הקריאוּת. הרפרנס לא מטפל בזה כי האתר שלו
     ממורכז בתיבה צרה, ואצלנו ההירו מלא רוחב. */
  .t-brand .hero h1{font-size:118px}
  .t-brand .hero .heroQuote{font-size:28px}
  .t-brand .heroLead{font-size:17px}
  .t-brand .btn.pill{font-size:16px}
}

/* ══════════════════════════════════════════════════════════════════
   קצב: בורדו כמסה, זהב כקו
   ══════════════════════════════════════════════════════════════════
   הרפרנס מחליף בין קרם לפטרול כהה, וזה מה שנותן לדף נשימה. אצלנו
   9,282 פיקסל של אותו שחור בדיוק, בלי אף הפסקה — וזו בדיוק הנקודה
   השביעית של אלון: "רצף של אזורים בהירים וכהים... יימנע תחושה של
   רצף טקסט ארוך".
   🔴 שחור וזהב נשאר, ולכן החילוף אינו שחור מול קרם אלא **שחור מול
   בורדו**. אותו תפקיד מבני, בלי לשבור את הכרעת המותג.
   ⭐ וזה גם מה שמפריד בין שני הרגשות: השחור והזהב הם העוצמה,
   והבורדו הוא החיבור. סעיף שמדבר על אנשים מקבל בשר. */
.t-brand .band{background:
  radial-gradient(120% 100% at 50% 0%,var(--wine) 0%,var(--wineDeep) 72%);
  color:var(--bandInk);position:relative}
/* קו זהב דק בראש הרצועה ובתחתיתה. ברפרנס זו התנועה שמסמנת מעבר,
   והיא עולה כמעט כלום. */
.t-brand .band::before,.t-brand .band::after{content:"";position:absolute;
  inset-inline:0;height:1px;background:linear-gradient(90deg,
    transparent,rgba(191,160,106,.55) 22%,rgba(191,160,106,.55) 78%,transparent)}
.t-brand .band::before{top:0}
.t-brand .band::after{bottom:0}

/* ⭐ הקו הזהוב שהפעולה יושבת עליו. ברפרנס זה חוזר בסוף כל סעיף כהה:
   קו נמתח מקצה לקצה, והגלולה יושבת עליו בצד ההתחלה. */
.t-brand .oneCta{position:relative;margin-block:38px 0;padding-top:26px;
  display:flex;justify-content:flex-start}
.t-brand .oneCta::before{content:"";position:absolute;inset-block-start:0;
  inset-inline:0;height:1px;background:linear-gradient(90deg,
    rgba(191,160,106,.45),rgba(191,160,106,.10))}

/* ⛔ כאן היה רחש בורדו על **סעיפים זוגיים** לפי nth-of-type. הוסר.
   🔴 הוא שבר את סעיף הספר ברגע שנוסף סעיף חדש לפניו: כל הסעיפים
   אחריו החליפו זוגיות, הכלל תפס את .lightSec, והספציפיות שלו גבוהה
   יותר — כך שרקע הקרם **הוחלף ברחש כהה וטקסט כהה נשאר עליו**.
   הבדיקה תפסה את זה כניגודיות 1.03.
   **הכלל:** קצב חזותי לא נקבע לפי מיקום. סעיף שנוסף באמצע לא אמור
   לשנות את הצבע של סעיף אחר. הקצב כאן מפורש: רצועה בורדו, סעיף קלף,
   סעיף קרם. שלושתם נבחרים בשם ולא במספר. */

/* ══════════════════════════════════════════════════════════════════
   "מי אני" — הפורטרט והמדליון המסתובב
   ══════════════════════════════════════════════════════════════════ */
/* משיכת העט גם כאן. ברפרנס היא חוזרת מתחת לכל כותרת ראשית, ואצלנו
   היא הייתה רק בהירו. ⚠️ כאן היא **סטטית** ולא נמשכת: אנימציית משיכה
   שחוזרת בכל סעיף הופכת מחתימה לטיק. */
.t-brand .sectSig{position:relative;height:30px;margin:-4px 0 14px;color:var(--accent);opacity:.85}
.t-brand .sectSig .swash{position:static;width:min(46vw,190px);height:auto;transform:scaleX(-1)}
.t-brand .sectSig .swash path{stroke-dasharray:none;stroke-dashoffset:0}
/* ══════════════════════════════════════════════════════════════════
   הפוטר
   ══════════════════════════════════════════════════════════════════ */
.t-brand .siteFoot{background:var(--wineDeep);color:var(--bandInk);
  padding:46px 20px 26px;margin-top:0;position:relative;text-align:start}
.t-brand .siteFoot::before{content:"";position:absolute;inset-block-start:0;
  inset-inline:0;height:1px;background:linear-gradient(90deg,
    transparent,rgba(191,160,106,.55) 22%,rgba(191,160,106,.55) 78%,transparent)}
.t-brand .footIn{max-width:1000px;margin:0 auto;display:grid;gap:30px}
.t-brand .footHead{font-size:var(--t-cap);letter-spacing:.10em;
  color:var(--accentText);margin:0 0 10px}
.t-brand .footCol ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.t-brand .footCol a{color:var(--bandInk);text-decoration:none;font-size:var(--t-body);
  opacity:.82;border-bottom:1px solid transparent}
.t-brand .footCol a:hover{opacity:1;border-bottom-color:var(--accent)}
.t-brand .footMark{display:block;width:52px;height:52px;margin:0 0 10px;
  background:url("../assets/art/logo-96.webp") center/contain no-repeat}
.t-brand .footName{font-family:var(--display);font-size:var(--t-lead);margin:0 0 2px}
.t-brand .footSub{font-size:var(--t-cap);color:var(--muted);margin:0}
.t-brand .siteFoot .footNote{max-width:1000px;margin:26px auto 0;padding-top:16px;
  border-top:1px solid rgba(247,240,225,.14);font-size:var(--t-cap);
  color:var(--muted);text-align:start}
@media(min-width:720px){
  .t-brand .footIn{grid-template-columns:1.2fr 1fr 1fr;gap:40px}
}

.t-brand .aboutGrid{display:grid;gap:28px;justify-items:center}
.t-brand .aboutTx{text-align:start}
.t-brand .aboutPic{position:relative;width:min(66vw,280px);isolation:isolate}
/* זוהר בורדו מאחורי הכתפיים. בלעדיו הדמות צפה בחלל שחור בלי מקום. */
.t-brand .picGlow{position:absolute;inset:-18% -14% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(60% 55% at 50% 42%,rgba(94,22,34,.72) 0%,rgba(12,12,13,0) 72%)}
/* ⚠️ אותה מסכה כמו בסעיף הקהילה. חולצה לבנה שנחתכת בקו ישר על שחור
   נראית כמו גזירה, וזה כבר תוקן פעמיים בדף הזה. */
.t-brand .portrait{display:block;width:100%;height:auto;
  /* ⚠️ mask-size:auto על גרדיאנט נפתר כ"בלי גודל" בחלק מהמנועים, והמסכה
     פשוט לא מוחלת. גודל וחזרה מפורשים, תמיד. נתפס ברינדור: התחתית
     נחתכה בקו ישר למרות שהמסכה הוגדרה. */
  -webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.38) 76%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.38) 76%,transparent 92%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}


@media(min-width:900px){
  .t-brand .aboutGrid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(30px,5vw,68px);align-items:center;justify-items:stretch}
  .t-brand .aboutPic{width:100%;max-width:330px;justify-self:center}
}

/* ══════════════════════════════════════════════════════════════════
   הצהרת המסע — סעיף רוחב מלא על רקע קלף
   ══════════════════════════════════════════════════════════════════
   🔴 **על הרקע:** זהו צילום מבוים של מגילה בצל, והכתב שעליה **מטושטש
   ולא קריא בכוונה**. לא נוצרו כאן אותיות עבריות ולא טקסט קדוש.
   ⚠️ **זו החלטה ולא מגבלה.** אלון ביקש "אותיות בכתב של ספר תורה",
   ומודל תמונה שמנסה לכתוב עברית טועה באותיות. אצל לקוח שהערכים
   קודמים אצלו לטכנולוגיה, פסוק משובש ברקע הוא נזק ולא קישוט.
   תחושת הסת"ם מגיעה מהחומר, מהקלף ומנר, לא מאותיות מזויפות.
   ⭐ אם תגיע סריקה אמיתית של כתב סת"ם, היא מחליפה את הקובץ הזה. */
/* ⭐ **נשימה.** הלל, 23.09: "צריך לקבל יותר מרחב ושלא יהיה צפוף בינו
   לבין החלקים האחרים". זה המשפט שמגדיר מה המיזם הוא, ומשפט כזה
   מאבד את כובד המשקל שלו כשהוא נדחק בין שני סעיפים.
   הריווח הפנימי גדל בכ-40 אחוז, ונוסף מרחב חיצוני משני הצדדים כדי
   שהסעיף יעמוד לבדו ולא ייקרא כהמשך של מה שמעליו. */
.t-brand .scrollSec{position:relative;isolation:isolate;
  padding:clamp(96px,15vw,160px) 22px;margin-block:clamp(34px,7vw,64px);
  background:
    linear-gradient(90deg,rgba(12,12,13,.94) 0%,rgba(12,12,13,.72) 46%,rgba(12,12,13,.34) 100%),
    url("../assets/art/scroll-780.webp") center right/cover no-repeat,
    var(--bg)}
.t-brand .scrollSec::before,.t-brand .scrollSec::after{content:"";position:absolute;
  inset-inline:0;height:1px;background:linear-gradient(90deg,
    transparent,rgba(191,160,106,.45) 22%,rgba(191,160,106,.45) 78%,transparent)}
.t-brand .scrollSec::before{top:0}
.t-brand .scrollSec::after{bottom:0}
/* ממורכז במובייל לפי [04:24] "גם צריך לשים אותו במרכז".
   בדסקטופ חוזר ליישור להתחלה, כי שם יש קו זהב אנכי בצד. */
.t-brand .scrollIn{max-width:640px;margin:0 auto;text-align:center;position:relative}
.t-brand .scrollIn::before{display:none}
/* קו זהב אנכי בצד ההתחלה. מסמן ציטוט בלי מירכאות, שהן זרות לאות עברית. */
.t-brand .scrollIn::before{content:"";position:absolute;inset-block:4px 4px;
  inset-inline-start:-18px;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
  opacity:.75}
/* 🔴 **לא var(--display).** גופן הכותרות הוא Suez One, והוא גופן שלטים:
   כבד, מודרני, עם קצוות חדים. הוא נכון לשם המותג ושגוי למשפט שאמור
   להישמע כמו ספר.
   ⭐ Frank Ruhl Libre הוא **אותה שושלת** של הפונט שבו מודפסים ספרי
   קודש בעברית זה יותר ממאה שנה, וזה בדיוק ה"תנ"כי" שהתבקש.
   ⚠️ **הוא כבר טעון בדף** כגופן משתנה 300 עד 800. אפס בקשת רשת נוספת,
   אפס קילובייט. לא להביא גופן חדש בשביל סעיף אחד.
   משקל 400 ולא כבד, רווח שורות 1.8, ומרווח אותיות חיובי קל: ככה נראה
   טקסט שנועד להיקרא לאט, להבדיל מכותרת שנועדה להיתפס במבט. */
.t-brand .scrollQuote{font-family:"Frank Ruhl Libre",Georgia,serif;font-weight:400;
  font-size:clamp(21px,5.4vw,36px);line-height:1.8;letter-spacing:.005em;
  color:var(--ink);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.65)}
@media(min-width:900px){
  .t-brand .scrollSec{background-image:
    linear-gradient(90deg,rgba(12,12,13,.93) 0%,rgba(12,12,13,.66) 48%,rgba(12,12,13,.22) 100%),
    url("../assets/art/scroll-1600.webp")}
  .t-brand .scrollIn{margin-inline:auto 0;max-width:640px;text-align:start}
  .t-brand .scrollIn::before{display:block}
  .t-brand .scrollQuote{font-size:clamp(27px,2.4vw,36px)}
}

/* ══════════════════════════════════════════════════════════════════
   סרגל צף שמופיע אחרי ההירו
   ══════════════════════════════════════════════════════════════════ */
.t-brand .floatNav{position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
  background:rgba(12,12,13,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(191,160,106,.30);
  /* 🔴 אינרטי לגמרי עד שהוא נדרש. שלושת אלה יחד, ולא רק opacity:
     שקיפות לבדה משאירה את הקישורים בסדר הטאבים. */
  visibility:hidden;opacity:0;transform:translateY(-100%);pointer-events:none}
.t-brand .floatNav.on{visibility:visible;opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:no-preference){
  .t-brand .floatNav{transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s .28s}
  .t-brand .floatNav.on{transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s}
}
.t-brand .fnIn{max-width:1120px;margin:0 auto;padding:9px 18px;
  display:flex;align-items:center;gap:14px}
.t-brand .fnName{font-family:var(--display);font-size:var(--t-body);
  color:var(--ink);white-space:nowrap}
.t-brand .fnLinks{display:none;list-style:none;margin:0;padding:0;gap:22px}
.t-brand .fnLinks a{color:var(--ink);text-decoration:none;font-size:var(--t-body);
  opacity:.8;border-bottom:1px solid transparent;padding-bottom:2px}
.t-brand .fnLinks a:hover{opacity:1;border-bottom-color:var(--accent)}
/* הכפתור בסרגל הוא אותו חותם, רק מוקטן. --btnInset מקבל את גוון
   הסרגל, אחרת הטבעת הפנימית תהיה שחורה על רקע מטושטש. */
.t-brand .floatNav{--btnInset:#121213}
.t-brand .fnCta{margin-inline-start:auto;padding:8px 18px;
  font-size:var(--t-cap);letter-spacing:.04em;white-space:nowrap}
@media(min-width:820px){
  .t-brand .fnLinks{display:flex}
  .t-brand .fnIn{padding:10px 22px;gap:26px}
  .t-brand .fnCta{padding:9px 22px;font-size:var(--t-body)}
}

/* ⛔ **סרגל הניווט העליון הוסר מהפלטה הנעולה.** הכרעת הילל 23.09.
   הוא היה סרגל דביק עם סמל, שם המותג וכפתור אל שלוש הדרכים.

   🔴 מה שהוא עלה: הוא ישב מעל ההירו מהפיקסל הראשון, חתך ממנו כ-52
   פיקסל, וחזר על שם המותג שמופיע ממש מתחתיו בגודל 15vw. כלומר
   האלמנט הראשון שנראה בדף אמר את מה שהאלמנט השני אומר חזק פי עשרה.

   ⚠️ הוא כן פתר משהו אמיתי: בדף של שנים עשר מסכים אין דרך לחזור
   לשלוש הדרכים בלי לגלול. **הבעיה הזו חוזרת עכשיו להיות פתוחה.**
   הפתרון הנכון אינו סרגל קבוע אלא סרגל ש**מופיע רק אחרי שעוברים את
   ההירו** — וזה ממילא היה השלב הבא ברשימה.
   בשש הגרסאות הארכיוניות הסרגל נשאר כפי שהיה. */

/* ══════════════════════════════════════════════════════════════════
   הכפתור — גרסה E, "חותם"
   ══════════════════════════════════════════════════════════════════
   נבחר על ידי הילל 23.09 מתוך חמש גרסאות שרונדרו זו לצד זו.
   מסגרת כפולה וגופן ספר. רמז ישיר לחותם על ספר, ולא דומה לכפתור אתר.

   ⭐ **המסגרת הכפולה נעשית ב-box-shadow פנימי ולא באלמנט נוסף:**
   טבעת של 4 פיקסל בצבע **הרקע של הסעיף**, ועליה קו זהב של פיקסל.
   כך נוצר רווח בין שתי המסגרות בלי שום div נוסף ובלי pseudo-element
   (ש-after כבר תפוס בחלק מהכפתורים).
   🔴 ולכן המשתנה btnInset **חייב להשתנות עם הרקע**. אם הוא לא מוגדר
   בסעיף, הטבעת תהיה שחורה על בורדו ותיראה כמו חור.

   ⚠️ הגופן הוא Frank Ruhl ולא Heebo. זה מה שהופך את הכפתור מרכיב
   ממשק לחלק מהספר, וזה היה ההבדל המרכזי בהשוואה. */
.t-brand{--btnInset:var(--bg)}
.t-brand .btn{
  background:rgba(191,160,106,.10);
  color:#E3CC96;
  border:1px solid rgba(191,160,106,.75);
  border-radius:0;
  box-shadow:inset 0 0 0 4px var(--btnInset), inset 0 0 0 5px rgba(191,160,106,.45);
  font-family:"Frank Ruhl Libre",Georgia,serif;
  font-weight:500;
  /* ⭐ הוגדל 23.09 לבקשת אלון: "הכפתור שיהיה גדול יותר גם כן". */
  font-size:clamp(19px,5vw,23px);
  letter-spacing:.05em;
  padding:19px 40px;
  display:inline-block}
@media(min-width:720px){ .t-brand .btn{padding:20px 52px} }

/* הרצועה הבורדו: הטבעת הפנימית מקבלת את גוון הרצועה. */
.t-brand .band{--btnInset:#3A0E17}
/* הסעיף הבהיר: הפוך לגמרי, זהב כהה על קרם. */
.t-brand .lightSec{--btnInset:#FFFFFF}
.t-brand .lightSec .btn{background:rgba(122,95,38,.09);color:#5B4519;
  border-color:rgba(122,95,38,.7);
  box-shadow:inset 0 0 0 4px var(--btnInset), inset 0 0 0 5px rgba(122,95,38,.42)}

/* הגלולה בהירו מתבטלת. E היא הצורה בכל הדף, כולל שם. */
.t-brand .btn.pill{border-radius:0;padding:19px 40px;font-size:clamp(19px,5vw,23px);
  font-weight:500;display:inline-block}
@media(min-width:720px){ .t-brand .btn.pill{padding:20px 52px} }
/* בהירו הטבעת הפנימית יושבת על הלוח הכהה ולא על רקע העמוד. */
.t-brand .hero{--btnInset:#0E0B0C}
/* 🔴 הכלל .h-immersive .hero .btn צובע את הכפתור בזהב מלא, והספציפיות
   שלו (3 מחלקות) גוברת על כלל החותם. בלי הביטול הזה ההירו נשאר עם
   הכפתור הישן וכל שאר הדף מתחלף — כלומר בדיוק שני סגנונות באותו דף.
   נתפס ברינדור ולא בקוד. */
.t-brand.h-immersive .hero .btn{background:rgba(191,160,106,.10);
  color:#E3CC96;border-color:rgba(191,160,106,.75)}
.t-brand.h-immersive .hero .btn:hover{background:rgba(191,160,106,.22);color:#F2E2BC}
@media(prefers-reduced-motion:no-preference){
  .t-brand .btn{transition:background-color .25s ease,color .25s ease}
  .t-brand .btn:hover{background:rgba(191,160,106,.22);color:#F2E2BC}
  .t-brand .lightSec .btn:hover{background:rgba(122,95,38,.18);color:#40300F}
}

/* ══════════════════════════════════════════════════════════════════
   סעיף הספר — שתי עמודות, שורות פורמט, ומקום לכריכה
   ══════════════════════════════════════════════════════════════════ */
.t-brand #sefer.lightSec{padding-inline:22px}
.t-brand .seferGrid{display:grid;gap:30px;max-width:1120px;margin:0 auto}
.t-brand .seferTx{text-align:start}

/* ⭐ שורת פורמט במקום כרטיס גבוה. אייקון, טקסט, מחיר וכפתור באותה
   יחידה אחת. הכרטיס הקודם היה עמודה צרה עם טבעת בודדה בראש והמון
   אוויר מת, וזה מה שגרם לסעיף להיראות לא פרוס. */
.t-brand .fmts{display:grid;gap:14px;margin:20px 0 4px}
/* 🔴 היו לבנים, משרידי עיצוב הקרם שבוטל. הבדיקה תפסה ניגודיות 1.13:
   טקסט קרם על כרטיס לבן. כשמבטלים רקע של סעיף חייבים לעבור על כל
   מה שהיה מכויל אליו, ולא רק על הסעיף עצמו. */
.t-brand .fmt{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;
  align-items:start;background:rgba(20,18,16,.55);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 18px 16px;position:relative}
.t-brand .fmt::before{content:"";position:absolute;inset-block-start:0;
  inset-inline:0;height:2px;background:linear-gradient(90deg,#9C7F49,#E8D4A4)}
.t-brand .fmt .ring{width:56px;height:56px;margin:0;border-color:rgba(191,160,106,.5)}
.t-brand .fmt .ring .ico{width:28px;height:28px;background:var(--accentText);opacity:1}
.t-brand .fmtBody{min-width:0}
.t-brand .fmt h3{margin:0 0 4px;font-size:var(--t-lead)}
.t-brand .fmt .d{margin:0 0 8px;font-size:var(--t-body);color:var(--muted)}
.t-brand .fmt .pr{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:6px}
.t-brand .fmt .pr b{font-size:var(--t-lead);color:var(--accentText)}
.t-brand .fmt .fine{font-size:var(--t-cap);color:var(--muted);margin:0}
/* הכפתור נופל לשורה שנייה ותופס את כל הרוחב, כדי שלא ייווצר
   "כפתור מכווץ" ליד טקסט ארוך. */
.t-brand .fmt .btn.small{grid-column:1 / -1;justify-self:start;margin-top:10px}
.t-brand #sefer .bridge{margin-top:22px;max-width:34ch;color:var(--accentText)}

/* ── מקום הכריכה ──
   ⚠️ **ריק בכוונה ומוצהר.** אין לשים כאן דמה של כריכה, ואין למלא את
   החלל בתמונת אווירה. החלל הוא המסר: הכריכה האמיתית עוד לא הגיעה. */
/* ── הכריכה ──
   ⭐ הרקע השחור שלה הוא **חלק מהקובץ** ולא שקיפות, ולכן היא יושבת נכון
   על הרקע הכהה בלי שום טיפול. אין מסגרת, אין חיתוך, אין מסכה.
   ⚠️ **יחס הצדדים הוא 5:6** (2000x2400) ולא 2:3 כמו המסגרת הריקה שהייתה
   כאן. aspect-ratio שגוי היה מותח את הכריכה. */
.t-brand .coverSlot{margin:0;display:grid;place-items:center}
/* ⚠️ השחור של הכריכה אינו זהה לשחור של הדף (#0C0C0D עם רחש בורדו),
   ולכן שולי המלבן נראו כקו. מסכה רכה בשוליים מאפסת אותם, והכריכה
   נראית כאילו היא צפה ברקע במקום מודבקת עליו.
   ⭐ הצל מתחת נשאר: הוא מה שנותן לה גוף של ספר. */
.t-brand .coverImg{display:block;width:min(74vw,320px);height:auto;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.65));
  -webkit-mask-image:radial-gradient(115% 108% at 50% 48%,#000 74%,transparent 99%);
  mask-image:radial-gradient(115% 108% at 50% 48%,#000 74%,transparent 99%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ⚠️ **אל תשים את הכפתור בעמודה שלישית.** נוסה ונכשל: שלוש עמודות
   עם nowrap על כפתור בעברית ארוכה נתן לכפתור כ-250
   פיקסל, לטבעת 56, ולטקסט נשארו כ-100 — מילה אחת בשורה, והכפתור
   דרס את התיאור. בעברית אורך הכפתור אינו ידוע מראש, ולכן הוא לא
   יכול להיות עמודה. הוא תמיד בשורה משלו, לרוחב מלא. */
@media(min-width:860px){
  .t-brand .seferGrid{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);
    gap:clamp(30px,4.5vw,56px);align-items:center}
  .t-brand .fmt{padding:20px 22px 18px}
  .t-brand .coverImg{width:100%;max-width:340px}
}

/* ══════════════════════════════════════════════════════════════════
   הספר התלת-ממדי (11.10.2026)
   ══════════════════════════════════════════════════════════════════
   הילל: "הספר באתר יכול להיות גדול יותר עם מושן שירגיש חי יותר".
   ⭐ CSS טהור, שש פאות: כריכה, גב, שדרה, דפים, ראש ותחתית. אפס ספריות.
   ⚠️ **ספר עברי נכרך מימין.** השדרה יושבת בצד ימין והדפים בצד שמאל.
      הספר מסובב אל הטקסט שלידו, ולכן הצד שנראה הוא עובי הדפים.
   ⚠️ **התנועה שקטה בכוונה.** זה ספר רוחני ולא באנר. ריחוף של 12 פיקסל
      בשבע שניות, הברקה אחת בתשע שניות, הטיה של עד עשר מעלות.
   🔴 prefers-reduced-motion: אין ריחוף, אין הברקה, אין מעקב עכבר.
      הספר נשאר באותה תנוחה תלת-ממדית, סטטי לגמרי.
   ⚠️ מידות: יחס הכריכה 1414x2000 (A, 1:1.414). כל המידות נגזרות
      מרוחב אחד (--bw), כדי שאין דרך לעוות את הכריכה בטעות. */
.t-brand .book3dSlot{position:relative;overflow:hidden;
  padding:34px 0 64px;margin:0}
.t-brand .bkStage{
  --bw:min(80vw,310px);
  --bh:calc(var(--bw) * 1.4144);
  --bd:calc(var(--bw) * .1);
  --ry0:20deg; --rx0:3deg;
  position:relative;width:var(--bw);height:var(--bh);margin:0 auto;
  perspective:1700px;perspective-origin:50% 38%}
.t-brand .bkFloat,.t-brand .bk3d{position:absolute;inset:0;transform-style:preserve-3d}
.t-brand .bk3d{
  transform:rotateX(calc(var(--rx0) + var(--tx,0deg))) rotateY(calc(var(--ry0) + var(--ty,0deg)));
  will-change:transform}
.t-brand .bkFace{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* הכריכה. הפינות בצד הכריכה (ימין) כמעט חדות, בצד הפתוח מעוגלות קלות,
   כמו כריכה קשה אמיתית. */
.t-brand .bkFront{inset:0;transform:translateZ(calc(var(--bd) / 2));
  border-radius:4px 1px 1px 4px;overflow:hidden;background:#2A0A11;
  box-shadow:inset 0 0 0 1px rgba(214,187,132,.16)}
.t-brand .bkFront img{display:block;width:100%;height:100%;object-fit:cover}
/* הקפל של הכריכה הקשה, ליד השדרה. מה שהופך מלבן לספר. */
.t-brand .bkHinge{position:absolute;top:0;bottom:0;right:2.6%;width:3%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.30) 42%,rgba(255,232,196,.18) 62%,rgba(0,0,0,0))}
/* תאורה שזזה עם ההטיה (--lx/--ly מה-JS). בלי JS היא פשוט נשארת למעלה. */
.t-brand .bkLight{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at var(--lx,32%) var(--ly,16%),rgba(255,236,204,.16),rgba(255,236,204,0) 58%),
    linear-gradient(90deg,rgba(0,0,0,.20),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 90%,rgba(0,0,0,.24))}
/* הברקה שעוברת על הכריכה. מוסתרת עד שהאנימציה מזיזה אותה. */
.t-brand .bkSheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,rgba(255,240,214,0) 40%,rgba(255,240,214,.22) 50%,rgba(255,240,214,0) 60%);
  background-size:320% 100%;background-position:160% 0;background-repeat:no-repeat}

.t-brand .bkBack{inset:0;transform:rotateY(180deg) translateZ(calc(var(--bd) / 2));
  background:#2A0A11;border-radius:1px 4px 4px 1px}
/* השדרה, צד ימין. יין כהה מהפלטה הנעולה, בלי טקסט: אין לנו עיצוב שדרה
   מאלון, ולכן לא ממציאים אחד. */
.t-brand .bkSpine{top:0;height:100%;width:var(--bd);left:calc(50% - var(--bd) / 2);
  transform:rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background:linear-gradient(90deg,#1E070C,#4A111B 30%,#5E1622 50%,#3A0D16 75%,#1E070C)}
/* עובי הדפים, צד שמאל. הכריכה בולטת 3 פיקסלים מעבר לדפים, כמו בכריכה
   קשה, ולכן הדפים קצרים מעט ונסוגים פנימה. */
.t-brand .bkPages{top:1.1%;height:97.8%;width:calc(var(--bd) - 4px);
  left:calc(50% - (var(--bd) - 4px) / 2);
  transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2 - 3px));
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,#F1E8D6 0 1px,#D9CBAF 1px 2px)}
.t-brand .bkTop,.t-brand .bkBottom{left:3px;width:calc(var(--bw) - 6px);height:calc(var(--bd) - 4px);
  top:calc(50% - (var(--bd) - 4px) / 2);
  background:
    linear-gradient(0deg,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg,#F1E8D6 0 1px,#D9CBAF 1px 2px)}
.t-brand .bkTop{transform:rotateX(90deg) translateZ(calc(var(--bh) / 2 - 3px))}
.t-brand .bkBottom{transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2 - 3px))}

/* הילה חמה מאחורי הספר, וצל שנושם מתחתיו. */
.t-brand .bkGlow{position:absolute;inset:-6% -12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(191,160,106,.20),rgba(94,22,34,.14) 55%,rgba(94,22,34,0) 100%);
  filter:blur(8px)}
.t-brand .bkShadow{position:absolute;left:6%;right:6%;bottom:calc(var(--bh) * -.075);
  height:calc(var(--bh) * .06);pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(5px)}

@media(min-width:860px){
  /* העמודה של הספר גדלה: היא הייתה 0.8fr והכריכה נעצרה ב-340 פיקסל. */
  /* ⚠️ הסעיף יושב בתוך .wrap של 760 פיקסל, ולכן הגריד של 1120 מעולם לא
     התפרש, ועמודת הכריכה יצאה כ-240 פיקסל. ספר גדול צריך את הרוחב. */
  .t-brand .wrap#sefer:has(.has3d){max-width:1120px}
  .t-brand .seferGrid.has3d{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .t-brand .bkStage{--bw:clamp(280px,30vw,430px);--ry0:26deg;--rx0:4deg}
  .t-brand .book3dSlot{padding:40px 0 76px}
}

@media(prefers-reduced-motion:no-preference){
  .t-brand .bkFloat{animation:bkFloat 7s ease-in-out infinite}
  .t-brand .bkShadow{animation:bkShadow 7s ease-in-out infinite}
  .t-brand .bkGlow{animation:bkGlow 7s ease-in-out infinite}
  .t-brand .bkSheen{animation:bkSheen 9s ease-in-out 1.6s infinite}
  /* מחוץ למסך הכל עוצר. אין סיבה לצייר ספר שאף אחד לא רואה. */
  .t-brand .bkStage.bkOff *{animation-play-state:paused}
}
@keyframes bkFloat{0%,100%{transform:translateY(0) rotateZ(0deg)}
  50%{transform:translateY(-12px) rotateZ(-.35deg)}}
@keyframes bkShadow{0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(.86);opacity:.55}}
@keyframes bkGlow{0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}}
@keyframes bkSheen{0%{background-position:160% 0}
  22%,100%{background-position:-60% 0}}

/* ══════════════════════════════════════════════════════════════════
   "מה מקבלים" — בולט עם נכס לכל שורה
   ══════════════════════════════════════════════════════════════════
   שבעה נכסים, 36KB לכולם יחד אחרי המרה ל-webp. פחות ממה ששקלה
   התמונה האחת שהם החליפו. */
.t-brand .getGrid{display:grid;gap:14px;margin:22px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.t-brand .getCard{background:rgba(20,18,16,.5);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 14px 15px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.t-brand .getCard p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--ink)}
/* ⚠️ הנכסים נוצרו על רקע שחור ולא כשקופים, כי אלפא ממודל תמונה אינו
   אמין. mix-blend-mode:screen מוחק את השחור מתמטית, ולכן הם יושבים
   נכון גם על הרצועה הבורדו וגם על הרקע הכהה. */
.t-brand .getPic{display:block;width:74px;height:74px;flex:0 0 auto;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  mix-blend-mode:screen}
.t-brand .gp1{background-image:url("../assets/art/get-1.webp")}
.t-brand .gp2{background-image:url("../assets/art/get-2.webp")}
.t-brand .gp3{background-image:url("../assets/art/get-3.webp")}
.t-brand .gp4{background-image:url("../assets/art/get-4.webp")}
.t-brand .gp5{background-image:url("../assets/art/get-5.webp")}
.t-brand .gp6{background-image:url("../assets/art/get-6.webp")}
.t-brand .gp7{background-image:url("../assets/art/get-7.webp")}
@media(min-width:900px){
  .t-brand .getGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .t-brand .getPic{width:84px;height:84px}
}

/* ══════════════════════════════════════════════════════════════════
   ⛔ האזור הבהיר בקרם — **בוטל.**
   ══════════════════════════════════════════════════════════════════
   נבנה ב-23.09 כדי לתת לדף קצב, ונפסל על ידי אלון באותו ערב:
   *"אני כן רוצה שיהיו שינויים, אבל המעבר משחור לאור בהיר... הקרם לא
   מתאים"* · *"זה הופך את זה למצועצע בעיניי, ולא מספיק נותן עומק"*.

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

   ⇒ סעיף הספר חוזר לכהה, ומקבל את הקצב שלו מהכריכה עצמה במקום
   מהחלפת רקע. **הקצב עדיין פתוח** — הוא רוצה גיוון, לא קרם ולא
   צבע רביעי. לא להמציא פתרון לבד.
   ⚠️ אסימוני הקרם נשארים בפלטה למקרה שהכיוון יחזור. הם לא בשימוש.
   ══════════════════════════════════════════════════════════════════ */


/* ⛔ כאן ישבה תמונת מפגש מאוירת שיוצרה ב-gpt-image-2. **הוסרה.**
   הלל, 23.09: "ממש לא אהבתי, היא לא ממחישה בצורה ריאלית את הקהילה".
   וזה תואם את מה שעלה במחקר: איור של בני אדם מייצר ריחוק בדיוק במקום
   שבו צריך אמון. במקומה: שבעה בולטים, כל אחד עם נכס משלו, והנכסים
   מופשטים ולא מתיימרים להיות אנשים.
   הכלל שנגזר: **מופשט לרעיון, צילום אמיתי לבני אדם.**
   ── תמונת המפגש בסעיף הקהילה (היסטורי) ──
   🔴 **אין כאן אף פנים אמיתיות.** התמונה יוצרה כאיור: רשת אריחים עם
   צלליות זוהרות אנונימיות, ואריח המורה גדול ומואר יותר במרכז.
   לא נוצרה דמות של אדם קיים ולא הוצג משתתף שלא קיים.
   ⚠️ היא מוצגת כ**איור** ולא כצילום מסך של מפגש אמיתי. אם אי פעם
   ייכתב לידה "כך נראה מפגש", זו תהיה הצגה מטעה. */
.t-brand .zoomArt{display:block;width:100%;height:auto;margin:0 auto 34px;
  border-radius:var(--r);border:1px solid rgba(191,160,106,.26)}

/* ══════════════════════════════════════════════════════════════════
   שלושת המוצרים: כרטיס לכל אחד, וצבע לכל אחד
   ══════════════════════════════════════════════════════════════════
   בקשה מפורשת של אלון, נקודה 6 במייל 15.09, מילה במילה:
   "לחזק את שלוש הדרכים ולבדל ביניהן כשלושה כרטיסים מאוד ברורים
   עם שינוי בצבעים - כדי להבדיל ביניהן".

   ⭐ עד היום הם היו שלוש עמודות טקסט בלי רקע ובלי מסגרת, כלומר לא
   כרטיסים בכלל. עכשיו לכל אחד גוף משלו.

   🔴 **לא שלוש פלטות.** אלה שלושה תפקידים מתוך אותה שפה של שלושה
   צבעים, אחרת הדף מתפרק לשלושה מותגים:
     הספר      → זהב.   הוא המוצר המוחשי, וזה הצבע של החומר.
     הקהילה    → בורדו. היא החיבור, ולכן היא מקבלת בשר וגוף.
     הפגישה    → שחור.  היא האינטימית, ולכן היא הכי שקטה והכי יקרה.
   ⚠️ הקהילה מקבלת גם קו עליון בולט: היא המוצר החוזר, וזה מה שהדף מוכר. */
.t-brand .track{border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;background:rgba(20,18,16,.45);position:relative;overflow:hidden}
.t-brand .track::before{content:"";position:absolute;inset-block-start:0;
  inset-inline:0;height:2px;opacity:.9}

.t-brand .tk-book{background:
  linear-gradient(180deg,rgba(191,160,106,.13) 0%,rgba(20,18,16,.45) 58%);
  border-color:rgba(191,160,106,.34)}
/* 🔴 הבליטה עברה מהקהילה לספר, הכרעת הילל 23.09: הספר בראש סדר
   העדיפויות. הקו העבה הוא סימן ההדגשה, ויש רק אחד בדף. */
.t-brand .tk-book::before{height:3px;background:linear-gradient(90deg,#9C7F49,#E8D4A4,#9C7F49)}
.t-brand .tk-book .ring{border-color:rgba(191,160,106,.55)}

.t-brand .tk-community{background:
  linear-gradient(180deg,rgba(94,22,34,.55) 0%,rgba(42,10,17,.55) 62%);
  border-color:rgba(160,60,76,.46)}
.t-brand .tk-community::before{background:linear-gradient(90deg,#8E2233,#C04A5E)}
.t-brand .tk-community .ring{border-color:rgba(214,187,132,.50)}
.t-brand .tk-community .ico{background:var(--accentText);opacity:.8}

.t-brand .tk-meeting{background:
  linear-gradient(180deg,rgba(10,10,11,.85) 0%,rgba(18,17,19,.55) 70%);
  border-color:rgba(247,240,225,.16)}
.t-brand .tk-meeting::before{background:linear-gradient(90deg,
  transparent,rgba(191,160,106,.65),transparent)}

/* 🔴 האייקון היה --muted ב-55 אחוז שקיפות. על קרם זה עבד, על שחור
   קו-אמנות דק בגוון עמום פשוט נעלם, והטבעות נראו ריקות.
   על רקע כהה הזהב הוא הצבע הקריא — אותו לקח כמו בכותרות. */
/* האייקון היה --muted ב-55 אחוז שקיפות. על רקע שמנת זה עבד, על שחור
   ועל בורדו קו-אמנות דק בגוון עמום נקרא כמעט כמו הרקע. זהב מלא.
   הטבעת גדלה מעט כדי שהקו יקבל גוף על רקע כהה.

   🔴 **אזהרה למי שיבדוק את זה בעתיד.** הטבעות נראו **ריקות לגמרי**
   בכל צילום מקומי, ובזבזנו על זה סבב שלם של "תיקונים" לצבע ולגודל.
   הסיבה לא הייתה בעיצוב: **דפדפן לא טוען mask-image חיצוני מ-file://**
   (מדיניות מקור, כמו כל משאב שאפשר לקרוא ממנו פיקסלים).
   מסכות שהן גרדיאנט inline דווקא כן עובדות, ולכן ההירו נראה תקין
   והאייקונים לא — וזה מה שגרם לזה להיראות כמו באג אמיתי.
   ⚠️ **לאמת אייקונים רק מעל HTTP.** הרצת python -m http.server בשורש
   הפרויקט מספיק. צילום מ-file:// אינו ראיה לגבי אייקונים. */
.t-brand .ring{width:82px;height:82px}
.t-brand .ring .ico{width:40px;height:40px;background:var(--accentText);opacity:1}

/* ⚠️ הגריד היה שתי עמודות, ולכן "שלוש דרכים" הוצגו כשתיים ועוד אחת
   מתחת. זה בדיוק מה שמטשטש את ההפרדה שאלון ביקש. שלוש דרכים,
   שלוש עמודות, החלטה אחת במבט אחד. */
@media(min-width:900px){
  .t-brand .tracks{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .t-brand #tracks{max-width:1120px}
}

/* ══════════════════════════════════════════════════════════════════
   סעיף הקהילה: אלון במרכז, ששת הנושאים סביבו
   ══════════════════════════════════════════════════════════════════ */

/* ── מובייל: אין מסלול. דיוקן למעלה, ורשימה רגילה מתחתיו ──
   זה לא פשרה אלא מה שגם הבלוק המקצועי עושה: הבועות מוסתרות מתחת ל-lg
   כי הן נוחתות על הטקסט. */
.t-brand .orbit{display:grid;gap:20px}
.t-brand .orbitCol{display:grid;gap:18px}
.t-brand .orbitCore{order:-1;position:relative;width:min(70vw,290px);
  aspect-ratio:1;margin:0 auto 10px;display:grid;place-items:end center;isolation:isolate}
/* 🔴 ה-PNG של האאורה אינו שקוף — הוא נוצר על רקע שחור, כי אלפא ממודל
   תמונה אינו אמין. מיזוג screen מוחק את השחור מתמטית: כל פיקסל כהה נעלם
   ורק הזוהר נשאר. זה גם נכון יותר פיזיקלית מאשר חיתוך אלפא. */
.t-brand .aura{position:absolute;inset:-16%;z-index:-1;
  background:url("../assets/art/aura-640.webp") center/contain no-repeat;
  mix-blend-mode:screen;opacity:.95;
  /* ⚠️ screen לבדו לא הספיק. פינות ה-PNG אינן שחור טהור אלא כמעט-שחור,
     והרקע מאחוריהן בורדו — ולכן נשאר **ריבוע גלוי** סביב הזוהר.
     מסכה רדיאלית מאפסת את השוליים לגמרי ומשאירה רק את ההילה. */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,rgba(0,0,0,.45) 60%,transparent 71%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,rgba(0,0,0,.45) 60%,transparent 71%)}
/* 🔴 התחתית של הדיוקן נמסה לרקע במקום להיחתך בקו ישר. בלי זה החולצה
   הלבנה נגמרת בקצה אופקי חד והכל נראה כמו מדבקה — בדיוק הכשל שתוקן
   באובייקט של ההירו. */
.t-brand .who{position:relative;z-index:1;width:70%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.40) 78%,transparent 93%);
  mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.40) 78%,transparent 93%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ⚠️ ה-wrap הרגיל הוא 760 פיקסל. שלוש עמודות בתוכו נתנו לכל שבב כ-150
   פיקסל, וטקסט עברי נשבר למילה בשורה. הסעיף הזה צריך רוחב משלו. */
@media(min-width:1024px){
  .t-brand .focusSec{max-width:1180px}
  .t-brand .orbit{grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr);
    gap:clamp(20px,3.2vw,52px);align-items:center;margin-top:18px}
  .t-brand .orbitCore{order:0;width:clamp(280px,26vw,380px);margin:0}
  .t-brand .orbitCol{gap:clamp(20px,3vh,38px);align-content:center}

  /* הפריטים הופכים לשבבים. ההיסטים האופקיים הם מה שיוצר את הקשת:
     האמצעי מתקרב למרכז והקצוות נסוגים. לכן זה קורה בלי קואורדינטות. */
  .t-brand .orbit .item{position:relative;background:rgba(20,18,16,.62);
    border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .t-brand .o1,.t-brand .o6{margin-inline-end:6%}
  .t-brand .o2,.t-brand .o5{margin-inline-end:0;margin-inline-start:6%}
  .t-brand .o3,.t-brand .o4{margin-inline-end:6%}

  /* קו זהב דק שמחבר כל שבב אל המרכז. עדין בכוונה: הוא רומז על קשר,
     לא מצייר דיאגרמה. */
  .t-brand .orbit .item::after{content:"";position:absolute;top:50%;
    width:clamp(14px,2.4vw,34px);height:1px;
    background:linear-gradient(90deg,rgba(191,160,106,.55),transparent)}
  .t-brand .orbitCol:first-of-type .item::after{inset-inline-end:-1px;
    transform:translateX(100%)}
  .t-brand .orbitCol:last-of-type .item::after{inset-inline-start:-1px;
    transform:translateX(-100%) scaleX(-1)}

  @media(prefers-reduced-motion:no-preference){
    /* לולאה של שש שניות, ולכל פריט --fd אחר שנקבע ב-HTML, כדי ששישה
       אלמנטים לא ינועו כגוש אחד. זה בדיוק מה שהופך ריחוף לחי. */
    .t-brand .orbit .item{animation:floatY 6s ease-in-out infinite;
      animation-delay:var(--fd,0s)}
    .t-brand .orbitCore{animation:floatY 7.5s ease-in-out infinite}
  }
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── חשיפה בגלילה. בלי GSAP ──
   המפרט מבקש clip-path reveal ו-fade-up. שניהם CSS טהור עם מחלקה אחת
   שנוספת ב-IntersectionObserver.
   ⚠️ השמות hclip/hup ולא reveal/up: המחלקה reveal כבר תפוסה במערכת
   החשיפה של הסקשנים למטה, והתנגשות הייתה מחביאה את הכפתור לתמיד. GSAP הוא כ-70KB על דף שנטען ב-733ms,
   ⚠️ ולגרסה צפה ב-CDN כבר הפלנו אתר לקוח חי. לא כאן.
   RTL: הכותרת נחשפת מימין לשמאל, ולכן inset מתחיל מ-100% בצד ההתחלה. */
.t-brand .hclip{clip-path:inset(0 0 0 100%)}
.t-brand .hup{opacity:0;transform:translateY(24px)}
.t-brand .hclip.hin{clip-path:inset(0 0 0 0)}
.t-brand .hup.hin{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .t-brand .hclip{transition:clip-path 1.5s cubic-bezier(.65,0,.35,1) var(--d,0s)}
  .t-brand .hup{transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s)}
  .t-brand .btn.pill{transition:opacity .15s ease,background-color .25s ease}
  }
/* 🔴 מי שכיבה אנימציות רואה את המצב הסופי מיד, לא דף ריק. */
@media(prefers-reduced-motion:reduce){
  .t-brand .hclip{clip-path:none}
  .t-brand .hup{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   11.10.2026 — שלושה תיקונים של הילל
   ══════════════════════════════════════════════════════════════════
   1. קו הזהב: ישר, רציף ומעוטר לכל אורכו, עד הסוף.
   2. הכל במרכז, בעיקר בטלפון. נמדד בדפדפן: qa/check-center.mjs.
   3. תמונת המיקרופון בסעיף הקהילה (ראה brand.html).
   ⚠️ הבלוק הזה **מבטל במכוון** את "ציר אחד לימין" מ-15.09. אלון ביקש
      מרכוז שלוש פעמים ב-23.09, והילל הכריע 11.10: הכל במרכז.
      ההערות הישנות למעלה ("יישור לתחילת השורה") הן היסטוריה, לא חוק. */

/* ── 1. קו הזהב האחיד ──
   שכבות רקע במקום SVG בכל מקום: קו אחד רציף לכל הרוחב, עיטור סימטרי
   במרכז (שני עלים ויהלום, ברוח הקו שעל כריכת הספר), ויהלום בכל קצה.
   ⚠️ הקו עובר **מתחת** לעיטור ולא נקטע בשבילו. זו כל הבקשה: לא שבור. */
.t-brand{
  --gOrn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cg fill='none' stroke='%23BFA06A' stroke-width='1.4'%3E%3Cpath d='M15 10 Q32 1.5 49 10 Q32 18.5 15 10Z'/%3E%3Cpath d='M71 10 Q88 1.5 105 10 Q88 18.5 71 10Z'/%3E%3C/g%3E%3Cg fill='%23BFA06A'%3E%3Cpath d='M60 2.5 L67.5 10 L60 17.5 L52.5 10Z'/%3E%3Ccircle cx='8' cy='10' r='2'/%3E%3Ccircle cx='112' cy='10' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --gCap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1 L13 7 L7 13 L1 7Z' fill='%23BFA06A'/%3E%3C/svg%3E");
  --gLine:linear-gradient(#BFA06A,#BFA06A);
  --goldRuleBg:
    var(--gOrn) center / auto 16px no-repeat,
    var(--gCap) left center / 9px 9px no-repeat,
    var(--gCap) right center / 9px 9px no-repeat,
    var(--gLine) center / calc(100% - 8px) 1px no-repeat;
}
.t-brand .goldRule{display:block;height:18px;background:var(--goldRuleBg);opacity:.9}
.t-brand .goldRule.lg{height:26px;opacity:1;background:
    var(--gOrn) center / auto 24px no-repeat,
    var(--gCap) left center / 12px 12px no-repeat,
    var(--gCap) right center / 12px 12px no-repeat,
    var(--gLine) center / calc(100% - 10px) 1.6px no-repeat}
.t-brand .heroRule{display:block;margin:6px 0 4px}
.t-brand .sectRule{width:min(100%,340px);margin:2px auto 18px}
/* הקו הקצר מתחת לציטוט בהירו הוסר: קו של 64 פיקסל הוא בדיוק "קו שלא
   נמשך עד הסוף", ושני קווים מעוטרים בהירו אחד מעל השני הם חזרה. */
.t-brand .hero .heroQuote::after{display:none}
/* קווי המעבר בין סעיפים: היו גרדיאנט שנמוג ב-22 אחוז מכל צד, כלומר
   נראו כקו שנגמר לפני הקצה. עכשיו אותו קו מעוטר, מקצה לקצה. */
.t-brand .band::before,.t-brand .band::after,
.t-brand .scrollSec::before,.t-brand .scrollSec::after,
.t-brand .siteFoot::before{height:18px;background:var(--goldRuleBg);opacity:.75;
  inset-inline:max(12px,calc((100% - 1120px) / 2));z-index:1}
.t-brand .band::before,.t-brand .scrollSec::before,.t-brand .siteFoot::before{top:-9px}
.t-brand .band::after,.t-brand .scrollSec::after{bottom:-9px}
.t-brand .oneCta::before{height:18px;top:-9px;background:var(--goldRuleBg);opacity:.75}

/* ── 2. מרכוז ── */
.t-brand main,.t-brand main .wrap,.t-brand .heroText{text-align:center}
.t-brand .hero .heroQuote,.t-brand .heroLead{margin-inline:auto}
.t-brand .heroText .btns{justify-content:center}
.t-brand .ask{margin-inline:auto;text-align:center}
.t-brand .when,.t-brand .seferTx,.t-brand .aboutTx,.t-brand .book,.t-brand .end{text-align:center}
.t-brand #sefer .bridge,.t-brand .bridge,.t-brand .book p,.t-brand .badge{margin-inline:auto}
.t-brand .oneCta{justify-content:center}

.t-brand .track{text-align:center;align-items:center}
.t-brand .track .ring,.t-brand .fmt .ring{margin-inline:auto}
.t-brand .track .pr,.t-brand .fmt .pr{justify-content:center}
.t-brand .track .btn{align-self:center}

.t-brand .fmt{grid-template-columns:1fr;justify-items:center;text-align:center}
.t-brand .fmt .btn.small{justify-self:center}

.t-brand .stages li{flex-direction:column;align-items:center;text-align:center;gap:6px}
.t-brand .stages h3 em{margin-inline:8px 0}

.t-brand .item{text-align:center}
.t-brand .item .ico.sm{margin:0 auto 8px}
.t-brand .gets li{justify-content:center;text-align:center}
.t-brand .facts>div{justify-content:center}
.t-brand .faq summary{justify-content:center;text-align:center}
.t-brand .faq p{text-align:center}

.t-brand .siteFoot,.t-brand .siteFoot .footNote{text-align:center}
.t-brand .footMark{margin-inline:auto}

/* "מה מקבלים": בטלפון עמודה אחת ממורכזת. שתי עמודות שמו כל כרטיס
   87 פיקסל מצד אחד של המסך, וזה בדיוק "נוטה לצד". */
@media(max-width:899px){
  .t-brand .getGrid{grid-template-columns:minmax(0,320px);justify-content:center}
}

/* הצהרת המסע: בדסקטופ היא הייתה מיושרת לימין עם קו אנכי בצד. עכשיו
   במרכז גם שם, ולכן הקו האנכי יורד. */
@media(min-width:900px){
  .t-brand .scrollIn{margin-inline:auto;text-align:center}
  .t-brand .scrollIn::before{display:none}
  .t-brand .scrollSec{background-image:
    linear-gradient(90deg,rgba(12,12,13,.80) 0%,rgba(12,12,13,.82) 50%,rgba(12,12,13,.55) 100%),
    url("../assets/art/scroll-1600.webp")}
}
@media(min-width:768px){
  .t-brand .heroText{text-align:center}
  .t-brand .hero .heroQuote,.t-brand .heroLead{margin-inline:auto}
}

/* ── הספר: בטלפון חזיתי ובמרכז, בלי סיבוב ובלי הטיה ──
   הנדנוד העדין מה-JS עדיין חושף את השדרה והדפים, ולכן הוא נשאר ספר
   ולא תמונה. בדסקטופ הוא פונה מעט אל הטקסט, בזווית קטנה מבעבר. */
.t-brand .bkStage{--ry0:0deg;--rx0:0deg}
@media(min-width:860px){
  .t-brand .bkStage{--ry0:14deg;--rx0:0deg}
}

/* ── 3. תמונת המיקרופון בסעיף הקהילה ──
   השוליים נמסים לבורדו במקום מסגרת: "זה ישתלב יפה עם האדום". */
.t-brand .micPic{margin:4px auto 26px;max-width:760px}
.t-brand .micPic img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 45%,#000 62%,transparent 100%)}
/* הנקודה שלפני כל שורה והפלוס שאחרי כל שאלה הזיזו את הטקסט 9 ו-13
   פיקסל הצידה. תאום בלתי נראה בצד השני מאזן אותם, והטקסט עצמו יושב
   בדיוק במרכז. */
.t-brand .gets li::after{content:"";flex:0 0 auto;width:7px;height:7px;visibility:hidden}
.t-brand .faq summary::before{content:"+";visibility:hidden;font-weight:700;flex:0 0 auto;line-height:1.35}
/* בדסקטופ: שבעה כרטיסים בארבע עמודות השאירו שורה שנייה של שלושה צמודה
   לימין. flex עם מרכוז מניח את השורה האחרונה במרכז. ושלוש דרכי הפגישה
   בשלוש עמודות ולא שתיים ועוד אחת יתומה. */
@media(min-width:900px){
  .t-brand .getGrid{display:flex;flex-wrap:wrap;justify-content:center}
  .t-brand .getGrid>.getCard{flex:0 0 calc((100% - 48px) / 4)}
  .t-brand #pgisha .items{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ══════════════════════════════════════════════════════════════════
   11.10.2026 — הקופי של אלון מ-24.09: ההרחבות, פתיחת הקהילה, הסיום
   ══════════════════════════════════════════════════════════════════
   הכל ממורכז, כמו שאר הדף. טקסט רץ ארוך מקבל רוחב קריאה של 60 תווים,
   כדי שמרכוז לא יהפוך פסקה לשיר משונן. */
.t-brand .tracksLead{font-size:var(--t-lead);color:var(--muted);margin:0 auto 26px;max-width:36ch;line-height:1.7}
.t-brand .tracksLead b{color:var(--accentText);font-weight:700}
.t-brand .track .btn + .btn{margin-top:10px}
.t-brand .track .btn.trackMore{margin-top:10px}

.t-brand .expand{padding-block:clamp(34px,6vw,56px)}
.t-brand .expand + .expand{border-top:0}
.t-brand .expand .aboutText{max-width:60ch;margin:0 auto 14px}
.t-brand .expand h2{margin-bottom:22px}
.t-brand .expPull{font-family:"Frank Ruhl Libre",Georgia,serif;font-size:clamp(21px,5.2vw,28px);
  line-height:1.6;color:var(--accentText);max-width:30ch;margin:22px auto}
.t-brand .expList{margin:10px auto 18px}
.t-brand .expList li{font-size:var(--t-body);color:var(--ink);margin-bottom:6px}
.t-brand .verse{margin:30px auto 0;max-width:40ch;padding:22px 0 0;position:relative}
.t-brand .verse::before{content:"";position:absolute;top:-9px;inset-inline:15%;height:18px;
  background:var(--goldRuleBg);opacity:.7}
.t-brand .verse p{font-family:"Frank Ruhl Libre",Georgia,serif;font-size:clamp(20px,4.8vw,26px);
  line-height:1.9;color:var(--ink);margin:0}
.t-brand .verse cite{display:block;margin-top:8px;font-style:normal;font-size:var(--t-cap);color:var(--muted)}

.t-brand .band h2{margin-bottom:12px}
.t-brand .bandSub{font-size:var(--t-lead);color:var(--accentText);max-width:40ch;margin:0 auto 22px;line-height:1.6}
.t-brand .band .aboutText{color:rgba(247,240,225,.82);max-width:60ch;margin:0 auto 14px}
.t-brand .flowLine{font-family:"Frank Ruhl Libre",Georgia,serif;font-size:var(--t-lead);
  color:var(--accentText);margin:6px auto 34px}
.t-brand .bandH{font-family:var(--display);font-weight:var(--dw);font-size:clamp(24px,6vw,34px);margin:10px 0 8px}

.t-brand .getNote{max-width:60ch;margin:0 auto 12px}
.t-brand .badge{display:block;margin:18px auto 0}
.t-brand .badge s{opacity:.7}
.t-brand .badgeHead{font-size:var(--t-lead)}
.t-brand .badgeFine{font-size:var(--t-cap);font-weight:400;opacity:.85}

.t-brand .endWays{display:grid;gap:16px;margin:26px auto 30px;max-width:1000px}
.t-brand .endWay{border:1px solid var(--line);background:rgba(20,18,16,.45);padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.t-brand .endWay .ring{margin:0 auto 12px}
.t-brand .endWay h3{margin:0 0 4px}
.t-brand .endWay .ew{margin:0;color:var(--ink)}
.t-brand .endWay .ewp{margin:4px 0 16px;color:var(--accentText);font-weight:700}
.t-brand .endGoal{font-size:var(--t-lead);line-height:1.7;max-width:40ch;margin:0 auto}
.t-brand .endGoal b{color:var(--accentText)}
@media(min-width:900px){
  .t-brand .end{max-width:1120px}
  .t-brand .endWays{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* בטלפון השורה לא נכנסת בשורה אחת. במקום מפריד שנשאר תלוי בקצה,
   "Zoom Webinar" יורד לשורה משלו והמפריד שלפניו מוסתר. */
@media(max-width:600px){
  .t-brand .when .whenZoom{display:block}
  .t-brand .when .whenSep{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   11.10 — תמונת המיקרופון "מוטמעת" ולא מודבקת (משוב הילל)
   ══════════════════════════════════════════════════════════════════
   היה מלבן חד על הבורדו, ונראה כמו מדבקה. עכשיו:
   · הקצוות נמוגים לרקע מכל ארבעת הצדדים (שתי מסכות לינאריות בחיתוך).
   · התמונה רחבה מהטקסט ונמשכת כמעט לקצות הרצועה, וראשה נכנס מתחת
     לשורת המשנה, כך שהיא עולה מתוך הרקע ולא יושבת עליו.
   · גוון: סינון עדין בלבד (sepia/saturate), ושכבת בורדו ב-multiply רק
     בשוליים. המרכז, כלומר הפנים, נשאר כמעט ללא שינוי.
   · הילת זהב מאחור, אותה שפה כמו ההילה של הספר התלת-ממדי.
   ⚠️ הקובץ המקורי לא נגע. הכל CSS. */
.t-brand .band{overflow-x:clip}
.t-brand .band .eyebrow,.t-brand .band h2,.t-brand .bandSub{position:relative;z-index:2}
.t-brand .bandSub{text-shadow:0 2px 14px rgba(20,4,8,.85)}
.t-brand .micPic{--micMask:
    linear-gradient(180deg,transparent 0%,#000 24%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  position:relative;z-index:1;isolation:isolate;
  --micW:min(1100px,100vw);width:var(--micW);max-width:none;
  /* שוליים שליליים שווים משני הצדדים: ממורכז גם ב-RTL, בלי left/translate */
  margin:-46px calc(50% - var(--micW) / 2) 0}
.t-brand .micPic img{display:block;width:100%;height:auto;
  filter:sepia(.14) saturate(.92) brightness(.96);
  -webkit-mask-image:var(--micMask);mask-image:var(--micMask);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* בורדו בשוליים בלבד, multiply: מושך את הסביבה של התמונה לחומר של
   הסעיף בלי לגעת בגוון העור במרכז. */
.t-brand .micPic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 62% at 50% 46%,rgba(94,22,34,0) 45%,rgba(94,22,34,.55) 100%);
  mix-blend-mode:multiply;
  -webkit-mask-image:var(--micMask);mask-image:var(--micMask);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* הילת זהב מאחור, כמו .bkGlow של הספר. */
.t-brand .micPic::before{content:"";position:absolute;inset:8% 22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(191,160,106,.28),rgba(191,160,106,0));
  filter:blur(18px)}
@media(max-width:899px){
  .t-brand .micPic{margin-block-start:-30px;--micMask:
    linear-gradient(180deg,transparent 0%,#000 22%,#000 72%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%)}
}
@media(prefers-reduced-motion:no-preference){
  .t-brand .micPic::before{animation:bkGlow 7s ease-in-out infinite}
}

/* ══════════════════════════════════════════════════════════════════
   11.10 — שלוש הדרכים כשלושה סעיפים גדולים (qa/spec-three-paths.md)
   ══════════════════════════════════════════════════════════════════
   23.09 [10:00] "כל סקשן כזה צריך להיות יותר גדול ודרמטי" · [13:16] "לא
   ריבוע חמוד קטן". שלושה סעיפים ברוחב מלא, זה מתחת לזה, עמודה ממורכזת.
   רקעים: הספר שחור עם הילת זהב (לא נקבע, פ-4; לא קרם [48:44] ולא צבע
   רביעי [49:21]) · הקהילה בורדו [13:08] · הפגישה שחור [22:15].
   ⚠️ גובה מינימלי לא נקבע (פ-1). הדרמה באה מריפוד, כותרת גדולה ותמונה. */
.t-brand .path{position:relative;padding-block:clamp(64px,13vw,124px)}
.t-brand .pathIn{display:flex;flex-direction:column;align-items:center;text-align:center}
.t-brand .path .ring{margin:0 auto 14px}
.t-brand .pathKick{font-size:var(--t-cap);letter-spacing:.14em;color:var(--muted);margin:0 0 10px}
.t-brand .path h2{font-size:clamp(36px,9.6vw,64px);line-height:1.08;margin:0 0 16px}
.t-brand .pathSub{font-size:var(--t-lead);line-height:1.6;color:var(--accentText);max-width:34ch;margin:0 auto 8px}
.t-brand .pathMode{font-size:var(--t-body);color:var(--muted);margin:4px auto 0}
.t-brand .pathPr{margin:22px auto 26px;font-size:var(--t-lead);line-height:1.5;color:var(--ink)}
.t-brand .pathPr b{font-family:var(--body);font-weight:800;color:var(--accentText);font-size:1.25em}
.t-brand .pathPr .pl{color:var(--ink)}
.t-brand .path .sep{color:var(--muted);margin-inline:4px}
/* כפתורים: אחד מעל השני וממורכזים. ה-ghost נושא margin-inline-start מהבסיס,
   וזה בדיוק מה שהזיז כפתור ימינה בטלפון [05:41]. מאופס. */
.t-brand .pathBtns{display:flex;flex-direction:column;align-items:center;gap:14px}
.t-brand .pathBtns .btn{margin:0}
.t-brand .pathBtns .btn.ghost{background:transparent}

/* דרך 1: הספר. התמונה מתחת לכותרת [12:04], גדולה. */
.t-brand .pathBook{background:
  radial-gradient(70% 55% at 50% 58%,rgba(191,160,106,.13),rgba(191,160,106,0) 70%),
  var(--bg)}
.t-brand .pathBook .book3dSlot{width:100%;padding:26px 0 52px;overflow:visible}
@media(min-width:860px){
  .t-brand .pathBook .bkStage{--bw:clamp(300px,28vw,400px)}
  .t-brand .pathBook .book3dSlot{padding:34px 0 64px}
}

/* דרך 2: הקהילה. .band נותן בורדו, קווי זהב בקצוות והטמעת המיקרופון. */
.t-brand .pathKehila .pathKick{color:rgba(247,240,225,.75)}
.t-brand .pathKehila .ring{border-color:rgba(214,187,132,.5)}
.t-brand .pathKehila .micPic{margin-block-end:0}
.t-brand .pathKehila .pathPr{position:relative;z-index:2}

/* דרך 3: הפגישה. שחור מלא, בלי תמונה, וקו זהב בתחתית לפני ההרחבות. */
.t-brand .pathMeet{background:#000}
.t-brand .pathMeet::after{content:"";position:absolute;bottom:-9px;height:18px;
  inset-inline:max(12px,calc((100% - 1120px) / 2));background:var(--goldRuleBg);opacity:.75;z-index:1}

/* "בחרו את הדרך": בלי הספר, עמודה אחת, ושתי האפשרויות זו לצד זו. */
.t-brand .seferGrid.solo{grid-template-columns:1fr}
@media(min-width:860px){
  .t-brand .wrap#sefer{max-width:1040px}
  .t-brand .seferGrid.solo .fmts{grid-template-columns:1fr 1fr;align-items:stretch}
}
/* הגשר פותח עכשיו את הרחבת הקהילה, על הבורדו. */
.t-brand #kehila .bridge{max-width:34ch;margin:0 auto 14px;color:var(--accentText)}
.t-brand .kehilaHour .bandH{margin-top:0}
/* תיקוני צילום 11.10: שורת המשנה הייתה עמודה צרה בדסקטופ, והמפריד "|"
   במחיר הספר נשאר תלוי בסוף שורה בטלפון. בטלפון שני המחירים נערמים,
   והמפריד מסתובב לקו אופקי קצר ביניהם (הוא נשאר בטקסט, רק מצויר אחרת). */
@media(min-width:860px){ .t-brand .pathSub{max-width:48ch} }
@media(max-width:599px){
  .t-brand .pathBook .pathPr .nb{display:block}
  .t-brand .pathBook .pathPr .sep{display:block;width:1em;margin:2px auto;line-height:1;transform:rotate(90deg)}
}
/* במקום של 3bb4b41 שורת המשנה הייתה שורה אחת. כאן היא שתיים-שלוש, ולכן
   התמונה עולה פחות מתחתיה כדי שהטקסט לא יישב על הפנים. ההטמעה עצמה זהה. */
.t-brand .pathKehila .micPic{margin-block-start:-14px}
@media(max-width:899px){ .t-brand .pathKehila .micPic{margin-block-start:-6px} }

/* ══════════════════════════════════════════════════════════════════
   11.10 — סבב ליטוש מהבודקים. עיצוב ופריסה בלבד, אף מילה לא השתנתה.
   ══════════════════════════════════════════════════════════════════ */

/* העטיפות של סעיף הספר: בטלפון שקופות לפריסה, כאילו אינן. */
.t-brand .pathTx,.t-brand .pathAct{display:contents}

/* 1. המיקרופון בדסקטופ: הקצה האנכי נראה כקו ישר. מעבר לינארי קצר נגמר
      בקו שהעין מזהה, לכן המעבר רחב יותר ומדורג (מתון בהתחלה, מהיר באמצע). */
@media(min-width:900px){
  .t-brand .micPic{--micMask:
    linear-gradient(180deg,transparent 0%,#000 24%,#000 68%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.06) 5%,rgba(0,0,0,.22) 11%,rgba(0,0,0,.5) 17%,
      rgba(0,0,0,.8) 23%,#000 29%,#000 71%,rgba(0,0,0,.8) 77%,rgba(0,0,0,.5) 83%,
      rgba(0,0,0,.22) 89%,rgba(0,0,0,.06) 95%,transparent 100%)}
}

/* 2. גובה. הספר בדסקטופ: טקסט וכפתורים מימין, הספר משמאל, ושני הכפתורים
      נכנסים במסך 1440x900 מתחילת הסעיף. שלושת הסעיפים מקבלים אותו ריפוד
      ואותו גובה מינימלי, כך שהפגישה (בלי תמונה) לא נראית קטועה ליד השניים. */
@media(min-width:960px){
  .t-brand .path{padding-block:88px;min-height:640px;display:flex;flex-direction:column;justify-content:center}
  .t-brand .pathBook .pathIn{display:grid;max-width:1080px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:clamp(32px,5vw,72px);align-items:center}
  .t-brand .pathBook .pathTx,.t-brand .pathBook .pathAct{display:flex;flex-direction:column;align-items:center;grid-column:1}
  .t-brand .pathBook .pathTx{grid-row:1;align-self:end}
  .t-brand .pathBook .pathAct{grid-row:2;align-self:start}
  .t-brand .pathBook .book3dSlot{grid-column:2;grid-row:1 / 3;padding:18px 0 46px}
  .t-brand .pathBook .bkStage{--bw:clamp(270px,25vw,340px)}
  .t-brand .pathBook .pathPr{margin-top:18px}
}

/* 3. יתום: "עם הבורא." נשאר לבד בשורה. שורות מאוזנות בכותרות ובמשנה. */
.t-brand .pathSub,.t-brand .path h2,.t-brand .bandSub{text-wrap:balance}

/* 4. כפתורים ארוכים בטלפון. ריפוד צד וריווח אותיות קטנים יותר מכניסים
      את רובם לשורה אחת; מה שעדיין לא נכנס נשבר לשתי שורות מאוזנות
      וממורכזות, ואף פעם לא נחתך. */
.t-brand .btn{text-align:center;text-wrap:balance;max-width:100%}
@media(max-width:600px){
  .t-brand .btn{padding-inline:20px;letter-spacing:.015em;line-height:1.35}
  .t-brand .fmt .btn.small{padding-inline:16px}
}

/* 5. מפריד המחירים: בטלפון שני המחירים נערמים, והמפריד יצא כמקף בודד.
      הוא נשאר בטקסט (קורא מסך וחיפוש), אבל לא מצויר כשהשורות נערמות. */
@media(max-width:599px){
  .t-brand .pathBook .pathPr .sep{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;transform:none}
  .t-brand .pathBook .pathPr .nb + .nb{margin-top:4px}
}

/* 6. אזורי לחיצה ≥44px בלי שינוי מראה.
      שאלות נפוצות: השורה תופסת את ריפוד הכרטיס (ריפוד + שוליים שליליים
      באותו גודל), כך שכל ראש הכרטיס לחיץ והמיקום לא זז בפיקסל.
      פוטר: הקישור מקבל ריפוד אנכי שמבוטל בשוליים שליליים; הרווח בין
      הקישורים גדל כדי ששני אזורי לחיצה סמוכים לא יחפפו. הקו בריחוף עבר
      מגבול תחתון ל-text-decoration, כדי שלא יירד אל קצה הריפוד. */
.t-brand .faq summary{padding:14px 18px;margin:-14px -18px;min-height:44px;box-sizing:border-box}
.t-brand .faq details[open] summary{margin-bottom:-4px}
.t-brand .footCol ul{gap:0}
.t-brand .footCol a{display:inline-block;padding-block:10px;min-height:44px;box-sizing:border-box;
  border-bottom:0;text-decoration:underline 1px transparent;text-underline-offset:5px}
.t-brand .footCol a:hover{text-decoration-color:var(--accent)}
/* 4ב. שני כפתורים שנשברו בגלל המיכל ולא בגלל המסך (נמדד):
      "אני רוצה להצטרף" צריך 444px ויש לו 414 בתוך ריפוד קופסת המחיר
      (בטלפון 301 מול 285), ו"להצטרפות לקהילה" ב-1024 חסר 3px בעמודה.
      הכפתור מקבל את שולי הקופסה וריפוד צד מעט קטן יותר. */
/* ⚠️ .book p נושא max-width:46ch, וה-oneCta הוא p. זה מה שצמצם את הכפתור. */
.t-brand .book .oneCta{margin-inline:-12px;max-width:none}
@media(min-width:720px){
  .t-brand .book .btn{padding-inline:40px}
  .t-brand .endWay .btn{padding-inline:36px}
}
/* הכותרת נשברה בתוך שם הספר ("אהבת / בראשית") בעמודה של חצי. עמודת הטקסט רחבה יותר. */
@media(min-width:960px){
  .t-brand .pathBook .pathIn{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════════
   11.10 — הפתיח חוזר לקובץ 24.09 (שורות 2-5, 15). עיצוב בלבד כאן.
   ══════════════════════════════════════════════════════════════════ */
.t-brand .heroTag{font-size:clamp(14px,3.9vw,17px);letter-spacing:.12em;color:var(--accentText);
  margin:0 auto 16px;line-height:1.5}
.t-brand .heroBy{font-size:.58em;letter-spacing:.04em;color:var(--muted);vertical-align:.12em}
.t-brand .hero .heroQuote{text-wrap:balance}
@media(min-width:768px){ .t-brand .heroTag{margin-inline:0} }
/* הכפתור במקומו בקובץ: אחרי "לקרוא. ללמוד יחד. להיפגש באופן אישי." */
.t-brand .tracksCta{display:flex;justify-content:center;margin:0 auto 40px}
.t-brand .tracksCta .btn{margin:0}
/* 11.10: כפתור הפתיח חזר (החלטת הילל). ממורכז בטלפון, בשורה אחת. */
.t-brand .heroCta{margin-top:6px}
.t-brand .heroCta .btn{white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   13.10 — סבב התיקונים מהגוגל דוקס של אלון (sources/from-alon-13-10/)
   ══════════════════════════════════════════════════════════════════ */

/* פ-3: הכאב של הקורא, בין ההירו לשאלות. ההדגשות והגדלים הם של אלון:
   שורת הפתיחה מודגשת בגודל הגוף, ושורות ה-14pt שלו גדולות ומודגשות. */
.t-brand .painSec{text-align:center;padding-block:clamp(44px,9vw,80px) clamp(8px,3vw,20px)}
.t-brand .painSec p{color:var(--muted);font-size:var(--t-body);line-height:1.75;max-width:46ch;margin:0 auto 14px}
.t-brand .painSec .painLead{color:var(--ink)}
.t-brand .painSec .painLead b{font-weight:700}
.t-brand .painQs,.t-brand .painWays{list-style:none;padding:0;margin:0 auto 18px;max-width:46ch}
.t-brand .painQs li,.t-brand .painWays li{color:var(--ink);font-size:var(--t-body);line-height:1.7;margin-bottom:6px}
.t-brand .painBig{margin:28px auto 26px;max-width:40ch}
.t-brand .painSec .painBig p{color:var(--ink);font-weight:700;font-size:calc(var(--t-body) * 1.2);line-height:1.6;margin-bottom:8px;text-wrap:balance}

/* פ-4: תמונה בסעיף הפגישה, כמו לספר ולקהילה. רקע התמונה שחור כמו הסעיף,
   ולכן רק התחתית נמסה; בלי מלבן גלוי. */
.t-brand .meetPic{width:min(78vw,420px);margin:22px auto 4px}
.t-brand .meetPic img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* פ-8: כותרת הקהילה בטלפון בשלוש שורות. בדסקטופ שורה אחת כמו קודם. */
@media(max-width:899px){ .t-brand .kehilaH span{display:block} }

/* פ-9: הדיוקן ב"במה נתמקד" נחתך בעיגול הזהב הפנימי של האאורה, כך שהכתפיים
   והחזה לא יוצאים ממנו. המסכה היא עיגול סביב מרכז הליבה; ה-fade הקודם
   בתחתית הדיוקן כבר לא נחוץ כי העיגול סוגר אותו. */
.t-brand .whoClip{position:absolute;inset:0;z-index:1;display:grid;place-items:end center;
  --ringR:75%;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 49%,#000 calc(var(--ringR) - 2%),transparent var(--ringR));
  mask-image:radial-gradient(circle closest-side at 50% 49%,#000 calc(var(--ringR) - 2%),transparent var(--ringR))}
.t-brand .whoClip .who{-webkit-mask-image:none;mask-image:none;width:75%;max-width:none;transform:translateY(2%)}

/* 20.10: עגלה בסרגל הצף, מוכנה לסליקה */
.t-brand .fnCart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;border:1px solid var(--accent);border-radius:50%;
  color:var(--accentText,#D6BB84);text-decoration:none;transition:background .25s ease,color .25s ease}
.t-brand .fnCart:hover,.t-brand .fnCart:focus-visible{background:var(--accent);color:#0E0D0C}
.t-brand .fnCart::after{content:attr(data-count);position:absolute;top:-4px;inset-inline-start:-4px;min-width:18px;height:18px;padding:0 4px;
  box-sizing:border-box;border-radius:9px;background:var(--accentText,#D6BB84);color:#0E0D0C;font-size:11px;font-weight:700;
  line-height:18px;text-align:center;display:none}
.t-brand .fnCart:not([data-count=""]):not([data-count="0"])::after{display:block}