.connected{border-block:1px solid var(--line);background:radial-gradient(ellipse at 50% 35%,#28211b 0%,#111113 65%)}
.connection-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.connection-tabs button{display:flex;gap:14px;align-items:center;text-align:left;padding:20px 16px;color:var(--quiet);border:0;border-top:2px solid transparent;background:transparent;font:12px JetBrains,monospace}
.connection-tabs button span{font:16px/1.5 Plex,sans-serif;color:var(--muted)}
.connection-tabs button.active{border-color:var(--accent);background:#ef8a3c0d;color:var(--accent)}.connection-tabs button.active span{color:var(--text)}
.connection-figure{margin:0;border:1px solid #39393f;border-radius:6px;overflow:hidden;background:#151518}
.connection-canvas{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(150px,.55fr) minmax(0,1.9fr);gap:22px;padding:42px 34px;align-items:center}
.endpoint-kicker{display:block;color:var(--muted);font:11px/1.5 JetBrains,monospace;letter-spacing:1px;margin-bottom:22px;text-align:center}
.phone-illustration{max-width:205px;margin:auto;border:2px solid #6c6c75;border-radius:28px;padding:12px 9px 14px;background:#0e0e10;box-shadow:0 20px 40px #0005}
.phone-speaker{width:45px;height:4px;background:#44444c;border-radius:4px;margin:0 auto 14px}.phone-brand{display:block;width:92%;margin:0 auto 13px}
.phone-scene{height:235px;position:relative;background-image:url('assets/connected-flood-perspectives.png');background-size:auto 200%;background-position:84% 100%;overflow:hidden;border-radius:5px}
.phone-scene>span{position:absolute;top:9px;left:7px;right:7px;text-align:center;font:8px/1.5 JetBrains,monospace;color:#fff;background:#0009;padding:5px}
.phone-scene>b{position:absolute;bottom:8px;left:7px;right:7px;font:12px/1.5 Plex,sans-serif;color:#fff;background:#000a;padding:6px;font-weight:400}
.phone-frame{position:absolute;inset:70px 28px;border:1px solid #fff9;border-radius:5px}.phone-data{display:flex;justify-content:space-around;font:10px/1.5 JetBrains,monospace;color:#d9d9df;margin-top:13px}
.mobile-endpoint>p{font-size:13px;line-height:1.6;color:var(--muted);text-align:center;margin:20px 0 0}
.connection-link{text-align:center;color:var(--accent)}.connection-link>span{font:11px/1.6 JetBrains,monospace;letter-spacing:.7px}.connection-link small{display:block;font:13px/1.6 Plex,sans-serif;color:var(--muted)}
.connection-line{height:34px;display:flex;align-items:center;margin:12px 0}.connection-line i{height:2px;flex:1;background:linear-gradient(90deg,#ef8a3c44,var(--accent))}.connection-line b{font-size:26px;font-weight:400;line-height:1}
[data-route=setup] .connection-line{flex-direction:row-reverse}[data-route=setup] .connection-line i{background:linear-gradient(90deg,var(--accent),#ef8a3c44)}
.desktop-illustration{border:2px solid #595961;border-radius:9px;overflow:hidden;box-shadow:0 20px 50px #0006;background:#0e0e10}.desktop-title{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;color:#ececef;font:13px/1.5 Plex,sans-serif}.desktop-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.desktop-illustration img{display:block;width:100%;height:auto}.monitor-foot{width:28%;height:22px;border-bottom:4px solid #606068;background:linear-gradient(90deg,transparent 35%,#3a3a41 35%,#3a3a41 65%,transparent 65%);margin:auto}
.desktop-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px}.desktop-actions span{border:1px solid #46464e;border-radius:4px;padding:7px 10px;font-size:12px;color:var(--muted)}
.connection-figure figcaption{border-top:1px solid var(--line);padding:16px 20px;display:flex;justify-content:space-between;gap:15px;font-size:12px;line-height:1.6;color:var(--quiet)}
.connection-story{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;margin-top:38px}.connection-story h3{font-size:32px;line-height:1.15;letter-spacing:-1px}.connection-story p:not(.eyebrow){font-size:16px;line-height:1.65;color:var(--muted)}.connection-detail{border-left:1px solid #514134;padding-left:30px}.connection-detail>span,.connection-roles article>span{font:12px/1.6 JetBrains,monospace;color:var(--accent)}.connection-detail p{margin-top:18px}.connection-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:50px}.connection-roles article{padding-top:24px;border-top:1px solid #3a3a42}.connection-roles h3{font-size:27px;line-height:1.2;margin:24px 0 16px;letter-spacing:-.7px}.connection-roles p{font-size:16px;line-height:1.65;color:var(--muted)}
.connection-notes{margin-top:28px;padding:22px;border:1px solid var(--line);border-radius:4px;background:#151518}.connection-notes summary{cursor:pointer;font-size:16px}.connection-notes p{font-size:16px;line-height:1.65;color:var(--muted);margin:20px 0 0}.connection-notes strong{color:var(--text);font-weight:500}
@media(max-width:1000px){.connection-canvas{grid-template-columns:minmax(145px,.75fr) minmax(115px,.5fr) minmax(0,1.7fr);padding:30px 20px;gap:16px}.phone-scene{height:200px}.connection-story{gap:35px}}
@media(max-width:760px){.connection-tabs{grid-template-columns:1fr}.connection-tabs button{padding:15px 12px}.connection-tabs button span{font-size:15px}.connection-canvas{grid-template-columns:1fr;padding:30px 20px;gap:24px}.phone-illustration{width:190px}.phone-scene{height:230px}.connection-link{max-width:250px;width:100%;margin:auto}.connection-link small{margin-top:0}.connection-figure figcaption{display:block;font-size:12px}.connection-figure figcaption span{display:block;margin:4px 0}.connection-story,.connection-roles{grid-template-columns:1fr;gap:25px}.connection-detail{padding:22px 0 0;border-left:0;border-top:1px solid #514134}.connection-story h3{font-size:29px}.connection-roles{margin-top:32px}.desktop-title{font-size:12px}.endpoint-kicker{font-size:11px}}
/* Continuous vector-style arrows, independent of font glyph spacing. */
.connection-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.connection-line{position:relative;display:block}
.connection-line b{display:none}
.connection-line i,[data-route=setup] .connection-line i{position:absolute;inset:16px 1px auto;height:2px;background:var(--accent)}
.connection-line::before,.connection-line::after{content:'';position:absolute;top:12px;width:8px;height:8px;transform:rotate(45deg);border-color:var(--accent);border-style:solid}
.connection-line::before{left:0;border-width:0 0 2px 2px;display:none}
.connection-line::after{right:0;border-width:2px 2px 0 0}
[data-route=relay] .connection-line::before,[data-route=setup] .connection-line::before,[data-route=fleet] .connection-line::before{display:block}
[data-route=setup] .connection-line::after,[data-route=fleet] .connection-line::after{display:none}
.connection-link small{white-space:pre-line}
@media(max-width:1000px) and (min-width:761px){.connection-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.connection-tabs{grid-template-columns:1fr}}
.fleet-endpoint{display:none}
[data-route=fleet] .mobile-endpoint{display:none}
[data-route=fleet] .fleet-endpoint{display:block}
.connection-canvas[data-route=fleet]{grid-template-columns:minmax(280px,1.25fr) minmax(145px,.6fr) minmax(0,1.6fr)}
.fleet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px;align-items:end}
.fleet-device{text-align:center;min-width:0}
.fleet-device>span{display:block;font:12px/1.5 Plex,sans-serif;color:var(--muted);margin-top:9px}
.fleet-phone{padding:7px 5px 10px;border:1px solid #85858e;border-radius:12px;background:#0e0e10;box-shadow:0 6px 15px #0004}
.fleet-phone>i{display:block;width:20px;height:3px;background:#66666e;margin:0 auto 9px;border-radius:3px}
.fleet-phone>img,.fleet-screen>img{display:block;width:100%;height:auto;margin-bottom:8px}
.fleet-camera{background:url('assets/connected-flood-perspectives.png') 84% 100% / auto 200%;height:110px;border-radius:3px}
.fleet-device:nth-child(2) .fleet-camera{background-position:16% 0}.fleet-device:nth-child(3) .fleet-camera{background-position:84% 0}.fleet-device:nth-child(4) .fleet-camera{background-position:16% 100%}
.fleet-lite{grid-column:span 2}
.fleet-screen{border:1px solid #85858e;border-bottom:5px solid #65656d;border-radius:5px;padding:10px 8px 6px;background:#0e0e10}
.fleet-screen>img{width:85%;margin:0 auto 10px}.fleet-screen .fleet-camera{height:80px;background-size:200% 200%;background-position:0 0}
.fleet-endpoint>p{font-size:13px;line-height:1.6;text-align:center;color:var(--muted);margin:20px 0 0}
@media(max-width:1100px) and (min-width:761px){.connection-canvas[data-route=fleet]{grid-template-columns:minmax(230px,1.2fr) minmax(110px,.6fr) minmax(0,1.3fr)}.fleet-grid{gap:14px 8px}.fleet-camera{height:85px}}
@media(max-width:760px){.connection-canvas[data-route=fleet]{grid-template-columns:1fr}.fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:310px;margin:auto;gap:20px}.fleet-phone{max-width:110px;margin:auto}.fleet-camera{height:140px}.fleet-lite{grid-column:span 1}.fleet-screen .fleet-camera{height:65px}}

.fleet-lite:last-child .fleet-camera{background-position:0 100%}

/* Reserve the full vertical arrow height so it cannot cross labels on phones. */
@media(max-width:760px){
 .connection-link>span{display:block}
 .connection-line{width:34px;height:72px;margin:18px auto;transform:none}
 .connection-line i,[data-route=setup] .connection-line i{inset:1px auto 1px 16px;width:2px;height:auto}
 .connection-line::before,.connection-line::after{left:13px;right:auto}
 .connection-line::before{top:0;border-width:2px 0 0 2px}
 .connection-line::after{top:auto;bottom:0;border-width:0 2px 2px 0}
}