/* ==================================================================
   Rev 312 · The Associate page's central claim.
   Three acts on one pinned stage. Act one is a single Paralegal
   instruction. Act two pulls back so it is one of eleven. Act three
   raises the four moments only a colleague would have handled.
   Progress arrives as --p from the shared scroll-scene driver.
   ================================================================== */
.sv-mind{position:relative;color:#12100f;padding:clamp(76px,8vw,128px) 0;
  background:linear-gradient(180deg,#0d0f0e,#131615 26%,#101312 76%,#0c0e0d)}
.mind-stick{position:relative;overflow:hidden}
.mind-stick::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 14% 6%,rgba(141,41,69,.2),transparent 64%),
    radial-gradient(40% 34% at 92% 86%,rgba(47,104,83,.13),transparent 66%)}
.mind-inner{position:relative;z-index:1;display:grid;gap:clamp(26px,3.2vw,48px)}

.mind-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:10px clamp(30px,5vw,80px);align-items:end}
.mind-head .v3-kicker{color:rgba(255,255,255,.6)}
.mind-head .v3-kicker::before{background:#d98aa6}
.mind-head h2{margin-top:clamp(12px,1.6vh,22px);font-size:clamp(36px,4.4vw,68px);line-height:.94;letter-spacing:-.055em;font-weight:500;color:#fff}
.mind-head h2 i{font-style:normal;color:#e0a2b9}
.mind-head>p{max-width:26ch;padding-bottom:.4em;font-size:clamp(16px,1.45vw,22px);line-height:1.22;letter-spacing:-.025em;color:rgba(255,255,255,.74)}

/* ---- the picture ----
   Eleven green chips: each one an ordinary Paralegal instruction and the
   file it returned. One wine line weaving through all of them, with the
   four moments only a colleague would have handled. The two annotations
   sit on opposite sides in their own colours, so the difference between
   the two of them is the composition rather than a paragraph. */
.mind-stage{position:relative;display:grid;align-content:center}
.mind-track{position:relative;height:clamp(320px,34vw,404px)}
.mind-axis{position:absolute;left:0;right:0;top:calc(50% - 6px);height:1px;background:rgba(255,255,255,.1)}
.mind-line{position:absolute;left:0;right:0;top:0;width:100%;height:100%;overflow:visible;color:#d98aa6;
  filter:drop-shadow(0 0 14px rgba(217,138,166,.34))}
.mind-line-path{stroke-dasharray:var(--mind-len,2000);stroke-dashoffset:var(--mind-len,2000);
  transition:stroke-dashoffset 1.5s cubic-bezier(.33,1,.68,1) .15s}
.sv-mind.is-in .mind-line-path{stroke-dashoffset:0}

.mind-nodes{position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(11,1fr);align-content:center}
.mind-node{display:grid;justify-items:center;gap:8px;align-content:center;
  grid-template-rows:auto minmax(2.7em,auto) auto}
.mind-chip{position:relative;display:grid;place-items:center;width:clamp(30px,2.6vw,36px);height:clamp(30px,2.6vw,36px);
  border-radius:10px;background:rgba(20,26,23,.92);border:1px solid rgba(93,171,132,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mind-chip i{font-style:normal;font-size:7.5px;letter-spacing:.06em;font-weight:640;color:#8fc9ac}
.mind-node b{max-width:13ch;text-align:center;font-size:clamp(9.5px,.76vw,11.5px);line-height:1.3;font-weight:500;color:rgba(255,255,255,.72)}
.mind-node em{font-style:normal;font-size:8.5px;letter-spacing:.14em;color:rgba(255,255,255,.3)}
.mind-node.is-hero .mind-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(93,171,132,.16)}

/* the four moments, above the line, in the Associate's colour */
.mind-marks{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.mind-mark{--leader:calc(52px + var(--tier) * 44px);
  position:absolute;left:calc((var(--i) + .5) / 11 * 100%);
  bottom:calc(50% + 26px + var(--leader));width:clamp(148px,15vw,204px);transform:translateX(-50%)}
.mind-mark.at-end{transform:translateX(-88%)}
.mind-mark p{padding:9px 11px;border-radius:9px;border:1px solid rgba(217,138,166,.3);
  background:rgba(141,41,69,.26);font-size:clamp(10.5px,.8vw,12px);line-height:1.4;color:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mind-mark i{position:absolute;left:50%;top:100%;width:1px;height:var(--leader);
  background:linear-gradient(180deg,rgba(217,138,166,.06),rgba(217,138,166,.75))}
.mind-mark.at-end i{left:88%}

/* the one instruction, below the row, in the Paralegal's colour */
.mind-note{position:absolute;left:calc(5.5 / 11 * 100%);top:calc(50% + 78px);width:clamp(200px,20vw,258px);
  transform:translateX(-42%);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.mind-note>i{margin-top:2px;width:1px;height:26px;justify-self:center;
  background:linear-gradient(180deg,rgba(143,201,172,.75),rgba(143,201,172,.06));
  position:absolute;left:42%;top:-26px}
.mind-note>div{padding:11px 13px;border-radius:10px;border:1px solid rgba(143,201,172,.3);
  background:rgba(47,104,83,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mind-note small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#9ED2B7}
.mind-note p{margin-top:7px;font-size:clamp(11.5px,.88vw,13px);line-height:1.42;color:#fff}
.mind-note span{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10.5px;color:rgba(255,255,255,.6)}
.mind-note .fic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:6px}

/* who is who, said once, on the picture */
.mind-anchor{position:absolute;left:0;display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.01em;white-space:nowrap}
.mind-anchor i{width:16px;height:2px;border-radius:2px}
.mind-anchor-a{top:0;color:#e0a2b9}
.mind-anchor-a i{background:#d98aa6}
.mind-anchor-p{bottom:6px;color:#9ED2B7}
.mind-anchor-p i{background:#8fc9ac}

.mind-band{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:15px;
  border-top:1px solid rgba(255,255,255,.12)}
.mind-band b{font-size:12px;font-weight:600;color:#fff}
.mind-band span{font-size:11.5px;color:rgba(255,255,255,.52)}
.mind-band span+span::before{content:"·";margin-right:22px;color:rgba(255,255,255,.24)}

.mind-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,38px);border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(16px,2vh,24px)}
.mind-steps b{display:block;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.02em;font-weight:560;color:#fff}
.mind-steps span{display:block;margin-top:8px;max-width:30ch;font-size:clamp(12.5px,.95vw,14.5px);line-height:1.5;color:rgba(255,255,255,.62)}

@media(max-width:980px){
  .mind-head{grid-template-columns:1fr}
  .mind-head>p{padding-bottom:0}
  .mind-node b{display:none}
  .mind-mark p{font-size:10px}
  .mind-note{width:200px}
}
@media(max-width:760px){
  .mind-track{height:auto;display:grid;gap:16px}
  .mind-axis,.mind-line{display:none}
  .mind-nodes{position:static;grid-template-columns:repeat(2,1fr);gap:14px 12px}
  .mind-node{grid-template-columns:auto minmax(0,1fr);grid-template-rows:none;justify-items:start;text-align:left;gap:10px}
  .mind-node b{display:block;max-width:none;text-align:left}
  .mind-marks{position:static;display:grid;gap:10px}
  .mind-mark{position:static;width:auto;transform:none!important}
  .mind-mark i{display:none}
  .mind-note{position:static;width:auto;transform:none;grid-template-columns:1fr}
  .mind-note>i{display:none}
  .mind-anchor{position:static}
  .mind-steps{grid-template-columns:1fr;gap:18px}
}
@media(prefers-reduced-motion:reduce){.mind-line-path{transition:none;stroke-dashoffset:0}}