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

@font-face{ font-family:'Heebo'; src:url('../fonts/Heebo/Heebo-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Heebo'; src:url('../fonts/Heebo/Heebo-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Heebo'; src:url('../fonts/Heebo/Heebo-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Heebo'; src:url('../fonts/Heebo/Heebo-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face{ font-family:'Heebo'; src:url('../fonts/Heebo/Heebo-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face{ font-family:'Assistant'; src:url('../fonts/Assistant/Assistant-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Assistant'; src:url('../fonts/Assistant/Assistant-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Assistant'; src:url('../fonts/Assistant/Assistant-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

/* פונט חלופי לכותרות, בניסוי — Heebo הרגיש "גס מדי". IBM Plex Sans Hebrew
   עדין ומקצועי יותר, עם טווח משקלים מלא. Verdana (פונט מערכת, בלי קובץ,
   ראי --display-alt-verdana למטה) אפשרות נוספת להשוואה. */
@font-face{ font-family:'IBM Plex Sans Hebrew'; src:url('../fonts/IBMPlexSansHebrew/IBMPlexSansHebrew-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'IBM Plex Sans Hebrew'; src:url('../fonts/IBMPlexSansHebrew/IBMPlexSansHebrew-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face{ font-family:'IBM Plex Sans Hebrew'; src:url('../fonts/IBMPlexSansHebrew/IBMPlexSansHebrew-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face{ font-family:'IBM Plex Sans Hebrew'; src:url('../fonts/IBMPlexSansHebrew/IBMPlexSansHebrew-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
/* משקל יחיד בלבד זמין (Regular). כל בקשת weight אחרת (500/600/700/800/900
   בכותרות/eyebrow) תיפול על המשקל הזה, כנראה עם הדגשה מזויפת (faux-bold)
   של הדפדפן במקומות שמבקשים 700 ומעלה. */
@font-face{ font-family:'Varela Round'; src:url('../fonts/VarelaRound/VarelaRound-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

:root{
  /* --- פלטת המותג הרשמית --- */
  --blue:#5B9AE6;
  --gold:#B8A46A;
  --teal:#4F8F97;
  --mint:#3E8E6E;
  --sage:#6D8F88;
  --ink:#111111;
  --cream:#F7F5F0;
  /* ורוד: נדגם ישירות מגוון השפתון של סוניה בבאנרים (עקבי בכל התמונות) —
     לא צבע מומצא, זה כבר חלק מהזהות הוויזואלית שלה בתמונות עצמן. */
  --rose:#C6395A;

  /* --- שימושים --- */
  --bg:var(--cream);
  --bg-soft:#F3E7E2;
  --text:var(--ink);
  --text-soft:#4A4A46;
  --line:rgba(198,57,90,0.16);
  --accent:var(--gold);
  /* --gold המקורי (#B8A46A) נכשל בניגודיות WCAG AA כטקסט על קרם/bg-soft
     (כ-2.1-2.25:1, נדרש 4.5:1) — נשאר רק לקישוט טהור (turn-mark, מסגרות).
     --gold-text הוא גרסה כהה יותר, לשימוש בכל מקום שהזהב הוא טקסט/אייקון
     משמעותי: עובר 5:1+ על קרם ו-bg-soft. */
  --gold-text:#7A6530;

  /* ניסוי גופנים לכותרות: Heebo -> IBM Plex Sans Hebrew -> Verdana ->
     עכשיו Varela Round (סוניה תיקנה: זה הפונט שהיא באמת שמה בתיקייה).
     גיבויים נשארים בשרשרת אם Varela Round לא נטען מסיבה כלשהי. */
  --display:'Varela Round', 'IBM Plex Sans Hebrew', 'Heebo', sans-serif;
  --body:'Assistant', sans-serif;

  --container:1180px;
  --radius:2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

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

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

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

/* בלי קו/מקף לפני ה-eyebrow — נדרש: בלי מקפים גדולים באתר בכלל */
.eyebrow{
  display:inline-flex;
  align-items:center;
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--gold-text);
  text-transform:none;
}

.h-display{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.01em;
  line-height:1.08;
  color:var(--ink);
}
.h-section{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.15;
  color:var(--ink);
}
.lede{
  font-size:clamp(17px,1.6vw,19px);
  line-height:1.75;
  font-weight:600;
  color:#3B3B36;
  max-width:46ch;
}

/* ---------- כפתורים ---------- */

/* כפתורים: עדינים, רקע בהיר (כמו בבאנר), עם מילוי נוזלי בירוק (מרווה)
   בהעברת עכבר. אחיד לכל הכפתורים באתר, ללא הבדל בין primary/ghost.
   המשפט הראשי (.btn-label) תמיד גלוי; אם יש .btn-reveal, הוא נחשף
   בהדרגה (גובה+שקיפות) בהעברת עכבר/פוקוס. אם אין btn-reveal, הכפתור
   פשוט חד-שורתי כרגיל. */
.btn{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-family:var(--body);
  font-weight:600;
  font-size:15.5px;
  padding:14px 26px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--cream);
  color:var(--ink);
  border:1.5px solid var(--line);
  transition:color .35s ease, border-color .35s ease, transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s ease;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--sage);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .4s cubic-bezier(.22,.9,.32,1);
}
.btn:hover,
.btn:focus-visible{
  color:var(--cream);
  border-color:var(--sage);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(109,143,136,0.28);
}
.btn:hover::before,
.btn:focus-visible::before{
  transform:scaleY(1);
}
.btn-reveal{
  display:block;
  font-size:12px;
  font-weight:500;
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  margin-top:0;
  transition:max-height .35s ease, opacity .3s ease, transform .3s ease, margin-top .35s ease;
}
.btn:hover .btn-reveal,
.btn:focus-visible .btn-reveal{
  max-height:22px;
  opacity:.9;
  transform:translateY(0);
  margin-top:4px;
}

/* ---------- סימן החתימה: קו שמשנה כיוון ---------- */

.turn-mark{ display:block; overflow:visible; }
.turn-mark path{
  fill:none;
  stroke:var(--gold);
  stroke-width:2.5;
  stroke-linecap:round;
}
.turn-mark.animated path{
  stroke-dasharray:260;
  stroke-dashoffset:260;
  animation:draw-turn 1.4s cubic-bezier(.22,.9,.32,1) .3s forwards;
}
@keyframes draw-turn{ to{ stroke-dashoffset:0; } }

.divider{
  display:flex;
  justify-content:center;
  padding:6px 0;
}

/* ---------- כותרת עליונה ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(247,245,240,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:16px;
}
.brand{
  position:relative;
  font-family:var(--display);
  font-weight:800;
  font-size:19px;
  letter-spacing:-0.01em;
  text-decoration:none;
  color:var(--ink);
}
.brand[aria-current="page"]::after{
  content:'';
  position:absolute;
  right:0;
  left:0;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:var(--rose);
}
.main-nav{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.main-nav a{
  position:relative;
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  color:var(--text-soft);
  transition:color .2s ease;
}
.main-nav a:hover{ color:var(--ink); }
/* מסמן את העמוד הנוכחי בתפריט — אחרת אי אפשר לדעת באיזה עמוד נמצאים */
.main-nav a[aria-current="page"]{
  color:var(--ink);
  font-weight:800;
}
.main-nav a[aria-current="page"]::after{
  content:'';
  position:absolute;
  right:0;
  left:0;
  bottom:-8px;
  height:2px;
  border-radius:2px;
  background:var(--rose);
}
.header-cta{ width:fit-content; }

/* ---------- תפריט מובייל (המבורגר) ---------- */
/* מתחת ל-900px אין מקום לתפריט מלא בשורה אחת, אז יש כפתור המבורגר
   שפותח פאנל נפתח (dropdown) עם הניווט + כפתור הוואטסאפ יחד. מ-900px
   ומעלה חוזרים לשורת ניווט רגילה, והפאנל/כפתור נעלמים. ר' js/nav.js. */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--ink);
  flex-shrink:0;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.nav-panel{
  display:none;
  position:absolute;
  top:100%;
  inset-inline:0;
  flex-direction:column;
  gap:22px;
  background:var(--cream);
  border-top:1px solid var(--line);
  box-shadow:0 18px 32px rgba(17,17,17,0.1);
  padding:24px 20px 28px;
  z-index:39;
}
.nav-panel.is-open{ display:flex; }

@media (min-width:900px){
  .menu-toggle{ display:none; }
  .nav-panel{
    display:flex !important;
    position:static;
    flex-direction:row;
    align-items:center;
    flex:1;
    justify-content:space-between;
    background:none;
    border:none;
    box-shadow:none;
    padding:0;
    gap:0;
  }
  .main-nav{ flex-direction:row; align-items:center; gap:30px; }
  .main-nav a{ font-size:14.5px; }
}

/* ---------- הירו ---------- */
/* תמונת באנר מוכנה (רוחב מלא, כולל רקע משלה, לא cutout) שסוניה מעצבת
   ומספקת בעצמה. במובייל: תמונה למעלה, טקסט בזרימה רגילה מתחתיה (בטוח,
   בלי חפיפה). בדסקטופ: הטקסט יושב על השטח הפנוי שבתמונה עצמה (צד שמאל). */

.hero{ position:relative; }
.hero-media{ position:relative; width:100%; }
.hero-media img,
.hero-media video{ width:100%; height:auto; display:block; }

.hero .container{ padding-block:28px 56px; }

/* רמז גלילה: חץ עדין בתחתית ההירו, מרמז שיש עוד תוכן מתחת */
.scroll-hint{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  color:var(--ink);
  opacity:.5;
  transition:opacity .2s ease;
  animation:scroll-bounce 2.2s ease-in-out infinite;
}
.scroll-hint:hover{ opacity:1; }
@keyframes scroll-bounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(6px); }
}
.hero-copy{ max-width:560px; }
/* כותרת ההירו: בולטת אבל עדינה, לא "גסה" — משקל בינוני, לא Black,
   וגודל מתון יותר מ-h-display הרגיל (שנשאר כבד לכותרות אחרות באתר). */
.hero-title{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.25;
  color:var(--ink);
  font-size:clamp(24px,4.4vw,36px);
  margin-block:0 18px;
}
.hero-title em{
  font-style:normal;
  color:var(--mint);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:26px;
}

@media (min-width:860px){
  .hero .container{
    position:absolute;
    inset:0;
    padding-block:0;
    display:flex;
    align-items:center;
    /* דף כולו dir="rtl": flex-start = ימין, flex-end = שמאל.
       בסרטון הנוכחי סוניה עומדת בצד שמאל של הפריים, השטח הפנוי בצד ימין —
       לכן flex-start כדי שהטקסט ישב בימין ולא יחפוף לדמות. */
    justify-content:flex-start;
  }
  /* חלק מהבאנרים מציבים את סוניה בצד ימין במקום שמאל (השטח הפנוי הפוך) —
     .hero-align-left הופך את היישור בהתאם, בלי לגעת בברירת המחדל. */
  .hero-align-left .container{ justify-content:flex-end; }
  .hero-copy{ max-width:32%; }
  .hero-title{ font-size:clamp(21px,2.1vw,28px); }
  /* קיצור מתון של גובה הבאנר, כדי שקצת מהסקשן הבא יציץ ויעודד גלילה.
     object-position:top כדי שהחיתוך יילקח מלמטה (רגליים/מדרגות), לא
     מלמעלה (הראש) — cover חותך מהצד שממנו "יש עודף" ביחס למסגרת. */
  .hero-media img,
  .hero-media video{ height:min(68vh,600px); object-fit:cover; object-position:center top; }
}

/* ---------- פס הציטוט (מעבר, מרווה) ---------- */

.quote-strip{
  padding-block:30px;
  background:var(--sage);
}
.quote-strip-text{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(16px,2.2vw,21px);
  color:var(--cream);
  text-align:center;
}
.quote-strip-by{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  /* לא --gold: על רקע מרווה, שום גוון זהב לא עומד בתקן — אפילו קרם כאן
     הוא כ-3.25:1, קרוב יותר ל-AA אבל לא מושלם (טקסט קטן זה). */
  color:var(--cream);
  opacity:.85;
}

/* ---------- שערים: איפה זה פוגש אותך ---------- */

.gates{ padding-block:56px 36px; }
.gates-head{ margin-bottom:18px; }
.gates-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .gates-grid{ grid-template-columns:repeat(3,1fr); }
}
.gate-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 22px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.gate-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(198,57,90,0.14);
  background:var(--cream);
}
.gate-mark{ color:var(--teal); margin-bottom:10px; }
.gate-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:18.5px;
  line-height:1.3;
  margin:0;
}
/* המלל הנוסף מתגלה רק ב-hover/focus, כמו .btn-reveal — הכותרת (h3)
   נשארת קבועה תמיד. */
.gate-card p{
  font-size:14px;
  line-height:1.55;
  color:var(--text-soft);
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0;
  transform:translateY(-4px);
  transition:max-height .35s ease, opacity .3s ease, transform .3s ease, margin-top .35s ease;
}
.gate-card:hover p,
.gate-card:focus-visible p{
  max-height:90px;
  opacity:1;
  transform:translateY(0);
  margin-top:8px;
}
.gate-arrow{
  font-size:18px;
  color:var(--gold-text);
  margin-top:10px;
}

/* ---------- אזור אישי ---------- */

.personal{ padding-block:70px; background:var(--bg-soft); border-block:1px solid var(--line); }
/* מתאר כרגע ספר ראשי אחד, אבל תומך בכמה — כל ספר הוא .personal-book,
   מוצג באותו עיצוב "מובלט", עם רווח בין ספרים אם יש יותר מאחד. */
.personal .container{
  display:flex;
  flex-direction:column;
  gap:56px;
}
.personal-book{
  display:grid;
  gap:36px;
}
.personal-figure img{
  width:100%;
  max-width:340px;
  margin-inline:auto;
  border-radius:4px;
}
.intro-quote{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(21px,2.6vw,27px);
  line-height:1.5;
  color:var(--ink);
}
.book-published{
  display:inline-block;
  margin-top:4px;
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  color:var(--text-soft);
}
.personal-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.intro-link{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  border-bottom:1.5px solid var(--gold);
  padding-bottom:2px;
}

@media (min-width:860px){
  .personal-book{
    grid-template-columns:0.8fr 1.2fr;
    align-items:center;
  }
}

/* ---------- ציטוט כהה ---------- */

.quote-section{
  background:var(--ink);
  color:var(--cream);
  padding-block:86px;
  position:relative;
  overflow:hidden;
}
.quote-section .container{
  max-width:820px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.quote-text{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(24px,4vw,38px);
  line-height:1.35;
}
.quote-subtext{
  font-family:var(--body);
  font-weight:500;
  font-size:15px;
  color:var(--cream);
  opacity:.75;
}

/* ---------- תהליך: איך אני עובדת ---------- */

.process{ padding-block:50px 56px; text-align:center; }
.process-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  margin-bottom:16px;
}
.process-step{ max-width:280px; }
.process-num{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:14px;
  color:var(--gold-text);
  margin-bottom:6px;
}
.process-step h3{
  font-family:var(--display);
  font-weight:800;
  font-size:19px;
  color:var(--ink);
}
.process-step p{
  font-size:14px;
  line-height:1.5;
  color:var(--text-soft);
  margin-top:6px;
}
.process-arrow{
  color:var(--sage);
  font-size:20px;
  transform:rotate(-90deg);
}
.process-note{
  font-size:14.5px;
  color:var(--text-soft);
}

@media (min-width:760px){
  .process-bar{ flex-direction:row; align-items:flex-start; justify-content:center; gap:30px; }
  .process-arrow{ transform:none; margin-top:8px; }
}

/* ---------- פודקאסט ---------- */

.content-feature{ padding-block:64px; }

/* ---------- המלצות ---------- */

.testimonials{ padding-block:64px; }
.testimonials-grid{ display:grid; gap:16px; }
@media (min-width:820px){
  .testimonials-grid{ grid-template-columns:1fr 1fr 1fr; }
}
.testimonial-card{
  margin:0;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.testimonial-card p{ font-size:15px; line-height:1.6; color:var(--text); }
.testimonial-card cite{
  font-style:normal;
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  color:var(--gold-text);
}
/* לבקשת סוניה: שלושת כרטיסי ההמלצות זהים לגמרי - בלי כרטיס "מודגש" -
   אחרי שראתה בפועל עם טקסטים אמיתיים שההבדל (רקע/פונט/רוחב) נראה כאילו
   המלצה אחת חשובה מהאחרות. ה-class נשאר בקוד (גם ב-admin-text.js) בלי
   השפעה חזותית, כדי לא לגעת בסימון השדות בממשק הניהול. */

/* ---------- feature-card: רכיב משותף (בשימוש כרגע בתוך content-feature) ---------- */

.feature-card{
  border:1px solid var(--line);
  border-radius:4px;
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.feature-card.podcast{ background:linear-gradient(165deg,#eef4f0,var(--bg-soft)); }
.feature-card.book{ background:linear-gradient(165deg,#eef2f7,var(--bg-soft)); }
.feature-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:23px;
}
.feature-card p{ color:var(--text-soft); font-size:15.5px; }
.feature-card .btn{ margin-top:8px; align-self:flex-start; }

/* פודקאסט "רחב": במובייל נערם בטור (תמונה למעלה, כפתורים מתחת, ברוחב
   מלא) — שורה קשיחה בכל רוחב מסך גרמה לגלישה אופקית של כל העמוד מתחת
   ל-700px בערך (התמונה + הכפתורים ביחד רחבים מ-375px). מ-700px ומעלה:
   תמונה בגודל מלא בצד ימין (ראשונה ב-DOM, dir=rtl), שלושה כפתורים בצד
   שמאל. הכרטיס עצמו נצמד לרוחב התוכן (לא נמתח על פני כל הרוחב הפנוי) —
   כדי שלא ייווצר שטח מת מצד שמאל לכפתורים. */
.podcast-wide{
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:24px;
}
@media (min-width:700px){
  .podcast-wide{
    flex-direction:row;
    align-items:center;
    width:fit-content;
  }
}
.podcast-cover-full{
  width:55%;
  max-width:300px;
  height:auto;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
}
.podcast-buttons{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  flex:0 0 auto;
}
/* .feature-card .btn קובע align-self:flex-start גורף (לכפתור בודד בכרטיסים
   אחרים) — כאן צריך לדרוס בחזרה ל-stretch כדי שהכפתורים אכן ימתחו לרוחב
   האחיד שקובע ה-align-items למעלה. */
.podcast-buttons .btn{ align-self:stretch; }

/* "פרק מומלץ" מתחלף בטעינה אקראית — אפקט היפוך קל שמלווה את ההחלפה */
#podcast-recommended-btn{ perspective:600px; }
#podcast-recommended-btn.flip-in{ animation:podcast-flip .5s ease; }
@keyframes podcast-flip{
  0%{ transform:rotateX(90deg); opacity:0; }
  100%{ transform:rotateX(0deg); opacity:1; }
}

/* ---------- CTA סיום ---------- */

.final-cta{
  padding-block:80px;
  text-align:center;
}
.final-cta .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.final-cta .h-display{
  font-size:clamp(28px,4.6vw,46px);
  max-width:16ch;
}

/* גרסה כהה — "ריבוע שחור", כמו .quote-section בדף הבית */
.final-cta-dark{
  background:var(--ink);
  border-radius:4px;
}
.final-cta-dark .h-display,
.final-cta-dark .lede{ color:var(--cream); }
.final-cta-dark .lede{ opacity:.85; }

/* ---------- כותרת תחתונה ---------- */

.site-footer{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  padding-block:44px;
}
.footer-grid{
  display:flex;
  flex-direction:column;
  gap:22px;
}
@media (min-width:700px){
  .footer-grid{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}
.footer-contact{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:14.5px;
}
.footer-contact a{ text-decoration:none; color:var(--text-soft); }
.footer-contact a:hover{ color:var(--ink); }
.footer-location{ color:var(--text-soft); }
.footer-social{
  display:flex;
  gap:14px;
}
.footer-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
}
.footer-social svg{ width:17px; height:17px; }
.footer-fine{
  margin-top:26px;
  font-size:13px;
  color:var(--text-soft);
  opacity:0.8;
}

/* ---------- עמוד אימון וייעוץ (services.html) ---------- */

/* נקודה קטנה לפני פריט ברשימה — לא "מקף גדול", מותר לפי הכלל */
.dot-list li{ position:relative; }
.dot-list li::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--sage);
  margin-inline-end:10px;
  vertical-align:middle;
}

.tracks{ padding-block:56px; }
.tracks-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .tracks-grid{ grid-template-columns:repeat(2,1fr); }
}
/* אותו עיצוב/התנהגות hover כמו .gate-card בדף הבית ("איפה זה פוגש אותך") */
.track-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.track-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(198,57,90,0.14);
  background:var(--cream);
}
.track-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:18.5px;
  line-height:1.3;
  margin:0 0 14px;
}
.track-list{ display:flex; flex-direction:column; gap:10px; }
.track-list li{ font-size:15px; line-height:1.6; color:var(--text-soft); }

/* ---------- עמוד ספרים (books.html) ---------- */
.book-cards{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .book-cards{ grid-template-columns:repeat(3,1fr); }
}
.book-card{ margin:0; display:flex; flex-direction:column; }
.book-card img{
  width:100%;
  aspect-ratio:15/16;
  object-fit:contain;
  background:var(--bg-soft);
  border-radius:4px;
  border:1px solid var(--line);
  display:block;
}
.book-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:16.5px;
  margin:14px 0 0;
}
.book-blurb{
  margin:10px 0 0;
  padding:16px 18px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14px;
  line-height:1.75;
  color:var(--text-soft);
  white-space:pre-line;
}

.prose-section{ padding-block:48px; }
.prose-container{
  max-width:680px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.prose-container p{ font-size:17px; line-height:1.8; color:var(--text-soft); }
.prose-lead{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.2vw,23px);
  color:var(--ink);
  line-height:1.5;
}

.benefits{ padding-block:40px; background:var(--bg-soft); border-block:1px solid var(--line); }
.benefits-dark{ background:var(--ink); border-block:none; }
.benefits-dark .benefits-list li{ color:var(--cream); }
.benefits-list{
  display:grid;
  gap:14px;
  max-width:680px;
  margin-inline:auto;
}
@media (min-width:640px){
  .benefits-list{ grid-template-columns:1fr 1fr; }
}
.benefits-list li{ font-size:15.5px; line-height:1.6; color:var(--text); }

/* ערכים כ"כפתורים" (כמו כל כפתור באתר) — לא קליקביליים, רק אותו עיצוב */
.values-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.values-grid .btn{ cursor:default; }

.guarantee{ padding-block:44px; text-align:center; }
.guarantee-text{
  max-width:640px;
  margin-inline:auto;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.6;
  color:var(--ink);
}

.faq{ padding-block:64px; }
.faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:760px;
  margin-inline:auto;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-soft);
  padding:18px 22px;
}
.faq-item summary{
  cursor:pointer;
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-size:20px;
  color:var(--gold-text);
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }

/* ---------- דפי טקסט משפטיים (נגישות וכו') ---------- */

.legal-page{ padding-block:56px 80px; }
.legal-page .services-head{ margin-bottom:24px; }
.legal-page .services-head h1{ margin-top:8px; }

.footer-legal{ margin-top:18px; font-size:13px; }
.footer-legal a{ color:var(--text-soft); text-decoration:underline; }
.footer-legal a:hover{ color:var(--ink); }
.faq-item p{ margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--text-soft); }

/* ---------- מאמרים (articles/index.html) ---------- */
/* כרטיס-אקורדיון: תקציר גלוי תמיד, הרחבה בלחיצה (details/summary, בלי JS,
   אותה מוסכמה כמו .faq-item). קו-ציור אחד לכל מאמר, שמתקשר לנושא שלו —
   באותו סגנון כמו .turn-mark (קו זהב יחיד, בלי מילוי). */
.articles{ padding-block:16px 64px; }
.articles-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:760px;
  margin-inline:auto;
}
.article-card{
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-soft);
  padding:20px 22px;
  transition:background .25s ease;
}
.article-card:hover{ background:var(--cream); }
.article-card summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.article-card summary::-webkit-details-marker{ display:none; }
.article-icon{ flex-shrink:0; width:38px; height:38px; margin-top:2px; }
.article-icon path{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.article-card-head{ flex:1; min-width:0; }
.article-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:16.5px;
  line-height:1.35;
  margin:0 0 6px;
  color:var(--ink);
}
.article-excerpt{ font-size:14px; line-height:1.6; color:var(--text-soft); margin:0; }
.article-toggle{
  flex-shrink:0;
  font-size:20px;
  color:var(--gold-text);
  transition:transform .2s ease;
  margin-top:-2px;
}
.article-card[open] .article-toggle{ transform:rotate(45deg); }
.article-body{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-body p{ font-size:15px; line-height:1.75; color:var(--text-soft); margin:0; }

/* ---------- ארכיון פרקים (podcast.html) ---------- */

.episodes{ padding-block:56px 64px; }
.episodes-list{
  display:flex;
  flex-direction:column;
  max-width:820px;
  margin-inline:auto;
}
.episodes-loading,
.episodes-error{ color:var(--text-soft); font-size:15px; }
.episodes-error a{ color:var(--gold-text); text-decoration:underline; }
.episode-item{
  padding-block:22px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.episode-item:first-child{ padding-top:0; }
.episode-item:last-child{ border-bottom:none; }
.episode-date{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  color:var(--gold-text);
}
.episode-title{
  font-family:var(--display);
  font-weight:800;
  font-size:17px;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s ease;
}
.episode-title:hover{ color:var(--mint); }
.episode-desc{ font-size:14px; line-height:1.55; color:var(--text-soft); margin:0; }

/* ---------- תוכן חינמי (questionary.html) ---------- */

.content-hub{ padding-block:8px 56px; }
.content-grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
  max-width:520px;
  margin-inline:auto;
}
.content-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:30px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.content-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(198,57,90,0.14);
  background:var(--cream);
}
.content-card h3{
  font-family:var(--display);
  font-weight:800;
  font-size:19px;
  line-height:1.3;
}
.content-card p{ font-size:15px; line-height:1.6; color:var(--text-soft); }

.quiz-section{ padding-top:8px; }
.quiz-intro{ text-align:center; margin-bottom:36px; }
.quiz-intro .lede{ margin-inline:auto; margin-top:10px; }

.quiz-widget{ max-width:560px; margin-inline:auto; }
.quiz-progress{ display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.quiz-progress-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:var(--bg-soft);
  overflow:hidden;
}
.quiz-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--sage);
  transition:width .3s ease;
}
.quiz-progress-label{
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  color:var(--text-soft);
  text-align:center;
}
.quiz-statement{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.4;
  color:var(--ink);
  text-align:center;
  margin-bottom:26px;
}
.quiz-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quiz-option{
  font-family:var(--body);
  font-weight:600;
  font-size:15.5px;
  text-align:center;
  padding:14px 20px;
  border-radius:999px;
  background:var(--bg-soft);
  color:var(--ink);
  border:1.5px solid var(--line);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.quiz-option:hover,
.quiz-option:focus-visible{
  background:var(--sage);
  border-color:var(--sage);
  color:var(--cream);
}
.quiz-back{
  display:block;
  margin:20px auto 0;
  background:none;
  border:none;
  padding:0;
  font-family:var(--body);
  font-size:13.5px;
  color:var(--text-soft);
  text-decoration:underline;
  cursor:pointer;
}
.quiz-back:hover{ color:var(--ink); }

.quiz-results{ max-width:640px; margin-inline:auto; }
.quiz-result h3{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(21px,2.6vw,26px);
  line-height:1.3;
  color:var(--ink);
  margin-bottom:16px;
}
.quiz-result-insight{ font-size:15.5px; line-height:1.75; color:var(--text-soft); margin-bottom:24px; }
.quiz-result-block{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
  padding:20px 22px;
  margin-bottom:16px;
}
.quiz-result-block h4{
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  color:var(--gold-text);
  margin-bottom:12px;
}
.quiz-result-block .dot-list{ display:flex; flex-direction:column; gap:8px; }
.quiz-result-block .dot-list li{ font-size:14.5px; line-height:1.6; color:var(--text-soft); }
.quiz-result-block p{ font-size:14.5px; line-height:1.6; color:var(--text-soft); }
.quiz-result-cta-text{ font-size:15.5px; line-height:1.7; color:var(--text); margin:24px 0 18px; }
.quiz-result-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:24px;
}
.quiz-retry{
  display:block;
  margin:36px auto 0;
  background:none;
  border:none;
  padding:0;
  font-family:var(--body);
  font-size:13.5px;
  color:var(--text-soft);
  text-decoration:underline;
  cursor:pointer;
}
.quiz-retry:hover{ color:var(--ink); }
.quiz-disclaimer{
  margin-top:32px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-soft);
  text-align:center;
}

/* ---------- כרטיסי בחירה גדולים (questionary.html) ---------- */
.content-grid-choice{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
  max-width:800px;
  margin-inline:auto;
}
@media (min-width:640px){
  .content-grid-choice{ grid-template-columns:repeat(2,1fr); }
}