*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:#fbfaff;color:var(--fg-1);overflow-x:hidden}a{color:inherit}.wrap{width:min(1160px,calc(100% - 48px));margin:auto}.section{padding:112px 0}.eyebrow{margin:0 0 16px;color:#7657f6;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.site-nav{position:sticky;top:0;z-index:20;background:rgba(251,250,255,.82);border-bottom:1px solid transparent;backdrop-filter:blur(16px);transition:.2s}.site-nav.scrolled{border-color:#ebe7f1;box-shadow:0 8px 30px rgba(38,25,68,.05)}.nav-inner{width:min(1160px,calc(100% - 48px));height:72px;margin:auto;display:flex;align-items:center;gap:32px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#7657f6,#a855f7);color:#fff;box-shadow:0 6px 16px rgba(118,87,246,.24)}.brand-mark svg{width:18px}.nav-links{display:flex;gap:30px;margin-left:auto}.nav-links a{font-size:14px;color:#625d71;text-decoration:none}.nav-links a:hover{color:#171329}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:9px;text-decoration:none;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-sm{min-height:40px;padding:0 17px}.button-lg{min-height:50px;padding:0 22px}.button-primary{color:#fff;background:linear-gradient(135deg,#7657f6,#8e5ff4);box-shadow:0 8px 24px rgba(118,87,246,.25)}.button-primary:hover{box-shadow:0 12px 30px rgba(118,87,246,.34)}.button-secondary{color:#332d40;background:#fff;border-color:#ded9e8;box-shadow:0 4px 14px rgba(40,27,70,.05)}.button-light{background:#fff;color:#251b50}.button:focus-visible,.nav-links a:focus-visible{outline:3px solid rgba(118,87,246,.3);outline-offset:3px}.hero{position:relative;padding:104px 0 118px;background:radial-gradient(circle at 82% 28%,rgba(195,177,255,.32),transparent 26%),radial-gradient(circle at 7% 18%,rgba(229,219,255,.5),transparent 25%),linear-gradient(#fff,#faf8ff);border-bottom:1px solid #eeeaf5}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(118,87,246,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(118,87,246,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 70%)}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}.hero-copy h1{font-size:clamp(3.3rem,6vw,5.3rem);line-height:.96;letter-spacing:-.055em;margin:0 0 28px;max-width:680px}.lede{font-size:19px;line-height:1.65;color:#625d71;max-width:590px;margin:0 0 32px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.proof-list{display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:30px 0 0;list-style:none;color:#6e687a;font-size:13px}.proof-list li{display:flex;align-items:center;gap:8px}.proof-list li span{width:7px;height:7px;border-radius:50%;background:#8b6cf6;box-shadow:0 0 0 4px rgba(118,87,246,.1)}.hero-product{position:relative;padding:38px 18px}.product-window{position:relative;background:rgba(255,255,255,.92);border:1px solid #ded8eb;border-radius:18px;box-shadow:0 32px 80px rgba(57,37,91,.18),0 2px 8px rgba(57,37,91,.08);overflow:hidden}.window-bar{height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #eeeaf4;background:#faf9fc}.window-bar>span{width:8px;height:8px;border-radius:50%;background:#dad5e1}.window-bar small{margin-left:8px;color:#948e9f;font-family:var(--font-mono);font-size:10px}.network-stage{position:relative;height:305px;background:radial-gradient(circle at 50% 48%,rgba(118,87,246,.12),transparent 36%)}.network-lines{position:absolute;inset:0;width:100%;height:100%}.track{fill:none;stroke:#e6e0f0;stroke-width:2}.flow{fill:none;stroke:#8b6cf6;stroke-width:2;stroke-dasharray:6 10;animation:dash 1.5s linear infinite}.flow-delay{animation-delay:-.7s}.network-node,.network-core{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.network-node{width:92px;height:68px;background:#fff;border:1px solid #e5dfed;border-radius:12px;box-shadow:0 8px 20px rgba(45,30,75,.08)}.network-node strong,.network-core strong{font-size:11px}.network-node small,.network-core small{font-size:9px;color:#9992a4;margin-top:2px}.node-icon{color:#8061ec;font-size:18px;margin-bottom:3px}.node-home{left:7%;top:15%}.node-vps{right:7%;top:15%}.node-laptop{left:7%;bottom:13%}.node-visitor{right:7%;bottom:13%}.network-core{width:84px;height:84px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;color:#fff;background:linear-gradient(145deg,#7657f6,#9c65ee);box-shadow:0 14px 32px rgba(118,87,246,.34)}.core-pulse{position:absolute;inset:-9px;border:1px solid rgba(118,87,246,.22);border-radius:50%;animation:pulse 2.4s infinite}.network-core small{color:#ddd5ff}.status-row{height:42px;display:flex;align-items:center;gap:20px;padding:0 18px;border-top:1px solid #eeeaf4;color:#8e8999;font-size:10px}.status-row span:first-child{margin-right:auto;color:#5d5768}.status-row i{display:inline-block;width:6px;height:6px;background:#22b573;border-radius:50%;margin-right:6px}.floating-card{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5dfed;border-radius:12px;padding:11px 14px;box-shadow:0 15px 40px rgba(55,35,90,.15)}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:11px}.floating-card small{color:#8c8597;font-size:9px;margin-top:2px}.floating-top{right:-24px;top:8px}.floating-bottom{left:-24px;bottom:6px}.status-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#eaf8f2;color:#1e9c6a;font-size:12px}.status-icon.globe{background:#eee9ff;color:#7657f6}.section-heading{text-align:center;max-width:680px;margin:0 auto 52px}.section-heading h2,.showcase-copy h2,.pair-card h2,.dark-copy h2,.closing h2{font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 20px}.section-heading>p:last-child,.showcase-copy>p,.pair-card>p,.dark-copy>p,.closing-inner>p{font-size:17px;line-height:1.7;color:#6b6576;margin:0}.capabilities{background:#fff}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.capability-card{padding:28px 26px 26px;border:1px solid #e9e5ef;border-radius:16px;background:linear-gradient(145deg,#fff,#fcfbff);box-shadow:0 10px 30px rgba(47,31,79,.04);transition:.25s}.capability-card:hover{transform:translateY(-5px);border-color:#d8cfed;box-shadow:0 18px 40px rgba(47,31,79,.09)}.capability-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#eeeaff;color:#7254e8;font:700 18px var(--font-mono);margin-bottom:25px}.card-label{color:#7657f6!important;text-transform:uppercase;letter-spacing:.1em;font-size:10px!important;font-weight:700;margin:0 0 10px!important}.capability-card h3{font-size:20px;letter-spacing:-.02em;margin:0 0 11px}.capability-card>p{color:#746e7e;font-size:14px;line-height:1.65;margin:0 0 25px}.capability-card a{color:#5e43cf;font-size:12px;font-weight:700;text-decoration:none}.capability-card a span{margin-left:4px}.showcase{background:#f8f6fc}.showcase-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:90px;align-items:center}.check-list{list-style:none;padding:0;margin:29px 0 0;display:grid;gap:14px;color:#4f4959;font-size:14px}.check-list li{display:flex;align-items:center;gap:11px}.check-list span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#ebe6ff;color:#6849dc;font-weight:700}.route-card{background:#fff;border:1px solid #e3deeb;border-radius:18px;box-shadow:0 24px 60px rgba(47,31,79,.1);overflow:hidden}.route-header{height:55px;padding:0 20px;display:flex;align-items:center;border-bottom:1px solid #eeeaf3;font-size:12px;font-weight:700}.route-header i{margin-left:auto;font-style:normal;color:#168758;background:#eaf8f2;border-radius:999px;padding:4px 9px;font-size:9px}.url-bar{margin:20px;display:flex;align-items:center;gap:10px;padding:13px 15px;background:#f8f7fb;border:1px solid #e8e4ed;border-radius:9px;font-family:var(--font-mono);font-size:11px}.lock{color:#7657f6}.copy{margin-left:auto;color:#9c96a6}.route-flow{display:flex;align-items:center;justify-content:center;padding:23px 14px 32px}.route-node{min-width:93px;text-align:center}.route-node>span{width:44px;height:44px;display:grid;place-items:center;margin:0 auto 9px;border-radius:12px;background:#f4f1fa;color:#7657f6}.route-node.edge>span{color:#fff;background:linear-gradient(135deg,#7657f6,#9f6be9);box-shadow:0 8px 20px rgba(118,87,246,.24)}.route-node strong,.route-node small{display:block}.route-node strong{font-size:10px}.route-node small{font-size:8px;color:#9992a4;margin-top:3px}.route-path{flex:1;display:flex;justify-content:space-evenly;position:relative}.route-path:before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:#dcd5e8}.route-path i{width:7px;height:7px;border-radius:50%;background:#8b6cf6;z-index:1}.route-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eeeaf3}.route-meta span{padding:15px 20px;color:#918a9c;font-size:9px}.route-meta span+span{border-left:1px solid #eeeaf3}.route-meta strong{display:block;color:#4b4555;margin-top:3px}.pair-section{background:#fff}.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.pair-card{min-height:410px;padding:48px;border-radius:20px;border:1px solid #e7e2ed;background:radial-gradient(circle at 100% 0,rgba(215,202,255,.36),transparent 35%),#fbfaff}.pair-card h2{font-size:36px;max-width:420px}.pair-card>p{max-width:470px;font-size:15px}.mini-console{margin-top:50px;padding:18px 20px;border-radius:11px;background:#171329;color:#f1edff;font:12px/1.9 var(--font-mono);box-shadow:0 18px 35px rgba(33,22,51,.18)}.prompt{color:#a88bf9}.muted{color:#928aa2}.success{color:#42d99a}.gateway-line{margin-top:66px;display:flex;align-items:center;justify-content:center;gap:0;font:10px var(--font-mono);color:#716a7d}.gateway-line span,.gateway-line strong{padding:12px 13px;border:1px solid #ded7e9;border-radius:9px;background:#fff;white-space:nowrap}.gateway-line strong{color:#fff;background:#7657f6;border-color:#7657f6}.gateway-line i{width:40px;height:1px;background:#cfc7dd}.dark-band{position:relative;overflow:hidden;background:#110c2d;color:#fff;padding:120px 0}.dark-band:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 65%,rgba(108,76,235,.35),transparent 32%),linear-gradient(rgba(139,108,246,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(139,108,246,.07) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;mask-image:linear-gradient(90deg,transparent,black)}.dark-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}.dark-copy .eyebrow{color:#ae94ff}.dark-copy h2{font-size:clamp(2.5rem,5vw,4.1rem)}.dark-copy>p{color:#b9b1cf}.dark-points{display:grid;gap:12px;padding:0;margin:28px 0 34px;list-style:none;color:#d2cbe2;font-size:13px}.dark-points li:before{content:"✓";color:#9d7df7;margin-right:10px}.terminal{border:1px solid rgba(194,178,255,.25);border-radius:16px;background:rgba(10,7,28,.8);box-shadow:0 35px 90px rgba(0,0,0,.35);overflow:hidden}.term-bar{height:43px;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.1)}.term-dot{width:9px;height:9px;border-radius:50%}.term-dot.r{background:#ff625a}.term-dot.y{background:#ffc04b}.term-dot.g{background:#35ca62}.term-title{margin-left:8px;color:#777087;font:10px var(--font-mono)}.term-body{min-height:270px;padding:30px;color:#eee9fa;font:12px/2 var(--font-mono)}.term-prompt{color:#a88bf9}.term-out{color:#8d859e}.caret{display:inline-block;width:7px;height:14px;background:#9b7bf5;vertical-align:middle;animation:blink 1s step-end infinite}.closing{text-align:center;background:radial-gradient(circle at 50% 100%,rgba(204,190,255,.32),transparent 45%),#fff}.closing-inner{max-width:760px}.closing-inner>p{margin-bottom:32px}.centered{justify-content:center}.site-footer{padding:65px 0 38px;background:#faf9fc;border-top:1px solid #ebe7f0}.footer-grid{display:flex;justify-content:space-between;gap:50px}.footer-grid>div>p{color:#898391;font-size:13px}.footer-links{display:flex;gap:80px}.footer-links>div{display:grid;gap:11px;min-width:100px}.footer-links strong{font-size:11px;text-transform:uppercase;letter-spacing:.1em}.footer-links a{color:#77717f;text-decoration:none;font-size:12px}.footer-note{margin-top:55px;padding-top:24px;border-top:1px solid #ece8f1;color:#9a94a2;font-size:10px}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}.js .reveal.in{opacity:1;transform:none}@keyframes dash{to{stroke-dashoffset:-32}}@keyframes pulse{50%{transform:scale(1.08);opacity:.35}}@keyframes blink{50%{opacity:0}}
@media(max-width:980px){.hero-grid,.showcase-grid,.dark-grid{grid-template-columns:1fr;gap:60px}.hero-copy{text-align:center}.hero-copy .lede{margin-left:auto;margin-right:auto}.hero-actions,.proof-list{justify-content:center}.hero-product{max-width:700px;width:100%;margin:auto}.capability-grid{grid-template-columns:1fr 1fr}.showcase-copy{max-width:650px}.dark-copy{max-width:700px}.dark-grid .terminal{max-width:720px;width:100%}}
@media(max-width:720px){.wrap,.nav-inner{width:min(100% - 32px,1160px)}.section{padding:82px 0}.nav-links{display:none}.nav-cta{margin-left:auto}.hero{padding:72px 0 82px}.hero-grid{gap:38px}.hero-copy h1{font-size:clamp(2.8rem,15vw,4.2rem)}.lede{font-size:17px}.hero-product{padding:20px 0 38px}.floating-top{right:-4px}.floating-bottom{left:-4px}.network-stage{height:270px}.network-node{width:76px}.capability-grid,.pair-grid{grid-template-columns:1fr}.capability-card{padding:25px}.pair-card{padding:34px;min-height:360px}.pair-card h2{font-size:31px}.route-flow{padding-left:6px;padding-right:6px}.route-node{min-width:74px}.route-path i:nth-child(2){display:none}.dark-band{padding:86px 0}.term-body{padding:22px 18px;min-height:230px;font-size:10px}.footer-grid{display:grid}.footer-links{gap:45px}.floating-card{padding:9px}.floating-card strong{font-size:9px}.floating-card small{font-size:8px}}
@media(max-width:420px){.proof-list{gap:12px}.network-node{width:66px;height:60px}.network-node strong{font-size:9px}.network-node small{font-size:8px}.route-card{margin-left:-4px;margin-right:-4px}.route-meta{grid-template-columns:1fr}.route-meta span+span{border-left:0;border-top:1px solid #eeeaf3}.gateway-line{transform:scale(.84);transform-origin:center}.footer-links{display:grid}.hero-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flow,.core-pulse,.caret{animation:none!important}.js .reveal{opacity:1;transform:none;transition:none}.button,.capability-card{transition:none}.button:hover,.capability-card:hover{transform:none}}
.dark-copy h2{color:#fff}
.node-icon svg,.node-icon{width:18px;height:18px}
.status-icon svg{width:14px;height:14px}
.capability-icon svg{width:19px;height:19px}
.lock svg,.copy svg{width:14px;height:14px;display:block}
.route-node svg{width:20px;height:20px}
.footer-grid .brand-mark svg{width:16px;height:16px}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.node-icon,.status-icon svg,.capability-icon svg,.lock svg,.copy svg,.route-node svg,.footer-grid .brand-mark svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.edge-route{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #e4deee;border-radius:9px;background:rgba(255,255,255,.92);box-shadow:0 7px 18px rgba(45,30,75,.07)}
.edge-route>i{width:7px;height:7px;border-radius:50%;background:#22b573;box-shadow:0 0 0 3px rgba(34,181,115,.11)}
.edge-route strong,.edge-route small{display:block;white-space:nowrap}.edge-route strong{font-size:9px}.edge-route small{margin-top:1px;color:#9992a4;font-size:7px}
.node-home{left:3%;top:13%}.node-vps{right:2%;top:27%}.node-laptop{left:11%;bottom:9%}.node-visitor{right:8%;bottom:4%}
.network-stage:after{content:"";position:absolute;left:50%;top:52%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(118,87,246,.12),transparent 68%);pointer-events:none}
.network-node{z-index:1}
.floating-bottom{bottom:-9px}
.route-options{position:relative;height:280px;margin:4px 18px 10px;overflow:hidden}
.route-options>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-options .flow-track{stroke:#ddd7e8;stroke-width:2;fill:none}
.route-options .route-node{position:absolute;min-width:104px;z-index:1}
.route-options .route-node>span{background:#f3effb}
.route-options .route-hosted>span{color:#fff;background:linear-gradient(135deg,#7657f6,#9f6be9);box-shadow:0 8px 20px rgba(118,87,246,.24)}
.route-internet{left:3%;top:50%;transform:translateY(-50%)}
.route-hosted{left:50%;top:3%;transform:translateX(-50%)}
.route-gateway{left:50%;bottom:0;transform:translateX(-50%)}
.route-app{right:3%;top:50%;transform:translateY(-50%)}
.route-or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:24px;height:24px;display:grid;place-items:center;border:1px solid #e2dced;border-radius:50%;background:#fff;color:#918a9c;font-size:8px;font-weight:700;text-transform:uppercase}
/* Gate entrance motion with visibility instead of parent opacity so nested
primary buttons never wash out against the page background. */
.js .reveal{visibility:hidden;opacity:1;transform:translateY(20px);transition:transform .65s ease}
.js .reveal.in{visibility:visible;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{visibility:visible;opacity:1;transform:none;transition:none}}
.docker-panel{overflow:hidden;border:1px solid #e3deeb;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(47,31,79,.1)}
.docker-header{height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eeeaf3}.docker-header>div{display:flex;align-items:center;gap:11px}.docker-header strong,.docker-header small{display:block}.docker-header strong{font-size:12px}.docker-header small{margin-top:2px;color:#918a9c;font-size:9px}.docker-header>i{font-style:normal;color:#168758;background:#eaf8f2;border-radius:999px;padding:5px 10px;font-size:9px}.docker-mark,.service-icon{display:grid;place-items:center;color:#7657f6;background:#eee9ff}.docker-mark{width:34px;height:34px;border-radius:10px}.docker-mark svg,.service-icon svg,.selected-check svg,.publish-box button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.docker-body{padding:21px}.panel-label{margin:0 0 9px!important;color:#918a9c!important;font-size:9px!important;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.service-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid transparent;border-radius:10px}.service-row.selected{border-color:#dcd3f7;background:#faf8ff}.service-icon{width:34px;height:34px;border-radius:9px}.service-name{flex:1}.service-name strong,.service-name small{display:block}.service-name strong{font-size:11px}.service-name small{margin-top:2px;color:#9a94a4;font-size:8px}.service-row code{color:#6f687a;font-size:9px}.selected-check{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#7657f6;color:#fff}.selected-check svg{width:12px;height:12px}.publish-box{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;margin-top:17px;padding:16px;border-radius:12px;background:#f7f5fa;border:1px solid #e9e4ef}.publish-box label{display:block;margin-bottom:6px;color:#8d8798;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.publish-box button,.hostname-preview{width:100%;height:44px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid #ded8e8;border-radius:8px;background:#fff;color:#4c4558;text-align:left}.publish-box button span{flex:1}.publish-box button strong,.publish-box button small{display:block}.publish-box button strong{font-size:9px}.publish-box button small{color:#22956a;font-size:7px}.publish-box button b{color:#9b94a5}.hostname-preview{gap:0;font-family:var(--font-mono);font-size:8px;white-space:nowrap}.hostname-preview small{color:#9b94a5;font-size:7px}.publish-box>.button{grid-column:1/-1;min-height:42px}
@media(max-width:520px){.publish-box{grid-template-columns:1fr}.publish-box>.button{grid-column:auto}.docker-header>i{display:none}}
.docker-header strong{font-size:14px}.docker-header small{font-size:11px}.docker-header>i{font-size:11px}
.panel-label{font-size:11px!important}
.service-name strong{font-size:13px}.service-name small{font-size:10px}.service-row code{font-size:11px}
.publish-box label{font-size:10px}.publish-box button strong{font-size:11px}.publish-box button small{font-size:9px}
.hostname-preview{font-size:10px}.hostname-preview small{font-size:9px}
.family-diagram{position:relative;height:190px;margin-top:34px;padding:38px 18px 16px;border:1px solid #ded7e9;border-radius:14px;background:rgba(255,255,255,.72);overflow:hidden}.control-label{position:absolute;left:15px;top:12px;display:flex;align-items:center;gap:7px;color:#746d80;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.control-label svg{width:12px;height:12px;fill:none;stroke:#7657f6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.family-route{position:absolute;left:6%;right:6%;top:33px;width:88%;height:130px}.family-route .flow-track{stroke:#ddd7e8;stroke-width:2;fill:none}.family-home{position:absolute;top:68px;z-index:1;display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid #e1dbe9;border-radius:11px;background:#fff;box-shadow:0 8px 20px rgba(45,30,75,.08)}.family-host{left:16px}.family-guest{right:16px}.family-home>span{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#eee9ff;color:#7657f6}.family-home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.family-home strong,.family-home small{display:block;white-space:nowrap}.family-home strong{font-size:10px}.family-home small{margin-top:2px;color:#928b9d;font:7px var(--font-mono)}.private-pill{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#f0ecff;color:#6547d6;font-size:8px;font-weight:700;white-space:nowrap}.private-pill span{width:6px;height:6px;border-radius:50%;background:#7657f6}
@media(max-width:520px){.family-home{padding:8px}.family-home>span{display:none}.family-home strong{font-size:9px}}
.gateway-diagram{position:relative;height:190px;margin-top:34px;padding:38px 18px 16px;border:1px solid #ded7e9;border-radius:14px;background:rgba(255,255,255,.72);overflow:hidden}.gateway-route{position:absolute;left:5%;top:47px;width:90%;height:105px}.gateway-route .flow-track{stroke:#ddd7e8;stroke-width:2;fill:none}.gateway-node{position:absolute;top:69px;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #e1dbe9;border-radius:11px;background:#fff;box-shadow:0 8px 20px rgba(45,30,75,.08)}.gateway-domain{left:14px}.gateway-vps{left:50%;transform:translateX(-50%);color:#fff;border-color:#7657f6;background:linear-gradient(135deg,#7657f6,#9162ed)}.gateway-home{right:14px}.gateway-node>span{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#eee9ff;color:#7657f6}.gateway-vps>span{background:rgba(255,255,255,.16);color:#fff}.gateway-node svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gateway-node strong,.gateway-node small{display:block;white-space:nowrap}.gateway-node strong{font-size:9px}.gateway-node small{margin-top:2px;color:#928b9d;font:7px var(--font-mono)}.gateway-vps small{color:#ded5ff}.gateway-pill{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#eaf8f2;color:#17845a;font-size:8px;font-weight:700;white-space:nowrap}.gateway-pill span{width:6px;height:6px;border-radius:50%;background:#22b573}
@media(max-width:520px){.gateway-node{padding:8px}.gateway-node>span{display:none}.gateway-node strong{font-size:8px}}
/* Pre-release marker — the same amber pill as the Console and Haunted UIs. */
.alpha-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font:700 9px/1.5 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#c98a12;background:rgba(245,181,68,.16);border:1px solid rgba(245,181,68,.42)}