/* Lift the dark palette while keeping green reserved for successful states. */
:root{--page-base:#121d2c;--muted:#aabbd0;--text:#f5f8ff;--line:#536a863f}
body{background:radial-gradient(ellipse 100% 650px at 75% 0,#365b8630,transparent),#121d2c;color:#f5f8ff}
.site-header{background:#142031ed;border-bottom-color:#8fb5f51c}.hero{background:radial-gradient(ellipse at 75% 35%,#4879a834,transparent 65%)}
.hero-copy>p,.section-heading p,.step>p,.accounting-copy p,.faq-section p{color:#adbed2}
.trust-strip .trust-card{background:linear-gradient(130deg,#2c4464aa,#1b2d4480);border-color:#8fb5f534}.trust-card p{color:#b4c6de}
.legacy-block{--ink-soft:#b0c0d4;--ink-faint:#8fa4bf}.legacy-block .why__stage{background:radial-gradient(ellipse at 50% 25%,#3d658b66,transparent 75%),#1b2c40;border-color:#7897bd40}.legacy-block .why__tab.is-active{background:linear-gradient(110deg,#34557a66,#263c554d);border-color:#91b7f54d}
.legacy-how #aboutFlow.animation .icon{background:#263b52}.legacy-how #aboutResult{background:#24374b}.network-glass{background:radial-gradient(ellipse at center,#467eaa40,transparent 65%),linear-gradient(130deg,#263b55,#1a2c41);border-color:#8fb5f53b}
.legacy-block .netmap-panel{background:radial-gradient(ellipse at 50% 25%,#3c659055,transparent 75%),#1b2d43;border-color:#8fb5f538}.legacy-block .srv-card{background:#21344b;border-color:#87a7ce30}.legacy-block .srv-card em{color:#9eb3cf}
.plan-card{background:linear-gradient(150deg,#293e57,#1b2d41);border-color:#7d9bc33b}.plan-card.featured{background:radial-gradient(ellipse at 50% 0,#547dbb40,transparent 70%),linear-gradient(150deg,#304c70,#20334d);border-color:#9ac0fa80}.plan-description,.plan-payment,.pricing-note{color:#aabed7}
.accounting-section{background:radial-gradient(ellipse at 0 0,#4979a544,transparent 65%),linear-gradient(120deg,#263b52,#203149);border-color:#8fb5f547}.traffic-calculator{background:linear-gradient(140deg,#1d3046,#18283c);border-color:#8fb5f53d}.calc-results span,.traffic-calculator .caption{color:#a5bbd5}
.final-cta{background:radial-gradient(ellipse at 50% 100%,#4876ba65,transparent 75%),#20334c;border-color:#8fb5f547}.section-seam::before,.section-seam::after{background:linear-gradient(90deg,transparent,#9fc5ff6b)}.section-seam span{border-color:#a5caffb0;box-shadow:0 0 30px #72acff66}
.button.primary{background:#a2c5ff;box-shadow:0 3px 0 #587db7,0 8px 30px #80a9eb24}.eyebrow,.legacy-block .eyebrow{color:#a9c8ef}.footer-main>div>a:not(.brand){color:#aabbcf}
/* Consistent rhythm and readable supporting copy across the long page. */
.section{padding-block:80px}.legacy-block section.block{padding-block:70px}.section-seam{height:34px}.device-network{padding-top:65px}.legacy-block .why__tab .text p{font-size:13px;line-height:1.75}.legacy-block .why__stage{min-height:480px}.legacy-block .sub{font-size:15px}.step>p{font-size:13px}.plan-card li{font-size:12px}.plan-description,.plan-payment{font-size:11px}.pricing-note{font-size:11px}.traffic-calculator>.caption{font-size:10px}.calc-results span{font-size:11px}.footer-main>div>a:not(.brand){font-size:11px}.legacy-how[data-route-state=direct] .result-check svg{display:none}.legacy-how[data-route-state=direct] .result-check::after{content:'!';font-weight:800}.legacy-how[data-route-state=direct] #aboutResult .result-check{background:#604537;color:#ffcf91}.legacy-how[data-route-state=connecting] #aboutResult .result-check{background:#324f70;color:#bfdcff}
.button,.trust-card,.srv-card{transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}.button:active{transform:translateY(1px)}.faq-list summary{padding-block:21px}.faq-list details[open]{background:#263c522c;border-radius:10px}.faq-list details[open] summary{color:#d0e2fc}.connection-window{background:linear-gradient(145deg,#253c45,#182935);border-color:#719aae38}.floating-note{background:#223941;border-color:#75bda538}
@media(max-width:720px){.section{padding-block:58px}.legacy-block section.block{padding-block:55px}.device-network{padding-top:50px}.legacy-block .why__tab .text p{font-size:11px}.legacy-block .sub{font-size:13px}.plan-card li{font-size:12px}.section-seam{height:24px}.trust-strip .trust-card{padding:18px}.traffic-calculator>.caption{font-size:10px}.footer-main>div>a:not(.brand){font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.trust-card,.srv-card{transition:none}}
/* FAQ: keep the click area in the summary, avoiding doubled row padding. */
.faq-section{align-items:start}.faq-list{align-self:start}.faq-list details{padding:0}.faq-list summary{min-height:64px;padding:20px 14px;font-size:14px;line-height:1.6}.faq-list details>p{margin:0;padding:0 38px 22px 14px;max-width:100%;font-size:13px;line-height:1.8}.faq-list summary>.icon{flex-shrink:0;color:#a7bad1}.faq-list details[open]{border-radius:0;background:#30496730}.faq-list summary:hover{color:#c7ddff;background:#8fb5f508}
@media(max-width:600px){.faq-list summary{min-height:60px;padding:17px 10px;font-size:13px}.faq-list details>p{padding:0 26px 19px 10px;font-size:12px}}
/* Restricted access: amber warning with a soft outward pulse. */
.legacy-how[data-route-state=direct] #aboutResult .result-check{position:relative;isolation:isolate;overflow:visible;background:#f59e0b;color:#251504;box-shadow:0 0 0 7px #f59e0b16,0 0 24px #f59e0b30;transition:background .4s,color .4s,box-shadow .4s}.legacy-how[data-route-state=direct] #aboutResult .result-check::after{content:'!';position:relative;font-weight:800;font-size:22px;line-height:1}.legacy-how[data-route-state=direct] #aboutResult .result-check::before{content:'';position:absolute;inset:-5px;border:1px solid #ffb84d90;border-radius:50%;pointer-events:none;animation:restrictedAmberPulse 2.6s ease-out infinite}.legacy-how[data-route-state=connecting] #aboutResult .result-check::before,.legacy-how[data-route-state=online] #aboutResult .result-check::before{content:none}@keyframes restrictedAmberPulse{0%{transform:scale(.9);opacity:.75}80%,100%{transform:scale(1.55);opacity:0}}@media(prefers-reduced-motion:reduce){.legacy-how[data-route-state=direct] #aboutResult .result-check::before{animation:none;opacity:.35}}
/* Rounded subscription period control. */
.billing{border-radius:999px;padding:6px;background:#1c2d42;border-color:#94b7df2e;gap:5px}.billing>button{border-radius:999px;padding-inline:23px;transition:background .25s,box-shadow .25s,color .25s}.billing>button.selected{background:#39577c;color:#f1f7ff;box-shadow:inset 0 0 0 1px #a6caff55,0 3px 12px #08162930}.billing>button:hover:not(.selected){background:#8fb5f510;color:#d1e4ff}.billing button[data-discount]::before{border-radius:999px;padding:4px 10px;top:-23px;background:#304b6c;border-color:#9bbff345}.billing button[data-discount].selected::before{background:#b3d2ff;color:#172b46;box-shadow:0 3px 14px #8fb5f52b}@media(max-width:600px){.billing{gap:3px;padding:5px}.billing>button{padding-inline:5px}.billing button[data-discount]::before{padding:3px 8px}}
/* Circular allowance indicators replace the cube tiles. */
.traffic-packets{gap:0;padding-block:6px}.traffic-packets i{width:44px;height:44px;border:0;border-radius:50%;background:transparent;position:relative}.traffic-packets i+i{margin-left:5px}.traffic-packets i+i:before{content:'';position:absolute;left:-6px;top:50%;width:7px;height:1px;background:currentColor;opacity:.35}.traffic-packets.whitelist i{background:transparent;border:0}.traffic-packets svg{width:40px;height:40px;transform:rotate(-90deg)}.usage-ring-base{stroke:currentColor;opacity:.15;stroke-width:2}.usage-ring-fill{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--ring-progress,10));transition:stroke-dashoffset .45s ease}.packets-play .traffic-packets i{animation:none}@media(prefers-reduced-motion:reduce){.usage-ring-fill{transition:none}}

/* Center the device section eyebrow with its heading. */
.device-network .network-heading>.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:0 auto 18px;text-align:center}.device-network .network-heading>.eyebrow::before,.device-network .network-heading>.eyebrow::after{content:'';display:block;position:static;flex:0 0 24px;width:24px;height:1px;background:#a9c8ef70;transform:none;margin:0}
/* Shared section labels: align with the heading rather than the container edge. */
.section-heading.centered>.eyebrow,.legacy-block .sechead.center>.eyebrow,.network-heading>.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:0 auto 18px;flex-wrap:nowrap;font-family:var(--font);font-size:10px;font-weight:700;line-height:1.6;letter-spacing:.15em}.section-heading.centered>.eyebrow::before,.section-heading.centered>.eyebrow::after,.legacy-block .sechead.center>.eyebrow::before,.legacy-block .sechead.center>.eyebrow::after{content:'';position:static;display:block;width:24px;height:1px;flex:0 0 24px;margin:0;background:#a9c8ef70;transform:none}.legacy-block .why__header>.eyebrow,.faq-intro>.eyebrow,.accounting-copy>.eyebrow{font-family:var(--font);font-size:10px;font-weight:700;line-height:1.6;letter-spacing:.15em}.network-caption{color:#b0c3dc}.legacy-block .srv-card{min-height:72px}.legacy-block .srv-card b{font-size:13px}.legacy-block .srv-card em{font-size:11px}.faq-list details[open]{border-radius:12px}.faq-list summary:focus-visible{outline-offset:-3px;border-radius:10px}.hero-scene .connection-stages b{font-weight:500}.network-heading p{max-width:560px;margin-inline:auto}
@media(max-width:600px){.legacy-block .sechead.center>.eyebrow,.network-heading>.eyebrow{font-size:9px;letter-spacing:.12em}.legacy-block .why__header>.eyebrow,.faq-intro>.eyebrow,.accounting-copy>.eyebrow{font-size:9px}.legacy-block .srv-card b{font-size:12px}}
/* One spacing system for section boundaries; panel padding remains internal. */
:root{--section-space:64px}
main>#start,main>#pricing,main>#faq,.legacy-block section.block,main>#apps.device-network{padding-block:0}
main>.legacy-block:not(.device-network){padding-block:0;margin-block:0}
main>.section-seam{height:1px;overflow:visible;margin-block:var(--section-space)}
main>.section-seam i{top:0}main>.section-seam span{background:var(--page-base);flex-shrink:0}
main>#start{margin-top:var(--section-space)}
main>#traffic.accounting-section{margin-block:0}
main>.final-cta{margin-top:calc(var(--section-space)*2)}
@media(max-width:720px){:root{--section-space:40px}main>#start,main>#pricing,main>#faq,.legacy-block section.block,main>#apps.device-network{padding-block:0}main>.section-seam{height:1px;margin-block:var(--section-space)}}

main>.section-seam{height:12px;overflow:hidden;margin-block:calc(var(--section-space) - 6px)}main>.section-seam i{top:50%}
/* FAQ cards share the same shape in both states. */
.faq-list{border:0;display:flex;flex-direction:column;gap:10px}.faq-list details{padding:0;border:1px solid #8fb5f523;border-radius:18px;background:#21324866;overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s}.faq-list details[open]{border-radius:18px;border-color:#9bc1f454;background:linear-gradient(120deg,#2b435d80,#21324880);box-shadow:0 8px 24px #07132115}.faq-list summary{padding:20px 22px;min-height:72px;font-size:14px;line-height:1.6;color:#e4edf9}.faq-list summary:hover{background:#8fb5f507;color:#f5f9ff}.faq-list summary>.icon{box-sizing:content-box;width:14px;height:14px;padding:8px;border:1px solid #8fb5f533;border-radius:50%;background:#8fb5f509;color:#b8d1f2;transition:transform .3s,background .3s,border-color .3s}.faq-list details[open] summary>.icon{transform:rotate(45deg);background:#8fb5f51a;border-color:#a8cbff66;color:#d4e6ff}.faq-list details>p{margin:0;padding:0 68px 23px 22px;font-size:13px;line-height:1.9;color:#b6c7dd;max-width:100%}.faq-list details[open] summary{color:#edf5ff}.faq-list details:focus-within{border-color:#a6caff80}
@media(max-width:600px){.faq-list{gap:9px}.faq-list summary{min-height:66px;padding:16px;font-size:13px;gap:14px}.faq-list details,.faq-list details[open]{border-radius:15px}.faq-list details>p{padding:0 20px 20px 16px;font-size:12px}.faq-list summary>.icon{padding:7px}}
@media(prefers-reduced-motion:reduce){.faq-list details,.faq-list summary>.icon{transition:none}}
/* Keep route state labels on a single line. */
.legacy-how #aboutResult .result-head{min-width:0;gap:12px}.legacy-how #aboutResult .result-head>span:last-child{white-space:nowrap;line-height:1.3;min-width:0}.legacy-how #aboutResult .result-check{flex-shrink:0}
/* More substantial header typography with restrained hover feedback. */
.desktop-nav{font-size:14px;font-weight:650;gap:30px;align-items:center}.desktop-nav>a{display:inline-block;position:relative;line-height:1.5;padding-block:6px;transition:color .22s,transform .22s;letter-spacing:-.015em}.desktop-nav>a:hover,.desktop-nav>a:focus-visible{color:#e0edff;transform:translateY(-1px)}.desktop-nav>a::before{content:'';position:absolute;bottom:-7px;left:25%;right:25%;height:2px;border-radius:99px;background:#b3d2ff;transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}.desktop-nav>a:hover::before,.desktop-nav>a:focus-visible::before{transform:scaleX(1);opacity:.7}.desktop-nav>a.is-current{color:#c9dfff}.desktop-nav>a.is-current::before{opacity:0}.desktop-nav>a.is-current::after{bottom:-7px;left:25%;right:25%;height:2px;background:#b3d2ff;box-shadow:0 0 12px #9ec8ff45}.header-actions>.button{font-size:12px}.language{font-size:12px}
@media(min-width:801px) and (max-width:1050px){.desktop-nav{font-size:12px;gap:19px}.header-row{gap:18px}}
@media(prefers-reduced-motion:reduce){.desktop-nav>a,.desktop-nav>a::before{transition:none}.desktop-nav>a:hover,.desktop-nav>a:focus-visible{transform:none}}
/* Traffic comparison uses typography, without decorative loading-like graphics. */
.traffic-packets{display:none}.calc-results{gap:24px}.calc-results>div{gap:8px;padding-top:18px;padding-bottom:4px}.calc-results strong{font-size:clamp(29px,3vw,38px);line-height:1.2;letter-spacing:-.045em;margin-top:4px}.calc-results .traffic-explanation{font-size:11px;line-height:1.7;color:#a9bed7;margin-top:3px;max-width:100%}.calc-results small{top:17px;right:0;border-radius:99px;padding:2px 7px;font-size:9px}.calc-results>div>span{padding-right:30px}.traffic-calculator>.caption{margin-top:24px}@media(max-width:600px){.calc-results{gap:16px}.calc-results strong{font-size:29px}.calc-results .traffic-explanation{font-size:10px}}
/* Reserve space for the warning halo instead of overlapping the label. */
.legacy-how #aboutResult .result-head{gap:26px;padding-left:8px}.legacy-how[data-route-state=direct] #aboutResult .result-check::before{inset:-4px;animation-name:restrictedAmberPulseCompact}@keyframes restrictedAmberPulseCompact{0%{transform:scale(.95);opacity:.7}80%,100%{transform:scale(1.22);opacity:0}}@media(max-width:600px){.legacy-how #aboutResult .result-head{gap:20px;padding-left:4px}}