
.zs-hero{--purple:#7950cf;--ink:#252130;--muted:#716c7d;--line:#ded5eb;--paper:#faf9f5}.zs-hero *{box-sizing:border-box}.zs-hero{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}.zs-hero button,.zs-hero a{-webkit-tap-highlight-color:transparent}.zs-hero button{font:inherit;cursor:pointer}.zs-hero a{color:inherit}.zs-hero .word{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;font-size:32px;letter-spacing:-.03em;white-space:nowrap;line-height:1}.zs-hero .zen{background:oklch(.55 .19 292);color:oklch(.99 0 0);padding:.04em .24em;border-radius:.2em}.zs-hero .sibly{margin-left:.1em;color:oklch(.27 .022 286)}.zs-hero{max-width:1440px;margin:auto;padding:64px 40px 32px;display:grid;grid-template-columns: .88fr 1.12fr;gap:68px;align-items:center}.zs-hero .eyebrow{font-size:12px;letter-spacing:.07em;color:var(--purple);font-weight:700}.zs-hero h1{font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(44px,4.8vw,72px);letter-spacing:-.04em;line-height:1.12;margin:24px 0 30px}.zs-hero h1 span{color:var(--purple)}.zs-hero .intro{font-size:19px;line-height:1.7;color:var(--muted);max-width:490px}.zs-hero .actions{display:flex;gap:12px;margin:36px 0 20px;flex-wrap:wrap}.zs-hero .cta{padding:16px 22px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid var(--line);font-size:15px}.zs-hero .primary{background:var(--purple);color:white;border-color:var(--purple)}.zs-hero .companion{font-size:13px;color:var(--muted)}.zs-hero .stage{position:relative;isolation:isolate}.zs-hero .stage h2{font-size:24px;margin:0 0 24px;letter-spacing:-.02em}.zs-hero .diagram{position:relative;padding:0 16px}.zs-hero .cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.zs-hero .card{border:1px solid var(--line);border-radius:18px;background:white;padding:17px;min-height:150px;position:relative;transition:transform .5s,box-shadow .5s,border-color .5s,background .5s}.zs-hero .card.active{transform:translateY(-3px);border-color:var(--purple);box-shadow:0 8px 25px #7950cf20;background:#f7f2ff}.zs-hero .card.resolved{border-color:#82aa90;background:#f7fbf7}.zs-hero .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.zs-hero .icon{width:29px;height:29px;border-radius:9px;background:#f0eaf8;color:var(--purple);display:grid;place-items:center;font-size:21px}.zs-hero .number{font-size:11px;color:var(--muted)}.zs-hero .card h3{font-size:17px;line-height:1.3;letter-spacing:-.015em;margin:0}.zs-hero .status{min-height:18px;margin:12px 0 0;color:#346449;font-size:12px;opacity:0;transition:opacity .5s}.zs-hero .resolved .status{opacity:1}.zs-hero .connectors{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}.zs-hero .track{fill:none;stroke:#e5deed;stroke-width:1.3}.zs-hero .flow{fill:none;stroke:var(--purple);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease}.zs-hero .linked .flow{stroke-dashoffset:0}.zs-hero .setup{position:relative;text-align:center;margin:26px auto 18px;color:var(--purple);font-weight:700;font-size:16px;opacity:.3;transition:opacity .7s}.zs-hero .setup span{background:var(--paper);padding:6px 10px}.zs-hero .show-setup .setup{opacity:1}.zs-hero .hub{width:146px;height:146px;border:1px solid var(--line);outline:8px solid var(--paper);border-radius:50%;margin:36px auto 32px;background:white;display:grid;place-items:center;transition:box-shadow 1s,border-color 1s;position:relative}.zs-hero .hub .word{font-size:27px}.zs-hero .linked .hub{border-color:var(--purple);box-shadow:0 0 0 9px #7950cf12,0 0 40px #7950cf20}.zs-hero .hub:after{content:'';position:absolute;top:100%;height:32px;width:2px;background:var(--line)}.zs-hero .enforced .hub:after{background:var(--purple)}.zs-hero .outcome{padding:17px 10px;background:var(--purple);color:white;text-align:center;font-size:21px;font-weight:700;border-radius:15px;opacity:.18;transform:translateY(8px);transition:opacity .7s,transform .7s}.zs-hero .enforced .outcome{opacity:1;transform:none}.zs-hero .benefit{text-align:center;font-weight:700;font-size:22px;margin:21px 0 0;opacity:.15;transition:opacity .8s}.zs-hero .complete .benefit{opacity:1}.zs-hero .note{font-size:11px;line-height:1.6;color:var(--muted);margin:26px 16px 15px}.zs-hero .controls{display:flex;align-items:center;gap:8px;margin:0 16px;flex-wrap:wrap}.zs-hero .controls button{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--ink)}.zs-hero .controls button:hover{background:#f0eaf8}.zs-hero .progress{height:3px;background:#e9e3ef;margin:16px;border-radius:4px;overflow:hidden}.zs-hero .progress div{height:100%;width:0;background:var(--purple)}.zs-hero .phase{margin-left:auto;font-size:11px;color:var(--muted)}.zs-hero :focus-visible{outline:3px solid var(--purple);outline-offset:4px}@media(max-width:850px){.zs-hero{display:block;padding:32px 24px}.zs-hero .copy{max-width:610px;margin:0 auto 52px}.zs-hero h1{font-size:52px}.zs-hero .intro{font-size:17px}.zs-hero .stage{max-width:650px;margin:auto}.zs-hero .stage h2{font-size:23px}.zs-hero .card h3{font-size:16px}}@media(max-width:440px){.zs-hero{padding:30px 16px}.zs-hero .diagram{padding:0 12px}.zs-hero .cards{gap:10px}.zs-hero .card{padding:12px;min-height:166px}.zs-hero .card h3{font-size:15px}.zs-hero .status{font-size:11px}.zs-hero .stage h2{font-size:21px;margin-left:12px}.zs-hero h1{font-size:43px}.zs-hero .setup{font-size:13px}.zs-hero .hub{width:126px;height:126px}.zs-hero .hub .word{font-size:24px}.zs-hero .outcome{font-size:18px}.zs-hero .benefit{font-size:20px}.zs-hero .actions .cta{flex:1;text-align:center}.zs-hero .phase{width:100%;margin:4px 0 0}.zs-hero .companion{font-size:12px}}@media(prefers-reduced-motion:reduce){.zs-hero *,.zs-hero *:before,.zs-hero *:after{transition:none!important;animation:none!important}}

/* Sequential presentation: empty positions stay reserved, so the layout never jumps. */
.zs-hero .stage{min-height:750px}.zs-hero .stage h2{transform-origin:center;will-change:transform,opacity;position:relative;z-index:4}.zs-hero .card{will-change:transform,opacity;transition:background .6s,border-color .6s,box-shadow .6s;opacity:0}.zs-hero .card.active{background:#f7f2ff}.zs-hero .card.resolved{box-shadow:0 5px 20px #34644916}.zs-hero .card h3{transition:color .6s}.zs-hero .resolved h3{color:#34483b}.zs-hero .status{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;transition:none;transform-origin:left center}.zs-hero .status:before{content:'✓';border-radius:50%;background:#e0f0e4;color:#25613a;width:19px;height:19px;display:grid;place-items:center;flex-shrink:0}.zs-hero .setup,.zs-hero .hub,.zs-hero .outcome,.zs-hero .benefit{opacity:0;transition:none}.zs-hero .hub{will-change:transform,opacity}.zs-hero .hub:after{display:none}.zs-hero .flow{transition:none;opacity:0}.zs-hero .track{opacity:0}.zs-hero .interlude{position:absolute;top:185px;left:0;right:0;text-align:center;font-family:'Space Grotesk','DM Sans',sans-serif;font-size:36px;font-weight:700;color:var(--purple);opacity:0;pointer-events:none;z-index:5}.zs-hero .controls{margin-top:18px}.zs-hero .note{visibility:hidden}.zs-hero .complete .note{visibility:visible}.zs-hero .hub-caption{text-align:center;font-size:12px;color:var(--purple);position:absolute;top:calc(100% + 8px);width:240px;left:50%;transform:translateX(-50%);font-weight:700}.zs-hero .setup span{display:inline-block}.zs-hero .outcome{margin-top:12px}.zs-hero .diagram{overflow:visible}@media(max-width:440px){.zs-hero .interlude{font-size:27px;top:175px}.zs-hero .status{font-size:12px}.zs-hero .stage{min-height:820px}.zs-hero .card{min-height:180px}.zs-hero .stage h2{font-size:20px}.zs-hero .card h3{font-size:15px}}

.zs-hero .stage h2{height:60px;display:block;margin-bottom:24px;transform-origin:center center}.zs-hero .stage h2 span{white-space:nowrap}.zs-hero .hub{outline:none}.zs-hero .connectors{z-index:2;pointer-events:none}.zs-hero .card{z-index:3}.zs-hero .setup,.zs-hero .hub{z-index:3}.zs-hero .setup{width:max-content;max-width:100%}@media(max-width:440px){.zs-hero .stage h2{height:54px}}

/* User-approved copy and layout correction within v12; animation unchanged. */
.zs-hero .copy{container-type:inline-size}.zs-hero h1{font-size:clamp(30px,11cqw,72px)}.zs-hero h1 .headline-first{color:var(--ink);white-space:nowrap}.zs-hero .intro-steps{list-style:none;counter-reset:steps;padding:0;margin:0;max-width:510px}.zs-hero .intro-steps li{counter-increment:steps;display:flex;align-items:flex-start;gap:12px;margin:0 0 17px;line-height:1.55}.zs-hero .intro-steps li:before{content:counter(steps);display:grid;place-items:center;flex:0 0 27px;height:27px;background:#f0eaf8;border-radius:50%;color:var(--purple);font-size:14px;font-weight:700;margin-top:2px}@media(max-width:440px){.zs-hero h1{font-size:11cqw}.zs-hero .intro-steps{font-size:16px}.zs-hero .intro-steps li{gap:10px}}

.zs-hero .controls{position:absolute;right:0;top:-43px;margin:0;gap:6px;z-index:10}.zs-hero .controls button{display:grid;place-items:center;width:29px;height:29px;padding:0;font-size:13px;border-radius:50%;background:var(--paper);color:var(--muted);border:1px solid var(--line)}.zs-hero .controls button:hover{color:var(--purple);border-color:var(--purple)}.zs-hero .stage{min-height:0}.zs-hero .benefit{margin-bottom:0}@media(max-width:850px){.zs-hero .copy{margin-bottom:70px}}@media(max-width:440px){.zs-hero .stage{min-height:0}}

.zs-hero{line-height:normal;border-radius:0;overflow:hidden}.zs-hero .eyebrow{display:block}.zs-hero .intro-steps li{font-size:inherit}.zs-hero:not(.hero-animated) .card,.zs-hero:not(.hero-animated) .setup,.zs-hero:not(.hero-animated) .hub,.zs-hero:not(.hero-animated) .outcome,.zs-hero:not(.hero-animated) .benefit{opacity:1}.zs-hero:not(.hero-animated) .controls{display:none}
