/* system/start/css/gates.css
   ממשק שלושת השערים. גדול, רגוע, לחיצה אחת, מינימום עומס.
   הנחיות Gemini + GPT, כפתורי ענק, רשימה אנכית, גופן גדול, חזרה קבועה. */
@import '/assets/css/variables.css';
@import '/assets/css/fonts.css';

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font, 'Rubik', sans-serif);
  background: var(--cream, #fdf8f2);
  color: var(--navy, #1a4a6b);
  line-height: 1.5;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── top bar ──
   העמודות, הכפתורים (חזרה, כניסה) הם auto ולא מתכווצים לעולם, הם הניווט החיוני.
   הלוגו באמצע הוא minmax(0,1fr), כלומר מקבל את מה שנשאר ומותר לו להצטמצם.
   למה זה קריטי, הדפדפן הפנימי של פייסבוק מכפיל כל גודל טקסט בגודל הפונט של
   הטלפון (×1.3 נמדד אצל עומר) בלי להגדיל פיקסלי CSS, וכרום לא. עם `1fr auto 1fr`
   העמודה האמצעית הייתה max-content, שלושת החלקים דרשו 464px על מסך של 411,
   וכל הדף נדחף הצידה עם גלילה אופקית וכפתור "חזרה" חתוך. אסור מספרים קבועים
   כאן, ואסור להסתמך על -webkit-text-size-adjust, בעל האתר לא יכול לעצור את
   ההכפלה הזאת (מהנדסי Chromium, issue 375209519). הפריסה חייבת לספוג. */
.top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 64px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid var(--border, #e8e0d6);
  flex-shrink: 0; z-index: 5;
}
/* כפתור החזרה, עוגן הניווט היחיד אחורה. נייבי מלא כדי לבלוט על הקרם (עומר 6/7,
   "נבלע בצבעי המערכת"). נייבי = ניווט, כתום נשאר לפעולות, בלי תחרות ביניהם. */
.back {
  display: flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 10px 20px;
  background: var(--navy, #1a4a6b); border: none; border-radius: 50px;
  font-family: inherit; font-size: 1.02rem; font-weight: 800; color: #fff;
  cursor: pointer; box-shadow: 0 4px 14px rgba(26,74,107,0.25);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.back:hover { transform: translateY(-1px); background: #15405d; box-shadow: 0 7px 18px rgba(26,74,107,0.32); }
.back[hidden] { display: none; }
/* שרשרת ה---min-width:0, בלעדיה פריטי flex/grid מסרבים להצטמצם מתחת לתוכן שלהם
   (ברירת המחדל היא min-width:auto), הלוגו גולש מהעמודה שלו לשני הצדדים בגלל
   justify-self:center, ורוכב על כפתורי הניווט. חייב את כל השרשרת עד הטקסט. */
.brand { justify-self: center; grid-column: 2; display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 4px 8px; font-family: inherit; color: var(--navy, #1a4a6b); min-width: 0; max-width: 100%; }
.brand svg { flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: right; min-width: 0; }
.brand-name { font-size: 1.15rem; font-weight: 800; line-height: 1.1; color: var(--navy, #1a4a6b); min-width: 0; overflow-wrap: anywhere; }
/* התגית יורדת שורה כשאין מקום, במקום להיחתך או לדחוף את הדף. עדיף כותרת גבוהה
   בשורה אחת נוספת מאשר תגית מבותרת או גלילה אופקית (עומר, 15/7). */
.brand-tag { font-size: 0.85rem; font-weight: 600; line-height: 1.2; color: #3b5266; white-space: normal; overflow-wrap: anywhere; }
.back { justify-self: start; grid-column: 1; }
.account-host { justify-self: end; grid-column: 3; }
#account-menu { justify-self: end; }

/* ── stage ── */
.stage { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 18px 36px; }

.gate-title { text-align: center; font-size: 1.7rem; font-weight: 800; margin: 8px 0 6px; }
.gate-sub   { text-align: center; font-size: 1.05rem; color: var(--text-light, #8a7a66); margin: 0 0 26px; }

/* ── gate 1, two giant buttons ── */
.intent-grid { display: flex; flex-direction: column; gap: 16px; }
.intent-btn {
  display: flex; align-items: center; gap: 16px; text-align: right; width: 100%;
  min-height: 110px; padding: 22px 24px;
  border: 2.5px solid; border-radius: 22px; background: #fff;
  font-family: inherit; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s;
  /* ⚠ בלי צבע מפורש, כפתור מקבל את צבע ברירת המחדל של הדפדפן. בכרום שחור, ובאייפון כחול של קישור.
     נמדד באייפון אמיתי, 1/10/2026, "יש לי תקלה" יצא כחול. */
  color: var(--navy, #1a4a6b);
}
.intent-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,74,107,0.12); }
.intent-btn .ico { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; }
.intent-btn .txt { display: flex; flex-direction: column; }
.intent-btn .lbl { font-size: 1.35rem; font-weight: 800; }
.intent-btn .sub { font-size: 0.95rem; font-weight: 500; color: var(--text-light, #8a7a66); margin-top: 2px; }
/* צבעי הזהות של השערים (קונצנזוס Gemini + GPT + עומר 6/7): תקלה=טורקיז (ירוק
   התנגש עם תגית "פתוח"), גילוי=חרדל, מסלולים=כחול עמוק (כתום שמור לפעולות).
   הזהות מלווה את המסע דרך פס דק + תגית מסע, אייקוני התוכן נשארים נייבי. */
.intent-btn.learn { border-color: #d4920a33; }
.intent-btn.learn .ico { background: #fdf3d8; color: #d4920a; }
.intent-btn.fix { border-color: #1682a533; }
.intent-btn.fix .ico { background: #e2f2f8; color: #1682a5; }

/* ── gate 2, רשימת פריטים ── */
.item-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: right;
  min-height: 84px; padding: 18px 22px;
  background: #fff; border: 2px solid var(--border, #e8e0d6); border-radius: 20px;
  font-family: inherit; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, border-color 0.12s;
}
.item-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,74,107,0.12); border-color: #1a4a6b55; }
.item-btn .name { flex: 1; font-size: 1.25rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.item-btn .chev { color: var(--text-light, #b8a890); flex-shrink: 0; }

/* אייקון פר-פריט (מילון לפי נושא פלוס override). חיפה קטנה, נייבי על תכלת רך,
   עקבי עם אייקון הקטגוריה. כל פריט בכל רשימה מקבל אחד (בקשת עומר, SVG בכל מקום). */
.item-ico {
  width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #eef5fb; color: #1a4a6b; border-radius: 14px;
}
.item-ico svg { width: 26px; height: 26px; }
.item-btn.locked .item-ico { background: #efe8df; color: #a8967e; }

/* פריט נעול (בנק, טרם שוחרר למנוי חדש). לא לחיץ, מעומעם, תווית "נפתח ב-..." */
.item-btn.locked { cursor: default; opacity: 0.75; background: #f6f1ea; border-style: dashed; }
.item-btn.locked:hover { border-color: var(--border, #e8e0d6); box-shadow: none; }
.item-btn.locked .name { color: var(--text-light, #8a7a66); }
/* תגית סטטוס אחידה (פתוח / להצטרפות / ייפתח בקרוב). לא-מקומית, חלה בכל מקום, רקע רך, טקסט צבעוני, אייקון, גבול עדין. */
.lock-when { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 700; padding: 5px 11px 5px 10px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; line-height: 1; border: 1px solid transparent; margin-inline-start: auto; }
.lock-when svg { width: 14px; height: 14px; flex-shrink: 0; }

/* כרטיס מילוט (escape), לא עוד פתרון אלא "עשיתי הכל". נבדל ויזואלית, מופרד במפריד מעל, גוון עזרה חם. */
.item-btn.escape { margin-top: 14px; background: #fdf0e6; border-color: #f0c9a8; }
.item-btn.escape::before { content: ""; position: absolute; top: -8px; left: 8%; right: 8%; border-top: 1px dashed var(--border, #e8e0d6); }
.item-btn.escape { position: relative; }
.item-btn.escape:hover { border-color: var(--orange-deep, #e8854a); }
.item-btn.escape .item-ico { background: #fbe2cf; color: var(--orange-deep, #e8854a); }
.item-btn.escape .name { color: #a85a1f; }
.item-btn .esc-tag { font-size: 0.78rem; font-weight: 700; color: var(--orange-deep, #e8854a); background: #fbe2cf; padding: 3px 10px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; margin-inline-start: auto; }

/* ── gate 3, content options ── */
.content-head { background: #fff; border-radius: 18px; padding: 22px; border: 2px solid var(--border, #e8e0d6); margin-bottom: 18px; text-align: center; }
.content-head .name { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
.content-head .entry { font-size: 1.05rem; color: #5a4a36; margin: 0; }

/* ── freemium, שער מנוי ── */
.gate-loading { text-align: center; color: var(--text-light, #8a7a66); font-size: 1.05rem; padding: 48px 0; }
/* פריט שדורש מנוי, נשאר לחיץ (מוביל לכרטיס ההצטרפות) עם רמז כתום עדין ותווית "להצטרפות". */
.item-btn.sublock, .cat-btn.sublock { border-color: #f0c9a8; }
.item-btn.sublock .item-ico, .cat-btn.sublock .ico { background: #fbe2cf; color: var(--orange-deep, #e8854a); }
.item-btn.sublock .chev, .cat-btn.sublock .chev { color: var(--orange-deep, #e8854a); }
.lock-when.join { color: #d1723a; background: rgba(232,133,74,0.12); }
/* כרטיס הצטרפות/כניסה בשער 3 (freemium). */
.join-card { border-color: #f0c9a8; }
.join-card .join-lock { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fbe2cf; color: var(--orange-deep, #e8854a); margin-bottom: 12px; }
.join-card .join-lock svg { width: 26px; height: 26px; }
.join-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.join-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 24px; border: none; border-radius: 50px; font-family: inherit; font-size: 1.1rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.2s, color 0.2s, box-shadow 0.2s; }
.join-cta:hover { transform: translateY(-2px); }
.join-cta:active { transform: translateY(0); }
/* border:none בבסיס, בלי זה כפתור <button> גולמי מקבל את גבול ברירת המחדל המכוער של הדפדפן. */
.join-cta.primary { background: linear-gradient(135deg, #f09a5e 0%, #e8854a 55%, #d9743a 100%); color: #fff; box-shadow: 0 6px 18px rgba(232,133,74,0.35); }
.join-cta.primary:hover { box-shadow: 0 10px 26px rgba(232,133,74,0.45); }
.join-cta.ghost { background: transparent; color: var(--navy, #1a4a6b); border: 2px solid var(--navy, #1a4a6b); }
.join-cta.ghost:hover { background: var(--navy, #1a4a6b); color: #fff; }

/* ═══ מסך בורר המסלולים (join), נפתח מכרטיס ההצטרפות במקום קפיצה לדף הנחיתה ═══ */
.join-screen { max-width: 560px; margin: 0 auto; }
.join-screen-head { text-align: center; margin-bottom: 28px; }
.join-screen-head .join-lock { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fbe2cf; color: var(--orange-deep, #e8854a); margin-bottom: 12px; }
.join-screen-head .join-lock svg { width: 26px; height: 26px; }
.join-screen-title { font-size: 1.5rem; font-weight: 800; color: var(--navy, #1a4a6b); margin: 0 0 8px; }
.join-screen-sub { font-size: 1.05rem; color: #5a4a36; line-height: 1.6; margin: 0; }
.plan-list { display: flex; flex-direction: column; gap: 24px; }
.plan-card { position: relative; display: block; text-decoration: none; background: #fff; border: 2px solid var(--border, #e8e0d6); border-radius: 18px; padding: 26px 24px; transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; }
.plan-card:hover { transform: translateY(-2px); border-color: var(--navy, #1a4a6b); box-shadow: 0 8px 24px rgba(26,74,107,0.1); }
.plan-card.rec { border-color: var(--orange-deep, #e8854a); box-shadow: 0 6px 20px rgba(232,133,74,0.14); }
.plan-rec { position: absolute; top: -12px; inset-inline-start: 22px; background: var(--orange-deep, #e8854a); color: #fff; font-size: 0.82rem; font-weight: 800; padding: 4px 14px; border-radius: 50px; }
.plan-tag { position: absolute; top: -12px; inset-inline-start: 22px; background: #eef2f6; color: var(--navy, #1a4a6b); font-size: 0.82rem; font-weight: 800; padding: 4px 14px; border-radius: 50px; border: 1px solid #d8e2ea; }
.plan-name { display: block; font-size: 1.3rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.plan-price { display: block; font-size: 1.05rem; color: #5a4a36; margin: 4px 0 8px; }
.plan-price b { font-size: 1.6rem; font-weight: 900; color: var(--navy, #1a4a6b); }
.plan-unit { font-size: 0.95rem; color: var(--text-light, #8a7a66); font-weight: 600; }
.plan-desc { display: block; font-size: 0.98rem; color: #5a4a36; line-height: 1.6; }
/* 3/10/2026, החיסכון של השנתי בשקלים, והמחיר לחודש כשורה משנית. gates.js, yearlyLines. */
.plan-deal { display: inline-block; font-size: 1.02rem; font-weight: 800; color: var(--navy, #1a4a6b); background: var(--orange-light, #fdeede); border-radius: 10px; padding: 6px 12px; margin: 2px 0 8px; line-height: 1.5; }
.plan-calc { display: block; font-size: 0.92rem; color: var(--text-light, #5f5f5f); margin-bottom: 8px; }
.plan-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 1.05rem; font-weight: 800; color: var(--orange-deep, #e8854a); }
.plan-go svg { width: 18px; height: 18px; }
/* 5/10/2026, מה כלול במנוי, מתחת לכרטיסי המחיר */
.join-includes { margin: 18px auto 0; max-width: 520px; text-align: center; font-size: 1rem; color: #5a4a36; line-height: 1.7; }
.join-includes a { color: inherit; font-weight: 700; }
.join-trust { margin-top: 18px; text-align: center; }
.join-trust-line { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-light, #8a7a66); line-height: 1.5; }
.join-trust-line svg { width: 16px; height: 16px; flex-shrink: 0; }
.join-help { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border, #e8e0d6); text-align: center; }
.join-help-q { font-size: 1rem; font-weight: 700; color: var(--navy, #1a4a6b); margin-bottom: 12px; }
.join-help-wa { display: inline-flex; align-items: center; gap: 9px; background: #25d366; color: #fff; font-family: inherit; font-size: 1.02rem; font-weight: 700; text-decoration: none; padding: 13px 28px; border-radius: 50px; box-shadow: 0 4px 16px rgba(37,211,102,0.3); transition: transform 0.15s; }
.join-help-wa:hover { transform: translateY(-2px); }
.join-help-login { display: block; margin-top: 14px; font-size: 0.98rem; color: var(--navy, #1a4a6b); text-decoration: underline; }
.join-help-login:hover { color: var(--orange-deep, #e8854a); }
button.path-step-tag { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
@media (max-width: 640px) {
  .join-screen-title { font-size: 1.35rem; }
  .plan-card { padding: 22px 18px; }
  .plan-name { font-size: 1.2rem; }
  .plan-price b { font-size: 1.45rem; }
}

/* תגית "פתוח" (טעימה חינם), ירוק זמינות, נבדל מהכתום של "להצטרפות". */
.lock-when.open { color: #2e8b57; background: rgba(46,139,87,0.1); }
.lock-when.soon { color: #a3854f; background: rgba(163,133,79,0.12); }
.path-step-tag { text-decoration: none; display: inline-block; }

.content-options { display: flex; flex-direction: column; gap: 12px; }
.option-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: right;
  min-height: 76px; padding: 18px 22px; border: none; border-radius: 18px;
  font-family: inherit; cursor: pointer; color: #fff; transition: filter 0.12s;
}
.option-btn:hover { filter: brightness(1.05); }
.option-btn .ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); border-radius: 12px; }
.option-btn .txt { display: flex; flex-direction: column; }
.option-btn .lbl { font-size: 1.18rem; font-weight: 800; }
.option-btn .hint { font-size: 0.95rem; font-weight: 500; opacity: 0.92; margin-top: 2px; }
/* צבע לכל סוג תוכן, לפי סדר העדיפות. סרטון אדום יוטיוב ראשון, ואז כתום הדרכה, כחול מודל, ירוק קאקי בלוג. */
.option-btn.video { background: #e62117; } /* אדום יוטיוב מרוכך לרקע קרם */
.option-btn.guide { background: var(--orange-deep, #e8854a); } /* כתום המותג, כמו יעדי הלחיצה בהדרכות */
.option-btn.model { background: #3973a8; } /* כחול פלדה, מרחב ותלת-ממד */
.option-btn.post  { background: #6f7746; } /* ירוק קאקי זית, קריאה רגועה */
/* ── כמה פריטי תוכן מאותו סוג ──
   כפתור אחד לכל סוג תמיד. כשיש כמה, מונה וחץ מכריזים על כך מראש. הלחיצה
   פותחת רשימה. עד שלושה, אקורדיון במקום. מעל זה, מגירה מלמטה. */
.opt-wrap { display: flex; flex-direction: column; }
.option-btn .opt-count { flex-shrink: 0; margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 800; }
.option-btn .opt-count .num { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 50px; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; }
/* החץ של הקבוצה מצביע למטה (הרשימה נפתחת), בניגוד לחץ הניווט שמצביע קדימה. */
.option-btn .opt-count .chev { display: flex; transform: rotate(-90deg); transition: transform 0.2s; }
.opt-wrap.is-open .option-btn .opt-count .chev { transform: rotate(90deg); }
.opt-panel { overflow: hidden; max-height: 0; transition: max-height 0.28s ease; }
.opt-wrap.is-open .opt-panel { max-height: 900px; }
.opt-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 8px 2px; padding: 10px; background: #fff; border: 1px solid var(--border, #e8e0d6); border-radius: 16px; }
/* שורת פריט תוכן. ניטרלית ולא צבעונית, כדי שלא תתחרה בכפתור הסוג שמעליה.
   השם רשאי לרדת שורה, עדיף שם מלא שמסביר על שתי שורות משם חתוך (עומר, 5/8). */
.ci-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; min-height: 62px; padding: 12px 14px; border-radius: 13px; background: var(--cream, #fdf8f2); border: 1px solid var(--border, #e8e0d6); font-family: inherit; color: var(--navy, #1a4a6b); cursor: pointer; }
.ci-row:hover { background: #f4ece2; }
.ci-dot { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ci-dot svg { width: 17px; height: 17px; }
.ci-dot.video { background: #e62117; }
.ci-dot.guide { background: var(--orange-deep, #e8854a); }
.ci-dot.model { background: #3973a8; }
.ci-dot.post  { background: #6f7746; }
.ci-txt { display: flex; flex-direction: column; min-width: 0; }
.ci-name { font-size: 1.02rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ci-bank { font-size: 0.85rem; font-weight: 600; color: #a3854f; }
.ci-go { margin-inline-start: auto; flex-shrink: 0; color: var(--text-light, #8a7a66); display: flex; }
.ci-go svg { width: 18px; height: 18px; }

/* מגירה מלמטה, מעל שלושה פריטים. לא מזיזה את שאר הכפתורים.
   z-index מעל הכפתורים הצפים (וואטסאפ ונגישות יושבים על 9999), אחרת הם רוכבים
   על השורה האחרונה ברשימה בדיוק במקום שהאצבע מגיעה אליו. */
.ci-sheet-back { position: fixed; inset: 0; background: rgba(16,34,47,0.5); z-index: 10050; }
.ci-sheet-back[hidden] { display: none; }
.ci-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 10051; background: #fff; border-radius: 22px 22px 0 0; padding: 10px 16px calc(26px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(16,34,47,0.25); max-height: 74vh; overflow-y: auto; width: 100%; max-width: 640px; margin: 0 auto; }
.ci-sheet[hidden] { display: none; }
.sheet-grab { width: 46px; height: 5px; border-radius: 50px; background: #d8e2ea; margin: 4px auto 12px; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.sheet-title { font-size: 1.15rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.sheet-close { margin-inline-start: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border, #e8e0d6); background: var(--cream, #fdf8f2); color: var(--navy, #1a4a6b); cursor: pointer; font-family: inherit; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-list { display: flex; flex-direction: column; gap: 10px; }

/* כרטיס שלב בזרם מודרך (כמו "לא נדלק"), מספר גדול במקום אייקון. הסרטונים אדומים וממוספרים. */
.option-btn.step .step-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.esc-wrap { margin-top: 14px; }

/* ── video overlay, מודל מוכל (לא גדול מדי) ── */
.video-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.video-overlay[hidden] { display: none; }
.video-box { position: relative; display: flex; justify-content: center; width: 100%; max-width: 680px; }
.video-box video { max-width: 100%; max-height: 80vh; border-radius: 14px; background: #000; display: block; }
.video-close { position: absolute; top: -14px; left: -14px; width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: #1a4a6b; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 1; }

/* ⭐ חיווי טעינה של הסרטון, 7/10/2026. עומר, "משהו יפה של טעינה שהצופה לא יחשוב שזה נתקע".
   עד שהמידות של הסרטון ידועות, המסגרת כבר בגודל של סרטון 16:9 ולא ריבוע שחור קטן.
   ⚠ רק עד loadedmetadata, אחר כך הסרטון קובע את המידות שלו, gates.js */
.video-stage.vl-sized video { width: min(680px, calc(100vw - 40px), calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; }
.vl-load { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  line-height: 1.4; pointer-events: none; border-radius: 14px; background: rgba(10, 26, 40, 0.55); animation: vl-in .25s ease-out; }
.vl-load[hidden] { display: none; }
.vl-ring { width: 56px; height: 56px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--orange-deep, #e8854a); animation: vl-spin .9s linear infinite; }
.vl-text { color: #fff; font-size: 1.1rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
@keyframes vl-spin { to { transform: rotate(360deg); } }
@keyframes vl-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vl-ring { animation-duration: 2.4s; } .vl-load { animation: none; } }

/* ── reassure footer + עזרה אנושית ── */
.reassure { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; background: #fff; border-top: 1px solid var(--border, #e8e0d6); }
.help-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 20px; background: #25d366; color: #fff; border-radius: 50px; text-decoration: none; font-size: 0.98rem; font-weight: 700; }
.help-btn svg { flex-shrink: 0; }

/* ── מובייל, כ-90% מהתעבורה ── */
@media (max-width: 600px) {
  .top { padding: 10px 12px; }
  .back { min-height: 44px; padding: 8px 13px; font-size: 0.95rem; }
  .stage { padding: 18px 14px 32px; }
  .gate-title { font-size: 1.45rem; }
  .gate-sub { font-size: 1rem; margin-bottom: 20px; }
  .intent-btn { min-height: 96px; padding: 18px; gap: 14px; }
  .intent-btn .ico { width: 48px; height: 48px; }
  .intent-btn .lbl { font-size: 1.2rem; }
  .intent-btn .sub { font-size: 0.9rem; }
  .content-head { padding: 18px; }
  .content-head .name { font-size: 1.25rem; }
  .option-btn { min-height: 70px; padding: 16px 18px; }
  .option-btn .lbl { font-size: 1.1rem; }
}

/* אזהרת זכויות יוצרים, מתחת לכפתור העזרה (בקשת עומר 9/6/2026, מהמערכת הישנה) */
.copyright-note {
  max-width: 540px; margin: 14px auto 0; padding: 0 16px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.6; color: #123048; text-align: center;
}

.copyright-note strong { font-weight: 800; }
.copyright-note .cr-lock { vertical-align: -2px; margin-inline-end: 5px; color: #1a4a6b; }

/* שני קישורי הפוטר (הצהרת נגישות + קרדיטים) באותה שורה, נופלים לשתיים רק במסך
   צר (עומר, 16/7). margin-top שלילי מקזז חלק מ-gap ה-flex של .reassure (14px). */
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 4px 20px; max-width: 620px; margin: -6px auto 0; padding: 0 16px;
}
.footer-link { font-size: 0.8125rem; font-weight: 600; color: #5a7185; text-decoration: underline; }

/* מסתירים את כפתור הוואטסאפ הצף כשמודאל פתוח (סרטון או מודל תלת-ממדי), שלא
   ירחף מעל מסך מלא. שני המודאלים מסומנים ב-hidden כשסגורים. */
body:has(#video-overlay:not([hidden])) #wa-fab,
body:has(#model-overlay:not([hidden])) #wa-fab { display: none !important; }

/* גם כפתור המשוב וכפתור הנגישות מוסתרים כשחלון המודל התלת-ממדי פתוח, בכל גודל מסך.
   הם כיסו את הפינה התחתונה של החלון, בטלפון גם את המודל עצמו. הכרעת עומר 13/9/2026.
   חוזרים ברגע שהחלון נסגר.
   ⭐ 1/10/2026, גם בנגן הסרטונים, הכרעת עומר. בטלפון הם צפו מעל כפתורי הפרקים בבדיקה של כל האתר.
   עד אז היה כתוב כאן "חלון הסרטון לא השתנה". */
body:has(#model-overlay:not([hidden])) #feedback-fab,
body:has(#model-overlay:not([hidden])) .a11y-trigger,
body:has(#model-overlay:not([hidden])) .a11y-panel,
body:has(#video-overlay:not([hidden])) #feedback-fab,
body:has(#video-overlay:not([hidden])) .a11y-trigger,
body:has(#video-overlay:not([hidden])) .a11y-panel { display: none !important; }

/* קרדיטים למודלים (details נטיבי, חובת CC-BY לתת קרדיט). דיסקרטי בפוטר.
   בשורת הקישורים כשסגור, וכשנפתח תופס שורה מלאה שהרשימה תיפרס בנוחות. */
.model-credits { text-align: center; }
.model-credits[open] { flex-basis: 100%; margin-top: 6px; }
.model-credits summary {
  display: inline-block; cursor: pointer; font-size: 0.8125rem; font-weight: 600;
  color: #5a7185; text-decoration: underline; list-style: none; padding: 4px;
}
.model-credits summary::-webkit-details-marker { display: none; }
.model-credits[open] summary { margin-bottom: 8px; }
.model-credits .mc-body { text-align: right; font-size: 0.8125rem; color: #4a5c6b; line-height: 1.7; }
.model-credits .mc-body p { margin: 0 0 8px; }
.model-credits .mc-list { list-style: none; padding: 0; margin: 0 0 10px; columns: 2; column-gap: 18px; }
.model-credits .mc-list li { break-inside: avoid; margin-bottom: 3px; font-size: 0.8125rem; }
.model-credits a { color: #1a4a6b; font-weight: 600; }
.model-credits .mc-tm { font-size: 0.8125rem; color: #7c8791; border-top: 1px solid #e0d8cd; padding-top: 8px; }
@media (max-width: 520px) { .model-credits .mc-list { columns: 1; } }
/* 'מה חדש' רק בשער 1 (בקשת עומר), שאר הדפים רק זכויות יוצרים */
/* בר תחתון קבוע, "הדברים שלי" + "מה חדש במערכת", נגיש מכל שער (עומר 13/7). */
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
#footer-mine, #whats-new { display: flex; }
#footer-mine:empty, #whats-new:empty { display: none; }
/* בתוך חלון "הדברים שלי", בלי הקו העליון והמרווח הגדול שהיו בבית (כותרת החלון כבר מפרידה). */
.wn-card .home-personal { margin-top: 6px; padding-top: 0; border-top: none; }

/* דסקטופ, זרימת עמוד טבעית (לא app-shell נעול). מונע גם שבירת zoom של הדפדפן. קונצנזוס Gemini + GPT 9/6/2026. */
@media (min-width: 768px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .top { position: sticky; top: 0; }
  .stage { overflow-y: visible; max-width: 720px; }
}

/* טלפון לרוחב (landscape נמוך), משחרר את נעילת ה-100vh כדי שתוכן לא ייתפס
   מתחת לקיפול. הגוף עובר לגלילה טבעית במקום overflow:hidden. */
@media (orientation: landscape) and (max-height: 480px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  .stage { overflow-y: visible; }
}

/* ⭐⭐ טלפון לאורך, גם כאן כל הדף נגלל, כמו במחשב ובטלפון לרוחב. 1/10/2026.
   עומר, "יש שם את הכפתורי נגישות למעלה, כשזה בטלפון זה מתחיל לשבש את התצוגה".
   ⚠ מה שנמדד ב-375x812 במעטפת הנעולה שהייתה כאן. בר גודל הטקסט קבוע 60px מלמעלה ולא יודע
   כמה גבוהה הכותרת, ולכן כיסה את "שלום" כבר בגודל רגיל, ובגדלים הגדולים את "כניסה".
   הפוטר הקבוע תפס 180px בגודל רגיל ו-439 מתוך 812 בגודל ענק, ונשארו 235px לתוכן.
   הבר גם לא התכווץ אף פעם, כי הוא מקשיב לגלילה של החלון, והחלון לא נגלל.
   ⭐ ההכרעה עם GPT-6 astra. הבר בזרימה מתחת לכותרת, js/phone-flow.js מעביר אותו לשם,
   הפוטר אחרי התוכן, וריווח בתחתית בשביל שני הכפתורים הצפים.
   ⛔ הקוד המשותף של הבר לא השתנה, הוא משרת 27 דפים. השינוי כולו כאן ובמערכת. */
@media (max-width: 767px) {
  body { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .stage { flex: 1 0 auto; overflow-y: visible; }
  /* ⚠ `body` בכל כלל של הבר. text-size-bar.css נטען מהסקריפט אחרי הקובץ הזה, ובאותה ספציפיות הוא גובר. נמדד 1/10/2026 */
  /* z-index auto, כי בגוף שבנוי כ-flex השכבה 90 של הבר תקפה גם בזרימה, והוא צויר מעל נגן הסרטונים הפתוח. נמדד באייפון, 1/10/2026 */
  body #tsb { position: static; flex-shrink: 0; z-index: auto; }
  /* הבר בזרימה, ולכן כיווץ בגלילה רק היה מקפיץ את התוכן. כאן המצב המכווץ נראה בדיוק כמו הפתוח */
  body #tsb.collapsed { background: #fdf8f2; border-bottom-color: #e8e0d6; box-shadow: 0 3px 12px rgba(26, 74, 107, 0.08); pointer-events: auto; }
  body #tsb.collapsed .tsb-opts { display: flex; }
  body #tsb.collapsed .tsb-lbl { background: transparent; border: none; border-radius: 0; padding: 4px 2px; box-shadow: none; }
  /* כפתור של 52px, 24px מהתחתית, ועוד מרווח, כדי שהקישורים בסוף לא יישבו מתחת לכפתורים הצפים */
  .reassure { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ⭐ גודל לאצבע ולעין של קהל 50 עד 75. נמדד ב-11 מכשירים אמיתיים, 1/10/2026, וביקורת של GPT-6 astra.
   "לבחירת מכשיר אחר" ודומיו היו בגובה 30px, התגיות "למנויים" 13px, קישורי הפוטר 12px.
   ⭐ בטלפון, ובכל מסך מגע, גם טאבלט רחב. בטאבלט לוחצים באצבע בדיוק כמו בטלפון. מחשב עם עכבר לא משתנה. */
@media (max-width: 767px), (pointer: coarse) {
  .step-back { min-height: 44px; }
  .lock-when { font-size: 0.9rem; }
  .copyright-note { font-size: 0.875rem; }
  .footer-link, .model-credits summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
}

/* ⭐ בגודל "גדול מאוד" ו"ענק", הכותרת והבר תפסו כ-60% מהמסך הראשון באייפון SE.
   שורת התיאור יורדת רק אז, והשם "המערכת" נשאר. js/phone-flow.js מסמן את tsb-big. 1/10/2026 */
@media (max-width: 600px) {
  .top { padding: 8px 12px; }
  html.tsb-big .brand-tag { display: none; }
}

/* כפתור המשוב צף מעל אוברליי הסרטון (z-index 50), כדי שאפשר לשלוח משוב גם בזמן צפייה,
   בדיוק כשהמקור הכי מדויק. המודאל מעל הכל.
   ⚠ מעל חלון המודל התלת-ממדי הוא כבר לא מוצג, מ-13/9/2026. ראו הכלל שמסתיר אותו למעלה. */
#feedback-fab { z-index: 10000; }
#feedback-modal { z-index: 10001; }

/* רשת ביטחון, נתיב מילוט לטכנאי במסלול תקלה. משני לפתרון העצמי, יושב
   מתחת לאפשרויות עם מפריד, לא מתחרה בהן. */
.tech-cta {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border, #e8e0d6);
  text-align: center;
}
.tech-cta-q { font-size: 1rem; font-weight: 700; color: var(--navy, #1a4a6b); margin-bottom: 12px; }
.tech-cta-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #25d366; color: #fff;
  font-family: inherit; font-size: 1.02rem; font-weight: 700;
  text-decoration: none; padding: 13px 28px; border-radius: 50px;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3); transition: transform 0.15s, box-shadow 0.15s;
}
.tech-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.4); }
/* 5/10/2026, השורה עברה מעל הכפתור והיא עכשיו ההסבר עצמו, ולכן גדולה יותר */
.tech-cta-trust { font-size: 0.95rem; color: #5a4a36; line-height: 1.6; margin: 0 auto 14px; max-width: 360px; }
/* 5/10/2026, ההבהרה במסך הבית, מתחת לכפתורי הכוונה */
.home-note { margin: 18px auto 0; max-width: 460px; text-align: center; font-size: 0.95rem; color: var(--text-light, #8a7a66); line-height: 1.7; }

/* קישור להדרכת TeamViewer מתוך ה-escape hatch של הטכנאי (תנאי מקדים לתמיכה מרחוק) */
.tech-cta-tv {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a4a6b;
  text-decoration: underline;
}
.tech-cta-tv:hover { color: #e8854a; }

/* ═══ בורר הקטגוריות (שער 2 לתקלה), בוחרים איפה התקלה ואז רשימה ממוקדת ═══ */
.cat-grid { display: flex; flex-direction: column; gap: 14px; }
.cat-btn {
  display: flex; align-items: center; gap: 16px; text-align: right; width: 100%;
  min-height: 84px; padding: 18px 22px;
  background: #fff; border: 2px solid var(--border, #e8e0d6); border-radius: 20px;
  font-family: inherit; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, border-color 0.12s;
}
.cat-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,74,107,0.12); border-color: #1a4a6b55; }
.cat-btn .ico {
  width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #eef5fb; color: #1a4a6b; border-radius: 14px;
}
.cat-btn .lbl { flex: 1; font-size: 1.25rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.cat-btn .chev { color: var(--text-light, #b8a890); flex-shrink: 0; }

/* כפתור קטגוריה עם שורת הסבר (שער הגילוי, 6/8/2026). הכותרת אומרת על מה
   מסתכלים, השורה מתחתיה אומרת בדיוק מה יש בפנים. עומר, "בן אדם צריך לדעת
   בדיוק מה הוא הולך לראות, מה הוא הולך לפתור. בהירות חשובה יותר מאסתטיקה."
   הכפתור מיישר לראש כי הטקסט כאן גבוה מהאייקון. */
/* פריסת רשת ולא גלישת שורות. עם גלישה, החץ היה נופל לשורה נפרדת משלו בטלפון
   צר ברגע שהכותרת התארכה. הרשת מקבעת, למעלה כותרת וחץ, למטה הסבר ותגית. */
.cat-btn.has-sub {
  display: grid; min-height: 0; padding: 16px 20px 18px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico lbl chev" "ico sub sub" "ico tag tag";
  align-items: center; column-gap: 14px; row-gap: 7px;
}
.cat-btn.has-sub .ico { grid-area: ico; align-self: start; margin-top: 2px; }
.cat-btn.has-sub .lbl { grid-area: lbl; font-size: 1.15rem; line-height: 1.3; }
.cat-btn.has-sub .chev { grid-area: chev; }
.cat-btn .sub { grid-area: sub; font-size: 1rem; font-weight: 500; line-height: 1.55; color: #6b5f4e; }
/* התגית בשורה קבועה משלה, לא גולשת לפי אורך ההסבר. כך כל הכרטיסים זהים. */
.cat-btn.has-sub .lock-when { grid-area: tag; justify-self: start; margin-top: 1px; }

/* ═══ התגית תמיד בשורה תחתונה, בכל סוגי הכרטיסים (עומר, 6/8/2026) ═══
   כשהתגית יושבת בצד היא גוזלת רוחב מהכותרת ושוברת אותה לשלוש או ארבע שורות,
   "לא רואים אותי טוב או שהתמונה מטושטשת" נשבר לארבע. עומר, "לא צריך אותה בצד,
   צריך אותה למטה, ואז היא לא תשבור את הטקסט".
   אותה פריסה בשלושת הכרטיסים, כותרת וחץ למעלה, תגית בשורה משלה מתחת. */
.cat-btn:not(.has-sub):has(.lock-when),
.item-btn:has(.lock-when) {
  display: grid; min-height: 0; padding: 16px 20px 18px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico lbl chev" "ico tag tag";
  align-items: center; column-gap: 14px; row-gap: 9px;
}
.cat-btn:not(.has-sub):has(.lock-when) > .ico,
.item-btn:has(.lock-when) > .item-ico { grid-area: ico; align-self: start; }
.cat-btn:not(.has-sub):has(.lock-when) > .lbl,
.item-btn:has(.lock-when) > .name { grid-area: lbl; line-height: 1.3; }
.cat-btn:not(.has-sub):has(.lock-when) > .chev,
.item-btn:has(.lock-when) > .chev { grid-area: chev; }
.cat-btn:not(.has-sub):has(.lock-when) > .lock-when,
.item-btn:has(.lock-when) > .lock-when { grid-area: tag; justify-self: start; }

/* כפתורי השערים בדף הבית, אותו היגיון. התגית יורדת מתחת לכותרת ולתת-כותרת. */
.intent-btn:has(.lock-when) {
  display: grid; min-height: 0; padding: 20px 24px;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico txt" "ico tag";
  align-items: center; column-gap: 16px; row-gap: 10px;
}
.intent-btn:has(.lock-when) > .ico { grid-area: ico; align-self: start; }
.intent-btn:has(.lock-when) > .txt { grid-area: txt; }
.intent-btn:has(.lock-when) > .lock-when { grid-area: tag; justify-self: start; }

/* כרטיס מסלול, אותו היגיון. עד 6/10/2026 התגית ישבה בצד, ובטלפון ב"גדול מאוד" ההסבר נשבר למילה בשורה.
   ⭐ כאן התגית בצד שמאל, מתחת לחץ, ולא בהתחלה כמו בשאר הכרטיסים. עומר בחר בחלונית באותו לילה. */
.path-card-btn:has(.lock-when) {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "ico txt chev" "ico tag tag";
  align-items: center; column-gap: 16px; row-gap: 10px;
}
.path-card-btn:has(.lock-when) > .ico { grid-area: ico; align-self: start; }
.path-card-btn:has(.lock-when) > .txt { grid-area: txt; }
.path-card-btn:has(.lock-when) > .chev { grid-area: chev; }
.path-card-btn:has(.lock-when) > .lock-when { grid-area: tag; justify-self: end; margin-inline-start: 0; }

/* בלוק הפתיחה במסך הבית. מי שמגיע מדף נחיתה לא צריך לחקור תפריטים כדי לגלות
   מה פתוח לו, הוא רואה את זה מיד ולוחץ ישר. (עומר, 6/8/2026) */
/* "מתחילים כאן", כרטיס אחד לאורח כשיש מסלול חינמי פתוח. 17/10/2026, תוכנית השיווק שלב 1 */
.start-here {
  margin: 0 0 22px; padding: 22px 20px 24px; text-align: center;
  background: #f4faf6; border: 2px solid #9fd0b2; border-radius: 20px;
  box-shadow: 0 8px 22px rgba(46,125,81,0.12);
}
.start-here-eyebrow { font-size: 0.95rem; font-weight: 800; color: #2e7d51; margin-bottom: 4px; }
.start-here-title { margin: 0 0 8px; font-size: 1.45rem; font-weight: 800; color: var(--navy, #1a4a6b); line-height: 1.3; }
.start-here-goal { margin: 0 auto 8px; max-width: 460px; font-size: 1.02rem; line-height: 1.6; color: var(--text, #3a3a3a); }
.start-here-meta { margin: 0 0 16px; font-size: 0.95rem; font-weight: 600; color: #5f7f6c; }
.start-here-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; min-width: 180px;
  padding: 14px 34px; border: none; border-radius: 50px; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #f09a5e 0%, #e8854a 55%, #d9743a 100%); color: #fff;
  font-size: 1.15rem; font-weight: 800; box-shadow: 0 5px 16px rgba(232,133,74,0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
.start-here-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(232,133,74,0.45); }
.start-here-btn:active { transform: translateY(0); }
.path-newtab-note { margin: 8px 0 4px; font-size: 0.95rem; line-height: 1.6; color: var(--text-light, #8a7a66); }

/* הצעה בסוף המסלול החינמי, לאורח. 17/10/2026, שלב 2 בתוכנית השיווק. כתום כמו כרטיס ההצטרפות,
   כי זה אותו צעד, אבל רך, אחרי טקסט הסיום ולא במקומו. */
.path-offer {
  margin: 26px 0 8px; padding: 24px 20px 26px; text-align: center;
  background: #fff8f2; border: 2px solid #f0c9a8; border-radius: 20px;
  box-shadow: 0 8px 22px rgba(232,133,74,0.12);
}
.path-offer-title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; color: var(--navy, #1a4a6b); line-height: 1.3; }
.path-offer-line { margin: 0 auto 6px; max-width: 460px; font-size: 1.05rem; line-height: 1.6; color: var(--text, #3a3a3a); }
.path-offer-price { margin: 0 0 18px; min-height: 1.6em; font-size: 1.02rem; font-weight: 700; color: #a85a1f; }
.path-offer-btn { min-width: 220px; }

/* מסך פריט נעול לאורח, תועלת ותכולה מעל המנעול. */
.join-card .join-benefit { margin: 0 auto 8px; max-width: 460px; font-size: 1.08rem; line-height: 1.6; color: var(--text, #3a3a3a); }
.join-card .join-inside { margin: 0 auto 12px; max-width: 460px; font-size: 1rem; font-weight: 700; color: var(--navy, #1a4a6b); }
.join-try { margin: 16px 0 0; font-size: 1rem; color: var(--text-light, #8a7a66); }
.join-try a { color: #2e7d51; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.free-start { margin: 0 0 22px; }
.free-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: #2e7d51; text-align: center; }
.free-sub { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.5; color: #8a7a66; text-align: center; }
.free-list { display: flex; flex-direction: column; gap: 10px; }
.free-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  padding: 14px 16px; background: #f4faf6; border: 1.5px solid #cfe6d8; border-radius: 16px;
  font-family: inherit; cursor: pointer; transition: transform 0.1s, border-color 0.12s;
}
.free-item:hover { transform: translateY(-1px); border-color: #7fb894; }
.free-item .item-ico { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #e2f1e8; color: #2e7d51; border-radius: 11px; }
.free-item .name { flex: 1; font-size: 1.02rem; font-weight: 700; color: var(--navy, #1a4a6b); line-height: 1.35; }
.free-item .chev { flex-shrink: 0; color: #8fae9c; }
.free-item.hidden { display: none; }
.free-more {
  display: block; margin: 10px auto 0; padding: 8px 18px;
  background: none; border: 1.5px solid #cfe6d8; border-radius: 50px;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; color: #2e7d51; cursor: pointer;
}
.free-more:hover { background: #f4faf6; }

/* כותרת-קבוצה ברשימת התקלות השטוחה, לא לחיצה, מסדרת את התקלות הקונקרטיות מתחתיה. */
.fault-group-head { display: flex; align-items: center; font-size: 1.05rem; font-weight: 800; color: var(--navy, #1a4a6b); margin: 16px 6px 2px; padding-top: 12px; border-top: 1.5px solid var(--border, #e8e0d6); }
.fault-group-head:first-child { border-top: none; padding-top: 0; margin-top: 4px; }
/* כרטיס מילוט ברשימת התקלות, גוון חם נבדל, לא עוד פתרון. */
.cat-btn.escape { background: #fdf0e6; border-color: #f0c9a8; }
.cat-btn.escape:hover { border-color: var(--orange-deep, #e8854a); }
.cat-btn.escape .ico { background: #fbe2cf; color: var(--orange-deep, #e8854a); }
.cat-btn.escape .lbl { color: #a85a1f; }
/* תקלה נעולה ברשימה (בבנק, מתוכנן לעתיד), לא לחיצה, עם תגית "ייפתח בקרוב" באותה שורה. */
.cat-btn.locked { cursor: default; opacity: 0.72; background: #f6f1ea; border-style: dashed; }
.cat-btn.locked:hover { transform: none; box-shadow: none; border-color: var(--border, #e8e0d6); }
.cat-btn.locked .ico { background: #efe8df; color: #a8967e; }
.cat-btn.locked .lbl { color: var(--text-light, #8a7a66); }
.cat-btn .lock-when { flex-shrink: 0; }

/* רשימת התקלות השטוחה בתוך קטגוריה */
.item-list { display: flex; flex-direction: column; gap: 14px; }

/* ברכה אישית דו-שורתית (שלום [שם] / מה נעשה היום) */
.gate-hello { line-height: 1.25; }

/* ── שורת החיפוש בדף הבית (16/9/2026) ──
   שדה רחב וגלוי מתחת לברכה ומעל שלושת הכרטיסים. עומר עצמו לא מצא פריט שיושב
   עמוק בעץ, ולכן זה שדה ולא אייקון ולא כפתור צף. התוצאות נפתחות מתחתיו. */
.gate-search { margin: 0 0 20px; }
.gs-box {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fff; border: 2px solid var(--border, #e8e0d6); border-radius: 16px;
}
.gs-box:focus-within { border-color: #e8854a; }
.gs-box svg { flex: 0 0 auto; color: #8a7a66; }
.gs-input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1.05rem; color: inherit;
}
.gs-input::placeholder { color: #a99b88; }
.gs-input::-webkit-search-cancel-button { cursor: pointer; }
.gs-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gs-results[hidden] { display: none; }
.gs-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; cursor: pointer;
  padding: 12px 14px; background: #fff; border: 1.5px solid var(--border, #e8e0d6); border-radius: 14px;
  font-family: inherit; font-size: 1.02rem; font-weight: 700; color: #1a4a6b;
}
.gs-item:hover { border-color: #e8854a; }
.gs-item .name { flex: 1 1 auto; }
.gs-empty { margin: 8px 2px 0; color: #8a7a66; font-size: 0.95rem; text-align: center; }

/* שורת מיקום (פירור לחם בשפת אדם), מופיעה מהרמה השנייה בעץ. הלחיצים הם קישורי
   נייבי עם קו תחתון עדין, ה-affordance הכי מוכר לקהל מבוגר (קונצנזוס Gemini + GPT
   6/7, במקום צ'יפים שהרגישו מגושמים). הנוכחי טקסט אפור בלי קו, לא לחיץ. */
.loc-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 3px; margin: 2px 0 12px;
}
.loc-crumb {
  display: inline-block; font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--navy, #1a4a6b); background: none; border: none;
  padding: 11px 7px; border-radius: 8px; cursor: pointer; line-height: 1.2;
}
button.loc-crumb {
  text-decoration: underline;
  text-decoration-color: rgba(26,74,107,0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
button.loc-crumb:hover { color: var(--orange-deep, #e8854a); text-decoration-color: var(--orange-deep, #e8854a); }
.loc-crumb.loc-current { color: var(--text-light, #8a7a66); font-weight: 700; cursor: default; text-decoration: none; }
/* מפריד קטן ועדין, לא מתחרה בקישורים (עצת GPT). */
.loc-sep { color: rgba(232,133,74,0.7); font-weight: 700; font-size: 0.85em; }
/* "דף הבית", כפתור מלא ובולט ולא פירור טקסט (עומר, 6/8/2026). מבוגר לא מזהה
   נתיב ניווט ולא יודע שאפשר ללחוץ עליו, לכן הוא נאלץ ללחוץ "חזרה" כמה פעמים.
   כפתור אחד שנראה כמו כפתור מחזיר אותו הביתה מכל מקום, בלחיצה אחת.
   יושב בשורה נפרדת מעל הנתיב, כדי שלא יתחרה בו ולא ייבלע בתוכו. */
.loc-crumb.loc-home {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--navy, #1a4a6b); color: #fff; font-weight: 800; font-size: 1.02rem;
  padding: 11px 20px; border-radius: 50px; text-decoration: none;
  box-shadow: 0 3px 10px rgba(26,74,107,0.22);
}
.loc-crumb.loc-home span { text-decoration: none; }
.loc-crumb.loc-home:hover { background: #14405e; }
.loc-crumb.loc-home svg { width: 19px; height: 19px; }
/* שורת הכפתור, נפרדת מהנתיב עצמו. */
/* align-items:stretch כדי שעיגול החזרה יקבל את גובה דף הבית במדויק ולא מספר
   קשיח. גובה דף הבית נגזר מגובה שורת הטקסט (1.02rem כפול 1.2 ועוד 22 ריפוד),
   כלומר 41.6 פיקסל, ומספר קשיח היה יוצא גבוה בשניים וחצי (עומר, 9/8/2026). */
.loc-home-row { display: flex; justify-content: center; align-items: stretch; gap: 10px; margin: 2px 0 10px; }

/* עיגול חזרה, יורד שלב אחד (עומר, 9/8/2026, "עיגול קטן עם חץ חזרה ליד דף הבית").
   בלי מילה כתובה, כדי שלא יתחרה בדף הבית.
   אותה נראות בדיוק כמו דף הבית, אותו רקע נייבי ואותה הצללה, רק בעיגול (עומר,
   "הוא צריך להיראות אותו דבר, פשוט מהצד השני שלו"). יושב מימין לדף הבית, כי
   בממשק מימין לשמאל זה הצד שממנו חוזרים.
   קיים בעיקר בשביל הדסקטופ, שם אין כפתור חזרה של טלפון והיה רק דף הבית.
   42 על 42 קבוע, מול 41.6 המחושב של דף הבית. ההפרש הוא פחות מחצי פיקסל ולא
   נראה לעין. ניסיון לגזור את הרוחב מגובה מתוח (aspect-ratio) יצא אליפסה, כי
   הרוחב נפתר מהתוכן לפני שהגובה נמתח (עומר, 9/8/2026, "החץ התעוות"). */
.loc-back {
  flex: 0 0 auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--navy, #1a4a6b); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  box-shadow: 0 3px 10px rgba(26,74,107,0.22);
  transition: background-color .15s;
}
.loc-back svg { width: 21px; height: 21px; display: block; }
.loc-back:hover { background: #14405e; }
.loc-back:focus-visible { outline: 3px solid var(--orange-deep, #e8854a); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .loc-back { transition: none; } }

/* ירידה שלב אחד. משנית בכוונה, היא לא מתחרה בדף הבית. אומרת לאן היא מובילה
   ולא רק "חזרה", כי "חזרה" הבטיח את הדף הקודם בדפדפן ועשה משהו אחר. */
.step-back {
  display: flex; align-items: center; gap: 6px; margin: 0 auto 10px;
  background: none; border: none; padding: 6px 10px;
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  color: var(--navy, #1a4a6b); cursor: pointer;
}
.step-back span { text-decoration: underline; text-decoration-color: rgba(26,74,107,0.35); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.step-back:hover { color: var(--orange-deep, #e8854a); }
.step-back:hover span { text-decoration-color: var(--orange-deep, #e8854a); }
.step-back svg { width: 16px; height: 16px; }

/* ── ליווי צבעוני של המסע (קונצנזוס 6/7) ──
   פס זהות דק בראש כל מסך פנימי + תגית מסע קטנה מעל הכותרת. צבע לפי השער:
   תקלה=טורקיז, גילוי=חרדל, מסלולים=כחול עמוק. התוכן עצמו נשאר נייבי. */
body[data-intent="fix"]:not([data-gate="1"]) #stage::before,
body[data-intent="learn"]:not([data-gate="1"]) #stage::before,
body[data-intent="paths"]:not([data-gate="1"]) #stage::before {
  content: ""; display: block; height: 5px; max-width: 640px;
  margin: 0 auto 14px; border-radius: 6px;
}
body[data-intent="fix"]:not([data-gate="1"]) #stage::before { background: linear-gradient(90deg, #1682a5, #5db4d0); }
body[data-intent="learn"]:not([data-gate="1"]) #stage::before { background: linear-gradient(90deg, #d4920a, #e8bb55); }
body[data-intent="paths"]:not([data-gate="1"]) #stage::before { background: linear-gradient(90deg, #3563c4, #7d9fe3); }
.j-kicker { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.92rem; font-weight: 800; margin: 0 0 2px; }
.j-kicker svg { width: 17px; height: 17px; flex-shrink: 0; }
.j-kicker.k-fix { color: #1682a5; }
.j-kicker.k-learn { color: #d4920a; }

/* מעבר עדין בין שלבי העץ (drill-down), דעיכה פלוס החלקה קלה מלמטה.
   ~220ms, עקביות על פני ראווה (קונצנזוס Gemini + GPT). מכבד reduce-motion. */
@keyframes gateIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.stage > * { animation: gateIn 0.22s ease-out both; }
@media (prefers-reduced-motion: reduce) { .stage > * { animation: none; } }

/* ═══ "הדברים שלי", שכבה אישית למשתמש מחובר (שמורים + ראיתי לאחרונה) ═══
   מופיעה בבית מתחת לשערים, מוסתרת לגמרי כשריקה. שורות אופקיות נגללות של
   צ'יפים. קונצנזוס Gemini + GPT 13/6/2026, פשוט, זוכר ורגוע, לא "חכם". */
.home-personal { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border, #e8e0d6); display: flex; flex-direction: column; gap: 22px; }
.hp-row { display: flex; flex-direction: column; gap: 10px; }
.hp-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.hp-title svg { width: 20px; height: 20px; color: var(--orange-deep, #e8854a); }
/* חיצי דפדוף גדולים בכותרת השורה (כמו במודל התלת-ממדי). RTL, "הקודמים" מצביע
   ימינה (flip), "הבאים" שמאלה. swipe במובייל עובד דרך גלילה טבעית מתחתם. */
.hp-nav { display: flex; gap: 8px; flex-shrink: 0; }
.hp-arrow { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1.5px solid var(--border, #e8e0d6); color: var(--navy, #1a4a6b); cursor: pointer; box-shadow: 0 2px 8px rgba(26,74,107,0.1); transition: border-color 0.12s, background 0.12s; }
.hp-arrow:hover { border-color: var(--orange-deep, #e8854a); background: #fdf3e9; }
.hp-arrow svg { width: 22px; height: 22px; }
.hp-prev svg { transform: scaleX(-1); }
/* תצוגת הקרוסלה, גלילה אופקית בלי סקרולבר גלוי. snap להצגת 2 בכל רגע. */
.hp-view { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hp-view::-webkit-scrollbar { display: none; }
.hp-view.is-scroll { scroll-snap-type: x mandatory; }
.hp-track { display: flex; gap: 10px; padding: 2px; }
.hp-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px;
  padding: 10px 14px; background: #fff; border: 1.5px solid var(--border, #e8e0d6); border-radius: 14px;
  font-family: inherit; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s;
}
.hp-view:not(.is-scroll) .hp-chip { flex: 1 1 0; }
.hp-view.is-scroll .hp-chip { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; }
.hp-chip:hover { border-color: var(--orange-deep, #e8854a); box-shadow: 0 4px 14px rgba(26,74,107,0.08); }
.hp-chip .ico { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #eef5fb; color: #1a4a6b; border-radius: 10px; }
.hp-chip .ico svg { width: 20px; height: 20px; }
.hp-chip .lbl { font-size: 0.98rem; font-weight: 700; color: var(--navy, #1a4a6b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* כפתור "שמור לי" בשער 3 (כוכב). מסומן = כוכב מלא כתום. רק למשתמש מחובר. */
.save-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  min-height: 46px; padding: 9px 20px;
  background: #fff; border: 1.5px solid var(--border, #e8e0d6); border-radius: 50px;
  font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--navy, #1a4a6b);
  cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.save-btn .ico { display: flex; }
.save-btn .ico svg { width: 22px; height: 22px; }
.save-btn:hover { border-color: var(--orange-deep, #e8854a); }
.save-btn.is-saved { color: var(--orange-deep, #e8854a); border-color: var(--orange-deep, #e8854a); background: #fdf3e9; }
.save-btn.is-saved .ico svg { fill: currentColor; }


/* צ'יפ שמור עם הסרה ישירה מהבית, גוף הצ'יפ פותח, כוכב בקצה (אזור נפרד עם
   קו מפריד, יעד מגע 48px) מסיר אחרי אישור. קונצנזוס Gemini + GPT 13/6/2026. */
.hp-chip--save { padding: 0; overflow: hidden; }
.hp-chip--save .hp-open {
  display: flex; align-items: center; flex: 1; min-width: 0;
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 10px 14px; min-height: 58px; text-align: right;
}
.hp-unsave {
  flex-shrink: 0; width: 46px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-inline-start: 1px solid var(--border, #e8e0d6);
  color: #e8a93a; cursor: pointer;
}
.hp-unsave svg { width: 22px; height: 22px; fill: currentColor; }
.hp-unsave:hover { background: #fdf3e9; }

/* חלונית אישור (הסרה משמורים), "לא, להשאיר" בולט כברירת המחדל הבטוחה. */
.gate-confirm { position: fixed; inset: 0; background: rgba(26,74,107,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.gate-confirm-card { background: #fff; border-radius: 20px; padding: 26px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.gate-confirm-q { font-size: 1.3rem; font-weight: 800; color: var(--navy, #1a4a6b); margin: 0 0 8px; }
.gate-confirm-sub { font-size: 1rem; color: #5a4a36; margin: 0 0 22px; line-height: 1.5; }
.gate-confirm-btns { display: flex; flex-direction: column; gap: 10px; }
.gate-cbtn { min-height: 52px; border-radius: 14px; font-family: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; border: 2px solid; }
.gate-cbtn.keep { background: var(--navy, #1a4a6b); color: #fff; border-color: var(--navy, #1a4a6b); }
.gate-cbtn.remove { background: #fff; color: var(--text-light, #8a7a66); border-color: var(--border, #e8e0d6); }

/* ── מסלולי-מטרה (Course Designer, paths.json) ───────────────────────
   כניסת "מסלולים" בבית + overlay המסע. חם, גדול, רגוע לקהל 50-75. */
.home-paths { max-width: 560px; margin: 22px auto 0; }
.home-paths .hp-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; color: var(--navy, #1a4a6b); margin: 0 0 12px; }
.home-paths .hp-title svg { width: 20px; height: 20px; }
.paths-list { display: flex; flex-direction: column; gap: 14px; }
/* כרטיס מסלול ברשימה, אותה שפה בדיוק כמו פריט (item-btn), לבן, גבול, ריחוף מרים.
   הכל במערכת נראה אותו דבר (עומר 6/7), בלי כרטיסים כהים חריגים. */
.path-card-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: right;
  min-height: 84px; padding: 18px 22px;
  background: #fff; border: 2px solid var(--border, #e8e0d6); border-radius: 20px;
  font-family: inherit; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, border-color 0.12s;
}
.path-card-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,74,107,0.12); border-color: #1a4a6b55; }
.path-card-btn .ico { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #e9effc; color: #3563c4; }
.path-card-btn .txt { display: flex; flex-direction: column; flex: 1; gap: 3px; }
.path-card-btn .lbl { font-size: 1.2rem; font-weight: 800; color: var(--navy, #1a4a6b); }
.path-card-btn .sub { font-size: 0.9rem; font-weight: 500; color: var(--text-light, #8a7a66); line-height: 1.5; }
.path-card-btn .chev { color: var(--text-light, #b8a890); flex-shrink: 0; }

.path-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(20,30,45,0.55); padding: 24px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.path-card {
  background: var(--cream, #fdf8f2); width: 100%; max-width: 640px; border-radius: 22px;
  padding: 26px 26px 34px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin: auto;
}
.path-close {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding: 8px 16px; min-height: 44px; background: #fff; border: 1.5px solid var(--border, #e8e0d6);
  border-radius: 50px; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--navy, #1a4a6b); cursor: pointer;
}
.path-close svg { transform: scaleX(-1); }
.path-eyebrow { color: #3563c4; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em; }
.path-title { font-size: 1.55rem; font-weight: 900; color: var(--navy, #1a4a6b); margin: 4px 0 10px; line-height: 1.25; }
.path-goal {
  background: #fff; border: 1.5px solid var(--border, #e8e0d6); border-radius: 14px;
  padding: 14px 18px; font-size: 1.02rem; font-weight: 600; color: var(--navy, #1a4a6b); line-height: 1.6; margin: 0 0 18px;
}
.path-voice {
  background: #fdf3ea; border-right: 4px solid var(--orange-deep, #e8854a); border-radius: 10px;
  padding: 16px 18px; font-size: 1rem; line-height: 1.9; color: #4a3f33; margin: 16px 0;
}
.path-steps { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
/* צעד במסלול, מרגיש כמו פריט במערכת, לבן, גבול 2px, ריחוף מרים, תגית סטטוס בכותרת. */
.path-step {
  display: flex; gap: 16px; background: #fff; border: 2px solid var(--border, #e8e0d6);
  border-radius: 20px; padding: 24px 22px;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.12s;
}
.path-step:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,74,107,0.12); border-color: #1a4a6b55; }
.path-step-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: #fdece0; color: var(--orange-deep, #e8854a);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.15rem;
}
.path-step-body { flex: 1; min-width: 0; }
.path-step-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.15rem; font-weight: 800; color: var(--navy, #1a4a6b); margin-bottom: 6px; }
.path-step-name { flex: 1; min-width: 60%; }
.path-step-why { font-size: 0.97rem; line-height: 1.7; color: #5a4f42; margin-bottom: 10px; }
.path-step-action { font-size: 0.97rem; font-weight: 700; color: var(--navy, #1a4a6b); margin-bottom: 12px; }
/* צעד בבנק (ייפתח בקרוב), מעומעם ומקווקו כמו פריט נעול. צעד להצטרפות, גבול חם. */
.path-step.locked { background: #f6f1ea; border-style: dashed; opacity: 0.8; }
.path-step.locked:hover { transform: none; box-shadow: none; border-color: var(--border, #e8e0d6); }
.path-step.locked .path-step-name, .path-step.locked .path-step-action { color: var(--text-light, #8a7a66); }
.path-step.locked .path-step-num { background: #efe8df; color: #a8967e; }
.path-step.locked .path-step-done { display: none; }
/* צעד להצטרפות, גבול רגיל (הכתום רק בתגית עצמה, פחות רעש ויזואלי, עצת Gemini).
   הכרטיס כולו לחיץ ומוביל להצטרפות, כמו פריט נעול בשאר המערכת. */
.path-step.sublock { cursor: pointer; }
.path-step.sublock .path-step-done { display: none; }
/* כפתור פתיחת התרגול, אותה שפה כמו כפתור ההצטרפות (גרדיאנט חם, צל רך, ריחוף מרים).
   החץ פונה שמאלה כמו כל שאר הכפתורים במערכת (קדימה ב-RTL). */
.path-step-open {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f09a5e 0%, #e8854a 55%, #d9743a 100%); color: #fff;
  padding: 13px 26px; border-radius: 50px; font-size: 1rem; font-weight: 800; text-decoration: none;
  min-height: 50px; box-sizing: border-box; box-shadow: 0 5px 16px rgba(232,133,74,0.35);
  transition: transform 0.15s, box-shadow 0.2s;
}
.path-step-open:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(232,133,74,0.45); }
.path-step-open:active { transform: translateY(0); }
.path-step-done { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 0.9rem; font-weight: 600; color: #16a34a; }
.path-step-done svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .path-card { padding: 22px 18px 30px; border-radius: 18px; }
  .path-title { font-size: 1.35rem; }
}

/* מסך המסלול המשולב (במקום מודל), זורם בתוך ה-stage עם שמירה + המשך-מהצעד */
.path-screen { max-width: 640px; margin: 0 auto; padding: 8px 4px 44px; }
.path-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.path-screen-ico {
  width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: #e9effc; color: #3563c4;
}
.path-screen-ico svg { width: 28px; height: 28px; }
.path-screen-titles { flex: 1; }
.path-screen .path-title { margin: 2px 0 0; }
.path-resume {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px;
  padding: 12px 22px; background: #fff; border: 1.5px solid var(--orange-deep, #e8854a); border-radius: 50px;
  color: var(--orange-deep, #e8854a); font-family: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; min-height: 44px;
}
.path-resume svg { width: 18px; height: 18px; flex-shrink: 0; }
.path-resume:hover { background: #fdf3ea; }
.path-step.resume { border-color: var(--orange-deep, #e8854a); box-shadow: 0 0 0 3px rgba(232,133,74,0.15); }
/* ⭐ 18/10/2026, קופסת הקורס, למי שקנה קורס, בראש המסלול שלו. נבנית ב-js/gates/personalization.js, coursePanel */
.path-course {
  margin: 14px 0 6px; padding: 16px 18px;
  background: #fff; border: 2px solid var(--orange-deep, #e8854a); border-radius: 20px;
  box-shadow: 0 6px 22px rgba(232,133,74,0.14);
}
.path-course-title { color: #1a4a6b; font-size: 1.15rem; font-weight: 800; }
.path-course-until { margin-top: 4px; color: #4a5a6a; font-size: 1rem; }
.path-course-until b { color: #1a4a6b; }
.path-course-week { margin-top: 12px; color: #1a4a6b; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.path-course-list { margin: 8px 0 0; padding-inline-start: 22px; }
.path-course-list li { margin: 4px 0; color: #1a4a6b; }
.path-course-list button {
  background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 1rem; color: #1a4a6b;
  text-align: right; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px;
}
.path-course-go {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 48px; padding: 12px 28px;
  background: var(--orange-deep, #e8854a); color: #fff; border: none; border-radius: 50px;
  font-family: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer;
}
.path-course-go:hover { filter: brightness(0.95); }
/* ⭐ 17/10/2026, מצב טלפון שלב 3. "להמשיך בהדרכה" בבית, רק באפליקציה המותקנת, gates.js resumeCardHtml.
   כפתור גדול אחד בכתום, כי זה הדבר שהיא באה לעשות, ו"לא עכשיו" שקט לידו */
.resume-tut {
  max-width: 560px; margin: 4px auto 18px; padding: 18px 20px;
  background: #fff; border: 2px solid var(--orange-deep, #e8854a); border-radius: 22px;
  box-shadow: 0 6px 22px rgba(232,133,74,0.18);
}
.resume-tut-head { display: flex; align-items: center; gap: 8px; color: var(--orange-deep, #e8854a); font-size: 1rem; font-weight: 800; }
.resume-tut-head svg { width: 20px; height: 20px; flex-shrink: 0; }
.resume-tut-name { margin-top: 8px; color: #1a4a6b; font-size: 1.25rem; font-weight: 800; line-height: 1.35; }
.resume-tut-step { margin-top: 4px; color: #4a5a6a; font-size: 1rem; }
.resume-tut-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.resume-tut-go {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px;
  background: var(--orange-deep, #e8854a); color: #fff; border-radius: 50px;
  font-size: 1.1rem; font-weight: 800; text-decoration: none;
}
.resume-tut-skip {
  min-height: 48px; padding: 8px 12px; background: none; border: 0; cursor: pointer;
  color: #4a5a6a; font-family: inherit; font-size: 1rem; text-decoration: underline;
}
.path-step-here { display: inline-block; margin-right: 8px; padding: 2px 10px; background: #fdece0; color: var(--orange-deep, #e8854a); border-radius: 50px; font-size: 0.72rem; font-weight: 800; vertical-align: middle; }

/* שער המסלולים כשער שלישי בשער 1, ורשימת המסלולים בשער 2 */
.intent-btn.paths { border-color: #3563c433; }
.intent-btn.paths .ico { background: #e9effc; color: #3563c4; }
.intent-btn.paths .ico svg { width: 32px; height: 32px; }
.gate-paths { max-width: 560px; margin: 0 auto; }
.path-card-btn .ico svg { width: 26px; height: 26px; }
/* כותרת "צעד אחרי צעד" (עקבות, הקונספט של המערכת) מעל צעדי המסלול */
.path-steps-head { display: flex; align-items: center; gap: 9px; margin: 20px 0 2px; color: var(--orange-deep, #e8854a); font-size: 0.95rem; font-weight: 800; }
.path-steps-head svg { width: 22px; height: 22px; flex-shrink: 0; }

/* אות "מערכת חיה שגדלה" (מסך הבית). כרטיס נקי + נקודת חיים כתומה בפעימה עדינה מאוד. */
/* בלי מספר, הבטחה מתמשכת שמוכרת את המנוי (קונצנזוס Gemini+GPT, 11/7). */
.sys-growing { display: flex; align-items: center; gap: 14px; max-width: 460px; margin: 34px auto 4px; padding: 14px 20px; background: #fff; border: 1px solid rgba(26,74,107,0.08); border-radius: 16px; box-shadow: 0 4px 16px rgba(26,74,107,0.06); text-align: right; }
.sys-growing .sg-dot { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--orange-deep, #e8854a); position: relative; }
.sys-growing .sg-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--orange-deep, #e8854a); animation: sg-pulse 3s infinite ease-out; }
.sys-growing .sg-text { display: flex; flex-direction: column; gap: 3px; }
.sys-growing .sg-title { color: var(--navy, #1a4a6b); font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.sys-growing .sg-sub { color: #5a6b7a; font-size: 0.85rem; font-weight: 400; line-height: 1.45; }
@keyframes sg-pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sys-growing .sg-dot::after { animation: none; } }

/* ⭐⭐ שכבת הנגן החי, 6/9/2026. מחליפה את הסרטון המרונדר.
   ⚠ המידות באחוזים ולא בפיקסלים, כי אותה שכבה משרתת מסך וטלפון. */
.video-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ll-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  border-radius: 14px; display: none; }
.ll-ov.on { display: block; }
/* ⛔ cover ולא contain. הקנבס והווידאו שניהם 16:9, וזה מה שהרנדרר עשה. */
.ll-ov img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s; }
.ll-ov img.on { opacity: 1; }
/* ⭐ השקף מעל הכל, זו אתנחתא ולא שכבה מעל התוכן */
.ll-ov img.ll-slide { z-index: 3; transition: opacity .35s; }
/* ⭐ קטעי וידאו, 15/10/2026, live-layer.js. בדיוק כמו תמונה בשכבה, cover ודעיכה */
.ll-ov video.ll-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s; }
.ll-ov video.ll-clip.on { opacity: 1; }
/* ⭐⭐ הסיום, 14/10/2026, live-layer.js. מעל התמונות והשקף, מתחת לפס השליטה כדי שאפשר יהיה לנגן שוב.
   ⚠ רקע בצבע של סרטון הסיום, כדי שעד שהוא נטען לא רואים שחור. אותו צבע כמו בסוף ההרצאות. */
.ll-ov .ll-outro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s; z-index: 3; background: #0b1838; }
.ll-ov .ll-outro.on { opacity: 1; }
.ll-cap-wrap { position: absolute; inset-inline: 0; z-index: 2;
  display: flex; justify-content: center; }
.ll-cap { display: inline-block; max-width: 86%; text-align: center; line-height: 1.3;
  font-family: Rubik, "Segoe UI", Arial, sans-serif; color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,.5); }
.ll-cap:empty { display: none; }
.ll-cap .ll-act { color: var(--ll-active, #f6a67e); }

/* ⭐⭐ תגיות הפרקים בנגן, 6/9/2026. לוטש באותו יום לפי עומר.
   "פחות גבוהים, מינימליסטים. משמאל לימין, כי הסרטון רץ משמאל לימין." */
.video-box { flex-direction: column; align-items: center; gap: 10px; }

/* ⛔⛔ הרשימה רצה משמאל לימין, בניגוד לכל שאר האתר.
   עומר, **"זה לא כמו בעברית. הסרטון רץ משמאל לימין."**
   ⭐ הנימוק נכון וחשוב, התגיות הן ציר זמן ולא טקסט. הן חייבות לרוץ
   באותו כיוון כמו הסרגל של הנגן, אחרת המוקדם נראה מאוחר.
   ⚠ הכיוון חל על הסידור בלבד. הטקסט העברי בתוך כל תגית עדיין
   נקרא נכון, כי דו כיווניות עובדת ברמת הרצף ולא ברמת המכל. */
.ll-chapters { display: flex; direction: ltr; flex-wrap: wrap; gap: 6px;
  justify-content: flex-start; width: 100%; max-height: 96px;
  overflow-y: auto; padding: 2px; }
.ll-chapters[hidden] { display: none; }

/* ⭐⭐ מינימלי, ולבן. עומר, "הטקסט צריך להיות לבן לפי דעתי."
   ⛔⛔ **הפלטה הבהירה של האתר לא עובדת כאן.** התגיות יושבות על
   האוברליי הכהה של הנגן, ושם --text-mid האפור כמעט נעלם.
   ⭐ **הכלל, על רקע כהה קובעים צבעים לרקע הכהה ולא יורשים מהדף.** */
.ll-chap { display: inline-flex; align-items: center; gap: 6px; direction: ltr;
  background: transparent; border: 1px solid rgba(255,255,255,.32);
  border-radius: 50px; padding: 3px 11px; min-height: 30px;
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  color: #fff; cursor: pointer; transition: all .18s; }
.ll-chap:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
/* ⭐ 13px, הרצפה של האתר לקהל 50 עד 75. היה 11, 2/10/2026, מהבדיקה של צ'אט ההדרכה. */
.ll-chap-t { font-size: 0.8125rem; font-weight: 700; color: var(--orange, #f6a67e);
  direction: ltr; font-variant-numeric: tabular-nums; }

/* ⭐ הפרק המתנגן, מילוי לבן וטקסט כחול.
   ⛔ **לא כחול מלא.** כחול על רקע כהה כמעט נבלע, וזה בדיוק ההפך
   ממה שסימון "עכשיו" אמור לעשות. **על כהה, ההיפוך הוא הבולט.** */
.ll-chap.now { background: #fff; border-color: #fff; color: var(--navy, #1a4a6b); }
.ll-chap.now .ll-chap-t { color: var(--orange-deep, #e8854a); }

/* ⭐⭐ הסיכום. עומר, "הסיכום צריך להיות בצבע אחר."
   כתום על כהה נקרא היטב, וסוגר את המסע בלי להתחרות בלבן של הפעיל. */
.ll-chap.sum { border-color: var(--orange-deep, #e8854a); color: var(--orange, #f6a67e); }
.ll-chap.sum:hover { background: rgba(232,133,74,.18); }
.ll-chap.sum.now { background: var(--orange-deep, #e8854a); border-color: var(--orange-deep, #e8854a); color: #fff; }
.ll-chap.sum.now .ll-chap-t { color: #fff; }

/* ⚠ מובייל הוא כ-90 אחוז מהתעבורה, ושם האצבע צריכה יעד אמיתי.
   ⭐ לכן הגובה חוזר ל-44, למרות הבקשה למינימלי. **המינימליות היא
   במראה, לא ביכולת ללחוץ.** */
@media (max-width: 600px) {
  .ll-chapters { max-height: 150px; gap: 8px; }
  .ll-chap { min-height: 44px; padding: 8px 14px; font-size: 0.92rem; }
}
/* ⭐ 2/10/2026, יעד של 44 בכל מסך מגע ולא רק ברוחב טלפון.
   באייפד ברוחב 820 הפרקים נשארו בגובה 30. בעכבר אין שינוי. */
@media (pointer: coarse) {
  .ll-chapters { max-height: 150px; gap: 8px; }
  .ll-chap { min-height: 44px; }
}

/* ⭐⭐⭐ פס השליטה של הנגן החי, 6/9/2026. עוצב מחדש באותו יום.
   עומר, "הכפתורים מכוערים, מה זה הריבוע שנראה כמו סטופ, זה צריך להיות אסתטי."
   ⛔ פס הדפדפן מצויר בתוך אלמנט הווידאו, ולכן תמונה במסך מלא תמיד תכסה
   אותו. ⭐ הפס הזה חלק מהשכבה, ולכן הוא תמיד למעלה. */
.ll-bar { position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 14px; direction: ltr;
  padding: 10px 16px 12px; pointer-events: auto;
  background: linear-gradient(to top, rgba(6,12,22,.85), rgba(6,12,22,.45) 55%, transparent);
  opacity: 0; transition: opacity .22s ease; }
.video-stage:hover .ll-bar, .ll-bar:hover, .ll-bar:focus-within,
.ll-ov.paused .ll-bar { opacity: 1; }

/* ⭐ כפתורים נקיים, בלי מסגרת. האייקון הוא הכפתור. */
.ll-play, .ll-full { flex: 0 0 auto; border: 0; padding: 0; cursor: pointer;
  background: none; color: #fff; opacity: .9; transition: opacity .15s, transform .15s;
  display: flex; align-items: center; justify-content: center; }
.ll-play:hover, .ll-full:hover { opacity: 1; transform: scale(1.08); }
.ll-play svg { width: 26px; height: 26px; display: block; }
.ll-full svg { width: 21px; height: 21px; display: block; }
.ll-i-pause { display: none; }
.ll-play.on .ll-i-play { display: none; }
.ll-play.on .ll-i-pause { display: block; }

/* ⭐⭐ הסרגל. קו דק, פינות מעוגלות, ומתעבה בריחוף. */
.ll-prog { position: relative; flex: 1 1 auto; height: 18px; cursor: pointer;
  display: flex; align-items: center; }
.ll-track { position: absolute; inset-inline: 0; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.28); transition: height .15s; }
.ll-played { position: absolute; left: 0; height: 4px; width: 0; border-radius: 3px;
  background: var(--orange-deep, #e8854a); transition: height .15s; }
.ll-prog:hover .ll-track, .ll-prog:hover .ll-played { height: 6px; }

/* ⭐ סימוני הפרקים. עומר, "הפסים האלה בסרגל, למה?"
   ⚠ הם המבנה של הסרטון, אבל הם היו קווים לבנים בוטים.
   ⭐ עכשיו נקודות עדינות, נוכחות ולא צועקות. */
.ll-ticks { position: absolute; inset-inline: 0; height: 18px; pointer-events: none; }
.ll-ticks i { position: absolute; top: 7px; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.55); transform: translateX(-2px); }

/* ⭐ ידית עגולה בקצה ההתקדמות, מופיעה בריחוף. */
.ll-knob { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transform: translate(-50%, -50%) scale(0); transition: transform .15s; }
.ll-prog:hover .ll-knob { transform: translate(-50%, -50%) scale(1); }

.ll-time { flex: 0 0 auto; color: rgba(255,255,255,.92); font-size: 0.78rem;
  font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: .2px; }

@media (max-width: 600px) {
  /* ⚠ בטלפון אין ריחוף, והוא כ-90 אחוז מהתעבורה. */
  .ll-bar { opacity: 1; gap: 11px; padding: 8px 12px 10px; }
  .ll-play svg { width: 30px; height: 30px; }
  .ll-full svg { width: 23px; height: 23px; }
  .ll-knob { transform: translate(-50%, -50%) scale(1); }
}
/* ⭐ 2/10/2026, אזור לחיצה שקוף של 44 סביב ההפעלה והמסך המלא במסך מגע.
   ⭐ השוליים השליליים מחזירים את הפס לגובה שהיה לו. האייקון לא גדל והפס לא זז,
   רק האצבע מקבלת יעד אמיתי. היה 30 ו-23 בטלפון. */
@media (pointer: coarse) {
  .ll-play, .ll-full { min-width: 44px; min-height: 44px; margin: -7px; }
}