@charset "utf-8";
/* ============================================================================
   FABER FLOW · גיליון משותף לעמודי השירות · 2026-07-31
   ============================================================================
   ⚠ mobile-first מוחלט. כללי הבסיס הם הטלפון (~390px).
     ההרחבות עולות דרך @media(min-width:700px) ו-@media(min-width:1040px) בלבד.
     אין ולו media query אחד עם max-width, ואין ולו כלל אחד עם left/right פיזי.

   מפת הקובץ (header map):
   --- טוקנים ובסיס ---
   - :root                  טוקני צבע, מידות ותזמון. זהים למסך הראשי, פרט לסולם הטיפוגרפיה
   - html[data-theme="light"] דריסת הטוקנים הסמנטיים למצב הבהיר (2026-08-05)
   - body / .wrap / .wrap-n בסיס: 17px בטלפון, 18px מ-700px. טקסט קריאה על --ink-soft (10.3:1)
   - .vh                    טקסט לקוראי מסך בלבד (הכרזת "נפתח בכרטיסייה חדשה")
   - .skip                  קישור דילוג לתוכן, נגלה רק במיקוד
   - .grad                  גרדיאנט טורקיז→אינדיגו→טורקיז נע. משמש בכותרת ה-h1 בלבד
   --- שכבות אווירה ---
   - .glow / .grid / .noise / .sprog   זהות למסך הראשי
   --- ניווט וכפתורים ---
   - .nav / .nav-in / .brand / .mark   סרגל עליון קבוע + סימן המותג המצייר את עצמו
   - .nav-back                        קישור חזרה לאתר הראשי ולרשימת השירותים.
                                      גלוי גם בטלפון (2026-07-31); רק .sec-link נחתך שם
   - .btn / .btn-p / .btn-g / .btn-s  כפתורים מחורטים, מטרת מגע 48px
   - .tgls / .tgl                    מתג בהיר/כהה ומתג שפה, INTEGRATION.md בלוק 8
   --- סקציות ---
   - .sec / .lbl            קו שיער full-bleed + תווית אינדקס מונוספייס ונקודה
   --- hero ---
   - .hero / .hero-grid     טור אחד בבסיס, שני טורים מ-1040px
   - .hero .sub             משפט אחד שמסביר מה זה. 19px בטלפון, 21px מ-700px
   --- השרטוט המונפש (.fd) ---
   - .fd / .fd-m / .fd-d    שני וריאנטים: אנכי בטלפון, אופקי מ-700px. החלפה ב-display בלבד
   - .fd g.dw              שכבת הציור: קווים שמציירים את עצמם ב-stroke-dashoffset
                            .reg סימני רישום, .dim קווי מידה, .blk בלוק טורקיז, .alt בלוק אינדיגו
   - .fd g.pl              שכבת הפריחה: עותק של מלבני הבלוקים, opacity 0, נדלק לפי data-step
   - .fd g.lb              תוויות: .t-i אינדקס טורקיז, .t-i2 אינדקס אינדיגו, .t-he שם עברי,
                            .t-l תווית LIVE, .t-io תוויות קלט/פלט, ברירת המחדל היא הערת מידה
   - .fd path.sg           מקטעי הסיגנל. הנקודה רצה עליהם בלבד ולעולם לא נכנסת לבלוק
   - שרשרת ה-nth-child     השהיות הציור, עד 30 אלמנטים
   --- גופי הסקציות ---
   - .plist                 סקציית הבעיה: שלושה פריטים עם קו מבטא
   - .steps                 סקציית איך זה עובד: רשימה ממוספרת שמופה לבלוקים בשרטוט
   - .outs / .out           סקציית מה יוצא מזה: שלושה כרטיסים
   - .needs                 סקציית מה צריך ממך: רשימה קצרה וישירה
   - .svc-grid / .svc       רשימת השירותים בעמוד האינדקס
   --- סגירה ---
   - .cta                   רצועת סיום אינדיגו→טורקיז
   - footer .tblock/.fnav   בלוק כותרת של שרטוט + קישור להצהרת הנגישות
   --- תנועה ונגישות ---
   - .rv / .rv.hd / .rv.in  חשיפה בגלילה
   - :focus-visible         מסגרת מיקוד ‎#7DE8DE‎ ברוחב 2px, 13.8:1 מול הרקע
   - @media(min-width:700px) / (min-width:1040px)
   - @media(prefers-reduced-motion:reduce)   כיסוי מלא: שרטוט מצויר וקפוא, בלי סיגנל ובלי פריחה
   --- טיפוגרפיה עברית ---
   - עברית לעולם בלי letter-spacing חיובי ולעולם לא במונוספייס.
     tracking ומונוספייס נשארים על לטינית בלבד: .brand, .lbl .ix, .fd text, .fd .t-i, .t-l
   ============================================================================ */

:root{
  --bg:#06090C;
  --bg-2:#0B1116;
  /* ניגודיות: טקסט קריאה יושב על --ink-soft (10.3:1) או --ink (17.2:1).
     --ink-dim הוא 9.4:1 ומשמש לשורות משנה. --ink-faint (5.9:1) לסימני רישום בלבד,
     --ink-mark להערות מידה דקורטיביות בשרטוט ולשום דבר אחר */
  --ink:#E9EFF4;
  --ink-soft:#AEBCC8;
  --ink-dim:#A3B4C2;
  --ink-faint:#7C8EA0;
  --ink-mark:#4B5A68;
  /* סולם המותג. שבע עצירות, סגול אל אקווה, זהה לסולם של הסימן */
  --ff-1:#795DFF;
  --ff-2:#547AFF;
  --ff-3:#008FFF;
  --ff-4:#00A8E3;
  --ff-5:#00BED4;
  --ff-6:#22D3C5;
  --ff-7:#00FFDE;
  /* סמנטי. כל טוקן שנושא טקסט עומד ב-4.5:1 מול --bg וגם מול --bg-2 */
  --acc:#6FA0FF;
  --acc-lit:#8DBBFF;
  --acc-glow:#7FB0FF;
  --acc-deep:#1A3FF6;
  --acc-2:var(--ff-1);      /* 4.58:1 על --bg, 4.36:1 על --bg-2. דקורטיבי בלבד, לא לטקסט */
  --acc-2-lit:#A08CFF;      /* 7.31:1 · הסגול שמותר להעמיד עליו טקסט */
  --acc-3:var(--ff-3);
  --acc-3-lit:#6FC2FF;
  --line:rgba(255,255,255,.07);
  --r:4px;
  --max:1180px;
  --max-n:1012px;
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --font-display: 'Heebo', system-ui, sans-serif;
  --draw:2.2s;

  /* --- שכבות אווירה, כרטיסים ומתגים (2026-08-05 · מתג בהיר/כהה)
     rgba שהיו כתובים ישירות בגיליון וסמכו על רקע כהה קבוע עברו לכאן.
     הערך הכהה של כל טוקן זהה ביט-לביט למה שהיה קודם בקוד; המצב הבהיר
     מוגדר בבלוק html[data-theme="light"] שמייד אחרי --- */
  --nav-bg:rgba(6,9,12,.82);
  --veil:rgba(233,239,244,.09);
  --veil-2:rgba(233,239,244,.045);
  --glow-1:rgba(26,63,246,.20);
  --glow-2:rgba(121,93,255,.16);
  --glow-bar:rgba(34,211,197,.35);      /* זוהר קו ההתקדמות (.sprog) */
  --noise-op:.022;
  --card:rgba(233,239,244,.03);          /* משטח כרטיס: .plist li, .steps li, .svc */
  --card-2:rgba(233,239,244,.015);       /* משטח עדין יותר: .tblock בפוטר */
  --line-2:rgba(255,255,255,.12);        /* מסגרת המתגים במיקוד/hover, 8ג */
  --btn-border:rgba(233,239,244,.24);    /* מסגרת .btn-g */
  --accent-bar:rgba(233,239,244,.28);    /* פס ההדגשה של .plist li */
  --shine:rgba(233,239,244,.07);         /* ברק פנימי עדין ב-.btn-g */
  --dot:#14A79C;                         /* הנקודה המפרידה ב-.lbl */
  /* הטוקנים הבאים קבועים בשני המצבים במכוון, ולכן בלי דריסה בבלוק הבהיר */
  --on-acc:#FFFFFF;                      /* טקסט על גבי מילוי --acc-deep, קבוע. 6.81:1 */
  --btn-fill-hover:#2D4BF7;              /* מילוי ה-hover של הכפתורים, קבוע. 6.07:1 עם --on-acc */
  --cta-ink:#E4EDF4;                     /* טקסט רצועת ה-CTA, קבוע */
  --cta-base:#06090C;                    /* בסיס רצועת ה-CTA, נשאר כהה תמיד כדי שהטקסט הקבוע ימשיך לקרוא */
}

/* ============================================================================
   המצב הבהיר. הסולם --ff-1..7 לא משתנה, רק הסמנטיקה. ערכי הדיו והאקצנט
   מועתקים מ-‎../logo/tokens.css‎ (מקור האמת למצב הבהיר); הטוקנים הייחודיים
   לגיליון הזה (card/line-2/btn-border/accent-bar/shine/dot) נגזרו כאן לפי
   אותו היגיון: RGB הופך מ-233,239,244 (לבן) ל-9,14,20 (כמעט-שחור).
   ============================================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-2:#F4F7FA;
  --ink:#141416;          /* 18.40:1 */
  --ink-soft:#2A3038;     /* 10.21:1 */
  --ink-dim:#3A424B;      /*  6.42:1 */
  --ink-faint:#6E7A86;    /*  4.38:1 · טקסט גדול/דקורטיבי בלבד (מסגרות רישום בשרטוט) */
  --ink-mark:#7A8590;     /*  2.54:1 · הערות מידה דקורטיביות בשרטוט בלבד */

  --acc:#1A3FF6;          /*  5.06:1 · קישורים וטקסט מודגש */
  --acc-lit:#173FC4;      /*  6.83:1 · ההדגשה החזקה */
  --acc-glow:#1A3FF6;     /*  5.06:1 · אין זוהר על לבן, נופל לצבע מלא */
  --acc-deep:#1A3FF6; /* ‎#22D3C5‎ · המילוי, לא הטקסט */
  --acc-2:#6B4EE6;        /*  5.44:1 · בבהיר הסגול כן נושא טקסט */
  --acc-2-lit:#5436C9;    /*  7.64:1 */
  --acc-3:#0063C1;        /*  5.91:1 */
  --acc-3-lit:#1668C4;    /*  5.51:1 */

  --line:rgba(9,14,20,.10);
  --line-2:rgba(9,14,20,.17);
  --veil:rgba(9,14,20,.07);
  --veil-2:rgba(9,14,20,.035);
  --glow-1:rgba(26,63,246,.10);
  --glow-2:rgba(107,78,230,.10);
  --glow-bar:rgba(11,124,116,.35);
  --noise-op:.014;
  --nav-bg:rgba(255,255,255,.86);
  --card:rgba(9,14,20,.022);
  --card-2:rgba(9,14,20,.013);
  --btn-border:rgba(9,14,20,.32);
  --accent-bar:rgba(9,14,20,.30);
  --shine:rgba(9,14,20,.05);
  --dot:var(--acc-lit);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-block-start:76px}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Assistant',system-ui,sans-serif;
  font-size:17px;line-height:1.72;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* עברית לעולם בלי letter-spacing: מרווח אותיות שובר את המילה לגליפים מנותקים */
h1,h2,h3,.display{font-family:'Heebo',system-ui,sans-serif;line-height:1.16;letter-spacing:normal}
.wrap{max-inline-size:var(--max);margin-inline:auto;padding-inline:20px}
.wrap-n{max-inline-size:var(--max-n)}

.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:12px;z-index:80;
  padding:10px 16px;border-radius:var(--r);background:var(--acc-deep);color:var(--on-acc);
  font-weight:600;text-decoration:none}
.skip:focus-visible{inset-block-start:12px}

/* מיקוד גלוי בכל אלמנט אינטראקטיבי: ‎#7DE8DE‎ על ‎#06090C‎ הוא 13.8:1 */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc-lit);outline-offset:3px;border-radius:2px}

/* ---------- .grad ---------- */
.grad{
  background-image:linear-gradient(90deg,
    var(--acc-lit) 0%, var(--acc) 22%, var(--acc-2-lit) 50%, var(--acc) 78%, var(--acc-lit) 100%);
  background-size:220% 100%;background-position:0% 50%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gradshift 7s linear infinite alternate;
}
@keyframes gradshift{from{background-position:0% 50%}to{background-position:100% 50%}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background-image:none;color:var(--acc-lit);-webkit-text-fill-color:var(--acc-lit)}
}

/* ---------- שכבות אווירה ---------- */
.glow{position:fixed;inset-block:-30%;inset-inline:0;z-index:0;pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(46% 24% at 66% 24%, var(--glow-1), transparent 72%),
    radial-gradient(52% 28% at 30% 62%, var(--glow-2), transparent 74%)}
.grid{position:fixed;inset-block:-160px;inset-inline:0;z-index:0;pointer-events:none;
  will-change:transform;
  background-image:
    repeating-linear-gradient(90deg, var(--veil) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(180deg, var(--veil) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--veil-2) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(180deg, var(--veil-2) 0 1px, transparent 1px 24px);
  -webkit-mask-image:radial-gradient(130% 82% at 50% 16%, #000 18%, rgba(0,0,0,.35) 62%, transparent 96%);
  mask-image:radial-gradient(130% 82% at 50% 16%, #000 18%, rgba(0,0,0,.35) 62%, transparent 96%)}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--noise-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
.sprog{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:60;
  block-size:2px;inline-size:0;pointer-events:none;
  background:linear-gradient(270deg,var(--acc),var(--acc-2));
  box-shadow:0 0 12px var(--glow-bar)}

/* ---------- nav ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block-end:1px solid var(--line)}
.nav-in{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;justify-content:space-between;gap:12px;min-block-size:58px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;letter-spacing:.14em;font-size:14px;color:var(--ink);
  white-space:nowrap;text-decoration:none}
/* ⚠ קישור החזרה חייב להתקיים גם בטלפון: עמוד שירות שמגיעים אליו מלינק ישיר
   הוא לפעמים העמוד הראשון שנפתח, ובלי הקישור אין דרך חזרה לאתר.
   רק "כל השירותים" (.sec-link) נחתך מתחת ל-700px, כדי שהשורה תישאר ברוחב */
.nav-back{display:flex;gap:14px;align-items:center}
.nav-back .sec-link{display:none}
.nav-back a{position:relative;color:var(--ink-soft);text-decoration:none;font-size:17px;
  transition:color .18s ease;display:inline-flex;align-items:center;min-block-size:44px}
.nav-back a::after{content:"";position:absolute;inset-block-end:9px;inset-inline:0;
  block-size:1.5px;border-radius:1px;pointer-events:none;
  background:linear-gradient(270deg,var(--acc),var(--acc-2-lit));
  transform:scaleX(0);transform-origin:0% 50%;transition:transform .22s var(--ease)}
html[dir="rtl"] .nav-back a::after{transform-origin:100% 50%}
.nav-back a:hover,.nav-back a:focus-visible{color:var(--ink)}
.nav-back a:hover::after,.nav-back a:focus-visible::after{transform:scaleX(1)}

/* הסימן בשורת הניווט. יחס 191:247, ולכן הרוחב נגזר מהגובה ולא מרובע.
   הכניסה היא עלייה קצרה של שלוש השכבות בזו אחר זו, בסדר שבו הסימן נבנה.
   ⚠ אין כאן שכבת ".dw" שמסמנת "מסמך מוכן": בעמודי השירות ‎.dw‎ כבר תפוס
   לשכבת הציור בתוך השרטוט המונפש (‎.fd .dw>*‎), אז האנימציה רצה ללא שער */
.mark{block-size:26px;inline-size:20.1px;flex:0 0 auto;overflow:visible}
.mark path{transform-box:fill-box;transform-origin:50% 100%;
  opacity:0;animation:mkrise .52s var(--ease) both}
.mark .mk-top{animation-delay:.06s}
.mark .mk-wing{animation-delay:.17s}
.mark .mk-stem{animation-delay:.28s}
@keyframes mkrise{from{opacity:0;transform:translateY(14%) scale(.94)}
                  to{opacity:1;transform:none}}

/* ---------- כפתורים ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-block-size:48px;padding:12px 24px;border-radius:var(--r);line-height:1.4;
  text-decoration:none;font-weight:600;font-size:17px;font-family:'Assistant',system-ui,sans-serif;
  border:1px solid var(--acc);
  transition:color .3s ease,border-color .3s ease,transform .18s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:0% 50%;transition:transform .5s var(--ease)}
html[dir="rtl"] .btn::before{transform-origin:100% 50%}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
/* ⚠ תוקן 2026-08-29. עמד על --ff-6 (#22D3C5), והלבן עליו נתן 1.88:1. הזהות
   עברה לכחול ו---acc-deep (#1A3FF6) הוא מילוי הכפתור, 6.81:1 עם --on-acc.
   אותו באג היה גם בעמוד הבית ובתאום האנגלי, ותוקן שם באותו סבב */
 .btn-p{background:var(--acc-deep);color:var(--on-acc);box-shadow:inset 0 1px 0 rgba(226,232,255,.30)}
.btn-p::before{background:var(--btn-fill-hover)}
.btn-g{color:var(--ink);border-color:var(--btn-border);box-shadow:inset 0 1px 0 var(--shine)}
.btn-g::before{background:var(--acc-deep)}
.btn-g:hover{color:var(--on-acc);border-color:var(--acc-deep)}
.btn-s{min-block-size:44px;padding:8px 14px;font-size:16px}

/* ---------- מתג בהיר/כהה ומתג שפה (INTEGRATION.md בלוק 8ג, מועתק כלשונו) ---------- */
.tgls{display:flex;align-items:center;gap:6px}
.tgl{display:inline-flex;align-items:center;justify-content:center;
     min-inline-size:44px;min-block-size:44px;padding-inline:10px;
     background:none;border:1px solid var(--line);border-radius:var(--r);
     color:var(--ink-dim);cursor:pointer;font:inherit;
     font-size:calc(13px * var(--tmul,1));font-weight:600;letter-spacing:.06em;
     text-decoration:none;
     transition:color .2s var(--ease),border-color .2s var(--ease)}
.tgl:hover,.tgl:focus-visible{color:var(--ink);border-color:var(--line-2)}
.tgl-i{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;
       stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
html[data-theme="light"] .i-moon{display:inline}
html[data-theme="light"] .i-sun-c,
html[data-theme="light"] .i-sun-r{display:none}

/* ---------- מערכת ההפרדה בין סקציות ---------- */
.sec{border-block-start:1px solid var(--line)}
.lbl{display:flex;align-items:center;gap:9px;font-family:'Heebo',system-ui,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:normal;color:var(--acc);margin-block-end:16px}
.lbl .ix{font-family:var(--mono);font-size:14.5px;font-weight:400;letter-spacing:.16em;color:var(--acc)}
.lbl .dt{color:var(--dot)}
.lbl::after{content:"";block-size:1px;flex:1 1 24px;max-inline-size:72px;
  background:linear-gradient(270deg,var(--acc),transparent)}

/* ---------- hero ---------- */
.hero{padding-block:92px 36px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.hero .kick{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--acc);
  margin-block-end:14px;display:block}
h1{font-size:clamp(30px,7.6vw,54px);font-weight:800}
.hero .sub{margin-block-start:20px;max-inline-size:46ch;font-size:19px;
  color:var(--ink-soft);font-weight:300}
.hero .row{display:flex;flex-direction:column;gap:12px;margin-block-start:28px}
.hero .row .btn{inline-size:100%}

/* ============================================================================
   השרטוט המונפש. שני וריאנטים, החלפה ב-display בלבד.
   ============================================================================ */
.fd-wrap{position:relative;min-inline-size:0}
.fd{width:100%;height:auto;display:block;margin-inline:auto;direction:ltr;
  animation:fdfade .8s ease .1s both}
.fd-m{max-inline-size:330px}
.fd-d{display:none;max-inline-size:600px}
@keyframes fdfade{from{opacity:0}to{opacity:1}}

/* ברירת המחדל בשרטוט היא הערת מידה דקורטיבית. כל תווית שקוראים מקבלת מחלקה */
.fd text{font-family:var(--mono);letter-spacing:.14em;fill:var(--ink-mark)}
.fd-m text{font-size:10px}
.fd-d text{font-size:9px}
.fd-m .t-i,.fd-m .t-i2{font-size:12px;letter-spacing:.2em}
.fd-d .t-i,.fd-d .t-i2{font-size:11px;letter-spacing:.2em}
.fd-m .t-i,.fd-d .t-i{fill:var(--acc)}
.fd-m .t-i2,.fd-d .t-i2{fill:var(--acc-2-lit)}
/* שמות הבלוקים בעברית: אין מונוספייס עברי תקין, ולכן Assistant 700 ו-letter-spacing:normal.
   הבורר בן שתי המחלקות הכרחי כדי לגבור על ‎.fd text‎ שנושא מונוספייס ו-tracking */
.fd .t-he{font-family:'Assistant',system-ui,sans-serif;font-weight:700;
  letter-spacing:normal;direction:rtl;fill:var(--ink)}
.fd-m .t-he{font-size:15px}
.fd-d .t-he{font-size:13.5px}
.fd .t-sm{font-size:12.5px}
.fd-d .t-sm{font-size:11.5px}
.fd .t-l{letter-spacing:.22em;fill:var(--acc-lit)}
.fd-m .t-l{font-size:9px}
.fd-d .t-l{font-size:8px}
.fd .t-io{fill:var(--ink-dim)}

/* --- שכבת הציור --- */
.fd .dw>*{fill:none;stroke:var(--acc);stroke-opacity:.55;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:fddraw .55s var(--ease) both}
.fd .dw>.reg{stroke:var(--ink-faint);stroke-opacity:1;stroke-width:1.2}
.fd .dw>.dim{stroke:var(--acc-2-lit);stroke-opacity:.62;stroke-width:1}
.fd .dw>.blk{stroke-width:1.8;fill:var(--acc);fill-opacity:0;
  animation:fddraw .55s var(--ease) both, fdfill .9s ease both}
.fd .dw>.alt{stroke:var(--acc-2-lit);stroke-opacity:.72;fill:var(--acc-2);
  animation:fddraw .55s var(--ease) both, fdfill2 .9s ease both}
@keyframes fddraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fdfill{from{fill-opacity:0}to{fill-opacity:.07}}
@keyframes fdfill2{from{fill-opacity:0}to{fill-opacity:.2}}

.fd .dw>*:nth-child(1){animation-delay:0s}
.fd .dw>*:nth-child(2){animation-delay:.05s}
.fd .dw>*:nth-child(3){animation-delay:.1s}
.fd .dw>*:nth-child(4){animation-delay:.15s}
.fd .dw>*:nth-child(5){animation-delay:.24s}
.fd .dw>*:nth-child(6){animation-delay:.32s}
.fd .dw>*:nth-child(7){animation-delay:.4s}
.fd .dw>*:nth-child(8){animation-delay:.48s}
.fd .dw>*:nth-child(9){animation-delay:.56s}
.fd .dw>*:nth-child(10){animation-delay:.64s}
.fd .dw>*:nth-child(11){animation-delay:.72s}
.fd .dw>*:nth-child(12){animation-delay:.8s}
.fd .dw>*:nth-child(13){animation-delay:.88s}
.fd .dw>*:nth-child(14){animation-delay:.96s}
.fd .dw>*:nth-child(15){animation-delay:1.04s}
.fd .dw>*:nth-child(16){animation-delay:1.12s}
.fd .dw>*:nth-child(17){animation-delay:1.2s}
.fd .dw>*:nth-child(18){animation-delay:1.28s}
.fd .dw>*:nth-child(19){animation-delay:1.36s}
.fd .dw>*:nth-child(20){animation-delay:1.44s}
.fd .dw>*:nth-child(21){animation-delay:1.52s}
.fd .dw>*:nth-child(22){animation-delay:1.6s}
.fd .dw>*:nth-child(23){animation-delay:1.66s}
.fd .dw>*:nth-child(24){animation-delay:1.72s}
.fd .dw>*:nth-child(25){animation-delay:1.78s}
.fd .dw>*:nth-child(26){animation-delay:1.84s}
.fd .dw>*:nth-child(27){animation-delay:1.9s}
.fd .dw>*:nth-child(28){animation-delay:1.94s}
.fd .dw>*:nth-child(29){animation-delay:1.98s}
.fd .dw>*:nth-child(30){animation-delay:2s}

.fd .lb>*{opacity:0;animation:fdfade .6s ease both}
.fd .lb>*:nth-child(1){animation-delay:.7s}
.fd .lb>*:nth-child(2){animation-delay:.8s}
.fd .lb>*:nth-child(3){animation-delay:.9s}
.fd .lb>*:nth-child(4){animation-delay:1s}
.fd .lb>*:nth-child(5){animation-delay:1.1s}
.fd .lb>*:nth-child(6){animation-delay:1.2s}
.fd .lb>*:nth-child(7){animation-delay:1.3s}
.fd .lb>*:nth-child(8){animation-delay:1.4s}
.fd .lb>*:nth-child(9){animation-delay:1.5s}
.fd .lb>*:nth-child(10){animation-delay:1.6s}
.fd .lb>*:nth-child(11){animation-delay:1.7s}
.fd .lb>*:nth-child(12){animation-delay:1.8s}
.fd .lb>*:nth-child(13){animation-delay:1.9s}
.fd .lb>*:nth-child(14){animation-delay:2s}
.fd .lb>*:nth-child(15){animation-delay:2.05s}
.fd .lb>*:nth-child(16){animation-delay:2.1s}
.fd .lb>*:nth-child(17){animation-delay:2.15s}
.fd .lb>*:nth-child(18){animation-delay:2.2s}
.fd .lb>*:nth-child(19){animation-delay:2.25s}
.fd .lb>*:nth-child(20){animation-delay:2.3s}
.fd .lb>*:nth-child(21){animation-delay:2.34s}
.fd .lb>*:nth-child(22){animation-delay:2.38s}
.fd .lb>*:nth-child(23){animation-delay:2.42s}
.fd .lb>*:nth-child(24){animation-delay:2.46s}
.fd .lb>*:nth-child(25){animation-delay:2.5s}

/* --- שכבת הפריחה: הבלוק כולו נדלק. הנהג ב-JS מנפיש opacity בלבד --- */
.fd .pl>*{fill:var(--acc);fill-opacity:.17;stroke:var(--acc-lit);stroke-width:1.9;
  stroke-linejoin:round;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 12px rgba(125,232,222,.6)) drop-shadow(0 0 28px rgba(34,211,197,.35))}
.fd .pl>.alt{fill:var(--acc-2);fill-opacity:.26;
  filter:drop-shadow(0 0 12px rgba(160,140,255,.6)) drop-shadow(0 0 28px rgba(121,93,255,.4))}

/* --- נקודת הסיגנל: רצה על מקטעי החיבור בלבד, לעולם לא בתוך בלוק --- */
.fd .sg{fill:none;stroke:var(--acc-lit);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:.001 .999;stroke-dashoffset:1;opacity:0;
  filter:drop-shadow(0 0 7px rgba(125,232,222,.95)) drop-shadow(0 0 18px rgba(34,211,197,.5))}

/* ============================================================================
   גופי הסקציות
   ============================================================================ */
.sec-body{padding-block:38px 44px}
.sec-body h2{font-size:clamp(25px,6.2vw,40px);font-weight:800;max-inline-size:20ch}
.sec-lead{margin-block-start:14px;max-inline-size:54ch;color:var(--ink-soft);
  font-weight:300;font-size:18px}

/* 01 הבעיה */
.plist{display:grid;gap:12px;margin-block-start:24px}
.plist li{list-style:none;position:relative;color:var(--ink);font-size:18px;font-weight:300;
  line-height:1.6;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);border-inline-start:2px solid var(--accent-bar);
  background:var(--card)}

/* 02 איך זה עובד */
.steps{display:grid;gap:12px;margin-block-start:24px;counter-reset:st}
.steps li{list-style:none;counter-increment:st;position:relative;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:start;
  padding:18px 18px 20px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),transparent);
  transition:border-color .35s ease,background .35s ease}
.steps li:hover{border-color:rgba(34,211,197,.5);
  background:linear-gradient(180deg,rgba(34,211,197,.05),rgba(121,93,255,.045))}
.steps li::before{content:"0" counter(st);grid-row:1 / span 2;align-self:start;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--acc);
  inline-size:38px;block-size:38px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(34,211,197,.09);border:1px solid rgba(34,211,197,.28)}
.steps b{font-family:'Heebo',system-ui,sans-serif;font-size:18px;font-weight:700;
  letter-spacing:normal;color:var(--ink)}
.steps p{color:var(--ink-soft);font-size:17px;font-weight:300;line-height:1.6}

/* 03 מה יוצא מזה */
.outs{display:grid;grid-template-columns:1fr;gap:14px;margin-block-start:24px}
.out{position:relative;padding:22px 20px 24px;border-radius:var(--r);
  border:1px solid rgba(34,211,197,.34);
  background:linear-gradient(158deg,rgba(34,211,197,.075),rgba(121,93,255,.11) 78%,rgba(121,93,255,.04));
  box-shadow:inset 0 0 0 1px rgba(160,140,255,.06), 0 22px 46px -34px rgba(121,93,255,.85)}
.out::before{content:"";position:absolute;inset:7px;pointer-events:none;
  background:
    linear-gradient(var(--acc),var(--acc)) 0 0/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 0/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 100%/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/1px 14px no-repeat}
.out .onum{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--acc-lit);
  display:block;margin-block-end:10px}
.out p{color:var(--ink);font-size:18px;font-weight:300;line-height:1.6}

/* 04 מה צריך ממך */
.needs{display:grid;gap:10px;margin-block-start:24px;max-inline-size:62ch}
.needs li{list-style:none;position:relative;color:var(--ink-soft);font-size:18px;
  font-weight:300;line-height:1.6;padding-inline-start:24px;padding-block:4px}
.needs li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:18px;
  inline-size:12px;block-size:1px;background:var(--acc)}
.needs-note{margin-block-start:20px;color:var(--ink);font-size:18px;
  padding-inline-start:16px;border-inline-start:2px solid var(--acc)}

/* ---------- רשימת השירותים בעמוד האינדקס ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:26px}
.svc{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px;align-items:start;
  padding:20px 18px 22px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),transparent);
  text-decoration:none;color:inherit;
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .5s var(--ease)}
.svc:hover{border-color:rgba(34,211,197,.55);transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(34,211,197,.055),rgba(121,93,255,.05));
  box-shadow:0 26px 50px -34px rgba(121,93,255,.9)}
.svc .snum{grid-row:1 / span 2;align-self:start;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;color:var(--acc);inline-size:38px;block-size:38px;border-radius:var(--r);
  display:grid;place-items:center;background:rgba(34,211,197,.09);
  border:1px solid rgba(34,211,197,.28)}
.svc h2{font-size:19px;font-weight:700;line-height:1.34}
.svc p{color:var(--ink-soft);font-size:17px;font-weight:300;line-height:1.55}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;padding-block:58px;text-align:center;
  border-block-end:1px solid rgba(160,140,255,.3);
  background-color:var(--cta-base);
  background-image:linear-gradient(112deg,rgba(121,93,255,.26),rgba(53,120,205,.16) 46%,rgba(34,211,197,.14))}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 130% at 50% 128%, rgba(34,211,197,.24), transparent 66%)}
.cta-in{position:relative}
.cta h2{font-size:clamp(26px,6.6vw,46px);font-weight:800;color:var(--cta-ink)}
.cta p{margin:18px auto 0;max-inline-size:48ch;color:var(--cta-ink);font-weight:300;font-size:18px}
.cta .row{display:flex;flex-direction:column;gap:12px;margin-block-start:28px;align-items:center}
.cta .row .btn{inline-size:100%}

/* ---------- reveal ---------- */
/* ⚠ חשיפה בגלילה כשיפור, לא כתנאי. שוכתב 2026-08-30. ראה את ההערה
   המלאה ביומן ההחלטות: scale(.965) הזיז כל כותרת 9.8px הצידה, והטרנזישן
   נעצר בלשונית מוסתרת ואז התוכן לא הופיע בכלל.
   ⚠ אין להחזיר opacity:0 לבורר .rv עצמו. ההסתרה חיה רק תחת html.js-rv. */
.rv{opacity:1;transform:none}
html.js-rv .rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js-rv .rv.hd{transform:translateY(26px)}
html.js-rv .rv.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{padding-block:44px}
.tblock{border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center;
  background:var(--card-2);font-size:17px;color:var(--ink);letter-spacing:normal}
/* ⚠ ‎.tblock .dim‎ נושא מונוספייס, ולכן הוא מחזיק לטינית בלבד (קוד השרטוט).
   עברית כאן הייתה מקבלת מונוספייס, הבאג שחזר ארבע פעמים בפרויקט */
.tblock .dim{display:block;margin-block-start:8px;font-family:var(--mono);font-size:14px;
  letter-spacing:.08em;color:var(--ink-dim)}
.tblock .fnav{display:block;margin-block-start:14px}
.tblock a{color:var(--acc-lit);text-decoration:none;text-underline-offset:3px}
.tblock a:hover{text-decoration:underline}

/* ============================================================================
   ≥ 700px
   ============================================================================ */
@media (min-width:700px){
  body{font-size:18px;line-height:1.75}
  .wrap{padding-inline:26px}

  .nav-in{min-block-size:62px;gap:24px}
  .nav-back{gap:26px}
  .nav-back .sec-link{display:inline-flex}
  .mark{block-size:28px;inline-size:21.65px}
  .btn-s{padding:9px 20px}

  .hero{padding-block:112px 48px}
  .hero-grid{gap:44px}
  .hero .sub{margin-block-start:24px;font-size:21px}
  .hero .row{flex-direction:row;flex-wrap:wrap;gap:14px;margin-block-start:34px}
  .hero .row .btn{inline-size:auto}

  .fd-m{display:none}
  .fd-d{display:block}

  .lbl{font-size:17px;gap:12px;margin-block-end:14px}
  .lbl .ix{font-size:14px}

  .sec-body{padding-block:48px 60px}
  .sec-lead{margin-block-start:16px;font-size:19px}

  .plist{gap:14px;grid-template-columns:repeat(3,1fr);margin-block-start:30px}
  .plist li{padding:22px 20px;font-size:18px}

  .steps{margin-block-start:30px;gap:14px}
  .steps li{padding:22px 22px 24px}
  .steps b{font-size:19px}
  .steps p{font-size:18px}

  .outs{grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:30px}
  .out{padding:26px 24px 28px}

  .needs{margin-block-start:30px}
  .needs li{font-size:18px}
  .needs-note{font-size:19px;padding-inline-start:20px}

  .svc-grid{grid-template-columns:1fr 1fr;gap:14px;margin-block-start:32px}
  .svc h2{font-size:20px}
  .svc p{font-size:17.5px}
  .svc-wide{grid-column:1 / -1}

  .cta{padding-block:74px}
  .cta p{margin-block-start:20px;font-size:19px}
  .cta .row{flex-direction:row;justify-content:center;margin-block-start:32px}
  .cta .row .btn{inline-size:auto}

  footer{padding-block:64px}
  .tblock{padding:24px;font-size:18px}
}

/* ============================================================================
   ≥ 1040px
   ============================================================================ */
@media (min-width:1040px){
  /* רשימת השלבים היא טור אחד כי היא רצף. ב-1012px מלאים השורה נמתחת
     ונשאר שטח מת בקצה האינליין, ולכן היא נעצרת ב-800px וצמודה לקצה הקריאה */
  .steps{max-inline-size:800px}
  .hero{padding-block:142px 60px}
  .hero-grid{grid-template-columns:1.04fr 1fr;gap:50px}
  .hero .sub{font-size:22px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   העדפת תנועה מופחתת: כיסוי מלא. השרטוט מגיע למצב מצויר מלא וקופא.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv,.rv.hd{opacity:1!important;transform:none!important}
  .fd{opacity:1}
  .fd .dw>*{stroke-dashoffset:0}
  .fd .dw>.blk{fill-opacity:.07}
  .fd .dw>.alt{fill-opacity:.2}
  .fd .lb>*{opacity:1}
  .fd .pl{display:none}
  .fd .sg{display:none}
  .sprog{display:none}
  .grid,.glow{transform:none!important}
  .mark path{animation:none;opacity:1}
  .nav-back a::after{transform:scaleX(0)}
  .nav-back a:hover::after,.nav-back a:focus-visible::after{transform:scaleX(1)}
  .grad{animation:none;background-position:0% 50%}
}

/* ⚠ הקיקר בעברית. עד 2026-08-30 הוא היה מחרוזת אנגלית עם lang="en"
   ("SERVICE 06 / CALL SUMMARIES") על עמוד עברי. אורן: מה שמוצג בעמוד
   עברי צריך להיות בעברית. עברית לא הולכת עם tracking חיובי. */
html[lang="he"] .kick{font-family:var(--font-b);font-weight:600;letter-spacing:0}

/* ===== 03 · הדגמה ====================================================
   ⚠ השיחות הן דוגמה מומצאת ומסומנות ככאלה ב-.demo-note. אין כאן לקוח
   אמיתי, אין שם אמיתי ואין נתון שנלקח מתיק. זה תנאי, לא קישוט.
   .chat  חלון וואטסאפ. role=img עם aria-label שמספר את כל השיחה, כי
          קורא מסך שמקריא עשר בועות בזו אחר זו לא מבין מה קרה כאן.
   .bub.in   הודעה מהמערכת, מיושרת לקצה ההתחלה
   .bub.out  הודעה מהפונה, מיושרת לקצה הסוף ובצבע המבטא */
.demo-note{margin-block-start:10px;color:var(--ink-dim);
  font-size:calc(15px * var(--tmul))}
.track{margin-block-start:34px;padding-block-start:28px;
  border-block-start:1px solid var(--line)}
.track:first-of-type{border-block-start:0;padding-block-start:0}
.track-n{display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;color:var(--acc);margin-block-end:8px}
.track-h h3{font-family:var(--font-h);font-weight:700;
  font-size:clamp(21px,3.8vw,30px);line-height:1.3;color:var(--ink)}
.track-p{margin-block-start:12px;color:var(--ink-soft)}
.track-b{margin-block-start:24px;display:grid;grid-template-columns:1fr;gap:18px}
.chat{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--bg-2);overflow:hidden}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-block-end:1px solid var(--line)}
.chat-av{display:inline-flex;align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--acc);flex:0 0 auto}
.chat-av .ico{inline-size:18px;block-size:18px}
.chat-h b{display:block;font-family:var(--font-h);font-weight:700;
  font-size:calc(15px * var(--tmul));color:var(--ink)}
.chat-h em{display:block;font-style:normal;color:var(--ink-dim);font-size:12px}
.chat-b{padding:16px;display:flex;flex-direction:column;gap:10px}
.bub{position:relative;max-inline-size:82%;padding:11px 14px 20px;
  border-radius:var(--r-lg);font-size:calc(15px * var(--tmul));line-height:1.6}
.bub .t{position:absolute;inset-block-end:6px;inset-inline-end:12px;
  font-size:11px;color:var(--ink-dim);direction:ltr;unicode-bidi:isolate}
.bub.in{align-self:flex-start;background:var(--bg);color:var(--ink-soft);
  border:1px solid var(--line)}
.bub.out{align-self:flex-end;background:var(--btn-fill);color:var(--on-acc)}
.bub.out .t{color:var(--on-acc);opacity:.75}
.ticket{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--bg-2);padding:20px 18px}
.ticket-h{display:flex;align-items:center;gap:10px;
  font-family:var(--font-h);font-weight:700;
  font-size:calc(16px * var(--tmul));color:var(--ink)}
.ticket-h .bic{display:inline-flex;color:var(--acc)}
.ticket-h .ico{inline-size:20px;block-size:20px}
.ticket dl{margin-block-start:16px;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.ticket dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px;
  padding:10px 12px;background:var(--bg)}
.ticket dt{color:var(--ink-dim);font-size:calc(14px * var(--tmul))}
.ticket dd{color:var(--ink);font-size:calc(14px * var(--tmul))}
.ticket-l{margin-block-start:16px;display:grid;gap:8px;padding:0;list-style:none}
.ticket-l li{position:relative;padding-inline-start:18px;color:var(--ink-soft);
  font-size:calc(15px * var(--tmul))}
.ticket-l li::before{content:"";position:absolute;inset-inline-start:0;
  inset-block-start:.7em;inline-size:6px;block-size:6px;border-radius:50%;
  background:var(--acc)}
.ticket-f{margin-block-start:14px;color:var(--ink-dim);
  font-size:calc(14px * var(--tmul))}


@media(min-width:700px){
  .track-b{grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .bub{max-inline-size:88%}
}
/* ⚠ הועתק מ-brand/../index.html 2026-08-30 כדי שההדגמה תהיה רכיב אחד בכל האתר.
   תיקון כאן חייב לחזור גם לשם, ולהיפך. */

/* ⚠ עמוד שירות נכתב מחדש 2026-08-30. אורן: ״לקצר למקסימום, קצר חד וברור
   מה זה נותן, עם הדגמה ויזואלית קצרה״. קודם היו שש סקציות ו-384 מילים.
   עכשיו שלוש: כאב בכותרת, הדגמה, מה זה נותן. .hero-solo מבטל את טור
   השרטוט, כי ההדגמה עצמה החליפה אותו. */
.hero-solo{grid-template-columns:1fr!important}
.gives{list-style:none;padding:0;margin-block-start:var(--sp-block,26px);
  display:grid;gap:12px}
.gives li{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--bg-2)}
.gives b{font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:17px}
.gives span{color:var(--ink-soft);font-size:15px;line-height:1.6}
@media(min-width:700px){.gives{grid-template-columns:repeat(3,1fr)}}

/* ⚠ הכלל הבסיסי של אייקוני המותג. נעדר מהגיליון הזה עד 2026-08-30, ולכן
   האייקונים בהדגמה (הסמל בראש השיחה והוי בכרטיס) יצאו ריקים: ה-SVG הגיע
   בלי fill ובלי stroke. קיים במקביל ב-brand/../index.html. */
.ico{display:block;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ⚠ יעד מגע. שני הקישורים המשפטיים בפוטר היו 23 פיקסל גובה בעמודי
   השירות, מתחת ל-44. תוקן בעמודי הבית ב-2026-08-29 ונשכח כאן. */
.tblock .fnav{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.tblock .fnav a{display:inline-flex;align-items:center;min-block-size:44px}
.nav-in .brand{min-block-size:44px;display:inline-flex;align-items:center}

/* ⚠ ראה את ההערה למעלה: הסרגל נשבר לשתי שורות ובלע את ראש העמוד */
.nav-in{flex-wrap:nowrap}
.nav-back{display:none}
@media(min-width:700px){ .nav-back{display:inline-flex} }

/* ⚠ ״המסלול הראשון בקושי רואים בלבן״. .track-n עמד על --acc בגודל 12
   בלי משקל, ובמצב בהיר זה נעלם. עכשיו תגית עם רקע ומשקל. */
.track-n{display:inline-flex;align-items:center;padding:5px 12px;
  border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);
  color:var(--acc-lit);font-family:var(--font-b);font-weight:700;
  font-size:13px;letter-spacing:0}

/* ⚠ ״האייקון מרגיש מנותק כי אין את הרקע״. לאווטאר לא היה מילוי. */
.chat-av{background:var(--btn-fill);border-color:transparent;color:var(--on-acc)}

/* ⚠ ״לא ברור מה זה המערכת״. שורת הסטטוס אומרת עכשיו מי עונה. */
.chat-h em{font-size:12px}

/* ⚠ ״הקוביות והוי לא במיקום הנכון״. כותרת הכרטיס הייתה flex עם האייקון
   בקצה, והשורות בטבלה לא התיישרו לרוחב אחיד. */
.ticket-h{align-items:center;gap:10px}
.ticket-h .bic{flex:0 0 auto;inline-size:32px;block-size:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:var(--bg);border:1px solid var(--line-2)}
.ticket dl>div{grid-template-columns:88px 1fr;align-items:baseline}
.ticket dt{font-weight:600}

/* ============ מסגרת אייפון עם וואטסאפ ============
   ⚠ אורן: ״תייצר אייפון עם וואטסאפ ואנימציה של הודעות אחת אחרי השנייה,
   האייפון חייב להיראות אמיתי״. הבנייה כאן היא CSS בלבד, בלי תמונה ובלי
   ספרייה: מסגרת טיטניום עם הדגשות, מסך שחור, איזור דינמי, ופס בית.
   ⚠ הצבעים כאן קשיחים בכוונה. מכשיר פיזי לא מחליף צבע בין מצב בהיר לכהה,
   וזה בדיוק מה שגורם לו להיראות אמיתי על שני הרקעים.
   ⚠ ההודעות נחשפות אחת אחרי השנייה דרך animation-delay ולא דרך JS,
   ולכן זה עובד גם בלי סקריפט. prefers-reduced-motion מציג הכל מיד. */
.phone{inline-size:min(320px,100%);margin-inline:auto;position:relative;
  aspect-ratio:9/19.5;border-radius:44px;padding:10px;
  background:linear-gradient(150deg,#d9dde3,#8e949e 28%,#f2f4f7 46%,#7d838d 62%,#c8ccd3);
  box-shadow:0 26px 60px -18px rgba(9,14,20,.45),0 2px 5px rgba(9,14,20,.28)}
.phone::before{content:"";position:absolute;inset:2px;border-radius:42px;
  border:1px solid rgba(255,255,255,.5);pointer-events:none}
.phone-scr{position:relative;block-size:100%;border-radius:35px;overflow:hidden;
  background:#0B141A;display:flex;flex-direction:column;isolation:isolate}
.phone-isl{position:absolute;inset-block-start:9px;inset-inline:0;margin-inline:auto;
  inline-size:82px;block-size:24px;border-radius:14px;background:#000;z-index:4}
.phone-bar{position:absolute;inset-block-end:7px;inset-inline:0;margin-inline:auto;
  inline-size:110px;block-size:5px;border-radius:3px;background:rgba(255,255,255,.55);z-index:4}
/* סרגל וואטסאפ */
.wa-top{display:flex;align-items:center;gap:10px;padding:42px 14px 10px;
  background:#1F2C34;color:#E9EDEF;flex:0 0 auto}
.wa-av{inline-size:32px;block-size:32px;border-radius:50%;flex:0 0 auto;
  background:#25D366;display:inline-flex;align-items:center;justify-content:center;color:#0B141A}
.wa-av .ico{inline-size:17px;block-size:17px;stroke-width:2}
.wa-top b{display:block;font-family:var(--font-b);font-weight:600;font-size:14px;line-height:1.2}
.wa-top em{display:block;font-style:normal;font-size:11px;color:#8696A0}
/* גוף השיחה */
.wa-body{flex:1 1 auto;overflow:hidden;padding:12px 10px 22px;
  display:flex;flex-direction:column;gap:7px;
  background:#0B141A url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23ffffff' fill-opacity='.022'%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Ccircle cx='44' cy='36' r='2'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3C/g%3E%3C/svg%3E")}
.wa-b{max-inline-size:84%;padding:7px 10px 16px;position:relative;
  font-size:12.5px;line-height:1.45;border-radius:9px}
html.js-rv .wa-b{opacity:0;transform:translateY(9px);
  animation:waIn .45s var(--ease) forwards}
.wa-b .t{position:absolute;inset-block-end:4px;inset-inline-end:8px;
  font-size:9.5px;opacity:.62;direction:ltr;unicode-bidi:isolate}
.wa-b.in{align-self:flex-start;background:#202C33;color:#E9EDEF;border-start-start-radius:2px}
.wa-b.out{align-self:flex-end;background:#005C4B;color:#E9EDEF;border-start-end-radius:2px}
html.js-rv .wa-b:nth-child(1){animation-delay:.35s}
html.js-rv .wa-b:nth-child(2){animation-delay:1.25s}
html.js-rv .wa-b:nth-child(3){animation-delay:2.05s}
html.js-rv .wa-b:nth-child(4){animation-delay:2.95s}
html.js-rv .wa-b:nth-child(5){animation-delay:3.8s}
@keyframes waIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .wa-b{opacity:1;transform:none;animation:none}
}
html.a11y-noanim .wa-b{opacity:1!important;transform:none!important;animation:none!important}
@media(forced-colors:active){
  .phone{background:Canvas;border:1px solid CanvasText}
  .wa-b.in,.wa-b.out{border:1px solid CanvasText}
}

/* ⚠ ״האנימציה בין הכרטיסיות זזה לכיוון הלא נכון״. נקודת הפעימה על
   המחבר רצה משמאל לימין, בעוד שהעין בעברית קוראת מימין לשמאל.
   --dirx הופך את כיוון הנסיעה לפי dir המסמך. */
html[dir="rtl"] .conn{--dirx:-1}
html[dir="ltr"] .conn{--dirx:1}

/* ⚠ ״למה לא למרכז את הכרטיסיות הנפתחות״. הן נמתחו על כל רוחב העמוד
   בעוד שהכותרת מעליהן צרה, וזה נראה כמו שתי פריסות שונות. */
.objs{max-inline-size:80ch;margin-inline:auto}
.objs-sec .wrap>.lbl,.objs-sec .wrap>h2{max-inline-size:80ch;margin-inline:auto}

/* ⚠ ההדגמה: אייפון וכרטיס תוצאה זה לצד זה מ-700 פיקסל, והאייפון
   מקבל את הרוחב שהוא צריך בלי למתוח את הכרטיס. */
@media(min-width:700px){
  .track-b{grid-template-columns:320px 1fr;gap:26px;align-items:start}
}