/* דמו 20 — «מדבר למנהל»: אותה במה שחורה והצהרה של 19, ומתחת רצועה של שני חלקים: הסרט (הלולאה המשותפת)
   ולצידו לוח «היום בארגון», מה שהמנהל רואה באותו רגע. הסרט מימין, הלוח משמאל, מתחת לטור של תת־הכותרת.
   הסרט צר יותר מב־19, ולכן החיתוך האנכי קטן יותר והפנים נשארות בפריים. */
.x20{
  --x20-H:clamp(560px,calc(100svh - var(--nav-h)),980px);
  --x20-F:clamp(60px,min(7.8vw,13.8svh),132px);
  --x20-pt:clamp(16px,3.6svh,44px);
  --x20-pb:clamp(12px,2.2svh,34px);
  --x20-gap:clamp(22px,calc(var(--x20-F) * .28 + 4px),44px);
  --x20-r:clamp(16px,1.7vw,24px);
  --x20-pw:clamp(300px,29cqw,360px);
  --x20-bg:clamp(12px,1.2vw,16px);
  --x20-ty:0px;
  --x20-ink:#F4F7F5;
  position:relative;isolation:isolate;overflow:hidden;
  height:var(--x20-H);
  background:#030806;color:var(--x20-ink);
}
.x20-stage{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(52% 46% at 84% 6%,rgba(52,211,153,.075),rgba(52,211,153,0) 72%),
  radial-gradient(40% 40% at 10% 0%,rgba(143,227,184,.04),rgba(143,227,184,0) 70%),
  linear-gradient(180deg,#040b08 0%,#030806 46%,#020504 100%)}

/* ─── פריסה: שורה עליונה (הצהרה · דבר) ומתחתיה הרצועה ─────────────── */
.x20-wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--x20-gap);
  padding:var(--x20-pt) 0 calc(var(--sheet) + var(--x20-pb));container-type:inline-size}
.x20-top{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,450px);align-items:end;column-gap:clamp(28px,4vw,64px)}

.x20-h1{font-size:var(--x20-F);font-weight:800;line-height:.88;letter-spacing:-.045em;color:var(--x20-ink);text-wrap:initial}
.x20-h1>span{display:block;width:max-content;white-space:nowrap}
.x20-l1{margin-inline-start:-.02em}
/* השורה השנייה בירוק של המותג, וברק אור שעובר פעם אחת כשהסרט נפתח (קישוט; הטקסט גלוי תמיד) */
.x20-l2{margin-inline-start:-.02em;
  background-image:linear-gradient(100deg,rgba(236,255,245,0) 38%,rgba(236,255,245,.95) 50%,rgba(236,255,245,0) 62%),linear-gradient(96deg,#C9F7DF 0%,#7CE7B4 34%,#34D399 70%,#22C55E 100%);
  background-size:260% 100%,100% 100%;background-position:112% 0,0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em 0 .2em;margin-top:-.06em;margin-bottom:-.2em;
  filter:drop-shadow(0 0 .32em rgba(52,211,153,.2))}
.x20-dot{color:transparent}
.x20.x20-is-in .x20-l2{animation:x20-sheen 2.2s cubic-bezier(.45,0,.25,1) .7s 1 both}
@keyframes x20-sheen{from{background-position:-12% 0,0 0}to{background-position:112% 0,0 0}}

.x20-deck{min-width:0;padding-bottom:.25em}
.x20-kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.01em;color:rgba(236,245,240,.72)}
.x20-live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.x20-sub{margin-top:clamp(8px,1.4svh,14px);font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:rgba(236,245,240,.84);text-wrap:pretty}
.x20-sub>span{display:block;white-space:nowrap}
.x20-cta{margin-top:clamp(14px,2.4svh,24px);display:flex}
.x20-btn{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 18px 40px -16px rgba(21,128,61,.95),0 0 0 1px rgba(52,211,153,.32)}

/* ─── הרצועה: סרט · לוח ─────────────────────────────────────────── */
/* הגובה הוא מה שנשאר עד יחס 1.9:1 של הסרט; במסך גבוה הרצועה לא נמתחת מעבר לזה */
.x20-band{position:relative;flex:1 1 0;min-height:0;max-height:calc((100cqw - var(--x20-pw) - var(--x20-bg)) / 1.9);
  display:grid;grid-template-columns:minmax(0,1fr) var(--x20-pw);column-gap:var(--x20-bg)}
.x20-film{position:relative;min-height:0;margin:0}
.x20-ambw{position:absolute;z-index:0;left:-10%;right:-10%;top:-30%;bottom:-30%;pointer-events:none;opacity:0;transition:opacity 1.8s ease;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.3) 18.75%,#000 40%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.3) 18.75%,#000 40%)}
.x20.x20-is-lit .x20-ambw{opacity:.5}
.x20-amb{position:absolute;left:5.8%;top:15.6%;width:88.4%;height:71.3%;filter:blur(56px) saturate(1.05) brightness(1.9);transform:translateZ(0)}
.x20-frame{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:var(--x20-r);background:#0a0f0d;isolation:isolate;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(236,245,240,.09),0 40px 90px -40px rgba(0,0,0,.95),0 12px 30px -18px rgba(0,0,0,.7)}
/* הסרטון ביחס 16:9 ברוחב הסרט; כשהסרט רחב ממנו הוא זז אנכית (‎--x20-ty‎) למסגור של הצילום הנוכחי */
.x20-media{position:absolute;left:0;right:0;top:0;height:max(100%,56.25cqw);transform:translate3d(0,var(--x20-ty),0);
  transition:transform 1.2s cubic-bezier(.45,.05,.3,1);will-change:transform}
.x20-poster,.x20-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.x20-video{opacity:0;transition:opacity .5s ease}
.x20.x20-is-live .x20-video{opacity:1}
.x20-shade{position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(0deg,rgba(2,6,4,.72) 0%,rgba(2,6,4,.34) 22%,rgba(2,6,4,0) 46%),
    linear-gradient(270deg,rgba(2,6,4,.26) 0%,rgba(2,6,4,0) 30%),
    linear-gradient(90deg,rgba(2,6,4,.26) 0%,rgba(2,6,4,0) 30%),
    radial-gradient(30% 40% at 6% 0%,rgba(2,6,4,.45),rgba(2,6,4,0) 70%)}
.x20-frame::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.x20-shade::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#030806;opacity:0;transition:opacity .38s ease}
.x20.x20-is-seek .x20-shade::after{opacity:.88;transition-duration:.14s}

/* הכתובית של הצילום: בדרך כלל בצד ימין; בצילום שהדמות בו מימין היא עוברת לשמאל (‎.x20-is-end‎) */
.x20-lt{position:absolute;z-index:2;inset-inline-start:clamp(18px,2.1vw,28px);bottom:clamp(36px,4.6svh,46px);
  padding-inline-start:13px;border-inline-start:3px solid var(--green);max-width:calc(100% - 56px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1) .12s,transform .65s cubic-bezier(.2,.7,.2,1) .12s}
.x20-lt.x20-is-end{inset-inline-start:auto;inset-inline-end:clamp(18px,2.1vw,28px)}
.x20-lt.x20-is-out{opacity:0;transform:translate3d(0,7px,0);transition:opacity .24s ease-out,transform .24s ease-in}
.x20-lt::before{content:"";position:absolute;z-index:-1;left:-110px;right:-110px;top:-56px;bottom:-44px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(2,6,4,.5),rgba(2,6,4,.22) 58%,rgba(2,6,4,0))}
.x20-lt-k{display:flex;align-items:baseline;gap:9px;font-size:14px;font-weight:600;letter-spacing:.015em;color:rgba(236,245,240,.78);white-space:nowrap}
.x20-lt-n{font-weight:800;color:var(--green);letter-spacing:.04em}
.x20-lt-s:empty{display:none}
.x20-lt-t{margin-top:3px;display:flex;align-items:center;gap:10px;font-size:clamp(19px,1.75vw,25px);font-weight:700;line-height:1.25;color:#fff;white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.x20-lt-i{flex:none;width:25px;height:25px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.35)}

.x20-ctrl{position:absolute;z-index:3;top:clamp(10px,1.6svh,16px);inset-inline-end:clamp(12px,1.4vw,18px);display:flex;align-items:center;gap:10px}
.x20-cap{font-size:12.5px;font-weight:600;color:rgba(236,245,240,.8);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.x20-pause{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 13px 0 11px;border-radius:99px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(6,12,10,.42);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,border-color .2s}
.x20-pause:hover{background:rgba(6,12,10,.66);border-color:rgba(255,255,255,.42)}
.x20-pause svg{width:13px;height:13px;fill:currentColor}
.x20-i-play{display:none}
.x20-pause[aria-pressed="true"] .x20-i-play{display:block}
.x20-pause[aria-pressed="true"] .x20-i-pause{display:none}

.x20-chapters{position:absolute;z-index:3;inset-inline:clamp(18px,2.1vw,28px);bottom:clamp(8px,1.4svh,14px);display:flex;gap:6px}
.x20-chapters li{flex:1;min-width:0}
.x20-ch{display:block;width:100%;height:20px;padding:8px 0;border-radius:4px}
.x20-ch i{position:relative;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.24);overflow:hidden;transition:background .2s}
.x20-ch i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);transform-origin:100% 50%;transform:scaleX(var(--x20-p,0))}
.x20-ch:hover i{background:rgba(255,255,255,.42)}
.x20-ch[aria-current="true"] i::after{background:var(--mint)}
.x20-ch:focus-visible{outline-offset:2px}

.x20-shut{position:absolute;left:0;right:0;z-index:6;height:50.5%;background:#030806;pointer-events:none;
  transition:transform 1.3s cubic-bezier(.76,0,.2,1)}
.x20-shut-t{top:0;transform:translate3d(0,-101%,0)}
.x20-shut-b{bottom:0;transform:translate3d(0,101%,0)}
.x20-shut-t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(143,227,184,0),rgba(143,227,184,.75) 50%,rgba(143,227,184,0))}
.x20.x20-is-pre .x20-shut{transform:none}

/* ─── הלוח: «היום בארגון» ─────────────────────────────────────────── */
/* כרטיס כהה בגובה הסרט. ארבע טבעות ודוח החודש (מ־19/10/2026); הפריט של הצילום הנוכחי מודגש, וטבעת מלאה זוהרת.
   בסוף היום הכותרת הופכת ל«היום הושלם». נכנס עם פתיחת הסרט, מעט אחריו. */
.x20-board{position:relative;min-height:0;border-radius:var(--x20-r);
  background:linear-gradient(180deg,rgba(14,26,21,.92),rgba(7,14,11,.94));
  box-shadow:0 0 0 1px rgba(236,245,240,.09),inset 0 1px 0 rgba(255,255,255,.05),0 40px 90px -40px rgba(0,0,0,.95);
  transition:opacity .9s ease .55s,transform 1.1s cubic-bezier(.2,.7,.2,1) .55s,box-shadow .6s ease}
.x20.x20-is-pre .x20-board{opacity:0;transform:translate3d(-14px,0,0)}
.x20-board.x20-is-all{box-shadow:0 0 0 1px rgba(143,227,184,.32),inset 0 1px 0 rgba(255,255,255,.05),0 0 46px -14px rgba(52,211,153,.35),0 40px 90px -40px rgba(0,0,0,.95)}
.x20-bd{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(12px,1.6svh,16px) clamp(14px,1.3vw,18px) clamp(10px,1.4svh,14px)}

.x20-bh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:clamp(8px,1.2svh,12px);border-bottom:1px solid rgba(236,245,240,.08)}
.x20-bh-t{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:#fff;white-space:nowrap}
.x20-bh-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,211,153,.16);transition:transform .35s ease}
.x20-bh-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(52,211,153,.55);opacity:0;animation:x20-ping 2.4s ease-out infinite}
@keyframes x20-ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.9);opacity:0}}
.x20-board.x20-is-done .x20-bh-dot{transform:scale(1.15)}
.x20-board.x20-is-done .x20-bh-l{color:var(--mint)}
.x20-clock{font-size:17px;font-weight:800;letter-spacing:.02em;color:rgba(236,245,240,.9);font-variant-numeric:tabular-nums;
  padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}

/* 19/10/2026 «1 טבעות» (מתוך חמש חלופות, demos/info-board-options-20261019): ארבע טבעות 2×2, «נוכחות עובדים» ראשונה,
   ודוח החודש מתחת. הקשת מתמלאת לפי הערך, הפריט של הצילום הנוכחי מודגש, ובערך מלא הקשת בהירה וזוהרת */
.x20-g{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;padding:12px 0 9px;transition:opacity .3s ease}
.x20-t,.x20-rep{border-radius:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .45s ease,box-shadow .45s ease,opacity .3s ease}
.x20-t.x20-is-on,.x20-rep.x20-is-on{background:rgba(52,211,153,.09);box-shadow:inset 0 0 0 1px rgba(143,227,184,.38)}
.x20-t{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.6cqh,9px)}
.x20-ring{position:relative;width:clamp(56px,19cqh,88px);aspect-ratio:1}
/* הקשת מתחילה למעלה ומתמלאת נגד כיוון השעון, כמו פס שמתמלא מימין */
.x20-ring svg{position:absolute;inset:0;width:100%;height:100%;fill:none;transform:scaleX(-1) rotate(-90deg)}
.x20-rtr{stroke:rgba(255,255,255,.09);stroke-width:6}
.x20-rfg{stroke:#34D399;stroke-width:6;stroke-dasharray:100 100;stroke-dashoffset:100}
.x20-t.x20-is-full .x20-rfg{stroke:#8FE3B8;filter:drop-shadow(0 0 4px rgba(52,211,153,.6))}
.x20-rin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.x20-t .x20-rv{font-size:clamp(17px,6cqh,24px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;transition:color .35s ease}
.x20-t.x20-is-on .x20-rv{color:var(--mint)}
.x20-rof{margin-top:3px;font-size:12px;font-weight:600;color:rgba(236,245,240,.5)}
.x20-tl{font-size:13.5px;font-weight:700;color:rgba(236,245,240,.8);white-space:nowrap}
.x20-rep{flex:none;display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:9px}
.x20-ri{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:rgba(236,245,240,.78);transition:background .45s ease,color .45s ease}
.x20-ri svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.x20-rep.x20-is-on .x20-ri,.x20-rep.x20-is-full .x20-ri{background:rgba(52,211,153,.18);color:var(--mint)}
.x20-rl{flex:1;min-width:0;font-size:14px;font-weight:700;color:rgba(236,245,240,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x20-rs{font-size:13px;font-weight:800;color:rgba(236,245,240,.7);white-space:nowrap;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);transition:background .35s ease,color .35s ease}
.x20-rep.x20-is-full .x20-rs{color:#04140c;background:#34D399}

.x20-bf{flex:none;padding-top:clamp(7px,1.1svh,11px);border-top:1px solid rgba(236,245,240,.08);font-size:12.5px;font-weight:600;color:rgba(236,245,240,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x20-bf span{color:rgba(236,245,240,.48)}
/* היום מתחיל מחדש (נקודת הלולאה): הערכים מתאפסים מאחורי עמעום קצר */
.x20-board.x20-is-reset .x20-g,.x20-board.x20-is-reset .x20-rep{opacity:.25;transition-duration:.12s}

/* לוח נמוך (מסך נמוך; הגובה כאן בלי הריפוד): טבעות קטנות ומרווחים צפופים, ובנמוך מאוד בלי שורת התחתית */
@container x20b (max-height:360px){
  .x20-g{padding:6px 0 5px;gap:6px}
  .x20-t{gap:3px}
  .x20-ring{width:68px}
  .x20-t .x20-rv{font-size:19px}
  .x20-tl{font-size:12.5px}
  .x20-rep{padding:5px 10px;margin-bottom:4px}
}
@container x20b (max-height:280px){
  .x20-bf{display:none}
}
.x20-bd{container:x20b / size}

/* ─── השהיה, תנועה מופחתת ─────────────────────────────────────────── */
.x20.x20-snap *,.x20.x20-snap *::before,.x20.x20-snap *::after{transition:none !important}
.x20.x20-is-static .x20-shut{display:none}
.x20.x20-is-static .x20-l2{animation:none}
.x20.x20-is-static .x20-ambw,.x20.x20-is-static .x20-media{transition:none}
.x20.x20-is-static .x20-bh-dot::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .x20-shut{display:none}
  .x20-l2{animation:none !important}
  .x20-media{transition:none}
  .x20-lt.x20-is-out{transform:none}
  .x20-bh-dot::after{animation:none}
  .x20-board{transform:none !important}
}
html.a11y-motion .x20-shut{display:none !important}
html.a11y-motion .x20-l2{animation:none !important}
html.a11y-motion .x20-media{transition:none}
html.a11y-motion .x20-lt.x20-is-out{transform:none}
html.a11y-motion .x20-bh-dot::after{animation:none}
html.a11y-contrast .x20-stage,html.a11y-contrast .x20-ambw{display:none}
html.a11y-contrast .x20{background:#000}
html.a11y-contrast .x20-l2{background:none;color:#fff}
html.a11y-contrast .x20-board{background:#000}

/* ─── רוחב ביניים ─────────────────────────────────────────────────── */
@media (max-width:1100px) and (min-width:901px){
  .x20-top{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .x20-sub{font-size:16px}
  .x20-lt-t{font-size:18px}
  .x20{--x20-pw:310px} /* פחות מזה, שמות השורות בלוח נחתכים ב־1024 */
}

/* ─── מסכים צרים: מוערם ───────────────────────────────────────────── */
@media (max-width:900px){
  .x20{height:auto}
  .x20-wrap{display:block;height:auto;padding:clamp(28px,7vw,44px) 0 calc(var(--sheet) + 36px)}
  .x20-top{display:flex;flex-direction:column;align-items:stretch}
  .x20-deck{display:contents}
  .x20-kicker{order:-1;margin-bottom:14px;align-self:flex-start}
  .x20-h1{font-size:clamp(46px,14.5vw,92px)}
  .x20-sub{margin-top:16px;max-width:34em;text-wrap:balance}
  .x20-sub>span{display:inline;white-space:normal}
  .x20-cta{margin-top:20px}
  .x20-band{display:block;max-height:none;margin-top:28px}
  .x20-film{aspect-ratio:16/10}
  .x20-board{margin-top:12px}
  .x20-bd{position:static;container:none}
  .x20-g{grid-template-rows:auto auto}
  .x20-t{padding:14px 6px}
  .x20-ring{width:84px}
  .x20-lt{max-width:calc(100% - 36px);bottom:34px}
  .x20-lt-k{font-size:13px}
  .x20-lt-t{font-size:17px;white-space:normal}
}
@media (max-width:420px){
  .x20-lt-t{font-size:15.5px}
  .x20-chapters{gap:4px}
  .x20-tl{font-size:13px}
}