/* ===================== רגע החתימה: ערכו אותי =====================
   הכותרת של העמוד היא שדה עריכה. מסגרת עריכה (ארבע פינות, כמו הסמן של
   דיגימה), תג מעליה שמדבר בשלושה מצבים, וכפתור איפוס. מה שמקלידים מופיע
   מיד גם במילה הענקית שברקע: "זה כבר שם". שום דבר לא נשמר. */
.ed{position:relative;width:fit-content;max-width:100%}
.ed-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 34px}
.ed-tag,.ed-reset{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;font-size:18px;font-weight:700;line-height:1.2;text-align:right;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),scale .2s var(--ease)}
.ed-tag{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #fff}
.ed-reset{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.ed-reset[hidden]{display:none}
@media (hover:hover){
  .ed-tag:hover{background:#000;color:#fff}
  .ed-reset:hover{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #fff}
}
.ed-tag:focus-visible,.ed-tag:active{background:#000;color:#fff}
.ed-reset:focus-visible,.ed-reset:active{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #fff}
.ed-tag:active,.ed-reset:active{scale:.97}
.ed-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.m .ed-dot::after{content:"";position:absolute;top:-5px;left:-5px;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;opacity:0;animation:edping 2.2s var(--soft) infinite}
@keyframes edping{0%{transform:scale(.4);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.ed-tm{display:block;overflow:clip;padding-block:.12em;margin-block:-.12em}
.ed-t{display:block}
.ed .sh-h1{position:relative;z-index:2;outline:none;caret-color:#fff;border-radius:4px}
.ed.ready .sh-h1{cursor:text}
.fine.m .ed.ready .sh-h1{cursor:none}
/* סמן הקלדה מהבהב בסוף הכותרת, עד שנוגעים בה */
.m .ed.ready:not(.on):not(.done) .sh-h1::after{content:"";display:inline-block;width:.05em;height:.74em;margin-inline-start:.1em;vertical-align:-.02em;background:#fff;animation:edblink 1.06s steps(1) infinite}
@keyframes edblink{50%{opacity:0}}
/* המסגרת */
.ed-fr{position:absolute;top:-20px;left:-28px;width:calc(100% + 56px);height:calc(100% - var(--bar) + 36px);margin-top:var(--bar);z-index:1;pointer-events:none}
.ed-fr::before,.ed-fr::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:14px;transition:opacity .45s var(--ease)}
.ed-fr::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ed-fr::after{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.04);opacity:0}
.ed.hov .ed-fr::before{opacity:0}
.ed.hov .ed-fr::after{opacity:.55}
.ed.on .ed-fr::after{opacity:1}
.ed-c{position:absolute;width:16px;height:16px;border:0 solid #fff;transition:transform .5s var(--soft),opacity .3s var(--ease)}
.ed-c:nth-child(1){top:-7px;right:-7px;border-top-width:2px;border-right-width:2px}
.ed-c:nth-child(2){top:-7px;left:-7px;border-top-width:2px;border-left-width:2px}
.ed-c:nth-child(3){bottom:-7px;right:-7px;border-bottom-width:2px;border-right-width:2px}
.ed-c:nth-child(4){bottom:-7px;left:-7px;border-bottom-width:2px;border-left-width:2px}
.ed.on .ed-c:nth-child(1){transform:translate(5px,-5px)}
.ed.on .ed-c:nth-child(2){transform:translate(-5px,-5px)}
.ed.on .ed-c:nth-child(3){transform:translate(5px,5px)}
.ed.on .ed-c:nth-child(4){transform:translate(-5px,5px)}
/* הסמן של דיגימה מחליף את הפינות כשמרחפים על הכותרת */
.fine.m .ed.hov .ed-c{opacity:0}
/* "פרסום": פס לבן שעובר על הכותרת והופך אותה */
.ed-sw{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;border-radius:14px;background:#fff;mix-blend-mode:difference;clip-path:inset(0 0 0 100%);pointer-events:none}
/* בזמן עריכה, שאר הפתיחה נסוג */
.sh-ghost{transform-origin:0 50%}

/* ===================== מה זה אתר שעובד ===================== */
.wk-l{list-style:none;margin:88px 0 0;padding:0}
.wk-l li{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:24px 64px;align-items:baseline;padding:46px 0 48px;opacity:.7;transition:opacity .9s var(--ease)}
.wk-l li::before{content:"";position:absolute;top:0;right:0;width:100%;height:1px;background:var(--fg-24)}
.wk-l li::after{content:"";position:absolute;top:0;right:0;width:100%;height:1.5px;background:var(--fg);transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.2s var(--soft)}
.wk-l li.on{opacity:1}
.wk-l li.on::after{transform:scaleX(1)}
.wk-l b{display:block;font-size:clamp(46px,5.4vw,108px);font-weight:900;line-height:.94;letter-spacing:-.01em;text-wrap:balance}
.wk-l span{display:block;font-size:clamp(20px,1.4vw,26px);line-height:1.5;color:var(--fg-72);max-width:32ch;text-wrap:pretty}
.rm .wk-l li{opacity:1}
.rm .wk-l li::after{transform:none}

@media (max-width:899px){
  .ed{margin-inline:auto}
  .ed-bar{justify-content:center;margin-bottom:28px}
  .ed-tag,.ed-reset{padding:10px 18px;text-align:center;justify-content:center}
  .ed-fr{top:-14px;left:-10px;width:calc(100% + 20px);height:calc(100% - var(--bar) + 26px)}
  .wk-head{text-align:center}
  .wk-l{margin-top:48px}
  .wk-l li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:34px 0 36px}
  .wk-l li::before,.wk-l li::after{right:0}
  .wk-l b{font-size:clamp(40px,11vw,60px)}
  .wk-l span{font-size:19px}
}