/* Focused revision of the Before/After comparison. */
.clarity-page{grid-template-columns:minmax(290px,.72fr) minmax(620px,1.28fr);gap:32px}
.cl-board{grid-template-columns:minmax(145px,.54fr) minmax(330px,1.46fr);padding:18px;gap:14px}
.cl-board-head{font-size:9px;letter-spacing:.1em}.cl-zone--before{justify-content:center}.cl-zone--before .cl-art{flex:1;min-height:240px}.cl-zone--before .cl-brick{transform:rotate(-7deg) skew(-3deg) scale(.85)}
.system-after{padding:16px 13px 14px;background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-color:#537086}
.system-after .cl-zone-head{min-height:46px;margin-bottom:8px}.system-after .cl-zone-head h3{font-size:24px}.system-after .cl-zone-head p{font-size:13px}
.sys-diagram{width:100%;max-width:460px;margin:0 auto}.sys-diagram svg{display:block;width:100%;height:auto;overflow:visible}.concept-label{fill:#C6D7E3;font-size:13px;font-weight:500;letter-spacing:.7px}.concept-surface{fill:none;stroke:#A1B8C9;stroke-width:1;stroke-dasharray:3 6;opacity:.55}.concept-surface-label{fill:#ABC1D1;font-size:11px;letter-spacing:.7px}.concept-link{fill:none;stroke:#86A8BF;stroke-width:1.5}.concept-stem{fill:none;stroke:#A7C1D3;stroke-width:1.3}.concept-node{fill:#173C58;stroke:#C8DFEE;stroke-width:1.5}.concept-node.core{fill:#D4122B;stroke:#FF7283}.concept-signal{fill:#E2F3FF;stroke:#FFF;stroke-width:.5}.concept-signal.red{fill:#FF5B71;stroke:#FF9DAB}.concept-ring{fill:none;stroke:#EF6377;stroke-width:1}.concept-brick{isolation:isolate}
.sys-explanation{margin:5px 3px 0;padding:13px 0 0;border-top:1px solid #597083;min-height:104px;color:#D6E2EB}.sys-explanation b{display:block;color:#FFF;font-size:15px;line-height:1.2}.sys-explanation p{font-size:13px;line-height:1.45;margin:7px 0 0}.sys-controls{display:flex;align-items:center;gap:9px;margin-top:12px}.sys-steps{display:flex;gap:6px;flex:1}.sys-controls button{height:30px;min-width:30px;padding:0 8px;border:1px solid #7690A5;border-radius:16px;background:transparent;color:#F5F7FA;font-family:inherit;font-size:11px;cursor:pointer;line-height:1}.sys-steps button{padding:0;width:30px;min-width:30px;font-size:12px}.sys-steps button[aria-pressed=true]{background:#CC0A1E;border-color:#FF586A;color:#FFF}.sys-controls button:focus-visible{outline:2px solid #FFF;outline-offset:3px}
@media(min-width:1101px) and (max-height:800px){.sys-diagram{max-width:330px}.sys-explanation{min-height:90px}.system-after .cl-zone-head{min-height:38px}.system-after{padding:12px}.cl-board{padding:13px}.cl-board-takeaway{padding:10px 12px}.clarity-page{padding-top:24px!important;padding-bottom:30px!important}.cl-board-head{margin-bottom:0}}
@media(max-width:1100px){.clarity-page{display:block}.clarity-left h2{max-width:900px}.clarity-message{display:none}.cl-board{margin-top:24px;grid-template-columns:minmax(180px,.7fr) minmax(360px,1.3fr)}.sys-diagram{max-width:420px}.cl-zone--before .cl-brick{transform:rotate(-7deg) skew(-3deg)}}
@media(max-width:650px){.cl-board{grid-template-columns:1fr;padding:12px;gap:15px}.cl-zone--before{min-height:200px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:center}.cl-zone--before .cl-art{grid-column:2;grid-row:1/3;height:145px;min-height:145px}.cl-zone--before .cl-zone-bottom{grid-column:1;text-align:left;font-size:12px;padding:0;min-height:0;align-self:start}.cl-zone--before .cl-brick{transform:rotate(-7deg) skew(-3deg) scale(.64)}.cl-zone--before .cl-zone-head{align-self:end}.cl-zone--before .cl-zone-head p{font-size:11px}.cl-zone--before .cl-zone-head h3{font-size:22px}.cl-zone--before .cl-num{width:25px;height:25px;font-size:10px}.cl-board-head{display:block;line-height:1.5}.cl-board-head span{display:block}.system-after{padding:14px 10px}.sys-explanation{min-height:108px}.sys-controls{gap:6px}.sys-steps{gap:5px}.sys-steps button{width:28px;min-width:28px}.sys-controls button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.sys-node rect,.sys-under{transition:none!important}.sys-pulse{display:none}}
body.reduced .sys-pulse{display:none}



@media(prefers-reduced-motion:reduce){.concept-signal,.concept-ring{display:none}}
body.reduced .concept-signal,body.reduced .concept-ring{display:none}