/* Connected editorial headings: real text, decorative wires, no extra canvas. */
.reference-copy h1.hero-map{position:absolute;left:186px;top:116px;width:800px;height:140px;margin:0;font:600 38px/1.1 'Space Grotesk',sans-serif;letter-spacing:-1.7px;text-transform:none;text-shadow:none}
.hero-map-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--cyan);stroke-width:1.4;overflow:visible}
.map-wire{stroke:#7bb7d5}.map-arrow{stroke:var(--cyan)}
.hero-map-node{position:absolute;top:0;width:240px;min-height:60px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;color:#edf5ff;background:linear-gradient(145deg,#0b1722,#050b13);border:1px solid #354e65;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff09,0 12px 32px #0005}
.hero-map-node-1{left:0}.hero-map-node-2{left:280px;top:70px}.hero-map-node-3{left:560px;border-color:#60d8f180;color:#8adef6;background:linear-gradient(145deg,#102839,#091522)}
.map-port{width:5px;height:5px;flex:0 0 5px;border:1px solid #75d4ea;border-radius:50%;box-shadow:0 0 12px #60d8f145}
main h2.flow-title{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-block:20px 24px;font-size:clamp(32px,3.5vw,52px);line-height:1.2;letter-spacing:-1.8px}
.flow-node{position:relative;display:inline-block;max-width:100%;padding-bottom:10px;color:#e8f1fc}
.flow-node:after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:#52708f;border-radius:2px}
.flow-node-accent{color:#79d8f1}.flow-node-accent:after{width:100%;background:linear-gradient(90deg,#60d8f1,#5795ff80)}
.flow-link{display:block;flex:0 0 64px;width:64px;height:36px;margin:0 16px;fill:none;stroke:#668caa;stroke-width:1.5;overflow:visible}
.flow-tip{stroke:#83d9ee}
main h2.flow-title-stack{align-items:flex-start;flex-direction:column;gap:6px}
.flow-title-stack .flow-link{flex:none;width:55px;height:30px;margin:1px 0 5px 22px;transform:rotate(90deg);transform-origin:center}
.product-story-heading h2.flow-title{font-size:clamp(32px,3.6vw,52px)}
.scene-pinned .product-story-heading h2.flow-title{margin:10px 0 16px}
.plans-heading h2.flow-title{justify-content:center}
.showcase-heading h2.flow-title,.section-heading h2.flow-title{max-width:720px}
.control-intro h2.flow-title{max-width:1000px}
.closing h2.flow-title{justify-content:center}
.high-contrast .hero-map-node{border-color:#b5e2f6;color:#fff;background:#07111d}.high-contrast .flow-node{color:#fff}.high-contrast .flow-link,.high-contrast .hero-map-lines{stroke:#c5efff}
@keyframes map-connect{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes map-node-enter{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
.motion-enabled .hero-map .map-wire{stroke-dasharray:1;animation:map-connect 1.2s .3s both}
.motion-enabled .hero-map-node{animation:map-node-enter .7s cubic-bezier(.16,1,.3,1) both}.motion-enabled .hero-map-node-2{animation-delay:.18s}.motion-enabled .hero-map-node-3{animation-delay:.36s}
.motion-enabled .is-revealed .flow-track{stroke-dasharray:1;animation:map-connect .9s .15s both}
.motion-enabled .is-revealed .flow-node{animation:map-node-enter .65s cubic-bezier(.16,1,.3,1) both}.motion-enabled .is-revealed .flow-node-accent{animation-delay:.18s}
@media(max-width:900px){main h2.flow-title{font-size:clamp(28px,4.2vw,42px);letter-spacing:-1px}.flow-link{flex-basis:48px;width:48px;margin-inline:10px}.showcase-heading h2.flow-title,.section-heading h2.flow-title{flex-direction:column;align-items:flex-start}.showcase-heading .flow-link,.section-heading .flow-link{flex:none;transform:rotate(90deg);margin:8px 0 12px 16px}}
@media(max-width:700px){
 .reference-copy h1.hero-map{position:relative;inset:auto;width:100%;max-width:390px;height:210px;margin:0 auto 24px;font-size:clamp(27px,6.6vw,38px);letter-spacing:-1px}
 .hero-map-lines{display:none}
 .hero-map-node{width:72%;min-height:54px;border-radius:13px;white-space:normal}
 .hero-map-node-1{left:0;top:0}.hero-map-node-2{left:28%;top:76px}.hero-map-node-3{left:0;top:152px}
 .hero-map-node-1:after,.hero-map-node-2:after{content:'';position:absolute;top:calc(100% + 1px);width:34px;height:24px;border-bottom:1px solid #79b6d4}
 .hero-map-node-1:after{right:20px;border-left:1px solid #79b6d4;border-bottom-left-radius:12px}
 .hero-map-node-2:after{left:20px;border-right:1px solid #79b6d4;border-bottom-right-radius:12px}
 .reference-hero.hero,.reference-stage{min-height:950px}
 .reference-enable-motion{margin-top:14px}
 .product-story-heading h2.flow-title,main h2.flow-title{font-size:clamp(28px,7vw,38px)}
 .product-story-heading h2.flow-title,.plans-heading h2.flow-title,.control-intro h2.flow-title,.closing h2.flow-title{flex-direction:column;align-items:flex-start}
 .product-story-heading .flow-link,.plans-heading .flow-link,.control-intro .flow-link,.closing .flow-link{flex:none;width:48px;height:28px;transform:rotate(90deg);margin:7px 0 12px 18px}
 .closing h2.flow-title,.plans-heading h2.flow-title{width:fit-content;margin-inline:auto;text-align:left}
 .flow-node{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .hero-map-node,html:not(.motion-enabled) .map-wire,html:not(.motion-enabled) .flow-track,html:not(.motion-enabled) .flow-node{animation:none!important}}
html:not(.motion-enabled) .hero-map-node,html:not(.motion-enabled) .map-wire,html:not(.motion-enabled) .flow-track,html:not(.motion-enabled) .flow-node{animation:none!important}

/* The same cyan edge light as the reference CTA, with a single sheen pass. */
.hero-map{pointer-events:auto}
.hero-map-node{isolation:isolate}
.hero-map-node:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#b7f0ff08 43%,#dcf8ff50 49%,#a1eaff18 55%,transparent 64%);background-size:250% 100%;background-position:100% 0;opacity:0}
.flow-node{--flow-ink:#e8f1fc}.flow-node-accent{--flow-ink:#79d8f1}
@keyframes node-sheen{0%{background-position:100% 0;opacity:0}18%{opacity:1}82%{opacity:1}100%{background-position:0% 0;opacity:0}}
@keyframes word-sheen{from{background-position:100% 0}to{background-position:0% 0}}
.motion-enabled .hero-map-node{transition:border-color .25s,box-shadow .25s,color .25s,transform .25s}
.motion-enabled .hero-map-node:before{animation:node-sheen 1.1s .65s both}
.motion-enabled .hero-map-node-2:before{animation-delay:.85s}.motion-enabled .hero-map-node-3:before{animation-delay:1.05s}
.motion-enabled .hero-map-node:hover{border-color:#99e8ff;color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 #c9efff26,inset 0 -3px 8px #60d8f126,0 0 8px #3cbeeb26,0 9px 28px #60d8f124}
.motion-enabled .hero-map-node:hover:before{animation:node-sheen .95s ease-out}
.motion-enabled .flow-title .flow-node{background-image:linear-gradient(110deg,var(--flow-ink) 0%,var(--flow-ink) 38%,#fff 48%,#c1f4ff 53%,var(--flow-ink) 63%,var(--flow-ink) 100%);background-size:250% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent;transition:text-shadow .25s,transform .25s}
.motion-enabled .is-revealed .flow-title .flow-node{animation:map-node-enter .65s cubic-bezier(.16,1,.3,1) both,word-sheen 1s .4s both}
.motion-enabled .is-revealed .flow-title .flow-node-accent{animation-delay:.18s,.6s}
.motion-enabled .flow-title .flow-node:hover,.motion-enabled .is-revealed .flow-title .flow-node:hover{animation:word-sheen .95s ease-out;transform:translateY(-2px);text-shadow:0 0 20px #60d8f140}
.motion-enabled .flow-node:after{transition:box-shadow .25s,background .25s}
.motion-enabled .flow-node:hover:after{background:linear-gradient(90deg,#bcefff,#60d8f1);box-shadow:0 0 10px #60d8f180}
.motion-enabled .hero-map-lines,.motion-enabled .flow-link{transition:filter .3s}
.motion-enabled .hero-map:hover .hero-map-lines,.motion-enabled .flow-title:hover .flow-link{filter:drop-shadow(0 0 4px #60d8f1aa)}
.motion-enabled .hero-map-node:hover .map-port{background:#bdf5ff;box-shadow:0 0 12px #60d8f1aa}
html:not(.motion-enabled) .hero-map-node:before{animation:none;opacity:0}
html:not(.motion-enabled) .flow-title .flow-node{background:none;color:var(--flow-ink);text-shadow:none;transform:none;transition:none}
.high-contrast.motion-enabled .flow-title .flow-node{background:none;color:#fff}
@media(hover:none){.motion-enabled .hero-map-node:hover,.motion-enabled .flow-title .flow-node:hover{transform:none}}