/* Dedicated illustration styles keep the purchase cards and real gauges separate. */
.movement-explorer{--movement-bg:#07141e;--movement-muted:#abc5d8;background:var(--movement-bg);color:#f2f7fb;border:1px solid #263b48;border-radius:20px;padding:34px 36px 24px;margin:0 0 42px;overflow:hidden;position:relative;isolation:isolate}
.movement-explorer .movement-heading{position:relative;z-index:2;pointer-events:none}
.movement-explorer .movement-heading h3{font-family:inherit;font-size:clamp(28px,3.8vw,40px);font-weight:600;line-height:1.12;letter-spacing:-.035em;margin:0 0 12px;color:#f2f7fb}
.movement-explorer .movement-heading p{font-size:17px;line-height:1.5;margin:0;color:var(--movement-muted)}
.movement-stage{position:relative;width:min(100%,670px);aspect-ratio:1315/1196;margin:8px auto 16px}
.movement-art,.movement-canvas,.movement-energy,.movement-points{position:absolute;inset:0;width:100%;height:100%;display:block}
.movement-art{object-fit:contain;opacity:1}
.movement-canvas{opacity:0;pointer-events:none}
.movement-ready .movement-art{opacity:0}
.movement-ready .movement-canvas{opacity:1}
.movement-explorer .movement-point{position:absolute;width:44px;height:44px;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.movement-point span{width:19px;height:19px;border:2px solid #e4f2ff;background:#253b4ded;border-radius:50%;box-shadow:0 2px 6px #0008;transition:background .18s,border-color .18s,box-shadow .18s,scale .18s}
.movement-point[aria-pressed=true] span{background:#d5ff42;border-color:#d5ff42;box-shadow:0 0 0 5px #d5ff4228,0 0 18px #d5ff424d;scale:1.1}
.movement-point:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media(hover:hover){.movement-point:hover span{scale:1.15;border-color:#fff}}
.movement-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:2;color:var(--movement-muted);font-size:13px}
.movement-legend{display:flex;align-items:center;gap:8px;white-space:nowrap}
.movement-legend>span:nth-child(3){margin-left:12px}
.movement-off,.movement-on{display:block;width:12px;height:12px;border-radius:50%;border:1.5px solid #b9d0e0}
.movement-on{background:#d5ff42;border-color:#d5ff42}
.movement-actions{display:flex;gap:4px}
.movement-explorer .movement-actions button{font:inherit;font-size:13px;color:#d8e9f6;background:transparent;border:1px solid #324b5c;border-radius:8px;padding:10px 14px;min-height:44px;cursor:pointer;touch-action:manipulation}
.movement-actions button:disabled{opacity:.4;cursor:default}
.movement-actions button:focus-visible{outline:2px solid #d5ff42;outline-offset:3px}
.movement-footer small{font-size:12px;text-align:right}
.movement-explorer--purchase{padding:24px 16px 18px;margin:28px 0}
.movement-explorer--purchase .movement-heading h3{font-size:28px}
.movement-explorer--purchase .movement-heading p{font-size:15px}
.movement-explorer--purchase .movement-footer{flex-wrap:wrap;gap:10px}
.movement-explorer--purchase .movement-footer small{flex-basis:100%;text-align:center}
@media(min-width:1000px){.movement-explorer:not(.movement-explorer--purchase) .movement-stage{margin-top:-40px}.movement-explorer:not(.movement-explorer--purchase) .movement-heading{max-width:500px}}
@media(max-width:600px){.movement-explorer{padding:24px 12px 18px;border-radius:16px;margin-bottom:28px}.movement-explorer .movement-heading h3{font-size:29px}.movement-explorer .movement-heading p{font-size:15px}.movement-stage{margin:22px auto 16px}.movement-footer{flex-wrap:wrap;gap:12px;font-size:12px}.movement-footer small{flex-basis:100%;text-align:center}.movement-explorer .movement-actions button{padding:9px 12px}.movement-point span{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.movement-point span{transition:none}}

.movement-energy{pointer-events:none}

.movement-explorer{scroll-margin-top:82px}

/* Callout labels stay outside the rider while dashed leaders follow each dot. */
.movement-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.movement-leaders path{fill:none;stroke:#9bb2c3;stroke-width:1;stroke-dasharray:3 4;opacity:.8}
.movement-point-label{position:absolute;width:max-content;max-width:90px;white-space:normal;font-family:inherit;font-size:12px;font-weight:500;line-height:1.35;color:#e4f2ff;cursor:pointer;transform:translateY(-50%);text-align:left}
.movement-point[data-label-placement="left"] .movement-point-label{transform:translate(-100%,-50%);text-align:right}
.movement-explorer .movement-stage{width:74%;max-width:500px;margin-top:28px;margin-bottom:76px}
@media(max-width:600px){.movement-point-label{max-width:64px}}

/* The interactive rider replaces the static placement image beside the section copy. */
.movement-explorer--positions{min-width:0;margin:0;padding:24px 12px 18px}
.movement-explorer--positions .movement-heading h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.movement-explorer--positions .movement-heading p{text-align:center;font-size:15px}
.movement-explorer.movement-explorer--positions .movement-stage{margin-top:22px}
.movement-explorer--positions .movement-footer{flex-wrap:wrap;gap:12px}
.movement-explorer--positions .movement-footer small{flex-basis:100%;text-align:center}