/* Owner-requested detail pass; the hero choreography and explorer stay independent. */
.site-header .mark{width:28px;height:28px;flex:none}
.rail-window{padding-block:3px}
.rail-window:hover .rail-track,.rail-window:focus-within .rail-track{animation-play-state:paused}
.rail-window:focus-visible{outline:2px solid #2453b8;outline-offset:-2px}
.record-chip:hover{box-shadow:inset 0 0 0 2px #171c1f;background:#fff}
.join-section{padding-block:84px 100px;border-top:1px solid var(--line);scroll-margin-top:100px}
.join-section:focus{outline:none}
.join-intro{max-width:655px;color:var(--muted);line-height:1.75;margin:0 0 32px}
.install-panel{padding:28px 30px 20px;border:1px solid #a7dce5;border-radius:14px;background:#eefafb}
.install-heading,.agent-handoff-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.install-heading>span{font-size:14px;font-weight:550;color:#294c58}
.copy-control{display:flex;align-items:center;gap:10px}
.join-section button{cursor:pointer}
.join-section button[hidden]{display:none}
.install-code{margin:22px 0 18px;padding:24px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#4a8cd6 0 25%,#3ac980 25% 50%,#f5c518 50% 75%,#eb4c3c 75% 100%) border-box;border:4px solid transparent;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;color:#173d4b;font:400 16px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace}
.install-code code{font:inherit}
.install-help{font-size:13px;line-height:1.7;color:#45636e;margin:0;max-width:750px}
.copy-status{min-height:20px;font-size:12px;line-height:1.6;color:#25526b;margin:8px 0 0}
.copy-control .copy-status{min-height:0;max-width:190px;margin:0;opacity:0;text-align:right;transition:opacity 160ms ease}
.copy-control.copy-confirmed .copy-status{opacity:1}
.join-section>.text-link{margin-top:12px}
.agent-handoff{margin-top:40px;padding:28px 30px 22px;border:1px solid #d1e2eb;border-radius:14px;background:#f5f9fc}
.agent-label{font-size:12px;color:#2453b8;margin:0 0 7px}
.agent-handoff h3{font-size:23px;line-height:1.3;letter-spacing:-.6px;font-weight:500;margin:0}
#agent-instructions{font:400 14px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#314f61;background:#fff;border-left:3px solid #8cbedf;padding:20px 22px;margin:24px 0 14px}
.agent-handoff-links{display:flex;gap:24px;flex-wrap:wrap}
.pilot-step:nth-child(2) .step-marker{background:#eef9f3;border-color:#b9d9c7;color:#285741}
.pilot-step:nth-child(3) .step-marker{background:#fff9e7;border-color:#e6d6a1;color:#65521d}
.steps-ready .pilot-step{transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.7,.2,1)}
.steps-ready .pilot-step:not(.step-visible){opacity:0;transform:translateY(24px)}
.invitation-section{overflow:visible}
.pixel-edge{position:absolute;width:190px;height:72px;pointer-events:none;z-index:1;background:url('assets/pixel-edge.svg') center/190px 72px no-repeat}
.pixel-edge-top{left:clamp(24px,7vw,140px);top:-42px}
.pixel-edge-bottom{right:clamp(24px,7vw,140px);bottom:-42px;transform:rotate(180deg)}
.pixel-edge i{display:none}
.closing-pixels i{--radial-x:0px;--radial-y:0px;--ripple-delay:0ms;animation:pixel-release 6s cubic-bezier(.22,.68,.25,1) infinite;animation-delay:var(--ripple-delay);animation-play-state:paused}
.closing-pixels i:before,.closing-pixels i:after{content:"";position:absolute;left:4px;top:4px;width:4px;height:4px;background:var(--c);opacity:0;pointer-events:none;animation:pixel-trace 6s cubic-bezier(.22,.68,.25,1) infinite;animation-delay:var(--ripple-delay);animation-play-state:paused}
.closing-pixels i:after{width:3px;height:3px;left:4.5px;top:4.5px;animation-name:pixel-trace-far}
.close-visible .closing-pixels i,.close-visible .closing-pixels i:before,.close-visible .closing-pixels i:after{animation-play-state:running}
.detail-page-hidden .closing-pixels i,.detail-page-hidden .closing-pixels i:before,.detail-page-hidden .closing-pixels i:after{animation-play-state:paused}
/* Gather, release from the center, settle; the final third is a quiet hold.
   Individual translate composes with the existing scroll-driven transform. */
@keyframes pixel-release{
 0%,68%,100%{translate:0 0;scale:1}
 12%{translate:calc(var(--radial-x)*-.35) calc(var(--radial-y)*-.35);scale:.96}
 36%{translate:var(--radial-x) var(--radial-y);scale:1.06}
}
@keyframes pixel-trace{
 0%,16%,58%,100%{opacity:0;transform:translate(0,0)}
 29%{opacity:.3;transform:translate(calc(var(--radial-x)*-.6),calc(var(--radial-y)*-.6))}
 48%{opacity:0;transform:translate(calc(var(--radial-x)*.35),calc(var(--radial-y)*.35))}
}
@keyframes pixel-trace-far{
 0%,20%,60%,100%{opacity:0;transform:translate(0,0)}
 34%{opacity:.16;transform:translate(calc(var(--radial-x)*-1.05),calc(var(--radial-y)*-1.05))}
 52%{opacity:0;transform:translate(calc(var(--radial-x)*.15),calc(var(--radial-y)*.15))}
}
@media(max-width:700px){
 .site-header .mark{width:23px;height:23px}
 .join-section{padding-block:52px 72px;scroll-margin-top:88px}
 .join-intro{font-size:16px;margin-bottom:24px}
 .install-panel,.agent-handoff{padding:20px 18px 14px}
 .install-heading,.agent-handoff-heading{align-items:flex-start;flex-direction:column;gap:16px}
 .install-heading{flex-direction:row;align-items:center;gap:12px}
 .install-heading>span{font-size:12px;max-width:100px}
 .copy-control{gap:7px}
 .copy-control .copy-status{max-width:92px;font-size:11px}
 .install-code{font-size:14px;line-height:1.8;padding:18px 14px;margin-top:18px}
 .agent-handoff{margin-top:28px}
 .agent-handoff h3{font-size:22px}
 #agent-instructions{font-size:13px;padding:16px 14px}
 .agent-handoff-links{column-gap:18px;row-gap:0}
 .pixel-edge{scale:.8;transform-origin:center}
}
@media(prefers-reduced-motion:reduce){
 .steps-ready .pilot-step{opacity:1!important;transform:none!important;transition:none}
 /* Honor the owner's existing page-wide automatic-animation setting. */
 html:not(.motion-enabled) .closing-pixels i{animation:none;translate:none;scale:none}
 html:not(.motion-enabled) .closing-pixels i:before,html:not(.motion-enabled) .closing-pixels i:after{animation:none;opacity:0}
}