:root{--hr-blue:#285aff;--hr-blue-deep:#1641d8}@font-face{font-family:DM;src:url('../fonts/type-0.ttf')}@font-face{font-family:DM;src:url('../fonts/type-1.ttf');font-weight:500}@font-face{font-family:Plex;src:url('../fonts/type-4.ttf')}*{box-sizing:border-box}body{margin:0;background:#fff;color:#253858;font:16px/1.5 DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--hr-blue);outline-offset:5px}header{width:min(1260px,calc(100% - 80px));height:93px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e9eef6}header img{display:block;width:195px;height:auto}.back{font-size:13px;color:#71829e}main{width:min(1060px,calc(100% - 80px));margin:45px auto 35px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}#count{font:13px Plex,monospace;color:#8592a8}.actions{display:flex;align-items:center;gap:11px}.actions button{border:1px solid #becfed;border-radius:9px;box-shadow:0 3px 0 #dce6f8;background:#fff;color:var(--hr-blue);min-height:41px;padding:9px 17px;font-size:14px}.actions #plus{background:var(--hr-blue);color:#fff;border-color:var(--hr-blue-deep);box-shadow:0 4px 0 #183ba4}.actions #plus>span{font-size:19px;line-height:1;vertical-align:-1px;margin-right:4px}.actions #minus{padding:5px;width:39px;font-size:22px}.actions button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #ccd9f3}.actions button:disabled{opacity:.35;cursor:default}.captions{display:flex;justify-content:space-between;gap:35px;margin-bottom:28px}.captions>div{width:44%}.captions>div:last-child{text-align:right}.state-label{background:none;padding:0;border:0;color:#76849b;font-size:24px;font-weight:500;letter-spacing:-.04em}.captions>div:last-child .state-label{color:var(--hr-blue-deep)}.captions p{font-size:15px;color:#8a97ad;margin:9px 0 0;line-height:1.65}.captions>div:last-child p{color:#6b85b7}.comparison{position:relative;height:370px;border:1px solid #dfe8f5;border-radius:15px;box-shadow:0 5px 0 #edf2fb;isolation:isolate;touch-action:pan-y;user-select:none;overflow:hidden}.layer{position:absolute;inset:0}.without{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#fcfdff}.with{clip-path:inset(0 0 0 var(--split));background:linear-gradient(120deg,#f8fbff,#edf4ff)}.scene{position:absolute;inset:0;display:grid;grid-template-columns:140px minmax(40px,1fr) 156px minmax(45px,1fr) 185px;align-items:center;padding:35px 47px;background-image:radial-gradient(#aec1df36 .75px,transparent .75px);background-size:22px 22px}.product{grid-column:1;grid-row:1;position:relative;z-index:2;text-align:center;font-size:15px;font-weight:500;padding:24px 13px;background:#fff;border:1px solid #cbd7ea;border-radius:11px;box-shadow:0 5px 0 #e1e9f6}.product i{position:absolute;right:-4px;top:calc(50% - 3px);width:6px;height:6px;background:#fff;border:1px solid #a5badc;border-radius:50%}.infrastructure{grid-column:3;grid-row:1;position:relative;z-index:2;background:#f7f9fd;border:1px solid #cfdaeb;border-radius:9px;box-shadow:0 5px 0 #e1e9f6;padding:12px 0 8px}.infrastructure>strong{display:block;font-size:12px;font-weight:500;color:#798ba7;padding:0 12px 10px}.module{position:relative;font-size:12px;color:#8b9bb3;padding:5px 12px;border-top:1px solid #edf1f8;background:#fff;line-height:1.25;min-height:25px}.module:nth-child(2n){background:#fbfcff}.module:after{content:'';position:absolute;right:-4px;top:calc(50% - 3px);width:6px;height:6px;border:1px solid #b0c2df;border-radius:50%;background:#fff}.targets{grid-column:5;grid-row:1;display:flex;flex-direction:column;gap:15px;position:relative;z-index:2}.target{display:flex;align-items:center;gap:10px;min-height:45px;padding:11px 15px;background:#fff;border:1px solid #cedaeb;border-radius:9px;box-shadow:0 4px 0 #e4ebf7;color:#8b9bb3;font-size:14px;position:relative;line-height:1.4}.target:before{content:'';position:absolute;left:-4px;top:calc(50% - 3px);width:6px;height:6px;background:#fff;border:1px solid #b0c2df;border-radius:50%}.target img{width:23px;height:23px;object-fit:contain}.with .target{border-color:#bfd1f7;box-shadow:0 4px 0 #d9e5fc;color:#3d5b91}.with .product{border-color:#b7ccf4;box-shadow:0 5px 0 #dce7fc}.hub{grid-column:3;grid-row:1;justify-self:center;z-index:2;position:relative;width:74px;height:74px;background:#fff;border:1px solid #a9c0f1;border-radius:15px;box-shadow:0 6px 0 #cadbfd}.hub img{width:100%;height:100%;display:block;object-fit:contain;border-radius:15px}.hub span{position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%);white-space:nowrap;color:var(--hr-blue);font-size:13px}.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.wires path{fill:none;stroke:#d0dbec;stroke-width:1.1;vector-effect:non-scaling-stroke}.with .wires path{stroke:#91afee;stroke-width:1.5}.with .wires path:first-child{stroke:var(--hr-blue);stroke-width:2.5}.divider{position:absolute;left:var(--split);top:0;bottom:0;transform:translateX(-50%);width:40px;cursor:ew-resize;z-index:5;touch-action:none;outline:0}.divider:before{content:'';position:absolute;left:19px;top:0;bottom:0;width:2px;background:var(--hr-blue);box-shadow:0 0 0 3px #fff7}.grip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:58px;background:var(--hr-blue);border:2px solid #fff;border-radius:13px;box-shadow:0 4px 0 #173baf,0 7px 16px rgba(22, 65, 216, 0.161);display:flex;align-items:center;justify-content:center;gap:5px;color:#fff;font-size:26px;line-height:1;transition:box-shadow .15s,background .15s}.grip i{width:2px;height:21px;background:#a6bbff;border-radius:2px}.divider:hover .grip,.divider:focus-visible .grip{background:var(--hr-blue-deep);box-shadow:0 4px 0 #173baf,0 0 0 5px rgba(40, 90, 255, 0.145)}.comparison.is-dragging .grip{box-shadow:0 2px 0 #173baf,0 0 0 5px rgba(40, 90, 255, 0.082)}.results{display:flex;justify-content:space-between;align-items:baseline;gap:25px;margin-top:28px}.results>div{display:flex;align-items:baseline;gap:16px}.results strong{font:500 34px/1.2 Plex,monospace;letter-spacing:-.065em;color:#8b9bb3}.results span{font:11px Plex,monospace;letter-spacing:.07em;color:#94a3bd}.results>div:last-child strong{color:var(--hr-blue)}.results>div:last-child span{color:#6c88bd}.drag-control{display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;color:#91a1bb;margin-top:27px}.drag-control>span{font-size:20px;color:var(--hr-blue)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.new{animation:snap .35s ease both}@keyframes snap{from{opacity:0}to{opacity:1}}@media(max-width:800px){header{width:calc(100% - 48px);height:79px}main{width:calc(100% - 48px);margin-top:31px}.scene{grid-template-columns:106px minmax(24px,1fr) 139px minmax(24px,1fr) 148px;padding:30px}.product{font-size:14px;padding:22px 10px}.target{font-size:13px;padding:11px;gap:8px}.target img{width:21px;height:21px}.comparison{height:370px}.state-label{font-size:22px}.results strong{font-size:29px}.results>div{gap:10px}.results span{font-size:10px}.hub{width:65px;height:65px}}@media(max-width:600px){header{width:calc(100% - 36px);height:74px}header img{width:164px}.back{font-size:11px}main{width:calc(100% - 32px);margin-top:26px}.topbar{margin-bottom:28px}.captions{gap:16px;margin-bottom:23px}.captions>div{width:48%}.state-label{font-size:19px;letter-spacing:-.035em}.captions p{font-size:12px;margin-top:8px;line-height:1.65}.comparison{height:355px;border-radius:12px}.scene{grid-template-columns:61px minmax(10px,.5fr) 101px minmax(12px,1fr) 91px;padding:25px 12px}.product{font-size:12px;padding:18px 4px;border-radius:8px}.infrastructure>strong{font-size:11px;padding:0 7px 10px}.module{font-size:11px;padding:5px 7px;min-height:25px}.target{min-height:44px;padding:9px 5px;font-size:11px;gap:5px;overflow-wrap:anywhere;border-radius:7px}.target img{width:16px;height:16px}.targets{gap:13px}.hub{width:51px;height:51px;border-radius:11px}.hub span{display:none}.grip{width:37px;height:53px;gap:3px;font-size:23px;border-radius:11px}.grip i{height:17px}.results{margin-top:25px;gap:16px}.results>div{flex-direction:column;gap:7px;align-items:flex-start}.results>div:last-child{align-items:flex-end}.results strong{font-size:27px}.results span{font-size:10px}.actions button{font-size:13px;padding:9px 12px}.drag-control{margin-top:21px}}@media(max-width:360px){.scene{grid-template-columns:53px 8px 95px minmax(10px,1fr) 78px;padding-inline:8px}.target{padding-inline:4px;gap:3px}.target img{width:13px;height:13px}.state-label{font-size:17px}.results strong{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* One canvas, one central comparison control. */
main{margin:43px auto 40px;width:min(1100px,calc(100% - 80px))}.comparison-shell{border:1px solid #dce6f5;border-radius:20px;overflow:hidden;background:linear-gradient(110deg,#fff,#f6f9ff);box-shadow:0 5px 0 #eaf0fa,0 20px 35px -30px rgba(22, 65, 216, 0.169)}.canvas-head{padding:26px 30px 0;position:relative;z-index:6}.mode-switch{display:grid;grid-template-columns:1fr 1fr;max-width:430px;margin:auto;border:1px solid #cfddf4;border-radius:12px;background:#fff;box-shadow:0 3px 0 #e3ebf9;overflow:hidden}.mode-switch .state-label{font-size:15px;padding:13px 17px;letter-spacing:-.02em;color:#8292ac;transition:background .2s,color .2s}.mode-switch .state-label:last-child{border-left:1px solid #dbe5f5;color:var(--hr-blue);background:#f4f8ff}.mode-switch .state-label[aria-pressed=true]{background:#e8f0ff;color:var(--hr-blue-deep)}.mode-switch .state-label:focus-visible{outline-offset:-4px}.captions{display:grid;grid-template-columns:1fr 1fr;max-width:680px;margin:17px auto 0;gap:30px;text-align:center}.captions p{font-size:13px;line-height:1.6;margin:0;color:#94a2b9}.captions p:last-child{color:#7892bf}.captions br{display:none}.comparison{height:354px;border:0;border-radius:0;box-shadow:none;overflow:hidden}.without{background:transparent}.with{background:#eef5ff66}.scene{padding:30px 47px}.divider:before{background:linear-gradient(transparent,var(--hr-blue) 14%,var(--hr-blue) 86%,transparent);box-shadow:none}.canvas-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding:22px 35px 23px;border-top:1px solid #e4ecf8;background:#ffffffa6}.result{display:flex;flex-direction:column;gap:7px}.result strong{font:500 29px/1.2 Plex,monospace;letter-spacing:-.065em;color:#92a2bb;white-space:nowrap}.result>span{font:10px/1.5 Plex,monospace;letter-spacing:.07em;color:#9baac0}.with-result{text-align:right}.with-result strong{color:var(--hr-blue)}.with-result>span{color:#7d94bc}.control-group{display:flex;flex-direction:column;align-items:center;gap:12px}.actions{gap:12px;padding:4px 5px;border:1px solid #d9e5f7;background:#fff;border-radius:10px;box-shadow:0 3px 0 #e8effa}.actions #minus{border:0;box-shadow:none;min-height:35px;width:31px;color:#91a7ce;background:transparent}.actions #plus{min-height:35px;padding:8px 11px;font-size:12px;border-radius:7px;box-shadow:0 2px 0 #173ba8}.actions #plus>span{font-size:17px;margin-right:2px}#count{font-size:12px;white-space:nowrap;color:#7e92b4}.drag-control{margin:0;font-size:11px;gap:7px;color:#a2b0c6}.drag-control>span{font-size:16px}.back{color:#8b9bb3}@media(max-width:800px){main{width:calc(100% - 48px);margin-top:32px}.canvas-footer{gap:18px;padding:20px 24px}.result strong{font-size:24px}.actions{gap:8px}#count{font-size:11px}.scene{padding-inline:30px}.comparison{height:360px}}
@media(max-width:600px){main{width:calc(100% - 28px);margin-top:27px}.comparison-shell{border-radius:15px}.canvas-head{padding:20px 15px 0}.mode-switch{max-width:330px;border-radius:10px}.mode-switch .state-label{font-size:13px;padding:12px 8px}.captions{gap:18px;margin-top:15px}.captions p{font-size:11px;line-height:1.65}.captions br{display:initial}.comparison{height:350px}.scene{padding:25px 12px}.canvas-footer{grid-template-columns:1fr 1fr;padding:19px 18px 17px;gap:19px}.without-result{grid-column:1;grid-row:1}.with-result{grid-column:2;grid-row:1}.control-group{grid-column:1/-1;grid-row:2;gap:13px}.result strong{font-size:26px}.result>span{font-size:10px}.actions{gap:13px;padding:5px 6px}#count{font-size:12px}.actions #plus{font-size:12px;padding:9px 13px}.actions #minus{width:33px}.drag-control{font-size:11px}}@media(max-width:360px){.scene{padding-inline:8px}.canvas-head{padding-inline:12px}.mode-switch .state-label{font-size:12px}.result strong{font-size:24px}}

.comparison.is-expanded{height:422px}.is-expanded .targets{gap:8px}.is-expanded .target{min-height:34px;padding:7px 12px;font-size:13px}.is-expanded .target img{width:20px;height:20px}@media(max-width:600px){.comparison.is-expanded{height:401px}.is-expanded .target{padding:7px 5px;font-size:11px;min-height:34px;gap:4px}.is-expanded .target img{width:16px;height:16px}}@media(max-width:360px){.is-expanded .target{padding-inline:4px;gap:3px}.is-expanded .target img{width:13px;height:13px}}

/* Reserve all eight slots so adding nodes never resizes the canvas. */
.comparison{height:422px}.comparison.is-expanded{height:492px}.targets,.is-expanded .targets{gap:8px}.target,.is-expanded .target{min-height:34px;padding:7px 12px;font-size:13px}.target img,.is-expanded .target img{width:20px;height:20px}@media(max-width:600px){.comparison{height:401px}.comparison.is-expanded{height:520px}.target,.is-expanded .target{padding:7px 5px;font-size:11px;min-height:34px;gap:4px}.target img,.is-expanded .target img{width:16px;height:16px}}@media(max-width:360px){.target,.is-expanded .target{padding-inline:4px;gap:3px}.target img,.is-expanded .target img{width:13px;height:13px}}

/* Clickable harness routes and flowing managed connections. */
.target{text-align:left;width:100%;cursor:pointer;font-family:DM,Arial,sans-serif;transition:border-color .2s,background .2s,box-shadow .2s}.target:hover,.target.is-selected{border-color:#7099ef;background:#edf4ff;color:var(--hr-blue);box-shadow:0 4px 0 #c2d6fd}.target:focus-visible{outline:2px solid var(--hr-blue);outline-offset:3px}.with .target.is-selected{border-color:#648de7;background:#e5efff;color:var(--hr-blue-deep);box-shadow:0 4px 0 #bad0fb}.wires path.route-muted{opacity:.2}.wires path.route-selected{stroke:#7094d9;stroke-width:1.6}.with .wires path.route-selected{stroke:var(--hr-blue);stroke-width:2}.with .wires path.route-input{stroke:var(--hr-blue);stroke-width:2.5}.with .wires path.route-flow{stroke:var(--hr-blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 92;animation:managedFlow 2.2s linear infinite}.without .wires path.route-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:connectRoute .45s ease forwards}@keyframes managedFlow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes connectRoute{to{stroke-dashoffset:0}}@media(prefers-reduced-motion:reduce){.with .wires path.route-flow{display:none}.without .wires path.route-draw{stroke-dashoffset:0}}

/* Start managed flow only after the divider reveals the full router mark. */
.with .wires path.route-flow{animation-play-state:paused;opacity:0}.comparison.with-ready .with .wires path.route-flow{animation-play-state:running;opacity:1}

/* Slightly deeper interaction palette for stronger contrast in the homepage Hero. */
.mode-switch .state-label:last-child{color:var(--hr-blue-deep);background:#f0f4ff}.mode-switch .state-label[aria-pressed=true]{background:#e3ebff;color:#1f3fbf}.actions #plus{background:var(--hr-blue-deep);border-color:#1f3fbf}.actions #plus:hover,.actions #plus:focus-visible{background:#1f3fbf}.divider:before{background:linear-gradient(transparent,var(--hr-blue-deep) 14%,var(--hr-blue-deep) 86%,transparent)}.grip{background:var(--hr-blue-deep);box-shadow:0 4px 0 #173690,0 7px 16px #1f3fbf38}.divider:hover .grip,.divider:focus-visible .grip{background:#1f3fbf;box-shadow:0 4px 0 #173690,0 0 0 5px rgba(22, 65, 216, 0.169)}.with .wires path{stroke:#7d9bdd}.with .wires path:first-child,.with .wires path.route-selected,.with .wires path.route-input,.with .wires path.route-flow{stroke:var(--hr-blue-deep)}.target:hover,.target.is-selected{border-color:#567fe0;background:#e9f0ff;color:var(--hr-blue-deep);box-shadow:0 4px 0 #b8ccf8}.target:focus-visible{outline-color:var(--hr-blue-deep)}.with .target.is-selected{border-color:#456fd2;background:#dee8ff;color:#1f3fbf;box-shadow:0 4px 0 #adc3f4}.hub span,.with-result strong,.drag-control>span{color:var(--hr-blue-deep)}

/* Increase only the outer interaction boundary contrast by roughly ten percent. */
.comparison-shell{border-color:#c9d5e5}

/* At the full Without endpoint, return the inactive With tab to white. */
.mode-switch #show-without[aria-pressed=true]+#show-with{background:#fff;color:#8292ac}

/* Deepen the comparison captions while preserving their left/right hierarchy. */
.captions p{color:#838fac}.captions p:last-child{color:#6b81aa}

/* Increase contrast of the unmanaged connection graph without changing blue routes. */
.without .wires path{stroke:#aebace}

/* CTA affordance: keep the drag handle visibly alive until the visitor interacts. */
.comparison.show-drag-cue .grip{animation:gripAttention 2.15s cubic-bezier(.2,.75,.25,1) .4s infinite}@keyframes gripAttention{0%,58%,100%{background:var(--hr-blue-deep);box-shadow:0 4px 0 #173690,0 7px 16px #1f3fbf38}18%{background:var(--hr-blue);box-shadow:0 4px 0 #173690,0 0 0 7px #d9775770,0 0 0 14px #d977572e,0 8px 34px #c85f3f99}36%{background:var(--hr-blue-deep);box-shadow:0 4px 0 #173690,0 0 0 5px #d9775742,0 5px 25px #c85f3f70}}

/* Keep the quantity control legible against the white surface. */
.actions #minus{color:#5b75a2}.actions #minus:hover,.actions #minus:focus-visible{color:var(--hr-blue-deep);background:#f1f5ff}#count{color:#5c6f91}

/* Raise contrast across the comparison without flattening the blue hierarchy. */
.comparison-shell{border-color:#98a9bf;box-shadow:0 5px 0 #cdd8e6,0 20px 35px -30px rgba(22, 65, 216, 0.29)}.mode-switch{border-color:#a8b9d0;box-shadow:0 3px 0 #c7d4e5}.mode-switch .state-label{color:#52647f}.captions p{color:#536580}.captions p:last-child{color:#445f8f}.scene{background-image:radial-gradient(#7892b65c .75px,transparent .75px)}.product{color:#243a5c;border-color:#9eafc5;box-shadow:0 5px 0 #c7d2e0}.product i,.module:after,.target:before{border-color:#7f98b9}.infrastructure{border-color:#9fafc4;box-shadow:0 5px 0 #c8d3df}.infrastructure>strong{color:#4c6080}.module{color:#566b89;border-top-color:#cbd6e4}.target{color:#4e627f;border-color:#a0b1c6;box-shadow:0 4px 0 #c8d4e1}.with .target{color:#294675;border-color:#94acd9;box-shadow:0 4px 0 #becde8}.without .wires path{stroke:#7d8fa8}.canvas-footer{border-top-color:#b7c5d7}.result strong{color:#5d718d}.result>span{color:#5f7593}.actions{border-color:#adbed5;box-shadow:0 3px 0 #cfd9e7}.drag-control{color:#5c7291}.with-result>span{color:#506d9e}

/* Put the unmanaged integration relationship directly on its connector. */
.managed-caption{grid-column:2}.unmanaged-equation-label{grid-column:2;grid-row:1;align-self:center;justify-self:center;z-index:3;white-space:nowrap;padding:4px 7px;border:1px solid #c4d0e0;border-radius:999px;background:#fff;color:#536681;box-shadow:0 2px 0 #e0e7f1;font:500 11px/1 Plex,monospace;letter-spacing:.04em}@media(max-width:600px){.unmanaged-equation-label{padding:3px;font-size:8px;letter-spacing:0}}

/* Mirror the relationship label on the managed connector. */
.canvas-head{padding-bottom:18px}.managed-api-label{grid-column:2;grid-row:1;align-self:center;justify-self:center;z-index:3;display:flex;align-items:center;gap:5px;white-space:nowrap;padding:5px 8px;border:1px solid #9fb8ea;border-radius:999px;background:#f8fbff;color:#526d9c;box-shadow:0 2px 0 #d4e0f5;font:10px/1 DM,Arial,sans-serif}.managed-api-label strong{color:var(--hr-blue-deep);font:500 10px/1 Plex,monospace;letter-spacing:.035em}.hub span{font-weight:500}@media(max-width:600px){.canvas-head{padding-bottom:15px}.managed-api-label{padding:3px 4px}.managed-api-label>span{display:none}.managed-api-label strong{font-size:8px}}

/* Mobile topology: keep all three concepts readable and the drag grip inside the canvas. */
@media(max-width:600px){
  .scene{grid-template-columns:76px minmax(8px,1fr) 100px minmax(8px,1fr) 92px;padding-inline:12px}
  .product{padding-inline:4px;white-space:nowrap}
  .divider{left:clamp(20px,var(--split),calc(100% - 20px))}
  .grip{top:34px}
  .unmanaged-equation-label{grid-column:3;align-self:start;justify-self:start;margin-top:0;transform:translateX(-8px)}
  .managed-api-label{grid-column:3;align-self:center;justify-self:center;transform:translate(34px,-35px);padding:3px 5px;background:#fff}
}
@media(max-width:360px){
  .scene{grid-template-columns:64px minmax(4px,1fr) 86px minmax(4px,1fr) 72px;padding-inline:8px}
  .product{font-size:10px;padding-inline:2px}
  .infrastructure>strong{font-size:10px;padding-inline:5px}
  .module{font-size:10px;padding-inline:5px}
  .target,.is-expanded .target{font-size:10px}
}

/* Strengthen the infrastructure stack and harness-count control only. */
.infrastructure{border-color:#8799b1;box-shadow:0 5px 0 #bac6d5}
.infrastructure>strong{color:#384e70}
.module{color:#435a79;border-top-color:#b8c5d6}
.module:after{border-color:#718bad}
.actions{border-color:#94a8c2;box-shadow:0 3px 0 #bcc9da}
.actions #minus{color:#3f5c88}
#count{color:#40587b}

/* Ease the neutral interaction palette by one step while keeping blue actions primary. */
.comparison-shell{border-color:#aab8ca;box-shadow:0 5px 0 #d8e0ea,0 20px 35px -30px rgba(22, 65, 216, 0.22)}
.mode-switch{border-color:#b7c4d5;box-shadow:0 3px 0 #d4dde8}
.mode-switch .state-label{color:#62728a}
.captions p{color:#65748b}
.captions p:last-child{color:#58709a}
.scene{background-image:radial-gradient(#8da2bd47 .75px,transparent .75px)}
.product{color:#334a67;border-color:#afbdce;box-shadow:0 5px 0 #d4dce6}
.product i,.module:after,.target:before{border-color:#91a5be}
.infrastructure{border-color:#9eadc0;box-shadow:0 5px 0 #cbd5e0}
.infrastructure>strong{color:#4d617e}
.module{color:#586c87;border-top-color:#c5cfdb}
.target{color:#60718a;border-color:#b2bfd0;box-shadow:0 4px 0 #d4dce6}
.with .target{color:#3d5882;border-color:#a9bbe0;box-shadow:0 4px 0 #cfd9ec}
.without .wires path{stroke:#9baabd}
.canvas-footer{border-top-color:#c7d1de}
.result strong{color:#70819a}
.result>span{color:#72839c}
.actions{border-color:#a9b8ca;box-shadow:0 3px 0 #cbd5e0}
.actions #minus{color:#536e96}
#count{color:#536986}
.drag-control{color:#70839d}

/* Make the N × M relationship readable at a glance on the connector. */
.unmanaged-equation-label{padding:5px 9px;font-size:14px;letter-spacing:.035em}
@media(max-width:600px){.unmanaged-equation-label{padding:4px 6px;font-size:10px;letter-spacing:.02em}}

/* Mobile: reserve a readable lane for the product label and keep its connector clear of the copy. */
@media(max-width:600px){
  .scene{grid-template-columns:92px minmax(6px,1fr) 96px minmax(6px,1fr) 78px}
  .product{padding-inline:8px;font-size:11px;line-height:1.2}
  .product i{right:-4px}
}
@media(max-width:360px){
  .scene{grid-template-columns:84px minmax(4px,1fr) 86px minmax(4px,1fr) 72px}
  .product{padding-inline:7px;font-size:10px}
}