/* The VPN access page (views/pages/vpn.pug, docs/plans/1109_2130_promote-vpn-access.md). Built on the marketing
   pages' own vocabulary: the homepage's display type and section bands (homepage.css), the agent console's navy
   (agent-console.css) for the config window and the route band, and the theme's --lp-* tokens everywhere else, so
   light and dark both hold. The route pulse is the page's one motion. */
.lp-vpn-hero,
.lp-vpn-route {
  --vpn-navy: #0d1e33;
  --vpn-navy-raised: #142b46;
  --vpn-navy-line: #2c4b69;
  --vpn-navy-copy: #e5effb;
  --vpn-navy-muted: #a8bdd4;
  --vpn-signal: #7fb0ff;
}

/* Hero */
.lp-vpn-hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.lp-vpn-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.lp-vpn-hero h1 { max-width: 14ch; margin: 0; color: var(--lp-text); font-size: clamp(2.4rem, 4.6vw, 4.25rem); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.lp-vpn-lead { max-width: 46ch; margin: 1.4rem 0 0; color: var(--lp-text-muted); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; }
.lp-vpn-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; color: var(--lp-text); }
.lp-vpn-checks li { display: flex; align-items: baseline; gap: .55rem; line-height: 1.45; }
.lp-vpn-checks i { flex: 0 0 auto; color: var(--lp-primary); }
.lp-vpn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; }
.lp-vpn-actions .btn { min-height: 3rem; display: inline-flex; align-items: center; }
.lp-vpn-text-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.lp-vpn-text-link i { font-size: .8em; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.lp-vpn-text-link:hover i { transform: translateX(3px); }
.lp-vpn-guide { margin: 1rem 0 0; color: var(--lp-text-muted); font-size: .92rem; }
.lp-vpn-guide a { font-weight: 600; }

/* The config window: the real file format, keys hidden. Navy in both themes, like the agent console. */
.lp-vpn-config { margin: 0; overflow: hidden; color: var(--vpn-navy-copy); background: var(--vpn-navy); border-radius: 16px; box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(13, 30, 51, .55), 0 .25rem .75rem rgba(13, 30, 51, .18); }
.lp-vpn-config-bar { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; background: var(--vpn-navy-raised); border-bottom: 1px solid var(--vpn-navy-line); }
.lp-vpn-config-dots { display: inline-flex; gap: .4rem; }
.lp-vpn-config-dots i { width: .62rem; height: .62rem; background: var(--vpn-navy-line); border-radius: 50%; }
.lp-vpn-config-name { color: var(--vpn-navy-muted); font-family: var(--font-family-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .82rem; }
.lp-vpn-config-code { margin: 0; padding: 1.35rem 1.4rem 1.2rem; overflow-x: auto; color: var(--vpn-navy-copy); background: transparent; font-size: clamp(.78rem, 1.05vw, .9rem); line-height: 1.75; white-space: pre; }
.lp-vpn-config-code code { color: inherit; font-size: inherit; white-space: inherit; }
.lp-vpn-config-section { color: var(--vpn-signal); font-weight: 700; }
.lp-vpn-config-key { color: var(--vpn-navy-muted); }
.lp-vpn-config-value { color: var(--vpn-navy-copy); }
.lp-vpn-config-secret { color: var(--vpn-navy-muted); letter-spacing: .12em; }
.lp-vpn-config-foot { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .95rem 1.4rem 1.1rem; color: var(--vpn-navy-muted); border-top: 1px solid var(--vpn-navy-line); font-size: .88rem; line-height: 1.45; }
.lp-vpn-qr { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; fill: var(--vpn-navy-copy); }

/* The route: the page's peak, a full-bleed navy band. */
.lp-vpn-route { padding: clamp(4rem, 7vw, 6.25rem) 0; color: var(--vpn-navy-copy); background: var(--vpn-navy); }
.lp-vpn-route-head { max-width: 46rem; margin-bottom: 2.25rem; }
.lp-vpn-route h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; }
.lp-vpn-route-head p { margin: 1rem 0 0; color: var(--vpn-navy-muted); font-size: 1.125rem; line-height: 1.55; }
.lp-vpn-route-demo { position: relative; padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 1.75rem; background: var(--vpn-navy-raised); border: 1px solid var(--vpn-navy-line); border-radius: 16px; }

/* The switcher: four radios drawn as tabs. */
.lp-vpn-route-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-vpn-route-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.25rem; }
.lp-vpn-route-tab { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem .9rem .45rem .55rem; cursor: pointer; color: var(--vpn-navy-muted); border: 1px solid var(--vpn-navy-line); border-radius: 999px; font-size: .92rem; font-weight: 600; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.lp-vpn-route-tab img { width: 1.5rem; height: 1.5rem; padding: .15rem; background: #fff; border-radius: 50%; }
.lp-vpn-route-tab:hover { color: var(--vpn-navy-copy); border-color: var(--vpn-navy-muted); }
#vpn-route-isp:checked ~ .lp-vpn-route-tabs .lp-vpn-route-tab-isp,
#vpn-route-mobile:checked ~ .lp-vpn-route-tabs .lp-vpn-route-tab-mobile,
#vpn-route-datacenter:checked ~ .lp-vpn-route-tabs .lp-vpn-route-tab-datacenter,
#vpn-route-residential:checked ~ .lp-vpn-route-tabs .lp-vpn-route-tab-residential { color: var(--vpn-navy); background: #fff; border-color: #fff; }
#vpn-route-isp:focus-visible ~ .lp-vpn-route-tabs .lp-vpn-route-tab-isp,
#vpn-route-mobile:focus-visible ~ .lp-vpn-route-tabs .lp-vpn-route-tab-mobile,
#vpn-route-datacenter:focus-visible ~ .lp-vpn-route-tabs .lp-vpn-route-tab-datacenter,
#vpn-route-residential:focus-visible ~ .lp-vpn-route-tabs .lp-vpn-route-tab-residential { outline: 2px solid var(--vpn-signal); outline-offset: 3px; }

/* Five stops on one line; the line and its pulse sit behind the marks. */
.lp-vpn-route-path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lp-vpn-route-path::before { content: ''; position: absolute; top: 1.75rem; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--vpn-navy-line), var(--vpn-signal) 50%, var(--vpn-navy-line)); }
.lp-vpn-route-path::after { content: ''; position: absolute; top: calc(1.75rem - 2px); left: 10%; width: 3.5rem; height: 6px; background: linear-gradient(90deg, rgba(127, 176, 255, 0), #fff); border-radius: 3px; animation: lp-vpn-flow 4.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes lp-vpn-flow {
  0% { left: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(90% - 3.5rem); opacity: 0; }
}
.lp-vpn-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; text-align: center; }
.lp-vpn-stop-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .55rem; color: var(--vpn-navy-copy); background: var(--vpn-navy); border: 1px solid var(--vpn-navy-line); border-radius: 50%; }
.lp-vpn-stop-mark svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-vpn-stop strong { color: #fff; font-size: 1rem; line-height: 1.3; }
.lp-vpn-stop > span:not(.lp-vpn-stop-mark) { color: var(--vpn-navy-muted); font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.lp-vpn-stop-proxy .lp-vpn-stop-mark { width: 4.25rem; height: 4.25rem; margin-top: -.375rem; margin-bottom: .2rem; background: #fff; border: 0; box-shadow: 0 0 0 6px rgba(127, 176, 255, .22); }
.lp-vpn-stop-proxy .lp-vpn-stop-mark img { width: 2.6rem; height: 2.6rem; }
.lp-vpn-stop-proxy > span.lp-vpn-variant { color: var(--vpn-navy-copy); }
.lp-vpn-variant { display: none; }
#vpn-route-isp:checked ~ .lp-vpn-route-path .lp-vpn-variant-isp,
#vpn-route-mobile:checked ~ .lp-vpn-route-path .lp-vpn-variant-mobile,
#vpn-route-datacenter:checked ~ .lp-vpn-route-path .lp-vpn-variant-datacenter,
#vpn-route-residential:checked ~ .lp-vpn-route-path .lp-vpn-variant-residential { display: block; }
.lp-vpn-route-dns { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 2rem 0 0; padding-top: 1.25rem; color: var(--vpn-navy-muted); border-top: 1px solid var(--vpn-navy-line); font-size: .95rem; }
.lp-vpn-route-dns i { color: var(--vpn-signal); }
.lp-vpn-route-note { display: flex; gap: .75rem; align-items: baseline; max-width: 62ch; margin: 1.75rem 0 0; color: var(--vpn-navy-copy); font-size: 1.05rem; line-height: 1.55; }
.lp-vpn-route-note i { flex: 0 0 auto; color: var(--vpn-signal); }

/* How it works: three steps in order, each with its picture. */
.lp-vpn-steps { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--lp-bg); }
.lp-vpn-steps h2, .lp-vpn-types h2, .lp-vpn-setups h2, .lp-vpn-facts h2 { margin: 0 0 2.5rem; color: var(--lp-text); font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.1; letter-spacing: -.035em; }
.lp-vpn-steps-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 1.1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lp-vpn-steps-list::before { content: ''; position: absolute; top: 1.1rem; left: 1.1rem; right: calc((100% - 2 * clamp(1.5rem, 3vw, 2.5rem)) / 3); height: 1px; background: var(--lp-border); }
.lp-vpn-step { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 1.1rem; }
.lp-vpn-step-number { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #234a80; background: #edf4ff; border: 1px solid #c6dcff; border-radius: 50%; font-weight: 700; }
.lp-vpn-step-art { position: relative; container-type: inline-size; display: grid; place-items: center; min-height: 15.5rem; padding: 1.5rem 1.25rem; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(6, 93, 255, .09), transparent 58%), var(--lp-bg-subtle); border-radius: 16px; }
.lp-vpn-step p { margin: 0; color: var(--lp-text); font-size: 1.075rem; line-height: 1.5; }

/* The step pictures: small copies of the real screens, one product card style throughout. */
.lp-vpn-scene { position: relative; display: grid; place-items: center; width: 100%; min-height: 12.5rem; }
.lp-vpn-mock { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; color: var(--lp-text); background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 12px; box-shadow: 0 1.1rem 2.2rem -1.1rem rgba(13, 30, 51, .3), 0 .2rem .5rem var(--lp-shadow); font-size: .8rem; line-height: 1.35; text-align: left; }
.lp-vpn-mock-head { display: flex; align-items: center; gap: .55rem; }
.lp-vpn-mock-head img { width: 1.75rem; height: 1.75rem; }
.lp-vpn-mock-head strong { font-size: .9rem; }
.lp-vpn-mock-dot { flex: 0 0 auto; width: .5rem; height: .5rem; margin-left: auto; background: #12b886; border-radius: 50%; box-shadow: 0 0 0 3px rgba(18, 184, 134, .18); }
.lp-vpn-mock-cred { display: block; padding: .4rem .55rem; color: var(--lp-text-muted); background: var(--lp-bg-subtle); border-radius: 6px; font-size: .72rem; overflow-wrap: anywhere; }
.lp-vpn-mock-btn { display: inline-flex; align-items: center; align-self: flex-start; gap: .4rem; padding: .38rem .65rem; color: var(--lp-primary); border: 1px solid var(--lp-primary); border-radius: 6px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.lp-vpn-mock-btn.is-primary { align-self: stretch; justify-content: center; margin-top: .35rem; color: #fff; background: #065dff; border-color: #065dff; }

/* 1: the proxy card, a second one behind it. */
.lp-vpn-mock-back { position: absolute; top: .4rem; right: .25rem; width: 74%; opacity: .55; transform: rotate(2.5deg); }
.lp-vpn-mock-front { position: relative; width: 84%; margin-top: 2.6rem; }

/* 2: the profile dialog. */
.lp-vpn-mock-dialog { gap: .3rem; width: min(100%, 15.5rem); }
.lp-vpn-mock-title { margin-bottom: .35rem; font-size: .92rem; }
.lp-vpn-mock-label { color: var(--lp-text-muted); font-size: .7rem; }
.lp-vpn-mock-field { position: relative; display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; padding: .38rem .6rem; background: var(--lp-surface); border: 1px solid var(--lp-border-strong, var(--lp-border)); border-radius: 6px; }
.lp-vpn-mock-field img { width: 1.1rem; height: 1.1rem; }
.lp-vpn-mock-field .lp-vpn-mock-flag { width: 1.15rem; height: .8rem; object-fit: cover; border-radius: 2px; }
.lp-vpn-mock-field.is-select { padding-right: 1.6rem; }
.lp-vpn-mock-field.is-select::after { content: ''; position: absolute; right: .65rem; top: 50%; width: .4rem; height: .4rem; border-right: 1.5px solid var(--lp-text-muted); border-bottom: 1.5px solid var(--lp-text-muted); transform: translateY(-70%) rotate(45deg); }

/* 3: the config card with its code (dark modules on white in both themes, so it scans) and the phone in front. */
.lp-vpn-mock-qr { position: absolute; top: .25rem; left: 3%; width: 8.75rem; color: #0d1e33; background: #fff; border-color: #e3e9f2; }
.lp-vpn-qr-code { display: block; width: 100%; height: auto; }
.lp-vpn-qr-code path { stroke: #0d1e33; }
/* The phone rises from the panel edge (the picture clips it), so it never covers the card title in any language. */
.lp-vpn-mock-phone { position: absolute; right: 2.5%; bottom: -3.75rem; display: flex; flex-direction: column; gap: .55rem; width: 9.25rem; height: 12.5rem; padding: .7rem .65rem; color: #e5effb; background: #0d1e33; border: 3px solid #22364f; border-radius: 22px; box-shadow: 0 1.5rem 2.5rem -1.2rem rgba(13, 30, 51, .55); font-size: .72rem; }
.lp-vpn-mock-notch { align-self: center; width: 2.4rem; height: .35rem; margin-bottom: .2rem; background: #22364f; border-radius: 999px; }
.lp-vpn-mock-app { color: #a8bdd4; font-size: .66rem; font-weight: 600; }
.lp-vpn-mock-tunnel { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .5rem .55rem; background: #142b46; border-radius: 8px; }
.lp-vpn-mock-tunnel-name { font-weight: 600; white-space: nowrap; }
.lp-vpn-mock-switch { position: relative; flex: 0 0 auto; width: 1.7rem; height: 1rem; background: #377dff; border-radius: 999px; }
.lp-vpn-mock-switch::after { content: ''; position: absolute; top: .15rem; right: .15rem; width: .7rem; height: .7rem; background: #fff; border-radius: 50%; }
.lp-vpn-mock-status { display: flex; align-items: center; gap: .4rem; padding: 0 .2rem; color: #a8bdd4; }
.lp-vpn-mock-status .lp-vpn-mock-dot { margin-left: 0; }
/* A narrow picture (three columns on a small laptop): card and phone shrink and sit edge to edge, so the phone never
   covers the code. */
@container (max-width: 18.5rem) {
  .lp-vpn-mock-qr { left: 0; width: 7.75rem; }
  .lp-vpn-mock-phone { right: 0; width: 8.25rem; }
  .lp-vpn-mock-tunnel-name { font-size: .64rem; }
  .lp-vpn-mock-cred { font-size: .64rem; }
}

/* Which IP you get: the homepage product cards on the subtle band. */
.lp-vpn-types { padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem); background: var(--lp-bg-subtle); }
.lp-vpn-small { margin: .5rem 0 0; color: var(--lp-text); font-size: .92rem; }
.lp-vpn-types .lp-home-product-top p, .lp-vpn-lead, .lp-vpn-route-head p, .lp-vpn-step p, .lp-vpn-facts-list li { text-wrap: pretty; }

/* Supported setups */
.lp-vpn-setups { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--lp-bg); }
.lp-vpn-setups-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lp-vpn-setups-head h2 { margin-bottom: 1rem; }
.lp-vpn-setups-head p { margin: 0; color: var(--lp-text-muted); font-size: 1.05rem; line-height: 1.55; }
.lp-vpn-table { width: 100%; margin: 0; border-collapse: collapse; color: var(--lp-text); }
.lp-vpn-table th, .lp-vpn-table td { padding: .95rem .75rem; vertical-align: top; border-bottom: 1px solid var(--lp-border); text-align: left; }
.lp-vpn-table thead th { padding-top: 0; color: var(--lp-text-muted); font-size: .85rem; font-weight: 600; }
.lp-vpn-table tbody th a { font-weight: 600; }
.lp-vpn-table code { color: var(--lp-text); font-size: .85rem; }
.lp-vpn-kill { display: inline-flex; align-items: baseline; gap: .5rem; }
.lp-vpn-kill.is-ok i { color: var(--lp-alert-success-ink); }
.lp-vpn-kill.is-warn i { color: var(--lp-alert-warning-ink); }
.lp-vpn-kill.is-warn span { color: var(--lp-alert-warning-ink); }

/* Good to know */
.lp-vpn-facts { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--lp-bg-subtle); }
.lp-vpn-facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 3rem; margin: 0; padding: 0; list-style: none; }
.lp-vpn-facts-list li { display: flex; gap: 1rem; align-items: flex-start; color: var(--lp-text); line-height: 1.55; }
.lp-vpn-fact-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--lp-primary); background: var(--lp-surface); border-radius: 10px; box-shadow: 0 .35rem .9rem var(--lp-shadow); }
.lp-vpn-closing { background: var(--lp-bg); }

@media (max-width: 991.98px) {
  .lp-vpn-hero-grid, .lp-vpn-setups-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-vpn-route-path { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .lp-vpn-route-path::before { top: 1.75rem; bottom: 1.75rem; left: 1.75rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--vpn-navy-line), var(--vpn-signal) 50%, var(--vpn-navy-line)); }
  .lp-vpn-route-path::after { top: 1.75rem; left: calc(1.75rem - 2px); width: 6px; height: 3.5rem; background: linear-gradient(180deg, rgba(127, 176, 255, 0), #fff); animation-name: lp-vpn-flow-down; }
  .lp-vpn-stop { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .1rem; align-items: center; text-align: left; }
  .lp-vpn-stop-mark { grid-row: span 2; margin: 0; }
  .lp-vpn-stop-proxy .lp-vpn-stop-mark { width: 3.5rem; height: 3.5rem; margin: 0; }
  .lp-vpn-stop-proxy .lp-vpn-stop-mark img { width: 2.1rem; height: 2.1rem; }
  .lp-vpn-steps-list { grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; }
  .lp-vpn-step { display: flex; flex-direction: column; grid-row: auto; gap: 1.1rem; }
  .lp-vpn-steps-list::before { display: none; }
}
@keyframes lp-vpn-flow-down {
  0% { top: 1.75rem; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 1.75rem - 3.5rem); opacity: 0; }
}
@media (max-width: 575.98px) {
  .lp-vpn-checks, .lp-vpn-facts-list { grid-template-columns: minmax(0, 1fr); }
  .lp-vpn-config-code { font-size: .74rem; padding: 1.1rem 1rem; }
}
/* On the dark theme the navy band sits on a near-black page: a hairline keeps it a band. */
[data-theme="dark"] .lp-vpn-route { border-top: 1px solid var(--vpn-navy-line); border-bottom: 1px solid var(--vpn-navy-line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-vpn-route { border-top: 1px solid var(--vpn-navy-line); border-bottom: 1px solid var(--vpn-navy-line); }
}
/* Phones: each setup becomes a block, the device on top, its app and kill switch below; the column heads stay for
   screen readers. */
@media (max-width: 575.98px) {
  .lp-vpn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lp-vpn-table, .lp-vpn-table tbody, .lp-vpn-table tr, .lp-vpn-table th, .lp-vpn-table td { display: block; }
  .lp-vpn-table tr { padding: .95rem 0; border-bottom: 1px solid var(--lp-border); }
  .lp-vpn-table th, .lp-vpn-table td { padding: 0; border: 0; }
  .lp-vpn-table tbody th { margin-bottom: .3rem; font-size: 1.05rem; }
  .lp-vpn-table tbody td:nth-child(2) { margin-bottom: .35rem; color: var(--lp-text-muted); font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-vpn-route-path::after { display: none; }
  .lp-vpn-text-link i, .lp-vpn-route-tab { transition: none; }
}