/* ===========================================================
   ריטריט יוגה ומדיטציה בשתיקה — מערכת עיצוב
   =========================================================== */

/* גופנים נטענים גם דרך <link> ב-index.html (preconnect+swap מהיר יותר); ה-@import
   כאן משמש כ-fallback בלבד עבור עמודים סטטיים אחרים (privacy/terms/וכו') */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Heebo:wght@400;500;600;700&display=swap');

:root {
  /* Sangam brand palette — extracted from sungamyoga.com (computed styles + logo asset,
     16.8.2026): navy #0d374e / teal #3097a2 / gold #cea32b appear as the recurring brand
     colors on the live site and in assets/brand/sungamlogodaf.png. No green in the source
     brand — the previous olive/forest palette was invented, not derived, and is removed. */
  --brand-primary: #0D374E;   /* navy — wordmark, primary buttons, dark surfaces */
  --brand-primary-deep: #082A3D; /* darker navy — secondary dark surface depth */
  --brand-secondary: #3097A2; /* teal — logo wave, secondary accent */
  --brand-accent: #CEA32B;    /* gold — logo sun/spiral, warm decorative accent */
  --brand-accent-soft: #E4C978; /* lighter gold tint — low-opacity decorative marks only */
  --brand-paper: #F8F3E9;     /* cream — site background, sampled from sungamyoga.com */
  --brand-soft: #EFE6D3;      /* warm soft neutral for alternating section backgrounds */
  --brand-ink: #2A2F36;       /* charcoal-navy text, sampled from sungamyoga.com headings */
  --brand-muted: #6B7480;     /* muted navy-gray for secondary text */

  --ink: var(--brand-ink);
  --ink-soft: #4A5058;
  --paper: var(--brand-paper);
  --cream: var(--brand-soft);
  --sand: #E9DCC3;
  --white-warm: #FFFDF8;

  /* צבעים — מיפוי פלטת המותג לתפקידים סמנטיים קיימים */
  --color-bg: var(--paper);
  --color-bg-alt: var(--cream);
  --color-surface: var(--white-warm);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-muted: var(--brand-muted);
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-deep);
  --color-primary-contrast: var(--white-warm);
  --color-accent: var(--brand-accent);
  --color-accent-contrast: var(--brand-ink);
  /* accent-text = navy, לא gold: gold על paper/cream לא עומד ב-4.5:1, נמדד ~2.1:1.
     navy על cream נמדד mעל 9:1 - שימוש בטקסט קטן קריא (eyebrow/guide-role/שמות) */
  --color-accent-text: var(--brand-primary);
  --color-border: var(--sand);
  --color-focus: var(--brand-primary);
  --color-surface-dark: var(--brand-primary);
  --color-text-on-dark: var(--white-warm);

  /* כינויים סמנטיים (אותה פלטה, שמות עקביים לשימוש עתידי) */
  --bg-main: var(--color-bg);
  --bg-soft: var(--color-bg-alt);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-muted: var(--color-muted);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-hover);
  --border: var(--color-border);

  /* טיפוגרפיה — Rubik (display) + Heebo (body/UI). Frank Ruhl Libre הוחלף: כגופן ספר/סידור
     ליטורגי הוא מתנגש עם הדרישה המפורשת "לא ספר דתי". Rubik הוא sans גיאומטרי-חם, קרוב
     ברוחו לגופן המותג האמיתי (Futura, sans גיאומטרי) עם תמיכת עברית מלאה וטווח משקלים
     רחב (400-800) שמאפשר היררכיה חזקה בלי לעבור לגופן שונה לגמרי מה-body. */
  --font-base: 'Heebo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display: 'Rubik', 'Heebo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --fs-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-sm: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --fs-base: clamp(1.03rem, 1rem + 0.2vw, 1.1875rem);
  --fs-lg: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
  --fs-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --fs-2xl: clamp(1.85rem, 1.55rem + 1.3vw, 2.7rem);
  --fs-3xl: clamp(2.35rem, 1.85rem + 2.3vw, 3.85rem);
  --fs-quote: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  --lh-tight: 1.12;
  --lh-normal: 1.7;
  --measure: 66ch;

  /* מרווחים — סקאלה בסיסית */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* מרווחי סקשן — 3 דרגות: compact(sm) / standard(md/lg) / immersive, לא ערך אחיד לכל סקשן */
  --section-space-immersive: clamp(88px, 9vw, 150px);
  --section-space-lg: clamp(64px, 6vw, 88px);
  --section-space-md: clamp(52px, 5vw, 68px);
  --section-space-sm: clamp(40px, 4vw, 54px);
  --heading-gap: clamp(28px, 3vw, 40px);

  /* Structural Recomposition — scene spacing tokens (בתוך chapter vs בין chapters).
     כווץ ב-Final Editorial Compression: קצב עריכתי הדוק יותר, פחות "חורים" ריקים. */
  --space-scene-tight: 32px;
  --space-scene: 52px;
  --space-chapter: 88px;

  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(46, 42, 36, 0.06);
  --shadow-md: 0 10px 28px rgba(46, 42, 36, 0.09);
  --container: 1200px;
  --content-padding-x: clamp(20px, 4vw, 40px);
  --sticky-cta-h: 60px;

  /* מקצבי רקע — עד 4 גוונים, בשימוש ב-blocks ולא zebra */
  --bg-cream: var(--color-bg);
  --bg-warm-white: var(--color-bg-alt);
  --bg-olive: var(--color-surface-dark);

  /* Radius tokens — Final Real Boutique Redesign: רק 0/10/14px, שפה אחידה */
  --radius-small: 10px;
  --radius-medium: 14px;

  /* Typography scale tokens — Boutique Rebuild (H1/H2/body/quote, mobile+desktop) */
  --fs-h1-mobile: clamp(2.375rem, 2rem + 1.6vw, 2.75rem);
  --fs-h1-desktop: clamp(3.5rem, 2.6rem + 3vw, 4.25rem);
  --fs-h2-mobile: clamp(1.875rem, 1.6rem + 1vw, 2.125rem);
  --fs-h2-desktop: clamp(2.5rem, 1.9rem + 2vw, 2.875rem);
  --fs-body: var(--fs-base);
  --fs-quote-mobile: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  --fs-quote-desktop: clamp(2.25rem, 1.6rem + 2vw, 2.875rem);

  /* Typography hierarchy — Boutique Visual Finishing Pass: 3 distinct H2 levels */
  --fs-h2-chapter: clamp(44px, 5vw, 64px);
  --fs-h2-section: clamp(32px, 3.2vw, 42px);
  --fs-h3-support: clamp(24px, 2vw, 28px);
  --fs-body-desktop: 18px;
  --fs-body-mobile: 17px;
}

/* ===== איפוס בסיסי ===== */
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(17px, 16.6px + 0.15vw, 18px);
  line-height: 1.72;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--space-3); font-weight: 650; }
h3 { font-size: var(--fs-h3-support); font-weight: 600; }

/* ===== Bellefair — פונט חתימה, self-hosted =====
   מקור: google/fonts repo הרשמי (ofl/bellefair, upstream shinntype/bellefair,
   עיצוב עברי מאת לירון לביא טורקניץ'), רישיון OFL-1.1 - ראה
   assets/fonts/bellefair/OFL.txt. לא נטען מ-Google Fonts CDN בכוונה: קישור
   ה-CDN הרגיל הגיש בעבר קובץ (v15) בלי subset עברי אמיתי - אומת ויזואלית
   ב-Prototype. משקל 400 (Regular) הוא היחיד שקיים בפועל לגופן הזה - אין
   Bold אמיתי, ולכן font-weight מוגדר כאן במפורש כדי שהדפדפן לא ינסה
   לסנתז הדגשה מלאכותית (fake bold). */
@font-face {
  font-family: 'Bellefair';
  src: url('../assets/fonts/bellefair/Bellefair-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bellefair כפונט חתימה: Hero H1, שתי רמות ה-H2 (section-title הרגיל +
   chapter-h2 הגדול יותר - ההיררכיה הקיימת כבר, לא נוצרה חדשה), ומשפטי
   המרכז של שני רגעי הנשימה הוויזואליים בלבד. לא טקסט רץ, לא H3, לא UI,
   לא כפתורים/מחירים/FAQ/לו"ז - אלה נשארים בפונט הגוף המקורי (Heebo/Rubik
   דרך var(--font-base)/var(--font-display) הרגילים, ללא שינוי). !important
   בכוונה: h1/h2 מקבלים ספציפיות CSS שונה מאוד ברחבי קובץ בן 2000+ שורות -
   כלל חדש יחיד כאן חוסך refactor פזור על עשרות סלקטורים בודדים. */
h1,
h2,
.pull-quote-visual blockquote.pull-quote {
  font-family: 'Bellefair', 'Rubik', 'Heebo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
  font-weight: 400 !important;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p + p { margin-top: -0.3em; }
ul, ol { margin: 0 0 var(--space-4); padding-inline-start: 1.3em; }
button { font-family: inherit; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== מבנה כללי ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--content-padding-x);
}

/* מובייל: קצב הדוק עוד יותר מדסקטופ */
@media (max-width: 759px) {
  :root {
    --space-scene-tight: 26px;
    --space-scene: 40px;
    --space-chapter: 64px;
  }
}

/* ריווח סקשנים עקבי — משתנה במקום ערכים חד-פעמיים */
section { padding-block: var(--space-scene); }
section.tight { padding-block: var(--space-scene-tight); }
section.compact { padding-block: var(--space-scene-tight); }
/* חיבור בין סקשנים סמוכים באותו chapter — פחות padding בצד המחובר */
section.connect-up { padding-top: var(--space-scene-tight); }
section.connect-down { padding-bottom: var(--space-scene-tight); }

/* ===== Scene separator — מוטיב "breath mark" אבסטרקטי יחיד, עד 4 שימושים בדף ===== */
.scene-separator {
  display: flex;
  justify-content: center;
  padding-block: clamp(20px, 3vw, 32px);
  color: var(--brand-accent);
  opacity: 0.65;
}
.scene-separator svg { display: block; }

/* ===== Chapter wrappers — background ownership + rhythm בין chapters ===== */
.chapter { position: relative; }
.chapter + .chapter { margin-top: var(--space-chapter); }
.chapter--arrival,
.chapter--tangible { background: var(--paper); }
.chapter--silence { background: var(--cream); }
.chapter--experience { background: var(--paper); }
.chapter--decision { background: var(--paper); }
/* Hero -> Trust -> Identify -> Pull quote -> Aviv: רצף פתיחה אחד, לא 5 sections */
.chapter--arrival .trust-bar { padding-top: 20px; padding-bottom: var(--space-scene-tight); border-block: 0; }
.chapter--arrival .identify { padding-top: 36px; padding-bottom: var(--space-scene-tight); }
.chapter--arrival .identify .container { max-width: 660px; text-align: start; }
.chapter--arrival .why-pause.pull-quote-visual { margin-top: var(--space-scene); }
.chapter--arrival .why-pause + section .editorial-quote-wrap { max-width: 720px; margin-inline-start: auto; margin-inline-end: 0; text-align: end; }
.chapter--arrival .why-pause + section { padding-top: var(--space-scene-tight); }

.section-title {
  font-size: var(--fs-h2-section);
  font-weight: 650;
  line-height: 1.12;
  text-align: start;
  margin-bottom: var(--heading-gap);
  max-width: 30ch;
  margin-inline: 0;
}
.section-title.chapter-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2-chapter);
  line-height: 1.08;
}
.section-title--center {
  text-align: center;
  margin-inline: auto;
}
.section-lede {
  text-align: start;
  max-width: 62ch;
  margin-inline: 0;
  margin-bottom: var(--heading-gap);
  color: var(--color-text-soft);
}
.section-lede--center { text-align: center; margin-inline: auto; }

/* ===== Header ===== */
.site-header {
  padding-block: var(--space-4);
  background: var(--color-bg);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  font-weight: 700;
  font-size: var(--fs-lg);
  text-decoration: none;
}
a.header-cta {
  display: none;
}
@media (min-width: 640px) {
  a.header-cta { display: inline-flex; }
}

/* ===== כפתורים ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  padding-inline: 24px;
  padding-block: 0.7em;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-block { width: 100%; }

/* ===== WhatsApp CTAs — ירוק WhatsApp אחיד, רק לכפתורים שבאמת מקושרים ל-wa.me
   (מזוהים דרך data-cta-type="whatsapp" הקיים כבר ב-HTML לכל הכפתורים האלה
   בלבד - לא נוגע בכפתור הטלפון ב-Final CTA). ===== */
.btn[data-cta-type="whatsapp"] {
  background: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
}
.btn[data-cta-type="whatsapp"]:hover {
  background: #1EBE5D;
  border-color: #1EBE5D;
  color: #FFFFFF;
}

/* ===== Pull-quote #1 (Why Pause) — WOW-adjacent full-bleed field: תמונה מלאה
   100vw + overlay אחיד + ציטוט קצר אחד ממורכז. אין panel נפרד, אין פסקה, אין CTA. ===== */
.pull-quote-visual {
  position: relative;
  height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 760px) { .pull-quote-visual { height: 62vh; } }
.pull-quote-visual-media {
  position: absolute;
  inset: 0;
}
.pull-quote-visual-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.pull-quote-visual-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,55,78,.5), rgba(13,55,78,.68));
}
.pull-quote-visual-panel {
  position: relative;
  z-index: 2;
  padding-inline: clamp(24px, 6vw, 64px);
}
.pull-quote-visual blockquote.pull-quote {
  margin: 0 auto;
  max-width: 640px;
  color: var(--white-warm);
  font-size: var(--fs-quote);
  /* Polish ל-Bellefair (רגעי הנשימה): line-height/letter-spacing ייעודיים -
     קצת יותר פתוחים מ-H2 רגילה, כדי שהמשפט ירגיש כמו שורת Editorial גדולה
     בתוך תמונה ולא כמו כותרת סקשן. נבדק חזותית ב-390/768/1440/1920 - אין
     שינוי ב-max-width/color/overlay, רק קצב הקריאה של הטקסט עצמו. */
  line-height: 1.42;
  letter-spacing: 0.008em;
}
/* שני רגעי נשימה חדשים (אחרי הלו"ז, ולפני המחירים) - שימוש חוזר מלא
   ב-.pull-quote-visual הקיים, רק margin-block + object-position ייעודי
   לכל תמונה. */
.breathing-moment-1,
.breathing-moment-2 {
  margin-block: var(--space-scene);
}
.breathing-moment-1 .pull-quote-visual-media img { object-position: center 65%; }
.breathing-moment-2 .pull-quote-visual-media img { object-position: center 68%; }

/* ===== Media Frames — הגובה החזותי נקבע ע"י ה-frame, לא ע"י attributes של קובץ המקור ===== */
.media-frame {
  overflow: hidden;
  border-radius: 10px;
  display: block;
  background: var(--color-bg-alt);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame--full-bleed { border-radius: 0; }

/* ===== Layout primitives — Boutique Rebuild ===== */
.editorial-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  --split-a: 1.35fr;
  --split-b: 1fr;
}
@media (min-width: 860px) {
  .editorial-split { grid-template-columns: var(--split-a) var(--split-b); gap: clamp(48px, 5.5vw, 90px); }
  .editorial-split--reverse { grid-template-columns: var(--split-b) var(--split-a); }
  .editorial-split--reverse > *:first-child { order: 2; }
  .editorial-split--reverse > *:last-child { order: 1; }
}
.chapter-dark {
  background: var(--brand-primary);
  color: var(--white-warm);
}
.chapter-dark .section-title,
.chapter-dark .lede-text,
.chapter-dark h2,
.chapter-dark h3,
.chapter-dark p { color: var(--white-warm); }
.editorial-list {
  display: flex;
  flex-direction: column;
}
.editorial-list > * {
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(20px, 2.4vw, 28px);
}
.editorial-list > *:first-child { border-top: 1px solid var(--color-border); }
.profile-feature {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  --split-a: 0.92fr;
  --split-b: 1.08fr;
}
@media (min-width: 760px) {
  .profile-feature { grid-template-columns: var(--split-a) var(--split-b); gap: clamp(48px, 6vw, 90px); }
  .profile-feature--reverse { grid-template-columns: var(--split-b) var(--split-a); }
  .profile-feature--reverse > *:first-child { order: 2; }
  .profile-feature--reverse > *:last-child { order: 1; }
}
.price-columns {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .price-columns { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 32px); }
}
.quote-feature {
  position: relative;
  text-align: center;
  isolation: isolate;
}
.quote-feature::before {
  content: '\201C';
  position: absolute;
  top: -0.3em;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5rem, 5vw + 3rem, 9rem);
  line-height: 1;
  color: var(--brand-accent-soft);
  opacity: 0.18;
  font-weight: 700;
  z-index: -1;
  pointer-events: none;
}

/* ===== Hero — HERO IMAGE CANVAS: תמונה מלאה כבסיס, טקסט-על-תמונה עם overlay
   פונקציונלי לקריאות. מובייל: תוכן bottom-anchored. דסקטופ: תוכן ממוקם ~10-12vw
   מהקצה הימני, מוזח מעט מתחת למרכז - לא ממורכז כמו template. ===== */
.hero.hero--canvas {
  position: relative;
  min-height: clamp(680px, 92svh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero--canvas .hero-media { position: absolute; inset: 0; }
.hero--canvas .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Balance Correction Pass 16.8.2026: אמצע בין הבהיר מדי לכהה מדי */
  filter: brightness(0.9);
}
.hero--canvas .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Balance Correction Pass: הוחלש מ-.8/.55/.05 - "כהה מדי, איבד אטמוספרה" */
  background: linear-gradient(0deg, rgba(18,18,18,.64) 0%, rgba(18,18,18,.40) 45%, rgba(18,18,18,0) 78%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  padding: 0 clamp(20px, 6vw, 40px) clamp(48px, 8vh, 72px);
  color: var(--white-warm);
  /* בטחון קריאות נוסף בלי "לצבוע" את התמונה - text-shadow מקומי על הטקסט עצמו
     במקום overlay כבד יותר על כל האזור */
  text-shadow: 0 2px 12px rgba(18,18,18,.45), 0 1px 3px rgba(18,18,18,.38);
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white-warm);
  /* Visual Polish: 10px -> 14px - מפריד מעט את ה-eyebrow (Label) מה-H1,
     כדי שהכותרת תרגיש כמו רגע נפרד ומכוון, לא עוד שורה באשכול. */
  margin-bottom: 14px;
}
.hero-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-accent); flex-shrink: 0; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 11vw, 54px);
  /* Polish ל-Bellefair: line-height/letter-spacing המקוריים (0.98/1.02,
     -0.01em) כווצו בעבורFruk הגיאומטרי-מודגש; לגופן סריף עדין כמו
     Bellefair כיווץ שלילי מרגיש דחוס ולא מכוון. line-height מעט פתוח
     יותר ו-letter-spacing נייטרלי-פתוח נבדקו חזותית ב-390/768/1440/1920 -
     שורה אחת נשמרת בכל הרוחבים, ההרגשה נעשית רגועה ויוקרתית יותר בלי
     לשנות פריסה. */
  line-height: 1.06;
  font-weight: 600;
  color: var(--white-warm);
  letter-spacing: 0.006em;
  max-width: 11ch;
}
.hero-sub {
  font-size: 16px;
  color: var(--white-warm);
  opacity: 0.94;
  max-width: 44ch;
  margin: 10px 0 0;
}
.hero-trust-line {
  font-size: 14px;
  color: var(--white-warm);
  opacity: 0.82;
  margin: 10px 0 0;
}
/* Visual Polish: מרווח גדול יותר לפני ה-CTA - מפריד אותו בבירור מגוש
   המידע שמעליו (תאריך/מיקום/לינה), כך שהוא מרגיש כמו פעולה מכוונת ולא
   עוד שורה ברצף. */
.hero-actions { margin-top: var(--space-5); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hero-microcopy { font-size: 12px; color: var(--white-warm); opacity: 0.75; max-width: 42ch; margin: 0; }
/* עומס טקסט ב-Hero במובייל: כל שורות ה-meta/reassure מקבלות margin מבוקר, לא ברירת המחדל
   של p (1.1em) - כדי שהתוכן לא ידחוף את עצמו לתוך אזור הלוגו העליון-שמאלי.
   Visual Polish: hero-sub מקבל מרווח גדול יותר מעל (20px) כדי לפתוח פער
   ברור אחרי אשכול הכותרת (H1+tagline) ולסמן תחילת אשכול המידע המעשי;
   בתוך אשכול המידע עצמו (sub/meta-group/trust-line) המרווח מכווץ מעט
   (10px/8px/6px) כדי שהוא ירגיש כמו יחידה אחת קומפקטית, לא שורות נפרדות. */
.hero-content p, .hero-content span { margin: 0; }
.hero-content .hero-sub { margin-top: 20px; }
.hero-content .hero-trust-line { margin-top: 6px; }
.hero-content .hero-reassure { margin-top: 8px; }

/* Desktop Hero Canvas */
@media (min-width: 1024px) {
  .hero.hero--canvas {
    min-height: clamp(700px, 88vh, 900px);
    align-items: center;
    justify-content: flex-end;
  }
  .hero--canvas .hero-media img { object-position: center 38%; }
  .hero--canvas .hero-media::after {
    /* Micro-fix 16.8.2026: הוחזק משמעותית לבקשת המשתמש - קונטרסט חזק מאחורי הטקסט */
    background: radial-gradient(ellipse 820px 700px at 16% 58%, rgba(18,18,18,.64) 0%, rgba(18,18,18,.36) 50%, rgba(18,18,18,0) 80%);
  }
  .hero-content {
    max-width: 640px;
    padding: 0;
    margin-inline-end: 11vw;
    margin-top: 10vh;
    padding-bottom: 0;
  }
  .hero-eyebrow { font-size: 22px; }
  .hero h1 { font-size: clamp(64px, 6vw, 92px); line-height: 1.04; max-width: 10ch; }
  /* Visual Polish (דסקטופ): אותה לוגיקה כמו במובייל - פער גדול יותר לפני
     hero-sub (פתיחת אשכול המידע אחרי הכותרת), trust-line מתכווצת כלפי
     מעלה כדי לסגור את האשכול. הסלקטור כאן תואם בספציפיות ל-.hero-content
     .hero-sub/.hero-trust-line (0,2,0) שמוגדרים מעל - אחרת הכלל שם, למרות
     שהוא "לפני" ב-source order, מנצח כל כלל .hero-sub/.hero-trust-line
     יחיד (0,1,0) בגלל ספציפיות גבוהה יותר, גם בתוך media query מאוחרת
     יותר. */
  .hero-sub { font-size: 22px; max-width: 42ch; }
  .hero-content .hero-sub { margin-top: var(--space-6); }
  .hero-trust-line { font-size: 16px; }
  .hero-content .hero-trust-line { margin-top: 8px; }
  .hero-reassure { font-size: 15px; max-width: 42ch; margin-top: var(--space-3); }
  .hero-actions { margin-top: var(--space-6); gap: var(--space-2); }
  .hero-microcopy { font-size: var(--fs-xs); }
}

/* ===== פס אמון ===== */
.trust-bar {
  background: transparent;
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-5);
}
.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7);
  text-align: center;
}
@media (max-width: 480px) {
  .trust-bar .container { gap: var(--space-4); flex-direction: column; }
}
.trust-item {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  position: relative;
  padding-inline-start: var(--space-7);
}
.trust-item:first-child { padding-inline-start: 0; }
.trust-item:not(:first-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--space-7) / -2);
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: var(--color-border);
}
@media (max-width: 480px) {
  .trust-item { justify-content: center; padding-inline-start: 0; }
  .trust-item:not(:first-child)::before { content: none; }
}
.trust-item strong {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text);
}

/* ===== הזדהות ===== */
.identify { text-align: start; }
.identify .container { max-width: 760px; }
.identify h2 { font-size: clamp(34px, 3.5vw, 45px); font-weight: 650; }
.identify p { margin-inline: 0; max-width: 600px; font-size: var(--fs-lg); color: var(--color-text-soft); }
.identify-closing {
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  color: var(--color-text);
}
.identify-line {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--brand-accent);
  margin: 0 0 var(--space-4);
}

/* ===== ציטוט עורכי יחיד (המלצת אביב) — לא card, טיפוגרפיה בלבד ===== */
.editorial-quote-wrap { text-align: center; }
.editorial-quote-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--brand-accent);
  margin: 0 auto var(--space-5);
}
.editorial-quote {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--color-text);
  line-height: 1.6;
}
.editorial-quote::before { content: '\201C'; }
.editorial-quote::after { content: '\201D'; }
.editorial-quote-name {
  display: block;
  margin-top: var(--space-4);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.editorial-quote--compact {
  margin-top: var(--space-6);
  font-size: var(--fs-base);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
/* "ומה לוקחים איתנו חזרה לחיים?" (מיזוג של Tools for life + Benefits) —
   טיפוגרפיה בלבד: lede פסקאות, .learning-list הקיים (ללא cards), וציטוט
   סוגר. הפריסה הישנה של שני-טורים (.tools-layout/.tools-side/.tools-quote)
   הוסרה - לא בשימוש עוד, המבנה עכשיו לינארי. */
#after-retreat { padding-block: 64px; }
@media (min-width: 760px) { #after-retreat { padding-block: 88px; } }

/* ===== story-pair--about-fear — About + Fear כקומפוזיציה אחת, לא שני sections ===== */
.story-pair--about-fear { background: var(--paper); overflow-x: clip; }
.story-pair--about-fear #about { padding-bottom: var(--space-scene-tight); }
.story-pair--about-fear #silence { padding-top: var(--space-scene-tight); position: relative; }
/* About — .editorial-split בפועל, arch #1, אסימטריה עריכתית, image 56% */
.about-media { aspect-ratio: 4 / 3; border-radius: 14px; }
.about-media img { object-position: center 30%; }
@media (min-width: 860px) {
  /* About = WOW #2 half 1: image bleeds to the outer edge (not just to the
     container's padding, past it), copy is a narrow fixed column that starts
     well below the image's top edge - deliberately not an equal-height split. */
  .about-split { --split-a: 1.45fr; --split-b: 1fr; align-items: start; }
  .about-media {
    aspect-ratio: auto;
    height: clamp(620px, 46vw, 700px);
    border-radius: 14px;
    align-self: start;
    width: calc(100% + var(--content-padding-x) + 4vw);
    margin-inline-start: calc(-1 * (var(--content-padding-x) + 4vw));
  }
  .about-copy { max-width: 380px; margin-top: 160px; }
}
/* Fear of silence — reverse composition (copy 54% / image 46%), local cream field מאחורי הקופי בלבד - לא section מלא */
.fear-media { aspect-ratio: 4 / 3; border-radius: var(--radius-medium); }
.fear-media img { object-position: center 48%; }
.fear-copy { position: relative; z-index: 1; padding: 32px 24px; }
.fear-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  border-radius: var(--radius-medium);
  z-index: -1;
}
@media (min-width: 860px) {
  /* Entering Silence WOW #2: Fear no longer sits beside its image (as About does) -
     copy leads full-width, image bleeds below/anchored to the edge. Creates
     deliberate structural contrast with About's side-by-side split. */
  .fear-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .fear-media {
    aspect-ratio: 21 / 9;
    width: 88%;
    margin-inline-start: auto;
    margin-inline-end: 0;
    margin-top: var(--space-4);
  }
  .fear-copy { padding: 48px clamp(32px, 4vw, 56px); max-width: 680px; margin-inline: auto; }
  .fear-copy::before { inset: -24px calc(-1 * clamp(32px, 4vw, 56px)) -24px -40px; width: auto; }
}
.fear-emphasis { font-weight: 700; color: var(--brand-primary); }

/* ===== Silence meaning — FULL WIDTH MOMENT: copy 48-52% + image שנכנס מהצד ומתרחב מעבר ל-container ===== */
.silence-meaning-section { background: var(--sand); overflow-x: clip; }
.silence-meaning-media { aspect-ratio: 4 / 5; border-radius: var(--radius-medium); }
.silence-meaning-media img { object-position: center 25%; }
.silence-meaning-title { font-family: var(--font-display); font-weight: 600; text-align: start; margin-inline: 0; }
.silence-meaning-copy { max-width: 560px; }
@media (min-width: 860px) {
  .silence-meaning-split { --split-a: 1.15fr; --split-b: 1.05fr; align-items: stretch; }
  .silence-meaning-media { aspect-ratio: auto; height: 100%; min-height: 520px; }
}

/* "אז למה דווקא שתיקה?" הוסר כסקשן עצמאי (מוזג לתוך #daily-companions) -
   .why-silence-chapter-* הוסרו, לא בשימוש עוד ב-HTML. */

/* ===== אזור סרטון אווירה ===== */
#ambiance .container { max-width: 900px; }

/* ===== למי מתאים =====
   Visual Polish: אותו מבנה בדיוק (שני טורים, אותו תוכן, אותם bullets) -
   רק spacing/עובי קווים/היררכיה פנימית עדינים, כדי שהסקשן ירגיש אנושי
   ורך יותר במקום checklist טכני. שום Card חדש, שום אייקון חדש. */
.fit-columns {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  grid-template-columns: 1fr;
  max-width: 1010px;
  margin-inline: auto;
  /* מרווח עדין מעל, כדי שהאשכול לא יידבק ישר ל-H2 */
  margin-top: clamp(28px, 3vw, 40px);
}
@media (min-width: 760px) {
  .fit-columns { grid-template-columns: 1fr 1fr; gap: clamp(56px, 6vw, 84px); }
  .fit-columns .fit-column { border-top: 0; padding-top: 0; }
  .fit-columns .fit-column:last-child { border-inline-start: 1px solid var(--color-border); padding-inline-start: clamp(40px, 5vw, 60px); }
}
.fit-column {
  background: transparent;
  /* 2px -> 1px: אותו תפקיד (מפריד עדין בין שני האשכולות במובייל), פחות
     מרגיש כמו קו-מסגרת טכני */
  border-top: 1px solid var(--color-border);
  padding-top: clamp(22px, 2.6vw, 28px);
}
.fit-column:last-child { border-top-color: var(--color-accent); }
.fit-column h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.7rem);
  /* 650 (ברירת המחדל הגלובלית ל-h1-h4) -> 600: פחות "כותרת טופס", עדיין
     ברורה כהיררכיה. הפונט עצמו לא השתנה. */
  font-weight: 600;
  margin-bottom: var(--space-5);
}
.fit-column ul { list-style: none; padding-inline-start: 1.3em; margin-bottom: 0; }
.fit-column li {
  position: relative;
  /* var(--space-2)=8px -> var(--space-3)=12px: נשימה קצת יותר רחבה בין
     שורות הרשימה, פחות "טבלה דחוסה" */
  margin-bottom: var(--space-3);
  line-height: 1.55;
  color: var(--color-text-soft);
}
.fit-column li:last-child { margin-bottom: 0; }
.fit-column li::before {
  content: '';
  position: absolute;
  inset-inline-start: -1.3em;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
}
.fit-cta { text-align: center; margin-top: var(--space-7); }

/* ===== מקום — venue statement גדול (WOW #4) + מוזאיקת אוכל 65/38 ===== */
.place-section { background: var(--sand); padding-block: 64px; }
@media (min-width: 760px) { .place-section { padding-block: 96px; } }
.place-venue-statement {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  margin-bottom: var(--space-6);
}
.place-venue-statement img { object-position: center 55%; }
.place-copy { max-width: 640px; margin-inline-end: auto; margin-inline-start: 0; text-align: start; margin-top: 48px; }
.place-food-heading { margin-top: var(--space-7); text-align: start; }
@media (min-width: 860px) {
  .place-venue-statement {
    aspect-ratio: 21 / 9;
    width: calc(100% + 2 * clamp(20px, 4vw, 40px));
    max-width: none;
    margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
  }
  .place-copy { margin-top: 52px; }
}

/* ===== אוכל ===== */
.food-grid {
  display: grid;
  gap: clamp(16px, 2vw, 20px);
  grid-template-columns: 1fr;
  margin-top: 36px;
  max-width: 350px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .food-grid { grid-template-columns: 1.65fr 1fr; max-width: 920px; align-items: end; }
}
.food-image {
  width: 100%;
  max-width: 350px;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
}
@media (min-width: 640px) {
  .food-image { max-width: none; aspect-ratio: 16 / 9; }
}
.food-image--table img { object-position: center 58%; }
.food-image--dates img { object-position: center 46%; }
.food-image--table { border-radius: 10px; }
.food-image--organic { border-radius: 14px; }
@media (min-width: 640px) {
  .food-image--organic { transform: translateY(32px); }
}
/* כפתור משני עדין בסוף Place/Food - Anchor Scroll לאזור המחירים. משתמש
   ב-.btn.btn-secondary הקיים, כדי לא להתחרות בכפתורי ה-WhatsApp. תיקון
   16.8.2026: ל-.place-section יש background:var(--sand), וזה בדיוק אותו
   טוקן כמו --color-border שמניע את border-color של .btn-secondary - המסגרת
   הייתה נבלעת ברקע. מוגדר כאן border-color ממשי מפלטת המותג (--brand-muted),
   בלי לגעת ב-.btn-secondary הגלובלי (משפיע רק כאן דרך הסלקטור המקונן).
   ה-hover ממשיך להשתמש בכלל .btn-secondary:hover הקיים ללא שינוי. */
.place-pricing-link {
  text-align: center;
  margin-top: var(--space-6);
}
.place-pricing-link .btn-secondary {
  border-color: var(--brand-muted);
}
.place-pricing-link .btn-secondary:hover {
  border-color: var(--color-primary);
}

/* ===== מנחים — .profile-feature בפועל, זיגזג עורכי, לא cards ===== */
.guides-profiles {
  display: flex;
  flex-direction: column;
  gap: 80px;
  max-width: 1080px;
  margin-inline: auto;
}
/* קו-הפרדה עדין בין השורה הראשונה (ארז) לשנייה (אורי) - לא קישוט, רק הפרדה */
.uri-profile { border-top: 1px solid var(--color-border); padding-top: 40px; }
.profile-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-medium); }
/* שפת צורה אחידה לשני המנחים - rectangle רך, אותו aspect ratio, אותה מרחק crop */
.profile-photo--erez img { object-position: 50% 22%; }
.profile-photo--uri img { object-position: 50% 24%; }
@media (min-width: 760px) {
  .guides-profiles { gap: 110px; }
  .erez-profile { align-items: start; }
  .erez-profile { --split-a: 0.48fr; --split-b: 0.52fr; }
  .uri-profile { --split-a: 0.48fr; --split-b: 0.52fr; }
  .profile-photo { aspect-ratio: 4 / 5; }
  .profile-body { padding-top: 40px; }
}
.profile-body h3 { font-size: clamp(30px, 3vw + 18px, 34px); font-weight: 650; margin-bottom: var(--space-2); }
@media (min-width: 760px) {
  .profile-body h3 { font-size: clamp(38px, 2vw + 26px, 42px); }
}
.guide-role { color: var(--color-accent-text); font-weight: 600; font-size: clamp(15px, 1vw + 12px, 16px); margin-bottom: var(--space-3); display: block; }
.profile-body p { color: var(--color-text-soft); font-size: clamp(17px, 0.3vw + 16px, 18px); max-width: 500px; margin-bottom: 0.9em; }
.profile-body p:last-child { margin-bottom: 0; }
.guides-note {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  max-width: 1000px;
  margin: var(--space-6) auto 0;
}

/* ===== המלצות כתובות — Final Precision Pass: הוקטן קנה-מידה (היה גדול מדי
   ויזואלית) - כותרת, גודל ציטוט, מרווח ו-measure כולם צומצמו כדי שהסקשן ירגיש
   עורכי ומאוזן, לא "קיר טקסט" ===== */
.testimonial-phase-b .section-title { font-size: clamp(26px, 2.2vw, 32px); }
.testimonial-quotes {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 40px);
  max-width: 640px;
  margin-inline: auto;
}
.testimonial-card {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.testimonial-card p { color: var(--color-text-soft); margin-bottom: 0; line-height: 1.5; }
.testimonial-card p::before { content: '\201C'; }
.testimonial-card p::after { content: '\201D'; }
.testimonial-name { font-weight: 600; margin-top: var(--space-3); display: block; color: var(--color-accent-text); }
/* 3-tier editorial hierarchy — לא stack אחיד: Quote1 גדול, Quote2 offset, Quote3 בינוני */
.testimonial-card--primary { max-width: 600px; font-size: clamp(19px, 1.1vw + 14px, 22px); }
.testimonial-card--secondary { max-width: 540px; font-size: clamp(17px, 0.8vw + 13px, 19px); }
.testimonial-card--secondary:nth-child(2) { align-self: flex-end; text-align: end; max-width: 500px; }
.testimonial-card--secondary:nth-child(2) .testimonial-name { align-self: flex-end; }
@media (min-width: 760px) {
  .testimonial-card--primary { font-size: 23px; }
  .testimonial-card--secondary { font-size: 19px; }
}

/* ===== צילומי WhatsApp — הם עצמם "cards" טבעיים, ללא card נוסף ===== */
.whatsapp-grid {
  display: grid;
  gap: clamp(24px, 3vw, 30px);
  grid-template-columns: 1fr;
  max-width: 320px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .whatsapp-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; align-items: start; }
}
.whatsapp-shot {
  background: transparent;
  border-radius: var(--radius-medium);
  max-width: 320px;
  margin-inline: auto;
  box-shadow: 0 10px 30px rgba(30, 30, 20, 0.12);
}
.whatsapp-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  object-fit: contain;
}

/* כל וידאו אנכי מוצג כברירת מחדל כ-preview קצר (poster + play). הנגן המלא נפתח רק ב-dialog לאחר לחיצה */
.video-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--color-surface-dark);
  min-height: 44px;
}
.video-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Visual Correction Pass: כפתור Play שדרוג - עיגול מוצק בהיר עם משולש כהה
   בפנים (במקום משולש חשוף עם drop-shadow בלבד) - קונטרסט גבוה, קריא בבירור
   כווידאו על כל תמונה, גם בלי overlay מאחוריו. */
.video-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-preview-play::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(248, 243, 233, 0.94);
  box-shadow: 0 6px 20px rgba(9, 23, 32, 0.32);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.video-preview-play::after {
  content: '';
  /* Play Affordance Fix 16.8.2026: היה position:relative - זה הבאג שגרם למשולש
     "להיעלם" בכפתור featured: top/transform שהוספתי שם על אלמנט relative לא
     ממקמים כמו absolute (הם מזיזים יחסית למיקום הטבעי בזרימה, לא לפינת ההורה) -
     כאן absolute, כמו ::before, כדי ש-top/inset-inline-start יעבדו נכון בכל מקום
     שמגדיר אותם במפורש. במקומות שלא מגדירים (grid/אווירה) ה-flex centering של
     ההורה עדיין ממרכז אלמנט absolute בלי inset - אין רגרסיה. */
  position: absolute;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-inline-start: 18px solid var(--brand-primary);
  margin-inline-start: 4px;
}
.video-preview:hover .video-preview-play::before,
.video-preview:focus-visible .video-preview-play::before {
  transform: scale(1.08);
  background: var(--white-warm);
}
/* Play Button Rebuild 16.8.2026: אחריות יחידה וברורה - .video-preview-play
   עצמו הוא העיגול הממוקם (לא wrapper עם ::before נפרד), ::after הוא המשולש
   הממורכז בתוכו. הוסרו כל הכללים הישנים המתנגשים (top:72%/58%/48% על
   ::before, מיקום עצמאי של המשולש). left/border-left מפורשים (לא
   inset-inline-start/border-inline-start) כדי שהמשולש תמיד יצביע ימינה
   ולא יתהפך/יוזז מירושת RTL. */
.video-preview--featured .video-preview-play {
  inset: auto;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFDF8;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  display: block;
}
.video-preview--featured .video-preview-play::before {
  content: none;
}
.video-preview--featured .video-preview-play::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-inline-start: none;
  border-left: 15px solid #0D374E;
  margin-inline-start: 0;
}
.video-preview--featured:hover .video-preview-play,
.video-preview--featured:focus-visible .video-preview-play {
  transform: translate(-50%, -50%) scale(1.05);
}
@media (max-width: 767px) {
  .video-preview--featured .video-preview-play {
    width: 52px;
    height: 52px;
  }
  .video-preview--featured .video-preview-play::after {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 13px;
  }
}

/* וידאו המלצה ראשי (רונית) — Portrait Recomposition 16.8.2026: המקור הוא וידאו
   9:16 אמיתי - הקופסה 4:3 הקודמת (עם pillarbox) הוחלפה בקופסה שמכבדת את
   הפרופורציה האנכית האמיתית של המקור, כך שאין יותר רווח ריק מיותר מהצדדים.
   הפוסטר (720x1280) הוא בדיוק 9:16 כמו הקופסה - cover לא חותך דבר בפועל. */
.video-preview--featured {
  width: min(86vw, 330px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: var(--radius-medium);
}
@media (min-width: 900px) {
  /* הרוחב נקבע ע"י track הרשת ב-.early-proof-top (clamp 300-360px) - כאן רק
     ממלאים אותו (100%) ומבטלים את המרכוז האופקי שרלוונטי רק לפריסה מוערמת. */
  .video-preview--featured {
    width: 100%;
    margin-inline: 0;
  }
}

/* סרטון אווירה — Visual Correction Pass 16.8.2026: הוחלף מ-full-bleed כהה עם
   overlay כבד לחלון-וידאו ממוסגר ("pause" יפה באמצע הדף) - הכותרת יושבת מעל
   הכרטיס על רקע בהיר (לא על גבי התמונה), כך שאין צורך ב-overlay לקריאות
   בכלל. אין טקסט על התמונה = אין overlay, כנדרש. */
.ambiance-cinematic {
  text-align: center;
  position: relative;
  height: auto;
  padding-block: var(--space-scene);
  display: block;
  overflow: visible;
  background: var(--paper);
}
.ambiance-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(27px, 2.7vw, 36px);
  font-weight: 600;
  margin-bottom: var(--space-6);
  color: var(--color-text);
}
.video-preview--ambiance {
  position: relative;
  inset: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius-medium);
  box-shadow: 0 18px 44px rgba(9, 23, 32, 0.18);
  border: 0;
  overflow: hidden;
}
/* אין טקסט על גבי התמונה כאן - overlay מוסר לגמרי, התמונה נשארת חיה וטבעית */
.video-preview--ambiance::before { content: none; }
.video-preview--ambiance .video-preview-play { z-index: 2; }

/* גריד preview — 4 tiles קטנים, אין נגן inline */
.video-preview-hint {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}
.video-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 360px;
  margin-inline: auto;
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .video-preview-grid { max-width: 520px; }
}
@media (min-width: 760px) {
  .video-preview-grid { max-width: 1040px; }
}
/* Phase A מסתיים מיד אחרי ה-grid - אין 100px ריקנות כהה מיותרת */
#testimonials.tight { padding-bottom: var(--space-scene-tight); }
/* Phase A (olive-deep: Ronit + secondary videos) -> Phase B (warm paper: WhatsApp + written), no divider, margin-top:0 */
.testimonial-phase-b {
  background: var(--paper);
  color: var(--ink);
  margin-top: 0;
  padding-top: 56px;
}
.testimonial-phase-b .section-title { color: var(--ink); }
@media (min-width: 760px) {
  .testimonial-phase-b { padding-top: 76px; }
}

/* ===== Video Dialog — נגן משותף יחיד לכל סרטוני האתר ===== */
.video-dialog {
  border: 0;
  padding: 0;
  max-width: 94vw;
  max-height: 92dvh;
  background: transparent;
  overflow: visible;
}
.video-dialog::backdrop { background: rgba(20, 16, 10, 0.78); }
.video-dialog-inner { position: relative; }
#dialog-video {
  display: block;
  max-width: 94vw;
  max-height: 82dvh;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 14px;
  background: #000;
}
.video-dialog-close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.video-dialog-close:hover { background: var(--color-primary); }

/* ===== תמחור — Pricing Redesign 16.8.2026: כל אפשרות מקבלת משטח תחום עצמאי
   (bounded surface), לא רק קו מפריד - כדי שה-3 יהיו סרוקים בבירור כ-3 בחירות
   נפרדות, לא בלוק טקסט רציף אחד. גבול 1px עדין, רקע חם, בלי צל כבד/badge/גרדיאנט. */
.price-columns {
  max-width: 1100px;
  margin-inline: auto;
}
.price-option {
  background: var(--white-warm);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
@media (min-width: 760px) {
  .price-option { padding: 40px 32px; }
}
/* scroll-margin-top: כדי שכותרת המחירים לא תיצמד לגמרי לקצה העליון של
   ה-viewport אחרי Anchor Scroll מהכפתור החדש ב-Place/Food. */
#pricing { padding-top: 64px; scroll-margin-top: 20px; }
@media (min-width: 760px) { #pricing { padding-top: 88px; } }
.price-option h3 {
  order: 2;
  font-size: clamp(20px, 1.4vw + 15px, 22px);
  font-weight: 600;
  color: var(--color-text-soft);
  margin-bottom: 10px;
}
.price-amount {
  order: 1;
  font-family: var(--font-display);
  font-size: clamp(42px, 3.6vw, 50px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.price-per-person { order: 1; font-size: 15px; font-weight: 500; color: var(--color-muted); display: block; margin-top: 6px; }
/* .price-currency: ה-span עדיין עוטף את ה-₪ ב-HTML (מהניסוי הקודם), אך
   ללא Miriam Libre הבעיה שהצריכה אותו (גליף ₪ שנראה כמו "שח") לא קיימת
   יותר - ₪ חוזר לרשת ב-Heebo המקורי כמו כל שאר המחיר, בלי צורך בכלל
   CSS נפרד. */
/* Early-bird Price Display 16.8.2026: שתי תוספות טקסטואליות עדינות סביב
   .price-amount הקיים - לא נוגעות בגודל/משקל/צבע שלו. שתיהן order:1 כמו
   .price-amount, כך שמתפקדות כאשכול אחד לפי סדר ה-DOM (תווית -> מחיר נוכחי
   -> מחיר רגיל) לפני h3 (order:2), בלי לשנות את המבנה/order הקיימים. */
.price-early-label {
  order: 1;
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.price-regular {
  order: 1;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
}
.price-regular-amount {
  text-decoration: line-through;
  text-decoration-color: var(--color-muted);
  text-decoration-thickness: 1px;
}
.price-desc { order: 3; color: var(--color-text-soft); margin-bottom: 28px; flex-grow: 1; }
.price-option .btn { order: 4; width: 100%; }
.pricing-note {
  text-align: center;
  max-width: 60ch;
  margin: var(--space-6) auto 0;
  color: var(--color-text-soft);
}
.pricing-microcopy { text-align: center; font-size: var(--fs-sm); color: var(--color-muted); margin-top: var(--space-2); }

/* ===== בונוסים ("להמשך התרגול") — .editorial-list בפועל, לא cards ===== */
.editorial-list { max-width: 720px; margin-inline: auto; }
.editorial-list-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3) var(--space-4);
}
.bonus-num {
  grid-row: 1 / 3;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.editorial-list-row h3 { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.editorial-list-row p { margin-bottom: 0; color: var(--color-text-soft); }

/* ===== "מה ילווה אותנו לאורך שלושת הימים" — מיזוג שתיקה/יוגה/הליכה,
   שימוש חוזר ב-.editorial-list הקיים (קווים דקים, ללא cards) ===== */
#daily-companions .container { max-width: 700px; }
.companions-item h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.companions-item p { margin-bottom: 0; color: var(--color-text-soft); }

/* ===== FAQ ===== */
.faq-list { max-width: 870px; margin-inline: auto; }
@media (min-width: 1024px) {
  .faq-list {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    column-gap: 64px;
  }
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-question {
  width: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  padding: var(--space-4) 0;
  font-size: var(--fs-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  min-height: 60px;
}
.faq-question .icon {
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 1rem;
  transition: transform 0.15s ease;
}
.faq-question[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}
.faq-answer[data-open="true"] { max-height: 600px; }
.faq-answer-inner { padding-bottom: var(--space-4); color: var(--color-text-soft); }
.faq-answer-inner p:last-child { margin-bottom: 0; }

/* ===== CTA סופי — split אמיתי: תמונה + panel forest אטום, 0 טקסט על תמונה ===== */
.final-cta-section {
  display: flex;
  flex-direction: column;
}
.final-cta-media { width: 100%; height: clamp(340px, 40svh, 360px); overflow: hidden; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.final-cta-panel {
  background: var(--brand-primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 56px;
}
/* Visual Polish - תיקון שבירת שורות ב-CTA התחתון: ב-32% מרוחב ה-viewport,
   העמודה הצרה בין ~760-1023px נתנה לכותרת ~240-300px בלבד לעבוד איתם -
   שבירה ל-4-6 שורות. הפתרון: לדחות את המעבר לפריסת שורה (טור טקסט צר +
   תמונה) מ-760px ל-1024px, כך שברוחבים הבינוניים הבעייתיים הסקשן נשאר
   בפריסת העמודה המלאה (בדיוק כמו במובייל, שם הכותרת כבר נבדקה ותקינה) -
   ורק כשיש בפועל מספיק רוחב לטור (מ-1024px, 32%≈328px+) המעבר קורה.
   אין שינוי לטקסט, לפונט או לכפתורים - רק לנקודת המעבר של הפריסה. */
@media (min-width: 1024px) {
  .final-cta-section { flex-direction: row; min-height: 700px; }
  /* 68/32 -> 62/38: מעט יותר רוחב לטור הטקסט, כדי שגם כפתור הטלפון (שלא
     שונה בעצמו) לא יישבר למספר עם מקף בודד בשורה נפרדת ב-1024px. */
  .final-cta-media { width: 62%; height: auto; order: 2; }
  .final-cta-panel { width: 38%; order: 1; padding: 70px clamp(32px, 4vw, 88px); display: flex; align-items: center; justify-content: center; }
}
.final-cta {
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .final-cta { text-align: start; margin-inline: 0; }
  .final-cta .final-cta-actions { align-items: flex-start; }
}
.final-cta h2 { font-family: var(--font-display); color: var(--white-warm); font-size: clamp(42px, 3vw + 30px, 48px); font-weight: 600; text-wrap: balance; }
.final-cta p { color: #F2EEE5; opacity: 1; margin-inline: auto; font-size: 18px; max-width: 420px; }
@media (min-width: 1024px) { .final-cta p { margin-inline: 0; } }
.final-cta .btn-secondary { color: var(--white-warm); border-color: rgba(255,255,255,0.4); }
.final-cta .btn-secondary:hover { border-color: var(--white-warm); }
.final-cta-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.final-cta-actions .btn { min-height: 52px; }
@media (max-width: 480px) {
  .final-cta-actions .btn { width: 100%; }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-bg-alt);
  padding-block: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* ===== סרגל CTA דביק (מובייל) ===== */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(252, 248, 240, 0.96);
  border-top: 1px solid rgba(41, 40, 33, 0.10);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn {
  height: 46px;
  min-height: 46px;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 10px;
  font-weight: 600;
  width: 100%;
}
@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

/* ===== עמודים פשוטים (פרטיות/תנאים) ===== */
.simple-page main {
  padding-block: var(--section-space-md);
}
.simple-page .container { max-width: 780px; }
.simple-page h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.simple-page h2 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.simple-page p, .simple-page li { color: var(--color-text-soft); }

/* ===== Background rhythm ===== */
.bg-warm { background: var(--color-bg-alt); }
.bg-olive {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}
.bg-olive .section-title,
.bg-olive .lede-text,
.bg-olive .video-preview-hint,
.bg-olive .section-eyebrow { color: var(--color-text-on-dark); }
.bg-olive .video-preview-hint { opacity: 0.75; }
.bg-olive .section-eyebrow { opacity: 0.8; }

/* ===== Editorial lede + pull quotes ===== */
.lede-text {
  max-width: 700px;
  margin-inline: auto;
  font-size: var(--fs-lg);
  color: var(--color-text-soft);
}
.bg-olive .lede-text { color: var(--color-text-on-dark); opacity: 0.9; }
.why-pause .lede-text { margin-bottom: var(--space-6); }
/* "יותר חופש לבחור..." הוסר כסקשן עצמאי (מוזג לתוך #after-retreat) - כללי
   ה-CSS הייעודיים שלו (.freedom-layout--quiet/.freedom-title/.freedom-emphasis/
   #freedom) הוסרו כי הם לא בשימוש עוד בשום מקום ב-HTML. */
.chapter--silence + .chapter--experience { margin-top: 0; }
.section-eyebrow {
  display: block;
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}
.silence-closing {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-5);
}
blockquote.pull-quote {
  font-family: var(--font-display);
  margin: var(--space-7) auto;
  max-width: 780px;
  text-align: center;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  border: 0;
  padding: 0;
}
.bg-olive blockquote.pull-quote,
#why-silence blockquote.pull-quote { color: var(--color-text); }

/* ===== באנר תמונה מעל הלו"ז — full-bleed, 0 radius ===== */
.schedule-banner {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 230px;
  overflow: hidden;
  margin-bottom: var(--section-space-md);
  border-radius: 0;
}
.schedule-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
@media (min-width: 760px) {
  .schedule-banner { max-height: 400px; }
}

/* "למה יוגה" + "למה גם הליכה" הוסרו כסקשן עצמאי (מוזג לתוך #daily-companions) -
   .yoga-split/.walking-split/.movement-story הוסרו, לא בשימוש עוד ב-HTML. */

/* ===== הלו"ז המלא ===== */
.schedule-grid {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr;
  max-width: 940px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .schedule-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.schedule-day {
  position: relative;
  border-top: 1px solid rgba(93, 105, 84, 0.25);
  border-bottom: 1px solid rgba(93, 105, 84, 0.25);
  padding-block: var(--space-3);
}
.schedule-day::before {
  position: absolute;
  top: 4px;
  inset-inline-end: 0;
  font-size: clamp(52px, 4vw + 40px, 60px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-accent);
  opacity: 0.25;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.schedule-day:nth-child(1)::before { content: '01'; }
.schedule-day:nth-child(2)::before { content: '02'; }
.schedule-day:nth-child(3)::before { content: '03'; }
@media (min-width: 860px) {
  .schedule-day { border-bottom: 0; }
}
.schedule-day summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-weight: 700;
  min-height: 82px;
  padding-block: var(--space-3);
}
.schedule-day summary::-webkit-details-marker { display: none; }
.schedule-day-name { font-size: clamp(20px, 1vw + 17px, 22px); }
.schedule-day-date { color: var(--color-accent-text); font-weight: 700; font-size: clamp(16px, 0.5vw + 15px, 17px); }
/* Toggle - חייב להיראות clickable בבירור: button-like, לא link קטן */
.schedule-day-toggle {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1.5px solid var(--brand-primary);
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-primary);
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.schedule-day[open] .schedule-day-toggle { background: var(--brand-primary); color: var(--white-warm); }
.schedule-day-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}
.schedule-day-icon::before,
.schedule-day-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.schedule-day-icon::before { width: 14px; height: 2px; }
.schedule-day-icon::after { width: 2px; height: 14px; transition: transform 0.15s ease; }
.schedule-day[open] .schedule-day-icon::after { transform: translate(-50%, -50%) scaleY(0); }
@media (max-width: 480px) {
  .schedule-day summary { flex-wrap: wrap; }
  .schedule-day-toggle { width: 100%; margin-inline-start: 0; margin-top: var(--space-2); }
}
.schedule-rows { margin-top: var(--space-3); display: flex; flex-direction: column; }
.schedule-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-3);
  padding-block: 7px;
  border-bottom: 1px solid rgba(227, 219, 201, 0.6);
  font-size: var(--fs-sm);
}
.schedule-time { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.schedule-activity { color: var(--color-text-soft); }
.schedule-row--highlight {
  border-bottom-color: var(--color-accent);
  background: rgba(206, 163, 43, 0.08);
  border-radius: 10px;
}
.schedule-row--highlight .schedule-activity { font-weight: 700; color: var(--color-text); }

/* ===== זה לא רק לשבת בשקט — learning list ===== */
.learning-list {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  grid-template-columns: 1fr;
  max-width: 980px;
  margin: var(--space-6) auto;
}
@media (min-width: 640px) {
  .learning-list { grid-template-columns: 1fr 1fr; }
}
.learning-item {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.learning-num {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1);
}
.learning-item h3 { font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.learning-item p { color: var(--color-text-soft); margin-bottom: 0; }

/* ===== מעבר חזותי בתמונה לפני FAQ — full-bleed, 0 radius ===== */
.faq-transition-image {
  width: 100%;
  aspect-ratio: 21 / 6;
  max-height: 340px;
  border-radius: 0;
}
@media (max-width: 480px) {
  .faq-transition-image { aspect-ratio: 16 / 9; max-height: 200px; }
}

/* ===== מעבר חזותי (whitespace reset) ===== */
.section-divider {
  max-width: 140px;
  margin-inline: auto;
  margin-block: var(--section-space-sm);
  border-top: 1px solid var(--color-border);
}

/* ===== נגישות: alt-only decorative ===== */
.decorative { pointer-events: none; }

/* ===========================================================
   Sangam Premium Recomposition — 16.8.2026
   לוגו, botanical motif, micro-benefits, Identify מחדש, Early Proof,
   Differentiation, Schedule journey. שפה אחת עם שאר הדף - אין רכיב חדש
   שלא נשען על tokens/patterns קיימים.
   =========================================================== */

/* ===== לוגו סאנגם — פינה עליונה, עם chip עדין לקונטרסט (Visual Correction Pass:
   הלוגו נבלע ברקע הכהה הקודם - עכשיו על שבב שמנתי-שקוף עם blur עדין, כדי
   שיישאר קריא וברור על כל תמונה, בלי glow/shadow צעקני) ===== */
.hero-logo {
  position: absolute;
  top: clamp(14px, 2.6vw, 24px);
  inset-inline-start: clamp(14px, 3.6vw, 32px);
  z-index: 3;
  /* Final Precision Pass: הוגדל - יעד רוחב תמונת הלוגו בפועל 130-160px (מובייל) /
     180-220px (דסקטופ). chip = תמונה + ריפוד (32px אופקי) */
  width: clamp(176px, 6vw + 155px, 232px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(248, 243, 233, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.16);
}
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Botanical mark — מוטיב גזע+שני עלים דק, אותה שפה חזותית כמו .scene-separator ===== */
.botanical-mark {
  display: flex;
  justify-content: center;
  color: var(--brand-accent);
  opacity: 0.7;
}
.botanical-mark svg { display: block; }
.botanical-mark--start { justify-content: flex-start; }

/* ===== Micro-benefits band — מחליף את ה-trust-bar הישן, ללא cards/pills ===== */
.micro-benefits {
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-5);
}
.micro-benefits .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7);
}
.micro-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-soft);
}
.micro-benefit-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}
@media (max-width: 620px) {
  .micro-benefits .container { flex-direction: column; align-items: center; gap: var(--space-3); }
}

/* ===== שורת אמון עדינה — גשר בין ה-Hero למיקרו-benefits, ללא border/רקע
   כדי לא ליצור קו כפול צמוד לגבול העליון של .micro-benefits. טיפוגרפיה
   בלבד (ללא אייקון) - אותו fs-sm/color-text-soft כמו .micro-benefit,
   ממורכז, כדי להישאר עדין ולא להתחרות ב-Hero. ===== */
.founder-trust-note {
  padding-block: var(--space-4);
  text-align: center;
}
.founder-trust-note p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-soft);
}

/* ===== Identify מחדש — "כשהחיים מבקשים מאיתנו לעצור לרגע" ===== */
.identify-recompose { text-align: start; }
.identify-recompose .container { max-width: 700px; }
.identify-recompose h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.5vw, 46px);
  font-weight: 700;
  margin-bottom: var(--heading-gap);
}
.identify-cluster { margin-bottom: var(--space-6); }
.identify-cluster p { font-size: var(--fs-lg); color: var(--color-text-soft); }
.identify-emphasis {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  color: var(--color-text);
  margin: var(--space-6) 0;
}
.identify-statement {
  font-size: var(--fs-quote);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
  max-width: 20ch;
  margin: var(--space-7) 0 0;
}
/* Why Pause התמזג לתוך Identify: תמונה full-bleed + הציטוט הקצר כמומנט חזותי סוגר */
.identify-visual-close {
  position: relative;
  margin-top: var(--space-7);
  width: 100%;
  height: 52vh;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.identify-visual-close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* Micro-fix 16.8.2026: overlay הוסר לגמרי לבקשת המשתמש. אין טקסט על גבי
   התמונה הזאת בפועל (הציטוט "בעיניים טובות..." הוא פסקה נפרדת שיושבת מעל,
   לא overlaid) - אז אין בכלל צורך בשכבת קריאות. התמונה נשארת טבעית לגמרי. */
@media (min-width: 760px) { .identify-visual-close { height: 60vh; } }

/* ===== Early Proof — "איך זה מרגיש להיות שם" — Visual Correction Pass:
   הרקע הכהה-כחול המלא הוחלף בשטח שמנתי-בהיר (brand-soft). המותג מתבטא
   ב-accents (cite בנייבי, קו gold לציטוט) ולא בצביעת כל הסקשן. ===== */
.early-proof-section { background: var(--brand-soft); }
.early-proof-section .section-title { color: var(--color-text); }
/* Scale-down Polish 16.8.2026: הכותרת מקטע זה מוקטנת ב-~18% ביחס לשאר כותרות
   הפרקים (var(--fs-h2-chapter)) - override מקומי בלבד, לא נוגע במשתנה
   הגלובלי כדי לא להשפיע על כותרות פרקים אחרים. */
.early-proof-section .section-title.chapter-h2 {
  font-size: clamp(38px, 4vw, 52px);
}
/* Portrait Recomposition 16.8.2026: הווידאו הראשי + שני הציטוטים הקיימים
   מרכיבים קומפוזיציה עריכתית אחת - וידאו פורטרט מימין (RTL, מקור ה-DOM) מול
   הציטוטים משמאל. proof-media (תמונת האווירה + צילומי המסך) יורד לבלוק נפרד
   מתחת, ולא עוד שותף לאותה שורת grid. */
.early-proof-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 900px) {
  .early-proof-top {
    display: grid;
    /* Scale-down Polish 16.8.2026: היה clamp(300,...,360) - צומצם ל-max 325px,
       עם יעד ~305 ב-1024 ו-~322 ב-1440, כדי שהקומפוזיציה תרגיש קומפקטית יותר. */
    grid-template-columns: clamp(300px, 4.1vw + 263px, 325px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(56px, 5vw, 72px);
  }
}
/* Scale-down Polish 16.8.2026: הרווח בין שני הציטוטים צומצם מ-32px (--space-6)
   ל-26px (~18%-), כדי לקרב אותם ליחידה עריכתית קומפקטית יותר עם הווידאו. */
.proof-quotes { display: flex; flex-direction: column; gap: 26px; }
.proof-quote {
  margin: 0;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--brand-accent);
  font-size: clamp(19px, 1.2vw + 14px, 23px);
  line-height: 1.55;
  color: var(--color-text);
}
.proof-quote::before { content: '\201C'; }
.proof-quote::after { content: '\201D'; }
.proof-quote cite {
  display: block;
  font-style: normal;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-primary);
}
.proof-media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: clamp(32px, 4vw, 48px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.proof-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-medium); }
.proof-photo img { object-position: center 30%; }
.proof-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.proof-shots img { width: 100%; height: auto; border-radius: var(--radius-small); box-shadow: 0 8px 24px rgba(9,23,32,0.14); }

/* ===== "מה מייחד את ריטריט השתיקה איתנו?" — פרק שקט, טיפוגרפיה בלבד ===== */
.difference-section .container { max-width: 700px; }
.difference-section .section-eyebrow { text-align: start; }
.difference-section h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 650;
  margin-bottom: var(--heading-gap);
}
.difference-section p { font-size: var(--fs-lg); color: var(--color-text-soft); }
.difference-transition {
  margin: var(--space-7) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.transition-pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.transition-pull--in { color: var(--brand-primary); margin-top: var(--space-5); }
.transition-tags {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--brand-accent-text, var(--color-accent-text));
  margin-bottom: 0;
}

/* ===== Schedule journey — תג מסע לכל יום + קו מחבר עדין ===== */
.schedule-day-tagline {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 2px;
}
.schedule-journey-line {
  display: none;
}
@media (min-width: 860px) {
  .schedule-journey-line {
    display: block;
    height: 1px;
    background: var(--color-border);
    margin: 0 auto clamp(24px, 3vw, 36px);
    max-width: 780px;
    position: relative;
  }
  .schedule-journey-line span {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-warm-white);
    padding-inline: 12px;
    color: var(--brand-accent);
  }
}

/* ===== Hero recomposition — קבוצת meta מקובצת (לא 9 שורות מכניות), tagline, reassurance ===== */
.hero-tagline {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-accent-soft);
  margin-top: 6px;
}
.hero-meta-group { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.hero-meta { font-size: 15px; font-weight: 600; color: var(--white-warm); opacity: 0.95; }
.hero-meta--mood { font-weight: 400; opacity: 0.82; }
.hero-reassure {
  font-size: 14px;
  color: var(--white-warm);
  opacity: 0.78;
  max-width: 40ch;
  margin-top: var(--space-3);
}
@media (min-width: 1024px) {
  .hero-tagline { font-size: 18px; }
  .hero-meta { font-size: 17px; }
  .hero-meta--mood { font-size: 16px; }
  .hero-reassure { font-size: 15px; max-width: 42ch; }
}