/* =========================================================
   עמודי הפרויקטים: "כל הפרויקטים" (projects.html) ועמוד פרויקט (project.html?p=...)
   בשפה של דף הבית (גרסה א'). העיקרון: הכול יושב על 6 העמודות של הגריד (בלי רווחים ביניהן),
   כך שכל קצה של כרטיס, טבלה או טקסט נופל בדיוק על קו, וסימני החיתוך יושבים על החיתוך של הקווים
   ========================================================= */
:root{
  --paper:#F7F6F2; --ink:#141414; --ease-move:cubic-bezier(.58,0,.07,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --star-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 44 44'%3E%3Cpath d='M32 10c2.6 15.6 6.4 19.4 22 22-15.6 2.6-19.4 6.4-22 22-2.6-15.6-6.4-19.4-22-22 15.6-2.6 19.4-6.4 22-22z'/%3E%3C/svg%3E");
  --grad:linear-gradient(100deg, #FF8A6A 0%, #F0437F 40%, #B23CF0 75%, #6D45F5 100%);
  --cols:6; --gut:clamp(14px, 1.4vw, 22px);   /* ריווח פנימי בתוך עמודה, כדי שטקסט לא ייגע בקו */
  --line:rgb(20 20 20 / .1);
}
@media (max-width: 900px){ :root{ --cols:4; } }
html, body{ background:var(--paper); }
body.pg{ color:var(--ink); --ink-rgb:20 20 20; --bg:var(--paper); }
.pg main a{ color:inherit; text-decoration:none; }

/* קווי הגריד של האתר, לכל אורך העמוד */
.pg-grid-lines{ position:fixed; inset:0 var(--pad-x); z-index:0; pointer-events:none;
  background:repeating-linear-gradient(to right, rgb(20 20 20 / .055) 0 1px, transparent 1px calc(100% / var(--cols)));
  border-right:1px solid rgb(20 20 20 / .055); }
.pg main{ position:relative; z-index:1; }
/* גריד של 6 עמודות בלי רווחים: כל חלק בעמוד נבנה עליו */
.g6{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); column-gap:0; margin:0 var(--pad-x); }

/* ---------- רכיבים משותפים ---------- */
.pg-tag{ display:inline-flex; align-items:center; gap:9px; margin:0; font-size:16px; font-weight:500; flex-wrap:wrap; }
.pg-tag .st{ width:12px; height:12px; flex:none; background:currentColor; -webkit-mask:var(--star-m) center/contain no-repeat; mask:var(--star-m) center/contain no-repeat; transition:rotate 1.4s var(--ease-move); }
.pg-tag.in .st{ rotate:180deg; }
.pg-tag .sx{ font-family:var(--font-en); font-size:12px; letter-spacing:.08em; opacity:.45; direction:ltr; }
/* תווית "תוכן לדוגמה": כל מה שעוד לא אמיתי */
.demo{ display:inline-flex; align-items:center; height:22px; padding:0 10px; margin-inline-start:6px; border-radius:99px; vertical-align:middle;
  border:1px dashed rgb(240 67 127 / .6); color:#C2185B; background:rgb(240 67 127 / .06); font-size:11.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.pg-en{ margin:0; direction:ltr; font-family:var(--font-display); font-weight:400; font-synthesis:none; letter-spacing:-.015em; line-height:.86; }
.pg-en .w{ display:inline-block; white-space:nowrap; }
.pg-en .w:first-child{ opacity:.45; }

.pg .btn{ border-radius:999px; gap:12px; }
/* בלי רקע קבוע כאן: אחרת הוא דורס את מילוי הצבע במעבר עכבר (style.css) */
.pg .btn-primary{ height:52px; padding-inline:26px; }
.pg .btn-primary:not(:hover){ background:var(--ink); color:var(--paper); }
.pg .b-star{ width:12px; height:12px; flex:none; background:currentColor; -webkit-mask:var(--star-m) center/contain no-repeat; mask:var(--star-m) center/contain no-repeat; transition:transform .9s var(--ease-move); }
.pg .btn:hover .b-star{ transform:rotate(180deg); }
.lnk{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:8px 0 12px; font-size:15.5px; font-weight:600; }
.lnk::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor; transform-origin:0 0; }
.lnk:hover::after, a:hover .lnk::after{ animation:pgRedraw .9s var(--ease-move); }
@keyframes pgRedraw{ 0%{ transform:scaleX(1); transform-origin:0 0; } 45%{ transform:scaleX(0); transform-origin:0 0; } 46%{ transform:scaleX(0); transform-origin:100% 0; } 100%{ transform:scaleX(1); transform-origin:100% 0; } }
.lnk svg{ width:22px; height:16px; flex:none; transition:transform .6s var(--ease-move); }
.lnk:hover svg, a:hover .lnk svg{ transform:translateX(-5px); }

/* מסגרת: סימני החיתוך בפינות בדיוק על קווי הגריד, והמשטח בפנים במרווח קבוע */
.fr{ position:relative; padding:var(--gut); }
.pg-crop{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.pg-crop i{ position:absolute; width:20px; height:20px; border:0 solid var(--ink); transition:transform .9s var(--ease-move); }
.pg-crop i:nth-child(1){ top:-1px; right:-1px; border-top-width:1.5px; border-right-width:1.5px; transform-origin:100% 0; }
.pg-crop i:nth-child(2){ top:-1px; left:-1px; border-top-width:1.5px; border-left-width:1.5px; transform-origin:0 0; }
.pg-crop i:nth-child(3){ bottom:-1px; right:-1px; border-bottom-width:1.5px; border-right-width:1.5px; transform-origin:100% 100%; }
.pg-crop i:nth-child(4){ bottom:-1px; left:-1px; border-bottom-width:1.5px; border-left-width:1.5px; transform-origin:0 100%; }

/* משטח המוקאפ: מחשב + טלפון */
.pg-mock{ position:relative; overflow:hidden; background:var(--pbg, #ECE8E0); aspect-ratio:16 / 10; container-type:inline-size; border-radius:clamp(14px, 1.4vw, 22px); }
.pg-mock.wide{ aspect-ratio:21 / 9; }
.pg-mock .pc-laptop{ position:absolute; left:50%; top:52%; width:66cqw; --lw:66cqw; transform:translate(-56%, -50%); filter:drop-shadow(0 26px 30px rgb(0 0 0 / .22)); }
.pg-mock.wide .pc-laptop{ width:50cqw; --lw:50cqw; top:54%; }
.pg-mock .lap-screen, .pg-mock .lap-base{ display:block !important; }
.pg-mock .lap-view{ aspect-ratio:16 / 9; }
.pg-mock .pc-phone{ --ph:calc(var(--lw) * .62); position:absolute; right:calc(var(--pw) * -.5); bottom:calc(var(--lw) * -.012); margin:0; transform:none; filter:drop-shadow(-10px 20px 24px rgb(0 0 0 / .3)); }
.pg-mock .mk-in{ position:absolute; inset:0; will-change:transform; }

/* ---------- כניסות: עולות מתוך מסיכה (pages.js מוסיף .in כשנכנסים למסך) ---------- */
.rv{ opacity:0; translate:0 30px; transition:opacity 1s var(--ease-out), translate 1.2s var(--ease-out); transition-delay:var(--d, 0ms); }
.rv.in{ opacity:1; translate:none; }
.ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.ln > i{ display:block; font-style:normal; translate:0 105%; transition:translate 1.25s var(--ease-move); transition-delay:var(--d, 0ms); }
.ln.in > i{ translate:none; }
.pg-en .ch{ display:inline-block; overflow:hidden; padding-top:.12em; margin-top:-.12em; vertical-align:top; }
.pg-en .ch > i{ display:block; font-style:normal; translate:0 110%; transition:translate 1.3s var(--ease-move); transition-delay:calc(var(--d, 0ms) + var(--i) * 45ms); }
.pg-en.in .ch > i{ translate:none; }
.frame-rv{ clip-path:inset(100% 0 0 0 round clamp(14px, 1.4vw, 22px)); transition:clip-path 1.5s var(--ease-move); transition-delay:var(--d, 0ms); }
.frame-rv .mk-in{ scale:1.12; transition:scale 1.8s var(--ease-move); transition-delay:var(--d, 0ms); }
.fr.in .frame-rv{ clip-path:inset(0 0 0 0 round clamp(14px, 1.4vw, 22px)); }
.fr.in .frame-rv .mk-in{ scale:1; }
.crop-rv i{ opacity:0; scale:.3; transition:opacity .6s, scale 1.1s var(--ease-move); transition-delay:calc(var(--d, 0ms) + 450ms); }
.fr.in .crop-rv i{ opacity:1; scale:1; }
@media (prefers-reduced-motion: reduce){
  .rv, .ln > i, .pg-en .ch > i, .frame-rv, .frame-rv .mk-in, .crop-rv i{ transition:none !important; opacity:1 !important; translate:none !important; scale:none !important; clip-path:none !important; }
}

/* =========================================================
   כל הפרויקטים
   ========================================================= */
/* פתיחה: התווית והמשפט בשתי העמודות הימניות, המונה בשמאלית, והכותרת לכל הרוחב */
.pg-hero{ padding:clamp(48px, 7vw, 110px) 0 clamp(30px, 4vw, 56px); row-gap:clamp(28px, 4vw, 56px); align-items:start; }
.pg-hero .hd{ grid-column:1 / span 2; padding-inline:var(--gut); display:grid; gap:16px; }
.pg-hero .sub{ margin:0; font-size:clamp(17px, 1.25vw, 20px); line-height:1.65; opacity:.75; }
.pg-hero .count{ grid-column:-2 / -1; justify-self:end; margin:0; padding-inline:var(--gut); font-family:var(--font-en); font-size:12.5px; letter-spacing:.14em; direction:ltr; opacity:.5; }
.pg-hero .pg-en{ grid-column:1 / -1; grid-row:2; font-size:clamp(76px, 13vw, 240px); padding-inline:var(--gut); }

/* סינון לפי סוג */
.pg-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:0 var(--pad-x); padding:0 var(--gut) clamp(36px, 4vw, 60px); }
.pg-filter button{ height:44px; padding:0 22px; border-radius:999px; border:1px solid rgb(20 20 20 / .22); background:var(--paper); color:var(--ink);
  font:inherit; font-size:15px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:background .5s, color .5s, border-color .5s; }
.pg-filter button sup{ font-family:var(--font-en); font-size:10px; opacity:.5; }
.pg-filter button:hover{ border-color:var(--ink); }
.pg-filter button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* הכרטיסים: המוביל ברוחב מלא (4 עמודות מוקאפ + 2 טקסט), ושאר הפרויקטים בשורות שוות של שניים (3+3) */
.pg-list{ row-gap:clamp(60px, 7vw, 120px); padding-bottom:clamp(90px, 10vw, 160px); border-top:1px solid var(--line); padding-top:clamp(40px, 4vw, 64px); }
.pg-card{ grid-column:span 3; display:flex; flex-direction:column; transition:opacity .6s, translate .8s var(--ease-out); }
.pg-card[hidden]{ display:none; }
.pg-card.out{ opacity:0; translate:0 24px; }
.pg-card .meta{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:10px; padding:22px var(--gut) 0; }
.pg-card .n{ font-family:var(--font-en); font-size:12px; letter-spacing:.1em; opacity:.45; direction:ltr; padding-top:.7em; }
.pg-card .tt{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 18px; flex-wrap:wrap; }
.pg-card h2{ margin:0; font-size:clamp(24px, 2.1vw, 36px); font-weight:600; line-height:1.15; }
.pg-card .ty{ margin:0; font-size:14px; opacity:.55; }
.pg-card .ds{ grid-column:2; margin:0; font-size:16px; line-height:1.6; opacity:.72; max-width:48ch; }
.pg-card .lnk{ grid-column:2; justify-self:start; }
.pg-card .pg-mock .mk-in{ transition:scale 1.2s var(--ease-move); }
.pg-card:hover .pg-mock .mk-in{ scale:1.035; }
.pg-card:hover .pg-crop i{ transform:scale(1.35); }
.pg-card.lead{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); align-items:end; }
.pg-card.lead .fr{ grid-column:1 / span 4; grid-row:1; }
.pg-card.lead .meta{ grid-column:5 / span 2; grid-row:1; align-self:end; padding:0 var(--gut) var(--gut); }
.pg-card.lead h2{ font-size:clamp(34px, 3.4vw, 60px); }
.pg-card.lead .tt{ flex-direction:column; align-items:flex-start; }
.pg-card.lead .pg-mock{ aspect-ratio:16 / 9.4; }

/* אינדקס: טבלה שהעמודות שלה הן עמודות הגריד */
.pg-index{ padding-bottom:clamp(80px, 9vw, 140px); }
.ix-head{ grid-column:1 / -1; padding:0 var(--gut) 24px; }
.ix-row{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center; min-height:76px; border-top:1px solid var(--line);
  transition:background .5s, opacity .5s, color .4s; position:relative; }
.ix-row > *{ padding:0 var(--gut); }
.ix-row:last-child{ border-bottom:1px solid var(--line); }
.ix-row .n{ font-family:var(--font-en); font-size:12px; letter-spacing:.1em; opacity:.45; }
.ix-row strong{ font-size:clamp(19px, 1.5vw, 24px); font-weight:600; }
.ix-row span{ font-size:15px; opacity:.7; }
.ix-row .dm{ direction:ltr; text-align:right; font-size:14px; }
.ix-row .go{ justify-self:end; opacity:1; }
.ix-row .go svg{ width:24px; height:16px; transition:transform .6s var(--ease-move); }
.ix-cols{ min-height:44px; border-top:0; }
.ix-cols span{ font-size:12.5px !important; opacity:.45 !important; }
a.ix-row:hover{ background:var(--ink); color:var(--paper); }
a.ix-row:hover .go svg{ transform:translateX(-8px); }
a.ix-row.dim{ opacity:.25; }
.ix-row > :nth-child(1){ grid-column:1; } .ix-row > :nth-child(2){ grid-column:2; } .ix-row > :nth-child(3){ grid-column:3; }
.ix-row > :nth-child(4){ grid-column:4; } .ix-row > :nth-child(5){ grid-column:5; } .ix-row > :nth-child(6){ grid-column:6; }

/* סמן שעוקב אחרי העכבר: "לצפייה" מעל כרטיס, ועינית עם המוקאפ מעל שורה באינדקס */
.pg-cursor{ position:fixed; left:0; top:0; z-index:60; pointer-events:none; }
.pg-cursor .lb{ position:absolute; left:0; top:0; translate:-50% -50%; display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 20px; border-radius:999px;
  background:var(--ink); color:var(--paper); font-size:14.5px; font-weight:600; white-space:nowrap; scale:.3; opacity:0; transition:scale .5s var(--ease-out), opacity .3s; }
.pg-cursor.on .lb{ scale:1; opacity:1; }
.pg-cursor .b-star{ width:11px; height:11px; background:currentColor; -webkit-mask:var(--star-m) center/contain no-repeat; mask:var(--star-m) center/contain no-repeat; animation:pgSpin 6s linear infinite; }
@keyframes pgSpin{ to{ rotate:360deg; } }
.pg-cursor .pv{ position:absolute; left:28px; top:0; translate:0 -50%; width:300px; aspect-ratio:16 / 10; opacity:0; scale:.85; transition:opacity .35s, scale .6s var(--ease-out); }
.pg-cursor.ix .pv{ opacity:1; scale:1; }
.pv-i{ position:absolute; inset:0; padding:10px; opacity:0; transition:opacity .3s; }
.pv-i.on{ opacity:1; }
.pv-i .pg-mock{ height:100%; aspect-ratio:auto; box-shadow:0 30px 60px -30px rgb(0 0 0 / .4); }
@media (hover: none), (pointer: coarse){ .pg-cursor{ display:none; } }

/* =========================================================
   עמוד פרויקט
   ========================================================= */
.pj-hero{ padding:clamp(40px, 5vw, 80px) 0 0; row-gap:clamp(28px, 3.5vw, 52px); align-items:end; }
.pj-hero .hd{ grid-column:1 / span 4; padding-inline:var(--gut); }
.crumb{ display:flex; gap:10px; margin:0 0 18px; font-size:15px; }
.crumb a{ opacity:.6; transition:opacity .3s; } .crumb a:hover{ opacity:1; }
.crumb span{ opacity:.35; } .crumb span[lang]{ font-family:var(--font-en); font-size:12.5px; letter-spacing:.1em; align-self:center; }
.pj-hero h1{ margin:0; font-size:clamp(52px, 7.4vw, 140px); font-weight:700; line-height:.98; letter-spacing:-.015em; }
.pj-hero .lead{ margin:clamp(20px, 2.4vw, 34px) 0 0; font-size:clamp(18px, 1.55vw, 25px); line-height:1.55; max-width:40ch; }
/* שורת עובדות: כל פרט בעמודה משלו, על הקווים */
.pj-facts{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; margin:0; border-top:1px solid var(--line); }
.pj-facts > div{ padding:18px var(--gut) 0; display:grid; gap:6px; align-content:start; }
.pj-facts dt{ font-size:13px; opacity:.5; }
.pj-facts dd{ margin:0; font-size:clamp(15px, 1.15vw, 18px); font-weight:600; }
.pj-facts dd a{ direction:ltr; unicode-bidi:isolate; border-bottom:1px solid rgb(20 20 20 / .25); }
.pj-facts .cta{ grid-column:5 / span 2; justify-self:end; padding-top:8px; }
.pj-show{ grid-column:1 / -1; }

/* מבלגן לסדר: אזור נעוץ. מימין הטקסט (האתגר › הסדר), משמאל הקופסה עם פריטי המידע */
.pj-story{ position:relative; height:290vh; margin-top:clamp(60px, 8vw, 120px); }
.st-stage{ position:sticky; top:0; height:100vh; height:100svh; display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); align-items:center;
  margin:0 var(--pad-x); padding-top:calc(var(--header-h, 84px) * .6); }
.st-txt{ grid-column:1 / span 2; position:relative; padding-inline:var(--gut); align-self:center; min-height:360px; }
.st-a, .st-b{ position:absolute; inset:0 var(--gut) auto; display:grid; gap:18px; align-content:start; will-change:transform, opacity; }
.st-b{ opacity:0; }
.st-h{ margin:0; font-size:clamp(34px, 3.4vw, 58px); font-weight:700; line-height:1.05; }
.st-txt p{ margin:0; font-size:clamp(17px, 1.3vw, 20px); line-height:1.65; opacity:.8; }
.st-prog{ position:absolute; inset:auto var(--gut) -10px; height:2px; background:var(--line); overflow:hidden; }
.st-prog i{ position:absolute; inset:0; background:var(--grad); transform-origin:100% 0; transform:scaleX(0); }
.st-box{ grid-column:3 / span 4; position:relative; height:min(72vh, 640px); margin-inline-start:var(--gut); background:#fff; border-radius:clamp(18px, 1.8vw, 28px); box-shadow:0 0 0 1px rgb(20 20 20 / .06); }
/* המבנה המסודר: עמודה לכל קבוצה (כותרת כהה + פריטים) */
.st-map{ position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:clamp(12px, 1.6vw, 26px); align-content:center; padding:clamp(24px, 3vw, 48px); }
.st-g{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.st-hd{ align-self:stretch; }
/* הקווים של העץ: מתחת לכל כותרת, קו שמחבר את הפריטים (מופיע בסוף הסידור) */
.st-g::before{ content:""; position:absolute; top:44px; bottom:18px; right:18px; width:1px; background:rgb(20 20 20 / .18); transform-origin:50% 0; transform:scaleY(var(--lines, 0)); }
.st-hd{ display:flex; align-items:center; height:44px; padding:0 18px; border-radius:12px; background:var(--ink); color:var(--paper); font-size:clamp(15px, 1.15vw, 18px); font-weight:700; opacity:0; }
.st-it{ position:relative; z-index:1; display:flex; align-items:center; height:42px; padding:0 16px; margin-inline-start:30px; border-radius:999px; background:var(--paper);
  border:1px solid rgb(20 20 20 / .2); font-size:clamp(13.5px, 1vw, 15.5px); font-weight:500; white-space:nowrap; will-change:transform; transition:background .5s, border-color .5s; }
.st-it.set{ background:#fff; border-color:rgb(20 20 20 / .35); }

/* כותרת אזור */
.pj-sec{ padding-top:clamp(90px, 10vw, 160px); }
.pj-sec-head{ grid-column:1 / -1; display:grid; gap:16px; padding:0 var(--gut) clamp(34px, 4vw, 60px); }
.pj-h{ margin:0; font-size:clamp(36px, 4vw, 70px); font-weight:700; line-height:1.05; }
/* שלוש החלטות: כל אחת בשתי עמודות, עם קו עליון ומספר גדול */
.pj-dec{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; list-style:none; margin:0; padding:0; }
.pj-dec li{ grid-column:span 2; display:grid; gap:14px; align-content:start; padding:26px var(--gut) 0; border-top:1px solid var(--ink); }
.pj-dec b{ font-family:var(--font-display); font-weight:400; font-size:clamp(46px, 4.6vw, 84px); line-height:.85; opacity:.18; direction:ltr; text-align:right; }
.pj-dec h3{ margin:8px 0 0; font-size:clamp(21px, 1.8vw, 30px); font-weight:700; line-height:1.2; }
.pj-dec p{ margin:0; font-size:clamp(16px, 1.2vw, 19px); line-height:1.65; opacity:.75; max-width:36ch; }

/* התוצאה: משפט גדול, ואז העמוד המלא בטלפון + טלפון + מחשב, על הגריד */
.pj-big{ margin:8px 0 0; font-size:clamp(30px, 3.6vw, 64px); font-weight:700; line-height:1.15; max-width:22ch; }
.res-grid{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:end; row-gap:24px; }
.pj-browser{ margin:0 var(--gut); position:relative; border-radius:30px; overflow:hidden; background:#fff; box-shadow:0 50px 90px -40px rgb(0 0 0 / .35), 0 0 0 1px rgb(20 20 20 / .06); }
.pj-browser .bar{ display:flex; justify-content:center; padding:12px 16px; background:#E7E4DD; }
.pj-browser .bar span{ padding:3px 12px; border-radius:99px; background:#fff; font-size:12px; direction:ltr; opacity:.7; }
.pj-browser .win{ position:relative; max-height:min(72vh, 760px); overflow:hidden; transition:max-height 1.2s var(--ease-move); }
.pj-browser.open .win{ max-height:none; }
.pj-browser img{ display:block; width:100%; height:auto; }
.pj-browser .more{ position:absolute; inset:auto 0 0 0; display:grid; place-items:end center; height:170px; padding-bottom:26px; background:linear-gradient(transparent, #fff 70%); }
.pj-browser.open .more{ display:none; }
/* המחשב בארבע העמודות הימניות; בשתיים השמאליות העמוד המלא בטלפון (ואם אין צילום מלא: הטלפון) */
.res-desk{ grid-column:1 / span 4; grid-row:1; }
.pj-browser{ grid-column:5 / span 2; grid-row:1; }
.res-phone{ grid-column:5 / span 2; grid-row:1; display:grid; justify-items:center; align-self:center; }
.res-grid:has(.pj-browser) .res-phone{ display:none; }
.res-phone .pc-phone{ --ph:clamp(340px, 28vw, 480px); position:relative; margin:0; transform:none; filter:drop-shadow(0 30px 40px rgb(0 0 0 / .25)); }

/* הפרויקט הבא */
/* הפרויקט הבא: כרטיס על הגריד. הפרטים בשתי העמודות הימניות, המוקאפ בארבע השמאליות בתוך סימני החיתוך */
.pj-nav{ margin-top:clamp(110px, 12vw, 190px); padding-top:clamp(26px, 3vw, 40px); border-top:1px solid var(--ink); row-gap:clamp(24px, 3vw, 40px); }
.nv-head{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 var(--gut); }
.pj-next{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:end; }
.nx-txt{ grid-column:1 / span 2; display:grid; gap:14px; align-content:end; padding:0 var(--gut) var(--gut); }
.nx-txt h2{ margin:0; font-size:clamp(38px, 4.4vw, 78px); font-weight:700; line-height:1.02; letter-spacing:-.01em; }
.nx-txt .ty{ margin:0; font-size:14.5px; opacity:.55; }
.nx-txt .ds{ margin:0; font-size:16.5px; line-height:1.6; opacity:.75; max-width:34ch; }
.nx-txt .lnk{ justify-self:start; margin-top:6px; }
.pj-next .fr{ grid-column:3 / span 4; }
.pj-next .pg-mock .mk-in{ transition:scale 1.2s var(--ease-move); }
.pj-next:hover .pg-mock .mk-in{ scale:1.035; }
.pj-next:hover .pg-crop i{ transform:scale(1.35); }

/* =========================================================
   נייד: 4 עמודות
   ========================================================= */
@media (max-width: 900px){
  .pg-hero .hd{ grid-column:1 / -1; }
  .pg-hero .count{ display:none; }
  .pg-hero .pg-en{ font-size:clamp(70px, 22vw, 120px); }
  .pg-filter{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline-end:0; padding-inline-end:var(--pad-x); }
  .pg-filter button{ flex:none; }
  .pg-card, .pg-card.lead{ grid-column:1 / -1; display:flex; }
  .pg-card.lead .meta{ padding:22px var(--gut) 0; }
  .pg-card.lead h2{ font-size:clamp(28px, 8vw, 40px); }
  .ix-row{ min-height:64px; }
  .ix-row > :nth-child(1){ grid-column:1; } .ix-row > :nth-child(2){ grid-column:2 / span 2; } .ix-row > :nth-child(6){ grid-column:4; }
  .ix-row > :nth-child(3), .ix-row > :nth-child(4), .ix-row > :nth-child(5){ display:none; }
  .ix-cols{ display:none; }
  .pj-hero .hd{ grid-column:1 / -1; }
  .pj-facts > div{ grid-column:span 2; padding-top:14px; }
  .pj-facts > div:nth-child(3){ grid-column:1 / span 2; }
  .pj-facts .cta{ grid-column:1 / -1; justify-self:stretch; padding-top:18px; }
  .pj-facts .cta .btn{ width:100%; justify-content:center; }
  .pg-mock.wide{ aspect-ratio:16 / 11; }
  .pg-mock.wide .pc-laptop{ width:66cqw; --lw:66cqw; }
  .pj-story{ height:260vh; }
  .st-stage{ grid-template-rows:auto 1fr; align-items:start; row-gap:20px; padding-top:calc(var(--header-h, 70px) + 10px); padding-bottom:24px; }
  .st-txt{ grid-column:1 / -1; min-height:220px; }
  .st-txt p{ font-size:15.5px; }
  .st-h{ font-size:30px; }
  .st-box{ grid-column:1 / -1; height:100%; min-height:0; margin:0 var(--gut); }
  .st-map{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 8px; padding:16px; align-content:center; }
  .st-g::before{ right:12px; top:36px; }
  .st-hd{ height:34px; padding:0 10px; font-size:13px; border-radius:9px; }
  .st-it{ height:30px; padding:0 9px; margin-inline-start:14px; font-size:11.5px; white-space:normal; line-height:1.15; }
  .pj-dec li{ grid-column:1 / -1; padding-bottom:30px; }
  .res-grid{ row-gap:40px; }
  .pj-browser{ grid-column:1 / -1; max-width:360px; justify-self:center; }
  .res-phone{ display:none; }
  .res-desk{ grid-column:1 / -1; }
  .res-desk, .pj-browser, .res-phone{ grid-row:auto; }
  .nx-txt, .pj-next .fr{ grid-column:1 / -1; }
  .pj-next .fr{ grid-row:1; }
  .nv-head{ flex-wrap:wrap; }
}

/* =========================================================
   סיור באתר: פריימים מאזורים שונים באתר (לא רק המסך הראשי)
   כל פריים בחלון דפדפן על ארבע עמודות, והכיתוב בשתיים שלידו; לסירוגין ימין ושמאל
   ========================================================= */
.fx-d{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:end; margin:0 0 clamp(50px, 6vw, 100px); }
.fx-d .fr{ grid-column:1 / span 4; grid-row:1; }
.fx-d figcaption{ grid-column:5 / span 2; grid-row:1; display:grid; gap:10px; padding:0 var(--gut) var(--gut); font-size:clamp(18px, 1.5vw, 24px); font-weight:600; line-height:1.35; }
.fx-d.alt .fr{ grid-column:3 / span 4; }
.fx-d.alt figcaption{ grid-column:1 / span 2; }
.fx-d figcaption .n{ font-family:var(--font-display); font-weight:400; font-size:clamp(40px, 4vw, 70px); line-height:.85; opacity:.18; }
.win{ position:relative; overflow:hidden; border-radius:clamp(12px, 1.2vw, 18px); background:#111; box-shadow:0 40px 80px -40px rgb(0 0 0 / .45), 0 0 0 1px rgb(20 20 20 / .08); }
.win .bar{ display:flex; align-items:center; gap:6px; height:34px; padding:0 14px; background:#E7E4DD; position:relative; z-index:1; }
.win .bar i{ width:9px; height:9px; border-radius:50%; background:rgb(20 20 20 / .18); }
.win .bar span{ margin-inline:auto; padding:2px 12px; border-radius:99px; background:#fff; font-size:11.5px; direction:ltr; opacity:.7; }
.win .mk-in{ position:relative; }
.win .mk-in{ direction:ltr; }
/* בצילומים נתפס גם פס הגלילה של הדפדפן (15px מתוך 1600): דוחפים אותו אל מחוץ לחלון */
.win img{ display:block; width:calc(100% * 1600 / 1585); max-width:none; height:auto; }
.win.frame-rv .mk-in{ scale:1.06; }
/* הטלפונים: שלושה בשורה, כל אחד בשתי עמודות */
.fx-m{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; padding-top:clamp(10px, 2vw, 30px); }
.fx-m figure{ grid-column:span 2; margin:0; display:grid; justify-items:center; gap:18px; }
.fx-m .pc-phone{ --ph:clamp(380px, 32vw, 540px); position:relative; margin:0; transform:none; filter:drop-shadow(0 30px 40px rgb(0 0 0 / .25)); }
.fx-m .screen img{ object-position:top; }
.fx-m figcaption{ font-size:15px; opacity:.6; }

/* =========================================================
   ניהול עצמאי: מימין הטקסט, משמאל המחשה של הממשק ושל האתר, שמסתנכרנים
   ========================================================= */
.pj-manage{ align-items:center; }
.mg-txt{ grid-column:1 / span 2; padding:0 var(--gut); display:grid; gap:18px; }
.mg-list{ list-style:none; margin:10px 0 0; padding:0; border-top:1px solid var(--line); }
.mg-list li{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:opacity .5s; opacity:.45; position:relative; }
.mg-list li.in{ opacity:.45; }
.mg-list li.on, .mg-list li.in.on{ opacity:1; }
.mg-list li::before{ content:""; position:absolute; right:0; top:-1px; height:2px; width:100%; background:var(--grad); transform-origin:100% 0; transform:scaleX(0); }
.mg-list li.on::before{ animation:mgBar 3.8s linear forwards; }
@keyframes mgBar{ to{ transform:scaleX(1); } }
.mg-list b{ font-size:clamp(18px, 1.4vw, 22px); }
.mg-list span{ font-size:15.5px; line-height:1.55; opacity:.8; }

.mg-demo{ grid-column:3 / span 4; position:relative; display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; margin-inline-start:var(--gut);
  padding:clamp(30px, 3vw, 46px) clamp(18px, 2vw, 30px); border-radius:clamp(18px, 1.8vw, 28px); background:#ECEAE4; min-height:430px; }
.mg-note{ position:absolute; top:14px; left:16px; font-size:11.5px; font-weight:600; opacity:.45; }
.mg-pane{ position:relative; border-radius:16px; overflow:hidden; min-height:340px; box-shadow:0 30px 60px -30px rgb(0 0 0 / .35); }
.mg-admin{ background:#fff; }
.mg-site{ background:#151515; color:#fff; }
.mg-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:44px; padding:0 14px; border-bottom:1px solid rgb(20 20 20 / .08); font-size:12.5px; }
.mg-site .mg-top{ border-color:rgb(255 255 255 / .1); justify-content:center; }
.mg-site .mg-top b{ font-weight:500; opacity:.6; direction:ltr; }
.mg-tabs{ display:flex; gap:4px; }
.mg-tabs i{ font-style:normal; padding:4px 9px; border-radius:99px; font-size:11.5px; opacity:.5; transition:background .4s, opacity .4s, color .4s; }
.mg-body{ position:absolute; inset:44px 0 0; padding:16px; display:grid; align-content:start; gap:10px; opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s; }
.mg-lbl{ margin:0 0 2px; font-size:12.5px; font-weight:600; opacity:.6; }
.mg-ok{ position:absolute; left:16px; bottom:14px; right:16px; margin:0; display:flex; align-items:center; justify-content:center; gap:6px; height:32px; border-radius:99px;
  background:#E9F6EC; color:#1E7A3A; font-size:12px; font-weight:600; opacity:0; translate:0 8px; }
.mg-ok::before{ content:"✓"; }
/* הלשונית הפעילה */
.mg-demo[data-k="gallery"] .mg-body[data-k="gallery"], .mg-demo[data-k="prices"] .mg-body[data-k="prices"], .mg-demo[data-k="info"] .mg-body[data-k="info"]{ opacity:1; visibility:visible; }
.mg-demo[data-k="gallery"] .mg-tabs [data-k="gallery"], .mg-demo[data-k="prices"] .mg-tabs [data-k="prices"], .mg-demo[data-k="info"] .mg-tabs [data-k="info"]{ background:var(--ink); color:#fff; opacity:1; }
/* באמצע: נקודה שעוברת מהממשק לאתר */
.mg-sync{ position:relative; height:2px; margin:0 6px; background:rgb(20 20 20 / .15); }
.mg-sync i{ position:absolute; right:0; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--grad); opacity:0; }
.mg-demo.go .mg-sync i{ animation:mgDot 1s 1.1s var(--ease-move) forwards; }
@keyframes mgDot{ 0%{ right:0; opacity:1; } 90%{ opacity:1; } 100%{ right:calc(100% - 10px); opacity:0; } }
.mg-demo.go .mg-admin .mg-ok{ animation:mgOk .5s .9s var(--ease-out) forwards; }
@keyframes mgOk{ to{ opacity:1; translate:0 0; } }
.mg-demo.still .mg-ok{ opacity:1; translate:none; }

/* גלריות: בממשק תמונה חדשה נכנסת למשבצת; באתר היא מופיעה בגלריה */
.mg-thumbs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.mg-thumbs span, .mg-gal span{ aspect-ratio:3 / 4; border-radius:6px; background-size:cover; background-position:center; }
.mg-thumbs .add{ position:relative; background-color:#F2F0EB; background-size:0 0; outline:1.5px dashed rgb(20 20 20 / .25); outline-offset:-1.5px; display:grid; place-items:center; }
.mg-thumbs .add em{ font-style:normal; font-size:22px; opacity:.4; }
.mg-demo.go[data-k="gallery"] .mg-thumbs .add{ animation:mgAdd .6s .5s var(--ease-out) forwards; }
@keyframes mgAdd{ 0%{ background-size:cover; scale:.6; opacity:.4; } 100%{ background-size:cover; scale:1; opacity:1; outline-color:transparent; } }
.mg-demo.go[data-k="gallery"] .mg-thumbs .add em{ animation:mgFade .3s .5s forwards; }
@keyframes mgFade{ to{ opacity:0; } }
.mg-gal{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.mg-gal .new{ opacity:0; scale:.7; }
.mg-demo.go[data-k="gallery"] .mg-gal .new{ animation:mgNew .8s 2s var(--ease-out) forwards; }
@keyframes mgNew{ to{ opacity:1; scale:1; box-shadow:0 0 0 2px #fff; } }

/* מחירון: שורה אחת במצב עריכה בממשק, והכרטיס שלה מהבהב באתר */
.mg-row{ display:flex; justify-content:space-between; align-items:center; height:38px; padding:0 12px; border-radius:9px; background:#F5F3EF; font-size:13px; }
.mg-row .pr{ font-weight:600; direction:ltr; }
.mg-row.edit{ background:#fff; box-shadow:0 0 0 1.5px var(--ink); }
.mg-demo.go[data-k="prices"] .mg-row.edit .pr::after{ content:""; display:inline-block; width:1.5px; height:14px; margin-inline-start:2px; vertical-align:-2px; background:var(--ink); animation:mgCaret .8s steps(1) 3; }
@keyframes mgCaret{ 50%{ opacity:0; } }
.mg-pk{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mg-pk div{ display:grid; gap:4px; padding:6px; border-radius:8px; background:#0c0c0c; }
.mg-pk span{ aspect-ratio:5 / 3; border-radius:5px; background-size:cover; background-position:center 25%; }
.mg-pk b{ font-size:11.5px; }
.mg-pk em{ font-style:normal; font-size:11px; color:#C9E5B5; font-weight:700; direction:ltr; text-align:right; }
.mg-demo.go[data-k="prices"] .mg-pk .hit{ animation:mgHit 1.4s 2s var(--ease-out); }
@keyframes mgHit{ 0%, 100%{ box-shadow:0 0 0 0 transparent; } 30%{ box-shadow:0 0 0 2px #fff, 0 0 30px rgb(255 255 255 / .25); } }

/* מידע: שורת טקסט שנכתבת בממשק, ומתעדכנת באתר */
.mg-text{ display:grid; gap:9px; padding:6px 0; }
.mg-text i{ display:block; height:9px; border-radius:9px; background:rgb(20 20 20 / .12); }
.mg-text i:nth-child(2){ width:84%; }
.mg-text .typing{ width:0; background:rgb(20 20 20 / .55); }
.mg-demo.go[data-k="info"] .mg-text .typing{ animation:mgType 1.2s .3s steps(14) forwards; }
@keyframes mgType{ to{ width:66%; } }
.mg-text.site i{ background:rgb(255 255 255 / .16); }
.mg-text.site .hit{ width:66%; }
.mg-demo.go[data-k="info"] .mg-text.site .hit{ animation:mgLine 1s 2s var(--ease-out) forwards; }
@keyframes mgLine{ to{ background:rgb(255 255 255 / .75); } }

@media (max-width: 900px){
  .fx-d .fr, .fx-d.alt .fr, .fx-d figcaption, .fx-d.alt figcaption{ grid-column:1 / -1; grid-row:auto; }
  .fx-d figcaption{ grid-auto-flow:column; justify-content:start; align-items:baseline; gap:12px; padding-top:14px; font-size:17px; }
  .fx-d figcaption .n{ font-size:30px; }
  .fx-m figure{ grid-column:span 4; }
  .fx-m{ row-gap:40px; }
  .mg-txt, .mg-demo{ grid-column:1 / -1; }
  .mg-demo{ margin:28px var(--gut) 0; grid-template-columns:1fr; gap:14px; min-height:0; padding:40px 14px 16px; }
  .mg-sync{ width:2px; height:28px; justify-self:center; margin:0; }
  .mg-demo.go .mg-sync i{ animation-name:mgDotV; }
  @keyframes mgDotV{ 0%{ top:0; right:-4px; opacity:1; } 90%{ opacity:1; } 100%{ top:100%; right:-4px; opacity:0; } }
  .mg-pane{ min-height:300px; }
}

/* =========================================================
   זוג: אותו אזור במחשב (חלון דפדפן) ובטלפון שיושב לצידו וחופף לו קצת (רספונסיביות)
   ========================================================= */
.pair{ position:relative; }
.pair > .fr{ width:calc(100% - clamp(70px, 9vw, 150px)); }
.pair .ph{ position:absolute; left:0; bottom:calc(var(--gut) * -1.4); z-index:4; }
.pair .pc-phone{ --ph:clamp(240px, 24vw, 430px); position:relative; margin:0; transform:none; filter:drop-shadow(0 30px 40px rgb(0 0 0 / .32)); }
.pair .screen img{ object-position:top; }
/* בפתיחה: הזוג לכל הרוחב */
.pj-show .pair > .fr{ width:calc(100% - clamp(90px, 11vw, 190px)); }
.pj-show .pair .pc-phone{ --ph:clamp(280px, 30vw, 520px); }

/* סיור באתר: הזוג על חמש עמודות, הכיתוב בעמודה שלידו; לסירוגין ימין ושמאל */
.fx-d .pair{ grid-column:1 / span 5; grid-row:1; }
.fx-d figcaption{ grid-column:6; }
.fx-d.alt .pair{ grid-column:2 / span 5; }
.fx-d.alt figcaption{ grid-column:1; }
.fx-d.alt .pair > .fr{ margin-inline-start:auto; }
.fx-d.alt .pair .ph{ left:auto; right:0; }
.fx-d{ margin-bottom:clamp(80px, 9vw, 150px); }

/* =========================================================
   התוצאה: כל האתר בגלילה אחת. האזור נעוץ, והדף המלא גולל בתוך החלון
   ========================================================= */
.pj-full{ position:relative; height:300vh; margin-top:clamp(90px, 10vw, 160px); }
.pf-stage{ position:sticky; top:0; height:100vh; height:100svh; align-items:center; padding-top:calc(var(--header-h, 84px) * .7); }
.pf-txt{ grid-column:1 / span 2; padding:0 var(--gut); display:grid; gap:20px; align-content:center; }
.pf-txt .pj-big{ font-size:clamp(28px, 2.7vw, 46px); max-width:none; }
.pf-facts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pf-facts li{ height:38px; padding:0 16px; display:inline-flex; align-items:center; border-radius:99px; border:1px solid rgb(20 20 20 / .2); font-size:14.5px; font-weight:500; }
.pf-hint{ margin:6px 0 0; font-size:14px; opacity:.55; display:flex; gap:10px; align-items:baseline; }
.pf-pct{ font-family:var(--font-en); letter-spacing:.06em; font-size:13px; }
.pf-win{ grid-column:3 / span 4; }
.pf-win .win{ display:flex; flex-direction:column; height:min(76vh, 760px); }
.pf-view{ position:relative; flex:1; overflow:hidden; background:#111; direction:ltr; }
.pf-view img{ display:block; width:100%; height:auto; will-change:transform; }

/* =========================================================
   הפרויקט הבא: פס קומפקטי. שם גדול מימין, חץ, וחלון קטן עם האתר משמאל
   ========================================================= */
.pj-next{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center; padding:clamp(10px, 1.5vw, 20px) 0; }
.nx-txt{ grid-column:1 / span 3; padding:0 var(--gut); gap:8px; }
.nx-txt h2{ font-size:clamp(40px, 5vw, 92px); }
.nx-go{ grid-column:4; justify-self:center; display:grid; place-items:center; width:clamp(64px, 6vw, 96px); aspect-ratio:1; border-radius:50%; border:1px solid rgb(20 20 20 / .25);
  transition:background .5s, color .5s, border-color .5s; }
.nx-go svg{ width:42%; height:auto; transition:transform .7s var(--ease-move); }
.pj-next:hover .nx-go{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pj-next:hover .nx-go svg{ transform:translateX(-6px); }
.nx-win{ grid-column:5 / span 2; padding:0 var(--gut); }
.nx-win .win{ rotate:-2deg; transition:rotate .9s var(--ease-out), translate .9s var(--ease-out); }
.nx-win .win .bar{ height:24px; padding:0 10px; }
.nx-win .win .bar i{ width:7px; height:7px; }
.nx-view{ aspect-ratio:16 / 8; overflow:hidden; background:#111; }
.nx-view img{ display:block; width:100%; height:auto; transition:transform 1.4s var(--ease-move); }
.pj-next:hover .nx-win .win{ rotate:0deg; translate:0 -6px; }
.pj-next:hover .nx-view img{ transform:translateY(-12%); }
.pj-next .fr{ display:none; }

@media (max-width: 900px){
  .pair > .fr, .pj-show .pair > .fr{ width:calc(100% - 64px); }
  .pair .pc-phone, .pj-show .pair .pc-phone{ --ph:200px; }
  .pair .ph{ bottom:-18px; }
  .fx-d .pair, .fx-d.alt .pair{ grid-column:1 / -1; }
  .fx-d figcaption, .fx-d.alt figcaption{ grid-column:1 / -1; grid-row:auto; padding-top:34px; }
  .pj-full{ height:260vh; }
  .pf-stage{ grid-template-rows:auto 1fr; align-items:start; row-gap:18px; padding-top:calc(var(--header-h, 70px) + 10px); padding-bottom:20px; }
  .pf-txt, .pf-win{ grid-column:1 / -1; }
  .pf-txt{ gap:12px; }
  .pf-txt .pj-big{ font-size:24px; }
  .pf-hint{ display:none; }
  .pf-win .win{ height:100%; max-height:none; }
  .pf-win, .pf-win .fr{ height:100%; }
  .pf-win .fr{ display:flex; flex-direction:column; }
  .pf-win .win{ flex:1; }
  .nx-txt{ grid-column:1 / span 3; }
  .nx-go{ grid-column:4; width:54px; }
  .nx-win{ grid-column:1 / -1; grid-row:2; margin-top:18px; }
}

/* הכיתוב בסיור יושב למעלה, כדי שהטלפון (למטה) לא יכסה אותו */
.fx-d{ align-items:start; }
.fx-d figcaption{ align-self:start; padding-top:clamp(40px, 5vw, 80px); }
@media (max-width: 900px){ .fx-d figcaption{ padding-top:34px; } }

/* =========================================================
   ניהול עצמאי: לשונית "הגדרות כל דירה" (ספיר), תמונות גלריה רוחביות, כרטיס מחיר בלי תמונה
   ========================================================= */
.mg-thumbs span, .mg-gal span{ aspect-ratio:4 / 3; }
.mg-pk div{ padding:10px; }
.mg-demo[data-k="units"] .mg-body[data-k="units"]{ opacity:1; visibility:visible; }
.mg-demo[data-k="units"] .mg-tabs [data-k="units"]{ background:var(--ink); color:#fff; opacity:1; }
.mg-chk{ display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:9px; background:#F5F3EF; font-size:13px; }
.mg-chk i{ width:16px; height:16px; border-radius:4px; background:var(--ink); position:relative; }
.mg-chk i::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; font-style:normal; }
.mg-chk.new i{ background:#fff; box-shadow:inset 0 0 0 1.5px rgb(20 20 20 / .35); }
.mg-chk.new i::after{ opacity:0; }
.mg-demo.go[data-k="units"] .mg-chk.new i{ animation:mgCheck .4s .6s forwards; }
.mg-demo.go[data-k="units"] .mg-chk.new i::after{ animation:mgFadeIn .3s .7s forwards; }
@keyframes mgCheck{ to{ background:var(--ink); box-shadow:none; } }
@keyframes mgFadeIn{ to{ opacity:1; } }
.mg-unit{ display:grid; gap:10px; padding:10px; border-radius:10px; background:#0c0c0c; }
.mg-unit .ph{ aspect-ratio:16 / 9; border-radius:6px; background:linear-gradient(135deg, #3b4a52, #8aa1a8); }
.mg-unit .am{ display:flex; flex-wrap:wrap; gap:6px; }
.mg-unit em{ font-style:normal; font-size:11px; padding:4px 9px; border-radius:99px; border:1px solid rgb(255 255 255 / .25); }
.mg-unit em.new{ opacity:0; scale:.7; }
.mg-demo.go[data-k="units"] .mg-unit em.new{ animation:mgNew .7s 2s var(--ease-out) forwards; }
.mg-unit .cta{ justify-self:start; font-size:11px; padding:6px 12px; border-radius:99px; background:#fff; color:#111; font-weight:600; }
.pj-res .pf-facts{ margin-top:8px; }

.win .bar span:empty{ display:none; }

/* הגדרות דירה: עד 5 שורות, בלי שהאחרונה תיכנס מתחת ל"נשמר" */
.mg-body[data-k="units"]{ gap:6px; }
.mg-chk{ height:31px; }

/* לשונית ריטריטים (נועה): פסי תוכן מופשטים, בלי להמציא שמות ותאריכים */
.mg-demo[data-k="retreats"] .mg-body[data-k="retreats"]{ opacity:1; visibility:visible; }
.mg-demo[data-k="retreats"] .mg-tabs [data-k="retreats"]{ background:var(--ink); color:#fff; opacity:1; }
.mg-row .sk{ width:38%; height:8px; border-radius:8px; background:rgb(20 20 20 / .14); }
.mg-row.new{ opacity:0; translate:0 8px; }
.mg-demo.go[data-k="retreats"] .mg-row.new{ animation:mgOk .5s .4s var(--ease-out) forwards; }
.mg-rt{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.mg-rt div{ display:grid; gap:6px; padding:6px; border-radius:8px; background:#0c0c0c; }
.mg-rt span{ aspect-ratio:1; border-radius:5px; background:linear-gradient(135deg, #8a6f63, #d9b8a6); }
.mg-rt div:nth-child(2) span{ background:linear-gradient(135deg, #6f7d6a, #c9d3b7); }
.mg-rt .new span{ background:linear-gradient(135deg, #b07a8c, #f1c9cf); }
.mg-rt i{ display:block; height:6px; border-radius:6px; background:rgb(255 255 255 / .2); }
.mg-rt i + i{ width:60%; }
.mg-rt .new{ opacity:0; scale:.7; }
.mg-demo.go[data-k="retreats"] .mg-rt .new{ animation:mgNew .8s 2s var(--ease-out) forwards; }

/* ריטריט אחד (נועה): תאריכים, שעות, מקום. בממשק מעדכנים את המקום, ובאתר השורה מתעדכנת */
.mg-row .sk.typing{ width:0; background:rgb(20 20 20 / .55); }
.mg-demo.go[data-k="retreats"] .mg-row .sk.typing{ animation:mgSk 1.1s .3s steps(12) forwards; }
@keyframes mgSk{ to{ width:38%; } }
.mg-rt1{ display:grid; gap:8px; padding:10px; border-radius:10px; background:#0c0c0c; }
.mg-rt1 .ph{ aspect-ratio:16 / 8; border-radius:6px; background:linear-gradient(135deg, #b07a8c, #f1c9cf); }
.mg-rt1 p{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; }
.mg-rt1 p i{ width:45%; height:7px; border-radius:7px; background:rgb(255 255 255 / .2); }
.mg-demo.go[data-k="retreats"] .mg-rt1 .hit i{ animation:mgLine 1s 2s var(--ease-out) forwards; }
.mg-rt1 .cta{ justify-self:start; font-size:11px; padding:6px 12px; border-radius:99px; background:#fff; color:#111; font-weight:600; }

/* ניהול: זמנים (אוהל יעקב), מכתבי תודה, סוגי הדפסה (בינה ודעת) */
.mg-demo[data-k="zmanim"] .mg-body[data-k="zmanim"], .mg-demo[data-k="letters"] .mg-body[data-k="letters"], .mg-demo[data-k="prints"] .mg-body[data-k="prints"]{ opacity:1; visibility:visible; }
.mg-demo[data-k="zmanim"] .mg-tabs [data-k="zmanim"], .mg-demo[data-k="letters"] .mg-tabs [data-k="letters"], .mg-demo[data-k="prints"] .mg-tabs [data-k="prints"]{ background:var(--ink); color:#fff; opacity:1; }
.mg-demo.go[data-k="zmanim"] .mg-row.edit .pr::after{ content:""; display:inline-block; width:1.5px; height:14px; margin-inline-start:2px; vertical-align:-2px; background:var(--ink); animation:mgCaret .8s steps(1) 3; }
.mg-zm{ display:grid; gap:6px; }
.mg-zm p{ margin:0; display:flex; justify-content:space-between; align-items:center; padding:9px 11px; border-radius:8px; background:#0c0c0c; font-size:11.5px; }
.mg-zm span{ direction:ltr; font-weight:700; color:#C9E5B5; }
.mg-demo.go[data-k="zmanim"] .mg-zm .hit{ animation:mgHit 1.4s 2s var(--ease-out); }
.mg-row .ok{ font-size:11px; color:#1E7A3A; font-weight:600; }
.mg-row .ap{ font-size:11px; padding:4px 10px; border-radius:99px; background:var(--ink); color:#fff; font-weight:600; }
.mg-demo.go[data-k="letters"] .mg-row .ap{ animation:mgAp .4s .7s forwards; }
@keyframes mgAp{ to{ background:#1E7A3A; } }
.mg-lt{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.mg-lt div{ display:grid; gap:5px; padding:10px 8px; border-radius:8px; background:#fff; aspect-ratio:3 / 4; align-content:start; }
.mg-lt i{ display:block; height:5px; border-radius:5px; background:rgb(20 20 20 / .15); }
.mg-lt i:first-child{ width:60%; height:7px; background:rgb(20 20 20 / .35); }
.mg-lt i:last-child{ width:80%; }
.mg-lt .new{ opacity:0; scale:.7; }
.mg-demo.go[data-k="letters"] .mg-lt .new{ animation:mgNew .8s 2s var(--ease-out) forwards; }
.mg-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.mg-chips i{ font-style:normal; font-size:11.5px; padding:5px 10px; border-radius:7px; background:#F5F3EF; }
.mg-chips i.on{ background:var(--ink); color:#fff; }
.mg-chips.sm i{ font-size:10.5px; padding:4px 7px; }
.mg-chips.dark i{ background:#1e1e1e; color:#ddd; }
.mg-chips.dark i.on{ background:#fff; color:#111; }
.mg-chips i.new{ opacity:0; scale:.7; }
.mg-demo.go[data-k="prints"] .mg-admin .mg-chips i.new{ animation:mgNew .6s .5s var(--ease-out) forwards; }
.mg-demo.go[data-k="prints"] .mg-site .mg-chips i.new{ animation:mgNew .8s 2s var(--ease-out) forwards; }
.mg-pp{ display:grid; gap:10px; padding:10px; border-radius:10px; background:#0c0c0c; }