.max-system{--ink:#0e1320;--navy:#091d35;--blue:#3d6e9a;--muted:#587084;--line:#d5e2ec}
.max-system *{box-sizing:border-box}
.max-system{margin:0;background:#fff;color:var(--ink);font:16px/1.55 Satoshi,Arial,sans-serif}
.max-system button{font:inherit;cursor:pointer}
.max-system a{color:inherit;text-underline-offset:4px}
.max-system button:focus-visible,.max-system a:focus-visible{outline:3px solid #3d6e9a;outline-offset:5px}
.max-system .system-title,.max-system h2,.max-system p{margin:0}
.max-system .system-title,.max-system h2{font-weight:400;letter-spacing:-.045em;line-height:1.08}
.max-system .system-section{max-width:1440px;margin:auto;padding:64px 50px 0}
.max-system .intro{text-align:center}
.max-system .eyebrow{font-size:12px;color:var(--blue);letter-spacing:.025em;margin-bottom:20px}
.max-system .system-title{font-size:clamp(44px,5.2vw,74px)}
.max-system .system-title span{color:var(--blue)}
.max-system .intro-copy{color:var(--muted);font-size:17px;line-height:1.65;margin:25px auto 0;max-width:650px}
.max-system .stage-picker{display:flex;justify-content:center;gap:8px;margin:38px auto 50px;padding:6px;border:1px solid var(--line);border-radius:100px;width:fit-content;background:#f8fbfd}
.max-system .stage-picker button{padding:12px 22px;background:transparent;border:0;border-radius:100px;color:#506a7e;font-size:14px;white-space:nowrap;transition:background .18s,color .18s}
.max-system .stage-picker button span{margin-right:8px;opacity:.6;font-size:11px}
.max-system .stage-picker button[aria-pressed=true]{background:var(--navy);color:#fff}
.max-system .map-labels{display:grid;grid-template-columns:1fr 260px 1fr;gap:72px;color:#718698;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin:0 0 20px}
.max-system .map-labels span:nth-child(2){text-align:center}
.max-system .map-labels span:last-child{text-align:right}
.max-system .system-map{display:grid;grid-template-columns:1fr 260px 1fr;gap:72px;min-height:480px;position:relative;isolation:isolate}
.max-system .connections{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.max-system .connection{opacity:.3;transition:opacity .25s,stroke-width .25s}
.max-system .connection.active{opacity:1;stroke-width:2.5}
.max-system .node-column{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.max-system .node{background:#fff;border:1px solid #e1eaf1;border-radius:12px;min-height:124px;padding:23px 20px;display:flex;gap:15px;align-items:start;text-align:left;color:var(--ink);width:100%;box-shadow:0 3px 15px #163d6304;transition:border-color .2s,background .2s,box-shadow .2s}
.max-system .node.active{border-color:#89afcf;background:#f1f7fc;box-shadow:0 5px 20px #163d6308}
.max-system .node.selected{outline:2px solid #3d6e9a;outline-offset:3px}
.max-system .node:hover{border-color:#7ba7d4}
.max-system .node-icon{color:var(--blue);display:grid;place-items:center;width:30px;height:30px;flex:none;margin-top:1px}
.max-system .node-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.max-system .node strong{font-size:16px;font-weight:500;letter-spacing:-.02em;display:block;line-height:1.25;margin-bottom:7px}
.max-system .node small{font-size:12px;line-height:1.45;display:block;color:#587084}
.max-system .node em{font-size:10px;font-style:normal;display:block;margin-top:10px;color:#6a8296;line-height:1.45}
.max-system .brain{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.max-system .orb-wrap{width:220px;height:220px;position:relative;display:grid;place-items:center;isolation:isolate}
.max-system .orb-wrap:before{content:'';inset:2px;position:absolute;z-index:-1;background:radial-gradient(circle,#c9e4fa8c,transparent 70%)}
.max-system .orb-wrap img{width:163px;height:163px;object-fit:contain;filter:drop-shadow(0 10px 20px #3d6e9a14)}
.max-system .orbit{position:absolute;border:1px solid #b7cfe44d;border-radius:50%;width:198px;height:198px;z-index:-1}
.max-system .orbit-two{width:238px;height:238px;border-color:#b7cfe429}
.max-system .brain h3{font-size:32px;margin-top:0}
.max-system .brain p{font-size:15px;color:var(--blue);line-height:1.55;margin-top:12px;min-height:47px}
.max-system .brain-label{font-size:10px;color:#718698;margin-top:16px}
.max-system .map-hint{font-size:12px;color:#718698;text-align:center;margin:25px 0 45px}
.max-system .explanation{border-top:1px solid var(--line);padding:46px 0 64px;display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center;min-height:335px}
.max-system .explanation-copy h2{font-size:36px;line-height:1.15;margin-bottom:20px;max-width:550px}
.max-system .explanation-copy>p:last-child{font-size:15px;line-height:1.7;color:var(--muted);max-width:510px}
.max-system .example-panel{background:#f1f6fb;border:1px solid #dce7f0;border-radius:14px;padding:28px 30px;min-height:235px}
.max-system .example-top{display:flex;justify-content:space-between;gap:16px;color:var(--blue);font-size:11px;padding-bottom:17px;border-bottom:1px solid #d3e1ec;margin-bottom:20px}
.max-system .example-top span:last-child{font-size:10px;color:#738798}
.max-system .speaker{font-size:11px;color:#617e96;margin-bottom:7px}
.max-system blockquote{margin:0;font-size:20px;line-height:1.5;letter-spacing:-.015em}
.max-system blockquote strong{font-weight:500}
.max-system .framework{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.max-system .framework span{font-size:10px;color:#42637e;padding:5px 9px;border:1px solid #c7d8e6;border-radius:5px}
.max-system .framework .open{background:var(--navy);color:white;border-color:var(--navy)}
.max-system .example-row{display:flex;justify-content:space-between;gap:22px;padding:11px 0;border-bottom:1px solid #d3e1ec;font-size:13px}
.max-system .example-row:last-child{border:0;padding-bottom:0}
.max-system .example-row>span:first-child{color:#61788e}
.max-system .example-row strong{font-weight:500;text-align:right}
.max-system .example-heading{font-size:23px;letter-spacing:-.02em;margin-bottom:12px}
.max-system .example-list{padding:0;list-style:none;margin:0;color:#435f76;font-size:14px}
.max-system .example-list li{padding:10px 0;border-bottom:1px solid #d3e1ec}
.max-system .example-list li:last-child{border:0}
.max-system .takeaway{background:#f1f6fb;padding:70px max(50px,calc((100vw - 1340px)/2));margin-top:0}
.max-system .takeaway h2{font-size:clamp(35px,4vw,53px)}
.max-system .takeaway h2 span{color:var(--blue)}
.max-system .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:42px}
.max-system .benefits strong{font-weight:500;font-size:16px}
.max-system .benefits p{font-size:14px;color:var(--muted);line-height:1.7;margin-top:10px;max-width:320px}
@media(max-width:1150px){.max-system .system-section{padding:50px 30px 0}
.max-system .system-map,.max-system .map-labels{grid-template-columns:1fr 190px 1fr;gap:35px}
.max-system .node{padding:20px 15px;gap:10px}
.max-system .node strong{font-size:15px}
.max-system .node-icon{width:25px}
.max-system .node em{font-size:9px}
.max-system .orb-wrap{width:190px;height:210px}
.max-system .orb-wrap img{width:145px;height:145px}
.max-system .orbit{width:175px;height:175px}
.max-system .orbit-two{width:210px;height:210px}
.max-system .explanation{gap:45px}
.max-system .explanation-copy h2{font-size:33px}
}
@media(max-width:800px){.max-system .system-section{padding:40px 24px 0}
.max-system .intro .system-title{font-size:48px}
.max-system .intro-copy{font-size:15px}
.max-system .intro-copy br{display:none}
.max-system .stage-picker{border-radius:12px;width:100%;gap:3px;padding:5px;margin:30px 0}
.max-system .stage-picker button{flex:1;border-radius:8px;white-space:normal;font-size:12px;padding:11px 7px;line-height:1.4}
.max-system .stage-picker button span{display:block;margin:0 0 4px}
.max-system .map-labels{display:none}
.max-system .system-map{display:flex;flex-direction:column;gap:14px;min-height:0}
.max-system .connections{display:none}
.max-system .node-column{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.max-system .node{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 10px;min-height:135px;border-radius:10px;gap:9px}
.max-system .node strong{font-size:13px;margin-bottom:5px}
.max-system .node small{font-size:11px}
.max-system .node em{display:none}
.max-system .node-icon{width:24px;height:24px}
.max-system .node-icon svg{width:22px;height:22px}
.max-system .brain{padding:20px 0;position:relative}
.max-system .brain:before,.max-system .brain:after{content:'';height:24px;width:1px;background:#acc7df;position:absolute;left:50%}
.max-system .brain:before{top:-13px}
.max-system .brain:after{bottom:-13px}
.max-system .orb-wrap{height:130px;width:150px}
.max-system .orb-wrap img{width:120px;height:120px}
.max-system .orbit{width:132px;height:132px}
.max-system .orbit-two{width:158px;height:158px}
.max-system .brain h3{font-size:25px;margin-top:12px}
.max-system .brain p{font-size:13px;min-height:0;margin-top:8px}
.max-system .brain-label{display:none}
.max-system .explanation{grid-template-columns:1fr;gap:27px;padding:35px 0 45px}
.max-system .map-hint{font-size:11px;margin:22px 0 30px}
.max-system .explanation-copy h2{font-size:32px}
.max-system .example-panel{padding:23px}
.max-system .takeaway{padding:48px 24px}
.max-system .takeaway h2{font-size:36px}
.max-system .benefits{grid-template-columns:1fr;gap:25px;margin-top:30px}
.max-system .benefits p{max-width:none}
}
@media(max-width:400px){.max-system .system-section{padding-left:18px;padding-right:18px}
.max-system .intro .system-title{font-size:42px}
.max-system .node-column{gap:7px}
.max-system .node{padding:13px 7px}
.max-system .node strong{font-size:12px}
.max-system .node small{font-size:10px}
.max-system .stage-picker button{font-size:11px}
.max-system .example-panel{padding:20px}
.max-system blockquote{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.max-system *,.max-system *::before,.max-system *::after{transition:none!important;animation:none!important}
}

/* Concentric circles share one square SVG coordinate system at every breakpoint. */
.max-system .system-section{padding-top:100px;padding-bottom:0}
.max-system .system-title{font-family:Satoshi,system-ui,sans-serif}
.max-system h3{margin:0;font-family:Satoshi,system-ui,sans-serif;font-weight:400;line-height:1.1;letter-spacing:-.035em}
.max-system .orb-wrap{width:240px;height:240px;aspect-ratio:1;flex:none}
.max-system .orb-wrap:before{inset:22px;border-radius:50%;background:radial-gradient(circle,#dbeaf675,transparent 70%)}
/* Compensate for the original PNG’s asymmetric transparent padding (163×180). */
.max-system .orb-wrap img{position:absolute;inset:50% auto auto 50%;transform:translate(-53.89%,-41.67%);width:164px;height:164px;filter:none}
.max-system .orb-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.max-system .orb-rings circle{stroke:#8dafcc;stroke-width:1;vector-effect:non-scaling-stroke}
.max-system .orb-rings circle:first-child{opacity:.48}
.max-system .orb-rings circle:last-child{opacity:.25}
.max-system .brain h3{margin-top:12px;font-size:32px}
.max-system .system-section .intro{padding:0;margin:0;display:block}
.max-system .node{font-family:Satoshi,system-ui,sans-serif}
.max-system .stage-picker button{font-family:Satoshi,system-ui,sans-serif}
.max-system .system-section .brain p{margin-bottom:0}
.max-system .takeaway{padding:64px 50px;margin-bottom:36px}
.max-system .example-more{margin-top:20px;padding-top:16px;border-top:1px solid #d3e1ec;font-size:13px;color:#435f76}
.max-system .example-more summary{cursor:pointer;color:#3d6e9a;font-weight:500}
.max-system .example-more p{margin-top:12px;line-height:1.6}
.max-system .example-more strong{font-weight:500}
@media(max-width:1150px){.max-system .orb-wrap{width:204px;height:204px}.max-system .orb-wrap img{width:140px;height:140px}}
@media(max-width:800px){.max-system .system-section{padding-top:64px}.max-system .orb-wrap{width:168px;height:168px}.max-system .orb-wrap img{width:116px;height:116px}.max-system .brain h3{font-size:25px;margin-top:12px}.max-system .takeaway{padding:48px 24px;margin-bottom:0}}

/* Compact moment selector between the diagram and its example. */
.max-system .map-labels{margin-top:42px}
.max-system .stage-picker{margin:24px auto 30px;gap:3px;padding:4px;max-width:100%}
.max-system .stage-picker button{padding:9px 15px;font-size:12px;line-height:1.35}
.max-system .stage-picker button span{font-size:10px;margin-right:5px}
@media(max-width:800px){
 .max-system .system-map{margin-top:30px}
 .max-system .stage-picker{width:fit-content;border-radius:100px;gap:2px;margin:20px auto 24px}
 .max-system .stage-picker button{border-radius:100px;padding:9px 11px;font-size:11px}
 .max-system .stage-picker button span{display:none}
}