/* Refined Drift: one clipped cloud plane, four quiet editorial windows. */
.study-drift .step,.study-drift .step:last-child{display:grid;grid-template-columns:minmax(0,1fr) 66px;grid-template-rows:22px 1fr auto;column-gap:20px;row-gap:0;padding:30px;min-height:314px;transition:border-color .35s,box-shadow .35s}
.study-drift .step-copy{display:contents}.study-drift .step-number{grid-column:1;grid-row:1;margin:0;font-size:10px;letter-spacing:.13em}
.study-drift .pictogram{float:none;grid-column:2;grid-row:1/3;align-self:start;width:66px;height:66px;margin:0}
.study-drift .pictogram svg{stroke:#d74342;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s,filter .35s}
.study-drift .icon-action{stroke-width:1.7}
.study-drift .step-copy h3{grid-column:1;grid-row:2;align-self:start;font-size:clamp(28px,3vw,37px);line-height:1.08;letter-spacing:-.04em;max-width:none;margin:18px 0 24px}
.study-drift .step-copy h3 span{display:block}
.study-drift .step-copy p{grid-column:1/-1;grid-row:3;font-size:14px;line-height:1.65;max-width:38ch;margin:0;color:#cbd1c7}
.study-drift .step:before{background:linear-gradient(118deg,#09120dda 8%,#09120d9c 62%,#09120d3a),linear-gradient(0deg,#09120d63,transparent 65%)}
.study-drift .shared-formation{filter:grayscale(1) brightness(.95);opacity:.77;transform-origin:50% 48%;animation-name:refined-weather;animation-duration:85s}
@keyframes refined-weather{from{transform:scale(1.19) rotate(-8deg) translate(-2%,-1%)}to{transform:scale(1.19) rotate(-8deg) translate(2%,1%)}}
.study-drift .weather-grade{background:linear-gradient(155deg,transparent 10%,#0c181022 38%,#0c181061 100%)}
.study-drift .step.active{border-color:#e306185c;box-shadow:inset 0 0 0 1px #e3061807}
.study-drift .step:after{content:'';position:absolute;top:-1px;left:30px;width:32px;height:2px;background:#e30618;opacity:var(--arrival,0);transition:opacity .16s}
.study-drift .step.active .step-number{color:#f3aaa3}.study-drift .step.active .pictogram svg{stroke:#f4514b;filter:drop-shadow(0 0 8px #e3061830)}
.study-drift .step .step-dot,.study-drift .step.active .step-dot{opacity:0;box-shadow:none}
.study-drift .step.arrived .icon-action{animation:trace-arrival .65s ease-out both}
@keyframes trace-arrival{from{stroke-dasharray:80;stroke-dashoffset:80}to{stroke-dasharray:80;stroke-dashoffset:0}}
@media(max-width:1000px) and (min-width:768px){.study-drift .step,.study-drift .step:last-child{padding:25px;grid-template-columns:minmax(0,1fr) 54px;min-height:300px;column-gap:10px}.study-drift .pictogram{width:54px;height:54px}.study-drift .step-copy h3{font-size:29px}}
@media(max-width:767px){
.study-drift .step,.study-drift .step:last-child{padding:25px 23px 26px;grid-template-columns:minmax(0,1fr) 52px;grid-template-rows:15px auto auto;column-gap:12px;min-height:0}
.study-drift .pictogram{grid-column:2;grid-row:1/3;width:52px;height:52px}
.study-drift .step-number{grid-column:1;grid-row:1;font-size:9px}
.study-drift .step-copy h3{grid-column:1;grid-row:2;font-size:29px;margin:13px 0 20px;line-height:1.08}
.study-drift .step-copy p{grid-column:1/-1;grid-row:3;max-width:none;font-size:14px;line-height:1.65}
.study-drift .step:before{background:linear-gradient(115deg,#08120dd4,#08120db3 65%,#08120d76)}
.study-drift .shared-formation{opacity:.8;animation-duration:100s}
.study-drift .step:after{left:23px}.study-drift .process-list{gap:17px}
}
@media(max-width:360px){.study-drift .step,.study-drift .step:last-child{padding:22px 18px 24px;grid-template-columns:minmax(0,1fr) 46px;column-gap:8px}.study-drift .pictogram{width:46px;height:46px}.study-drift .step-copy h3{font-size:25px}.study-drift .step:after{left:18px}}
@media(prefers-reduced-motion:reduce){.study-drift .shared-formation{animation:none;transform:scale(1.19) rotate(-8deg)}.study-drift .step.arrived .icon-action{animation:none}}

/* Keep the lower bank from overpowering the quieter first two windows. */
.study-drift .shared-formation{mask-image:linear-gradient(#000 12%,#000d 50%,#0009 100%)}

/* Review refinement: a neutral stage, softer curved process symbols, outline only. */
.study-drift{background:#151616}
.study-drift .step:after{display:none}
.study-drift .step:before{background:linear-gradient(118deg,#101212da 8%,#1012129c 62%,#1012123a),linear-gradient(0deg,#10121263,transparent 65%)}
.study-drift .weather-grade{background:linear-gradient(155deg,transparent 10%,#11151522 38%,#11151561 100%)}
@media(max-width:767px){.study-drift .step:before{background:linear-gradient(115deg,#101212d4,#101212b3 65%,#10121276)}}

/* Return the original atmospheric footer treatment beneath the existing layout. */
.join{background:#10201b;isolation:isolate}
.join-light{background:linear-gradient(#101313be,#10211a45 50%,#101313d9),url('assets/cloudscape.webp') center 68%/cover;filter:hue-rotate(128deg) saturate(.28);z-index:-1}
.join>h2,.join .application-paths{z-index:1}
@media(max-width:767px){.join-light{background-position:center,58% 68%}}

/* Almost imperceptible horizontal weather; content stays anchored. */
.join-light{inset:-1px -5%;background-size:auto,cover;animation:footer-weather-drift 80s ease-in-out infinite alternate;will-change:transform}
@keyframes footer-weather-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.join.footer-offscreen .join-light{animation-play-state:paused;will-change:auto}
@media(prefers-reduced-motion:reduce){.join-light{animation:none;transform:none;will-change:auto}}

/* Cloud bodies evolve in place, rather than sliding a flat background. */
.join-light{inset:0;animation:none;transform:none;will-change:auto;filter:none}
#footer-weather{display:block;width:100%;height:100%;opacity:0;transition:opacity 1s;pointer-events:none}
#footer-weather.ready{opacity:1}
.join-light:after{content:'';position:absolute;inset:0;background:linear-gradient(#101313be,#10211a45 50%,#101313d9);pointer-events:none}