/* VPN-only decorative connectivity art; no connection-status information. */
.cp-workflow-vpn {
  padding: 18px 20px 13px;
}
.cp-workflow-vpn h2 {
  margin: 14px 0 14px;
}
.cp-workflow-vpn .cp-flow {
  gap: 7px;
}
.cp-workflow-vpn .cp-flow li {
  padding-block: 12px;
}
.cp-vpn-visual {
  display: block;
  width: min(100%, 255px);
  max-width: 100%;
  margin: 8px auto 0;
}
.cp-vpn-connectivity {
  --cp-vpn-visual-scale: 1.38;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 170px;
  background: transparent;
  transform-origin: center center;
  animation: cp-vpn-connectivity-float 4.8s ease-in-out infinite;
}
.cp-vpn-connectivity > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.cp-vpn-connectivity > .cp-vpn-connectivity-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #58E8F7;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp-vpn-connectivity > .cp-vpn-connectivity-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid #58E8F7;
  border-radius: 50%;
  opacity: 0;
  animation: cp-vpn-connectivity-pulse 4.8s ease-out infinite;
}
.cp-vpn-connectivity > .cp-vpn-connectivity-node-a { left: 31%; top: 52%; }
.cp-vpn-connectivity > .cp-vpn-connectivity-node-b { left: 73%; top: 31%; }
.cp-vpn-connectivity > .cp-vpn-connectivity-node-c { left: 69%; top: 62%; }
.cp-vpn-connectivity > .cp-vpn-connectivity-node-b::after { animation-delay: -1.6s; }
.cp-vpn-connectivity > .cp-vpn-connectivity-node-c::after { animation-delay: -3.2s; }
.cp-vpn-connectivity:hover,
.cp-vpn-connectivity:hover > .cp-vpn-connectivity-node::after {
  animation-play-state: paused;
}
@keyframes cp-vpn-connectivity-float {
  0%, 100% { transform: translateY(0) scale(var(--cp-vpn-visual-scale)); }
  50% { transform: translateY(-3px) scale(var(--cp-vpn-visual-scale)); }
}
@keyframes cp-vpn-connectivity-pulse {
  0%, 55%, 100% { opacity: 0; transform: scale(.75); }
  12% { opacity: .6; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
}
@media (max-width: 620px) {
  .cp-workflow-vpn { padding: 16px 17px 12px; }
  .cp-vpn-visual { width: min(100%, 210px); }
  .cp-vpn-connectivity {
    --cp-vpn-visual-scale: 1.22;
    height: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-vpn-connectivity {
    animation: none;
    transform: scale(var(--cp-vpn-visual-scale));
  }
  .cp-vpn-connectivity > .cp-vpn-connectivity-node::after { animation: none; }
}

/* VPN page density: reduce empty space without shrinking content. */
.cp-hero {
  gap: 42px;
  padding: 40px 0 52px;
}
.cp-capabilities {
  padding: 48px 0 50px;
}
.cp-section-heading {
  margin-bottom: 22px;
}
.cp-feature {
  padding: 20px 22px;
}
.cp-feature-top {
  margin-bottom: 14px;
}
.cp-feature h3 {
  margin-bottom: 8px;
}
.cp-use-section {
  padding-block: 50px;
  gap: 44px;
}
.cp-use-section > div > p:not(.cp-kicker) {
  margin-top: 14px;
}
.cp-status {
  padding: 22px;
}
.cp-status h3 {
  margin: 9px 0 11px;
}
.cp-faq-section {
  padding: 44px 0;
}
.cp-faq-list details {
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.cp-related {
  padding-block: 46px 42px;
}
.cp-related-grid {
  margin-top: 20px;
  gap: 10px;
}
.cp-related-grid a {
  padding: 14px 15px;
}
.cp-final-cta {
  padding: 30px 34px;
  margin-bottom: 50px;
}
.cp-final-cta h2 {
  margin: 9px 0 10px;
}

@media (max-width: 820px) {
  .cp-hero {
    padding: 32px 0 38px;
    gap: 24px;
  }
  .cp-capabilities { padding: 34px 0; }
  .cp-section-heading { margin-bottom: 20px; }
  .cp-feature { padding: 18px 20px; }
  .cp-use-section { padding-block: 36px; gap: 22px; }
  .cp-status { padding: 20px; }
  .cp-faq-section { padding: 34px 0; }
  .cp-related { padding-block: 36px 32px; }
  .cp-final-cta {
    padding: 24px;
    margin-bottom: 36px;
  }
}

@media (max-width: 430px) {
  .cp-hero { padding: 26px 0 32px; }
  .cp-capabilities { padding: 30px 0; }
  .cp-feature { padding: 17px; }
  .cp-use-section { padding-block: 32px; }
  .cp-status { padding: 18px; }
  .cp-faq-section { padding: 30px 0; }
  .cp-related { padding-block: 32px 28px; }
  .cp-related-grid a { padding: 13px 14px; }
  .cp-final-cta {
    padding: 22px;
    margin-bottom: 32px;
  }
}

@media print {
  .cp-vpn-visual { display: none; }
}