/* Native OLED interface: geometry and colors follow the Android implementation. */
.app-visual{display:grid;justify-items:center;padding-top:20px;min-width:0}
.phone-shell{width:min(330px,100%);height:752px;border:1px solid #416b87;border-radius:39px;padding:24px 9px 10px;background:#000;position:relative;display:flex;flex-direction:column;font-family:Arial,sans-serif;color:#fff;box-shadow:0 25px 70px #0003}
.phone-camera{position:absolute;top:10px;left:calc(50% - 25px);width:50px;height:4px;border-radius:4px;background:#23445d}
.phone-status{display:flex;justify-content:space-between;padding:4px 12px 12px;font-size:10px;color:#bcc3cc;letter-spacing:.02em}
.phone-screen{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#183854 #000;padding:0 5px 12px;overscroll-behavior:auto}
.phone-content{padding:0;text-align:left;font-size:12px;line-height:1.45}
.phone-content .icon{color:#299dff;width:21px;height:21px;stroke-width:2}
.phone-content p{line-height:1.5}
.phone-heading{display:flex;align-items:center;gap:9px;padding:8px 2px 17px;font-size:23px}
.phone-heading strong{font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.phone-icon-button{color:#fff;display:flex;align-items:center;justify-content:center;background:none;border:0;min-width:44px;min-height:44px;font-size:29px;padding:8px;margin-left:auto}
.phone-icon-button .icon{color:#fff}
.native-connect{border:1px solid #1c3a54;border-radius:23px;padding:10px 10px 9px;text-align:center}
.native-status{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:160px;border:1px solid #13709d;border-radius:30px;padding:4px 10px;color:#aac6e3;background:#171717;font-weight:600;font-size:11px}
.native-status:before{content:'';height:5px;width:5px;border-radius:50%;background:#299dff}
.native-connect h3{font-size:21px;font-weight:700;letter-spacing:0;margin:8px 0;color:#fff}
.native-connect>p{color:#aac6e3;font-size:11px;min-height:32px;max-width:245px;margin:0 auto}
.native-power-field{height:161px;position:relative;display:grid;place-items:center}
.native-power-field img{position:absolute;width:100%;height:144px;object-fit:fill;bottom:-5px}
.native-power{height:126px;width:126px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;background:linear-gradient(#1c70b9,#002448);border:2px solid #b5dfff;outline:4px solid #159eff;outline-offset:5px;color:white;font-size:13px;font-weight:700;margin-top:16px;transition:background-color 180ms,border-color 180ms}
.native-power .icon{width:33px;height:33px;color:#fff}
.native-power:focus-visible{outline:3px solid #fff;outline-offset:9px}
.native-power:disabled{cursor:wait}
.native-connect.connected .native-status{color:#75dfa9;border-color:#397560}
.native-connect.connected .native-status:before{background:#75dfa9}
.native-connect.connected .native-power{border-color:white}
.native-server{width:100%;margin-top:12px;border:1px solid #1c3a54;border-radius:18px;padding:12px 11px;display:flex;gap:11px;align-items:center;background:#000;color:#fff;text-align:left;min-height:63px}
.native-server .icon{width:26px;height:26px}
.native-server>span:nth-child(2){flex:1}
.native-server strong{display:block;font-size:16px;font-weight:600}
.native-server small{display:block;color:#aac6e3;font-size:11px;margin-top:3px}
.native-chevron{font-size:24px;color:#aac6e3}
.native-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.native-metrics>div{border:1px solid #1c3a54;border-radius:16px;min-height:76px;padding:9px 8px}
.native-metrics>div>span{display:flex;align-items:center;gap:4px;color:#aac6e3;font-size:10px;white-space:nowrap}
.native-metrics .icon{height:14px;width:14px}
.native-metrics strong{display:block;font-size:20px;margin-top:7px;font-weight:700}
.native-metrics small{display:block;color:#aac6e3;font-size:10px;margin-top:2px}
.native-buy{display:flex;align-items:center;justify-content:center;gap:10px;background:#299dff;color:#000;border:0;border-radius:17px;font-size:14px;font-weight:700;min-height:47px;margin-top:12px;padding:12px 8px;text-align:center}
.native-buy .icon{color:#000}
.native-buy:hover{background:#82caff}
.phone-nav{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #1c3a54;margin-top:auto;padding:3px 0;border-radius:0 0 26px 26px;flex:none}
.phone-nav button{min-height:55px;min-width:0;border:0;background:none;color:#aac6e3;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;padding:6px 2px;font-size:10px}
.phone-nav .icon{width:22px;height:22px;stroke-width:2}
.phone-nav button[aria-current]{color:#299dff;font-weight:700}
.phone-nav button:hover{background:#071827}
.native-page-title{display:flex;align-items:center;gap:9px;min-height:59px;margin-bottom:10px}
.native-page-title h3{font-size:21px;letter-spacing:0;font-weight:600}
.native-page-title .phone-icon-button{margin:0 0 0 -7px}
.native-account-menu{display:flex;align-items:center;gap:5px;margin-left:auto;border:1px solid #1c3a54;border-radius:12px;padding:7px 9px;font-size:11px;color:#aac6e3}
.native-account-menu .icon{width:16px;height:16px}
.native-app-settings{padding:0 5px}
.native-setting{display:flex;align-items:center;justify-content:space-between;min-height:43px;font-size:13px}
.native-switch{width:33px;height:19px;border-radius:20px;background:#299dff;position:relative}
.native-switch:after{content:'';height:14px;width:14px;position:absolute;top:2.5px;right:3px;border-radius:50%;background:#003258}
.native-radio{display:flex;gap:8px;align-items:center;color:#aac6e3;min-height:36px;font-size:15px}
.native-radio span{font-size:11px;color:#fff}
.native-radio.selected{color:#299dff}
.native-app-settings>p{font-size:10px;margin-top:10px}
.native-muted{color:#aac6e3}
.native-search{display:block;border:1px solid #52749f;border-radius:5px;padding:0 9px 7px;margin:17px 0 12px}
.native-search>span{display:block;font-size:10px;color:#aac6e3;padding-bottom:4px;margin-top:-7px;width:max-content;background:#000;padding-inline:4px}
.native-search input{width:100%;border:0;background:none;color:white;font:inherit;min-height:27px;outline-offset:7px}
.native-search input::placeholder{color:#819bb8}
.native-app-list{display:flex;flex-direction:column;gap:7px}
.native-app{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #1c3a54;border-radius:14px;min-height:52px;background:#000;color:#fff;text-align:left;font-size:12px}
.native-app.selected{background:#052647;border-color:#299dff}
.native-app-letter{display:grid;place-items:center;background:#132d50;color:#82caff;border-radius:10px;width:30px;height:30px;font-size:15px;font-weight:700}
.native-selection{margin-left:auto;color:#299dff;font-size:19px}
.native-profile{border:1px solid #1c3a54;border-radius:24px;padding:14px 12px}
.native-profile-head{display:flex;align-items:center;gap:11px}
.native-avatar{height:39px;width:39px;border-radius:50%;background:#052647;display:grid;place-items:center}
.native-profile-head strong{display:block;font-size:15px}
.native-profile-head small{display:block;color:#aac6e3;font-size:10px;margin:3px 0 5px}
.native-chip{display:inline-block;border:1px solid #334f67;border-radius:20px;padding:3px 7px;font-size:10px;color:#aac6e3}
.native-profile-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.native-profile-metrics>div{border-radius:15px;background:#061a2b;padding:10px}
.native-profile-metrics span{display:block;color:#aac6e3;font-size:10px}
.native-profile-metrics strong{display:block;margin-top:5px;font-size:14px}
.native-expiry{display:flex;align-items:center;gap:10px;color:#aac6e3;margin-top:14px;font-size:11px}
.native-expiry strong{margin-left:auto;color:white}
.native-balance{border:1px solid #1c3a54;border-radius:19px;padding:13px;margin-top:13px}
.native-balance h4{font-weight:600;font-size:14px;margin:0 0 8px}
.native-balance>strong{display:block;font-size:21px}
.native-balance>a{display:flex;justify-content:center;align-items:center;min-height:44px;border:1px solid #299dff;color:#82caff;border-radius:20px;font-size:11px;margin-top:9px}
.native-menu-row{display:flex;align-items:center;gap:11px;width:100%;border:1px solid #1c3a54;background:#000;color:#fff;border-radius:17px;padding:13px 10px;margin-top:11px;min-height:55px;text-align:left;font:inherit;font-size:12px}
.native-menu-row>span:last-child{margin-left:auto;color:#aac6e3;font-size:20px}
.native-menu-row small{display:block;color:#aac6e3;font-size:10px;margin-top:3px}
.native-demo-note{font-size:13px;color:#aac6e3;margin-top:28px}
.native-server-search{border-radius:16px;margin-top:20px}
.phone-screen{overflow-x:hidden}
.native-server-filters{display:flex;gap:8px;margin-bottom:12px}
.native-server-filters button{border:1px solid #1c3a54;background:#000;color:#aac6e3;border-radius:12px;min-height:44px;padding:9px 15px;font:inherit}
.native-server-filters button[aria-pressed=true]{border-color:#299dff;background:#052647;color:#82caff}
.native-server-auto{margin:0 0 10px}
.native-server-auto[aria-pressed=true]{border-color:#299dff;background:#052647}
.native-server-auto .server-selected-check{width:18px;height:18px}
.native-server-auto[aria-pressed=false] .server-selected-check{visibility:hidden}
.native-server-list{display:flex;flex-direction:column;gap:10px}
.native-location{display:flex;align-items:center;border:1px solid #1c3a54;border-radius:16px;min-width:0}
.native-location.selected{border-color:#299dff;background:#052647}
.native-location-select{display:flex;gap:12px;align-items:center;padding:14px 0 14px 12px;flex:1;min-width:0;min-height:72px;border:0;background:none;color:#fff;text-align:left;font:inherit;border-radius:16px}
.native-location-select>span{flex:1;min-width:0}
.native-location-select strong{display:block;font-size:13px;font-weight:600;line-height:1.4}
.native-location-select small{display:flex;justify-content:space-between;gap:7px;color:#aac6e3;font-size:11px;margin-top:4px}
.native-location-select .server-ping{font-variant-numeric:tabular-nums}
.country-flag{width:26px;height:18px;flex:none;stroke:none;fill:none;border-radius:2px}
.native-favorite{background:none;border:0;min-width:44px;min-height:48px;padding:12px 10px;border-radius:12px}
.phone-content .native-favorite .icon{color:#aac6e3}
.phone-content .native-favorite[aria-pressed=true] .icon{color:#299dff}
.native-location-select:hover,.native-favorite:hover{background:#071827}
.native-server-feedback{font-size:11px;color:#aac6e3;margin-top:16px}
.native-ping-note{font-size:11px;color:#aac6e3;margin:0 0 12px}
.native-location-select>.native-ping-badge{flex:0 0 auto;min-width:58px}
.native-ping-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;font-weight:600;color:#55d7a3;font-variant-numeric:tabular-nums}
.native-ping-badge[data-strength="3"]{color:#e5b751}
.native-ping-badge[data-strength="2"],.native-ping-badge[data-strength="1"]{color:#ff777f}
.native-ping-bars{display:inline-flex;align-items:flex-end;gap:2px;height:18px;width:18px;flex:none}
.native-ping-bars i{display:block;width:3px;border-radius:1px;background:currentColor;flex:none}
.native-ping-bars i:nth-child(1){height:6px}.native-ping-bars i:nth-child(2){height:10px}.native-ping-bars i:nth-child(3){height:14px}.native-ping-bars i:nth-child(4){height:18px}
.native-ping-badge[data-strength="3"] i:nth-child(4),.native-ping-badge[data-strength="2"] i:nth-child(n+3),.native-ping-badge[data-strength="1"] i:nth-child(n+2){background:#1c3a54}
.native-server-auto{gap:8px}.native-server-auto>span:nth-child(2){min-width:0}
.native-server-auto strong{font-size:15px}.native-server-auto small{font-size:10px}
.native-server-auto .server-selected-check{width:14px;height:14px}
#demo-home-ping .native-ping-badge{font-size:12px;gap:4px}
#demo-home-ping .native-ping-badge>span{color:inherit;font-size:inherit;display:inline-flex}
#demo-home-ping .native-ping-bars{display:inline-flex}
.visual-caption{text-align:center;color:var(--muted);font-size:12px;line-height:1.65;margin-top:19px}
/* Both routes stay visible; animation explains their different paths. */
.route-play{display:flex;gap:10px;align-items:center;min-height:44px;border:1px solid #3c728e;border-radius:10px;padding:9px 14px;color:var(--cyan);background:#052239;font-size:13px;white-space:nowrap}
.route-play .icon{width:19px;height:19px}
.route-play:disabled{cursor:default;opacity:.65}
.route-comparison{display:grid;grid-template-columns:1fr 1fr;margin-top:25px}
.route-row{min-width:0;padding:12px 27px 8px 0}
.route-row+.route-row{border-left:1px solid #34526a;padding:12px 0 8px 27px}
.route-row h4{font-size:21px;margin:0 0 8px;font-weight:500;letter-spacing:-.025em}
.route-row-label>p{font-size:13px;color:var(--muted)}
.via-vpn h4{color:var(--cyan)}
.route-map{--route-icon-size:35px;display:grid;grid-template-columns:64px minmax(12px,1fr) 64px;gap:5px;align-items:start;padding:30px 0 18px}
.via-vpn .route-map{grid-template-columns:64px minmax(12px,1fr) 64px minmax(12px,1fr) 64px}
.route-node{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.route-node>.icon{width:var(--route-icon-size);height:var(--route-icon-size);color:#a8c8dd}
.route-node strong{font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap}
.route-node img{width:var(--route-icon-size);height:var(--route-icon-size)}
.server strong{color:var(--cyan)}
.route-segment{position:relative;min-width:0}
.route-segment>span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;color:#adcae0}
.route-segment>span>.icon{width:13px;height:13px;color:var(--cyan)}
.route-segment>svg{width:100%;height:var(--route-icon-size);overflow:hidden;display:block}
.track{stroke:#658095;stroke-width:2;stroke-dasharray:4 4}
.protected .track{stroke:var(--cyan);stroke-width:4;stroke-dasharray:none}
.signal{stroke:#effbff;stroke-width:5;stroke-dasharray:35 225;stroke-dashoffset:225;opacity:0}
.route-row-note{font-size:13px;color:#bdd8eb;line-height:1.65;min-height:44px}
.route-description{margin-top:24px}
@media(max-width:1100px){.android{gap:40px}.route-row{padding-right:20px}.route-row+.route-row{padding-left:20px}}
@media(min-width:651px) and (max-width:950px){.android{grid-template-columns:minmax(0,1fr) 304px;gap:32px}.phone-shell{height:752px}.phone-heading{font-size:21px}.feature-tabs>button>.icon:first-child{display:none}.route-lab{padding-inline:24px}.route-comparison{grid-template-columns:1fr}.route-row{padding:9px 0 22px}.route-row+.route-row{border-left:0;border-top:1px solid #34526a;padding:25px 0 8px}.route-row-note{min-height:0}}
@media(max-width:650px){.phone-shell{height:752px}.route-toolbar{flex-direction:row;align-items:center;flex-wrap:wrap}.route-toolbar h3{font-size:21px}.route-comparison{grid-template-columns:1fr;margin-top:19px}.route-row{padding:8px 0 24px}.route-row+.route-row{border-left:0;border-top:1px solid #34526a;padding:24px 0 4px}.route-row h4{font-size:20px}.route-row-label>p{font-size:12px}.route-map{--route-icon-size:29px;padding-block:35px 18px}.route-row-note{min-height:0;font-size:12px}.via-vpn .route-map{grid-template-columns:64px minmax(10px,1fr) 64px minmax(10px,1fr) 64px;gap:3px}.route-node strong{font-size:12px;min-height:0}.route-description p{min-height:0}.route-description{margin-top:20px}}
@media(max-width:370px){.phone-shell{height:734px;padding-inline:6px}.phone-heading{font-size:21px;gap:7px}.phone-heading img{width:27px;height:27px}.native-connect{padding-inline:7px}.native-connect h3{font-size:20px}.native-connect>p{font-size:10px}.native-metrics>div>span{font-size:9px;gap:3px}.native-metrics>div{padding-inline:6px}.native-server small{font-size:10px}.route-play{font-size:12px;padding-inline:11px}.route-toolbar h3{font-size:19px}.native-app-settings{padding-inline:2px}}

.native-glyph,.phone-content .native-glyph,.phone-nav .native-glyph{fill:currentColor;stroke:none}
.phone-status-icons{display:flex;align-items:center;gap:6px}
.phone-status-icons .icon{width:12px;height:12px}
.phone-content .native-chevron{width:17px;height:17px;margin-left:auto;color:#aac6e3}
.phone-content .native-back{transform:rotate(180deg)}
.phone-content .native-dropdown{transform:rotate(90deg);width:13px;height:13px}
.phone-content .native-mode-swap{width:12px;height:12px;color:#aac6e3}
.phone-content .native-radio .icon{width:18px;height:18px;color:inherit}
.native-selection{display:grid;place-items:center;width:21px;height:21px;background:#1c3a54;border-radius:50%}
.native-selection .icon{display:none}
.selected .native-selection{background:#299dff}
.selected .native-selection .icon{display:block;width:14px;height:14px;color:#002448}
.native-menu-row>.native-chevron{margin-left:auto}
.native-search-empty{padding:15px 6px;text-align:center}
.native-search-empty p{font-size:12px;color:#aac6e3}
.native-search-empty button{margin-top:12px;min-height:44px;border:1px solid #299dff;border-radius:16px;padding:9px 16px;background:#000;color:#82caff;font-size:12px}
.route-legend{display:none}
@media(max-width:950px){.route-segment>span{display:none}.route-legend{display:flex;flex-direction:column;gap:9px;margin:0 0 16px}.route-legend>span{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;flex-wrap:wrap}.legend-line{width:27px;border-top:2px dashed #658095;flex:none}.legend-line.encrypted{border-top:3px solid var(--cyan)}}