/* Donation journey — shared by the homepage and the isolated preview. */
.dj{ isolation:isolate; z-index:20; overflow-anchor:none; }
.dj.dj-entry-ready .dj-stage{
  transform:translateY(clamp(105px,18vh,180px)) scale(.982);
  transform-origin:50% 100%;
  border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;
  box-shadow:0 -24px 72px rgba(53,24,15,.11);
  clip-path:inset(100% 0 0 0 round clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0);
  transition:transform 1120ms cubic-bezier(.16,1,.3,1),clip-path 1080ms cubic-bezier(.16,1,.3,1),border-radius 960ms cubic-bezier(.16,1,.3,1),box-shadow 960ms ease;
  will-change:transform,clip-path,border-radius;
}
.dj.dj-entry-ready.dj-is-mounted .dj-stage{
  transform:none; clip-path:inset(0 0 0 0 round var(--dj-frame-radius));
  border-radius:var(--dj-frame-radius); box-shadow:0 18px 58px rgba(53,24,15,.09);
}
.home-page .dj-restart{
  inset-block-start:clamp(92px,11vh,108px);
}
@media (max-width:900px){
  .dj.dj-entry-ready .dj-stage{ transform:translateY(clamp(76px,15vh,132px)) scale(.987); clip-path:inset(100% 0 0 0 round 28px 28px 0 0); border-radius:28px 28px 0 0; }
  .dj.dj-entry-ready.dj-is-mounted .dj-stage{ transform:none; clip-path:inset(0 0 0 0 round var(--dj-frame-radius)); border-radius:var(--dj-frame-radius); }
}
@media (prefers-reduced-motion:reduce){
  .dj.dj-entry-ready .dj-stage{ transform:none!important; clip-path:none!important; border-radius:var(--dj-frame-radius)!important; transition:none!important; }
}

.dj{
    --dj-bg:#FEFCF8; --dj-accent:#F16A2C; --dj-accent-soft:#FF9A59;
    --dj-ink:#35180F; --dj-muted:#765F56; --dj-route:#B8A49A;
    --dj-control-radius:999px; --dj-icon-radius:50%; --dj-debug-radius:8px;
    --dj-choice-radius:24px; --dj-halo-x:0px; --dj-halo-y:0px;
    --dj-frame-gap:clamp(10px,1.15vw,18px); --dj-frame-radius:clamp(18px,1.6vw,26px);
    --dj-frame-top:var(--dj-frame-gap);
    position:relative; height:180vh;
    color:var(--dj-ink); background:var(--dj-bg);
  }
  .dj-stage{
    position:sticky; inset-block-start:var(--dj-frame-top);
    width:calc(100% - var(--dj-frame-gap) - var(--dj-frame-gap));
    height:calc(100vh - var(--dj-frame-top) - var(--dj-frame-gap));
    margin-inline:auto; overflow:clip; box-sizing:border-box;
    border:1px solid rgba(53,24,15,.1); border-radius:var(--dj-frame-radius);
    box-shadow:0 18px 58px rgba(53,24,15,.09);
    background:
      radial-gradient(circle at 17% 50%,rgba(255,218,184,.22),transparent 33%),
      radial-gradient(circle at 83% 46%,rgba(243,233,225,.34),transparent 31%),
      var(--dj-bg);
    isolation:isolate;
  }
  @supports (height:100svh){ .dj-stage{ height:calc(100svh - var(--dj-frame-top) - var(--dj-frame-gap)); } }
  @supports (height:100dvh){ .dj-stage{ height:calc(100dvh - var(--dj-frame-top) - var(--dj-frame-gap)); } }
  .dj-scene{
    position:absolute; inset:0; background:var(--dj-bg);
    transform:translateY(100%); opacity:0; visibility:hidden;
    transition:transform 760ms cubic-bezier(.16,1,.3,1),opacity 240ms ease,visibility 0s 760ms;
  }
  .dj.is-revealed .dj-scene{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
  /* Vertical swipes advance scenes; keep native panning from resuming mid-swipe on exit. */
  .dj.is-revealed .dj-stage{ touch-action:pan-x pinch-zoom; }
  .dj-inner{
    position:absolute; inset:0; display:grid;
    grid-template-columns:56% 44%;
    align-items:center; direction:ltr;
  }

  .dj-restart{
    position:absolute; z-index:20; inset-block-start:clamp(18px,2.6vh,30px); left:50%; right:auto;
    min-height:38px; padding:7px 13px; display:inline-flex; align-items:center; gap:7px;
    transform:translateX(-50%); white-space:nowrap; border:1px solid rgba(53,24,15,.14);
    border-radius:var(--dj-control-radius); color:var(--dj-muted); background:rgba(254,252,248,.86);
    box-shadow:0 8px 24px rgba(53,24,15,.06); backdrop-filter:blur(12px);
    font:700 .8rem/1 inherit; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none;
    transition:color 180ms ease,border-color 180ms ease,opacity 220ms ease,transform 180ms ease,visibility 0s 220ms;
  }
  .dj-restart svg{ width:15px; height:15px; }
  .dj[data-state="outro"] .dj-restart{
    opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .dj-restart:hover{ color:var(--dj-accent); border-color:rgba(241,106,44,.35); transform:translate(-50%,-1px); }
  .dj-restart:focus-visible{ outline:3px solid rgba(241,106,44,.32); outline-offset:3px; }
  .dj-continue{
    position:absolute; z-index:22; inset-block-end:clamp(12px,2vh,20px); left:50%; right:auto;
    min-height:36px; padding:7px 13px 7px 11px; display:inline-flex; align-items:center; gap:7px;
    transform:translate(-50%,8px); white-space:nowrap; border:1px solid rgba(53,24,15,.14);
    border-radius:var(--dj-control-radius); color:var(--dj-muted); background:rgba(254,252,248,.88);
    box-shadow:0 8px 24px rgba(53,24,15,.06); backdrop-filter:blur(12px);
    font:700 .78rem/1 inherit; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none;
    transition:color 180ms ease,border-color 180ms ease,opacity 240ms ease,transform 300ms cubic-bezier(.16,1,.3,1),visibility 0s 240ms;
  }
  .dj-continue svg{ width:15px; height:15px; transition:transform 220ms cubic-bezier(.16,1,.3,1); }
  .dj[data-state="outro"] .dj-continue{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:180ms;
  }
  .dj-continue:hover{ color:var(--dj-accent); border-color:rgba(241,106,44,.35); }
  .dj-continue:hover svg{ transform:translateY(2px); }
  .dj-continue:focus-visible{ outline:3px solid rgba(241,106,44,.32); outline-offset:3px; }
  .dj-close{
    position:absolute; z-index:24; inset-block-start:14px; left:14px;
    width:40px; height:40px; padding:0; display:grid; place-items:center;
    border:1px solid rgba(53,24,15,.14); border-radius:50%; color:var(--dj-muted);
    background:rgba(254,252,248,.88); box-shadow:0 8px 24px rgba(53,24,15,.06);
    backdrop-filter:blur(12px); cursor:pointer; opacity:0; visibility:hidden; pointer-events:none;
    transform:scale(.92); transition:color 180ms ease,border-color 180ms ease,background 180ms ease,
      opacity 220ms ease,transform 240ms cubic-bezier(.16,1,.3,1),visibility 0s 220ms;
  }
  .dj.is-close-ready .dj-close{
    opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s;
  }
  .dj-close svg{ width:18px; height:18px; }
  .dj-close:hover{ color:var(--dj-accent); border-color:rgba(241,106,44,.35); background:#fff; transform:rotate(4deg) scale(1.04); }
  .dj-close:focus-visible{ outline:3px solid rgba(241,106,44,.32); outline-offset:3px; }
  .dj-restart,.dj-continue,.dj-close{
    font-family:'Afek','Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  }

  .dj-visual{
    position:relative; width:100%; min-width:0; height:100%;
    overflow:hidden; background:var(--dj-bg);
    opacity:0; transition:opacity 600ms ease;
  }
  .dj.is-revealed .dj-visual{ opacity:1; }
  .dj-halo{
    position:absolute; inset:-12%; pointer-events:none;
    background:radial-gradient(circle at 36% 46%,rgba(241,106,44,.2),rgba(251,140,46,.09) 27%,transparent 61%);
    animation:djHaloBreathe 8s ease-in-out infinite alternate;
    translate:var(--dj-halo-x) var(--dj-halo-y);
    opacity:1; transition:opacity 600ms ease,translate 220ms cubic-bezier(.16,1,.3,1);
  }
  @keyframes djHaloBreathe{
    from{ transform:translate(-2%,-2%) scale(.96); }
    to{ transform:translate(3%,3%) scale(1.1); }
  }
  .dj.is-revealed .dj-halo{ opacity:0; }
  .dj:not([data-state="intro"]) .dj-halo{ animation-play-state:paused; }
  .dj-visual::after{
    content:''; position:absolute; z-index:6; inset:-1px; pointer-events:none;
    background:
      linear-gradient(to bottom,var(--dj-bg) 0,transparent 8%,transparent 92%,var(--dj-bg) 100%),
      linear-gradient(to right,transparent 72%,var(--dj-bg) 98%);
  }
  .dj-poster,.dj-video{
    position:absolute; z-index:1; inset-block-start:50%; left:0;
    display:block; width:auto; max-width:none; height:100%;
    object-fit:contain; object-position:left center;
    transform:translateY(-50%);
  }
  .dj-poster{ z-index:0; opacity:1; transition:opacity 220ms ease; }
  .dj-poster.is-hidden{ opacity:0; }
  .dj-video{
    opacity:0; transition:opacity 160ms ease;
  }
  .dj-video.is-visible{ opacity:1; }
  .dj-loop{ z-index:2; aspect-ratio:16 / 9; object-fit:fill; transition:opacity 180ms ease; }
  .dj-visual.is-looping #djVideo{ opacity:0; transition:opacity 180ms ease; }

  .dj-copy{
    box-sizing:border-box; position:static; z-index:8;
    --dj-copy-overlap:clamp(140px,14vw,270px);
    width:calc(100% + var(--dj-copy-overlap)); max-width:930px;
    margin-inline:auto; margin-left:calc(var(--dj-copy-overlap) * -1);
    padding-inline:clamp(140px,13vw,240px) clamp(24px,2vw,38px);
    direction:rtl; display:block; height:100%; padding-block:clamp(64px,9dvh,104px) 24px;
  }
  .dj-intro,.dj-story{ grid-area:1 / 1; min-width:0; align-self:center; }
  .dj-intro{
    position:absolute; z-index:9; inset:0; padding:48px; display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
    opacity:0; visibility:hidden; transition:opacity 300ms ease,visibility 0s 300ms;
  }
  .dj[data-state="intro"] .dj-intro{ opacity:1; visibility:visible; transition:opacity 300ms ease 150ms,visibility 0s; }
  .dj-story{ position:relative; height:100%; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity 300ms ease,visibility 0s 300ms; }
  .dj.is-revealed .dj-story{ opacity:1; visibility:visible; transition:opacity 300ms ease; }
  .dj-intro-headline{
    margin:0; font-size:clamp(2.75rem,4.35vw,5.4rem);
    line-height:calc(1.08em + 2px); letter-spacing:-.025em; font-weight:840; color:var(--dj-ink);
    visibility:hidden;
  }
  .dj-intro-headline.is-lettering{ visibility:visible; }
  .dj-line{ display:block; white-space:nowrap; direction:rtl; unicode-bidi:isolate; }
  .dj-word{ display:inline-block; white-space:nowrap; }
  .dj-letter{
    display:inline-block; white-space:pre; transform-origin:50% 100%;
  }
  .is-lettering .dj-letter{
    animation:djLetterIn var(--dj-letter-duration,720ms) cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--dj-letter-delay,0ms);
    will-change:opacity,filter,transform;
  }
  @keyframes djLetterIn{
    from{ opacity:0; filter:blur(1.25px); transform:translateY(.12em) scale(.985); }
    58%{ opacity:.94; filter:blur(.2px); }
    to{ opacity:1; filter:blur(0); transform:none; }
  }
  .dj-intro-headline em,.dj-headline em{
    display:inline-block; white-space:nowrap;
    direction:rtl; unicode-bidi:isolate;
    font-style:normal; background:var(--grad-accent);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .dj-intro-headline em:has(.dj-letter),.dj-headline em:has(.dj-letter){
    background:none; color:inherit; -webkit-text-fill-color:initial;
  }
  .dj-intro-headline em .dj-letter,.dj-headline em .dj-letter{
    background-image:linear-gradient(90deg,#FF6A3D 0%,#FB8C2E 100%);
    background-size:var(--dj-accent-width,100%) 100%;
    background-position:var(--dj-accent-offset,0) 50%; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .dj-mobile-break{ display:inline; }
  .dj-intro-mobile{ display:none; }
  .dj-start{
    margin:30px auto 0; box-sizing:border-box; height:auto; min-height:44px; padding:10px 26px;
    border:0; border-radius:var(--dj-control-radius); cursor:pointer;
    color:#fff; font:inherit; font-size:max(20px,var(--ctaf,19px)); font-weight:760;
    justify-content:center; gap:14px!important;
    box-shadow:0 6px 18px rgba(241,106,44,.16);
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:box-shadow 180ms ease,transform 180ms ease;
  }
  .dj-start.is-ready{
    opacity:1; pointer-events:auto;
    animation:djStartReveal 420ms cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes djStartReveal{
    from{ opacity:0; transform:translateY(8px) scale(.985); }
    to{ opacity:1; transform:none; }
  }
  .dj-start:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(241,106,44,.23); }
  .dj .dj-start{
    font-size:20px!important; height:auto!important; min-height:44px;
    padding:10px 26px!important; column-gap:14px!important;
  }
  .dj-start span{ min-width:0; line-height:1.15; text-wrap:balance; }
  .dj-start svg{ width:22px; height:22px; flex:none; transition:transform 180ms ease; }
  .dj-start:hover svg{ transform:translateX(-3px); }
  .dj-start:focus-visible{ outline:3px solid var(--dj-ink); outline-offset:5px; }
  .dj-copy-frame{
    position:relative; box-sizing:border-box; flex:1; min-height:0;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:22px; padding-block-end:24px;
  }
  .dj-headline{
    max-width:14.5ch; margin:0; color:var(--dj-ink);
    font-size:clamp(3.1rem,2.05rem + 2.35vw,5rem);
    font-weight:840; line-height:calc(.98em + 2px); letter-spacing:-.038em;
    text-wrap:balance;
  }
  .dj-headline em{
    display:inline-block;
  }
  .dj-headline{ transition:opacity 300ms ease; }
  .dj[data-state="outro-transition"] .dj-headline{ opacity:0; }
  .dj-reflection-row{
    width:min(100%,660px); min-height:1.45em;
    display:flex; align-items:center; gap:16px; direction:rtl;
  }
  .dj-emotion{
    position:relative; width:100%; min-height:1.45em; margin:0;
    max-width:34rem; color:var(--dj-muted); font-size:clamp(.8rem,1.12vw,1.25rem); line-height:1.45;
    white-space:normal; text-wrap:balance;
    opacity:0; visibility:hidden; transition:opacity 300ms ease,visibility 0s 300ms;
  }
  @property --dj-stroke-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
  }
  .dj[data-state="reflection"] .dj-emotion{
    flex:1 1 auto; width:auto; max-width:min(100%,34rem); padding:11px 18px;
    border:1.5px solid transparent; border-radius:14px;
    background:
      linear-gradient(rgba(254,252,248,.96),rgba(254,252,248,.96)) padding-box,
      conic-gradient(from var(--dj-stroke-angle),rgba(118,95,86,.17) 0 68%,rgba(241,106,44,.3) 76%,var(--dj-accent) 86%,var(--dj-accent-soft) 92%,rgba(118,95,86,.17) 100%) border-box;
    box-shadow:0 9px 28px rgba(241,106,44,.1);
    opacity:1; visibility:visible; transition:opacity 300ms ease;
    animation:djEmotionStroke 3.2s linear infinite;
  }
  @keyframes djEmotionStroke{ to{ --dj-stroke-angle:360deg; } }
  .dj-impact{
    display:none; flex:none; align-items:center; gap:8px; margin:0;
    direction:rtl; text-align:right; color:var(--dj-muted);
  }
  .dj[data-state="reflection"] .dj-impact{ display:flex; }
  .dj-impact strong{
    flex:none; font-size:clamp(1.8rem,2.45vw,2.4rem); line-height:1; font-weight:900;
    background:var(--grad-accent); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .dj-impact span{ font-size:clamp(.8rem,.92vw,.95rem); line-height:1.24; font-weight:780; white-space:nowrap; }
  .dj-headline.is-entering{
    animation:none;
  }
  @keyframes djCopyIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .dj[data-state="outro"] .dj-headline{
    max-width:none; font-size:clamp(2.9rem,3.75vw,4.65rem); line-height:calc(.98em + 2px);
  }
  .dj-headline .dj-final-mark{
    display:inline-block; margin:0; font-style:normal; line-height:inherit; vertical-align:baseline;
    background:var(--grad-accent); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  .dj-outro-narrow{ display:none; }
  .dj[data-state="outro"] .dj-final-mark{
    animation:djFinalMarkMotion 2.8s ease-in-out 1s infinite alternate;
    filter:drop-shadow(0 6px 14px rgba(241,106,44,.13));
    transform-origin:right center;
  }
  @keyframes djFinalMarkMotion{
    from{ transform:scale(1); }
    to{ transform:scale(1.045); }
  }
  .dj.is-revealed[data-state="outro-transition"] .dj-route,.dj.is-revealed[data-state="outro"] .dj-route{
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity 240ms ease,visibility 0s 240ms;
  }

  .dj-route{
    position:relative; flex:none; width:min(100%,520px); height:116px;
    margin-block-start:clamp(2px,.7vh,8px); direction:ltr;
    opacity:0; visibility:hidden; transition:opacity 240ms ease,visibility 0s 240ms;
  }
  .dj.is-revealed .dj-route{ opacity:1; visibility:visible; transition:opacity 360ms ease 140ms; }
  .dj-route-svg{
    position:absolute; inset:0; width:100%; height:92px;
    overflow:visible; pointer-events:none;
  }
  .dj-route-svg--mobile{ display:none; }
  .dj-route-line{
    fill:none; stroke-linecap:round; stroke-linejoin:round;
    stroke-width:3; stroke-dasharray:1 11;
  }
  .dj-route-line--base{ stroke:rgba(118,95,86,.3); }
  .dj-route-line--active{ stroke:var(--dj-accent); stroke-width:4; }
  .dj-route-track{
    position:absolute; inset:0; direction:ltr;
  }
  .dj-stop{
    position:absolute; z-index:4; left:calc(var(--x) * 1%); top:calc(var(--y) * 1px);
    width:92px; padding:0; display:flex; flex-direction:column;
    align-items:center; gap:8px; transform:translate(-50%,-50%);
    border:0; color:var(--dj-route); background:transparent;
    font:inherit; cursor:pointer;
    transition:opacity 220ms ease,color 220ms ease,transform 300ms ease;
  }
  .dj-stop-marker{
    width:42px; height:42px; border:1px solid rgba(118,95,86,.18);
    border-radius:50%; display:grid; place-items:center;
    color:inherit; background:var(--dj-bg);
    box-shadow:0 8px 22px rgba(67,31,16,.08);
    transition:width 280ms ease,height 280ms ease,color 220ms ease,
               border-color 220ms ease,box-shadow 280ms ease,background 220ms ease;
  }
  .dj-stop-marker svg{
    width:22px; height:22px;
    fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
    transition:transform 280ms ease;
  }
  .dj-stop-label{
    color:inherit; font-size:clamp(.72rem,.66rem + .15vw,.82rem);
    line-height:1.15; font-weight:760; white-space:nowrap; text-align:center;
    transition:color 220ms ease,transform 280ms ease;
  }
  .dj-stop.is-future{ color:#D7CBC5; }
  .dj-stop.is-next{ color:#B4A197; }
  .dj-stop.is-past{ color:#B4A197; }
  .dj-stop.is-current{
    z-index:5; color:var(--dj-accent);
    transform:translate(-50%,-50%) scale(1.04);
  }
  .dj-stop.is-current .dj-stop-marker{
    width:52px; height:52px; color:#fff;
    border-color:transparent;
    background:linear-gradient(145deg,var(--dj-accent-soft),var(--dj-accent));
    box-shadow:0 12px 28px rgba(241,106,44,.28),0 0 0 7px rgba(241,106,44,.09);
  }
  .dj-stop.is-current .dj-stop-marker svg{ transform:scale(1.05); }
  .dj-stop.is-current .dj-stop-label{
    background:var(--grad-accent); background-clip:text; -webkit-background-clip:text; color:transparent;
  }
  .dj-stop:not(:disabled):hover{ opacity:1; color:var(--dj-accent); }
  .dj-stop:not(:disabled):hover .dj-stop-marker{
    border-color:rgba(241,106,44,.42); box-shadow:0 10px 25px rgba(241,106,44,.17);
  }
  .dj-stop:focus-visible{ outline:0; }
  .dj-stop:focus-visible .dj-stop-marker{ outline:3px solid var(--dj-accent); outline-offset:4px; }
  .dj-progress-sr{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* דילוג מינימלי בפינה הימנית התחתונה — נוכח לאורך כל המסע, לצד ה-X.
     ההיסט מהפינה שומר מרחק מכפתור הנגישות הצף שיושב שם. */
  .dj-skip{
    position:absolute; z-index:23;
    inset-block-end:clamp(14px,2.4vh,26px); right:clamp(30px,3.4vw,52px); left:auto;
    min-height:30px; padding:4px 10px 6px;
    display:inline-flex; align-items:center; gap:6px; direction:rtl;
    border:0; border-radius:var(--dj-control-radius);
    color:var(--dj-muted); background:transparent;
    font:inherit; font-size:clamp(.74rem,.88vw,.85rem); font-weight:720;
    letter-spacing:-.01em; white-space:nowrap; cursor:pointer; opacity:.78;
    transition:opacity 220ms ease,color 180ms ease,visibility 0s;
  }
  .dj-skip::after{
    content:''; position:absolute; inset-inline:10px; inset-block-end:3px;
    height:1px; background:currentColor; opacity:.36;
  }
  .dj-skip svg{ width:13px; height:13px; flex:none; transition:transform 200ms ease; }
  .dj-skip:hover{ opacity:1; color:var(--dj-accent); }
  .dj-skip:hover svg{ transform:translateX(-3px); }
  .dj-skip:focus-visible{ opacity:1; outline:3px solid var(--dj-ink); outline-offset:3px; }
  /* בסיום המסע הכרטיסים כבר על המסך, ואז הדילוג מיותר. */
  .dj[data-state="outro"] .dj-skip,
  .dj[data-state="outro-transition"] .dj-skip,
  .dj[data-state="skipped"] .dj-skip{
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms ease,visibility 0s 200ms;
  }

  .dj-action{
    position:relative; flex:none; width:100%; min-height:54px;
    margin-block-start:clamp(2px,.8vh,8px);
  }
  .dj-choices{
    position:absolute; inset-inline:0; bottom:0; display:grid; grid-template-columns:minmax(0,1fr); gap:7px;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
    transition:opacity 350ms ease,transform 350ms ease,visibility 0s 350ms;
  }
  .dj-choices.is-visible{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  .dj[data-state="outro"] .dj-story{ justify-content:center; gap:0; }
  .dj[data-state="outro"] .dj-copy-frame{
    flex:none; height:auto; min-height:0; justify-content:center; gap:0; padding:0;
  }
  .dj[data-state="outro"] .dj-emotion{ display:none; }
  .dj[data-state="outro"] .dj-reflection-row{ display:none; }
  .dj[data-state="outro"] .dj-route{ display:none; }
  .dj[data-state="outro"] .dj-action{ flex:none; min-height:0; margin:0; }
  .dj[data-state="outro"] .dj-choices{
    position:relative; inset:auto; bottom:auto; margin:0;
  }
  .dj-tribute{
    grid-column:1 / -1; margin:0 0 4px; text-align:center;
    color:var(--dj-muted); font-size:clamp(1rem,1.25vw,1.2rem); line-height:1.2;
    font-weight:720;
  }
  .dj-donate{
    position:relative; overflow:visible; box-sizing:border-box; min-height:58px; padding:4px 10px;
    display:flex; align-items:center; gap:10px; direction:rtl; text-decoration:none; color:var(--dj-ink);
    border:1px solid rgba(118,95,86,.22); border-radius:var(--dj-choice-radius); background:var(--dj-bg);
    transition:border-color 180ms ease,background 180ms ease,transform 180ms ease;
  }
  .dj-donate strong{
    order:1; flex:none; min-width:82px; font-size:1.65rem; line-height:1; font-weight:900; background:var(--grad-accent);
    background-clip:text; -webkit-background-clip:text; color:transparent;
  }
  .dj-donate small{ font-size:.65em; }
  .dj-donate span{ order:2; flex:1; min-width:0; font-size:.94rem; line-height:1.2; font-weight:720; white-space:nowrap; }
  .dj-donate-plate{
    position:static; order:3; flex:none; width:70px; height:70px; margin-block:-10px;
    object-fit:contain; pointer-events:none; transform-origin:center;
    transition:transform 240ms cubic-bezier(.16,1,.3,1),filter 240ms ease;
    filter:drop-shadow(0 5px 7px rgba(67,31,16,.2));
  }
  .dj-donate--custom{ padding-inline:18px; }
  .dj-donate--custom strong{ font-size:1.18rem; }
  .dj-donate:hover{ transform:translateY(-2px); border-color:var(--dj-accent); background:#FFF6EE; }
  @media (hover:hover) and (pointer:fine){
    .dj-donate:hover{ z-index:3; }
    .dj-donate:hover .dj-donate-plate{
      transform:translate(-18px,-9px) scale(1.55);
      filter:drop-shadow(0 12px 15px rgba(67,31,16,.25));
    }
  }
  .dj-donate:focus-visible{ outline:3px solid var(--dj-ink); outline-offset:4px; }

  .dj-debug{
    display:none; position:fixed; z-index:9999;
    inset-block-end:12px; inset-inline-start:12px; padding:8px 12px;
    border-radius:var(--dj-debug-radius); color:#EDE7E3; background:rgba(27,22,20,.86);
    font:11px/1.5 ui-monospace,Consolas,monospace;
    white-space:pre; pointer-events:none;
  }
  html[data-debug] .dj-debug{ display:block; }

  @media (max-width:1180px) and (min-width:901px){
    .dj-copy{ padding-inline:clamp(120px,13vw,154px) 26px; }
    .dj-headline{ font-size:clamp(2.6rem,4.7vw,3.5rem); }
  }
  @media (min-width:901px) and (orientation:landscape), (min-width:1181px){
    .dj{
      --dj-frame-gap:clamp(30px,3vw,44px);
      --dj-frame-radius:clamp(26px,2.2vw,34px);
      --dj-route-drop:clamp(20px,calc(50dvh - 310px),118px);
    }
    .home-page .dj{
      --dj-frame-top:max(80px,var(--dj-frame-gap));
      background:var(--dj-bg); /* 10.9.2026: the site's cream, not a grey wash */
    }
    .dj-stage{ box-shadow:0 24px 74px rgba(53,24,15,.13); }
    .dj-restart,.dj-continue{
      left:auto; right:clamp(34px,3.5vw,54px); direction:rtl;
      justify-content:flex-start; text-align:right; transform:none;
    }
    .dj-restart:hover{ transform:translateY(-1px); }
    .dj-continue{ transform:translateY(8px); }
    .dj[data-state="outro"] .dj-continue{ transform:none; }
    .home-page .dj-restart{ inset-block-start:14px; }
    .dj-story{ justify-content:center; }
    .dj-copy-frame{ transform:translate(128px,-68px); }
    .dj-copy-frame{ flex:none; height:auto; padding:0; }
    .dj-route{ height:160px; margin-block-start:0; transform:translate(128px,var(--dj-route-drop)); }
    .dj[data-state="reflection"] .dj-route{ transform:translate(128px,min(72px,var(--dj-route-drop))); }
    .dj-route-svg{ height:160px; }
    .dj .dj-start{ min-height:50px; padding:12px 32px!important; font-size:22px!important; }
    .dj-action{ position:absolute; inset-inline:0; bottom:0; min-height:0; }
    .dj[data-state="outro"] .dj-copy-frame{ transform:translateX(128px); }
    .dj[data-state="outro"] .dj-action{ position:relative; inset:auto; transform:translateX(128px); }
    .dj[data-state="outro"] .dj-tribute{ text-align:right; }
  }
  @media (min-width:901px) and (orientation:landscape) and (max-height:800px){
    .dj[data-state="outro"] .dj-copy{ padding-block:72px 64px; }
    .dj[data-state="outro"] .dj-donate{ min-height:48px; }
    .dj[data-state="outro"] .dj-donate-plate{ width:60px; height:60px; }
  }
  @media (max-width:900px), (max-width:1180px) and (orientation:portrait){
    .dj{ --dj-frame-gap:8px; --dj-frame-radius:20px; height:175vh; }
    .home-page .dj{ --dj-frame-top:72px; }
    .dj-stage{
      background:radial-gradient(circle at 50% 19%,rgba(255,221,190,.2),transparent 30%),var(--dj-bg);
    }
    .dj-close{
      inset-block-start:7px; left:10px; width:32px; height:32px;
      box-shadow:0 3px 10px rgba(53,24,15,.06);
    }
    .dj-close::after{ content:''; position:absolute; inset:-6px; }
    .dj-close svg{ width:14px; height:14px; }
    .dj-scene{ inset-block-start:44px; }
    .dj[data-state="outro"] .dj-scene{ inset-block-end:46px; }
    .home-page .dj-restart{
      inset-block-start:7px; left:auto; right:10px; transform:none;
    }
    .home-page .dj-restart:hover{ transform:translateY(-1px); }
    .dj-inner{
      display:flex; flex-direction:column; justify-content:center;
      gap:clamp(8px,1.4vh,14px); padding:0 clamp(20px,5vw,38px) 14px;
    }
    .dj-visual{
      order:-1; flex:none; width:calc(100% + clamp(40px,10vw,76px));
      height:clamp(300px,38dvh,390px); margin-inline:calc(clamp(20px,5vw,38px) * -1);
    }
    .dj-poster,.dj-video{
      height:100%; left:50%; transform:translate(-25%,-50%);
      mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    }
    .dj-visual::after{
      background:
        linear-gradient(to bottom,var(--dj-bg) 0,transparent 18%,transparent 82%,var(--dj-bg) 100%),
        linear-gradient(to right,var(--dj-bg),transparent 9%,transparent 91%,var(--dj-bg));
    }
    .dj-copy{
      flex:none; width:100%; max-width:650px; padding:0; margin-inline:auto;
      position:static; height:auto; text-align:center; display:block;
    }
    .dj-halo{
      inset:0; filter:blur(4px);
      background:radial-gradient(circle closest-side at 50% 42%,rgba(241,106,44,.2),rgba(251,140,46,.09) 34%,transparent 72%);
    }
    .dj-intro{
      position:absolute; inset:0; padding:24px; display:flex; flex-direction:column;
      justify-content:center; align-items:center; max-width:none; margin-inline:auto;
    }
    .dj-intro-headline{ font-size:clamp(2.5rem,7.1vw,4rem); }
    .dj-start{ width:min(100%,360px); }
    .dj-copy-frame{ flex:none; height:240px; justify-content:center; align-items:center; padding:0; gap:14px; }
    .dj-headline{
      max-width:none; margin:0;
      font-size:clamp(2.9rem,7.8vw,4.35rem); line-height:calc(1.03em + 2px);
    }
    .dj-route{ width:min(100%,420px); height:132px; margin:0 auto; }
    .dj-route-svg{ height:116px; }
    .dj-route-svg--desktop{ display:none; }
    .dj-route-svg--mobile{ display:block; }
    .dj-stop{ top:calc(var(--my) * 1px); }
    .dj-stop{ width:78px; gap:7px; }
    /* בנייד כפתור הנגישות הצף תופס את הפינה עצמה, ולכן הדילוג מוסט שמאלה. */
    .dj-skip{
      inset-block-end:10px; right:66px;
      min-height:28px; padding:3px 9px 5px; font-size:.78rem;
    }
    .dj-stop-marker{ width:38px; height:38px; }
    .dj-stop.is-current .dj-stop-marker{ width:47px; height:47px; }
    .dj-action{ min-height:48px; margin-block-start:0; display:flex; justify-content:center; }
    .dj:not([data-state="outro"]):not([data-state="poster-fallback"]) .dj-action{ display:none; }
    .dj-choices{ max-width:520px; margin-inline:auto; text-align:right; }
    .dj[data-state="outro"] .dj-headline{ font-size:clamp(1.95rem,8.1vw,2.8rem); }
    .dj[data-station="3"]:not([data-state="outro"]):not([data-state="outro-transition"]) .dj-headline{
      font-size:clamp(1.9rem,7.9vw,2.7rem);
    }
    .dj[data-state="reflection"] .dj-route{ transform:translateY(45px); }
    .dj[data-state="outro"] .dj-final-mark{ transform-origin:center; }
    .dj-reflection-row{ flex-direction:column; gap:7px; align-items:center; }
    .dj[data-state="reflection"] .dj-emotion{ flex:none; width:100%; }
    .dj-impact{ justify-content:center; text-align:center; }
    .dj-impact strong{ font-size:1.45rem; }
    .dj-impact span{ font-size:.72rem; }
    .dj-impact br{ display:none; }
  }
  /* Portrait tablets use the stacked composition, including large iPads.
     Let the video absorb the available height instead of overflowing the CTA/footer. */
  @media (min-width:521px) and (max-width:1180px) and (orientation:portrait){
    .dj-poster,.dj-video{ transform:translate(-35%,-50%); }
    .dj[data-state="outro"] .dj-visual{
      flex:0 1 390px; min-height:0; height:390px;
    }
    .dj[data-state="outro"] .dj-inner{ padding-block-end:26px; }
    .dj[data-state="reflection"] .dj-route{ transform:translateY(24px); }
  }
  /* Keep the landscape tablet text and route inside their own column. */
  @media (min-width:901px) and (max-width:1180px) and (orientation:landscape){
    .dj-copy{ width:100%; max-width:none; margin:0; padding-inline:24px; }
    .dj-headline{ font-size:clamp(2.1rem,3.75vw,2.8rem); }
    .dj-copy-frame{ transform:translateY(-48px); }
    .dj-route{ width:calc(100% - 64px); margin-inline:32px; transform:translateY(var(--dj-route-drop)); }
    .dj[data-state="reflection"] .dj-route{ transform:translateY(min(72px,var(--dj-route-drop))); }
    .dj[data-state="outro"] .dj-copy-frame,
    .dj[data-state="outro"] .dj-action{ transform:none; }
    .dj[data-state="outro"] .dj-headline{ font-size:clamp(1.85rem,3.3vw,2.45rem); }
    .dj-reflection-row{ flex-wrap:wrap; gap:10px; }
    .dj[data-state="reflection"] .dj-emotion{ flex-basis:100%; }
    .dj[data-state="outro"] .dj-tribute{ font-size:.88rem; }
  }
  @media (max-width:520px){
    .dj-inner{ justify-content:center; gap:7px; padding:0 24px 16px; }
    .dj-restart{ inset-block-start:11px; min-height:34px; padding:6px 11px 6px 9px; font-size:.74rem; }
    .dj-continue{ inset-block-end:9px; min-height:33px; padding:6px 11px 6px 9px; font-size:.72rem; }
    .dj-visual{
      width:calc(100% + 48px); height:clamp(225px,calc(42svh - 30px),335px); margin-inline:-24px;
    }
    /* 5.10.2026: היה ‎width:180%‎ עם ‎height:auto‎ — הווידאו יצא רחב כמעט פי
       שניים מהמסגרת, גבוה ממנה בהרבה, וכמעט חצי מגובהו נחתך. באייפון, שבו
       חלון הדפדפן נמוך יותר והמסגרת מתכווצת איתו, הסיר נחתך בראשו והסצנה
       נראתה נמוכה וקטועה. עכשיו הגודל נגזר מגובה המסגרת ולא מרוחבה, ולכן
       החיתוך קטן וזהה בכל גובה מסך, והסצנה ממורכזת בשני הצירים. */
    .dj-poster,.dj-video,.dj-loop{
      left:50%; inset-block-start:50%;
      width:auto; max-width:none; height:116%;
      object-fit:contain; object-position:center;
      transform:translate(-50%,-50%); mask-image:none;
    }
    .dj-visual::after{
      background:linear-gradient(to bottom,var(--dj-bg) 0,transparent 13%,transparent 87%,var(--dj-bg) 100%);
    }
    .dj-intro-headline{ font-size:clamp(2.25rem,11.7vw,3.55rem); }
    .dj-intro-desktop{ display:none; }
    .dj-intro-mobile{ display:block; }
    .dj-intro .dj-mobile-break{ display:block; }
    .dj-copy-frame{ height:218px; }
    .dj-headline{ font-size:clamp(2.35rem,10.7vw,3.45rem); }
    .dj[data-state="outro"] .dj-headline{ font-size:clamp(1.95rem,8.1vw,2.8rem); }
    .dj[data-state="outro"] .dj-visual{ height:clamp(180px,calc(32svh - 46px),239px); }
    .dj-route{ width:min(100%,350px); height:132px; }
    .dj-stop{ width:70px; gap:6px; }
    .dj-stop-marker{ width:35px; height:35px; }
    .dj-stop-marker svg{ width:20px; height:20px; }
    .dj-stop.is-current .dj-stop-marker{ width:44px; height:44px; }
    .dj-stop-label{ font-size:.72rem; }
    /* Phone: the button hugs its text (no full-width bar), text is smaller and
       the arrow keeps its own column so it can never sit on the words. */
    .dj-start{ width:max-content; max-width:100%; font-size:15px; padding-inline:18px; gap:10px; }
    .dj .dj-intro .dj-start{
      width:max-content; max-width:100%; min-height:40px; padding:7px 18px!important;
      gap:10px!important; column-gap:10px!important; font-size:15px!important; white-space:nowrap;
    }
    .dj-start span{ flex:0 1 auto; text-wrap:nowrap; white-space:nowrap; }
    .dj-start svg{ flex:none; width:18px; height:18px; }
    .dj-emotion{ font-size:clamp(.74rem,3.4vw,1rem); }
    .dj-choices{ width:100%; max-width:360px; gap:6px; }
    .dj-tribute{
      margin-bottom:2px; font-size:clamp(.76rem,3.4vw,.86rem);
      line-height:1.2; letter-spacing:-.015em; white-space:nowrap;
    }
    .dj-donate{ min-height:48px; padding:2px 8px; gap:8px; }
    .dj-donate-plate{ width:56px; height:56px; margin-block:-7px; }
    .dj-donate strong{ min-width:66px; font-size:1.4rem; }
    .dj-donate span{ font-size:.86rem; }
  }
  @media (max-height:650px) and (max-width:900px){
    .dj-visual{ height:clamp(185px,33svh,215px); }
    .dj-copy-frame{ height:192px; }
    .dj-headline{ font-size:clamp(2.15rem,10.2vw,2.8rem); }
    .dj[data-state="outro"] .dj-headline{ font-size:clamp(2rem,9.2vw,2.7rem); }
    .dj-route{ height:120px; }
    .dj-action{ min-height:36px; }
  }
  @media (max-height:780px) and (max-width:520px){
    .dj:not([data-state="outro"]) .dj-visual{ height:clamp(150px,calc(100svh - 510px),265px); }
    .dj[data-state="outro"] .dj-visual{ height:clamp(145px,calc(100svh - 570px),210px); }
  }
  @media (max-width:360px){
    .dj .dj-start{ font-size:15px!important; padding-inline:8px!important; gap:5px; }
    .dj-start svg{ width:18px; height:18px; }
    .dj-donate{ min-height:45px; padding:2px 6px; gap:6px; text-align:right; }
    .dj-donate-plate{ width:51px; height:51px; margin-block:-5px; }
    .dj-donate strong{ min-width:61px; font-size:1.25rem; }
    .dj-donate span{ font-size:.77rem; line-height:1.15; white-space:nowrap; }
    .dj-outro-wide{ display:none; }
    .dj-outro-narrow{ display:block; }
    .dj[data-state="outro"] .dj-headline{ font-size:1.72rem; }
    .dj[data-station="3"]:not([data-state="outro"]):not([data-state="outro-transition"]) .dj-headline{ font-size:1.62rem; }
  }
  @media (prefers-reduced-motion:reduce){
    .dj-headline.is-entering{ animation:none; }
    .dj-poster,.dj-video,.dj-stop,.dj-stop-marker,.dj-stop svg,.dj-cta,.dj-restart,.dj-continue,.dj-close{ transition:none; }
    .dj-cta,.dj-cta.is-visible,.dj-cta:hover{ transform:none; }
    .dj-halo,.dj-visual,.dj-intro,.dj-story,.dj-headline,.dj-emotion,.dj-route{ transition-duration:100ms!important; transition-delay:0s!important; }
    .dj-halo,.is-lettering .dj-letter,.dj[data-state="reflection"] .dj-emotion{ animation:none!important; transform:none; filter:none; }
    .dj-choices,.dj-donate{ transition:opacity 100ms ease; transform:none!important; }
    .dj-scene{ transform:none; transition:opacity 100ms ease; }
    .dj-halo{ translate:none; }
    .dj-start svg{ transition:none; transform:none!important; }
    .dj-start{ animation:none!important; transition:none; }
    .dj-start.is-ready{ opacity:1; transform:none; }
    .dj[data-state="outro"] .dj-final-mark{ animation:none; filter:none; }
  }

  /* Keep motion control available to keyboard/assistive technology without video-player chrome. */
  .dj-pause{
    position:absolute; z-index:24; inset-block-start:14px; left:64px;
    width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .dj-pause:focus-visible{
    width:auto; height:auto; min-height:40px; margin:0; padding:8px 12px;
    overflow:visible; clip-path:none;
    border:1px solid rgba(53,24,15,.14); border-radius:var(--dj-control-radius); color:var(--dj-ink);
    background:rgba(254,252,248,.88); box-shadow:0 8px 24px rgba(53,24,15,.06);
    backdrop-filter:blur(12px); font:700 12px/1.3 'Afek','Assistant',sans-serif; cursor:pointer;
  }
  .dj-pause[hidden],.dj-manual[hidden]{ display:none; }
  .dj-manual{ display:none; }
  .dj-pause:focus-visible,.dj-manual button:focus-visible,
  .dj-close:focus-visible,.dj-restart:focus-visible,.dj-continue:focus-visible{
    outline:3px solid var(--dj-ink); outline-offset:3px;
  }
  .dj-stop:focus-visible .dj-stop-marker{ outline-color:var(--dj-ink); }
  .dj.dj-is-paused .dj-halo,.dj.dj-is-paused .dj-start,
  .dj.dj-is-paused .dj-emotion,.dj.dj-is-paused .dj-final-mark{
    animation-play-state:paused!important;
  }
  .dj.dj-is-paused .dj-stage{ touch-action:pan-y pinch-zoom; }
  @media (max-width:900px){
    .dj-pause{ inset-block-start:10px; left:52px; }
    .dj-pause:focus-visible{ min-height:32px; }
  }
  @media (prefers-reduced-motion:reduce){
    .dj.is-revealed .dj-stage{ touch-action:pan-y pinch-zoom; }
    .dj .dj-continue{ display:none; }
    .dj-manual{
      position:absolute; z-index:22; inset-block-end:9px; left:50%; transform:translateX(-50%);
      display:flex; justify-content:center; gap:8px; width:max-content; max-width:calc(100% - 24px);
      direction:rtl;
    }
    .dj-manual button{
      min-width:44px; min-height:34px; padding:6px 10px; border:1px solid var(--dj-muted);
      border-radius:var(--dj-control-radius); color:var(--dj-ink); background:var(--dj-bg);
      font:700 12px/1.3 'Afek','Assistant',sans-serif; cursor:pointer;
    }
    .dj-manual button[aria-disabled="true"]{ color:var(--dj-muted); cursor:default; }
    .dj-halo,.dj-visual,.dj-intro,.dj-story,.dj-headline,.dj-emotion,.dj-route,
    .dj-choices,.dj-donate,.dj-scene{ transition:none!important; }
  }
  @media (prefers-reduced-motion:reduce) and (max-width:900px){
    .dj[data-state="reflection"] .dj-route{ transform:none; }
  }