/* =========================================================
   CK Digital 360, מוקאפים של ממשקים ב-HTML ו-CSS (30.09.2026).
   נטען דרך css_late, אחרי שכבת הנושא: css_late: mocks (בעמוד האוטומציות: flow,ai,mocks).
   1. תוצאות גוגל בראש עמוד הקידום (.mk-serp)
   2. ששת המוקאפים של "מה כלול" בעמוד הקידום: מחקר (.mk-kw), מאמר (.mk-post), מהירות (.mk-psi),
      שיחה עם מנוע AI (.mk-chat), קישורים פנימיים (.mk-graph), דוח Search Console (.mk-gsc)
   3. שיחת וואטסאפ עם כרטיסי Notion וטלגרם בראש עמוד האוטומציות (.mk-wa)
   4. שלושת המוקאפים של "מה כלול" בעמוד התחזוקה: אחסון ואבטחה (.mk-list), נגישות (.mk-a11y)
   כל כרום העמוד במשתני הנושא. צבעי המותג של גוגל, וואטסאפ, Notion וטלגרם מוגדרים פעם אחת
   בראש הקובץ ומשמשים רק בתוך הכרטיס הלבן או הכהה של אותו מוקאפ.
   תנועה: transform ו-opacity בלבד. בלי JS ובמצב תנועה מופחתת רואים את המצב הסופי.
   המוקאפים של "מה כלול" יושבים ב-figure.inc__shot.inc__shot--mk, ומתחלפים עם השורה הפעילה
   דרך המנגנון הקיים של service.js (המחלקה on) ו-service-c.js (מעבר לשורה בטלפון).
   ========================================================= */

/* ---------- 0. בסיס ---------- */
.mk{
  --mk-white:#ffffff;--mk-ink:#202124;--mk-ink-2:#4d5156;--mk-ink-3:#70757a;--mk-line:#e3e6ea;--mk-soft:#f1f3f4;
  --mk-link:#1a0dab;--mk-blue:#1a73e8;--mk-blue-2:#4285f4;--mk-purple:#5e35b1;
  --mk-green:#0cce6b;--mk-green-soft:#e6f4ea;--mk-ok:#30d158;
  --mk-wa-bg:#0b141a;--mk-wa-bar:#202c33;--mk-wa-in:#202c33;--mk-wa-out:#005c4b;--mk-wa-green:#25d366;
  --mk-wa-text:#e9edef;--mk-wa-muted:#8696a0;
  --mk-tg:#2aabee;
  --mk-pink-tint:color-mix(in srgb,var(--pink) 10%,transparent);
  --mk-pink-line:color-mix(in srgb,var(--pink) 40%,transparent);
  --mk-pink-paper:color-mix(in srgb,var(--pink) 7%,var(--mk-white));
  font-family:var(--font);font-feature-settings:"tnum" 1,"lnum" 1;
}
@supports not (color:color-mix(in srgb,red,blue)){
  .mk{--mk-pink-tint:rgba(var(--fg-rgb),.06);--mk-pink-line:var(--hair-2);--mk-pink-paper:#fff}
}
.mk,.mk *,.mk *::before,.mk *::after{box-sizing:border-box}
.mk p,.mk ul,.mk ol,.mk figure{margin:0}
.mk ul,.mk ol{list-style:none;padding:0}
.mk svg{display:block}
.mk i{font-style:normal}
/* שני סוגי כרטיס: לבן (מוצר של גוגל, Notion, טלגרם) ובצבעי הנושא (הכלים של קורן) */
.mk-w{background:var(--mk-white);color:var(--mk-ink);border-radius:var(--r-m);box-shadow:0 0 0 1px var(--hair),var(--shadow-s)}
.mk-t{background:var(--tile-2);color:var(--text);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--hair)}
/* קו טקסט מדומה */
.mk-ln{display:block;height:9px;border-radius:5px;background:rgba(var(--fg-rgb),.1)}
.mk-w .mk-ln{background:var(--mk-soft)}
/* נקודת סטטוס ירוקה */
.mk-dot{position:relative;flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mk-ok)}
.mk-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--mk-ok);opacity:0}

/* המוקאפ בתוך העמודה הדביקה של "מה כלול" */
.inc__shot--mk{justify-content:space-between}
.inc__shot--mk .mk{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:var(--pad);margin-block-end:clamp(14px,2.2vh,26px)}
.inc__shot--mk .mk>*{flex:none}
@media (max-width:1000px){
  .inc__row>.inc__shot--mk .mk{margin:16px 16px 0}
}

/* ---------- 1. תוצאות גוגל, ראש עמוד הקידום ---------- */
.mk-serp{width:min(100%,600px);margin-inline:auto;display:grid;gap:14px}
.mk-serp__card{padding:16px 18px 18px}
.mk-serp__q{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--mk-white);box-shadow:0 0 0 1px var(--mk-line),0 1px 6px rgba(32,33,36,.16);font-size:16px;font-weight:500;color:var(--mk-ink)}
.mk-serp__q svg{width:20px;height:20px;flex:none;margin-inline-start:auto;color:var(--mk-blue)}
.mk-serp__tabs{display:flex;gap:22px;margin:12px 8px 0;border-block-end:1px solid var(--mk-line);font-size:13px;color:var(--mk-ink-3)}
.mk-serp__tabs span{padding-block:9px 10px}
.mk-serp__tabs span:first-child{color:var(--mk-blue);box-shadow:inset 0 -3px 0 var(--mk-blue)}
.mk-serp__list{display:grid;gap:10px;margin-block-start:14px}
.mk-serp__r{position:relative;display:grid;gap:5px;padding:12px 12px 13px;border-radius:12px}
.mk-serp__site{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--mk-ink-2)}
.mk-serp__fav{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mk-soft);font-size:13px;font-weight:600;color:var(--mk-ink-2)}
.mk-serp__site b{font-weight:500;color:var(--mk-ink)}
.mk-serp__site small{font-size:12px;color:var(--mk-ink-3);direction:ltr;unicode-bidi:isolate}
.mk-serp__t{font-size:18px;line-height:1.3;font-weight:400;color:var(--mk-link)}
.mk-serp__s{font-size:14px;line-height:1.5;color:var(--mk-ink-2)}
/* שתי התוצאות הראשונות מסומנות כקווים, כדי לא להמציא שם של מתחרה */
.mk-serp__r--sk .mk-serp__site{gap:10px}
.mk-serp__r--sk .mk-serp__site .mk-ln{width:34%;height:8px}
.mk-serp__ln--t{height:14px;width:72%;background:var(--mk-line)}
.mk-serp__r--sk .mk-serp__s{display:grid;gap:7px;margin-block-start:3px}
/* התוצאה השלישית, הלקוח */
.mk-serp__r--hit{background:var(--mk-pink-paper);box-shadow:0 0 0 1.5px var(--pink);margin-block-start:6px}
.mk-serp__r--hit .mk-serp__fav{background:var(--pink-fill,#D62B6E);color:#fff}
.mk-serp__pos{position:absolute;inset-block-start:-13px;inset-inline-start:-11px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pink-fill,#D62B6E);color:#fff;font-weight:700;font-size:14px;line-height:1;box-shadow:0 0 0 3px var(--mk-white)}
.mk-serp__tag{position:absolute;inset-block-start:-13px;inset-inline-end:12px;padding:5px 11px;border-radius:999px;background:var(--pink-fill,#D62B6E);color:#fff;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 0 0 3px var(--mk-white)}
.mk-serp__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mk-serp__chips li{padding:8px 15px;border-radius:999px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;line-height:1.3;color:var(--text-2)}
.mk-serp__chips b{font-weight:600;color:var(--text)}

/* ---------- 2. מה כלול בקידום ---------- */
/* 01 מחקר: טבלת ביטויים עם מדדים איכותיים, בלי מספרים */
.mk-kw{padding:18px 20px 6px}
.mk__h{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--grey);margin-block-end:8px}
.mk-kw__row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr);align-items:center;gap:14px;padding-block:13px;border-block-start:1px solid var(--hair);font-size:15px;line-height:1.3}
.mk-kw__row--h{border:0;padding-block:4px 10px;font-size:12.5px;color:var(--grey)}
.mk-kw__row>span:first-child{font-weight:500;color:var(--text);text-wrap:balance}
.mk-kw__row--pick>span:first-child{color:var(--pink-ink)}
.mk-bar{position:relative;display:block;height:8px;border-radius:4px;background:rgba(var(--fg-rgb),.08);overflow:hidden}
.mk-bar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w,50%);border-radius:inherit;background:var(--text-2);transform-origin:100% 50%}
.mk-bar--c::before{background:var(--grey)}
.mk-kw__row--pick .mk-bar:not(.mk-bar--c)::before{background:var(--pink-ink)}

/* 02 תוכן: כרטיס מאמר בפורמט של הבלוג */
.mk-post{padding:20px 22px 18px;gap:12px}
.mk-post__m{font-size:13px;color:var(--grey)}
.mk-post__t{font-weight:700;font-size:clamp(18px,1.55vw,23px);line-height:1.24;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.mk-post__tldr{padding:14px 16px;border-radius:var(--r-s);background:var(--mk-pink-tint);box-shadow:inset 0 0 0 1px var(--mk-pink-line);font-size:14.5px;line-height:1.5;color:var(--text)}
.mk-post__tldr b{display:block;margin-block-end:3px;font-weight:600;color:var(--pink-ink)}
.mk-post__body{display:grid;gap:8px;padding-block:4px}
.mk-post__faq{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-s);background:rgba(var(--fg-rgb),.05);box-shadow:inset 0 0 0 1px var(--hair);font-size:14.5px;font-weight:600;color:var(--text)}
.mk-post__faq svg{width:16px;height:16px;color:var(--grey)}

/* 03 טכני: מד מהירות בסגנון PageSpeed, ירוק, בלי ציון */
.mk-psi{padding:18px 20px 20px;gap:14px;align-items:stretch}
.mk-psi .mk__h{color:var(--mk-ink-3)}
.mk-psi__g{width:min(52%,150px);margin-inline:auto}
.mk-psi__g svg{width:100%;height:auto}
.mk-psi__bg{fill:var(--mk-green-soft)}
.mk-psi__track{fill:none;stroke:var(--mk-green-soft);stroke-width:9}
.mk-psi__arc{fill:none;stroke:var(--mk-green);stroke-width:9;stroke-linecap:round;stroke-dasharray:300 327;transform:rotate(-90deg);transform-origin:50% 50%;transform-box:fill-box}
.mk-psi__ok{fill:none;stroke:var(--mk-green);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%;transform-box:fill-box}
.mk-psi__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.mk-psi__l li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--mk-soft);font-size:14px;font-weight:500;color:var(--mk-ink)}
.mk-psi__l .mk-dot{background:var(--mk-green)}
.mk-psi__l .mk-dot::after{display:none}

/* 04 GEO: שיחה עם מנוע AI שמצטט את האתר */
.mk-chat{padding:18px 20px 20px;gap:14px}
.mk-chat__u{justify-self:start;align-self:start;max-width:88%;padding:11px 15px;border-radius:18px;border-start-start-radius:6px;background:var(--tile-3);font-size:15px;line-height:1.45;color:var(--text)}
.mk-chat__a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.mk-chat__av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.02em}
.mk-chat__txt{font-size:15px;line-height:1.5;color:var(--text-2)}
.mk-chat__src{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:12px}
.mk-chat__src>span{font-size:12.5px;font-weight:600;color:var(--grey);margin-inline-end:2px}
.mk-chat__cite{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--mk-pink-tint);box-shadow:inset 0 0 0 1px var(--pink);font-size:13.5px;font-weight:600;color:var(--text)}
.mk-chat__cite small{font-size:12px;font-weight:400;color:var(--text-2);direction:ltr;unicode-bidi:isolate}
.mk-chat__src .mk-ln{width:76px;height:26px;border-radius:999px}

/* 05 קישורים פנימיים: שלושה מאמרים שמצביעים על עמוד השירות */
.mk-graph{padding:18px 20px 16px}
.mk-graph__box{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto}
.mk-graph__ln{position:absolute;left:var(--x);top:var(--y);width:var(--l);height:2px;margin-top:-1px;background:var(--hair-2);transform:rotate(var(--a));transform-origin:0 50%}
.mk-graph__ln b{position:absolute;top:-3px;left:0;width:100%;height:8px}
.mk-graph__ln b::after{content:"";position:absolute;top:0;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--pink-ink)}
.mk-graph__n{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;gap:2px;width:max-content;max-width:124px;padding:9px 13px;border-radius:12px;background:var(--tile-3);box-shadow:0 0 0 1px var(--hair);text-align:center;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--text)}
.mk-graph__n small{font-size:12px;font-weight:400;color:var(--text-2)}
.mk-graph__n--c{max-width:136px;padding:11px 15px;background:var(--tile);box-shadow:0 0 0 1.5px var(--pink);font-size:13.5px}
.mk-graph__n--c small{color:var(--pink-ink)}

/* 06 דיווח: גרף עולה בסגנון Search Console, בלי מספרים */
.mk-gsc{padding:16px 18px 18px;gap:14px}
.mk-gsc__h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.mk-gsc__t{font-size:14px;font-weight:500;color:var(--mk-ink)}
.mk-gsc__lg{display:flex;gap:14px;font-size:12.5px;color:var(--mk-ink-2)}
.mk-gsc__lg li{display:flex;align-items:center;gap:7px}
.mk-gsc__lg li::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--mk-blue-2)}
.mk-gsc__lg li:nth-child(2)::before{background:var(--mk-purple)}
.mk-gsc__c{position:relative;overflow:hidden;direction:ltr;border-radius:8px}
.mk-gsc__c svg{width:100%;height:auto;aspect-ratio:320/150}
.mk-gsc__grid{stroke:var(--mk-line);stroke-width:1}
.mk-gsc__i{fill:none;stroke:var(--mk-purple);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mk-gsc__k{fill:none;stroke:var(--mk-blue-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mk-gsc__veil{position:absolute;inset:0;background:var(--mk-white);transform:translateX(100%)}

/* ---------- 3. וואטסאפ, ראש עמוד האוטומציות ---------- */
.mk-wa{position:relative;display:grid;justify-items:center;width:100%;padding-block:12px 10px}
.mk-wa__ph{width:clamp(220px,40%,268px);z-index:1}
.mk-wa__ph .dv__scr{position:relative}
.mk-wa__scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--mk-wa-bg);color:var(--mk-wa-text);font-size:12.5px;line-height:1.4}
.mk-wa__top{display:flex;align-items:center;gap:10px;padding:26px 12px 10px;background:var(--mk-wa-bar)}
.mk-wa__av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--mk-wa-green);color:#062a1f;font-size:11px;font-weight:700}
.mk-wa__who{display:grid;gap:1px;min-width:0}
.mk-wa__who b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-wa__who span{position:relative;display:block;height:14px;font-size:11px;color:var(--mk-wa-muted)}
.mk-wa__who span i{position:absolute;inset-inline-start:0;top:0;white-space:nowrap}
.mk-wa__who .mk-wa__st--typing{opacity:0;color:var(--mk-wa-green)}
.mk-wa__chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 10px;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px);background-size:14px 14px}
.mk-wa__m{max-width:86%;padding:7px 10px 6px;border-radius:12px;font-size:12.5px;line-height:1.42;box-shadow:0 1px 1px rgba(0,0,0,.35)}
.mk-wa__m small{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-block-start:3px;font-size:10px;color:var(--mk-wa-muted)}
.mk-wa__m small svg{width:13px;height:13px;color:#53bdeb}
/* הודעה יוצאת (הליד) משמאל, הודעה נכנסת (הבוט) מימין, כמו בוואטסאפ בעברית */
.mk-wa__m--out{align-self:flex-end;background:var(--mk-wa-out);border-end-end-radius:3px}
.mk-wa__m--in{align-self:flex-start;background:var(--mk-wa-in);border-end-start-radius:3px}
/* סימן ההקלדה והתשובה חולקים תא אחד, כדי שלא יישאר חור כשהסימן נעלם */
.mk-wa__slot{display:grid;justify-items:start;align-items:start}
.mk-wa__slot>*{grid-area:1/1}
.mk-wa__typing{display:flex;gap:4px;padding:10px 12px;border-radius:12px;border-end-start-radius:3px;background:var(--mk-wa-in);opacity:0}
.mk-wa__typing i{width:6px;height:6px;border-radius:50%;background:var(--mk-wa-muted)}
.mk-wa__note{align-self:center;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.08);font-size:10.5px;color:var(--mk-wa-text)}
.mk-wa__note b{color:var(--mk-wa-green);font-weight:600}
.mk-wa__in{display:flex;align-items:center;gap:8px;padding:8px 10px 12px;background:var(--mk-wa-bar)}
.mk-wa__in span{flex:1;min-height:30px;display:flex;align-items:center;padding-inline:12px;border-radius:999px;background:var(--mk-wa-bg);font-size:12px;color:var(--mk-wa-muted)}
.mk-wa__in i{width:30px;height:30px;border-radius:50%;background:var(--mk-wa-green);display:grid;place-items:center}
.mk-wa__in i svg{width:15px;height:15px;color:#062a1f}
/* שני הכרטיסים שנכנסים לצד הטלפון */
.mk-wa__card{position:absolute;z-index:2;width:min(52%,290px);padding:14px 16px 15px;font-size:13px;line-height:1.4;color:var(--mk-ink)}
.mk-wa__card--notion{inset-inline-end:0;inset-block-start:7%}
.mk-wa__card--tg{inset-inline-start:0;inset-block-end:6%}
.mk-wa__ct{display:flex;align-items:center;gap:8px;margin-block-end:10px;font-size:12.5px;font-weight:600;color:var(--mk-ink-3)}
.mk-wa__ct svg{width:16px;height:16px;flex:none}
.mk-wa__card--tg .mk-wa__ct svg{color:var(--mk-tg)}
.mk-wa__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:13px}
.mk-wa__row dt{color:var(--mk-ink-3)}
.mk-wa__row dd{margin:0;font-weight:500;color:var(--mk-ink)}
.mk-wa__row dd.ltr{direction:ltr;text-align:end}
.mk-wa__pill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--mk-green-soft);color:#137333;font-size:12px;font-weight:600}
.mk-wa__tg{padding:10px 12px;border-radius:12px;border-start-start-radius:4px;background:#eaf6fe;box-shadow:inset 0 0 0 1px rgba(42,171,238,.25)}
.mk-wa__tg b{display:block;margin-block-end:2px;font-weight:600;color:#0f6fa8}
.mk-wa__tg p{color:var(--mk-ink-2)}
.mk-wa__tg small{display:block;margin-block-start:6px;font-size:11px;color:var(--mk-ink-3);text-align:end}

/* ---------- 4. מה כלול בתחזוקה ---------- */
/* 01 אחסון ו-02 אבטחה: רשימת מצב עם נקודות ירוקות */
.mk-list{padding:18px 20px 8px}
.mk-list .mk__h{justify-content:space-between}
.mk-list .mk__h small{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.mk-list ul{display:grid}
.mk-list li{display:flex;align-items:center;gap:12px;padding-block:13px;border-block-start:1px solid var(--hair);font-size:15px;line-height:1.3}
.mk-list li span{flex:1;min-width:0;font-weight:500;color:var(--text)}
.mk-list li small{font-size:13px;color:var(--text-2)}
.mk-shield{width:min(34%,104px);margin:2px auto 14px}
.mk-shield svg{width:100%;height:auto}
.mk-shield__b{fill:var(--mk-pink-tint);stroke:var(--pink-ink);stroke-width:2;stroke-linejoin:round}
.mk-shield__c{fill:none;stroke:var(--pink-ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
/* 03 נגישות: תפריט נגישות בסגנון הווידג'טים בישראל */
.mk-a11y{padding:16px 18px 14px}
.mk-a11y__h{display:flex;align-items:center;gap:10px;padding-block-end:12px;border-block-end:1px solid var(--hair);font-size:15px;font-weight:600;color:var(--text)}
.mk-a11y__ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--pink-fill,#D62B6E);color:#fff}
.mk-a11y__ic svg{width:20px;height:20px}
.mk-a11y__h>svg{width:16px;height:16px;margin-inline-start:auto;color:var(--grey)}
.mk-a11y__l{display:grid}
.mk-a11y__l li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-block-end:1px solid var(--hair);font-size:14.5px;font-weight:500;color:var(--text)}
/* המתג: המסילה אפורה, הירוק הוא שכבה נפרדת שמופיעה ב-opacity, והכפתור זז ב-transform בלבד */
.mk-tg{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:rgba(var(--fg-rgb),.16)}
.mk-tg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mk-ok);opacity:0}
.mk-tg::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mk-tg--on::before{opacity:1}
.mk-tg--on::after{transform:translateX(-16px)}
.mk-a11y__f{display:flex;align-items:center;gap:8px;padding-block-start:12px;font-size:14px;font-weight:500;color:var(--pink-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mk-a11y__f svg{width:15px;height:15px}

/* ---------- 5. תנועה ---------- */
@keyframes mkUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mkFade{from{opacity:0}to{opacity:1}}
@keyframes mkPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mkGrowX{from{transform:scaleX(0)}to{transform:none}}
@keyframes mkRun{from{transform:translateX(-100%)}to{transform:none}}
@keyframes mkVeil{from{transform:none}to{transform:translateX(100%)}}
@keyframes mkPulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes mkToggle{0%,55%{opacity:0}100%{opacity:1}}
@keyframes mkKnob{0%,55%{transform:none}100%{transform:translateX(-16px)}}
/* שיחת וואטסאפ: מחזור של 12 שניות, כל אלמנט עם הקטע שלו */
@keyframes mkWaLead{0%,3%{opacity:0;transform:translateY(8px) scale(.96)}8%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mkWaTyping{0%,12%{opacity:0;transform:translateY(6px)}15%,29%{opacity:1;transform:none}32%,100%{opacity:0;transform:none}}
@keyframes mkWaSt{0%,12%{opacity:0}15%,29%{opacity:1}32%,100%{opacity:0}}
@keyframes mkWaStBase{0%,12%{opacity:1}15%,29%{opacity:0}32%,100%{opacity:1}}
@keyframes mkWaReply{0%,33%{opacity:0;transform:translateY(8px) scale(.96)}37%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mkWaNote{0%,41%{opacity:0;transform:translateY(4px)}45%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mkWaNotion{0%,48%{opacity:0;transform:translate(-14px,8px) scale(.96)}53%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mkWaTg{0%,60%{opacity:0;transform:translate(14px,8px) scale(.96)}65%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mkBounce{0%,60%,100%{transform:none;opacity:.55}30%{transform:translateY(-3px);opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* ראש עמוד הקידום: נחשף עם המחלקה in של הבמה */
  .in .mk-serp__r{animation:mkUp .8s var(--ease) .25s both}
  .in .mk-serp__r:nth-child(2){animation-delay:.38s}
  .in .mk-serp__r:nth-child(3){animation-delay:.52s}
  .in .mk-serp__pos,.in .mk-serp__tag{animation:mkPop .7s var(--ease-b,var(--ease)) .95s both}
  .in .mk-serp__chips li{animation:mkUp .7s var(--ease) both}
  .in .mk-serp__chips li:nth-child(1){animation-delay:1.05s}
  .in .mk-serp__chips li:nth-child(2){animation-delay:1.15s}
  .in .mk-serp__chips li:nth-child(3){animation-delay:1.25s}
  /* מה כלול: כל מוקאפ מתחיל מחדש כשהשלב שלו נהיה פעיל */
  .on .mk-bar::before{animation:mkGrowX .9s var(--ease) both}
  .on .mk-kw__row:nth-child(3) .mk-bar::before{animation-delay:.08s}
  .on .mk-kw__row:nth-child(4) .mk-bar::before{animation-delay:.16s}
  .on .mk-kw__row:nth-child(5) .mk-bar::before{animation-delay:.24s}
  .on .mk-kw__row:nth-child(6) .mk-bar::before{animation-delay:.32s}
  .on .mk-post__tldr{animation:mkUp .8s var(--ease) .2s both}
  .on .mk-post__faq{animation:mkUp .8s var(--ease) .38s both}
  .on .mk-psi__g{animation:mkPop .9s var(--ease) both}
  .on .mk-psi__ok{animation:mkPop .6s var(--ease-b,var(--ease)) .5s both}
  .on .mk-psi__l li{animation:mkUp .6s var(--ease) both}
  .on .mk-psi__l li:nth-child(1){animation-delay:.55s}
  .on .mk-psi__l li:nth-child(2){animation-delay:.63s}
  .on .mk-psi__l li:nth-child(3){animation-delay:.71s}
  .on .mk-psi__l li:nth-child(4){animation-delay:.79s}
  .on .mk-chat__u{animation:mkUp .7s var(--ease) both}
  .on .mk-chat__txt{animation:mkFade .9s var(--ease) .35s both}
  .on .mk-chat__src{animation:mkUp .7s var(--ease) .9s both}
  .on .mk-graph__n{animation:mkFade .7s var(--ease) both}
  .on .mk-graph__n--c{animation-delay:.3s}
  .on .mk-graph__ln{animation:mkFade .7s var(--ease) .2s both}
  .on .mk-graph__ln b{animation:mkRun 2.6s linear .5s infinite}
  .on .mk-graph__ln:nth-child(2) b{animation-delay:1.3s}
  .on .mk-graph__ln:nth-child(3) b{animation-delay:2.1s}
  .on .mk-gsc__veil{animation:mkVeil 1.7s var(--ease) .15s both}
  .on .mk-gsc__lg li{animation:mkFade .6s var(--ease) .3s both}
  /* אחסון, אבטחה ונגישות */
  .on .mk-list li{animation:mkUp .6s var(--ease) both}
  .on .mk-list li:nth-child(2){animation-delay:.1s}
  .on .mk-list li:nth-child(3){animation-delay:.2s}
  .on .mk-list li:nth-child(4){animation-delay:.3s}
  .on .mk-list .mk-dot::after{animation:mkPulse 2.4s var(--ease) 1s infinite}
  .on .mk-list li:nth-child(2) .mk-dot::after{animation-delay:1.6s}
  .on .mk-list li:nth-child(3) .mk-dot::after{animation-delay:2.2s}
  .on .mk-list li:nth-child(4) .mk-dot::after{animation-delay:2.8s}
  .on .mk-shield{animation:mkPop .9s var(--ease) both}
  .on .mk-shield__c{animation:mkFade .5s var(--ease) .5s both}
  .on .mk-a11y__l li{animation:mkUp .6s var(--ease) both}
  .on .mk-a11y__l li:nth-child(2){animation-delay:.08s}
  .on .mk-a11y__l li:nth-child(3){animation-delay:.16s}
  .on .mk-a11y__l li:nth-child(4){animation-delay:.24s}
  .on .mk-a11y__l li:first-child .mk-tg--on::before{animation:mkToggle 1.3s var(--ease) both}
  .on .mk-a11y__l li:first-child .mk-tg--on::after{animation:mkKnob 1.3s var(--ease) both}
  /* וואטסאפ: לולאה */
  .mk-wa__m--out{animation:mkWaLead 12s var(--ease) infinite}
  .mk-wa__typing{animation:mkWaTyping 12s var(--ease) infinite}
  .mk-wa__typing i{animation:mkBounce 1.1s ease-in-out infinite}
  .mk-wa__typing i:nth-child(2){animation-delay:.15s}
  .mk-wa__typing i:nth-child(3){animation-delay:.3s}
  .mk-wa__st--typing{animation:mkWaSt 12s linear infinite}
  .mk-wa__st--base{animation:mkWaStBase 12s linear infinite}
  .mk-wa__m--in{animation:mkWaReply 12s var(--ease) infinite}
  .mk-wa__note{animation:mkWaNote 12s var(--ease) infinite}
  .mk-wa__card--notion{animation:mkWaNotion 12s var(--ease) infinite}
  .mk-wa__card--tg{animation:mkWaTg 12s var(--ease) infinite}
}
@media (prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation:none!important;transition:none!important}
}

/* ---------- 6. מצב בהיר ---------- */
/* הכרטיס הלבן על עמוד בהיר צריך קו מתאר, והכרטיס בצבעי הנושא מקבל רקע מעט כהה יותר מהאריח */
html[data-theme="light"] .mk-w{box-shadow:0 0 0 1px var(--hair-2),var(--shadow-s)}
html[data-theme="light"] .mk-t{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
html[data-theme="light"] .mk-chat__av{background:var(--text);color:var(--bg)}
html[data-theme="light"] .mk-post__faq{background:var(--tile)}
html[data-theme="light"] .mk-graph__n{background:var(--tile-2)}

/* ---------- 7. דסקטופ: העמודה הדביקה רחבה, ולכן המוקאפים גדולים מעט יותר ---------- */
@media (min-width:1001px){
  .mk__h{font-size:14px}
  .mk-kw__row{font-size:16px;padding-block:15px}
  .mk-graph__box{width:min(100%,380px,calc(100vh - 440px))}
  .mk-graph__n{max-width:140px;font-size:13.5px;padding:10px 14px}
  .mk-graph__n--c{max-width:152px;font-size:14.5px}
  .mk-psi__g{width:min(50%,170px)}
  .mk-psi__l li{font-size:15px;padding:12px 14px}
  .mk-chat__u,.mk-chat__txt{font-size:16px}
  .mk-list li{font-size:16px;padding-block:14px}
  .mk-a11y__l li{font-size:15.5px;padding-block:13px}
}

/* ---------- 8. טאבלט וטלפון ---------- */
@media (max-width:1000px){
  .mk-wa{padding-block:6px 0}
}
@media (max-width:760px){
  .mk-serp__card{padding:14px 14px 16px}
  .mk-serp__q{font-size:15px;min-height:42px;padding-inline:14px}
  .mk-serp__tabs{gap:16px;margin-inline:4px}
  .mk-serp__t{font-size:16.5px}
  .mk-serp__s{font-size:13.5px}
  .mk-serp__tag{font-size:11.5px;padding:4px 9px}
  .mk-serp__chips li{font-size:13.5px;padding:7px 12px}
  .mk-kw{padding:14px 14px 4px}
  .mk-kw__row{gap:10px;font-size:14px;padding-block:11px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.7fr)}
  .mk-post{padding:16px 16px 14px}
  .mk-post__t{font-size:18px}
  .mk-psi{padding:14px 14px 16px}
  .mk-psi__g{width:min(46%,130px)}
  .mk-chat{padding:14px 14px 16px}
  .mk-chat__u,.mk-chat__txt{font-size:14px}
  .mk-graph{padding:14px 14px 12px}
  .mk-graph__box{width:min(100%,300px)}
  .mk-graph__n{max-width:128px;padding:8px 10px;font-size:12px}
  .mk-graph__n--c{max-width:124px}
  .mk-gsc{padding:14px}
  .mk-list,.mk-a11y{padding:14px 14px 6px}
  .mk-a11y{padding-block-end:12px}
  .mk-list li{font-size:14px;padding-block:11px}
  /* וואטסאפ בטלפון: הטלפון במרכז ושני הכרטיסים מתחתיו, זה לצד זה */
  .mk-wa{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-block:0}
  .mk-wa__ph{grid-column:1/-1;width:min(60%,232px)}
  .mk-wa__card{position:static;width:100%;padding:12px 13px 13px;font-size:12.5px}
  .mk-wa__ct{font-size:12px;margin-block-end:8px}
  .mk-wa__row{grid-template-columns:auto minmax(0,1fr);gap:5px 8px;font-size:12.5px}
  .mk-wa__tg{padding:9px 10px}
  .mk-wa__tg p{font-size:12.5px}
}
