/* Campaigner — עמוד המוצר.
   יושב על המערכת העיצובית של האתר (css/style.css): אותם טוקנים, אותו ניווט,
   אותם כפתורים. כאן רק מה שייחודי לעמוד הזה.

   החתימה: הצ׳אט שמשחק את עצמו. המוצר *הוא* שיחה - משפט אחד והקמפיין באוויר -
   אז ה-hero לא מתאר את זה, הוא מבצע את זה. */

/* ---------- hero ----------
   הכותרת כאן ארוכה מזו שבבית ("משפט אחד בטלגרם." לעומת "העסק שלך עובד"),
   אז העמודה מתרחבת והגופן קטן - אחרת היא נשברת לשלוש שורות. */
.cg-hero .hero-in{align-items:center;grid-template-columns:1.15fr 1fr}
.cg-hero .display{font-size:clamp(2.2rem,4.4vw,3.6rem)}
/* פסקת ה-lead ב-hero נצמדת לימין (start) - שהקצה יתיישר עם הכותרת והכפתור,
   במקום המרכוז (margin auto) שיורש מכלל .lead הכללי. */
.cg-hero .lead{margin-inline:0}
.cg-tagline{color:var(--signal-ink);font-size:1.18rem;margin-block-start:14px}

/* כפתור ה-CTA בנאבט: טקסט מלא בדסקטופ, תווית קצרה במובייל - אחרת
   "בדוק אם זה מתאים לעסק שלך" גולש מעבר לרוחב, חונק את הלוגו ודוחף
   את הכפתור אל מחוץ למסך (ראה צילום המובייל). */
.ncta-short{display:none}
@media (max-width:620px){
  .nav-cta-btn{padding-inline:15px;font-size:.9rem}
  .ncta-full{display:none}
  .ncta-short{display:inline}
}

/* המילה המתחלפת בכותרת - הקלדה ומחיקה (js/campaigner.js מזין את הטקסט).
   בלי JS נשארת המילה הסטטית שב-HTML; הסמן מופיע רק כש-JS פעיל. */
.cg-rotate{display:inline-block}
.cg-rotate__word{white-space:nowrap}
.cg-rotate__caret{display:inline-block;width:2px;height:.9em;margin-inline-start:.08em;vertical-align:-.08em;background:currentColor;opacity:0}
.js .cg-rotate__caret{opacity:1;animation:cg-caret 1.05s step-end infinite}
@keyframes cg-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.js .cg-rotate__caret{animation:none;opacity:0}}

/* שורת המעבר מהכאב לפתרון - הצהרה בולטת אחת שמסמנת את הפניית הכיוון.
   גופן הכותרות (Trashim) נירש מברירת המחדל; כאן רק גודל, מרכוז וצבע. */
.pain-turn{margin-block-start:clamp(40px,5.5vw,64px);text-align:center;font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1.2;letter-spacing:-.01em;color:var(--signal-text);text-wrap:balance}

/* ---------- הצ׳אט ----------
   גובה קבוע + גלילה פנימית: ההודעות נערמות בלי להזיז את העמוד מתחת לאצבע. */
.cg-chat{position:relative;background:var(--console);border:1px solid var(--console-line);border-radius:20px;box-shadow:var(--shadow-dark);overflow:hidden;display:flex;flex-direction:column}
.cg-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;border-block-end:1px solid var(--console-line);background:var(--console-2)}
.cg-av{width:38px;height:38px;flex:none;border-radius:99px;background:var(--signal);display:grid;place-items:center;color:#fff}
.cg-av svg{width:20px;height:20px}
.cg-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.cg-who b{color:var(--console-fg);font-family:'Assistant',sans-serif;font-weight:700;font-size:.98rem}
.cg-who i{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--live);direction:ltr}
.cg-tg{margin-inline-start:auto;color:var(--console-dim);width:20px;height:20px;flex:none}
.cg-tg svg{width:100%;height:100%}

/* position:relative — כדי ש-offsetTop של ההודעות יימדד ביחס לגוף הצ׳אט.
   js/campaigner.js מסתמך על זה כדי לגלול אל ההודעה האחרונה שהוצגה. */
/* Assistant (סאנס נקי, כמה משקלים) במקום Trashim (כותרות, 700 בלבד) - כדי
   שהבועות ייראו כמו הודעות אמיתיות ולא ככותרת. חל על כל תוכן הצ'אט;
   תוויות ה-mono (TODAY / 2 HOURS LATER) מגדירות var(--mono) בעצמן וגוברות. */
.cg-body{position:relative;height:430px;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#33435a transparent;scrollbar-gutter:stable;font-family:'Assistant',sans-serif;background:#0e1621}
/* הצ'אט הוא flex column בגובה קבוע - בלי זה הפריטים מתכווצים כדי להיכנס
   לגובה, וכרטיס המודעה (overflow:hidden) קורס לקו דק. flex-shrink:0 שומר
   על גובהם המלא, והגוף גולל במקום לכווץ. */
.cg-body > *{flex-shrink:0}
.cg-body::-webkit-scrollbar{width:7px}
.cg-body::-webkit-scrollbar-thumb{background:#33435a;border-radius:99px}
.cg-body::-webkit-scrollbar-thumb:hover{background:#43587a}

/* צבעי טלגרם קלאסיים (dark) במקום לבן-על-כתום — לבקשת עידו.
   בעלת העסק = "היוצאת" (שמאל ב-RTL, כחול #2b5278 + ✓✓ כמו בטלגרם);
   הסוכן = "הנכנס" (ימין, אפור-כחול #182533). הכתום נשאר רק במבטאי
   מותג: אווטאר הכותרת וכפתור המודעה. */
.cg-m{max-width:82%;padding:9px 13px 7px;border-radius:15px;font-size:.97rem;line-height:1.55;font-weight:500}
.cg-m.out{align-self:flex-end;background:#2b5278;color:#fff;border-end-end-radius:4px}
.cg-m.in{align-self:flex-start;background:#182533;color:#eef3f8;border-end-start-radius:4px}
.cg-m.sys{align-self:center;max-width:100%;background:rgba(255,255,255,.07);color:#9fb2c4;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;direction:ltr;padding:4px 12px;border-radius:99px}

/* שעה + וי כפול בתוך הבועה, כמו בטלגרם. flex-end ב-RTL = הפינה השמאלית-תחתונה. */
.cg-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-block-start:3px;font-size:.66rem;line-height:1;opacity:.62;direction:ltr;font-family:'Assistant',sans-serif;font-weight:400}
.cg-meta svg{width:15px;height:10px;color:#6ab3f3;flex:none}

/* כרטיס המודעה שהסוכן שולח - תצוגה מקדימה של קריאטיב, כמו מודעת מטא:
   תמונה למעלה, קופי וכפתור מתחת. התמונה מסופקת ידנית ומופלת אל
   img/campaigner/ad-tuvav.jpg. עד שהיא נכנסת (או אם חסרה) - רקע הגרדיאנט
   של .cg-ad-shot מוצג, ו-onerror מסיר img שבור כדי שלא יופיע אייקון שבור. */
.cg-ad{align-self:flex-start;max-width:90%;width:100%;background:#182533;border:1px solid #22303f;border-radius:15px;border-end-start-radius:4px;overflow:hidden}
.cg-ad-shot{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#F7D9C6,#E7A7B0 55%,#C98BA8)}
.cg-ad-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cg-ad-badge{position:absolute;inset-block-start:11px;inset-inline-end:11px;background:rgba(20,17,24,.5);color:#fff;font-family:'Assistant',sans-serif;font-weight:600;font-size:.62rem;padding:3px 9px;border-radius:99px;backdrop-filter:blur(3px)}
.cg-ad-txt{padding:13px 15px 15px}
.cg-ad-primary{font-family:'Assistant',sans-serif;font-weight:500;font-size:.9rem;line-height:1.5;color:#eef3f8}
.cg-ad-foot{margin-block-start:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cg-ad-brand{display:flex;flex-direction:column;line-height:1.28;min-width:0}
.cg-ad-brand b{font-family:'Assistant',sans-serif;font-weight:700;font-size:.82rem;color:#eef3f8}
.cg-ad-brand span{font-size:.72rem;color:#8ca3b8}
.cg-ad-btn{flex:none;background:var(--signal);color:#fff;font-family:'Assistant',sans-serif;font-weight:600;font-size:.78rem;padding:8px 15px;border-radius:8px}

/* מחוון ההקלדה */
.cg-typing{align-self:flex-start;background:#182533;border-radius:15px;border-end-start-radius:4px;padding:14px 16px;display:flex;gap:4px}
.cg-typing i{width:6px;height:6px;border-radius:99px;background:#93ABC4;animation:cg-blink 1.3s ease-in-out infinite}
.cg-typing i:nth-child(2){animation-delay:.18s}
.cg-typing i:nth-child(3){animation-delay:.36s}
@keyframes cg-blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- שורת ההקלדה (Composer) בסגנון טלגרם ----------
   ההודעות של בעלת העסק "מוקלדות" כאן אות-אות לפני שהן נשלחות לשיחה -
   הדגמה חיה של המוצר: כותבים הודעה רגילה, הסוכן עושה את השאר. */
/* align-items:flex-end — כשהתיבה גדלה לשתי שורות, כפתור השליחה נשאר
   מיושר לתחתית (כמו טלגרם/וואטסאפ), לא באמצע. */
.cg-composer{display:flex;align-items:flex-end;gap:9px;padding:9px 12px;background:#17212b;border-block-start:1px solid #0e1621}
/* הטקסט עוטף לשורה חדשה ונשאר בתוך התיבה - התיבה גדלה לגובה במקום
   שהתוכן ייגלל אופקית וימשוך את התצוגה. word-break שובר גם מילה ארוכה. */
.cg-input{flex:1;position:relative;min-width:0;min-height:38px;line-height:22px;background:#242f3d;border-radius:19px;padding:8px 15px;font-family:'Assistant',sans-serif;font-size:.94rem;color:#eef3f8;white-space:normal;overflow-wrap:break-word;word-break:break-word}
.cg-ph{position:absolute;inset-inline-start:15px;inset-block-start:8px;color:#93ABC4;  /* light on the dark Telegram input (#242f3d) — ~5.7:1 */transition:opacity .2s}
.cg-composer.typing .cg-ph{opacity:0}
.cg-txt{display:inline}
.cg-caret2{display:inline-block;width:1.5px;height:1.05em;vertical-align:-.12em;background:#6ab3f3;margin-inline-start:1px;opacity:0}
.cg-composer.typing .cg-caret2{opacity:1;animation:cg-caret2 .95s step-end infinite}
@keyframes cg-caret2{50%{opacity:0}}
/* כפתור השליחה: אפור כשהשורה ריקה, נדלק כחול-טלגרם תוך כדי הקלדה,
   ומתכווץ רגע ב"שליחה". החץ מצביע לכיוון השיחה (שמאל ב-RTL). */
.cg-send{flex:none;width:38px;height:38px;display:grid;place-items:center;color:#5c718a;transition:color .25s,transform .18s}
.cg-send svg{width:21px;height:21px;transform:scaleX(-1)}
.cg-composer.typing .cg-send{color:#5eb5f7}
.cg-send.sent{transform:scale(.78)}

.cg-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-block-start:1px solid var(--console-line);background:var(--console-2)}
.cg-ft span{color:var(--console-dim);font-size:.82rem}
.cg-replay{background:none;border:1px solid var(--console-line);color:var(--console-dim);font:inherit;font-size:.82rem;padding:5px 12px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s,border-color .2s}
.cg-replay:hover{color:var(--console-fg);border-color:var(--console-dim)}
.cg-replay svg{width:13px;height:13px}

/* הצ׳אט מתנגן: כל שורה נכנסת כשתורה מגיע. בלי JS - הכל פשוט שם. */
.js .cg-body > *{opacity:0;transform:translateY(9px)}
.js .cg-body > .show{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}

/* רמז הגלילה — מופיע כשהנגינה מסתיימת והשיחה ארוכה מהחלון, ונעלם
   ברגע שמתחילים לגלול. pointer-events:none כדי לא לחסום את הצ'אט. */
.cg-scrollhint{position:absolute;inset-inline:0;bottom:114px;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;z-index:2}
/* כשהרמז דולק, הגוף מקבל ריפוד תחתון כדי שהצ'יפ יצוף על שטח ריק
   ולא על ההודעה האחרונה. נשאר גם אחרי הכיבוי - מונע קפיצת תוכן. */
.cg-body.hint-pad{padding-block-end:60px}
.cg-scrollhint.on{opacity:1;transform:none}
.cg-scrollhint span{display:inline-flex;align-items:center;gap:7px;background:rgba(14,22,33,.9);border:1px solid #2a3b4d;color:#bcd0e2;font-family:'Assistant',sans-serif;font-weight:600;font-size:.78rem;padding:7px 14px;border-radius:99px;backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.cg-scrollhint svg{width:13px;height:13px;animation:cg-nudge 1.6s ease-in-out infinite}
@keyframes cg-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.js .cg-typing{display:none}
.js .cg-typing.show{display:flex}

/* תת-כותרת רגילה מתחת לכותרת סקשן - טקסט נקי, לא הכרטיס הממוסגר של
   .lead (ש-בעמוד הזה חטוף לעיצוב טופס הלידים). בשימוש בראש #how. */
.shead-sub{margin-block-start:14px;color:var(--ink-mute);font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.5;text-wrap:balance}

/* ---------- הצינור: טיימליין עם מסילה. רצף אמיתי, ולכן ממוספר. ----------
   --fp = הריווח האנכי בכל שלב (למעלה ולמטה). המסילה שמחברת נקודה לבאה
   אחריה מתחילה במרכז הנקודה הנוכחית (--fp + 23 מראש השלב) ונמשכת בדיוק
   100% מגובה השלב - וכך נוגעת במרכז הנקודה הבאה, כי הריווח בכל שלב זהה.
   בזכות זה אין "זנב" שמשתלשל מתחת לנקודה האחרונה.

   ברירת המחדל (בלי JS) היא המצב המוגמר: מסילה כתומה מלאה ונקודות דלוקות.
   .js מאפס למצב הפתיחה, ו-.in מריץ את הגל מלמעלה למטה. */
.cg-flow{--fp:clamp(20px,2.6vw,30px);max-width:720px;margin:clamp(26px,4vw,46px) auto 0;padding:0;list-style:none}
.cg-fstep{position:relative;display:grid;grid-template-columns:46px 1fr;gap:clamp(16px,2.5vw,26px);padding-block:var(--fp)}

/* המסילה: קו בסיס דהוי (::before) + קו כתום שנצבע (::after). שניהם מהנקודה לבאה. */
.cg-fstep:not(:last-child)::before,
.cg-fstep:not(:last-child)::after{
  content:"";position:absolute;inset-inline-start:22px;width:2px;border-radius:2px;
  inset-block-start:calc(var(--fp) + 23px);height:100%;
}
.cg-fstep:not(:last-child)::before{background:var(--rule-strong)}
.cg-fstep:not(:last-child)::after{background:var(--signal);transform:scaleY(1);transform-origin:top}
.js .cg-fstep:not(:last-child)::after{transform:scaleY(0)}
.js .cg-flow.in .cg-fstep:not(:last-child)::after{animation:cg-fill .24s linear forwards}

/* הנקודה הממוספרת. z-index כדי שתשב מעל קצות המסילה - חרוזים על חוט. */
.cg-fnum{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--signal-wash);border:2px solid var(--signal);color:var(--signal-ink);
  font-family:var(--mono);font-size:.8rem;direction:ltr}
.js .cg-fnum{background:var(--card);border-color:var(--rule-strong);color:var(--ink-mute);transition:border-color .45s ease,color .45s ease,background .45s ease}
.js .cg-flow.in .cg-fnum{background:var(--signal-wash);border-color:var(--signal);color:var(--signal-ink)}

.cg-ftext{padding-block-start:9px}
.cg-ftext h3{font-size:clamp(1.12rem,1.7vw,1.28rem);color:var(--ink)}
.cg-ftext p{color:var(--ink-mute);margin-block-start:7px;line-height:1.68;max-width:58ch}

@keyframes cg-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* הגל: כל נקודה נדלקת כשהצבע מגיע אליה */
.js .cg-flow.in .cg-fstep:nth-child(1) .cg-fnum{transition-delay:.10s}
.js .cg-flow.in .cg-fstep:nth-child(2) .cg-fnum{transition-delay:.34s}
.js .cg-flow.in .cg-fstep:nth-child(3) .cg-fnum{transition-delay:.58s}
.js .cg-flow.in .cg-fstep:nth-child(4) .cg-fnum{transition-delay:.82s}
.js .cg-flow.in .cg-fstep:nth-child(5) .cg-fnum{transition-delay:1.06s}
.js .cg-flow.in .cg-fstep:nth-child(6) .cg-fnum{transition-delay:1.30s}
.js .cg-flow.in .cg-fstep:nth-child(7) .cg-fnum{transition-delay:1.54s}
.js .cg-flow.in .cg-fstep:nth-child(1)::after{animation-delay:.10s}
.js .cg-flow.in .cg-fstep:nth-child(2)::after{animation-delay:.34s}
.js .cg-flow.in .cg-fstep:nth-child(3)::after{animation-delay:.58s}
.js .cg-flow.in .cg-fstep:nth-child(4)::after{animation-delay:.82s}
.js .cg-flow.in .cg-fstep:nth-child(5)::after{animation-delay:1.06s}
.js .cg-flow.in .cg-fstep:nth-child(6)::after{animation-delay:1.30s}

/* ---------- טבלת השוואה ----------
   עמודת Campaigner היא העמודה השנייה במקור (label, us, agency, diy),
   ולכן מודגשת דרך :nth-child(2). הטבלה גוללת לצדדים במסך צר. */
.cmp-wrap{max-width:900px;margin-inline:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:640px;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 18px;text-align:start;vertical-align:middle;font-size:.98rem}
.cmp thead th{font-family:'Assistant',sans-serif;font-weight:700;color:var(--ink-mute);font-size:1rem;border-block-end:2px solid var(--rule)}
.cmp tbody th{color:var(--ink);font-family:'Assistant',sans-serif;font-weight:700;font-size:.96rem;white-space:nowrap}
.cmp tbody td{color:var(--ink-mute)}
.cmp tbody tr{border-block-end:1px solid var(--rule)}
.cmp tbody tr:last-child{border-block-end:none}
.cmp-corner{border:none}

/* ✓ / ✗ - הניגוד שמדגיש את הפער: Campaigner חי (כתום), השאר דוהה (אפור). */
.cmp-ck,.cmp-x{display:inline-block;width:16px;height:16px;margin-inline-end:8px;vertical-align:-3px}
.cmp-ck{color:var(--signal)}
.cmp-x{color:var(--ink-faint);opacity:.55}
.cmp td.lose{color:var(--ink-faint)}

/* העמודה המודגשת - מובלטת יותר: פס כתום עבה, wash, מסגרת ברורה. */
.cmp th:nth-child(2),.cmp td:nth-child(2){background:var(--signal-wash);border-inline:1px solid rgba(255,107,53,.3)}
.cmp thead th:nth-child(2){color:var(--signal-ink);border-block-start:4px solid var(--signal);border-block-end-color:var(--signal);font-size:1.1rem}
.cmp tbody td:nth-child(2){color:var(--ink);font-family:'Assistant',sans-serif;font-weight:600}
.cmp tbody tr:last-child td:nth-child(2){border-block-end:1px solid rgba(255,107,53,.3)}
.cmp-usmark{display:inline-flex;vertical-align:-3px;margin-inline-end:7px;color:var(--signal)}
.cmp-usmark svg{width:18px;height:18px}

/* שורת העלות - הפאנץ'. מספרים גדולים, פס עליון שמפריד אותה. */
.cmp-cost th,.cmp-cost td{padding-block:18px;border-block-start:2px solid var(--rule-strong)}
.cmp-price{font-family:'Assistant',sans-serif;font-weight:800;font-size:1.28rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.cmp-cost td:nth-child(2) .cmp-price{color:var(--signal-ink)}
.cmp-sub{display:block;margin-block-start:3px;font-size:.76rem;font-weight:400;color:var(--ink-faint)}

/* קאלאאוט הפער - הצהרת הפאנץ' מתחת לטבלה. */
.cmp-gap{max-width:660px;margin:clamp(28px,3.5vw,40px) auto 0;text-align:center;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;color:var(--ink);text-wrap:balance}
.cmp-gap b{color:var(--signal)}

/* ---------- מה אתה בעצם שולח ---------- */
.cg-says{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-block-start:34px}
.cg-say{background:var(--console);color:var(--console-fg);border-radius:16px;border-end-start-radius:5px;padding:12px 17px;font-size:.98rem;box-shadow:var(--shadow-dark)}

/* CTA ממורכז בתחתית סקשן — פותח את השאלון (data-lead) כמו שאר הכפתורים */
.cg-cta{display:flex;justify-content:center;margin-block-start:clamp(30px,4.5vw,46px)}

/* ---------- הוכחה: המספרים האמיתיים (Case Study) ----------
   באנר כהה בין הפתרון להמלצות: המספרים מהחשבון שלנו כהוכחה ל"לידים
   זולים", ואחריהם צילום מסך. ל-.h ניתן כאן צבע בהיר (כמו ב-#book),
   כי ברירת המחדל שלו כהה והוא היה נעלם על רקע כהה. שדה .proof-shot
   מסיר את עצמו אם התמונה עוד לא הועלתה (onerror) - בלי אייקון שבור. */
#proof .h{color:var(--console-fg)}
.proof-kicker{display:inline-block;font-family:'Assistant',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--signal)}
.proof-lead{max-width:560px;margin:14px auto 0;text-align:center;color:var(--console-dim);font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.6}
.proof-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.4vw,24px);margin-block-start:clamp(30px,4vw,46px)}
.pstat{flex:1 1 200px;max-width:270px;background:var(--console-2);border:1px solid var(--console-line);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,34px) 20px;text-align:center}
.pstat-num{display:block;font-family:'Assistant',sans-serif;font-weight:800;font-size:clamp(2.7rem,6.5vw,4.2rem);line-height:1;letter-spacing:-.02em;color:var(--signal);direction:ltr}
.pstat-cur{font-size:.46em;font-weight:700;margin-inline-start:3px;vertical-align:.12em}
.pstat-label{display:block;margin-block-start:12px;color:var(--console-dim);font-family:'Assistant',sans-serif;font-weight:600;font-size:clamp(.94rem,1.4vw,1.04rem);line-height:1.4}
.proof-shot{max-width:760px;margin:clamp(30px,4vw,44px) auto 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--console-line);box-shadow:var(--shadow-dark);background:var(--console-2)}
.proof-shot img{display:block;width:100%;height:auto}
.proof-cap{padding:11px 16px;text-align:center;color:var(--console-dim);font-family:'Assistant',sans-serif;font-size:.84rem}

/* ---------- למי זה מתאים ----------
   שבע נקודות זיהוי בשתי עמודות (עמודה אחת במובייל), כל אחת עם וי כתום. */
/* רשימה אווררית בעמודה אחת: לכל שורה וו קצר ומודגש (סריקה מהירה) מעל
   המשפט המלא בגוון מרוכך - כך שטקסט "עמוס" נקרא בלי להעמיס. אייקון ייחודי
   כעוגן, קווי הפרדה דקים, והרבה אוויר. השורות נחשפות בהדרגה בגלילה
   (js/campaigner.js מוסיף .in במדרגות) - לא הכל בבת אחת. */
.fit-list{max-width:720px;margin:clamp(32px,4.5vw,52px) auto 0;padding:0;list-style:none}
.fit-item{display:flex;align-items:flex-start;gap:18px;padding:clamp(18px,2.6vw,26px) clamp(6px,1.6vw,16px);border-radius:16px}
.fit-item + .fit-item{border-block-start:1px solid var(--rule)}
/* אריח אייקון ייחודי לכל שורה - נצבע כתום מלא במעבר עכבר */
.fit-ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--signal-wash);color:var(--signal);transition:background .25s ease,color .25s ease,transform .25s ease}
.fit-ic svg{width:26px;height:26px}
.fit-item:hover .fit-ic{background:var(--signal);color:#fff;transform:scale(1.06)}
.fit-tx{min-width:0;padding-block-start:3px}
/* גופן הכותרות של האתר (Trashim CLM) נירש מ-.page - כמו כל כותרת בעמוד,
   ולא סאנס גנרי. Trashim הוא 700 בלבד, אז אין override של font-family. */
.fit-hook{display:block;font-weight:700;font-size:clamp(1.14rem,1.7vw,1.32rem);color:var(--ink);line-height:1.3;letter-spacing:-.01em;transition:color .25s ease}
.fit-item:hover .fit-hook{color:var(--signal-ink)}
.fit-desc{display:block;margin-block-start:6px;color:var(--ink-mute);font-size:.97rem;line-height:1.62}
.fit-turn{margin-block-start:clamp(34px,4.5vw,52px);text-align:center;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.3;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}

/* חשיפה מדורגת בגלילה - מופעל רק עם JS; בלי JS הכל גלוי (fallback). */
.js .fit-item{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js .fit-item.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .fit-item{opacity:1;transform:none;transition:none}}

/* ---------- שאלון הלידים (סקשן היומן) ----------
   כרטיס בהיר במרכז הסקשן הכהה: שאלה אחת בכל פעם, פס התקדמות למעלה.
   כל השאלון הוא שיפור JS. בלי JS הוא מוסתר (.lead) והיומן (.cal) מוצג
   ישירות כ-fallback. עם JS, היומן גדור עד ש-.final.lead-done נדלק. */
.lead{max-width:560px;margin:clamp(28px,4vw,44px) auto 0;text-align:start;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(22px,3.2vw,32px);display:none}
.js .lead{display:block}
.js .final .cal{display:none}
.js .final.lead-done .lead{display:none}
.js .final.lead-done .cal{display:block}

/* פס עליון: מותג + מונה צעדים */
.lf-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lf-brand{display:inline-flex;align-items:center;gap:8px;font-family:'Assistant',sans-serif;font-weight:700;color:var(--ink);font-size:.96rem}
.lf-brand svg{width:20px;height:20px;color:var(--signal);flex:none}
.lf-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);direction:ltr;flex:none}

/* מד ההתקדמות */
.lf-track{height:4px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-block-start:14px}
.lf-track-fill{display:block;height:100%;width:20%;border-radius:99px;background:var(--signal);transition:width .42s cubic-bezier(.22,1,.36,1)}

/* "נעים להכיר, [שם]" — נשאר גלוי משלב 2 והלאה */
.lf-greet{margin-block-start:18px;font-family:'Assistant',sans-serif;font-weight:700;font-size:1.06rem;color:var(--signal-ink)}
.lf-greet[hidden]{display:none}

/* גובה מינימלי כדי שהניווט למטה לא יקפוץ בין שאלות בגבהים שונים */
.lf-body{margin-block-start:16px;min-height:158px}
.lf-step{display:none}
.lf-step.on{display:block;animation:lf-in .3s ease}
@keyframes lf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lf-q{font-size:clamp(1.14rem,2vw,1.34rem);font-weight:700;color:var(--ink);line-height:1.42;font-family:'Assistant',sans-serif}

/* שדות טקסט */
.lf-input{width:100%;margin-block-start:14px;padding:13px 15px;font-family:'Assistant',sans-serif;font-size:1.02rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.lf-input::placeholder{color:var(--ink-faint)}
.lf-input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-wash)}
.lf-area{resize:vertical;min-height:96px;line-height:1.6}
.lf-otherfield[hidden]{display:none}

/* אפשרויות בחירה */
.lf-opts{margin-block-start:16px;display:flex;flex-direction:column;gap:10px}
.lf-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:start;font-family:'Assistant',sans-serif;font-size:1rem;color:var(--ink-soft);background:var(--paper);border:1.5px solid var(--rule-strong);border-radius:var(--r-md);padding:13px 16px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.lf-opt::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--rule-strong);transition:border-color .2s,background .2s,box-shadow .2s}
.lf-opt:hover{border-color:var(--ink-faint)}
.lf-opt.sel{border-color:var(--signal);background:var(--signal-wash);color:var(--signal-ink);font-weight:600}
.lf-opt.sel::before{border-color:var(--signal);background:var(--signal);box-shadow:inset 0 0 0 3px var(--card)}
/* כן/לא — שתי אפשרויות רחבות זו לצד זו, בלי סמן העיגול */
.lf-opts--row{flex-direction:row}
.lf-opts--row .lf-opt{justify-content:center;font-weight:600;font-size:1.05rem}
.lf-opts--row .lf-opt::before{display:none}

.lf-err{margin-block-start:10px;color:#C0392B;font-size:.9rem}
.lf-err[hidden]{display:none}

/* ניווט: "חזרה" מימין, "המשך" נדחף לקצה (שמאל ב-RTL) */
.lf-nav{margin-block-start:22px;display:flex;align-items:center;gap:12px}
.lf-back{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--ink-mute);font-family:'Assistant',sans-serif;font-size:.95rem;cursor:pointer;padding:6px 4px;transition:color .2s}
.lf-back:hover{color:var(--ink)}
.lf-back svg{width:16px;height:16px}
.lf-back[hidden]{display:none}
.lf-next{margin-inline-start:auto;min-width:150px}
.lf-next:disabled{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}

/* שורת התודה שמעל היומן אחרי השליחה */
.lead-thanks{max-width:560px;margin:clamp(22px,3vw,30px) auto 0;text-align:center;color:var(--console-fg);font-size:1.12rem}
.lead-thanks[hidden]{display:none}
.lead-thanks b{color:var(--signal)}

/* ---------- רספונסיבי ---------- */
@media (max-width:980px){
  /* הכרטיס יורד מתחת לטקסט (כמו הקונסולה באתר הראשי) - אחרת הוא נמעך
     לעמודה צרה. הבסיס .hero-in עובר ל-1fr כאן, אבל .cg-hero .hero-in גובר
     בספציפיות, אז חייבים לחזור עליו במפורש. */
  .cg-hero .hero-in{grid-template-columns:1fr;gap:34px}
}
@media (max-width:620px){
  .cg-body{height:390px}
  .cg-m{max-width:88%}
  .cg-flow{--fp:20px}
  .cg-fstep{grid-template-columns:40px 1fr;gap:15px}
  .cg-fnum{width:40px;height:40px;font-size:.74rem}
  .cg-fstep:not(:last-child)::before,.cg-fstep:not(:last-child)::after{inset-inline-start:19px;inset-block-start:calc(var(--fp) + 20px)}
  /* במובייל הטבלה נכנסת בלי גלילה אופקית: table-layout:fixed + width:100%
     מכריחים את כל 4 העמודות לרוחב המסך בדיוק (הטקסט גולש בתוך התא), אחרת
     ב-RTL עמודת ה-start נחתכת. עמודת התוויות צרה יותר. */
  .cmp{min-width:0;table-layout:fixed;width:100%}
  .cmp th:first-child,.cmp td:first-child{width:22%}
  .cmp th,.cmp td{padding:12px 7px;font-size:.78rem}
  .cmp thead th{font-size:.8rem}
  .cmp thead th:nth-child(2){font-size:.86rem}
  .cmp tbody th{white-space:normal;font-size:.78rem}
  .cmp-usmark svg{width:14px;height:14px}
  .cmp-ck,.cmp-x{width:13px;height:13px;margin-inline-end:4px}
  .cmp-price{font-size:1rem}
  .cmp-sub{font-size:.66rem}
  .lf-body{min-height:150px}
  .lf-next{min-width:0;flex:1}
}

/* מי שביקש פחות תנועה מקבל שיחה מלאה וטיימליין צבוע - לא מסך ריק. */
@media (prefers-reduced-motion:reduce){
  .js .cg-body > *{opacity:1;transform:none;transition:none}
  .js .cg-typing,.js .cg-typing.show{display:none}
  .cg-typing i{animation:none}
  .cg-replay{display:none}
  .cg-scrollhint{display:none}
  .cg-composer.typing .cg-caret2{animation:none;opacity:0}
  /* הטיימליין קופא במצב המוגמר: מסילה מלאה, נקודות דלוקות, בלי גל.
     חייבים להתאים ל-4 המחלקות (.js .cg-flow.in ...) כי media query
     לא מוסיף specificity והכלל שמריץ את הגל היה גובר אחרת. */
  .js .cg-flow .cg-fnum{background:var(--signal-wash);border-color:var(--signal);color:var(--signal-ink);transition:none}
  .js .cg-flow .cg-fstep:not(:last-child)::after,
  .js .cg-flow.in .cg-fstep:not(:last-child)::after{animation:none;transform:scaleY(1)}
  /* השאלון: בלי אנימציית כניסה בין שאלות, בלי מעבר על פס ההתקדמות */
  .lf-step.on{animation:none}
  .lf-track-fill{transition:none}
}