.stacked-journey { background:#232622; padding:64px 4%; color:#f5f4f0; }
.journey-demo { max-width:1440px; margin:0 auto; scroll-margin-top:30px; }
.journey-demo-heading { margin:0 0 28px; }
.journey-demo-heading>span { font-size:12px; letter-spacing:.12em; color:#ff866d; }
.journey-demo-heading h2 { font-size:clamp(30px,4vw,52px); font-weight:500; letter-spacing:-.04em; margin:12px 0; }
.journey-demo-heading p { font-size:17px; line-height:1.5; color:#c2c8ba; margin:0; }
.stacked-journey .story-panel { display:block; position:relative; grid-area:auto; opacity:1; visibility:visible; transform:none; rotate:0deg; pointer-events:auto; width:100%; max-width:none; margin:0; }
.stacked-journey #compass-story,.stacked-journey #relay-story { display:flex; flex-direction:column; height:auto; max-height:none; }
.stacked-journey .compass-scene { min-height:530px; overflow:visible; align-items:center; }
.stacked-journey #compass-story .compass-product,.stacked-journey #relay-story .relay-product { max-height:none; overflow:visible; }
.stacked-journey #compass-story .compass-scene,.stacked-journey #relay-story .relay-scene { align-items:center; }
.journey-connector { --connection-progress:0; height:250px; display:flex; align-items:center; justify-content:center; gap:28px; margin:0 auto; }
.journey-connector-track { width:3px; height:100%; position:relative; background:#ffffff18; }
.journey-connector-track i { position:absolute; inset:0; background:#ff6549; transform:scaleY(var(--connection-progress)); transform-origin:top; box-shadow:0 0 16px #ff654970; }
.journey-connector-track b { position:absolute; width:11px; height:11px; border-radius:50%; background:#ff866d; left:-4px; top:calc(var(--connection-progress) * 100%); transform:translateY(-50%); box-shadow:0 0 18px #ff6549; }
.journey-connector>span { font-size:16px; color:#c6cdbf; max-width:220px; line-height:1.5; }
.journey-atlas { max-width:700px; margin:85px auto 0; }
.journey-atlas .scene-result { padding:32px; }
@media(max-width:700px) { .stacked-journey { padding:36px 4%; } .journey-connector { height:180px; gap:22px; } .journey-connector>span { font-size:14px; max-width:170px; } .stacked-journey .compass-scene { min-height:0; } .journey-demo-heading p { font-size:16px; } }
.compass-narrative .product-story-bullets { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:16px; }
.product-story-bullets li { position:relative; padding-left:24px; font-size:17px; line-height:1.5; color:#46523e; text-wrap:pretty; animation:story-bullet-in .5s ease both; animation-delay:var(--bullet-delay,0ms); }
.product-story-bullets li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:#d8482c; }
@keyframes story-bullet-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) { .product-story-bullets li { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .product-story-bullets li { animation:none; } }
.compass-narrative .compass-next-glow.next-product { background:#b9321d; border-color:#ff765c; animation:next-product-glow 1.8s ease-in-out infinite; }
.compass-narrative .compass-next-glow.next-product:hover { background:#9c2815; }
.journey-replay { display:block; margin:14px 0 0; padding:6px 0; border:0; background:transparent; color:#526451; font:inherit; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.journey-replay[hidden] { display:none; }
.journey-replay:hover { color:#0b5660; }
.journey-replay:focus-visible { outline:2px solid #0b5660; outline-offset:4px; }
@keyframes next-product-glow { 0%,100% { background:#b9321d; box-shadow:0 0 0 4px #ff583318,0 5px 20px #f4523530; } 50% { background:#d64227; box-shadow:0 0 0 8px #ff654945,0 5px 34px #ff654990; } }
@media(prefers-reduced-motion:reduce) { .compass-narrative .compass-next-glow.next-product { animation:none; } }
.stacked-journey { position:relative; }
.product-route-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.product-route-layer path { fill:none; stroke:#ff6549; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px #ff654960); stroke-dasharray:1; animation:product-route-draw 1.5s ease both; }
.compass-narrative .next-product .compass-next-arrow { display:inline-block; transform:rotate(90deg); animation:none; color:#ff947d; }
@keyframes product-route-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .product-route-layer path { animation:none; } }
/* A single SVG stroke owns the arrow stem and the route: no font-glyph gap. */
.compass-narrative .next-product .compass-next-arrow { visibility:hidden; transform:none; }
.compass-narrative .compass-next-glow.next-product:hover { transform:none; }
.product-route-layer .route-arrowhead { stroke:#ff6549; stroke-dasharray:none; animation:none; }
.has-product-route .journey-connector-track { background:linear-gradient(to bottom,transparent 30px,#ffffff18 30px); }
.has-product-route .journey-connector-track i { clip-path:inset(30px 0 0 0); transform:none; height:calc(var(--connection-progress) * 100%); }
.has-product-route .journey-connector-track { visibility:hidden; }
.product-route-layer .product-route-dot { fill:#ffad8b; stroke:#ff6549; stroke-width:2; filter:drop-shadow(0 0 7px #ff6549); }