/* ============================================================================
   homepage-v3.css · דף הבית, גרסה 3
   נטען אחרי colors_and_type.css ואחרי site.css
   ============================================================================
   ⛔ טוקנים קיימים בלבד. אין כאן אף צבע, פונט או מידה שהומצאו כאן.
      החלפת עיצוב באתר = שינוי ערכי הטוקנים, בלי לגעת בקובץ הזה.

   ⚠️ הקובץ הזה לא נשען על home-v4.css ולא על home-v5.css בכוונה:
      שניהם בתנועה, ו-home-v5.css בכלל לא קיים על הדיסק (ראו README).
      התלות היחידה היא site.css, שמספק .wrap .btn .nav .footer .skip-link.
   ============================================================================ */

/* ============================================================================
   הפלטה מגיעה ממערכת העיצוב, לא מכאן
   ============================================================================
   ⛔ היתה כאן דריסה שמשחזרת את הסגול, והיא הוסרה ב-31.8
   אחרי שהערכים שוחזרו במקור (`_ds/.../colors_and_type.css`).
   ⭐ אומת לפני ההסרה: --sca-mauve #B07598 · --sca-mauve-light #EDE0E7
   · --sca-mauve-soft #C990AF · --sca-mauve-deep #6E3A5C, כולם קיימים במקור.

   ⚠️ מה שעדיין דורש דריסה: `site.css` מקבע חום ישירות
   בשלושה מקומות (כפתור ראשי, ה-hover שלו, וכפתור הנגישות).
   ============================================================================ */

/* ⭐ העיקרון (הילה 31.8): **deep הוא הדיו והפסים, mauve הוא
   הצבע והאווירה.** לבן על #B07598 נמדד 3.59 ונופל; על
   #6E3A5C הוא עובר בנוחות. כל צירוף נמדד, המספרים ב-README. */
/* ⭐ site.css עדיין מקבע את --mauve-ink לחום (#6B3F31). לפי העיקרון
   שנקבע ("deep הוא הדיו") הטוקן מוגדר מחדש לדפי ה-v3 בלבד - זה מה
   שמונע דיו חום בכרטיסי הספריה (blog.html) ובדף המדריך (guides.css),
   ששניהם עדיין משתמשים ב---mauve-ink. נמדד, ראו README. */
.hp3 { --mauve-ink: var(--sca-mauve-deep); }
/* ⭐ הילה 31.8: "באמת זהב, לא סתם צהוב" - הטוקן #BF9A4D/#D6AC3F נקרא
   חרדל. בדפי ה-v3 הזהב הוא #D4AF37 (זהב קלאסי, נמדד 7.2 על החום הכהה
   ו-4.1 על הסגול העמוק). ⛔ ה-DS הגלובלי לא נגעו - הוא משרת דפים ישנים. */
.hp3 { --sca-gold: #D4AF37; }

.btn--primary { background: var(--sca-mauve-deep); }
.btn--primary:hover { background: var(--sca-mauve); }
.a11y-fab { background: var(--sca-mauve-deep); }
.wa-fab { background: var(--sca-mauve-deep); }

/* ============================================================================
   מרכוז (הילה, 31.8: "אני רוצה את הכל יותר ממורכז")
   ============================================================================
   רפרנס מריה: עמודת טקסט צרה עם הרבה אוויר בצדדים.
   ⛔ החריגים שנשארים עד הקצה: תמונות סקשנים 2 ו-5,
   ופסי ההדר והפוטר.
   ============================================================================ */
:root {
  --hp3-measure: 720px;   /* רוחב טקסט רץ */
  --hp3-section: 1100px;  /* רוחב מקסימלי לסקשן */
}
.hp3 .wrap { width: min(100% - 40px, var(--hp3-section)); }
.hp3 .wrap-narrow { width: min(100% - 40px, var(--hp3-measure)); }
.hp3-wrap--narrow { width: min(100% - 40px, 860px) !important; }

/* ---------- עוגנים כלליים ---------- *//* ---------- עוגנים כלליים ---------- */
.hp3-sect { padding-block: clamp(56px, 4rem + 3vw, 112px); }
.hp3-sect--cream { background: var(--sca-cream); }

.hp3-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.7vw, 2.6rem);
  line-height: 1.22; color: var(--sca-dark);
  margin-block-end: var(--space-6);
}
.hp3-h2--center { text-align: center; }

.hp3-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.3; color: var(--sca-dark);
  margin-block: clamp(40px, 4vw, 64px) var(--space-5);
}

/* טקסט זורם: אורך שורה מוגבל, כי מעל 75 תווים זו בעיית קריאוּת */
.hp3-prose { max-width: 66ch; }
.hp3-prose p {
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.12rem);
  line-height: 1.85; color: var(--sca-dark);
}
.hp3-prose p + p { margin-block-start: var(--space-4); }

.hp3-actions { margin-block-start: var(--space-6); }

/* ---------- מצב "בקרוב" (הילה 31.8: "חלקים אפורים מאיזשהי סיבה") ----------
   כפתור שהיעד שלו עוד לא קיים. לא אפור-תקלה: מסגרת וטקסט בצבעי המותג
   בעוצמה מופחתת + תגית "בקרוב". עדיין לא לינק (disabled נשאר), אבל
   הוא נראה כהחלטת עיצוב ולא כמשהו שבור.
   ⛔ הניגודיות נמדדה: deep על קרם/לבן/הגרדיאנט עובר 4.5 בכל המופעים. */
.btn.is-pending {
  background: transparent;
  border: 1.5px solid var(--sca-mauve-soft);
  color: var(--sca-mauve-deep);
  cursor: default;
  filter: none; opacity: 1;
}
.btn.is-pending:hover { background: transparent; box-shadow: none; transform: none; }
.btn.is-pending .arrow { display: none; }
/* התגית: גלולה קטנה בצבעי המותג, נקראת גם על ידי קורא מסך כחלק מהשם */
.hp3-soon {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--sca-mauve-light);
  color: var(--sca-mauve-deep);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  line-height: 1.5; vertical-align: middle;
}
.btn--sm { min-height: 44px; padding: 10px 22px; font-size: 15px; }

/* ---------- 1 · הירו ---------- */
.hp3-hero {
  background: var(--gradient-brand-soft);
  padding-block: clamp(32px, 3rem + 2vw, 72px) clamp(40px, 3rem + 2vw, 72px);
}

/* הירו עם וידאו ברקע */
.hp3-hero--video {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(56px, 5rem + 4vw, 128px) clamp(40px, 3rem + 2vw, 72px);
  text-align: center;
}
.hp3-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* ⛔ ה-scrim הוא מה שמחזיק את הניגודיות, לא צל.
   נמדד על פיקסלי הווידאו עצמם. ראו README. */
.hp3-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,22,20,.72) 0%, rgba(26,22,20,.80) 55%, rgba(26,22,20,.86) 100%);
}
.hp3-hero--video .hp3-hero__inner {
  position: relative;
  width: min(100% - 40px, var(--hp3-measure));
  margin-inline: auto;
}
.hp3-hero--video .hp3-hero__copy h1,
.hp3-hero--video .hp3-hero__sub { color: var(--sca-cream); }
.hp3-hero--video .hp3-hero__sub { margin-inline: auto; }
.hp3-hero--video .hp3-stats { border-block-start-color: rgba(249,245,238,.35); }
.hp3-hero--video .hp3-stat dt { color: var(--sca-white); }
.hp3-hero--video .hp3-stat dd { color: var(--sca-cream); }
/* מי שביקשה להפחית תנועה לא מקבלת וידאו רץ */
@media (prefers-reduced-motion: reduce) {
  .hp3-hero__video { display: none; }
  .hp3-hero--video { background: var(--gradient-hero-dark); }
}

.hp3-hero__inner {
  display: grid; gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.hp3-hero__copy h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.7vw, 3.4rem);
  line-height: 1.15; color: var(--sca-dark);
  margin-block-end: var(--space-5);
}
.hp3-hero__sub {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.7; color: var(--sca-dark);
  max-width: 46ch;
  margin-block-end: var(--space-6);
}

/* ── 2.9 הילה (בעקבות רותם): כפתור משני בהירו - "לכל התוכניות".
   סבב 2 (הילה): אאוטליין שקוף ולבן, בדיוק באותו גודל של "קחי אותי
   למעבדה" - בלי קו תחתון ("מזכיר מכונות כתיבה"). יורש .btn ולכן
   הגודל זהה בהגדרה; ה-padding מוצמד לזה של הראשי ── */
.hp3-hero__cta2 {
  background: transparent;
  border: 1.5px solid var(--sca-white);
  border-radius: var(--radius-pill);
  color: var(--sca-white); text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.hp3-hero__cta2:hover { background: rgba(255, 255, 255, .14); color: var(--sca-white); }
.hp3-hero__cta2:focus-visible { outline: 2px solid var(--sca-cream); outline-offset: 4px; }
/* הכפתור הראשי והמשני זה לצד זה, ממורכזים.
   2.9 הילה: "בדיוק באותו גודל הכפתור" - min-width משותף מיישר גם את
   הרוחב (הטקסט של המשני קצר יותר, ובלעדיו הוא היה צר ב-57px) */
.hp3-hero__copy .hp3-hero__cta,
.hp3-hero__copy .hp3-hero__cta2 { min-width: 212px; }
.hp3-hero__copy .hp3-hero__cta { display: inline-flex; }
.hp3-hero__copy .hp3-hero__cta2 { margin-block-start: var(--space-4); margin-inline-start: 14px; }
/* 2.9 הילה: "לא ממורכז טוב באמצע הכפתור" - הטקסט בכל הכפתורים שלנו
   ממורכז אנכית ואופקית באמת, לא לפי line-height מקרי */
.hp3 .btn {
  display: inline-flex; align-items: center; justify-content: center;
}
/* הגלילה לעוגן חלקה - רק למי שלא ביקשה להפחית תנועה */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.hp3-hero__media { margin: 0; }
.hp3-hero__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ---------- רצועת המספרים ---------- */
.hp3-stats {
  margin: clamp(36px, 4vw, 64px) 0 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  padding-block-start: clamp(24px, 3vw, 40px);
  border-block-start: 1px solid var(--sca-border);
}
@media (min-width: 760px) { .hp3-stats { grid-template-columns: repeat(4, 1fr); } }

.hp3-stat { text-align: center; }
/* ⚠️ --sca-mauve על גרדיאנט ההירו נמדד 2.81, מתחת לסף 3.0
   של טקסט גדול. mauve-ink נמדד 4.02 ושומר על הסגול. */
.hp3-stat dt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1; color: var(--sca-mauve-deep);
}
.hp3-stat dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small); line-height: 1.5;
  color: var(--sca-dark);
}

/* ---------- 4 · הסבתא ---------- */
.hp3-legacy {
  position: relative; overflow: hidden;
  background: var(--gradient-hero-dark);
  padding-block: clamp(72px, 6rem + 4vw, 160px);
  text-align: center;
}
/* מופעל רק כשהסרטון נכנס: מוסיפים hp3-legacy--has-video */
.hp3-legacy__v {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* 2.9 הילה: "שיבינו מה רואים" - הסרטון שודרג ב-AI והחשיפה הועלתה
     מ-.45 ל-.5. נמדד על הפיקסל הבהיר ביותר מאחורי הטקסט לאורך כל
     הסרטון (12 פריימים): קרם ב-.5 = 3.27 (סף 3). ⛔ .55 ומעלה נופל -
     לא להעלות בלי למדוד מחדש */
  opacity: .5;
}
.hp3-legacy__inner { position: relative; z-index: 2; }
/* ⭐ הילה 31.8: "תחליף לפונט כותרת" - המשפט הוא הצהרה, לא פסקה.
   Rubik כמו בהדר, רוחב שורה מוגבל, והקרם הבהיר על הרקע הכהה. */
.hp3-legacy__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.35;
  color: var(--sca-cream);
  max-width: 24ch;
  margin: 0 auto;
}

/* ---------- 5 · המעבדה ---------- */
.hp3-lab {
  background: var(--sca-white);
  padding-block: clamp(56px, 4rem + 3vw, 112px);
}
.hp3-lab__inner {
  display: grid; gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* התמונה מימין והטקסט משמאל: בתוך RTL הפריט הראשון יושב בימין */
@media (min-width: 900px) {
  .hp3-lab__inner { grid-template-columns: .85fr 1.15fr; }
}
.hp3-lab__media { margin: 0; }
.hp3-lab__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.hp3-lab__sub {
  font-family: var(--font-accent);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  color: var(--sca-mauve);
  margin-block-end: var(--space-5);
}
.hp3-lab__note {
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  color: var(--sca-mauve-deep);
}

/* ============================================================================
   שני קולות טיפוגרפיים, מחולקים לפי תפקיד (הילה, 31.8)
   ============================================================================
   סקשנים 2 ו-3 = קול הסיפור, סריף (רפרנס Jamie Sea)
   סקשנים 5 ו-6 = קול המכירה, סאנס שמן + מילה באקסנט (רפרנס מריה)

   ⭐ הכרעת הילה, 31.8: **כל הכותרות באותו פונט כמו בהדר** -
   Rubik, שהוא --font-display הקיים. ⛔ אין סריף בדף, ולא נוספה
   אף משפחת גופנים חדשה.
   ⭐ שני הקולות נשמרים ב**משקל**, בפריסה, בצבע ובכפתורים:
   קול הסיפור (2, 3) = Rubik 500, רחב ונושם
   קול המכירה (5, 6) = Rubik 800, צפוף עם ריווח אותיות
   ============================================================================ */

/* ---------- קול הסיפור: Rubik במשקל קל ---------- */
.hp3-story-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--sca-dark);
  margin-block-end: var(--space-6);
}
.hp3-story-title--center { text-align: center; }

.hp3-story-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.35; color: inherit;
  margin-block: clamp(36px, 4vw, 56px) var(--space-5);
  text-align: center;
}

.hp3-prose--tight p { font-size: clamp(0.95rem, 0.93rem + 0.2vw, 1.02rem); line-height: 1.8; }
.hp3-prose--center { margin-inline: auto; text-align: center; }

/* ---------- חצי-חצי עם תמונה עד קצה המסך ---------- */
.hp3-split { display: grid; }
@media (min-width: 900px) {
  /* בתוך RTL העמודה הראשונה יושבת בימין */
  /* סקשן 2 עבר לפריסת hp3-story משלו (תיקון הסימונים 31.8) */
  .hp3-split--offer { grid-template-columns: 45% 55%; }   /* תמונה ימין, טקסט שמאל */
}
.hp3-split__copy { display: flex; align-items: center; }
.hp3-split--offer .hp3-split__copy { background: var(--sca-cream); }
.hp3-split__inner {
  width: 100%;
  padding: clamp(40px, 5vw, 88px) clamp(20px, 5vw, 72px);
  max-width: 640px; margin-inline: auto;
}
/* התמונה נגמרת בקצה המסך: בלי שוליים ובלי רדיוס */
.hp3-split__media { min-height: clamp(280px, 52vw, 620px); }
.hp3-split__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0;
}
/* 2.9 תיקון פרופורציות: מתחת ל-900px הגריד בעמודה אחת וגובה השורה
   אוטומטי, ולכן height:100% לא עובד והדפדפן נופל ליחס מה-attrs.
   יחס מפורש (כמו בדפוס העובד של .hp3-next__media img) מייצב את
   הקופסה בכל רוחב */
@media (max-width: 899.98px) {
  .hp3-split__media img { height: auto; aspect-ratio: 3 / 4; }
}

/* מציין מקום לתמונה חסרה. נראה לעין בכוונה. */
.hp3-placeholder {
  display: grid; place-items: center;
  background: var(--gradient-brand-soft);
  border: 2px dashed var(--sca-mauve-soft);
}
.hp3-placeholder__label {
  font-size: var(--text-small); font-weight: 700;
  color: var(--sca-mauve-deep); text-align: center; line-height: 1.7;
  letter-spacing: .04em;
}

/* ---------- כפתור מלא ---------- */
/* בעברית אין אותיות גדולות, ולכן "קאפס" מתורגם למשקל + ריווח אותיות.
   ⭐ הילה 31.8: "עגול להכל" - כל כפתור עם רקע הוא גלולה. ההכרעה שלה
   גוברת על הרפרנס המלבני של מריה (סדר הבכורה בכלל הסקילים). */
.hp3-btn-block {
  display: inline-block; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 16px 34px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; line-height: 1.45;
  text-decoration: none; text-align: center;
  background: var(--sca-dark); color: var(--sca-white);
  transition: background var(--dur-base) var(--ease-out);
}
.hp3-btn-block:hover { background: var(--sca-mauve-deep); }
/* בסקשן ההצעה הכפתור בצבע האקסנט */
.hp3-split--offer .hp3-btn-block { background: var(--sca-mauve-deep); }
.hp3-split--offer .hp3-btn-block:hover { background: var(--sca-dark); }

/* ---------- כפתור גלולה עם מסגרת בלבד ---------- */
.hp3-btn-ghost {
  display: inline-block; cursor: pointer;
  background: transparent;
  border: 1px solid var(--sca-cream);
  border-radius: var(--radius-pill);
  padding: 15px 38px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: .12em; line-height: 1.4;
  color: var(--sca-cream); text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.hp3-btn-ghost:hover { background: var(--sca-cream); color: var(--sca-dark); }

/* "בקרוב" בגרסת הכפתור המלא (סקשן 2, רקע קרם): מסגרת + דיו סגול */
.hp3-btn-block.is-pending {
  background: transparent;
  border: 1.5px solid var(--sca-mauve-soft);
  color: var(--sca-mauve-deep);
  cursor: default; opacity: 1; filter: none;
}
.hp3-btn-block.is-pending:hover { background: transparent; }
/* "בקרוב" בגרסת הגלולה על הרקע הכהה (סקשן 3): קרם מלא לניגודיות,
   העוצמה המופחתת מגיעה מהמסגרת השקופה-חלקית ומהיעדר מילוי */
.hp3-btn-ghost.is-pending {
  border-color: rgba(249, 245, 238, .45);
  color: var(--sca-cream);
  /* ⛔ לא דקורטיבי: קרם 14px מול הנקודה הבהירה של גרדיאנט הסקשן נמדד
     3.70 ונופל מ-4.5. הגיבוי הכהה (35% מ---sca-dark-bg) מרים את הגרוע
     ביותר ל-6.8 בכל נקודה של הגרדיאנט. מי שמחלישה אותו - מודדת מחדש. */
  background: rgba(26, 22, 20, .35);
  cursor: default; opacity: 1; filter: none;
}
.hp3-btn-ghost.is-pending:hover { background: rgba(26, 22, 20, .35); color: var(--sca-cream); }
.hp3-actions--center { text-align: center; }

/* ---------- 2 · אזור הגאונות: ימין כותרת+תמונה, שמאל טקסט ---------- */
.hp3-story__inner { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) {
  .hp3-story__inner { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
}
.hp3-story__lead .hp3-story-title { margin-block-end: clamp(20px, 2.5vw, 36px); }
.hp3-story__media {
  min-height: clamp(300px, 36vw, 460px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hp3-story__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- 1ב · הנישות (בין ההירו לתזה, הילה 31.8) ---------- */
/* משני להירו בכוונה: רקע פסטלי, עיגולים מתונים, צל עדין בלבד.
   ⛔ כל האנימציות (רקע, ריחוף, fade) חיות רק תחת
   prefers-reduced-motion: no-preference - מי שכיבתה אנימציות
   מקבלת סקשן סטטי לגמרי, בלי צורך בדריסות reduce. */
.hp3-niche {
  padding-block: clamp(56px, 4rem + 3vw, 104px);
  text-align: center;
  /* גרדיאנט מהטוקנים בלבד: קרם ← mauve-light ← gold-light ← קרם.
     ההזזה האיטית (26 שניות) נכנסת רק תחת no-preference למטה */
  background: linear-gradient(115deg,
    var(--sca-cream) 0%, var(--sca-mauve-light) 38%,
    var(--sca-mauve-light) 72%, var(--sca-cream) 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
}
.hp3-niche__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.25;
  color: var(--sca-mauve-deep);   /* deep הוא הדיו (הילה 31.8) */
  margin-block-end: clamp(36px, 4vw, 56px);
}
.hp3-niche__ring {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1060px;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  /* 31.8: העיגולים גדלו, ולכן מרווח האופקי הוקטן כדי שהשורה
     האחת תמשיך להחזיק את כל השש בדסקטופ (858px עיגולים + 5 מרווחים) */
  gap: clamp(28px, 4vw, 52px) clamp(20px, 2.5vw, 34px);
}
/* ברוחבי ביניים שורה אחת לא מחזיקה את כל השש - נמדד 31.8: העיגול
   השישי נשבר לבד לשורה שנייה (יתום). הצרה מכוונת ← שתי שורות של 3 */
@media (min-width: 761px) and (max-width: 1079px) {
  .hp3-niche__ring { max-width: 660px; }
}
.hp3-niche__item {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
.hp3-niche__media {
  border-radius: 50%;
  object-fit: cover; display: block;
  border: 3px solid var(--sca-white);
  box-shadow: 0 4px 14px rgba(61, 52, 48, .10);  /* עדין בכוונה */
}
/* 3.9 הילה: "אני רוצה את כולן באותו גודל עיגול, שלא יגידו שיש לי
   העדפות" - גודל אחיד לכולן. ההסטות האנכיות נשארות לפריסה החיה */
.hp3-niche__media { width: 144px; height: 144px; }
.hp3-niche__item:nth-child(2) { margin-top: 26px; }
.hp3-niche__item:nth-child(4) { margin-top: 18px; }
.hp3-niche__item:nth-child(6) { margin-top: 30px; }
/* מציין מקום: mauve-light עם מסגרת מקווקוה - נראה כהחלטה, לא כתקלה */
.hp3-niche__ph {
  background: var(--sca-mauve-light);
  border: 2px dashed var(--sca-mauve-soft);
}
.hp3-niche__label {
  font-size: 15px; font-weight: 600;
  line-height: 1.4; max-width: 150px;
  color: var(--sca-mauve-deep);
}
.hp3-niche__closing {
  margin: clamp(40px, 4.5vw, 64px) auto 0;
  max-width: 46ch;
  color: var(--sca-dark);
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
  line-height: 1.8;
}

@keyframes hp3-niche-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes hp3-niche-float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, -7px); }
}
@keyframes hp3-niche-float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-4px, 6px); }
}
@keyframes hp3-niche-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* הרקע הנע - לכל רוחב מסך, רק בלי reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hp3-niche { animation: hp3-niche-bg 26s ease-in-out infinite; }
}
/* הריחוף - דסקטופ בלבד. delay שלילי שונה לכל עיגול = לא מסתנכרנים */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .hp3-niche__item:nth-child(1) .hp3-niche__media { animation: hp3-niche-float-a 8s   ease-in-out -1s infinite; }
  .hp3-niche__item:nth-child(2) .hp3-niche__media { animation: hp3-niche-float-b 9.5s ease-in-out -3s infinite; }
  .hp3-niche__item:nth-child(3) .hp3-niche__media { animation: hp3-niche-float-a 6.5s ease-in-out -5s infinite; }
  .hp3-niche__item:nth-child(4) .hp3-niche__media { animation: hp3-niche-float-b 7.5s ease-in-out -2s infinite; }
  .hp3-niche__item:nth-child(5) .hp3-niche__media { animation: hp3-niche-float-a 10s  ease-in-out -6s infinite; }
  .hp3-niche__item:nth-child(6) .hp3-niche__media { animation: hp3-niche-float-b 6s   ease-in-out -4s infinite; }
}
/* מובייל: רשת אחידה, בלי ריחוף ובלי הסטות */
@media (max-width: 760px) {
  .hp3-niche__ring {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px 12px; max-width: 420px;
    justify-items: center;
  }
  /* :nth-child(n) שומר על אותה ספציפיות כמו כללי הגדלים למעלה,
     והכלל המאוחר מנצח - בלי !important */
  .hp3-niche__item:nth-child(n) { margin-top: 0; }
  .hp3-niche__item:nth-child(n) .hp3-niche__media { width: 104px; height: 104px; }
}
/* ה-fade-in של המובייל - גם הוא רק בלי reduced-motion */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .hp3-niche__item { animation: hp3-niche-fade .7s ease both; }
  .hp3-niche__item:nth-child(2) { animation-delay: .08s; }
  .hp3-niche__item:nth-child(3) { animation-delay: .16s; }
  .hp3-niche__item:nth-child(4) { animation-delay: .24s; }
  .hp3-niche__item:nth-child(5) { animation-delay: .32s; }
  .hp3-niche__item:nth-child(6) { animation-delay: .40s; }
}

/* ---------- 3 · התזה, רוחב מלא עם scrim ---------- */
.hp3-thesis {
  position: relative; isolation: isolate;
  padding-block: clamp(64px, 6rem + 3vw, 132px);
  background: var(--gradient-hero-dark);
  color: var(--sca-cream);
  text-align: center;
}
/* מופעל רק כשתמונת הרקע תגיע */
.hp3-thesis--has-image {
  background-image: url("../img/thesis-bg.jpg");
  background-size: cover; background-position: center;
}
/* ה-scrim הוא חלק מהעיצוב, וגם מה שמחזיק את הניגודיות */
.hp3-thesis__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,22,20,.78) 0%, rgba(26,22,20,.86) 55%, rgba(26,22,20,.80) 100%);
}
.hp3-thesis__inner { position: relative; }
.hp3-thesis .hp3-story-title,
.hp3-thesis .hp3-story-sub { color: var(--sca-cream); }
.hp3-thesis .hp3-prose p { color: var(--sca-cream); }
/* ── 2.9 הילה: "הסקשן השחור... יותר קל לקריאה". שלושה שינויי הגשה,
   אפס שינויי קופי: (א) גוף הטקסט מיושר לימין - טקסט רץ ממורכז מכריח
   את העין לחפש את תחילת השורה מחדש בכל שורה; הכותרות, שורת הסיום
   והכפתור נשארים ממורכזים. (ב) שורה קצרה יותר על רקע כהה.
   (ג) גוף מעט גדול יותר ── */
.hp3-thesis .hp3-prose { max-width: 56ch; }
.hp3-thesis .hp3-prose--center { text-align: start; }
.hp3-thesis .hp3-prose p { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); }
/* עוגני עין: ביטוי מפתח אחד בכל חצי, בצבע האקסנט. עיצוב בלבד */
.hp3-thesis__hl { color: var(--sca-mauve-soft); font-weight: 700; }

/* ── 2.9 הילה: "אולי כדאי לחלק אותו לשניים?" - החצי השני של הסקשן
   הכהה עבר לסקשן קרם משלו. אותו קופי, הגשה בהירה וקריאה ── */
.hp3-thesis2 {
  background: var(--sca-cream);
  /* 3.9 הילה: "רווח גדול מדי מתחת לעוד על שיטת" - התחתון קוצר.
     הסקשן הבא גם קרם, ושני הריפודים נערמים */
  padding-block: clamp(64px, 6rem + 3vw, 132px) clamp(36px, 3rem + 1vw, 56px);
  text-align: center;
}
.hp3-thesis2 .hp3-prose { max-width: 56ch; margin-inline: auto; }
.hp3-thesis2 .hp3-prose--center { text-align: start; }
.hp3-thesis2 .hp3-prose p {
  color: var(--sca-dark);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
}
.hp3-thesis2__title {
  color: var(--sca-dark);
  margin-block: 0 clamp(28px, 3vw, 44px);
}
/* על קרם הדיו הוא deep, לא soft (soft נמדד 2.6 על קרם ונופל) */
.hp3-thesis2 .hp3-thesis__hl { color: var(--sca-mauve-deep); }
.hp3-thesis2 .hp3-thesis__closer { color: var(--sca-mauve-deep); }
/* גרסת הרפאים הכהה של הכפתור - מסגרת cream בלתי נראית על קרם */
.hp3-btn-ghost--dark {
  border-color: var(--sca-mauve-deep);
  color: var(--sca-mauve-deep);
}
.hp3-btn-ghost--dark:hover { background: var(--sca-mauve-deep); color: var(--sca-white); }

/* ── 2.9 הילה: "תעדכן את דף התוכניות ותעצב אותו יפה באותו סגנון של
   שאר האתר" - ראש על גרדיאנט המותג הרך, כרטיס לבן לכל תוכנית ── */
.prg-hero {
  background: var(--gradient-brand-soft);
  text-align: center;
  padding-block: clamp(48px, 4rem + 2vw, 96px);
}
.prg-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.8rem);
  line-height: 1.1; color: var(--sca-dark); margin: 0;
  text-wrap: balance;
}
.prg-hero__sub {
  margin-block-start: var(--space-4);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--sca-dark);
}
/* מציין מקום קטן וגלוי בתוך שורת טקסט - לקופי שעוד לא נמסר */
.guide-ph-inline {
  display: inline-block;
  border: 1.5px dashed var(--sca-mauve-soft);
  border-radius: var(--radius-pill);
  padding: 4px 16px;
  color: var(--sca-mauve-deep); font-weight: 700; font-size: 15px;
}
.prg-list {
  background: var(--sca-cream);
  padding-block: clamp(52px, 4rem + 2.5vw, 100px);
}
.prg-list__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  line-height: 1.15; color: var(--sca-dark);
  text-align: center; margin-block: 0 clamp(36px, 4vw, 56px);
  text-wrap: balance;
}
.prg-cards {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 880px;
  display: grid; gap: clamp(20px, 2.5vw, 32px);
  counter-reset: none;
}
.prg-card {
  background: var(--sca-white);
  border: 1px solid var(--sca-border, rgba(110, 58, 92, .14));
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 44px);
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  box-shadow: 0 4px 18px rgba(61, 52, 48, .06);
}
.prg-card__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  line-height: 1; color: var(--sca-mauve-deep);
  margin: 0; min-width: 2.2ch;
}
.prg-card__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.25; color: var(--sca-mauve-deep);
  margin-block: 0 var(--space-2);
  text-wrap: balance;
}
.prg-card__when {
  font-weight: 700; color: var(--sca-dark);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6;
  margin-block-end: var(--space-3);
}
.prg-card__body {
  color: var(--sca-dark); line-height: 1.8;
  font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem);
  max-width: 58ch;
}
.prg-card__body + .prg-card__body { margin-block-start: var(--space-3); }
.prg-card__cta { margin-block-start: var(--space-4); }
.prg-card__note {
  margin-block-start: var(--space-2);
  font-size: var(--text-small); color: var(--sca-muted, #7b6f68);
}
@media (max-width: 620px) {
  .prg-card { grid-template-columns: 1fr; gap: 10px; }
  .prg-card__num { min-width: 0; }
}

/* ── 2.9: סקשן השיטה בדף האודות - הטיוטה של מילי נכנסה לבדיקת הילה.
   אותם כללי קריאוּת כמו הסקשנים הבהירים: יישור לימין, שורה 56ch ── */
.about-method {
  background: var(--sca-white);
  padding-block: clamp(56px, 4rem + 3vw, 104px);
}
.about-method__inner { margin-inline: auto; }
.about-method__title { color: var(--sca-dark); text-align: center; }
.about-method__tagline {
  text-align: center; text-wrap: balance;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 600; color: var(--sca-mauve-deep);
  max-width: 34em; margin-inline: auto;
  margin-block: calc(-1 * clamp(16px, 2vw, 28px)) clamp(32px, 3.5vw, 48px);
}
.about-method__prose { max-width: 56ch; margin-inline: auto; text-align: start; }
.about-method__prose h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  line-height: 1.3; color: var(--sca-mauve-deep);
  margin-block: clamp(36px, 4vw, 52px) var(--space-4);
}
.about-method__prose p {
  color: var(--sca-dark); line-height: 1.85;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
}
.about-method__prose p + p { margin-block-start: var(--space-4); }
.about-method__prose strong { color: var(--sca-mauve-deep); }
/* ⛔ חוקי hp3-niche-flag / hp3-niche-support הוסרו 31.8 יחד עם
   הביט שהם שירתו (הוראת הילה). הסקשן החדש: .hp3-niche למטה. */
/* "המתעשרות החדשות" - שורה גדולה משלה, לא טקסט שנבלע */
.hp3-thesis__sub-big {
  font-size: clamp(1.5rem, 1.25rem + 1.4vw, 2.2rem) !important;
  line-height: 1.3;
  margin-block: clamp(32px, 3.5vw, 48px) var(--space-5);
}

.hp3-thesis__closer {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.6; color: var(--sca-white);
  max-width: 52ch; margin: clamp(28px, 3vw, 44px) auto 0;
}

/* ---------- 5 · קול המכירה ---------- */
.hp3-offer-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.5rem);
  line-height: 1.2; letter-spacing: .01em;
  color: var(--sca-dark);
  margin-block-end: var(--space-4);
}
.hp3-offer-sub {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600; color: var(--sca-mauve-deep);
  margin-block-end: var(--space-5);
}
.hp3-offer-body p {
  font-size: var(--text-small); font-weight: 500;
  line-height: 1.75; color: var(--sca-dark);
}
.hp3-offer-body p + p { margin-block-start: var(--space-3); }
.hp3-offer-note {
  margin-block-start: var(--space-4);
  font-size: var(--text-caption); font-weight: 700;
  letter-spacing: .08em; color: var(--sca-mauve-deep);
}

/* ---------- 6 · הצעד הבא ---------- */
/* ⭐ הילה 31.8, לפי תמונת רפרנס: גרדיאנט אלכסוני רך,
   סגלגל-בהיר נמס לקרם חם. שתי עצירות בלבד (בלי gold-light,
   שמכניס צהבהבות שאין ברפרנס). 225 מעלות = הסגלגל מתחיל
   בפינה הימנית העליונה - נקודת הפתיחה של העין בדף RTL -
   ונמס לקרם בפינה הנגדית. מחליף כל רקע קודם של הסקשן. */
.hp3-next {
  background: linear-gradient(225deg, var(--sca-mauve-light) 0%, var(--sca-cream) 100%);
  padding-block: clamp(52px, 4rem + 3vw, 104px);
}
.hp3-next__inner { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
/* ⛔ לא באחוזים: 42%+58% בתוספת gap חורגים מרוחב המכול,
   ועמודת הטקסט נדחפה 42px מחוץ למסך (נמדד L=-22).
   minmax(0,Nfr) מחלק את מה שנשאר **אחרי** ה-gap, וה-0 מונע גלישה. */
/* ⭐ הילה 31.8 (סבב ערב): "התמונה בצד שמאל והתכניות בצד ימין" -
   העמודה הראשונה (ימין ב-RTL) היא הטקסט, השנייה (שמאל) הפורטרט */
@media (min-width: 900px) {
  .hp3-next__inner { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
}

.hp3-next__media { position: relative; margin: 0; }
.hp3-next__media img {
  display: block; width: 100%; height: auto;
  border-radius: 0;                 /* פינות חדות, כמו ברפרנס */
  aspect-ratio: 3 / 4; object-fit: cover;
}
/* מדבקה מסובבת בפינה התחתונה */
.hp3-sticker {
  position: absolute; inset-inline-start: -10px; bottom: 24px;
  background: var(--sca-mauve-deep); color: var(--sca-white);
  padding: 10px 20px;
  font-size: var(--text-caption); font-weight: 800; letter-spacing: .1em;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-sm);
}

.hp3-next__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.1; letter-spacing: .01em;
  color: var(--sca-dark);
  margin-block-end: clamp(24px, 3vw, 40px);
}
/* המילה המודגשת: אצל מריה איטליק סריפי, אצלנו פונט האקסנט של המותג */
.hp3-next__accent {
  font-family: var(--font-accent); font-weight: 400;
  color: var(--sca-mauve-deep);
  font-size: 1.08em;
}

.hp3-steps { list-style: none; margin: 0; padding: 0; }
.hp3-step {
  display: grid; gap: var(--space-4);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: clamp(22px, 2.5vw, 32px);
  border-block-start: 1px solid var(--sca-mauve-soft);
  background: none; border-radius: 0;
}
.hp3-step:last-child { border-block-end: 1px solid var(--sca-mauve-soft); }
/* 2.9 הילה: "בסקשן תכניות צריך להגדיל פונטים משמעותית" - כל תפקידי
   הטקסט בסקשן הוקפצו מדרגה */
.hp3-step__num {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3.2rem);
  line-height: 1; color: var(--sca-mauve-deep);
  margin: 0; min-width: 2.2ch;
}
.hp3-step__num::after { content: none; }
.hp3-step__num-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp3-step__text { min-width: 0; }
.hp3-step__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  line-height: 1.3; letter-spacing: .04em;
  color: var(--sca-mauve-deep);
  margin-block-end: var(--space-2);
}
.hp3-step__when {
  font-weight: 700; color: var(--sca-dark);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6;
  margin-block-end: var(--space-2);
}
.hp3-step__body {
  color: var(--sca-dark); line-height: 1.8;
  font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem);
  max-width: 58ch;
}
.hp3-step__cta { margin-block-start: var(--space-3); }
.hp3-step__link {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 16px;
  font-weight: 800; letter-spacing: .08em;
  /* ⚠️ ברפרנס ה-CTA בצבע האקסנט. mauve-ink על רקע הסקשן
     נמדד 4.02 ונפל מתחת ל-4.5. הצבע נשאר על המספר ועל שם
     הפריט, שהם טקסט גדול ועוברים. ראו README. */
  color: var(--sca-dark); text-decoration: none;
}
/* 2.9 הילה: בלי קווים תחתונים ("מזכיר מכונות כתיבה") - ההובר הוא
   תזוזת החץ, כמו בכפתורי האתר */
.hp3-step__link { transition: gap var(--dur-base) var(--ease-out); }
.hp3-step__link:hover { text-decoration: none; gap: 14px; }
/* "בקרוב" בגרסת קישור הטקסט: דיו סגול מלא (נמדד 6.78 על הגרדיאנט),
   בלי קו הובר - העוצמה המופחתת היא היעדר החץ + התגית */
.hp3-step__link.is-pending {
  color: var(--sca-mauve-deep);
  cursor: default; opacity: 1;
}
.hp3-step__link.is-pending:hover { text-decoration: none; }

/* ⚠️ הכלל הזה נמחק בטעות בהחלפת בלוק סקשן 6 (סבב הרפרנסים)
   והוחזר 31.8 אחרי שהמדידה הראתה text-align: start במקום center.
   השורה ממורכזת על כל רוחב הסקשן, מתחת לשתי העמודות (הילה). */
.hp3-shopline {
  margin-block-start: clamp(32px, 4vw, 48px);
  text-align: center;
  color: var(--sca-dark); line-height: 1.7;
  /* 2.9 הילה: "המשפט שמפנה לחנות בסוף התוכניות חייב להיות יותר גדול" */
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  /* 2.9 הילה: "שלא תהיה שורה ארוכה מאוד ואז מתחתיה ממש קצרה" -
     balance מחלק את השורות שוות באורכן, בכל רוחב מסך */
  text-wrap: balance;
  max-width: 34em; margin-inline: auto;
}
/* אותו איזון שורות על כל טקסט ממורכז רב-שורתי בדף (כותרות ושורות סיום).
   דפדפן ישן מתעלם מהשורה - נופל לגלישה רגילה, כלום לא נשבר */
.hp3-niche__title, .hp3-niche__closing,
.hp3-story-title--center, .hp3-thesis2__title,
.hp3-offer-title, .hp3-next__title, .hp3-legacy__text {
  text-wrap: balance;
}
.hp3-shopline a { color: var(--sca-mauve-deep); font-weight: 800; }

/* ---------- 7 · עדויות ---------- */
/* מרכוז: הבלוק כולו צר, לא נמרח לרוחב (הילה, 31.8) */
.hp3-voices { list-style: none; margin-inline: auto; padding: 0; max-width: 860px; }

.hp3-voice {
  display: grid; gap: var(--space-5);
  align-items: center;
  padding-block: clamp(24px, 3vw, 40px);
}
.hp3-voice + .hp3-voice { border-block-start: 1px solid var(--sca-border); }

@media (min-width: 760px) {
  .hp3-voice { grid-template-columns: 180px 1fr; gap: clamp(24px, 3vw, 48px); }
  /* לסירוגין: הזוגיות מעבירה את התמונה לצד השני */
  .hp3-voice:nth-child(even) { grid-template-columns: 1fr 180px; }
  .hp3-voice:nth-child(even) .hp3-voice__pic { order: 2; }
}

.hp3-voice__pic { margin: 0; }
.hp3-voice__pic img {
  display: block;
  width: clamp(110px, 26vw, 180px); height: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--sca-mauve-light);
  margin-inline: auto;
}

.hp3-voice__body { margin: 0; }
.hp3-voice__body p {
  color: var(--sca-dark); line-height: 1.85;
  font-size: clamp(0.97rem, 0.95rem + 0.2vw, 1.05rem);
}
.hp3-voice__body strong { font-weight: 700; color: var(--sca-mauve-deep); }

.hp3-voice__who { margin-block-start: var(--space-4); }
.hp3-voice__name {
  display: block; font-weight: 700;
  color: var(--sca-dark);
}
/* שורת הסיום של המשובים (הילה 31.8). קטנה מהכותרת, ממורכזת
   כמו הכותרת, בפונט האקסנט של המותג. */
/* ⭐ הילה 31.8: "תגדיל משמעותית!!" - פאנץ' סוגר, לא הערת שוליים.
   גודל של כותרת סקשן, Rubik, הדיו הסגול העמוק (נמדד 8.67 על לבן). */
.hp3-voices__closer {
  margin-block-start: clamp(32px, 4vw, 56px);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--sca-mauve-deep);
}
@media (max-width: 480px) { .hp3-voices__closer { white-space: normal; } }

.hp3-voice__role {
  display: block; font-size: var(--text-caption);
  color: var(--sca-muted); margin-block-start: 2px;
}

/* ============================================================================
   8 · כרטיסי המדריכים
   ⚠️ המחלקות האלה קיימות היום רק בתוך תגית <style> בתוך blog.html,
      ולא ב-site.css. שוכפלו לכאן כדי שהטוען יצייר כרטיסים מעוצבים.
      ⛔ זה שכפול, והוא זמני. הבית הנכון שלהן הוא guides.css המשותף.
      ראו README, סעיף "מה לשפר".
   ============================================================================ */
.blog-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.post {
  display: flex; flex-direction: column;
  background: var(--sca-white);
  border: 1px solid var(--sca-border);
  border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base), border-color var(--dur-base);
}
.post:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--sca-peach);
}
.post__img {
  position: relative; aspect-ratio: 16/9;
  display: grid; place-items: center;
  text-align: center; padding: 18px; overflow: hidden;
}
.post__img .ttl {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--sca-white); line-height: 1.2;
  text-shadow: 0 1px 10px rgba(61, 52, 48, .28);
}
.post__body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; flex: 1;
}
.post__meta {
  display: flex; gap: 10px; align-items: center;
  font-size: var(--text-caption); color: var(--sca-mauve-deep);
  font-weight: 700; margin-block-end: var(--space-2);
}
.post__meta .rt { color: var(--sca-muted); font-weight: 400; }
.post__excerpt {
  font-size: var(--text-small); color: var(--sca-muted);
  line-height: 1.6; flex: 1;
}
.post__more {
  margin-block-start: var(--space-4);
  font-weight: 700; color: var(--sca-mauve-deep);
  font-size: var(--text-small);
  display: inline-flex; gap: 6px; align-items: center;
}

/* תיבת הכשל של רשימת המדריכים. נראית לעין בכוונה. */
.guides-error {
  background: var(--sca-mauve-light);
  border: 1px solid var(--sca-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--sca-dark); text-align: center;
}

/* ---------- העדפת תנועה מופחתת ---------- */
@media (prefers-reduced-motion: reduce) {
  .post { transition: none; }
  .post:hover { transform: none; }
  .hp3-legacy__v { display: none; }
  /* 2.9: במקום גרדיאנט ריק - פריים סטטי מהסרטון (תמונה עומדת מותרת
     גם בהפחתת תנועה). אותה שקיפות אפקטיבית כמו הסרטון, הטקסט נשאר קריא */
  .hp3-legacy--has-video {
    background:
      linear-gradient(rgba(26, 22, 20, .62), rgba(26, 22, 20, .62)),
      url("../img/grandmother-poster.jpg") center / cover no-repeat,
      var(--gradient-hero-dark);
  }
}

/* ============================================================================
   הדר ופוטר כפס צבע (הילה, 31.8 - בהשראת learnaiwithmariah)
   ============================================================================
   ההתנהגות שנמדדה אצל מריה: הדר sticky בגובה 72px, שקוף בראש הדף,
   ועם הגלילה הופך לפס צבע מלא ברוחב המסך. site.js כבר מדליק
   is-scrolled אחרי 20px, ולכן צריך רק לצבוע.

   ⚠️ אצל מריה אין פוטר צבעוני. הפוטר כפס הוא הרחבה של הילה, לא העתקה.
   ============================================================================ */

/* ---------- הדר דו-מצבי (הילה 31.8: זכוכית בהתחלה, מתכהה בגלילה) ----------
   מצב 1 בדפי וידאו (body.hp3--glass): זכוכית - גרדיאנט שקוף-חלקית
   של הסגול העמוק + blur, צף מעל הווידאו. הטקסט לבן.
   מצב 2 (is-scrolled): מתכהה לסגול העמוק המלא.
   דפים בלי הירו כהה (חנות, תוכניות, מדריכים): מתחילים ישר
   במצב הכהה - זכוכית מעל רקע בהיר דורשת טקסט כהה ושוברת את האחידות. */
:root { --hp3-nav-h: 80px; }

.hp3 .nav {
  min-height: var(--hp3-nav-h);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .hp3 .nav { transition: none; } }

/* ⚠️ היה כאן width:100% שדרס את מגבלת הרוחב של .wrap - הלוגו והכפתור
   נדבקו לקצוות (הילה תפסה בצילום). הפס מלא, התוכן בקונטיינר הממורכז. */
.hp3 .nav__inner {
  width: min(100% - 40px, var(--hp3-section));
  margin-inline: auto;
}
/* (כלל הרוחב של footer__grid/footer__bottom הוסר במודע 31.8 - המחלקות
   האלה כבר לא קיימות אחרי המעבר לפוטר החום של נעמה, f-*) */

/* ---- ברירת המחדל לכל דפי hp3: הדר כהה תמיד (גם בלי גלילה) ---- */
.hp3 .nav,
.hp3 .nav.is-scrolled {
  background: var(--sca-mauve-deep);
  backdrop-filter: none;
  box-shadow: var(--shadow-sm);
}

/* ---- דפי וידאו (hp3--glass): זכוכית בראש הדף ---- */
.hp3--glass .nav:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(110, 58, 92, .55) 0%, rgba(110, 58, 92, .25) 100%);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: none;
}
/* ההירו נמשך מתחת להדר השקוף, כדי שהזכוכית תצוף מעל הווידאו */
.hp3--glass .hp3-hero--video {
  margin-block-start: calc(-1 * var(--hp3-nav-h));
  padding-block-start: calc(var(--hp3-nav-h) + clamp(56px, 5rem + 4vw, 128px));
}

/* ---- טקסט ההדר: לבן/קרם בשני המצבים, בכל הדפים ---- */
.hp3 .nav .brand__name,
.hp3 .nav .brand__sub,
.hp3 .nav .nav__link { color: var(--sca-white); }
/* ⭐ הילה 31.8: בלי קווים בהובר ובדף הפעיל. סימון במשקל בלבד.
   ⛔ חיווי הפוקוס למקלדת (:focus-visible) נשמר - זו נגישות. */
.hp3 .nav .nav__link:hover,
.hp3 .nav .nav__link[aria-current="page"] {
  color: var(--sca-white);
  text-decoration: none;
  font-weight: 700;
}
.hp3 .nav .nav__portal {
  border-color: rgba(255, 255, 255, .55);
  color: var(--sca-white);
}
.hp3 .nav .nav__cta { background: var(--sca-white); color: var(--sca-mauve-deep); }
.hp3 .nav .nav__cta:hover { background: var(--sca-cream); }
.hp3 .nav .nav__toggle span,
.hp3 .nav .nav__toggle span::before,
.hp3 .nav .nav__toggle span::after { background: var(--sca-white); }
.hp3 .nav :focus-visible { outline-color: var(--sca-white); }

/* ================= הפוטר החום הכהה (נעמה, מוקאפ מאושר 31.8) =================
   מחליף את פס ה-mauve-deep. המקור: projects/site-launch/footer-redesign/
   (footer-mockup.html + footer-spec.md). כל הצבעים טוקנים; המדידות במפרט
   נעשו מול הקצה הבהיר של הגרדיאנט (#2A2420) - הגרוע מבין השניים. */
.hp3 .footer {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(201, 144, 175, .06), transparent 70%),
    linear-gradient(180deg, var(--sca-dark-surface) 0%, var(--sca-dark-bg) 62%);
  color: var(--sca-cream);
  /* הילה 31.8: "הפוטר מבולגן, תכווצי אותו" - הריפודים והמרווחים הודקו,
     המבנה והצבעים של המוקאפ נשמרו. הניגודיות לא השתנתה (אותם צבעים). */
  padding: 44px 24px 20px;
  overflow: hidden;
}
.hp3 .footer .wrap { max-width: 1160px; margin-inline: auto; }
.hp3 .footer a { text-decoration: none; }
/* צמצום הזהב (הילה 31.8): פוקוס בקרם, לא בזהב */
.hp3 .footer :focus-visible { outline: 3px solid var(--sca-cream); outline-offset: 3px; border-radius: 6px; }

/* ---- שורת ארבע העמודות ---- */
.f-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.35fr;
  gap: 36px;
  align-items: start;
  padding-bottom: 32px;
}
.f-col__label {
  display: block;
  font: 600 12.5px/1 var(--font-body);
  letter-spacing: .18em;
  color: var(--sca-text-light);      /* קרם מעומעם - צמצום הזהב, הילה 31.8. נמדד מחדש */
  opacity: .8;
  margin-bottom: 12px;
}
.f-col__links { display: flex; flex-direction: column; gap: 8px; }
.f-col__links a {
  color: var(--sca-cream);           /* נמדד: 14.09 */
  font-size: 15.5px;
  width: fit-content;
  transition: color .15s;
}
/* 2.9 הילה: בלי קווים תחתונים - המעבר ללבן הוא סימון ההובר */
.f-col__links a:hover { color: var(--sca-white); }

.f-social { display: flex; gap: 12px; margin-bottom: 12px; }
.f-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(249, 245, 238, .28);
  color: var(--sca-cream);
  transition: border-color .15s, color .15s, background .15s;
}
.f-social a:hover { border-color: var(--sca-cream); color: var(--sca-white); }
.f-contact { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.f-contact a { color: var(--sca-cream); font-size: 15px; }
.f-contact a:hover { color: var(--sca-white); }
.f-availability { color: var(--sca-cream); opacity: .85; font-size: 13.5px; }

/* ---- בלוק ההזמנה ---- */
.f-cta {
  background: rgba(249, 245, 238, .04);
  border: 1px solid rgba(249, 245, 238, .12);
  border-radius: 20px;
  padding: 20px 22px;
}
.f-cta__line {
  font-family: var(--font-accent);
  font-size: 26px;                   /* טקסט גדול: סף 3.0. ⛔ לא להקטין מתחת ל-24px */
  line-height: 1.25;
  color: var(--sca-mauve-soft);      /* נמדד: 5.90 */
  margin: 0 0 14px;
}
.f-cta .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--font-body);
  background: var(--sca-cream);      /* קרם מלא עם טקסט כהה - צמצום הזהב, הילה 31.8 */
  color: var(--sca-dark);            /* נמדד מחדש אחרי ההחלפה */
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  transition: background .15s, transform .15s;
}
.f-cta .btn:hover { background: var(--sca-white); transform: translateY(-1px); }
.f-cta .btn:focus-visible { outline-color: var(--sca-cream); }

/* ---- קו ← שם המותג ענק ← ביו ---- */
.f-divider { border: 0; border-top: 1px solid rgba(249, 245, 238, .14); }
.f-brand { text-align: center; padding: 28px 0 4px; }
.f-brand__name {
  font: 800 clamp(32px, 5.6vw, 80px)/1.06 var(--font-display); /* קטן מדרגה - הילה 31.8 */
  color: var(--sca-cream);
  letter-spacing: -0.015em;
  margin: 0;
}
/* 3.9 הילה: "תורידי את הצבע הצהוב מהפוטר... תחליפי את ה'ליוצרות'
   לדפוס רגיל" - אותו פונט, משקל וצבע כמו שאר שם המותג. הגרדיאנט
   המתכתי מ-31.8 הוסר */
.f-brand__accent {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.f-brand__bio {
  max-width: 600px; margin: 14px auto 0;
  color: var(--sca-text-light);      /* נמדד: 12.55 */
  font-size: 15px; line-height: 1.7;
}
.f-brand__bio .spark { color: var(--sca-mauve-soft); }

/* ---- לזכר אגם ---- */
.f-memorial {
  text-align: center;
  margin: 24px auto 0;
  padding-top: 16px;
  max-width: 520px;
  border-top: 1px solid rgba(201, 144, 175, .35);  /* 3.9: הקו של אגם עבר מזהב לסגול הרך (הילה: בלי צהוב בפוטר) */
}
.f-memorial__title {
  font: 600 13.5px/1.6 var(--font-body);
  color: var(--sca-text-light);
  letter-spacing: .04em;
  margin: 0;
}
.f-memorial__hand {
  font-family: var(--font-accent);
  font-size: 24px;                   /* טקסט גדול: סף 3.0. ⛔ לא להקטין מתחת ל-24px */
  color: var(--sca-mauve-soft);      /* נמדד: 5.90 */
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ---- שורת התחתית ---- */
.f-bottom { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(249, 245, 238, .14); }
.f-legal {
  color: var(--sca-text-light); opacity: .75;
  font-size: 12.5px; line-height: 1.7;
  text-align: center;
  margin: 0 0 10px;
}
.f-bottom__row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 13.5px; color: var(--sca-text-light);
}
.f-bottom__row .policies { display: flex; gap: 8px; align-items: center; }
.f-bottom__row a { color: var(--sca-cream); }
.f-bottom__row a:hover { color: var(--sca-white); }
.f-slogan { color: var(--sca-text-light); }
.f-slogan .spark { color: var(--sca-mauve-soft); }

/* ---- מובייל (מפרט נעמה: קיפול העמודות) ---- */
@media (max-width: 1080px) {
  .f-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .hp3 .footer { padding-top: 36px; }
  .f-cols { grid-template-columns: 1fr; }
  .f-cta { width: 100%; }
  .f-cta .btn { width: 100%; justify-content: center; }
  .f-bottom__row { flex-direction: column; text-align: center; }
}

/* site.css מצייר קו מתחת לדף הפעיל באמצעות ::after - יורד גם הוא */
.hp3 .nav .nav__link::after { content: none !important; }

/* ⭐ הילה 31.8: "ללא עלות" בכתב היד של אגם, צמוד מתחת לכותרת המדריכים.
   הצבע: הסגול העמוק - הזהב נמדד 2.17 על הקרם ונפסל; העמוק עובר. */
.hp3-guides-free {
  text-align: center;
  font-family: var(--font-accent);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--sca-mauve-deep);
  margin-block: calc(-1 * var(--space-4)) var(--space-6);
}

/* ===== הכרעת הילה 31.8: בלי קווים תחתונים בניווט ההדר (hover + דף פעיל).
   הסימון נשאר בצבע ובמשקל. focus-visible לא נגוע - נגישות. ===== */
.nav__link::after, .nav__link:hover::after, .nav__link[aria-current=page]::after { display: none; }

/* "ללא עלות" בכתב היד בתוך כותרת דף המדריכים (הילה 31.8).
   גדול מעט מהשורה כדי שכתב היד יישאר קריא; הצבע הסגול העמוק. */
.hp3-title-hand {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.18em;
  color: var(--sca-mauve-deep);
  white-space: nowrap;
}

/* ⭐ הילה 31.8: כותרת הספרייה בהיררכיה - שלוש שורות, כל המילים
   שלה בסדר המקורי. "ללא עלות" בכתב היד כשורה משלו - כך הוא
   קריא (השילוב הצמוד בתוך השורה נמדד קודם ונפל). */
.hp3-lib-title { line-height: 1; }
.hp3-lib-title__main {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  line-height: 1.15; color: var(--sca-dark);
}
.hp3-lib-title__hand {
  display: block;
  font-family: var(--font-accent); font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.25; color: var(--sca-mauve-deep);
  margin-block: var(--space-2);
}
.hp3-lib-title__sub {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.35; color: var(--sca-dark);
}

.hp3-lib-lede { max-width: 44ch; margin-inline: auto; margin-block-start: var(--space-4); }

/* ============================================================================
   דף הספרייה (מבנה מריה, הילה 31.8)
   ============================================================================ */
.lib-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--sca-mauve-deep);
  color: var(--sca-cream);
  text-align: center;
  padding-block: clamp(48px, 4rem + 3vw, 104px);
}
/* האייברו: "ללא עלות" בכתב היד, קרם על הפס הכהה.
   נבחר על פני קאפס-מדומה כי זו המילה שהילה ביקשה בכתב היד,
   ובגודל הזה (34px+) הפונט של אגם קריא. נמדד על הפס. */
.lib-band__eyebrow {
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--sca-cream);
  margin-block-end: var(--space-3);
}
.lib-band__title { line-height: 1; margin: 0; }
.lib-band__main {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 1.7rem + 3.6vw, 4.6rem);
  line-height: 1.1; color: var(--sca-white);
}
.lib-band__sub {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  line-height: 1.35; color: var(--sca-cream);
  margin-block-start: var(--space-3);
}
.lib-band__lede {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.7; color: var(--sca-cream);
  max-width: 46ch; margin: clamp(16px, 2vw, 28px) auto 0;
}

/* ---- אזור הסינון ---- */
.lib-controls { margin-block-end: clamp(28px, 3vw, 44px); }
.lib-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.lib-label {
  font-size: var(--text-caption); font-weight: 800;
  letter-spacing: .12em; color: var(--sca-muted);
  min-width: 64px;
}
.lib-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-pill {
  border-radius: var(--radius-pill);
  border: 1px solid var(--sca-mauve-light);
  background: var(--sca-mauve-light);
  color: var(--sca-mauve-deep);
  cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  padding: 8px 18px; min-height: 40px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lib-pill:hover { border-color: var(--sca-mauve-deep); }
.lib-pill[aria-pressed="true"] { background: var(--sca-mauve-deep); border-color: var(--sca-mauve-deep); color: var(--sca-white); }
.lib-search {
  flex: 1; min-width: 220px; max-width: 420px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--sca-border);
  background: var(--sca-white);
  padding: 10px 20px; min-height: 44px;
  font-family: var(--font-body); font-size: 14px; color: var(--sca-dark);
}
.lib-search::placeholder { color: var(--sca-muted); }
.lib-search:focus { outline: none; border-color: var(--sca-mauve-deep); box-shadow: 0 0 0 3px rgba(110,58,92,.15); }
.lib-sort {
  border-radius: var(--radius-pill);
  border: 1px solid var(--sca-border);
  background: var(--sca-white);
  padding: 9px 18px; min-height: 44px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--sca-dark);
}
.lib-count {
  font-size: var(--text-small); color: var(--sca-muted);
  margin-block-start: var(--space-2);
}
.lib-empty {
  text-align: center; color: var(--sca-muted);
  padding: 48px 0; font-size: 1.05rem;
}

/* הווידאו של הילה כותבת מאחורי הפס, עם זיגוג סגול.
   ⛔ הזיגוג הוא מה שמחזיק את הניגודיות - נמדד על הפריים הבהיר. */
.lib-band__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.lib-band__glaze {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(110, 58, 92, .82);
}
@media (prefers-reduced-motion: reduce) { .lib-band__video { display: none; } }

/* ---- טעני עוד ---- */
.lib-more-wrap { text-align: center; margin-block-start: clamp(24px, 3vw, 40px); }

/* ---- שלוש קופסאות ההמשך (מבנה מריה) ---- */
.lib-next {
  background: var(--sca-mauve-deep);
  padding-block: clamp(48px, 4rem + 3vw, 96px);
}
.lib-next__grid { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 900px) { .lib-next__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lib-card {
  display: flex; flex-direction: column;
  background: var(--sca-cream);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 2.5vw, 36px);
  text-align: center;
}
.lib-card__eyebrow {
  font-size: var(--text-caption); font-weight: 800;
  letter-spacing: .1em; color: var(--sca-mauve-deep);
  margin-block-end: var(--space-3);
}
.lib-card__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.25; color: var(--sca-dark);
  margin-block-end: var(--space-3);
}
.lib-card__body {
  font-size: var(--text-small); line-height: 1.7;
  color: var(--sca-dark); flex: 1;
}
.lib-card__cta { margin-block-start: var(--space-5); }
.lib-card__cta .btn { width: 100%; justify-content: center; }

/* ---- ראש דף המדריכים: פס וידאו צר + ערימה על בהיר (הילה 31.8) ---- */
.lib-strip { height: clamp(120px, 15vw, 180px); overflow: hidden; } /* הוצר 31.8 לבקשת הילה */
.lib-strip__v { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .lib-strip { background: var(--gradient-brand-soft); }
  .lib-strip__v { display: none; }
}

.lib-head {
  background: var(--gradient-brand-soft);
  text-align: center;
  padding-block: clamp(36px, 3rem + 2vw, 72px);
}
.lib-head__eyebrow {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  line-height: 1.2; color: var(--sca-mauve-deep);
  margin-block-end: var(--space-2);
}
.lib-head__title { line-height: 1; margin: 0; }
.lib-head__main {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.6rem + 3.2vw, 4.2rem);
  line-height: 1.1; color: var(--sca-dark);
}
/* הדו-גוני: "המדריכים" בסגול העמוק, כמו הכותרת הדו-גונית במקור */
.lib-head__tint { color: var(--sca-mauve-deep); }
.lib-head__sub {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.35; color: var(--sca-dark);
  margin-block-start: var(--space-3);
}
.lib-head__lede {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.7; color: var(--sca-dark);
  max-width: 46ch; margin: clamp(14px, 1.8vw, 24px) auto 0;
}

/* ===== תיקון 31.8, הילה: תוויות הסינון בפונט האתר + הבלוק ממורכז ולא תלוש ===== */
.lib-label { font-family: var(--font-body), 'Assistant', sans-serif; letter-spacing: .02em; }
.lib-controls { max-width: 720px; margin-inline: auto; margin-block-start: -64px; }
.lib-row { justify-content: center; }

/* ===== 31.8, הילה: הכפתורים הצפים מורמים מהקצה ===== */
.a11y-fab, .wa-fab { bottom: 24px; }
.wa-online { bottom: 58px; }

/* ===== 31.8, הילה: תווית הארכיון המשפחתי על סרטון הסבתא ===== */
.hp3-legacy__credit {
  font-family: var(--font-accent), cursive;
  font-size: clamp(24px, 2.6vw, 32px);  /* רצפת 24px לכתב היד על כהה */
  color: var(--sca-cream);
  opacity: .92;
  text-align: center;
  margin-top: 28px;
  text-shadow: 0 1px 10px rgba(26,22,20,.55);
}
/* 2.9: הזהב על השמלה הלבנה נמדד 2.07 בחשיפת .5 - נופל. גלולת רקע
   כהה (אלפא .5) מרימה את המקרה הגרוע ל-4.16 ונראית כתווית ארכיון */
.hp3-legacy--has-video .hp3-legacy__credit {
  display: inline-block;
  background: rgba(26, 22, 20, .5);
  border-radius: var(--radius-pill);
  padding: 6px 26px 10px;
}

/* ===== 31.8, הילה: הסרטון של הסבתא נגלל כמו תמונה קבועה (פרלקסה) ===== */
.hp3-legacy { overflow: hidden; }
@media (min-width: 769px) {
  .hp3-legacy__v[data-fixed-bg] { height: 100vh; top: 0; bottom: auto; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  .hp3-legacy__v[data-fixed-bg] { height: 100%; transform: none !important; }
}

/* ===== 31.8: באג - .btn דורס את [hidden] (display:inline-flex מנצח). כפתור מוסתר חייב להיעלם ===== */
.lib-more[hidden] { display: none !important; }

/* ===== 31.8, הילה: "סגול להחריד" - כרטיסי המדריכים חוזרים לבהיר כמו ההשראה של מריה.
   רקעים בהירים, כותרת כהה, האקסנט הסגול רק בפרטים ===== */
.post__img .ttl { color: var(--sca-dark); text-shadow: none; }
.post__img { border-block-end: 1px solid var(--sca-border); }

/* ===== 31.8, הילה: משפט הגאונות כמסקנת הסיפור ===== */
.hp3-story-conclusion { font-family: var(--font-display), sans-serif; font-size: 1.25em; color: var(--sca-mauve-deep); margin-block-start: 24px; }

/* ===== 31.8, הילה: משובים - 3 גלויות, השאר בהרחבה, סוגר עם כפתור ===== */
.hp3-voices__more-wrap { text-align: center; margin-block: 28px; }
.hp3-voices--extra { margin-block-start: 36px; }
.hp3-voices__cta { text-align: center; margin-block-start: 20px; }

/* ===== 31.8, הילה: אחרי הסרת 94% - שלושת המספרים ממורכזים ומרווחים ===== */
@media (min-width: 760px) {
  .hp3-stats {
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: center;
    gap: clamp(32px, 6vw, 96px);
  }
}

/* במובייל (2 עמודות): המספר השלישי לא נשאר יתום בצד - נמתח וממורכז */
@media (max-width: 759.98px) {
  .hp3-stats .hp3-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ===== 31.8, הילה: המבורגר יפה + תפריט נפתח בהיר, נגיעות סגול, כיתוב חום ===== */
/* האייקון: שלושה פסים מעוגלים בסגול העמוק, קצר-ארוך-קצר, על גלולה בהירה */
.hp3 .nav__toggle {
  border-radius: 999px;
  border: 1.5px solid var(--sca-mauve-light);
  background: var(--sca-cream);
  transition: border-color .2s, background .2s;
}
.hp3 .nav__toggle:hover { border-color: var(--sca-mauve-deep); }
.hp3 .nav__toggle span,
.hp3 .nav__toggle span::before,
.hp3 .nav__toggle span::after {
  background: var(--sca-mauve-deep);
  height: 2.5px; border-radius: 2px;
  transition: transform .3s var(--ease-out), width .3s, background .2s, top .3s;
}
.hp3 .nav__toggle span { width: 20px; }
.hp3 .nav__toggle span::before { width: 14px; inset-inline-start: 0; }
.hp3 .nav__toggle span::after  { width: 17px; inset-inline-start: 0; }
.hp3 .nav.is-open .nav__toggle span { background: transparent; }
.hp3 .nav.is-open .nav__toggle span::before,
.hp3 .nav.is-open .nav__toggle span::after { width: 20px; }

@media (max-width: 860px) {
  /* התפריט הנפתח: בהיר, כיתוב חום, נגיעות סגול */
  .hp3 .nav__links {
    background: linear-gradient(165deg, #FDFBF7 0%, var(--sca-cream) 55%, var(--sca-mauve-light) 130%);
    border-block-start: 3px solid var(--sca-mauve-deep);
  }
  .hp3 .nav__link { color: var(--sca-dark); }           /* החום החם של המותג */
  .hp3 .nav__link:hover,
  .hp3 .nav__link[aria-current=page] { color: var(--sca-mauve-deep); }
  .hp3 .nav__link::after { background: var(--sca-mauve); display: block; } /* הנגיעה הסגולה */
  .hp3 .nav.is-open .nav__toggle { background: var(--sca-mauve-light); border-color: var(--sca-mauve-deep); }
}

/* תיקון: מצב הזכוכית צובע לינקים בלבן - בתפריט הפתוח הכיתוב חוזר לחום, בכל מצב הדר */
@media (max-width: 860px) {
  .hp3 .nav.is-open .nav__link,
  .hp3--glass .nav.is-open .nav__link,
  .hp3--glass .nav:not(.is-scrolled).is-open .nav__link {
    color: var(--sca-dark);
  }
  .hp3 .nav.is-open .nav__link:hover,
  .hp3 .nav.is-open .nav__link[aria-current=page],
  .hp3--glass .nav.is-open .nav__link[aria-current=page] {
    color: var(--sca-mauve-deep);
  }
  .hp3 .nav.is-open .nav__pill,
  .hp3 .nav.is-open a[href*="portal"] {
    color: var(--sca-mauve-deep); border-color: var(--sca-mauve-deep);
  }
}

/* ===== 31.8, הילה: פסי ההמבורגר לבנים על הכהה, בלי העיגול ===== */
.hp3 .nav__toggle,
.hp3 .nav__toggle:hover,
.hp3 .nav.is-open .nav__toggle {
  background: transparent;
  border: none;
  box-shadow: none;
}
.hp3 .nav__toggle span,
.hp3 .nav__toggle span::before,
.hp3 .nav__toggle span::after {
  background: #FFFFFF;
}
/* כשהתפריט הבהיר פתוח - ה-X מתחלף לסגול העמוק כדי להישאר נראה */
.hp3 .nav.is-open .nav__toggle span { background: transparent; }
.hp3 .nav.is-open .nav__toggle span::before,
.hp3 .nav.is-open .nav__toggle span::after {
  background: var(--sca-mauve-deep);
}

/* ── אפקט קסם על "ממכרת" בכותרת הנישות (הילה 31.8: "נקודה... אפקט של קסם") ── */
.hp3-niche__magic{
  position:relative; display:inline-block;
  /* שלושה פסי ברק במרווח של שליש תמונה = רוחב מילה אחד. ככה ברגע
     שברק יוצא משמאל, הבא כבר נכנס מימין - אפס השהיה (הילה 31.8) */
  background:linear-gradient(100deg,
    var(--sca-mauve-deep) 0%, var(--sca-mauve-deep) 12.67%,
    var(--sca-mauve) 14.67%, #C9A63C 16.67%, var(--sca-mauve) 18.67%,
    var(--sca-mauve-deep) 20.67%, var(--sca-mauve-deep) 46%,
    var(--sca-mauve) 48%, #C9A63C 50%, var(--sca-mauve) 52%,
    var(--sca-mauve-deep) 54%, var(--sca-mauve-deep) 79.33%,
    var(--sca-mauve) 81.33%, #C9A63C 83.33%, var(--sca-mauve) 85.33%,
    var(--sca-mauve-deep) 87.33%, var(--sca-mauve-deep) 100%);
  background-size:300% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text;
  color:var(--sca-mauve-deep); -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  /* 31.8 הילה: "האפקט הבוהק כל הזמן ללא השהיה" + "איך שהמילה נגמרת
     כבר מתחיל אור חדש עליה" - תנועה ליניארית רציפה מימין לשמאל.
     0% עד 50% מזיז את התמונה בדיוק מחזור-פס אחד, ולכן הלופ חלק
     לגמרי ותמיד יש ברק אחד על המילה */
  .hp3-niche__magic{ animation:hp3MagicSweep 3.5s linear infinite; }
  @keyframes hp3MagicSweep{
    0%{ background-position:0% 0; }
    100%{ background-position:50% 0; }
  }
}

/* ===== 5.9.2026 הילה: סמן רגיל, שמשתנה מעל לחיץ =====
   הסמן המותאם (נקודה+טבעת, cursor:none) הוסר מ-site.js ומ-site.css.
   לינקים מקבלים pointer מהדפדפן; כאן משלימים את מה שהדפדפן לא נותן לבד. */
.hp3 button:not(:disabled), .hp3 [role="button"], .hp3 summary,
.hp3 label[for], .hp3 .nav__link, .hp3 .f-col__links a { cursor: pointer; }
.hp3 button:disabled { cursor: not-allowed; }
/* תפריט הנגישות ("סמן שחור" / "סמן גדול") גובר על הכללים שמעל - נמדד 5.9:
   בלי זה .hp3 .nav__link (0,2,0) ניצח את html.a11y-cursor-black * (0,1,0) */
html.a11y-cursor-black .hp3 *, html.a11y-cursor-large .hp3 * { cursor: inherit; }