/* 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 (its head block). 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{max-width:17ch}
.hero h1 .ag{font-style:normal}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .ag{background:linear-gradient(100deg,var(--night-ink) 20%,var(--lav-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.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 Pause motion (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}
@media (max-width:400px){.hero .sub.sub-final{font-size:clamp(14px,calc((100vw - 40px) / 19.8),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-right: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:right}
#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-left: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:0% 0} #org .f-strategist{background-position:9.0909% 0} #org .f-scout{background-position:18.1818% 0} #org .f-inspector{background-position:27.2727% 0} #org .f-researcher{background-position:36.3636% 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:72.7273% 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;right:-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:left;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-left:-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:right}
#org .n.you .nm b{font-size:13px}
#org .n.you .st{margin:0!important;max-width:15ch;text-align:right;justify-content:flex-end}
#org .n.you .st[data-st=you]{margin-right: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;right: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:2px 120px 0 56px;z-index:1}
#org .org-leads-row{position:relative;margin-top:24px;margin-right:120px;z-index:1}
#org .org-leads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-left: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-left: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-left: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:0 6px 0 1px;margin-left: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-left: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-left: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-left:4px}
  #org .n.you{grid-column:2;grid-template-columns:auto 34px;gap:8px;margin-right:4px}
  #org .n.you .nm{justify-items:end;text-align:right}
  #org .n.you .st[data-st=you]{max-width:12ch;text-align:right}
  #org .youbtn{right: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:14px 0 0 20px}
  #org .org-leads-row{margin:10px 0 0 14px}
  #org .org-leads{margin-left:0}
  #org .org-depts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:16px;margin:20px 0 0 14px}
  #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-left:0;margin-top:10px}
  #org .dept[data-dept=store] ul{--k:2} #org .dept[data-dept=results] ul{--k:1}
  #org .dept .pill{margin-left: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-left: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) 148px;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:27px 0 0 calc((100% - 24px) / 6 - 8px);justify-content:flex-start}
  #org .org-leads-row{grid-column:2;grid-row:1;margin:51px 0 0}
  #org .org-leads{margin-left: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:left;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;right: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, the trial line and the stage enter by moving only, visible from the first paint (as in the approved sketch) */
.hero .sub,.hero .cta,.hero .fine{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}}