/* NetNavi Cloud unified design system v1.0 */
:root{
  --nn-ink:#142033;
  --nn-muted:#627084;
  --nn-nav:#536175;
  --nn-line:#dde5ee;
  --nn-card-line:#dce4ec;
  --nn-blue:#1769e0;
  --nn-blue-dark:#0e55bd;
  --nn-soft:#f4f7fa;
  --nn-page:#f6f8fb;
  --nn-white:#ffffff;
  --nn-card-shadow:0 10px 28px rgba(20,32,51,.07);
  --nn-soft-shadow:0 5px 18px rgba(20,32,51,.045);
  --nn-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html{font-size:16px!important}
body{
  margin:0!important;
  background:var(--nn-page)!important;
  color:var(--nn-ink)!important;
  font-family:var(--nn-font)!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.6!important;
}
body,button,input,select,textarea{font-family:var(--nn-font)!important}
.shell{
  width:min(1120px,calc(100% - 40px))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Utility/header identical on both sites */
.utility-bar{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid #dfe6ef!important;
  background:#142033!important;
  color:#fff!important;
}
.utility-bar-inner{
  display:grid!important;
  grid-template-columns:auto auto minmax(220px,1fr) auto!important;
  align-items:center!important;
  gap:0!important;
  min-height:40px!important;
  padding:0!important;
}
.utility-group{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 18px!important;
  color:#c8d3e0!important;
  font-size:.66rem!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
.utility-group:first-child{padding-left:0!important}
.utility-group:last-child{padding-right:0!important}
.utility-group:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  top:11px!important;
  right:0!important;
  width:1px!important;
  height:18px!important;
  background:rgba(255,255,255,.1)!important;
}
.utility-key{
  color:#8fa1b8!important;
  font-size:.58rem!important;
  font-weight:850!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
.utility-group a,.utility-group>span:last-child{
  color:#f8fbff!important;
  font-size:.66rem!important;
  font-weight:750!important;
  text-decoration:none!important;
}
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:1045!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid rgba(221,229,238,.9)!important;
  background:rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
}
.header-inner{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  min-height:84px!important;
  height:84px!important;
  padding:0!important;
}
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  color:var(--nn-ink)!important;
  text-decoration:none!important;
}
.brand img{
  display:block!important;
  width:52px!important;
  height:52px!important;
  max-width:none!important;
  flex:0 0 52px!important;
  margin:0!important;
}
.brand span{display:grid!important;line-height:1.05!important}
.brand strong{
  color:var(--nn-ink)!important;
  font-size:1.3rem!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  line-height:1.05!important;
}
.brand small{
  margin-top:5px!important;
  color:var(--nn-muted)!important;
  font-size:.72rem!important;
  font-weight:700!important;
  line-height:1.25!important;
}
.header-actions{
  display:flex!important;
  align-items:center!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:22px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.header-actions>a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--nn-nav)!important;
  font-size:.78rem!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.header-actions>a:hover{color:var(--nn-ink)!important}
.header-status-link{
  min-height:40px!important;
  padding:8px 13px!important;
  border:1px solid var(--nn-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--nn-ink)!important;
}
.header-client-link,
.header-actions>a.header-client-link:link,
.header-actions>a.header-client-link:visited{
  min-height:40px!important;
  padding:8px 15px!important;
  border:1px solid var(--nn-blue)!important;
  border-radius:8px!important;
  background:var(--nn-blue)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:800!important;
}
.header-client-link:hover{
  border-color:var(--nn-blue-dark)!important;
  background:var(--nn-blue-dark)!important;
  color:#fff!important;
}
.menu-toggle{
  display:none!important;
  min-height:40px!important;
  padding:8px 11px!important;
  border:1px solid var(--nn-line)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--nn-ink)!important;
  font-size:.78rem!important;
  font-weight:800!important;
}

/* Core typography */
/* Keep the unified defaults low-specificity so component/page themes can
   deliberately override them (especially dark sections). */
main h1,#main-body h1{
  color:var(--nn-ink);
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:1.06;
}
main h2,#main-body h2{
  color:var(--nn-ink);
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:750;
  letter-spacing:-.025em;
  line-height:1.12;
}
main h3,#main-body h3{
  color:var(--nn-ink);
  font-size:.92rem;
  font-weight:750;
  letter-spacing:0;
  line-height:1.25;
}
main p,main li,#main-body p,#main-body li,.text-muted{
  color:var(--nn-muted);
}
.eyebrow,.nn-home-eyebrow,.nn-login-eyebrow{
  color:#536174!important;
  font-size:.78rem!important;
  font-weight:750!important;
  letter-spacing:0!important;
  line-height:1.2!important;
  text-transform:none!important;
}

/* Shared cards/buttons/forms */
.nn-card,
.commercial-product-card,
.hero-service-panel,
.process-grid article,
.infrastructure-feature-grid article,
.transparency-card,
.faq-list details,
.card,.panel,.logincontainer{
  border:1px solid var(--nn-card-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:var(--nn-card-shadow)!important;
}
.primary-button,.secondary-button,.btn{
  min-height:42px!important;
  padding:9px 16px!important;
  border-radius:8px!important;
  font-size:.85rem!important;
  font-weight:750!important;
  line-height:1.2!important;
}
.primary-button,.btn-primary{
  border-color:var(--nn-blue)!important;
  background:var(--nn-blue)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.primary-button:hover,.btn-primary:hover,.btn-primary:focus{
  border-color:var(--nn-blue-dark)!important;
  background:var(--nn-blue-dark)!important;
  color:#fff!important;
}
.secondary-button,.btn-default,.btn-secondary,.btn-outline-primary{
  border:1px solid #ccd7e3!important;
  background:#fff!important;
  color:var(--nn-blue)!important;
  -webkit-text-fill-color:var(--nn-blue)!important;
}
.secondary-button:hover,.btn-default:hover,.btn-secondary:hover,.btn-outline-primary:hover{
  border-color:#9fb6d1!important;
  background:#f8fafc!important;
  color:var(--nn-blue-dark)!important;
  -webkit-text-fill-color:var(--nn-blue-dark)!important;
}
.form-control,
main input[type="text"],main input[type="email"],main input[type="tel"],
main input[type="password"],main input[type="number"],main select,main textarea{
  min-height:42px!important;
  border:1px solid #ccd7e3!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--nn-ink)!important;
  font-size:.875rem!important;
  box-shadow:none!important;
}
.form-control:focus,
main input:focus,main select:focus,main textarea:focus{
  border-color:var(--nn-blue)!important;
  outline:0!important;
  box-shadow:0 0 0 .2rem rgba(23,105,224,.15)!important;
}

/* Main public content rhythm */
.commercial-hero,.page-hero,.section,.process-section,.infrastructure-section,
.transparency-section,.faq-section,.final-commercial-cta,.product-section{
  background:var(--nn-page)!important;
  color:var(--nn-ink)!important;
}
.commercial-hero,.page-hero{padding:42px 0 38px!important}
.commercial-hero::after{display:none!important}
.commercial-hero-grid{gap:34px!important}
.commercial-hero-copy h1,.page-hero h1{max-width:820px!important;margin:0 0 14px!important}
.commercial-hero-copy>p,.page-hero p{
  max-width:790px!important;
  margin:0 0 20px!important;
  color:#536174!important;
  font-size:1rem!important;
  line-height:1.65!important;
}
.section{padding:44px 0!important}
.section-heading{margin-bottom:18px!important}
.section-heading h2,.infrastructure-copy h2,.transparency-card h2,.final-commercial-cta h2{
  margin:0 0 8px!important;
}
.section-heading p,.infrastructure-copy p,.transparency-card p,.final-commercial-cta p{
  color:var(--nn-muted)!important;
  font-size:.92rem!important;
  line-height:1.6!important;
}
.commercial-product-grid,.process-grid,.infrastructure-feature-grid{gap:14px!important}
.commercial-product-card,.process-grid article,.infrastructure-feature-grid article{padding:20px!important}
.commercial-product-card h3{margin:8px 0!important}
.commercial-product-card p,.process-grid p,.infrastructure-feature-grid p{
  font-size:.76rem!important;
  line-height:1.45!important;
}
.final-commercial-cta{padding:44px 0!important}
.final-commercial-cta-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  padding:24px 26px!important;
  border:1px solid var(--nn-card-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(20,32,51,.05)!important;
}

/* WHMCS content rhythm */
#main-body{
  width:100%!important;
  padding:34px 0 54px!important;
  background:var(--nn-page)!important;
}
#main-body>.container,.master-breadcrumb>.container{
  width:min(1120px,calc(100% - 40px))!important;
  max-width:none!important;
}
.master-breadcrumb{
  border-bottom:1px solid var(--nn-line)!important;
  background:#fff!important;
}
.breadcrumb{
  margin:0!important;
  padding:12px 0!important;
  background:transparent!important;
  color:var(--nn-muted)!important;
  font-size:.72rem!important;
}
.card-header,.panel-heading{
  border-bottom:1px solid var(--nn-line)!important;
  background:#fff!important;
  color:var(--nn-ink)!important;
}
.card-footer,.panel-footer{
  border-top:1px solid var(--nn-line)!important;
  background:#fff!important;
}

/* Footer identical on both */
.nnx-footer{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border-top:1px solid var(--nn-line)!important;
  background:#fff!important;
  color:var(--nn-ink)!important;
}
.nnx-footer,.nnx-footer *{box-sizing:border-box!important}
.nnx-footer-main{
  display:grid!important;
  grid-template-columns:minmax(280px,1.7fr) repeat(3,minmax(130px,1fr))!important;
  gap:48px!important;
  align-items:start!important;
  width:min(1120px,calc(100% - 40px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:48px 0 42px!important;
}
.nnx-footer-brand{max-width:410px!important}
.nnx-footer-logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:13px!important;
  margin:0 0 16px!important;
  color:var(--nn-ink)!important;
  text-decoration:none!important;
}
.nnx-footer-logo img{
  display:block!important;
  width:52px!important;
  height:52px!important;
  max-width:none!important;
  flex:0 0 52px!important;
}
.nnx-footer-logo strong{
  display:block!important;
  color:var(--nn-ink)!important;
  font-size:.95rem!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.nnx-footer-logo small{
  display:block!important;
  margin-top:4px!important;
  color:var(--nn-muted)!important;
  font-size:.68rem!important;
  font-weight:650!important;
  line-height:1.35!important;
}
.nnx-footer-brand p{
  max-width:360px!important;
  margin:0!important;
  color:var(--nn-muted)!important;
  font-size:.72rem!important;
  line-height:1.7!important;
}
.nnx-footer-column{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
}
.nnx-footer-column strong{
  margin:0 0 4px!important;
  color:var(--nn-ink)!important;
  font-size:.72rem!important;
  font-weight:800!important;
}
.nnx-footer-column a{
  color:var(--nn-muted)!important;
  font-size:.7rem!important;
  font-weight:600!important;
  text-decoration:none!important;
}
.nnx-footer-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  width:min(1120px,calc(100% - 40px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:20px 0 24px!important;
  border-top:1px solid var(--nn-line)!important;
  color:var(--nn-muted)!important;
  font-size:.66rem!important;
}
.nnx-footer-legal{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:18px!important;
}
.nnx-footer-legal a{
  color:var(--nn-muted)!important;
  font-size:.66rem!important;
  text-decoration:none!important;
}

/* Cookie notice */
.nn-cookie-notice[hidden]{display:none!important}
.nn-cookie-notice{
  position:fixed!important;
  z-index:99999!important;
  left:20px!important;
  right:20px!important;
  bottom:20px!important;
  max-width:760px!important;
  margin:0 auto!important;
}
.nn-cookie-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  padding:18px 20px!important;
  border:1px solid var(--nn-line)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 18px 50px rgba(20,32,51,.18)!important;
}

/* Responsive */
@media(max-width:900px){
  .shell,#main-body>.container,.master-breadcrumb>.container{
    width:min(1120px,calc(100% - 26px))!important;
  }
  .utility-bar-inner{
    display:flex!important;
    flex-wrap:wrap!important;
    padding:6px 0!important;
  }
  .utility-group{min-height:28px!important;padding:0 12px!important}
  .utility-group:first-child{padding-left:0!important}
  .utility-group:not(:last-child)::after{display:none!important}
  .header-inner{height:72px!important;min-height:72px!important}
  .brand img{width:45px!important;height:45px!important;flex-basis:45px!important}
  .menu-toggle{display:inline-flex!important}
  .header-actions{
    position:absolute!important;
    top:100%!important;
    right:0!important;
    left:0!important;
    display:none!important;
    align-items:stretch!important;
    flex-direction:column!important;
    gap:0!important;
    padding:12px 20px!important;
    border-bottom:1px solid var(--nn-line)!important;
    background:#fff!important;
    box-shadow:0 16px 24px rgba(20,32,51,.12)!important;
  }
  .header-actions.open{display:flex!important}
  .header-actions>a{
    width:100%!important;
    justify-content:flex-start!important;
    padding:11px 0!important;
  }
  .header-status-link{
    min-height:auto!important;
    padding:11px 0!important;
    border:0!important;
    background:transparent!important;
  }
  .header-client-link{
    justify-content:center!important;
    margin-top:6px!important;
    padding:11px 15px!important;
  }
  .nnx-footer-main{
    grid-template-columns:1.6fr repeat(2,minmax(130px,1fr))!important;
    gap:34px!important;
    width:min(1120px,calc(100% - 26px))!important;
  }
  .nnx-footer-brand{grid-column:1/-1!important;max-width:520px!important}
  .nnx-footer-bottom{width:min(1120px,calc(100% - 26px))!important}
}
@media(max-width:640px){
  .commercial-hero,.page-hero{padding:28px 0 26px!important}
  .section,.final-commercial-cta{padding:34px 0!important}
  .final-commercial-cta-inner{align-items:flex-start!important;flex-direction:column!important}
  .nnx-footer-main{
    grid-template-columns:1fr 1fr!important;
    gap:30px 24px!important;
    padding-top:38px!important;
    padding-bottom:32px!important;
  }
  .nnx-footer-brand{grid-column:1/-1!important}
  .nnx-footer-bottom{align-items:flex-start!important;flex-direction:column!important;gap:12px!important}
  .nn-cookie-inner{align-items:stretch!important;flex-direction:column!important}
}
@media(max-width:420px){
  .nnx-footer-main{grid-template-columns:1fr!important}
  .nnx-footer-brand{grid-column:auto!important}
}


/* v8.4.0 legal pages + footer legal alignment */
.legal-copy{
    max-width:860px!important;
}
.legal-copy h2{
    margin:32px 0 10px!important;
    color:#142033!important;
    font-size:1.18rem!important;
    font-weight:750!important;
    letter-spacing:-.015em!important;
    line-height:1.25!important;
}
.legal-copy h2:first-child{
    margin-top:0!important;
}
.legal-copy h3{
    margin:22px 0 8px!important;
    color:#142033!important;
    font-size:.94rem!important;
    font-weight:750!important;
}
.legal-copy p,
.legal-copy li{
    color:#536175!important;
    font-size:.86rem!important;
    line-height:1.72!important;
}
.legal-copy ul{
    margin:10px 0 18px 1.15rem!important;
    padding:0!important;
}
.legal-copy li+li{
    margin-top:7px!important;
}
.legal-copy a{
    color:#1769e0!important;
    text-decoration:none!important;
}
.legal-copy a:hover{
    color:#0e55bd!important;
    text-decoration:underline!important;
}
.legal-note{
    margin:0 0 24px!important;
    padding:14px 16px!important;
    border:1px solid #dde5ee!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#627084!important;
    font-size:.78rem!important;
    line-height:1.6!important;
}

/* Keep the legal links visually centred as a group. */
.nnx-footer-legal{
    justify-content:center!important;
}

@media(max-width:640px){
    .nnx-footer-bottom{
        align-items:center!important;
        text-align:center!important;
    }
    .nnx-footer-bottom>span{
        width:100%!important;
        text-align:center!important;
    }
    .nnx-footer-legal{
        width:100%!important;
        justify-content:center!important;
        text-align:center!important;
    }
}


/* v8.4.1 — centred legal page hero */
.page-hero .shell.narrow{
    text-align:center!important;
}
.page-hero .shell.narrow .eyebrow{
    display:block!important;
    width:100%!important;
    text-align:center!important;
}
.page-hero .shell.narrow h1{
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
}
.page-hero .shell.narrow>p{
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
}

.legal-contact-card{
    margin-top:32px!important;
    padding:18px 20px!important;
    border:1px solid #dde5ee!important;
    border-radius:10px!important;
    background:#fff!important;
}
.legal-contact-card h2{
    margin-top:0!important;
}
.legal-contact-card address{
    margin:8px 0 0!important;
    color:#536175!important;
    font-size:.86rem!important;
    font-style:normal!important;
    line-height:1.7!important;
}


/* v8.4.2 — dedicated legal hero alignment.
   Intentionally more specific than shared WHMCS-look/page-hero rules. */
html body .legal-page-hero > .shell.narrow{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
}
html body .legal-page-hero > .shell.narrow > .eyebrow,
html body .legal-page-hero > .shell.narrow > h1,
html body .legal-page-hero > .shell.narrow > p{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
}
html body .legal-page-hero > .shell.narrow > h1{
    margin-top:14px!important;
    margin-bottom:18px!important;
}
html body .legal-page-hero > .shell.narrow > p{
    margin-top:0!important;
    margin-bottom:0!important;
}


/* v12.4.1 layout-integrity compatibility patch
   Prevent unified global defaults from obscuring themed content. */
.v123-standard-title h2,
.v12-platform h2,
.nn-about-values h2,
.nn-about-values h3{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.v123-standard-points strong{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.v123-standard-points span{
  color:#b5c3d5!important;
  -webkit-text-fill-color:#b5c3d5!important;
}

.v12-plan-card .primary-button,
.v12-plan-card .secondary-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
}

.v12-plan-card .primary-button{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.v12-plan-card .secondary-button{
  color:var(--nn-blue)!important;
  -webkit-text-fill-color:var(--nn-blue)!important;
}

/* UI copy should wrap naturally rather than browser-hyphenating words. */
.v12-plan-card,
.v123-standard,
.v12-service-card,
.v12-proof{
  hyphens:none;
}