.connection-page{--connection-text:#655875;background:linear-gradient(180deg,var(--vionsy-tint),#fff 850px) no-repeat}
.connection-page .service-eyebrow{color:var(--vionsy-strong)}
.connection-page .page-sections{margin-top:36px}
.connection-page section[id]{scroll-margin-top:85px}
.connection-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;padding-block:22px 30px}
.connection-intro h1{font-size:clamp(42px,4.5vw,64px);line-height:1.08;margin:0 0 23px;max-width:580px}
.connection-lead{font-size:19px;color:var(--connection-text);margin:0;max-width:530px}
.connection-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:28px}
.connection-actions .orange-button{gap:15px}
.connection-text-link{font-size:15px;font-weight:700;color:var(--vionsy-strong);text-decoration:underline;text-underline-offset:5px;line-height:1.5}
.overview-card{padding:32px 26px 25px;border:1px solid var(--vionsy-line);border-radius:24px;background:#fff;box-shadow:0 18px 55px #47396f08}
.overview-card>p{font-size:14px;color:var(--connection-text);margin:22px 0 0;border-top:1px solid var(--vionsy-line);padding-top:20px}
.connection-flow{display:flex;align-items:flex-start;justify-content:center;width:100%;color:var(--vionsy-strong)}
.diagram-node{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.equipment-icon{display:block;width:100%;max-width:110px;height:80px;color:var(--vionsy-strong);flex-shrink:0}
.diagram-node strong{display:block;max-width:150px;font-size:13px;line-height:1.4;font-weight:800;margin-top:9px;color:var(--vionsy-deep)}
.diagram-node>span{display:block;font-size:11px;line-height:1.5;color:var(--connection-text);margin-top:6px}
.connection-wire{width:32px;flex:0 0 32px;margin-top:40px;position:relative;color:var(--vionsy-strong);border-top:2px solid currentColor}
.connection-wire.internet{border-top-style:dashed;color:#9581c2}
.connection-wire:after{position:absolute;content:'';width:6px;height:6px;right:0;top:-4px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.connection-legend{display:flex;gap:25px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--connection-text);margin-top:24px;line-height:1.4}
.connection-legend>span{display:flex;align-items:center;gap:8px}
.legend-line{width:28px;border-top:2px solid var(--vionsy-strong)}
.legend-line.internet{border-top-style:dashed;border-color:#9581c2}
.connection-section{padding-block:64px}
.connection-heading{max-width:850px}
.connection-heading h2{max-width:850px}
.connection-heading>p:not(.service-eyebrow){font-size:17px;color:var(--connection-text);margin:19px 0 0;max-width:800px}
.section-index{display:block;font-size:13px;font-weight:800;letter-spacing:.09em;color:var(--vionsy-strong);margin-bottom:16px}
.connection-section>.connection-legend{justify-content:flex-start;margin-top:25px}
.connection-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.connection-option{padding:29px 30px 26px;border:1px solid var(--vionsy-line);border-radius:20px;background:#fff;display:flex;flex-direction:column;min-width:0}
.option-top{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:19px}
.option-number{font-size:14px;font-weight:800;color:var(--vionsy-strong)}
.option-tag{font-size:11px;line-height:1.4;padding:6px 10px;border-radius:7px;background:var(--vionsy-tint);color:var(--vionsy-deep);text-align:right}
.connection-option h3{font-size:25px;margin:0 0 12px}
.option-flow{background:#faf9ff;border-radius:14px;padding:23px 14px 19px;margin-bottom:21px;min-height:166px;align-items:flex-start}
.option-flow .diagram-node strong{font-size:12px}
.option-flow .equipment-icon{max-width:94px;height:68px}
.option-flow .connection-wire{width:30px;flex-basis:30px;margin-top:34px}
.connection-option>p{font-size:15px;color:var(--connection-text);margin:0}
.connection-sync{padding-block:60px;background:var(--vionsy-tint);border-block:1px solid var(--vionsy-line)}
.sync-diagram{margin:33px 0 0;background:#fff;border:1px solid var(--vionsy-line);border-radius:22px;padding:28px 45px}
.sync-source{display:flex;align-items:center;flex-direction:column;text-align:center;font-size:14px;line-height:1.45}
.sync-source .equipment-icon{height:64px;max-width:92px;margin-bottom:7px}
.sync-cable{height:78px;position:relative;display:flex;align-items:center;justify-content:center}
.sync-cable:before{position:absolute;content:'';height:100%;width:2px;left:calc(50% - 1px);top:0;background:var(--vionsy-strong)}
.sync-cable>span{position:relative;z-index:1;background:#fff;padding:5px 12px;max-width:280px;text-align:center;font-size:12px;line-height:1.5;color:var(--connection-text)}
.sync-screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.sync-screens:before{position:absolute;content:'';height:2px;background:var(--vionsy-strong);top:0;left:calc((100% - 80px)/6);right:calc((100% - 80px)/6)}
.sync-screen{position:relative;padding-top:27px;text-align:center;min-width:0}
.sync-screen:before{position:absolute;content:'';height:27px;width:2px;background:var(--vionsy-strong);left:calc(50% - 1px);top:0}
.sync-screen>span{font-size:12px;display:block;margin-top:8px;color:var(--connection-text)}
.menu-monitor{position:relative;padding-bottom:15px;max-width:270px;margin-inline:auto}
.menu-picture{aspect-ratio:16/9;border:6px solid #554775;border-radius:7px;background:#f3f1ff;overflow:hidden;position:relative;text-align:left;padding:7% 9%}
.menu-picture>span{display:block;font-size:clamp(6px,1.1vw,14px);font-weight:800;letter-spacing:.08em;color:#47396f}
.menu-art{position:absolute;width:37%;aspect-ratio:1;left:9%;bottom:11%;border:2px solid #dba878;border-radius:50%;background:#f6d89e;box-shadow:0 0 0 4px #fff}
.menu-art i,.menu-art b{position:absolute;width:21%;height:21%;border-radius:50%;background:#cc806a;top:24%;left:23%}
.menu-art b{top:54%;left:48%}.menu-art b:last-child{top:20%;left:60%}
.menu-lines{position:absolute;left:60%;right:9%;top:43%;display:grid;gap:9px}
.menu-lines i{display:block;height:5px;border-radius:2px;background:#b6a8df}
.menu-lines i:last-child{width:67%}
.monitor-foot{position:absolute;width:22%;height:12px;border-bottom:3px solid #554775;left:39%;bottom:0}
.monitor-foot:before{position:absolute;content:'';height:100%;width:3px;background:#554775;left:calc(50% - 1.5px)}
.sync-diagram figcaption{text-align:center;margin-top:24px;font-size:14px;font-weight:700;color:var(--vionsy-strong)}
.connection-comparison{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:32px}
.connection-comparison article{border-top:1px solid #d5cbe9;padding-top:23px}
.comparison-mark{display:block;color:var(--vionsy-strong);font-size:15px;font-weight:800;margin-bottom:15px}
.connection-comparison h3{font-size:21px}
.connection-comparison p{font-size:15px;color:var(--connection-text);margin:0}
.offline-steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:33px 0 0;padding:0;gap:30px}
.offline-steps li{padding-top:23px;border-top:1px solid var(--vionsy-line);min-width:0}
.offline-number{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--vionsy-tint);color:var(--vionsy-strong);font-size:12px;font-weight:800;margin-bottom:18px}
.offline-steps p{font-size:15px;color:var(--connection-text);margin:0}
.connection-note{font-size:14px;color:var(--connection-text);padding:18px 22px;border-left:3px solid var(--vionsy);background:#faf9ff;border-radius:0 9px 9px 0;margin:28px 0 0}
.connection-auto{border:1px solid var(--vionsy-line);background:var(--vionsy-tint);border-radius:22px;padding:35px 40px;display:grid;grid-template-columns:72px 1fr;gap:28px}
.auto-symbol{display:grid;place-items:center;width:66px;height:66px;border-radius:18px;background:#fff;color:var(--vionsy-strong);font-size:45px;line-height:1}
.connection-auto h2{font-size:32px;max-width:760px}
.connection-auto p:not(.service-eyebrow){font-size:15px;color:var(--connection-text);max-width:920px;margin:17px 0 0}
.connection-auto .auto-note{padding-top:16px;border-top:1px solid var(--vionsy-line)}
.connection-install{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:center}
.connection-install p{font-size:16px;color:var(--connection-text);max-width:730px;margin:19px 0 0}
.install-actions{display:flex;flex-direction:column;align-items:flex-start;gap:17px;justify-self:center}
.install-actions .orange-button,.install-actions .quiet-button{gap:20px;min-height:48px}
.connection-page a:focus-visible,.connection-page summary:focus-visible{outline:3px solid var(--vionsy-strong);outline-offset:5px}
@media(max-width:1050px){.connection-hero{grid-template-columns:1fr;gap:30px}.connection-intro{max-width:850px}.connection-intro h1{max-width:none}.connection-lead{max-width:750px}.overview-card{padding:30px;max-width:850px}.overview-flow .diagram-node strong{max-width:190px;font-size:14px}.connection-options{gap:18px}.connection-option{padding:23px 21px}.option-flow{padding-inline:10px}.option-flow .connection-wire{width:20px;flex-basis:20px}.connection-install{gap:35px}}
@media(max-width:700px){.connection-options{grid-template-columns:1fr}.connection-hero{padding-top:9px}.connection-intro h1{font-size:43px}.connection-lead{font-size:17px}.connection-actions{gap:17px}.connection-actions a{font-size:14px}.overview-card{padding:24px 17px 20px;border-radius:18px}.overview-flow .equipment-icon{height:59px;max-width:90px}.overview-flow .connection-wire{width:20px;flex-basis:20px;margin-top:30px}.overview-flow .diagram-node strong{font-size:11px;margin-top:7px}.overview-flow .diagram-node>span{font-size:10px}.connection-legend{font-size:11px;gap:17px}.overview-card>p{font-size:14px}.connection-page .page-sections{margin-top:19px}.connection-section{padding-block:42px}.connection-heading>p:not(.service-eyebrow){font-size:16px}.connection-option{padding:24px 21px}.connection-option h3{font-size:24px}.option-flow{padding:22px 14px 18px}.option-flow .connection-wire{width:26px;flex-basis:26px}.connection-sync{padding-block:42px}.sync-diagram{padding:24px 12px;border-radius:16px}.sync-screens{gap:12px}.sync-screens:before{left:calc((100% - 24px)/6);right:calc((100% - 24px)/6)}.menu-picture{border-width:3px;border-radius:4px;padding:7%}.menu-picture>span{font-size:clamp(5px,1.6vw,11px);letter-spacing:.025em}.menu-art{border-width:1px;box-shadow:0 0 0 2px #fff}.menu-lines{gap:4px}.menu-lines i{height:3px}.menu-monitor{padding-bottom:11px}.monitor-foot{height:9px;border-width:2px}.sync-screen>span{font-size:10px}.sync-cable>span{max-width:230px;font-size:11px}.sync-diagram figcaption{font-size:12px;max-width:300px;margin:20px auto 0}.connection-comparison{grid-template-columns:1fr;gap:24px}.connection-comparison h3{font-size:20px}.offline-steps{grid-template-columns:1fr;gap:23px;margin-top:27px}.offline-steps li{position:relative;padding:21px 0 0 52px}.offline-number{position:absolute;left:0;top:21px;width:33px;height:33px}.offline-steps h3{font-size:21px}.connection-auto{padding:26px 23px;grid-template-columns:1fr;gap:19px;border-radius:18px}.auto-symbol{width:50px;height:50px;font-size:35px;border-radius:13px}.connection-auto h2{font-size:28px}.connection-install{grid-template-columns:1fr;gap:26px}.install-actions{justify-self:start}.connection-note{padding:16px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.connection-page *{scroll-behavior:auto!important}}