/*
 * peeryx-v124-fixes.css
 * Production-pass corrections: contact form mobile, metrics layout,
 * mode-tags separators, navbar mobile, sticky separators, blog zero-state.
 * Loaded LAST in the CSS cascade — overrides everything below it.
 */

/* ═════════════════════════════════════════════════════════════
   §1  CONTACT FORM — MOBILE FIRST
   Target: 320–640px single-column, 48px touch targets, readable
═════════════════════════════════════════════════════════════ */

/* All viewports: force full-width inputs */
html body .contact-form input,
html body .contact-form select,
html body .contact-form textarea {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}

html body .contact-form textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

/* Mobile: single column, comfortable spacing */
@media (max-width: 767px) {
  html body .contact-form .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html body .contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  html body .contact-form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  html body .contact-form label span:first-child {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #8DAABE !important;
    -webkit-text-fill-color: #8DAABE !important;
  }

  html body .contact-form .button,
  html body .contact-form button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }
}

/* Tablet 2-column */
@media (min-width: 768px) {
  html body .contact-form .form-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* Contact alternative email block */
html body .contact-alt-email,
html body .contact-form-alt {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  color: #6B849E !important;
  -webkit-text-fill-color: #6B849E !important;
  flex-wrap: wrap !important;
}

/* ═════════════════════════════════════════════════════════════
   §2  NAVBAR MOBILE — DEFINITIVE FIX
   Desktop nav links must be invisible on all screens < 1024px.
   Uses multi-technique hiding so no upstream rule can override.
═════════════════════════════════════════════════════════════ */

/* ── Header base ─────────────────────────────────────────── */
html body .site-header {
  overflow: visible !important;
}

html body .site-header .header-inner {
  overflow: visible !important;
  min-height: 64px !important;
}

/* ── MOBILE (≤1060px): hide everything that is desktop-only ── */
@media (max-width: 1060px) {

  /* ── desktop-nav: nuclear hide — every technique stacked ── */
  html body .site-header .desktop-nav,
  html body .site-header .header-inner .desktop-nav,
  html body .site-header .header-inner > nav,
  html body header[data-header] nav[aria-label="Primary"],
  html body .site-header nav.desktop-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip-path: inset(100%) !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* ── desktop account links: hidden (live in mobile panel) ── */
  html body .site-header .desktop-account-login,
  html body .site-header .desktop-account-register,
  html body .header-actions .desktop-account-login,
  html body .header-actions .desktop-account-register {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── locale-switcher: hide from header, exposed in panel ── */
  html body .site-header .header-actions .locale-switcher,
  html body .site-header .header-actions [data-locale-switcher] {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── header-inner: flex layout on mobile (logo + hamburger) ── */
  html body .site-header .header-inner,
  html body .site-header .container.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding-inline: clamp(12px, 4vw, 24px) !important;
    min-height: 64px !important;
  }
}

/* ── VERY SMALL (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  html body .site-header .header-inner,
  html body .site-header .container.header-inner {
    min-height: 54px !important;
    padding-inline: 12px !important;
  }
}

/* ── DESKTOP (≥1061px): ensure desktop-nav is shown ─────── */
@media (min-width: 1061px) {
  html body .site-header .desktop-nav,
  html body .site-header nav.desktop-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  html body .site-header .desktop-account-login,
  html body .site-header .desktop-account-register {
    display: inline-flex !important;
    visibility: visible !important;
  }

  html body .site-header .header-actions .locale-switcher,
  html body .site-header .header-actions [data-locale-switcher] {
    display: flex !important;
    visibility: visible !important;
  }
}

/* ── Logo: compact on mobile ─────────────────────────────── */
@media (max-width: 1060px) {
  html body .site-header .brand-logo {
    width: 130px !important;
    height: auto !important;
    max-width: 130px !important;
  }

  html body .site-header .brand-sub {
    display: none !important;
  }
}

@media (max-width: 390px) {
  html body .site-header .brand-logo {
    width: 110px !important;
    max-width: 110px !important;
  }
}

/* ── Mobile toggle: always visible on mobile ─────────────── */
@media (max-width: 1060px) {
  html body .site-header .mobile-toggle {
    display: grid !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ── Mobile nav panel ────────────────────────────────────── */
html body .site-header .mobile-nav {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  max-height: calc(100dvh - 64px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Very small screens: tighter nav */
@media (max-width: 360px) {
  html body .site-header .mobile-nav-inner {
    padding: 12px 14px 20px !important;
    gap: 6px !important;
  }

  html body .site-header .mobile-nav .nav-link {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}

/* ── Mobile nav demo button ──────────────────────────────── */
html body .site-header .mobile-nav .mobile-demo-link {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 12px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

/* ── Mobile account actions ──────────────────────────────── */
html body .site-header .mobile-nav .mobile-account-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(100, 160, 255, 0.10) !important;
}

html body .site-header .mobile-nav .mobile-account-actions .account-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  border: 1px solid rgba(100, 160, 255, 0.12) !important;
}

/* ── Locale section in mobile panel ─────────────────────── */
html body .site-header .mobile-nav .mobile-locale-section {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(100, 160, 255, 0.10) !important;
}

html body .site-header .mobile-nav .mobile-locale-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(150, 190, 220, 0.5) !important;
  padding: 0 16px 8px !important;
}

html body .site-header .mobile-nav .mobile-locale-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .site-header .mobile-nav .mobile-locale-link {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #8DAABE !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.15s, color 0.15s !important;
  min-height: 44px !important;
}

html body .site-header .mobile-nav .mobile-locale-link:hover {
  background: rgba(0, 200, 150, 0.08) !important;
  color: #D0E8F4 !important;
}

html body .site-header .mobile-nav .mobile-locale-link.active {
  color: #00C896 !important;
  font-weight: 700 !important;
  background: rgba(0, 200, 150, 0.08) !important;
}

/* ── Locale menu (desktop dropdown): no off-screen ───────── */
@media (max-width: 480px) {
  html body .site-header .locale-menu {
    right: -10px !important;
    left: auto !important;
    min-width: min(calc(100vw - 20px), 260px) !important;
    width: min(calc(100vw - 20px), 260px) !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §3  METRICS SECTION — SEPARATOR + STACKING
   Ensure strong/span never concatenate visually
═════════════════════════════════════════════════════════════ */

html body .pxv93-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
}

html body .pxv93-metrics > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

html body .pxv93-metrics > div > i {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  opacity: 0.65 !important;
}

html body .pxv93-metrics > div > i svg {
  width: 16px !important;
  height: 16px !important;
}

html body .pxv93-metrics > div > strong {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #EAF4FF !important;
  -webkit-text-fill-color: #EAF4FF !important;
  white-space: nowrap !important;
}

html body .pxv93-metrics > div > span {
  display: inline !important;
  font-size: 12px !important;
  color: #5C7A98 !important;
  -webkit-text-fill-color: #5C7A98 !important;
  white-space: nowrap !important;
}

/* Separator between strong and span */
html body .pxv93-metrics > div > strong::after {
  content: ' ·' !important;
  color: #3A576E !important;
  -webkit-text-fill-color: #3A576E !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

/* On mobile: wrap into column items */
@media (max-width: 600px) {
  html body .pxv93-metrics {
    gap: 8px 12px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §4  DASH-STATS — COLUMN FLEX REINFORCEMENT
   strong = value, span = label, never inline
═════════════════════════════════════════════════════════════ */

html body .pxv93-dash-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

html body .pxv93-dash-stats > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

html body .pxv93-dash-stats > div > strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--px120-teal, #00C896) !important;
  -webkit-text-fill-color: var(--px120-teal, #00C896) !important;
  font-family: 'JetBrains Mono', monospace !important;
  line-height: 1.2 !important;
}

html body .pxv93-dash-stats > div > span {
  display: block !important;
  font-size: 11px !important;
  color: var(--px120-text-muted, #5C7A98) !important;
  -webkit-text-fill-color: var(--px120-text-muted, #5C7A98) !important;
  line-height: 1.3 !important;
}

html body .pxv93-dash-stats > div.ok > strong {
  color: #4AD87C !important;
  -webkit-text-fill-color: #4AD87C !important;
}

/* ═════════════════════════════════════════════════════════════
   §5  MODE-TAGS — GAP + PILL STYLE
   Separate spans into visible chip pills with flex gap
═════════════════════════════════════════════════════════════ */

html body .pxv93-mode-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

html body .pxv93-mode-tags span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border-radius: 5px !important;
  background: rgba(0, 200, 150, 0.07) !important;
  border: 1px solid rgba(0, 200, 150, 0.15) !important;
  color: var(--px120-teal, #00C896) !important;
  -webkit-text-fill-color: var(--px120-teal, #00C896) !important;
  white-space: nowrap !important;
}

/* ═════════════════════════════════════════════════════════════
   §6  TRANSIT-PROOF ITEMS — BLOCK SEPARATION
═════════════════════════════════════════════════════════════ */

html body .transit-proof-item-v81 {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

html body .transit-proof-item-v81 strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #EAF4FF !important;
  -webkit-text-fill-color: #EAF4FF !important;
}

html body .transit-proof-item-v81 span {
  display: block !important;
  font-size: 12px !important;
  color: #6B849E !important;
  -webkit-text-fill-color: #6B849E !important;
  line-height: 1.4 !important;
}

/* ═════════════════════════════════════════════════════════════
   §7  GLOBAL MOBILE OVERFLOW PREVENTION
   No horizontal scroll, no cut-off content
═════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html body {
    overflow-x: hidden !important;
  }

  html body .pxv93-home .pxv93-container {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Hero metrics: wrap on narrow screens */
  html body .pxv93-home .pxv93-metrics {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }

  /* Hero title: no overflow */
  html body .pxv93-home .pxv93-hero-copy h1 {
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Cards: ensure full width */
  html body .pxv93-home .pxv93-solutions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard: scroll if overflow */
  html body .pxv93-home .pxv93-dashboard {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 320px extreme: everything single column */
@media (max-width: 360px) {
  html body .pxv93-partner-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-solutions-grid {
    grid-template-columns: 1fr !important;
  }

  html body .pxv93-mode-tags span {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §8  BLOG — EMPTY STATE ROBUST HIDE
═════════════════════════════════════════════════════════════ */

/* Extra reinforcement: hidden attribute ALWAYS hides */
html body [hidden] {
  display: none !important;
  visibility: hidden !important;
}

html body .blog-empty-state-v80[hidden] {
  display: none !important;
}

html body .blog-empty-state-v80:not([hidden]) {
  display: block !important;
  padding: 32px 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #5C7A98 !important;
  -webkit-text-fill-color: #5C7A98 !important;
}

/* ═════════════════════════════════════════════════════════════
   §9  FOOTER MOBILE
   Prevent footer columns from creating horizontal scroll
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  html body .site-footer .footer-grid,
  html body .site-footer .footer-cols,
  html body .site-footer .footer-columns {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  html body .site-footer .footer-brand {
    grid-column: 1 / -1 !important;
  }

  html body .footer-legal-minimal {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  html body .flm-links {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  html body .site-footer .footer-grid,
  html body .site-footer .footer-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §10  PARTNERS PAGE — MOBILE
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  html body .page-partners .partners-premium-grid {
    grid-template-columns: 1fr !important;
  }

  html body .page-partners .partner-premium-card {
    padding: 18px 16px !important;
  }

  html body .page-partners .ppc-logo {
    max-height: 36px !important;
    width: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §11  CARDS PREMIUM — MOBILE TOUCH
   Ensure all interactive cards have proper touch targets
═════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html body .pxv93-home .pxv93-solution {
    padding: 18px 16px !important;
  }

  html body .pxv93-home .pxv93-solution ul li {
    padding: 5px 0 !important;
    font-size: 13px !important;
  }

  html body .pxv93-home .pxv93-benefit {
    flex-direction: row !important;
    gap: 12px !important;
  }

  html body .pxv93-home .pxv93-mode-card {
    padding: 18px 16px !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §12  HERO MOBILE — BREATHING ROOM
═════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html body .pxv93-home .pxv93-hero {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
  }

  html body .pxv93-home .pxv93-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  html body .pxv93-home .px-hero-panel {
    display: none !important;
  }

  html body .pxv93-home .pxv93-hero-copy h1 {
    font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }

  html body .pxv93-home .pxv93-lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  html body .pxv93-home .pxv93-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body .pxv93-home .pxv93-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §13  SECTIONS GENERAL — PADDING MOBILE
═════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  html body .pxv93-home .pxv93-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  html body .pxv93-home .pxv93-modes .pxv93-container {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  html body .pxv93-home .pxv93-modes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  html body .pxv93-home .pxv93-modes-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §14  BLOG MOBILE
═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  html body .blog-filter-bar-v80 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  html body .blog-topic-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  html body .blog-topic-chip-v80 {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  html body .resource-card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html body .resource-card-grid-visual > a {
    flex-direction: column !important;
  }

  html body .blog-home-visual {
    display: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §15  PREFERS-REDUCED-MOTION
═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html body .pxv93-home .reveal,
  html body .pxv93-home .pxv99-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body .pxv93-metrics > div,
  html body .pxv93-solution,
  html body .pxv93-partner-item {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   §16  NETWORK PAGE — PoP grid, badges, steps, scope table
═════════════════════════════════════════════════════════════ */

html body .network-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  html body .network-pop-grid { grid-template-columns: 1fr; }
}

html body .network-pop-card {
  padding: 20px;
  background: rgba(20, 35, 50, 0.6);
  border: 1px solid rgba(0, 200, 150, 0.12);
  border-radius: 10px;
}

html body .network-pop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

html body .network-pop-names strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #E0EEF8;
}

html body .network-pop-names span {
  font-size: 12px;
  color: #5C7A98;
}

html body .network-pop-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

html body .pop-badge-active {
  background: rgba(0, 200, 100, 0.12);
  color: #00C878;
  border: 1px solid rgba(0, 200, 100, 0.25);
}

html body .pop-badge-deploy {
  background: rgba(255, 160, 0, 0.10);
  color: #FFA000;
  border: 1px solid rgba(255, 160, 0, 0.20);
}

html body .pop-badge-roadmap {
  background: rgba(100, 160, 255, 0.10);
  color: #6AA0FF;
  border: 1px solid rgba(100, 160, 255, 0.20);
}

html body .network-pop-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

html body .network-pop-details li {
  font-size: 13px;
  color: #7A96B2;
  padding-left: 14px;
  position: relative;
}

html body .network-pop-details li::before {
  content: '\00B7';
  position: absolute;
  left: 0;
  color: #3A576E;
}

/* BGP section cards */
html body .network-bgp-section .px-card,
html body .network-delivery-section .px-card {
  padding: 20px;
  background: rgba(20, 35, 50, 0.6);
  border: 1px solid rgba(0, 200, 150, 0.10);
  border-radius: 10px;
}

/* Steps */
html body .network-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  html body .network-steps-grid { grid-template-columns: 1fr; }
}

html body .network-step-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 16px;
  background: rgba(20, 35, 50, 0.5);
  border: 1px solid rgba(0, 200, 150, 0.08);
  border-radius: 10px;
}

html body .network-step-num {
  font-size: 28px;
  font-weight: 900;
  color: rgba(0, 200, 150, 0.3);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  line-height: 1;
  width: 32px;
  text-align: center;
}

html body .network-step-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #D0E8F4;
}

html body .network-step-body p {
  font-size: 13px;
  color: #7A96B2;
  margin: 0;
  line-height: 1.55;
}

/* Scope grid */
html body .network-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  html body .network-scope-grid { grid-template-columns: 1fr; }
}

html body .network-scope-card {
  padding: 20px;
  background: rgba(20, 35, 50, 0.5);
  border: 1px solid rgba(0, 200, 150, 0.08);
  border-radius: 10px;
}

html body .network-scope-peeryx {
  border-color: rgba(0, 200, 150, 0.22);
  background: rgba(0, 200, 150, 0.04);
}

html body .network-scope-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #D0E8F4;
}

html body .network-scope-peeryx .network-scope-title {
  color: var(--px120-teal, #00C896);
}

html body .network-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html body .network-scope-list li {
  font-size: 13px;
  color: #8DAABE;
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}

html body .network-scope-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #00C896;
  font-size: 11px;
  top: 1px;
}

/* Section headings shared styles */
html body .px83-network .section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px120-teal, #00C896);
  margin-bottom: 8px;
}

html body .px83-network .section-lead {
  font-size: 15px;
  color: #7A96B2;
  max-width: 620px;
  margin: 8px 0 28px;
  line-height: 1.6;
}

/* Network CTA band */
html body .network-cta-band {
  padding: 48px 32px;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.08), rgba(0, 120, 200, 0.06));
  border: 1px solid rgba(0, 200, 150, 0.15);
  border-radius: 14px;
  text-align: center;
  margin: 0 16px;
}

html body .network-cta-band h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
}

html body .network-cta-band p {
  font-size: 14px;
  color: #7A96B2;
  margin: 0 0 24px;
}

@media (max-width: 480px) {
  html body .network-cta-band { padding: 32px 20px; margin: 0; }
  html body .network-cta-band h2 { font-size: 18px; }
}