/* Reusable motion study: semantic constellations. */
.insight-story{position:relative;height:190vh;min-height:1100px;background:var(--canvas);color:var(--ink);border-bottom:1px solid var(--line)}
.insight-stage{position:sticky;top:76px;min-height:610px;height:calc(100vh - 90px);max-height:800px;max-width:1240px;margin:auto;display:grid;grid-template-columns:350px 1fr;gap:36px;align-items:center;padding:24px;box-sizing:border-box}
.insight-eyebrow{font:11px/1.5 system-ui,sans-serif;letter-spacing:.15em;color:var(--rose-deep);text-transform:uppercase}
.insight-copy h2{font-family:var(--font-serif);font-size:clamp(30px,3vw,44px);font-weight:600;line-height:1.45;letter-spacing:-.035em;margin:18px 0}
.insight-copy>p{font-size:15px;line-height:1.9;color:var(--muted);margin:0 0 30px}
.insight-chapters{display:flex;flex-direction:column;gap:24px}
.insight-chapter{border-left:2px solid var(--line);padding-left:16px;opacity:.48;transition:opacity var(--dur-slow),border-color var(--dur-slow)}
.insight-chapter.is-active{opacity:1;border-color:var(--plum-400)}
.insight-chapter small{font:10px/1.8 monospace;letter-spacing:.08em;color:var(--plum-400)}
.insight-chapter h3{font:500 16px/1.6 var(--font-sans);margin:4px 0}
.insight-chapter p{font:12px/1.8 var(--font-sans);color:var(--muted);margin:0}
.insight-art{position:relative;min-width:0;height:540px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb, var(--lavender-soft) 40%, transparent),transparent 67%)}
.insight-art canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.insight-quote{position:absolute;left:var(--x);top:var(--y);padding:9px 13px;background:color-mix(in srgb, var(--paper) 86%, transparent);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);white-space:nowrap;font-size:11px;color:var(--muted);transform:translate(calc(var(--p,0)*var(--dx)),calc(var(--p,0)*var(--dy))) rotate(calc(var(--r)*(1 - var(--p,0))));opacity:calc(1 - var(--p,0)*.85);pointer-events:none}
.insight-cluster{position:absolute;font-size:11px;letter-spacing:.02em;border-radius:var(--r-xl);padding:7px 12px;opacity:var(--cluster,0);transform:translateY(calc((1 - var(--cluster,0))*10px));transition:opacity var(--dur-press);background:color-mix(in srgb, var(--canvas) 86%, transparent);border:1px solid var(--line)}
.insight-cluster.a{left:16%;top:25%;color:var(--peach-deep)}.insight-cluster.b{left:64%;top:32%;color:var(--plum-500)}.insight-cluster.c{left:44%;top:75%;color:var(--mint-deep)}
.insight-scroll-hint{position:absolute;bottom:18px;left:24px;font-size:10px;letter-spacing:.08em;color:var(--orchid-deep)}.insight-scroll-hint i{display:inline-block;width:38px;height:1px;background:var(--lavender);vertical-align:middle;margin-right:9px}
.insight-home #top>[aria-hidden=true]{display:none}
.insight-home .labelbee-ribbon{height:930px}
.insight-home #top{background:transparent}
@media(max-width:800px){.insight-story{height:170vh;min-height:1060px}.insight-stage{top:65px;display:block;padding:26px 20px;min-height:620px;height:calc(100vh - 65px)}.insight-copy h2{font-size:28px;margin:10px 0}.insight-copy>p{font-size:13px;margin-bottom:16px}.insight-chapters{flex-direction:row;gap:12px}.insight-chapter{flex:1;padding-left:8px}.insight-chapter h3{font-size:12px}.insight-chapter p{display:none}.insight-art{height:340px;max-width:620px;margin:auto}.insight-quote{font-size:9px;padding:7px}.insight-scroll-hint{bottom:5px}.insight-cluster{font-size:10px}}
@media(prefers-reduced-motion:reduce){.insight-story{height:auto;min-height:0}.insight-stage{position:relative;top:0;height:auto;min-height:630px}.insight-scroll-hint{display:none}.insight-chapter{opacity:1}.insight-quote{display:none}}.insight-home .insight-copy h2{font-size:clamp(30px,3vw,44px)!important}
@media(max-width:800px){.insight-home .insight-copy h2{font-size:28px!important}}

/* The insight is a change of scale and focus inside the original particle field. */
.insight-home .insight-copy h2{font-family:var(--font-serif)!important}
.insight-story .insight-quote{opacity:calc((1 - var(--p,0)*.85)*(1 - var(--finding,0)))}
.insight-story .insight-evidence{
 left:calc(var(--x)*(1 - var(--finding,0)) + var(--fx)*var(--finding,0));
 top:calc(var(--y)*(1 - var(--finding,0)) + var(--fy)*var(--finding,0));
 transform:translate(calc(var(--p,0)*var(--dx)*(1 - var(--finding,0))),calc(var(--p,0)*var(--dy)*(1 - var(--finding,0)))) rotate(calc(var(--r)*(1 - var(--p,0))));
 opacity:calc((1 - var(--p,0)*.85)*(1 - var(--finding,0)) + var(--finding,0));
 background:color-mix(in srgb, var(--paper) calc((.86*(1 - var(--finding,0))) * 100%), transparent);
 border-color:color-mix(in srgb, var(--line) calc((1 - var(--finding,0)) * 100%), transparent);
 box-shadow:0 8px 28px color-mix(in srgb, var(--plum) calc((.028*(1 - var(--finding,0))) * 100%), transparent);
 font-size:calc(11px + var(--finding,0)*2px);color:var(--peach-deep);
}
.insight-story .insight-cluster.a{
 left:calc(16% + var(--finding,0)*22%);top:calc(25% - var(--finding,0)*13%);
 opacity:var(--p,0);transform:translateY(calc((1 - var(--p,0))*10px));
 background:color-mix(in srgb, var(--canvas) calc((.86*(1 - var(--finding,0))) * 100%), transparent);
 border-color:color-mix(in srgb, var(--line) calc((1 - var(--finding,0)) * 100%), transparent);
 font-size:calc(11px + var(--finding,0)*3px);letter-spacing:calc(.02em + var(--finding,0)*.1em);
}
@media(max-width:800px){.insight-story .insight-evidence{font-size:calc(9px + var(--finding,0)*1px);padding:7px 3px}.insight-story .insight-cluster.a{font-size:calc(10px + var(--finding,0)*2px)}}
/* A short desktop window: the copy column (heading, intro, three chapters) was taller than the
   stage, so it ran past the section into the next one, and the illustration kept its 540px. The
   copy tightens (the heading's size is !important here because the home page's own size is),
   leaves room at its foot for the scroll hint pinned to the stage's corner, and the illustration
   takes the height the window has. Nothing is hidden. */
@media(min-width:801px) and (max-height:820px){.insight-stage{min-height:540px;padding-top:16px;padding-bottom:16px}.insight-stage .insight-art{height:min(540px,calc(100vh - 140px))}.insight-home .insight-stage .insight-copy h2{font-size:clamp(26px,3.6vh,34px)!important;line-height:1.35;margin:10px 0}.insight-stage .insight-copy{padding-bottom:26px}.insight-stage .insight-copy>p{font-size:14px;line-height:1.7;margin-bottom:16px}.insight-stage .insight-chapters{gap:12px}.insight-stage .story-step-title,.insight-stage .insight-chapter h3{font-size:15px;margin:2px 0}.insight-stage .story-step-note,.insight-stage .insight-chapter p{line-height:1.5}}
@media(min-width:801px) and (max-height:660px){.insight-home .insight-stage .insight-copy h2{font-size:24px!important;margin:6px 0}.insight-stage .insight-copy>p{font-size:13px;margin-bottom:10px}.insight-stage .insight-chapters{gap:8px}.insight-stage .story-step-note,.insight-stage .insight-chapter p{line-height:1.4}}
