/* hero.css · the homepage hero (Lior, 5 Oct 2026): the headline, the paragraph with the rolling engine name, the team chart
   in the stage, and the engines ribbon. Loaded on the homepage only (scayla.co.il: at the top of the page body, after mirror.css, brief 1.8). Every rule is scoped to the hero, the
   stage (#org) or the ribbon, and the keyframes carry an org- prefix, so nothing else on the site can change. Ported from
   the approved sketch: https://claude.ai/artifact/4BVY4FJQmSQvvJmSntJcRn */

/* ── the headline and the paragraph ── */
.hero{--lav-2:#b3a4ff;--night-soft:#cfc6ff}
.hero h1 .ag{font-style:normal}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .ag{background:linear-gradient(260deg,var(--night-ink) 20%,var(--lav-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.04em}
}
/* two sentences; the first holds the engine name, which rolls on a drum: the old name turns up and away, the next rises
   from below, the slot eases to its width. A screen reader hears the whole list once (.sr). Still under reduced motion
   and the a11y menu's עצירת אנימציות (hero.js). */
.hero .sub.sub-final{max-width:780px;text-wrap:balance}
.hero .sub-l1{display:block}
.hero .rot{display:inline-grid;justify-items:start;white-space:nowrap;color:var(--night-ink);font-weight:500;perspective:320px;overflow-x:clip;overflow-y:visible;transition:width .32s var(--ease)}
.hero .rot-w{grid-area:1/1;backface-visibility:hidden;transform-origin:50% 50% -.62em;transition:transform .62s cubic-bezier(.33,.9,.24,1),opacity .5s var(--ease)}
.hero .rot-w.in{transform:rotateX(-88deg);opacity:0}
.hero .rot-w.out{transform:rotateX(88deg);opacity:0}
/* Hebrew (brief 5.2): the first sentence with Perplexity, the widest name, is 345.0 px at 17 px: D = 345.0 / 17 x 1.03 = 20.9.
   The floor is 13 px, not 14: at 320 px, 280 / 20.9 = 13.4 px is what keeps the sentence on one line */
@media (max-width:400px){.hero .sub.sub-final{font-size:clamp(13px,calc((100vw - 40px) / 20.9),17px)}}
.hero .sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── the stage: Scayla's team at work (illustrative, data-nosnippet). The frame is site.css's .stage; this adds the tokens,
   the container the chart's layouts key on, and a slightly higher seat on the arc ── */
#org{
  --ring:#15122a; --wire:#3b3561; --port:#6a6394;
  --task:#8b76f2; --task-ring:rgba(139,118,242,.26); --task-ring-0:rgba(139,118,242,0);
  --night-soft:#cfc6ff; --n-faint:#8f89aa; --n-card:rgba(255,255,255,.04); --n-card-2:rgba(255,255,255,.07);
  --work-ink:#d9d0ff; --work-bg:rgba(139,118,242,.18);
  --wait-ink:#f5c58c; --wait-bg:rgba(224,162,79,.15); --wait-dot:#e0a24f;
  --live-ink:#5fe0ad; --live-bg:rgba(36,200,140,.14);
  --badge-bg:#e0a24f; --badge-ink:#1c1206;
  --tn-plan:#e9dcc6; --tn-research:#cfdbf1; --tn-content:#d9d1f4; --tn-store:#cde5da; --tn-results:#efd4cf;
  --pl-plan:#ffcf94; --pl-plan-bg:rgba(255,194,122,.12); --pl-research:#a9c8ff; --pl-research-bg:rgba(127,178,255,.13);
  --pl-content:#cfc3ff; --pl-content-bg:rgba(139,118,242,.18); --pl-store:#8fe6c3; --pl-store-bg:rgba(111,227,180,.12);
  --pl-results:#ffb4a8; --pl-results-bg:rgba(255,157,140,.13);
  --you-bg:#f4f2fb; --you-ink:#17151f;
  --brain-glow:rgba(139,118,242,.16); --brain-glow-0:rgba(139,118,242,0);
  --cursor-fill:#f4f2fb; --cursor-line:#0b0917; --cursor-shadow:drop-shadow(0 2px 3px rgba(0,0,0,.45));
  --face-lift:0 10px 22px -10px rgba(0,0,0,.6);
  --tip-bg:rgba(19,16,36,.97); --tip-shadow:0 18px 40px -16px rgba(0,0,0,.7);
  --lav-2:#b3a4ff;
}
#org.stage{margin-top:clamp(30px,3vw,44px);container-type:inline-size;container-name:stage}
/* site.css leaves list bullets and inline media to the browser, and its .st (a mono label elsewhere on the page) would
   restyle the chart's status chips: reset the three inside the stage only */
#org ul,#org ol{list-style:none;padding:0}
#org img,#org svg,#org canvas{display:block}
#org .st{font-family:inherit;letter-spacing:normal;text-transform:none}

#org .stage-top{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--night-hair)}
#org .store{display:flex;align-items:center;gap:10px;min-width:0;margin-inline-end:auto}
#org .store-mark{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:14px;background:var(--n-card-2);border:1px solid var(--night-hair);color:var(--night-ink)}
#org .store-txt{display:grid;min-width:0;line-height:1.2}
#org .store-txt b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:var(--night-ink)}
#org .store-txt small{font-size:12px;color:var(--night-muted);white-space:nowrap}
#org .stage-note{display:none;font-size:12px;color:var(--n-faint);white-space:nowrap}
#org .org-clock{display:inline-flex;align-items:baseline;gap:6px;font-size:11px;color:var(--night-muted)}
#org .org-clock b{font-weight:500;color:var(--night-ink);font-variant-numeric:tabular-nums;font-size:12.5px;min-width:5ch;text-align:end}
#org .iconbtn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--night-hair);background:var(--n-card);color:var(--night-ink);transition:border-color .12s var(--ease)}
#org .iconbtn:hover{border-color:var(--lav)}
#org .iconbtn svg{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
#org .iconbtn .i-play{display:none;fill:currentColor;stroke:none}
#org .iconbtn[aria-pressed=true] .i-pause{display:none}
#org .iconbtn[aria-pressed=true] .i-play{display:block}
#org .stage-body{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:16px clamp(16px,2.4vw,28px) 14px}
#org .stage-foot{display:flex;align-items:center;gap:8px 16px;padding:12px 20px;border-top:1px solid var(--night-hair);color:var(--night-muted);font-size:13px;flex-wrap:wrap}
#org .stage-foot .note{margin-inline-start:auto;font-size:12px;color:var(--n-faint)}
#org .legend-mate{display:inline-flex;align-items:center;gap:8px}
#org .legend-mate .mate{margin-inline-start:0}
/* ── the org chart (sketch B), night ── */
#org .org-field{position:relative;container-type:inline-size;container-name:org}
#org .wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#org .w-tree{fill:none;stroke:var(--wire);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the return line, Scayla back to the brain: dashed, the dashes flowing toward the brain (still under reduced motion) */
#org .w-loop{fill:none;stroke:var(--port);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1.5 6.5;animation:org-loop 1.4s linear infinite}
@keyframes org-loop{to{stroke-dashoffset:-8}}
#org .w-hop{fill:none;stroke:var(--task);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 480ms var(--ease)}
#org .w-hop.on{opacity:.34;transition-duration:160ms}
#org .w-tail{fill:none;stroke:var(--task);stroke-width:2;stroke-linecap:round;opacity:.5;stroke-dasharray:0 100000}
#org .w-head{fill:none;stroke:var(--task);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:0 100000}
#org .ports{position:absolute;inset:0;pointer-events:none;z-index:1}
#org .ports i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ring);box-shadow:inset 0 0 0 1.5px var(--port)}
#org .taskdot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--task);z-index:2;opacity:0;pointer-events:none;
  box-shadow:0 0 0 4px var(--task-ring),0 0 18px 2px var(--task-ring);will-change:transform;transition:opacity 160ms var(--ease)}
#org .taskdot.on{opacity:1}
#org .hopchip{position:absolute;left:0;top:0;z-index:6;margin:-30px 0 0 10px;height:20px;padding:0 8px;display:inline-flex;align-items:center;border-radius:999px;background:var(--night-ink);color:var(--ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease);will-change:transform}
#org .hopchip.on{opacity:1}
#org .hopchip.left{margin-left:-128px}
#org .hopchip[data-tone=held]{background:var(--wait-ink);color:var(--badge-ink)}
#org .hopchip.park{opacity:1;transition:opacity 320ms var(--ease)}
#org .org-field.measuring .av{transform:none!important;animation:none!important}

/* faces: Notionists line art on department tints at night strength (one sprite) */
#org .av{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:50%;box-shadow:0 0 0 3px var(--ring);background-color:var(--tn-content)}
#org .t-plan{background-color:var(--tn-plan)} #org .t-research{background-color:var(--tn-research)} #org .t-content{background-color:var(--tn-content)} #org .t-store{background-color:var(--tn-store)} #org .t-results{background-color:var(--tn-results)}
#org .f{background-image:url(faces.svg);background-size:1200% 100%;background-repeat:no-repeat}
#org .f-manager{background-position:18.1818% 0} #org .f-strategist{background-position:9.0909% 0} #org .f-scout{background-position:0% 0} #org .f-inspector{background-position:27.2727% 0} #org .f-researcher{background-position:72.7273% 0} #org .f-geo{background-position:45.4545% 0} #org .f-planner{background-position:54.5455% 0} #org .f-writer{background-position:63.6364% 0} #org .f-reviewer{background-position:36.3636% 0} #org .f-shop{background-position:81.8182% 0} #org .f-publisher{background-position:90.9091% 0} #org .f-results{background-position:100% 0}
#org .av-you{background:var(--you-bg);color:var(--you-ink);font-weight:700;letter-spacing:.01em;font-size:10.5px}
#org .n>.av::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1.5px var(--task);opacity:0;transform:scale(.9);transition:opacity .2s var(--ease),transform .32s var(--ease);pointer-events:none}
#org .n.is-active>.av::after{opacity:1;transform:none}
#org .n.is-active>.av{animation:org-ring 1.7s var(--ease) infinite}
@keyframes org-ring{0%{box-shadow:0 0 0 3px var(--ring),0 0 0 4px var(--task-ring)}70%{box-shadow:0 0 0 3px var(--ring),0 0 0 13px var(--task-ring-0)}100%{box-shadow:0 0 0 3px var(--ring),0 0 0 3px var(--task-ring-0)}}
#org .n.is-hit>.av{animation:org-hit .55s var(--ease)}
#org .n.is-hit.is-active>.av{animation:org-hit .55s var(--ease),org-ring 1.7s var(--ease) .55s infinite}
@keyframes org-hit{35%{transform:scale(1.06)}100%{transform:none}}
#org .badge{position:absolute;top:-4px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;line-height:1;color:var(--badge-ink);background:var(--badge-bg);box-shadow:0 0 0 2px var(--ring);font-variant-numeric:tabular-nums}

#org .n{position:relative;display:grid;align-items:center;text-align:start;border-radius:14px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
#org .n>.av{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
#org button.n:hover>.av,#org button.n:focus-visible>.av{transform:translateY(-2px);box-shadow:0 0 0 3px var(--ring),var(--face-lift)}
#org button.n:focus-visible{outline:2px solid var(--lav);outline-offset:4px}
#org .nm{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0;justify-items:start}
#org .nm b{font-size:12.5px;font-weight:600;line-height:1.2;letter-spacing:-.005em;color:var(--night-ink)}

/* status chips, product words, night colours: violet working, amber waits, mint live */
#org .st{display:inline-flex;align-items:center;gap:5px;min-height:18px;padding:0;border-radius:999px;font-size:11px;font-weight:500;line-height:1.25;color:var(--night-muted);background:transparent;transform-origin:50% 60%;white-space:nowrap}
#org .st[data-st=working],#org .st[data-st=waits],#org .st[data-st=attention],#org .st[data-st=held],#org .st[data-st=applied],#org .st[data-st=live],#org .st[data-st=ready],#org .st[data-st=soon],#org .st[data-st=again]{padding:1px 7px;margin-inline-start:-7px}
#org .st::before{content:"";display:none;width:6px;height:6px;border-radius:50%;flex:none}
#org .st[data-st=working]{color:var(--work-ink);background:var(--work-bg);font-weight:600}
#org .st[data-st=working]::before{display:block;background:var(--task);box-shadow:0 0 0 2px var(--task-ring)}
#org .st[data-st=next],#org .st[data-st=again]{color:var(--night-ink)}
#org .st[data-st=next]::before,#org .st[data-st=again]::before{display:block;width:5px;height:5px;background:transparent;box-shadow:inset 0 0 0 1.4px var(--night-muted)}
#org .st[data-st=again]{background:var(--n-card-2);font-weight:600}
#org .st[data-st=waits],#org .st[data-st=attention],#org .st[data-st=held]{color:var(--wait-ink);background:var(--wait-bg);font-weight:600}
#org .st[data-st=waits]::before,#org .st[data-st=attention]::before,#org .st[data-st=held]::before{display:block;background:var(--wait-dot)}
#org .st[data-st=applied],#org .st[data-st=live]{color:var(--live-ink);background:var(--live-bg);font-weight:600}
#org .st[data-st=applied]::before,#org .st[data-st=live]::before{display:block;background:var(--mint)}
#org .st[data-st=soon]{color:var(--night-muted);box-shadow:inset 0 0 0 1px var(--night-hair);background:transparent}
#org .st[data-st=worked],#org .st[data-st=quiet]{color:var(--n-faint)}
#org .st[data-st=you]{color:var(--night-muted);white-space:normal}
#org .st.flip{animation:org-flip 300ms var(--ease) both}
@keyframes org-flip{0%{transform:perspective(160px) rotateX(-88deg);opacity:.2}60%{opacity:1}100%{transform:none;opacity:1}}
#org .soon-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:500;color:var(--night-muted);box-shadow:inset 0 0 0 1px var(--night-hair);white-space:nowrap}

/* wide chart: the brain and You on top, the PLAN pill on the stem, the three who plan, four departments as combs */
#org .org-top{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 120px;align-items:center;height:132px;z-index:1}
#org .brain-slot{position:relative;grid-column:2;justify-self:center;width:310px;height:132px}
#org .brain-slot::before{content:"";position:absolute;inset:10% 24%;border-radius:50%;background:radial-gradient(closest-side,var(--brain-glow),var(--brain-glow-0));pointer-events:none}
#org .brain-cv{position:absolute;inset:0;width:100%;height:100%}
#org .brain-png{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s var(--ease)}
#org .gl-on .brain-png{opacity:0}
#org .no-webgl .brain-png{display:block}
#org .no-webgl .brain-cv{visibility:hidden}
#org .n.you{grid-column:3;justify-self:end;width:max-content;grid-template-columns:auto 36px;gap:14px;z-index:2}
#org .n.you .nm{justify-items:end;text-align:end}
#org .n.you .nm b{font-size:13px}
#org .n.you .st{margin:0!important;max-width:15ch;text-align:end;justify-content:flex-end}
#org .n.you .st[data-st=you]{margin-inline-end:0;font-size:11px;line-height:1.3;max-width:13ch;text-wrap:balance;white-space:normal}
#org .av-you{width:36px;height:36px}
/* Scayla at the end of the chart: its ring mark on the night card, in the node and on its feed line */
#org .av-sc{background:var(--n-card-2);color:var(--lav);box-shadow:0 0 0 3px var(--ring),inset 0 0 0 1px var(--night-hair)}
#org .av-sc svg{width:64%;height:64%;display:block}
#org .fr .av-sc{box-shadow:inset 0 0 0 1px var(--night-hair)}
#org .youbtn{position:absolute;inset-inline-end:0;top:calc(50% + 26px);z-index:4;height:26px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;background:var(--n-card-2);border:1px solid var(--night-hair);font-size:12px;font-weight:600;color:var(--night-ink);white-space:nowrap;
  opacity:0;transform:translateY(-4px) scale(.94);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
#org .youbtn.show{opacity:1;transform:none}
#org .youbtn.press{transform:scale(.92);background:var(--accent);color:var(--card);border-color:var(--accent)}
#org .youbtn.done{background:var(--accent);color:var(--card);border-color:var(--accent)}
#org .youbtn.swap{opacity:0;transform:translateY(-3px) scale(.96)}
#org .pointer{position:absolute;left:0;top:0;z-index:7;opacity:0;pointer-events:none;will-change:transform;transition:opacity .2s var(--ease)}
#org .pointer svg{fill:var(--cursor-fill);stroke:var(--cursor-line);stroke-width:1.2;stroke-linejoin:round;filter:var(--cursor-shadow)}
#org .pointer.on{opacity:1}
#org .plan-row{position:relative;display:flex;justify-content:center;margin-block:2px 0;margin-inline:56px 120px;z-index:1}
#org .org-leads-row{position:relative;margin-top:24px;margin-inline-end:120px;z-index:1}
#org .org-leads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-inline-start:56px}
#org .org-leads li{display:flex;justify-content:center;align-items:flex-start}
#org .n.lead{justify-items:center;align-content:start;text-align:center;gap:5px;padding:0 4px}
#org .n.lead .nm{justify-items:center;gap:3px}
#org .n.lead .st{margin-inline-start:0!important}
#org .n.lead>.av{width:34px;height:34px}
#org .n.lead .nm b{font-size:13px}
#org .org-depts{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1.02fr) minmax(0,.98fr) minmax(0,.88fr);column-gap:12px;margin-top:28px;z-index:1}
#org .dept{position:relative;min-width:0}
#org .pill{position:relative;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;z-index:1;white-space:nowrap}
#org .pill.t-plan{color:var(--pl-plan);background:var(--pl-plan-bg)} #org .pill.t-research{color:var(--pl-research);background:var(--pl-research-bg)} #org .pill.t-content{color:var(--pl-content);background:var(--pl-content-bg)}
#org .pill.t-store{color:var(--pl-store);background:var(--pl-store-bg)} #org .pill.t-results{color:var(--pl-results);background:var(--pl-results-bg)}
#org .dept ul{display:grid;gap:7px;margin-top:9px;padding-inline-start:24px}
#org .n.doer{grid-template-columns:32px minmax(0,1fr);gap:12px;min-height:40px;width:100%}
#org .n.doer>.av{width:32px;height:32px}
#org .mate{display:inline-flex;align-items:center;gap:4px;height:18px;padding-block:0;padding-inline:1px 6px;margin-inline-start:4px;border-radius:999px;background:var(--n-card-2);box-shadow:inset 0 0 0 1px var(--night-hair);font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--night-muted);vertical-align:1px}
#org .mav{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none}
#org .tip{position:absolute;z-index:8;width:236px;padding:11px 13px 12px;border-radius:14px;background:var(--tip-bg);border:1px solid var(--night-hair);box-shadow:var(--tip-shadow);pointer-events:none;
  display:grid;gap:3px;opacity:0;transform:translateY(4px);transition:opacity .12s var(--ease),transform .2s var(--ease)}
#org .tip.on{opacity:1;transform:none}
#org .tip b{font-size:13.5px;color:var(--night-ink)}
#org .tip .tip-m{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--night-muted)}
#org .tip .tip-d{font-size:13px;line-height:1.45;color:var(--night-soft);margin-top:3px}

/* the feed: the newest five lines (deck F) */
#org .feed{position:relative;z-index:1;margin-top:14px;padding-top:10px;border-top:1px solid var(--night-hair)}
#org .feed-h{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;color:var(--night-muted);margin-bottom:6px}
#org .feed-win{position:relative;height:calc(var(--fr-n,5) * var(--fr-h,24px));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
#org .feed-rows{display:grid;will-change:transform;transition:opacity 240ms var(--ease)}
#org .feed-rows.swap{opacity:0}
#org .fr{display:grid;grid-template-columns:40px 18px minmax(0,1fr) auto;align-items:center;gap:9px;height:var(--fr-h,24px);padding:0 8px;margin:0 -8px;border-radius:8px;font-size:12.5px;transition:background-color .32s var(--ease)}
#org .fr time{font-family:var(--mono);font-size:11px;color:var(--night-muted);font-variant-numeric:tabular-nums}
#org .fr .av{width:18px;height:18px;box-shadow:none}
#org .fr-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--night-soft)}
#org .fr-t b{font-weight:600;color:var(--night-ink)}
#org .fr-o{color:var(--night-muted)}
#org .fchip{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 6px;border-radius:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--night-muted);box-shadow:inset 0 0 0 1px var(--night-hair)}
#org .fchip[data-tone=working]{color:var(--work-ink);box-shadow:inset 0 0 0 1px var(--work-bg)}
#org .fchip[data-tone=working]::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--task)}
#org .fchip[data-tone=measured]{color:var(--night-ink);background:var(--n-card-2);box-shadow:none}
#org .fchip[data-tone=next]{color:var(--night-ink)}
#org .fchip[data-tone=held],#org .fchip[data-tone=attention]{color:var(--wait-ink);background:var(--wait-bg);box-shadow:none}
#org .fchip[data-tone=live]{color:var(--live-ink);background:var(--live-bg);box-shadow:none}
#org .fchip[data-tone=conn]{color:var(--night-muted);background:var(--n-card)}
#org .fr.current{background:var(--n-card-2)}
#org .fr.current time{color:var(--night-ink)}
#org .fr.enter{animation:org-frin 560ms var(--ease) both}
@keyframes org-frin{from{background:var(--work-bg)}}

/* wide stage: the chart and the feed side by side, like the live stage's two columns (after the feed's base rules) */
@container stage (min-width:1080px){
  #org .stage-body{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:0;padding-inline:0}
  #org .org-col{padding:0 20px 0 20px}
  #org .feed-col{border-inline-start:1px solid var(--night-hair);padding:0 22px 0 22px}
  #org .feed{margin-top:0;padding-top:2px;border-top:0}
  #org .feed-h{margin-bottom:4px}
  #org .feed-win{--fr-n:5;--fr-h:86px}
  #org .fr{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"time time chip" "face text text";align-content:center;row-gap:7px;column-gap:10px;padding:0 10px;margin:0 -10px;border-radius:12px}
  #org .fr time{grid-area:time}
  #org .fr .av{grid-area:face;align-self:start;width:22px;height:22px;margin-top:1px}
  #org .fr-t{grid-area:text;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.42;font-size:13px}
  #org .fr .fchip{grid-area:chip;justify-self:end}
}

/* mid-width chart (the stacked stage at 1024 and tablets): names and captions may take two lines; every doer keeps room
   for both, so the chart never changes height while captions change */
@container org (min-width:560px) and (max-width:759px){
  #org .dept ul{padding-inline-start:16px}
  #org .n.doer{grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:start}
  #org .n.doer>.av{width:30px;height:30px}
  #org .n.doer .nm{min-height:62px;align-content:start}
  #org .n.doer .st{white-space:normal;text-wrap:balance}
}
/* narrow chart (phones): top down, faces strung on one wire per row */
@container org (max-width:559px){
  #org .org-top{grid-template-columns:minmax(0,1fr) auto;height:100px}
  #org .brain-slot{grid-column:1;justify-self:start;width:170px;height:100px;margin-inline-start:4px}
  #org .n.you{grid-column:2;grid-template-columns:auto 34px;gap:8px;margin-inline-end:4px}
  #org .n.you .nm{justify-items:end;text-align:end}
  #org .n.you .st[data-st=you]{max-width:12ch;text-align:end}
  #org .youbtn{inset-inline-end:4px;top:calc(50% + 28px)}
  #org .n.you .nm{background:var(--ring);box-shadow:0 0 0 5px var(--ring);border-radius:8px}
  #org .plan-row{justify-content:flex-start;margin-block:14px 0;margin-inline:20px 0}
  #org .org-leads-row{margin-block:10px 0;margin-inline:14px 0}
  #org .org-leads{margin-inline-start:0}
  #org .org-depts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:16px;margin-block:20px 0;margin-inline:14px 0}
  #org .dept[data-dept=research],#org .dept[data-dept=content]{grid-column:1/-1}
  #org .dept[data-dept=store]{grid-column:1/3}
  #org .dept[data-dept=results]{grid-column:3}
  #org .dept ul{grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:0;padding-inline-start:0;margin-top:10px}
  #org .dept[data-dept=store] ul{--k:2} #org .dept[data-dept=results] ul{--k:1}
  #org .dept .pill{margin-inline-start:6px}
  #org .n.doer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:5px;min-height:0;padding:0 2px}
  #org .n.doer .nm{justify-items:center;min-height:58px;align-content:start}
  #org .n.doer>.av,#org .n.lead>.av{width:34px;height:34px}
  #org .n.doer .st,#org .n.lead .st{margin-inline-start:0!important;font-size:10.5px;white-space:normal;text-align:center;justify-content:center}
  #org .mate{display:none}
  #org .nm b,#org .n.lead .nm b{font-size:11.5px;text-wrap:balance}
}

/* compact chart in the two-column stage (round 2, Lior 4 Oct: the white ribbon back above the fold). The brain, the wire
   through PLAN to the three who plan, and You share one top row; the four departments sit under it. The stage keeps the
   live stage's height, so the ribbon lands where it does on getscayla.com. build() reads --org-layout. */
@container stage (min-width:1080px){
  #org .stage-body{grid-template-columns:minmax(0,1fr) 320px}
  #org .stage-note{display:block}
  #org .stage-foot{display:none}
  #org .org-field{--org-layout:row;display:grid;grid-template-columns:clamp(84px,16%,132px) minmax(0,1fr) 161px;column-gap:14px;align-items:start}
  #org .org-top{display:contents}
  #org .brain-slot{grid-column:1;grid-row:1;width:100%;height:76px;z-index:1}
  /* the canvas reaches past the cell so the bloom fades out before its edge (no box); main.js shrinks the framing to match */
  #org .brain-slot .brain-cv{inset:-26px -28px;width:calc(100% + 56px);height:calc(100% + 52px);
    -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent);mask-image:radial-gradient(closest-side,#000 68%,transparent)}
  #org .plan-row{grid-column:2;grid-row:1;margin-block:27px 0;margin-inline:calc((100% - 24px) / 6 - 8px) 0;justify-content:flex-start}
  #org .org-leads-row{grid-column:2;grid-row:1;margin:51px 0 0}
  #org .org-leads{margin-inline-start:0;column-gap:12px}
  #org .org-leads li{justify-content:flex-start}
  #org .n.lead{grid-template-columns:30px minmax(0,1fr);justify-items:start;align-items:start;text-align:start;gap:10px;padding:0}
  #org .n.lead .nm{justify-items:start;gap:2px}
  #org .n.lead>.av{width:30px;height:30px}
  #org .n.lead .nm b{font-size:12.5px}
  #org .n.you{grid-column:3;grid-row:1;margin-top:46px}
  #org .youbtn{top:4px;inset-inline-end:0}
  #org .org-depts{grid-column:1/-1;grid-row:2;margin-top:24px}
  #org .feed-win{--fr-n:3}
}
@media (max-width:680px){
  #org .stage-foot .note{margin-inline-start:0}
  #org .stage-body{padding-inline:12px}
  #org .stage-top{padding:12px 14px}
  #org .org-clock span{display:none}
  #org .feed-win{--fr-n:4;--fr-h:46px}
  #org .fr{grid-template-columns:34px 18px minmax(0,1fr) auto;gap:8px}
  #org .fr-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;font-size:12px}
  #org .fr .fchip{font-size:10px;height:18px;padding:0 5px;letter-spacing:.02em}
}

/* ── the engines ribbon: every engine buyers ask (Lior, 5 Oct); the three Scayla measures today (ChatGPT, Gemini, Google
   Search) in ink, the rest grey. Replaces site.css's every-third-name pattern on this page only. ── */
.ribbon .track span{color:#767090}
.ribbon .track span.m{color:var(--ink)}

/* reduced motion: the faces stop pulsing (site.css already stills every animation and transition) */
@media (prefers-reduced-motion:reduce){#org .n.is-active>.av{animation:none}}

/* ── QA round, 5 Oct (QA and UI/UX agents) ── */
/* the tooltip keeps its hidden state (it was in the accessibility tree while empty) */
#org .tip[hidden]{display:none}
/* site.css dims .stage-foot .note to .7; the illustrative note stays at full strength (AA) */
#org .stage-foot .note{opacity:1}
/* site.css lets .stage-top wrap; the stage's top bar stays on one line */
#org .stage-top{flex-wrap:nowrap}
#org .store-txt small{overflow:hidden;text-overflow:ellipsis}
/* "Illustrative" in the first view on phones and tablets: below the compact stage the domain line gives way to it */
#org .store-ill{display:none}
@container stage (max-width:1079px){#org .store-txt small.store-dom{display:none}#org .store-ill{display:block}}
/* the legend explains the small faces, which the phone chart hides */
@container stage (max-width:585px){#org .legend-mate{display:none}}
/* the sign-off chip is solid, so the dotted return line does not show through it */
#org .youbtn{background:#221e3a}
/* the stage's pause button: a 44 px touch target around the 30 px circle */
#org .iconbtn{position:relative}
#org .iconbtn::after{content:"";position:absolute;inset:-7px}
/* the stage's own pause stops everything in it (the story, the rings, the return line's dashes; hero.js pauses the brain) */
#org.is-paused *,#org.is-paused *::before,#org.is-paused *::after{animation-play-state:paused!important}
/* 360 px phones: status chips fit on one line */
@container org (max-width:400px){
  #org .n.doer .st,#org .n.lead .st{letter-spacing:-.01em}
  #org .st[data-st=working],#org .st[data-st=attention],#org .st[data-st=held],#org .st[data-st=live],#org .st[data-st=again]{padding-inline:5px;gap:4px}
  #org .n.doer{padding:0}
}
/* the paragraph, the CTAs and the stage enter by moving only, visible from the first paint (as in the approved sketch) */
.hero .sub,.hero .cta{animation-name:org-fade}
#org.stage{animation-name:org-lift}
@keyframes org-fade{from{transform:translateY(10px)}to{transform:none}}
@keyframes org-lift{from{transform:translateY(40px)}to{transform:none}}

/* ── scayla.co.il (Hebrew, RTL), 6 Oct 2026 ── */
/* high contrast (the a11y menu): the faces are pictures and the dot is the story, so both stay visible */
html[data-a11y-contrast] #org .f{background-image:url(faces.svg)!important;background-color:#fff!important}
html[data-a11y-contrast] #org .taskdot{background-color:#ffe600!important}
html[data-a11y-contrast] #org .w-tree,html[data-a11y-contrast] #org .w-loop{stroke:#fff}
/* ...and they show: the menu paints every element black, so the chart's own rows (which sit above the wires) would cover
   them. They stay see-through, and the ports keep a white ring (the menu removes every shadow) */
html[data-a11y-contrast] #org .org-field :is(.org-top,.plan-row,.org-leads-row,.org-leads,.org-leads li,.org-depts,.dept,.dept ul,.dept li,.brain-slot,.ports){background-color:transparent!important}
html[data-a11y-contrast] #org .ports i{background-color:#000!important;box-shadow:inset 0 0 0 1.5px #fff!important}
/* the H1 on phones (brief 5.1): mirror.css sizes it from the old line (394 px at 46 px). The new long line,
   "שסוכני ה-AI בוחרים.", is 375.2 px at 46 px in Heebo 600 (-.03em), so (100vw - 40px) x 46 / 375.2, rounded down,
   and never above the 46 px it has from 441 px up (no jump at the breakpoint) */
/* round 2: the H1 "שיבחר במותג שלכם." is 377.9 px at 46 px on the real page (sketch 377.7, round 1 375.2);
   46 / 377.9 x 0.99 = .1205 */
@media (max-width:440px){.hero h1{font-size:min(46px,calc((100vw - 40px) * .1205))}}
/* Scayla's chip: Heebo's "0" is narrower than the English font's, so 15ch left the working chip's dot outside it.
   18ch holds the widest Hebrew status ("בוחרת את העבודה") with its dot and padding, as in English */
#org .n.you .st{max-width:18ch}
/* Scayla's column (brief 5.4): its widest status, "בוחרת את העבודה" with its dot, is 158.8 px in Heebo and 159.1 px in the
   readable font (Arial); the compact chart's third track (the @container stage block) is 161 px, widest + 1 rounded up */
/* the tooltip on a narrow phone with the a11y menu's larger text: 236 px times the zoom can be wider than the chart, and
   hero.js clamps it inside only when it fits; capped at the chart's width it wraps instead and stays inside the stage */
#org .tip{max-width:100%}

/* ── the sign-up pair (CTO task, 14 Oct 2026): under the buttons, the trial line and the text link to /scan. Like the paragraph and the buttons they enter by moving only, visible from the first paint ── */
.hero .fine,.hero .cta-more{animation:org-fade .9s .6s var(--ease) both}
.hero .fine{margin-top:16px}
.hero .cta-more a{color:var(--night-ink)}
/* the ring keeps its place against the stage: the lines under the buttons add 16 + 20.25 and 14 + 22.5 px (73; measured:
   the stage moved 72 to 73 px at 1440, 1280, 1024, 768 and 390) */
.hero .orbit{top:calc(clamp(300px,34vw,430px) + 73px)}