/* Network and web protection: native product links with measured flow connections. */ #public-main #b-diagram-security-network { --sn-bg:#fff;--sn-panel:#f5f8fc;--sn-text:#183850;--sn-muted:#496278; --sn-line:#c7d7e5;--sn-blue:#3c79a8;--sn-device:#d8e8f5;--sn-device-top:#edf6fd;--sn-orange:#a95119; --sn-device-side:#acc6dc;--sn-face:#fafdff;--sn-sheen:#fff;--sn-shadow:#234e741c;--sn-led:#e98643; } html[data-theme="dark"] #public-main #b-diagram-security-network { --sn-bg:#070b12;--sn-panel:#102031;--sn-text:#e4effb;--sn-muted:#aec2d6; --sn-line:#34516a;--sn-blue:#8dbbe3;--sn-device:#24435c;--sn-device-top:#3a5f7b;--sn-orange:#ffbb88; --sn-device-side:#1a344d;--sn-face:#173247;--sn-sheen:#527893;--sn-shadow:#0004;--sn-led:#ffb67d; } #public-main #b-diagram-security-network .sn-sr {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} #public-main #b-diagram-security-network .sn-responsive {width:100%;max-width:1150px;margin-inline:auto;container:security-network / inline-size;color:var(--sn-text)} #public-main #b-diagram-security-network .sn-responsive * {box-sizing:border-box;min-width:0} #public-main #b-diagram-security-network :where(h3,h4,p) {margin:0;letter-spacing:normal;word-break:keep-all} #public-main #b-diagram-security-network .sn-map {position:relative;--sn-mobile:0} #public-main #b-diagram-security-network .sn-connections {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible} #public-main #b-diagram-security-network .sn-wire {stroke:var(--sn-blue);stroke-width:1.7;fill:none;stroke-linejoin:round;stroke-linecap:round} #public-main #b-diagram-security-network .sn-wire--file {stroke-dasharray:4 5} #public-main #b-diagram-security-network .sn-grid {display:grid;grid-template-columns:96px minmax(290px,1.35fr) minmax(224px,1fr);gap:36px 30px;align-items:center} #public-main #b-diagram-security-network .sn-source {grid-column:1;grid-row:1;text-align:center;position:relative;z-index:2} #public-main #b-diagram-security-network .sn-source-title {font-size:15px;font-weight:650;line-height:1.5;margin-top:9px;color:var(--sn-text)} #public-main #b-diagram-security-network .sn-source-copy {font-size:13px;line-height:1.6;color:var(--sn-muted);margin-top:5px} #public-main #b-diagram-security-network .sn-anchor {display:flex;align-items:center;justify-content:center;position:relative;width:66px;height:78px;margin-inline:auto} #public-main #b-diagram-security-network .sn-icon {display:block;stroke:var(--sn-blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #public-main #b-diagram-security-network .sn-globe {width:56px;height:56px;stroke-width:1.3} #public-main #b-diagram-security-network .sn-globe-latitude {stroke-width:.85;opacity:.75} #public-main #b-diagram-security-network .sn-asset-face {fill:var(--sn-face)} #public-main #b-diagram-security-network .sn-asset-side {fill:var(--sn-device-side);stroke:var(--sn-blue);stroke-width:1.2} #public-main #b-diagram-security-network .sn-asset-fold {fill:var(--sn-device-top)} #public-main #b-diagram-security-network .sn-asset-shield {fill:var(--sn-device)} #public-main #b-diagram-security-network .sn-asset-detail {stroke-width:1.2;opacity:.7} #public-main #b-diagram-security-network .sn-asset-led {fill:var(--sn-led);stroke:none} #public-main #b-diagram-security-network :is(.sn-globe,.sn-waf-illustration,.sn-file-illustration) {filter:drop-shadow(0 4px 4px var(--sn-shadow))} #public-main #b-diagram-security-network .sn-core {grid-column:2;grid-row:1;border:1px solid var(--sn-line);background:var(--sn-panel);border-radius:12px;padding:18px 14px 20px;position:relative} #public-main #b-diagram-security-network .sn-core-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:15px;border-bottom:1px solid var(--sn-line)} #public-main #b-diagram-security-network .sn-core-heading h3 {color:var(--sn-text);font-size:16px;font-weight:650;line-height:1.5} #public-main #b-diagram-security-network .sn-block {display:flex;align-items:center;gap:5px;color:var(--sn-orange);font-size:12px;line-height:1.5;white-space:nowrap} #public-main #b-diagram-security-network .sn-block .sn-icon {width:16px;height:16px;stroke:currentColor} #public-main #b-diagram-security-network .sn-functions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px} #public-main #b-diagram-security-network .sn-function {text-align:center;position:relative;z-index:2} #public-main #b-diagram-security-network .sn-function > p {font-size:13px;line-height:1.65;min-height:43px;color:var(--sn-muted);margin-top:9px} #public-main #b-diagram-security-network .sn-product-link {justify-self:auto;min-width:64px;white-space:nowrap} #public-main #b-diagram-security-network .sn-functions .sn-product-link {font-size:13px;padding-inline:12px;gap:6px} #public-main #b-diagram-security-network .sn-appliance {position:relative;width:52px;height:36px;border:1px solid var(--sn-blue);border-radius:3px;background:linear-gradient(145deg,var(--sn-device-top),var(--sn-device));box-shadow:inset 0 1px var(--sn-sheen),0 6px 8px -3px var(--sn-shadow);display:flex;align-items:center;gap:5px;padding:7px} #public-main #b-diagram-security-network .sn-appliance::before {content:"";position:absolute;top:-6px;left:-1px;width:calc(100% + 7px);height:6px;clip-path:polygon(0 100%,12% 0,100% 0,88% 100%);background:linear-gradient(160deg,var(--sn-device-top),var(--sn-device-side))} #public-main #b-diagram-security-network .sn-appliance::after {content:"";position:absolute;left:calc(100% - 1px);top:-6px;width:7px;height:calc(100% + 6px);clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%);background:var(--sn-device-side)} #public-main #b-diagram-security-network .sn-appliance > span:not(.sn-led) {position:relative;width:7px;height:7px;border:1px solid var(--sn-blue);border-radius:1px;background:var(--sn-face);display:block;box-shadow:inset 0 -2px var(--sn-device-side)} #public-main #b-diagram-security-network .sn-appliance > .sn-led {width:3px;height:3px;border-radius:50%;background:var(--sn-led);margin-left:auto;box-shadow:0 0 0 2px var(--sn-face)} #public-main #b-diagram-security-network .sn-appliance > .sn-icon {position:absolute;width:21px;height:21px;top:-29px;left:15px} #public-main #b-diagram-security-network .sn-services {grid-column:3;grid-row:1;display:grid;gap:28px;position:relative} #public-main #b-diagram-security-network :is(.sn-web-path,.sn-server-path) {position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start;padding-top:27px} #public-main #b-diagram-security-network .sn-lane-label {position:absolute;left:calc(25% - 28px);top:0;font-size:13px;line-height:1.5;color:var(--sn-muted)} #public-main #b-diagram-security-network .sn-node {position:relative;z-index:2;text-align:center} #public-main #b-diagram-security-network .sn-node h4 {color:var(--sn-text);font-size:15px;font-weight:650;line-height:1.5;margin-top:9px} #public-main #b-diagram-security-network .sn-node > p {font-size:13px;line-height:1.6;color:var(--sn-muted);margin-top:8px} #public-main #b-diagram-security-network .sn-waf .sn-icon {width:58px;height:58px;stroke-width:1.6} #public-main #b-diagram-security-network .sn-browser {width:72px;height:54px;border:1.5px solid var(--sn-blue);background:linear-gradient(145deg,var(--sn-face),var(--sn-device-top));border-radius:5px;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:3px -3px 0 var(--sn-device-side),0 5px 8px var(--sn-shadow)} #public-main #b-diagram-security-network .sn-browser::before {content:"";position:absolute;left:0;right:0;top:0;height:12px;border-bottom:1px solid var(--sn-blue);border-radius:3px 3px 0 0;background:radial-gradient(circle at 6px 6px,var(--sn-led) 1.25px,transparent 1.5px),radial-gradient(circle at 12px 6px,var(--sn-blue) 1.25px,transparent 1.5px),radial-gradient(circle at 18px 6px,var(--sn-blue) 1.25px,transparent 1.5px),var(--sn-device)} #public-main #b-diagram-security-network .sn-browser .sn-icon {width:29px;height:29px;margin-top:9px;stroke-width:1.4} #public-main #b-diagram-security-network .sn-rack {position:relative;width:48px;height:72px;background:linear-gradient(100deg,var(--sn-device-top),var(--sn-device));border:1px solid var(--sn-blue);padding:7px 5px;display:grid;gap:5px;border-radius:3px;box-shadow:inset 1px 0 var(--sn-sheen),0 7px 9px -3px var(--sn-shadow)} #public-main #b-diagram-security-network .sn-rack::before {content:"";position:absolute;top:-6px;left:-1px;width:calc(100% + 7px);height:6px;clip-path:polygon(0 100%,12% 0,100% 0,88% 100%);background:linear-gradient(160deg,var(--sn-device-top),var(--sn-device-side))} #public-main #b-diagram-security-network .sn-rack::after {content:"";position:absolute;left:calc(100% - 1px);top:-6px;width:7px;height:calc(100% + 6px);clip-path:polygon(0 6px,100% 0,100% calc(100% - 6px),0 100%);background:var(--sn-device-side)} #public-main #b-diagram-security-network .sn-rack span {border:1px solid var(--sn-blue);border-radius:1px;position:relative;background:var(--sn-face)} #public-main #b-diagram-security-network .sn-rack span::before {content:"";position:absolute;left:3px;top:5px;width:12px;border-top:1px solid var(--sn-blue);box-shadow:0 3px 0 var(--sn-line)} #public-main #b-diagram-security-network .sn-rack span::after {content:"";position:absolute;right:3px;top:5px;width:2px;height:2px;border-radius:50%;background:var(--sn-blue)} #public-main #b-diagram-security-network .sn-rack span:first-child::after {background:var(--sn-led)} #public-main #b-diagram-security-network .sn-apt {grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;gap:14px;position:relative;z-index:2} #public-main #b-diagram-security-network .sn-apt .sn-anchor {width:52px;height:70px;flex-shrink:0;margin:0} #public-main #b-diagram-security-network .sn-apt .sn-icon {width:44px;height:50px} #public-main #b-diagram-security-network .sn-apt-title {font-size:14px;line-height:1.5;font-weight:650;color:var(--sn-text);margin-bottom:6px} #public-main #b-diagram-security-network .sn-apt-caption {color:var(--sn-muted);font-size:13px;line-height:1.6;margin-top:8px} #public-main #b-diagram-security-network .sn-legend {display:flex;justify-content:center;gap:12px 26px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--sn-line);font-size:12px;line-height:1.6;color:var(--sn-muted)} #public-main #b-diagram-security-network .sn-legend > span {display:flex;align-items:center;gap:8px} #public-main #b-diagram-security-network .sn-swatch {width:26px;border-top:1.7px solid var(--sn-blue);flex-shrink:0} #public-main #b-diagram-security-network .sn-swatch--file {border-top-style:dashed} /* Short CSS arrows keep the server-rendered diagram readable without JavaScript. */ #public-main #b-diagram-security-network .sn-fallback-connection {position:absolute;display:block;pointer-events:none;border-top:1.7px solid var(--sn-blue)} #public-main #b-diagram-security-network .sn-fallback-connection::after {content:"";position:absolute;right:0;top:-4px;width:6px;height:6px;border-top:1.5px solid var(--sn-blue);border-right:1.5px solid var(--sn-blue);transform:rotate(45deg)} #public-main #b-diagram-security-network .sn-source > .sn-fallback-connection {left:calc(100% + 3px);top:39px;width:22px} #public-main #b-diagram-security-network .sn-core > .sn-fallback-connection {left:50%;top:calc(100% - 1px);height:31px;border-top:0;border-left:1.7px dashed var(--sn-blue)} #public-main #b-diagram-security-network .sn-core > .sn-fallback-connection::after {top:auto;bottom:0;right:-4px;transform:rotate(135deg)} #public-main #b-diagram-security-network .sn-web-path > .sn-fallback-connection {top:66px;left:calc(50% - 10px);width:22px} #public-main #b-diagram-security-network .sn-server-path > .sn-fallback-connection {top:66px;left:8px;width:calc(50% - 8px)} #public-main #b-diagram-security-network .sn-map[data-connections-ready="true"] .sn-fallback-connection {display:none} @container security-network (max-width:850px) { #public-main #b-diagram-security-network .sn-grid {grid-template-columns:76px minmax(268px,1.35fr) minmax(202px,1fr);gap:32px 18px} #public-main #b-diagram-security-network .sn-core {padding:14px 10px 16px} #public-main #b-diagram-security-network .sn-core-heading {padding-bottom:12px} #public-main #b-diagram-security-network .sn-core-heading h3 {font-size:14px} #public-main #b-diagram-security-network .sn-block {font-size:11px;gap:4px} #public-main #b-diagram-security-network .sn-block .sn-icon {width:14px;height:14px} #public-main #b-diagram-security-network .sn-functions {gap:6px;margin-top:16px} #public-main #b-diagram-security-network .sn-functions .sn-product-link {font-size:11px;padding-inline:7px;gap:4px} #public-main #b-diagram-security-network .sn-function > p {font-size:12px;min-height:39px;margin-top:7px} #public-main #b-diagram-security-network .sn-anchor {width:54px;height:66px} #public-main #b-diagram-security-network .sn-globe {width:49px;height:49px} #public-main #b-diagram-security-network .sn-source-title {font-size:13px} #public-main #b-diagram-security-network .sn-source-copy {font-size:11px} #public-main #b-diagram-security-network .sn-appliance {width:44px;height:32px;padding:6px;gap:4px} #public-main #b-diagram-security-network .sn-appliance > .sn-icon {width:20px;height:20px;top:-27px;left:11px} #public-main #b-diagram-security-network .sn-appliance > span:not(.sn-led) {width:6px;height:6px} #public-main #b-diagram-security-network .sn-appliance > .sn-led {width:2px;height:2px} #public-main #b-diagram-security-network .sn-services {gap:23px} #public-main #b-diagram-security-network :is(.sn-web-path,.sn-server-path) {column-gap:24px;padding-top:23px} #public-main #b-diagram-security-network .sn-lane-label {font-size:12px} #public-main #b-diagram-security-network .sn-node h4 {font-size:13px;margin-top:8px} #public-main #b-diagram-security-network .sn-node > p {font-size:12px;margin-top:6px} #public-main #b-diagram-security-network .sn-waf .sn-icon {width:54px;height:54px} #public-main #b-diagram-security-network .sn-browser {width:66px;height:49px} #public-main #b-diagram-security-network .sn-browser .sn-icon {width:25px;height:25px;margin-top:8px} #public-main #b-diagram-security-network .sn-rack {width:42px;height:64px;padding:6px 5px} #public-main #b-diagram-security-network .sn-rack span::before {width:10px} #public-main #b-diagram-security-network .sn-apt {gap:12px} #public-main #b-diagram-security-network .sn-apt .sn-anchor {width:48px;height:64px} #public-main #b-diagram-security-network .sn-apt-title {font-size:13px;margin-bottom:5px} #public-main #b-diagram-security-network .sn-apt-caption {font-size:12px;margin-top:6px} } @container security-network (max-width:650px) { #public-main #b-diagram-security-network .sn-map {--sn-mobile:1} #public-main #b-diagram-security-network .sn-grid {grid-template-columns:minmax(0,1fr);gap:28px} #public-main #b-diagram-security-network .sn-source {grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:15px;text-align:left} #public-main #b-diagram-security-network .sn-source .sn-anchor {margin:0} #public-main #b-diagram-security-network .sn-source-title {margin-top:0} #public-main #b-diagram-security-network .sn-core {grid-column:1;grid-row:2;padding-inline:8px} #public-main #b-diagram-security-network .sn-apt {grid-column:1;grid-row:3;margin-left:27px} #public-main #b-diagram-security-network .sn-apt-caption {max-width:220px} #public-main #b-diagram-security-network .sn-services {grid-column:1;grid-row:4;padding-left:27px;gap:22px} #public-main #b-diagram-security-network :is(.sn-web-path,.sn-server-path) {column-gap:40px} #public-main #b-diagram-security-network .sn-lane-label {left:8px} #public-main #b-diagram-security-network .sn-legend {font-size:11px;gap:10px 18px;margin-top:24px;padding-top:14px} #public-main #b-diagram-security-network .sn-source > .sn-fallback-connection {left:50%;top:calc(100% + 3px);height:20px;width:0;border-top:0;border-left:1.7px solid var(--sn-blue)} #public-main #b-diagram-security-network .sn-source > .sn-fallback-connection::after {top:auto;bottom:0;right:-4px;transform:rotate(135deg)} }