.story-opening{position:fixed;inset:0;z-index:1000;background:#faf9fa;overflow:auto;display:flex;align-items:center;justify-content:center;padding:65px 45px 75px}.intro-pending body>.story-opening{visibility:visible;opacity:1}.story-content{width:min(1240px,100%);margin:auto}.story-brand{font-size:25px;font-weight:600;letter-spacing:-.6px;display:flex;align-items:center;gap:7px;margin-bottom:25px}.story-brand>span{color:var(--red)}.story-brand small{font-size:12px;letter-spacing:1.8px;color:#a18e98;font-weight:400;margin-left:auto}.story-title{font-size:clamp(35px,4.5vw,66px);line-height:1.07;letter-spacing:-2px;font-weight:600;margin-bottom:45px}.story-title>div>span{display:inline-block}.story-title>div:last-child{color:var(--red)}.story-process{display:grid;grid-template-columns:1fr 145px 1.65fr;gap:30px;align-items:center;opacity:1;transition:opacity .5s,transform .7s}.story-label{font-size:12px;letter-spacing:1.3px;color:#96858f;margin-bottom:17px}.story-message{background:#fff;border:1px solid #e7dfe3;border-radius:12px;padding:20px;display:flex;align-items:start;gap:13px;min-height:145px}.story-avatar{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#f1e9ed;color:#a23938;font-size:12px}.story-message p{font-size:17px;line-height:1.5;margin:2px 0;color:#635962}.story-cursor{display:inline-block;width:1px;height:17px;background:#a23938;vertical-align:-2px;margin-left:2px;animation:story-caret .7s steps(2) infinite}.story-inputs{display:flex;gap:10px;margin-top:14px;color:#94838d;font-size:13px}.story-inputs span{padding:4px 9px;border:1px solid #e6dce1;border-radius:5px}.story-agent{text-align:center;position:relative}.story-agent-mark{display:grid;place-items:center;width:60px;height:60px;border-radius:15px;background:#a23938;color:white;margin:0 auto 13px;font-size:28px;box-shadow:0 0 0 7px #a2393808;transition:box-shadow .8s}.story-agent strong{display:block;font-size:17px;font-weight:600}.story-agent-note{display:block;font-size:13px;color:#9b8892;line-height:1.35;margin-top:5px;min-height:36px}.story-bridge{position:absolute;top:30px;left:-20px;right:-20px;border-top:1px solid #dac5ce;z-index:-1}.story-result{min-width:0;transition:opacity .5s}.story-graph{min-height:120px}.story-graph .workflow-graph{min-width:0!important;width:100%;height:auto}.story-graph .workflow-links{marker-end:url(#story-workflow-arrow)}.story-graph .node-name{font-size:19px}.story-proof{display:flex;flex-wrap:wrap;gap:8px 17px;font-size:14px;color:#a23938;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s}.story-closing{margin-top:32px;padding-top:20px;border-top:1px solid #e5dce2;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;display:flex;justify-content:space-between;align-items:center;gap:20px}.story-closing>span{font-size:12px;letter-spacing:1.3px;color:#a23938}.story-closing p{font-size:20px;color:#77646f;margin:0}.story-skip{position:fixed;right:30px;bottom:23px;border:1px solid #e0d4db;background:#ffffffc9;border-radius:30px;padding:10px 17px;font-size:14px;color:#88727f}.story-demo{position:fixed;left:45px;bottom:35px;font-size:12px;color:#a4929d}.story-opening[data-phase=title] .story-process{opacity:0;transform:translateY(15px)}.story-opening[data-phase=title] .story-agent,.story-opening[data-phase=request] .story-agent{opacity:.3}.story-opening[data-phase=title] .story-result,.story-opening[data-phase=request] .story-result{opacity:0}.story-opening[data-phase=building] .story-agent-mark{animation:story-thinking 1.3s ease-in-out infinite}.story-opening[data-phase=control] .story-proof,.story-opening[data-phase=control] .story-closing{opacity:1;transform:translateY(0)}.story-opening[data-phase=control] .story-cursor,.story-opening[data-phase=building] .story-cursor{display:none}.story-opening[data-phase=control] .type-group .node-tile,.story-opening[data-phase=control] .type-export .node-tile{stroke:#a23938;fill:#faf0f3;transition:fill .7s,stroke .7s}.intro-pending.intro-revealing body>.story-opening{animation:story-exit .75s ease forwards;pointer-events:none}.story-leaving .story-skip{visibility:hidden}@keyframes story-caret{to{opacity:0}}@keyframes story-thinking{50%{box-shadow:0 0 0 14px #a239380a}}@keyframes story-exit{to{opacity:0;transform:translateY(-12px)}}@media(max-width:950px){.story-opening{padding:45px 28px 75px}.story-process{grid-template-columns:1fr 110px;gap:20px}.story-result{grid-column:1/-1;max-width:650px;width:100%;justify-self:center}.story-title{font-size:43px;margin-bottom:25px}.story-graph .workflow-graph{max-height:190px}.story-brand{margin-bottom:20px}.story-message{min-height:110px}.story-closing{margin-top:22px;display:block}.story-closing p{margin-top:8px}.story-result .story-label{margin-bottom:0}}@media(max-width:580px){.story-opening{padding:27px 22px 75px;align-items:start}.story-brand{font-size:21px}.story-brand small{display:none}.story-title{font-size:32px;letter-spacing:-1px;line-height:1.12;margin-bottom:24px}.story-process{grid-template-columns:minmax(0,1fr) 72px;gap:18px 14px}.story-message{padding:13px;min-height:155px;gap:0}.story-avatar{display:none}.story-message p{font-size:16px}.story-label{font-size:12px;letter-spacing:.6px;margin-bottom:12px}.story-agent-mark{width:48px;height:48px;font-size:23px}.story-agent strong{font-size:14px}.story-agent-note{font-size:12px}.story-inputs{font-size:12px;gap:5px;flex-wrap:wrap}.story-inputs span{padding:3px 6px}.story-proof{font-size:13px;gap:6px 10px}.story-closing p{font-size:17px}.story-demo{left:22px;bottom:29px}.story-skip{right:20px;bottom:20px}.story-graph .node-name{font-size:21px}}@media(prefers-reduced-motion:reduce){.story-opening{display:none!important}}
/* The animation is now the actual hero, not a layer above a second hero. */
.story-opening.story-hero{position:relative;inset:auto;z-index:auto;display:block;overflow:visible;background:#fff;padding-top:38px;padding-bottom:38px;min-height:calc(100svh - 108px)}.story-hero .story-content{width:100%}.story-hero .eyebrow{margin-bottom:25px}.story-hero .story-title{margin-top:0}.story-title>span{display:block}.story-title>span>span{display:inline-block}.story-title>span:last-child{color:var(--red)}.story-hero .story-actions{display:flex;align-items:center;gap:23px;margin-top:27px}.story-hero .story-demo{position:static}.story-hero .story-closing{opacity:1;transform:none}.story-hero .story-proof{opacity:1;transform:none}.story-hero[data-phase=title] .story-closing,.story-hero[data-phase=request] .story-closing,.story-hero[data-phase=building] .story-closing,.story-hero[data-phase=title] .story-proof,.story-hero[data-phase=request] .story-proof,.story-hero[data-phase=building] .story-proof{opacity:0}.story-hero .story-agent{isolation:isolate}.story-hero .workflow-links{marker-end:url(#workflow-arrow)}.story-hero .story-cursor{display:none}.story-hero[data-phase=request] .story-cursor{display:inline-block}.story-start{min-width:180px}.story-hero .story-graph{overflow-x:auto}.story-hero .workflow-graph{min-width:540px!important}.story-hero .story-process{grid-template-columns:1fr 130px 1.8fr;gap:25px}@media(max-width:950px){.story-opening.story-hero{padding-top:30px;min-height:calc(100svh - 85px)}.story-hero .story-process{grid-template-columns:1fr 110px;gap:20px}.story-hero .story-result{max-width:none}.story-hero .workflow-graph{max-height:210px}}@media(max-width:580px){.story-opening.story-hero{padding:27px 22px 32px;min-height:0}.story-hero .story-process{grid-template-columns:minmax(0,1fr) 72px;gap:18px 14px}.story-hero .story-actions{gap:15px}.story-start{min-width:150px}.story-hero .story-demo{font-size:12px}.story-hero .story-title{font-size:32px}}@media(prefers-reduced-motion:reduce){.story-opening.story-hero{display:block!important}.story-opening.story-hero[hidden]{display:none!important}}
/* Explicit slogan colors, overriding the shared h1 > span accent. */
.story-hero h1.story-title>span{color:#242426}
.story-hero h1.story-title>span:last-child{color:var(--red)}
/* Programmatic scroll destination, not an interactive control. */
#control[tabindex="-1"]:focus{outline:none}
/* Keep the scenario at its original scale; expose the action beside the slogan. */
.story-opening.story-hero{display:flex;flex-direction:column;align-items:stretch}
.story-hero .story-content{display:contents}
.story-hero .eyebrow{order:0}
.story-hero .story-title{order:1;margin-bottom:22px}
.story-hero .story-actions{order:2;margin:0 0 32px}
.story-hero .story-process{order:3}
.story-hero .story-closing{order:4}
@media(prefers-reduced-motion:reduce){.story-opening.story-hero{display:flex!important}}

/* Let the opening flow naturally into the next section. */
.story-hero .story-title{margin-bottom:36px}
.story-hero .story-demo-caption{order:5;margin:20px 0 0;font-size:12px;color:#a4929d}
@media(max-width:580px){.story-hero .story-title{margin-bottom:26px}}