/* Animated hero demo (welcome page). Backup of the previous intro: backups/intro-2026-10-13 */
.hero-demo{margin:42px 42px 42px 0;padding:22px 24px 18px;background:#fff;border-radius:14px;align-self:center;box-shadow:0 25px 65px #11071f55;min-width:0;color:#191725}
.hd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hd-head .eyebrow{color:var(--purple,#5b2197);margin:0 0 6px;font-size:12px}
.hd-head h2{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.5px}
.hd-play{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #ddd6ea;background:#faf8fd;color:#3b1d5e;display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease,transform .15s ease}
.hd-play:hover{background:#f0e7fa;transform:scale(1.06)}
.hd-play:focus-visible,.hd-steps button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
.hd-play svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hd-steps{list-style:none;margin:16px 0 12px;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.hd-steps button{width:100%;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 3px;column-gap:8px;row-gap:7px;align-items:center;text-align:left;padding:8px 10px 7px;border:1px solid #ece7f3;border-radius:10px;background:#fbfafd;color:#6b6578;font:600 13px/1.2 inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.hd-steps b{font:700 11px ui-monospace,monospace;color:#a79bbb}
.hd-steps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-steps i{grid-column:1/-1;height:3px;border-radius:2px;background:#ece7f3;overflow:hidden}
.hd-steps em{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#db2777);transform-origin:left;transform:scaleX(0)}
.hd-steps button[aria-current="step"]{border-color:#c9b4ef;background:#f6f0fe;color:#2e1650}
.hd-steps button[aria-current="step"] b{color:#7c3aed}
.hd-stage{border-radius:10px;background:linear-gradient(180deg,#f7f5fb,#f1edf8);overflow:hidden}
.hd-svg{display:block;width:100%;height:auto}
.hd-caption{margin:12px 2px 0;min-height:2.9em;font-size:14.5px;line-height:1.45;color:#3f3a4f}
.hd-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#7c3aed;animation:hdBlink 1s steps(1) infinite}
.hd-paused .hd-caret{display:none}
@keyframes hdBlink{50%{opacity:0}}
html.no-intro-motion .hd-caret{display:none}
.hd-svg .hd-mono{font:11px ui-monospace,SFMono-Regular,Menlo,monospace}
.hd-svg .hd-mono-s{font:9.5px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#6b6578}
.hd-svg .hd-chip{font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#fff}
.hd-svg .hd-th{font:700 11px system-ui,-apple-system,"Segoe UI",sans-serif}
.hd-svg .hd-ts{font:9px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#8a8399}
.hd-svg .hd-well{font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#2e1650}
.hd-svg .hd-top{font:700 10.5px system-ui,-apple-system,"Segoe UI",sans-serif}
.hd-svg .hd-clab{font:600 9.5px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#3b1d5e}
.hd-svg .hd-wl{font:700 10.5px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#111827;paint-order:stroke;stroke:#fff;stroke-width:3px}
.hd-svg .hd-maptitle{font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif;fill:#2e1650}
/* Map Studio workflow section: copy and step list on the left, animation on the right */
.map-flow .md-card{margin:0;box-shadow:0 18px 50px #2e165022;border:1px solid #ece7f3}
.map-flow .md-card .hd-steps{display:none}
.map-flow .md-card .hd-stage{margin-top:14px}
.map-steps{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:8px}
.map-steps button{width:100%;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--line,#e1dfe8);border-radius:12px;padding:10px 14px;color:var(--ink,#191725);font:inherit;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.map-steps .film-txt{display:flex;flex-direction:column;gap:2px}
.map-steps small{color:var(--muted,#646273);font-size:13.5px;line-height:1.4}
.map-steps button:hover,.map-steps button:focus-visible{border-color:var(--purple,#5b2197);box-shadow:0 8px 22px rgba(60,20,110,.12)}
.map-steps button.active{border-color:var(--purple,#5b2197);background:#faf7fd;box-shadow:0 0 0 3px var(--lavender,#f0e7fa)}
.map-steps button.active b{color:var(--purple,#5b2197)}
.map-steps button.active .film-n,.map-steps button:hover .film-n{background:var(--purple,#5b2197);color:#fff}
.md-card .hd-steps button{font-size:12.5px;padding:8px 9px 7px}
@media(max-width:1150px){.hero-demo{margin:30px 25px 30px 0;padding:18px}}
@media(max-width:800px){.hero-demo{margin:0 24px 32px}}
@media(max-width:480px){.hero-demo{padding:14px;margin:0 14px 24px}.hd-head h2{font-size:18px}.hd-steps{gap:5px}.hd-steps button{font-size:11px;padding:7px 5px 6px;grid-template-columns:1fr}.hd-steps b{display:none}.hd-steps span{white-space:normal}}

/* correlation animation inside the "Explore the studio" card */
.corr-card{margin:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
.corr-card .hd-head .eyebrow{display:none}
.corr-card .hd-head h2{font-size:17px}
.corr-card .hd-stage{background:#fff}
.corr-card .hd-steps{margin:12px 0 10px}
.corr-card .hd-steps button{font-size:12.5px;padding:7px 8px 6px}
.hd-svg .hd-letter{font:800 15px system-ui,-apple-system,"Segoe UI",sans-serif}
#studioCorrelationImage.corr-card{background:transparent}