/* A real, editable MLM placement diagram. Banner only. */
.hero-art{min-width:0;min-height:570px;display:flex;align-items:center;justify-content:center;padding:10px 0 10px 8px;perspective:none}
.banner-tree{width:100%;max-width:610px;min-width:0;position:relative;background:linear-gradient(150deg,#fcfdfe 0%,#eff3f8 100%);border:1px solid #ccd5e3;border-radius:25px;box-shadow:0 28px 70px #262e390d,0 2px 4px #262e3903;padding:24px 22px 16px;overflow:hidden;font-family:'Space Grotesk',Arial,sans-serif;--tree-motion:paused}
.banner-tree:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 30%,#b8cff23b,transparent 50%)}
.tree-topline{position:relative;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#5e718d;gap:8px}.tree-topline>span:first-child{display:flex;align-items:center;gap:7px}.tree-topline i{height:5px;width:5px;background:#577db5;border-radius:50%;box-shadow:0 0 0 4px #577db512}.tree-demo-badge{font-size:7px;letter-spacing:1px;border:1px solid #c3cede;padding:4px 7px;border-radius:5px;background:#eef2f8}
.tree-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 19px}.tree-heading h2{font-size:29px;line-height:1.14;letter-spacing:-1.4px;font-weight:500}.tree-heading h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#38537b}.tree-heading p{font:10px Arial,sans-serif;color:#617592;margin-top:9px;line-height:1.6}.tree-heading-icon{display:grid;place-items:center;width:45px;height:45px;border:1px solid #ced8e7;background:#e9eef5;transform:rotate(-8deg);border-radius:12px;flex:none;color:#50688b}.tree-heading-icon svg{height:27px;width:27px}
.tree-canvas-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #d2dae7;border-bottom:1px solid #dbe1eb;gap:6px}.tree-plan-label{font-size:8px;letter-spacing:1.3px;color:#5c6e8a}.tree-tools{display:flex;align-items:center;gap:3px}.tree-tools button{border:1px solid #c8d2e1;border-radius:6px;background:#fafbfd;color:#374963;width:26px;height:25px;font-size:16px;display:grid;place-items:center;line-height:1}.tree-tools button:hover{background:#d7e0ee}.tree-tools button:disabled{opacity:.35;cursor:default}.tree-tools .tree-fit{width:auto;font:9px 'Space Grotesk',Arial,sans-serif;padding:0 9px;margin-left:4px}.tree-zoom-label{font-size:8px;width:35px;text-align:center;color:#5c6e8a}
.tree-viewport{height:350px;width:100%;overflow:auto;position:relative;background-image:radial-gradient(#8092ae37 .7px,transparent .7px);background-size:17px 17px;cursor:grab;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b9c5d8 transparent;outline-offset:-3px}.tree-viewport.is-dragging{cursor:grabbing;user-select:none}.tree-space{position:relative;min-width:100%;min-height:100%}.tree-layer{position:absolute;left:0;top:0;transform-origin:0 0}.tree-connectors{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}.tree-connectors path{fill:none;stroke:#9eafc8;stroke-width:1.6;stroke-linecap:round}.tree-connectors path.is-traced{stroke:#4970aa;stroke-width:2.5;stroke-dasharray:5 7;animation:tree-flow 2s linear infinite;animation-play-state:var(--tree-motion)}
.tree-node{position:absolute;left:0;top:0;width:112px;height:78px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tree-person{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:78px;background:#fcfdfe;border:1px solid #c7d1e0;border-radius:11px;box-shadow:0 5px 12px #2e37450b;color:#262d38;padding:8px 5px;cursor:pointer;transition:box-shadow .2s,border-color .2s,background .2s}
.tree-person:hover,.tree-node.is-current .tree-person{background:#f4f6fa;border-color:#6584b3;box-shadow:0 7px 15px #353f4f12}.tree-person:focus-visible,.tree-add:focus-visible{outline:2px solid #416396;outline-offset:3px}
.tree-avatar{display:grid;place-items:center;height:25px;width:25px;background:#e7edf5;border:1px solid #cfdaeb;border-radius:50%;color:#4e6588;font-size:9px;font-weight:600;margin-bottom:5px}.tree-person strong{font-size:12px;line-height:1.2;letter-spacing:-.3px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-person small{font:8px Arial,sans-serif;color:#7083a0;margin-top:4px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tree-status{position:absolute;right:9px;top:9px;width:4px;height:4px;border-radius:50%;background:#5178b3;box-shadow:0 0 0 3px #5178b310}.tree-status.pending{background:#c4a35d;box-shadow:0 0 0 3px #c4a35d10}
.tree-root .tree-person{background:#272f3a;color:#eff3f8;border-color:#3d495b;box-shadow:0 7px 18px #272f3a1a}.tree-root .tree-avatar{background:#36455b;border-color:#485b78;color:#98baed;border-radius:8px}.tree-root .tree-person small{color:#b4c0d3}.tree-root .tree-person:hover{background:#323c4a;border-color:#5c79a5}
.tree-add{position:absolute;top:79px;left:36px;width:40px;height:38px;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer;z-index:3}.tree-add span{display:grid;place-items:center;background:#ecf0f7;border:1px solid #aabfde;border-radius:50%;width:24px;height:24px;font:19px Arial,sans-serif;color:#496b9d;box-shadow:0 0 0 4px #f2f5f9;transition:background .2s,transform .2s}.tree-add:hover span{background:#77a9f4;transform:scale(1.12);color:#303947}.tree-add:disabled{opacity:.4;cursor:default}.tree-node.is-new .tree-person{animation:tree-added .45s ease-out both}
.tree-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #d1dae8;padding:12px 0 9px;color:#586a84;font-size:9px}.tree-summary b{color:#333d4c;font-weight:500}.tree-summary i,.tree-hint i{font-style:normal;margin:0 5px;color:#95a3b9}.tree-summary button{background:none;border:0;font:8px 'Space Grotesk',Arial,sans-serif;color:#657997;padding:4px 0;cursor:pointer}.tree-summary button:hover{color:#333d4c}.tree-summary button span{font-size:12px;margin-left:4px}
.tree-footer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:9px;padding-top:4px;flex-wrap:wrap}.tree-hint{font-size:8px;color:#637794}.tree-hint>span{font-size:12px;color:#4d6fa1;margin-right:3px}.tree-footer small{font:7px Arial,sans-serif;color:#8292ab}.tree-noscript{font-size:10px;color:#5c6e89;padding-top:12px}.tree-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tree-member-dialog{width:min(440px,calc(100vw - 30px));max-height:calc(100dvh - 30px);border:1px solid #c9d4e5;border-radius:22px;background:#f8fafc;color:#272f3a;padding:0;box-shadow:0 25px 100px #171c2335;font-family:'Space Grotesk',Arial,sans-serif;margin:auto;overflow:auto}.tree-member-dialog::backdrop{background:#1b212966;backdrop-filter:blur(5px)}.tree-dialog-body{padding:30px}.tree-dialog-close{position:absolute;top:15px;right:15px;border:1px solid #d3dbe7;border-radius:50%;background:#eef2f8;color:#596b86;width:28px;height:28px;font:20px Arial,sans-serif;cursor:pointer}.tree-dialog-eyebrow{font-size:8px;letter-spacing:1.7px;color:#6f829f}.tree-dialog-body h2{font-size:30px;letter-spacing:-1.2px;font-weight:500;margin:13px 0 9px}.tree-dialog-context{font:12px Arial,sans-serif;color:#647895;line-height:1.7;margin-bottom:22px}
.tree-member-form label{display:block;font-size:11px;line-height:1.6;margin-bottom:15px;color:#465468}.tree-member-form label>span{color:#8091aa;font-size:9px}.tree-member-form input:not([type=radio]),.tree-member-form select{display:block;width:100%;margin-top:6px;border:1px solid #c9d3e2;border-radius:8px;background:#fefefd;font:12px 'Space Grotesk',Arial,sans-serif;padding:11px 12px;color:#303a49;box-sizing:border-box;min-width:0}.tree-member-form input::placeholder{color:#91a0b6;font-size:11px}.tree-member-form input:focus,.tree-member-form select:focus{outline:2px solid #7d9bc7;outline-offset:2px}.tree-form-row{display:grid;grid-template-columns:1.3fr 1fr;gap:13px}.tree-placement{border:1px solid #d5dde8;border-radius:9px;padding:12px;display:flex;gap:16px;margin-top:5px}.tree-placement legend{font-size:10px;color:#637795;padding:0 5px}.tree-placement label{display:flex;align-items:center;gap:7px;margin:0}.tree-placement input{accent-color:#3e6094}.tree-placement label:has(input:disabled){opacity:.4}.tree-form-error{font:11px Arial,sans-serif;color:#9a4539;margin:12px 0;line-height:1.6}.tree-form-error:empty{margin:8px 0}.tree-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.tree-dialog-actions button{border:1px solid #cad4e2;border-radius:8px;font:11px 'Space Grotesk',Arial,sans-serif;padding:11px 14px;cursor:pointer;background:transparent;color:#5f728e}.tree-dialog-actions .tree-submit{background:#77a9f4;border-color:#6e9ce0;color:#28303c;display:flex;align-items:center;gap:15px}.tree-dialog-actions .tree-submit:hover{background:#6f9fe6}.tree-dialog-note{font:9px Arial,sans-serif;color:#7c8ea8;line-height:1.6;margin-top:17px}.tree-reset-confirm>p{font:13px Arial,sans-serif;line-height:1.8;color:#5f728f}
.tree-member-dialog [hidden]{display:none!important}
.tree-viewport:focus-visible{outline:2px solid #6988b6}
@media(max-width:680px){.tree-member-form input:not([type=radio]),.tree-member-form select{font-size:16px}}
@keyframes tree-flow{to{stroke-dashoffset:-24}}@keyframes tree-added{from{opacity:.3;box-shadow:0 0 0 12px #77a9f466}to{opacity:1;box-shadow:0 5px 12px #2e37450b}}
@media(min-width:1440px){.hero-art{min-height:610px}.tree-viewport{height:370px}.banner-tree{padding:27px 25px 19px}.tree-heading h2{font-size:32px}}
@media(min-width:681px) and (max-width:1000px){.hero-art{min-height:510px;padding-left:0}.banner-tree{padding:18px 13px 14px;border-radius:19px}.tree-heading h2{font-size:24px}.tree-heading-icon{height:35px;width:35px}.tree-heading-icon svg{width:23px;height:23px}.tree-viewport{height:300px}.tree-topline{font-size:6px;letter-spacing:1px}.tree-demo-badge{font-size:6px}.tree-heading p{font-size:8px}.tree-plan-label{font-size:6px;letter-spacing:.7px}.tree-tools button{width:22px;height:22px}.tree-tools .tree-fit{padding:0 6px}.tree-footer{gap:5px}.tree-hint{font-size:6px}.tree-footer small{font-size:6px}}
@media(max-width:680px){.hero-art{min-height:0;max-height:none;margin:33px 0 28px;padding:0;display:block}.banner-tree{padding:20px 15px 15px;border-radius:21px}.tree-heading h2{font-size:28px}.tree-heading p{font-size:9px}.tree-viewport{height:335px}.tree-topline{font-size:7px;letter-spacing:1.1px}.tree-plan-label{font-size:7px;letter-spacing:1px}.tree-heading{padding:19px 0}.tree-heading-icon{width:38px;height:38px}.tree-heading-icon svg{height:24px;width:24px}.tree-footer small{font-size:7px}.tree-dialog-body{padding:26px 23px}.tree-dialog-body h2{font-size:28px}}

/* Keep the interactive demo readable without crowding its network layout. */
.tree-topline,.tree-plan-label{font-size:10px}.tree-demo-badge{font-size:9px}.tree-heading p{font-size:12px}.tree-tools .tree-fit,.tree-zoom-label{font-size:10px}.tree-person strong{font-size:13px}.tree-person small{font-size:10px}.tree-summary{font-size:11px}.tree-summary button,.tree-hint{font-size:10px}.tree-footer small{font-size:9px}.tree-dialog-eyebrow{font-size:10px}.tree-dialog-context{font-size:14px}.tree-member-form label{font-size:13px}.tree-member-form label>span,.tree-dialog-note{font-size:11px}.tree-member-form input:not([type=radio]),.tree-member-form select{font-size:14px}.tree-dialog-actions button{font-size:13px}
@media(max-width:680px){.tree-topline,.tree-plan-label{font-size:9px}.tree-heading p{font-size:11px}.tree-footer small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.tree-node{transition:none}.tree-node.is-new .tree-person,.tree-connectors path.is-traced{animation:none}.tree-add span{transition:none}}
/* Ambient network activity keeps every click target in a fixed position. */
.banner-tree:before{inset:-12%;background:radial-gradient(ellipse at 85% 30%,#b8cff24d,transparent 50%);animation:tree-atmosphere 12s ease-in-out infinite;animation-play-state:var(--tree-motion)}
.tree-topline i{animation:tree-live 4.8s ease-in-out infinite;animation-play-state:var(--tree-motion)}
.tree-node{z-index:2}
.tree-signal-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.tree-signal{display:none;position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#6a95d6;box-shadow:0 0 0 3px #6a95d61a,0 0 8px #5d8ace55;offset-distance:0;offset-rotate:0deg;animation:tree-transmit 5.8s linear infinite;animation-delay:var(--route-delay,0s);animation-play-state:var(--tree-motion)}
@supports(offset-path:path('M0 0 L1 1')){.tree-signal{display:block}}
.tree-signal.is-traced{background:#456da8;box-shadow:0 0 0 4px #6a95d622,0 0 10px #4e7dc366;width:6px;height:6px;animation-duration:3.8s}
.tree-add span{position:relative}
.tree-add span:after{content:'';position:absolute;inset:-4px;border:1px solid #6e90c3;border-radius:50%;pointer-events:none;opacity:0;animation:tree-invitation 4.6s ease-out infinite;animation-delay:var(--node-delay,0ms);animation-play-state:var(--tree-motion)}
.tree-add:disabled span:after,.tree-add:hover span:after{animation:none;opacity:0}
.tree-status.active:after{content:'';position:absolute;inset:-3px;border:1px solid #6c8bb9;border-radius:50%;pointer-events:none;animation:tree-status-pulse 6s ease-out infinite;animation-delay:var(--node-delay,0ms);animation-play-state:var(--tree-motion)}
.tree-root .tree-person:before{content:'';position:absolute;inset:-6px;border:1px solid #7490bb2e;border-radius:16px;pointer-events:none;animation:tree-core-breathe 5.8s ease-in-out infinite;animation-play-state:var(--tree-motion)}
.tree-node.is-intro .tree-person{animation:tree-introduce .7s ease-out both;animation-delay:var(--node-delay,0ms);animation-play-state:var(--tree-motion)}
.tree-node.is-new .tree-person{animation:tree-member-arrive 1.1s cubic-bezier(.16,1,.3,1) both;animation-play-state:var(--tree-motion)}
html:not([data-motion-paused=true]) .tree-member-dialog[open] .tree-dialog-body{animation:tree-dialog-in .22s ease-out both}
html[data-motion-paused=true] .tree-node.is-intro .tree-person,html[data-motion-paused=true] .tree-node.is-new .tree-person{animation:none}
@keyframes tree-transmit{0%{offset-distance:0%;opacity:0}12%{opacity:.85}85%{opacity:.85}100%{offset-distance:100%;opacity:0}}
@keyframes tree-invitation{0%,20%{transform:scale(.88);opacity:0}30%{opacity:.6}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes tree-status-pulse{0%,15%{transform:scale(.8);opacity:0}25%{opacity:.55}60%,100%{transform:scale(1.8);opacity:0}}
@keyframes tree-core-breathe{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:1;transform:scale(1.025)}}
@keyframes tree-live{0%,100%{box-shadow:0 0 0 3px #577db510}50%{box-shadow:0 0 0 6px #577db51c}}
@keyframes tree-atmosphere{0%,100%{transform:translate(-2%,1%);opacity:.55}50%{transform:translate(2%,-1%);opacity:1}}
@keyframes tree-introduce{from{box-shadow:0 0 0 5px #77a9f433;border-color:#7a97c3}to{box-shadow:0 5px 12px #2e37450b}}
@keyframes tree-member-arrive{0%{transform:scale(.94);box-shadow:0 0 0 12px #77a9f455}45%{transform:scale(1.025);box-shadow:0 0 0 6px #77a9f422}100%{transform:scale(1);box-shadow:0 5px 12px #2e37450b}}
@keyframes tree-dialog-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.banner-tree:before,.tree-topline i,.tree-signal,.tree-add span:after,.tree-status.active:after,.tree-root .tree-person:before,.tree-node.is-intro .tree-person,.tree-node.is-new .tree-person,html:not([data-motion-paused=true]) .tree-member-dialog[open] .tree-dialog-body{animation:none!important}.tree-signal{display:none}.tree-add span:after,.tree-status.active:after{opacity:0}}