/* 01 / The revenue loop — isometric service map (inspired by Langfuse's "Launch, observe, improve") */
.loop-section{--box-h:64px;--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;position:relative;padding:96px 0 70px;overflow:hidden;border-top:1px solid var(--line)}
.loop-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:start;position:relative;z-index:3}
.loop-heading{max-width:720px}
.loop-heading h2{font-size:55px;line-height:1.1;letter-spacing:-2.8px;margin:0 0 22px}
.loop-heading h2 mark{background:var(--lime);color:inherit;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.loop-heading>p:last-child{color:#69705f;font-size:18px;line-height:1.6;max-width:600px;margin:0}

.loop-body{position:relative;margin-top:60px}
.loop-viewport{position:relative;height:740px}
.loop-stage{position:absolute;left:50%;top:0;width:1240px;height:740px;margin-left:-620px;transform-origin:top center}
.loop-plane{position:absolute;left:0;top:0;width:1240px;height:620px;transform-style:preserve-3d;transform:translate(-20px,80px) rotateX(56deg) rotateZ(-20deg) scale(.94)}
.loop-plane *{transform-style:preserve-3d}
/* only tiles and boxes take the pointer; the floor, grid, track and labels never compete with them in 3D hit-testing */
.loop-plane{pointer-events:none}
.loop-plane .tile-hit,.loop-plane .loop-box{pointer-events:auto}

/* floor grid */
.loop-grid{position:absolute;inset:-420px -520px;transform:translateZ(-1px);pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100'%3E%3Crect x='10' y='14' width='210' height='70' fill='none' stroke='%2318201f' stroke-opacity='.11' stroke-width='1.5'/%3E%3C/svg%3E");background-position:40px 0;
 -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)}

/* the lime loop track (extruded by stacking layers) */
.loop-track{position:absolute;inset:0;pointer-events:none}
.loop-track svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.track-layer{position:absolute;inset:0;transform:translateZ(var(--z))}
.track-layer path,.track-layer polygon{fill:none;stroke-linejoin:miter;stroke-linecap:butt}
.track-layer .edge{stroke:#18201f;stroke-width:22}
.track-layer .band{stroke:#c9e24a;stroke-width:18}
.track-layer.top .band{stroke:var(--lime)}
.track-layer .head{fill:#c9e24a;stroke:#18201f;stroke-width:2}
.track-layer.top .head{fill:var(--lime)}
.track-layer .flow{stroke:#18201f;stroke-opacity:.5;stroke-width:3;stroke-dasharray:3 26;animation:loopFlow 1.6s linear infinite}
@keyframes loopFlow{to{stroke-dashoffset:-29}}

/* stage boxes */
.loop-box{all:unset;cursor:pointer;position:absolute;left:var(--x);top:60px;width:190px;height:200px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.loop-box>span{position:absolute;display:block;background:#fbfbf8;border:1.5px solid #3a403d;box-sizing:border-box;backface-visibility:visible}
.box-front{left:0;top:100%;width:100%;height:var(--box-h);transform-origin:top;transform:rotateX(90deg);background:#efefe9 !important}
.box-back{left:0;top:0;width:100%;height:var(--box-h);transform-origin:top;transform:rotateX(90deg);background:#e4e4dc !important}
.box-side{left:100%;top:0;width:var(--box-h);height:100%;transform-origin:left;transform:rotateY(-90deg);background:#e9e9e2 !important}
.box-left{left:0;top:0;width:var(--box-h);height:100%;transform-origin:left;transform:rotateY(-90deg);background:#e4e4dc !important}
.box-dot{position:absolute;left:44px;bottom:16px;width:14px;height:7px;border:1.5px solid #9aae2a;border-radius:4px;background:var(--lime)}
.box-inside{inset:0;transform:translateZ(18px);background:repeating-linear-gradient(135deg,#f1f6d6 0 6px,#e8f0c4 6px 7px) !important;border-color:#b8c98a !important;padding:28px 22px 20px 34px;font:500 11px/1.4 var(--mono);color:#56613f}
.box-inside small{display:block;font-size:10px;letter-spacing:1px;margin-bottom:8px;color:#8a9a55}
.box-inside em{font-style:normal;font-size:15px;color:#2d3a18;font-family:'DM Sans',sans-serif;font-weight:600;line-height:1.25}
.box-lid{inset:0;transform-origin:top;transform:translateZ(var(--box-h));transition:transform .7s cubic-bezier(.22,1,.36,1);background:none !important;border:0 !important}
.box-lid>span{position:absolute;inset:0;display:block;box-sizing:border-box;border:1.5px solid #3a403d;padding:40px 22px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid-top{background:linear-gradient(160deg,#fff,#f4f4ef);transition:background .3s}
.lid-under{transform:rotateX(180deg);background:linear-gradient(20deg,#eef6cf,#fbfff0);display:flex !important;align-items:flex-end;padding:22px !important}
.lid-under strong{opacity:.55}
.box-lid strong{display:block;font:500 22px/1 var(--mono);letter-spacing:-.5px;color:#18201f}
.box-grip{position:absolute;left:18px;top:14px;width:22px;height:12px;background:repeating-linear-gradient(90deg,#a9aea7 0 2px,transparent 2px 6px)}
.loop-box.is-open .box-lid{transform:translateZ(var(--box-h)) rotateX(108deg)}
/* boxes never move as a whole, so their hover area stays put */
.loop-box>.box-hit{inset:0;transform:translateZ(var(--box-h));background:transparent !important;border:0 !important}
.loop-box.is-open .box-lid,.loop-box.is-open .box-lid *{pointer-events:none}
.loop-box.is-related .lid-top{background:linear-gradient(160deg,#f7ffd6,var(--lime))}
.loop-box.is-related .box-front,.loop-box.is-related .box-side{background:#eef6cf !important}
.loop-plane.has-focus .loop-box:not(.is-open):not(.is-related) .lid-top strong{color:#9aa097}
.loop-box.is-open .box-front,.loop-box.is-open .box-side{background:#f3f7e2 !important}
.loop-box:focus-visible .lid-top{outline:3px solid #6a8e00;outline-offset:4px}

.loop-link{position:absolute;left:var(--x);top:150px;width:24px;height:22px;background:var(--lime);border:1.5px solid #18201f;border-width:1.5px 0;box-sizing:border-box;transform:translateZ(30px)}
.loop-link::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:#c9e24a;border-bottom:1.5px solid #18201f;transform-origin:top;transform:rotateX(90deg)}

/* floor labels */
.loop-label{position:absolute;font:500 16px/1 var(--mono);letter-spacing:.3px;color:#18201f;transform:translateZ(2px)}
.label-new{left:70px;top:370px}
.label-customer{left:1010px;top:352px}

/* service tiles ("tabs") on the floor */
.loop-tile{all:unset;cursor:pointer;position:absolute;left:var(--x);top:var(--y);width:210px;height:70px;box-sizing:border-box;transform-style:preserve-3d;transform:translateZ(2px)}
.tile-hit{position:absolute;inset:0;display:block;transform:translateZ(1px);background:rgba(250,251,247,.01)}
.tile-face{position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border:1.5px solid rgba(24,32,31,.22);display:flex;align-items:center;justify-content:center;text-align:center;font:500 15px/1.2 var(--mono);color:#8d938c;background:rgba(250,251,247,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s,box-shadow .45s}
.loop-tile:hover .tile-face,.loop-tile.is-active .tile-face{transform:translateZ(16px);background:var(--lime);color:#18201f;border-color:#18201f;box-shadow:-10px 14px 0 rgba(24,32,31,.14)}
.loop-tile.is-related .tile-face{background:#f0f8d2;color:#18201f;border-color:#8ea52a;transform:translateZ(6px)}
.loop-tile:focus-visible .tile-face{outline:3px solid #6a8e00;outline-offset:4px}

/* detail panel */
.loop-panel{position:absolute;top:0;right:0;width:340px;pointer-events:none;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:22px 24px 20px;box-shadow:0 18px 40px -26px rgba(24,32,31,.35);z-index:3}
.loop-panel-kicker{font:600 10.5px/1 var(--mono);letter-spacing:1.4px;color:#6a735f}
.loop-panel h3{font:600 24px/1.15 'Manrope',sans-serif;letter-spacing:-.8px;margin:10px 0 8px}
.loop-panel>p{font-size:14.5px;line-height:1.55;color:#555d58;margin:0 0 14px}
.loop-panel-stages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.loop-panel-stages span{font:500 11px/1 var(--mono);padding:6px 8px;border-radius:4px;border:1px solid var(--line);color:#8d938c;transition:all .3s}
.loop-panel-stages span.on{background:var(--lime);border-color:#18201f;color:#18201f}
.loop-panel-proof{border-top:1px dashed var(--line);padding-top:12px}
.loop-panel-proof span{font:600 10px/1 var(--mono);letter-spacing:1.3px;color:#8a9a55}
.loop-panel-proof p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#3d4541}
.loop-panel.swap h3,.loop-panel.swap>p,.loop-panel.swap .loop-panel-proof p{animation:loopSwap .4s ease}
@keyframes loopSwap{from{opacity:0;transform:translateY(6px)}}

.loop-chips{display:none}
.loop-hint{font-size:13px;color:#8d938c;margin:6px 0 0}

/* the panel is out of flow (desktop) or below the scene (smaller screens), so its changing height never moves the scene under the pointer */
@media(max-width:1100px){.loop-section>.wrap{display:flex;flex-direction:column}.loop-top{display:contents}.loop-heading{order:1}.loop-body{order:2;margin-top:-10px}.loop-panel{order:3;position:relative;width:auto;max-width:560px;margin-top:12px}.loop-chips{order:4}.loop-hint{order:5}}
@media(max-width:800px){.loop-heading h2{font-size:42px;letter-spacing:-2px}.loop-heading>p:last-child{font-size:16px}
 .loop-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
 .loop-chips button{all:unset;cursor:pointer;font:500 12px/1 var(--mono);padding:9px 11px;border:1px solid rgba(24,32,31,.22);border-radius:4px;color:#555d58;background:#fff}
 .loop-chips button.is-active{background:var(--lime);border-color:#18201f;color:#18201f}
 .loop-hint{display:none}}
@media(max-width:600px){.loop-section{padding:56px 0 48px}.loop-heading h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.loop-box,.box-lid,.tile-face{transition:none}.track-layer .flow{animation:none}}