/* A physical cutaway above, service formats below: each illustration has one job. */
.hero-stage{margin:0 -8px 0 -10px;padding-top:4px;width:auto}
.hero .hardware-label{position:static;display:block;margin:0 18px 2px;font-size:12px}
.open-server{display:block;width:100%;height:auto;margin:9px 0 4px;overflow:visible}
.open-server .server-component{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:opacity 240ms ease,scale 300ms var(--motion-ease),filter 300ms ease;opacity:1}
.open-server .component-hit{fill:transparent;pointer-events:all}
.open-server .component-ring{fill:none;stroke:#8260c4;stroke-width:2;opacity:0;pointer-events:none;transition:opacity 240ms ease}
.open-server .server-component[aria-pressed=true]{opacity:1;scale:1;filter:drop-shadow(0 4px 7px #5d458f26)}
.open-server .server-component[aria-pressed=true] .component-ring{opacity:1}
.open-server .server-component:focus{outline:none}.open-server .server-component:focus-visible .component-ring{opacity:1;stroke:#52308f;stroke-width:3;stroke-dasharray:5 3}
.open-server .board-context{opacity:1;pointer-events:none;transition:opacity 240ms ease}
.hero:not([data-layer=server]) .open-server .server-component[aria-pressed=false],.hero:not([data-layer=server]) .open-server .board-context{opacity:.16}
.hero-stage .hardware-controls{margin-left:18px;margin-right:18px}
.hero-stage .hero-caption{margin:0 18px;min-height:119px}
.hero-stage .hero-caption strong{font-size:15px}.hero-stage .hero-caption div>span{max-width:420px}
.service-explorer{margin-top:48px;margin-bottom:76px}
.service-explorer>.section-heading{margin-bottom:24px}.service-explorer>.section-heading p{max-width:540px}
.service-workbench{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d8d0e5;border-radius:var(--radius-panel);background:#fff;overflow:hidden}
.service-rack{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:34px 20px 23px;background:#f0edf6;isolation:isolate}
.service-rack:before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#b9accb80 1px,transparent 1px);background-size:23px 23px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.service-visual-label{position:absolute;top:27px;left:29px;font-size:13px;font-weight:500;color:#6d5d83}
.service-visual-note{font-size:11px;color:#857991;align-self:center;margin-top:16px}
.service-rack .rack-art{width:100%;height:auto;max-height:430px;overflow:visible}
.service-rack .server-module{transform-box:view-box;transition:translate 620ms var(--motion-ease),opacity 400ms ease}
.service-explorer[data-service=cpu] .rack-top{translate:0 -24px}.service-explorer[data-service=cpu] .rack-middle{opacity:.85}.service-explorer[data-service=cpu] .rack-bottom{opacity:.65}
.service-explorer[data-service=gpu] .rack-top{translate:0 -40px;opacity:.22}.service-explorer[data-service=gpu] .rack-middle{translate:30px -6px}.service-explorer[data-service=gpu] .rack-bottom{opacity:.35}
.service-explorer[data-service=gpu] .rack-middle .rack-led{fill:#bc8757}
.service-explorer[data-service=metal] .rack-top{translate:0 24px}.service-explorer[data-service=metal] .rack-middle{translate:0 22px;opacity:.18}.service-explorer[data-service=metal] .rack-bottom{translate:0 22px;opacity:.1}
.service-explorer[data-service=storage] .rack-top{translate:0 -45px;opacity:.22}.service-explorer[data-service=storage] .rack-middle{translate:0 -22px;opacity:.35}.service-explorer[data-service=storage] .rack-bottom{translate:27px 6px}
.service-explorer[data-service=storage] .rack-bottom .rack-led{fill:#4c8f8b}
.service-picker{min-width:0;padding:28px}
.service-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.service-options button{min-width:0;text-align:left;padding:15px 14px;border:1px solid #ddd5e8;border-radius:var(--radius-control);background:#faf8fd;color:#493c5a;font:inherit;cursor:pointer;transition:background 200ms,color 200ms,border-color 200ms}
.service-options button strong{display:block;font-size:14px;line-height:1.35;font-weight:550}.service-options button span{display:block;font-size:11px;line-height:1.5;margin-top:7px;color:#84758e}
.service-options button[aria-pressed=true]{background:#49365f;color:white;border-color:#49365f}.service-options button[aria-pressed=true] span{color:#d8cae7}
.service-options button:hover:not([aria-pressed=true]){background:#eee8f6;border-color:#b9a5d0}.service-options button:focus-visible{outline:3px solid #9875cc;outline-offset:3px}
.service-explanation{padding-top:27px;min-height:245px;display:flex;flex-direction:column;align-items:flex-start}
.service-explanation h3{font-size:22px;line-height:1.2;letter-spacing:-.035em;font-weight:550;margin:0 0 13px}
.service-explanation p{font-size:13px;line-height:1.75;color:#71617e;margin:0 0 17px;max-width:480px}
.service-explanation small{font-size:10px;line-height:1.5;color:#897696;margin-bottom:16px}
.service-explanation .button-primary{margin-top:auto;font-size:12px;min-height:46px;padding:13px 17px;gap:15px}
@media(max-width:1000px){.hero-stage{margin:0 -10px}.hero-stage .hardware-controls,.hero-stage .hero-caption{margin-left:8px;margin-right:8px}.hero-stage .hero-caption{min-height:145px}.service-picker{padding:22px}.service-options button{padding:13px 11px}.service-explanation h3{font-size:20px}}
@media(max-width:700px){.hero-stage{width:100%;max-width:440px;margin:30px 0 0}.hero .hardware-label{margin:0 0 10px}.hero-stage .hardware-controls,.hero-stage .hero-caption{margin-left:0;margin-right:0}.hero-stage .hero-caption{min-height:130px}.service-explorer{margin-top:38px;margin-bottom:52px}.service-workbench{grid-template-columns:1fr}.service-rack{padding:25px 20px 16px}.service-rack .rack-art{max-height:300px}.service-visual-label{top:20px;left:22px;font-size:12px}.service-visual-note{margin-top:0}.service-picker{padding:20px}.service-explanation{min-height:245px}.service-options button{min-height:91px}.service-explanation .button-primary{width:100%;justify-content:space-between}.service-explanation h3{font-size:24px}}

/* Solid parts share one x/y/z projection; selection preserves their geometry. */
.open-server{filter:drop-shadow(0 18px 11px #57426924)}
.open-server .server-component{filter:drop-shadow(0 5px 1px #30254040)}
.open-server .server-component[aria-pressed=true]{filter:drop-shadow(0 8px 2px #30254088) drop-shadow(0 0 7px #b593da50);translate:0 -12px;scale:1}
.open-server .server-component{transition:opacity 240ms ease,translate 320ms var(--motion-ease),scale 300ms var(--motion-ease),filter 300ms ease}

.hero-stage .hardware-controls button{font-size:13px;padding-inline:4px}
.hero-stage .hardware-controls button span{font-size:9px}