/* ==========================================================
   HOME PAGE SECTIONS (2.6)
   The newer home page sections: unified data, product views,
   capabilities (now inside the solutions section), about (navy)
   and security. Loaded with site.css
   on the home page and landing pages, and in the page editor.
   Colors use the theme tokens, so dark mode follows automatically.
========================================================== */

/* Three heading levels: the hero (h1), major sections, and
   supporting sections (.nn-h-sm). */
:is(.nn-home, .editor-styles-wrapper) h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

:is(.nn-home, .editor-styles-wrapper) h2.nn-h-sm {
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   Unified data: today vs. with Netnamic
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-unify__head {
  margin: 0 auto 48px;
  max-width: 760px;
  text-align: center;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__head p:where(:not(.nn-div, .nn-span)) {
  margin-inline: auto;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__compare {
  align-items: stretch;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col {
  border-radius: 18px;
  padding: 30px 32px 28px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--before {
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--after {
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%);
  border: 1px solid var(--accent-border);
  box-shadow: var(--shadow-md);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--after .nn-unify__label {
  color: var(--accent);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col h3 {
  color: var(--text-strong);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 18px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__list li {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  padding-left: 30px;
  position: relative;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__list li strong {
  color: var(--text-strong);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__list li::before {
  border-radius: 999px;
  content: "";
  height: 18px;
  left: 0;
  position: absolute;
  top: 3px;
  width: 18px;
}

/* Before: a muted dash. After: a green check. */
:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--before li::before {
  background: linear-gradient(var(--text-muted), var(--text-muted)) center / 8px 2px no-repeat, var(--surface-2);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--before li {
  color: var(--text-soft);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--after li::before {
  background: rgba(16, 184, 129, 0.16);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--after li::after {
  border: solid var(--success-text);
  border-width: 0 2px 2px 0;
  content: "";
  height: 8px;
  left: 6.5px;
  position: absolute;
  top: 6.5px;
  transform: rotate(45deg);
  width: 4.5px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__arrow {
  align-items: center;
  align-self: center;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(33, 104, 238, 0.28);
  color: #fff;
  display: flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__arrow svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 26px;
}

/* ----------------------------------------------------------
   Product views: screenshot + text rows
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-views {
  background: var(--surface-alt);
  border-block: 1px solid var(--border);
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__head {
  margin-bottom: 56px;
  margin-inline: auto;
  max-width: 760px;
  text-align: center;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__head p:where(:not(.nn-div, .nn-span)) {
  margin-inline: auto;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__row {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__row + .nn-views__row {
  margin-top: 64px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__row--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__row--flip .nn-views__shot {
  order: 2;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__shot {
  margin: 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__shot img {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(7, 28, 52, 0.45);
  display: block;
  height: auto;
  width: 100%;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__step {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__step span {
  color: var(--text-muted);
  margin-right: 8px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__copy h3 {
  color: var(--text-strong);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 12px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__copy p:where(:not(.nn-div, .nn-span)) {
  font-size: 1rem;
  margin: 0;
}

:is(.nn-home, .editor-styles-wrapper) p.nn-views__quote {
  border-top: 1px solid var(--border);
  color: var(--text-strong);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 72px auto 0;
  max-width: 760px;
  padding-top: 40px;
  text-align: center;
}

/* With JavaScript the three rows become tabs, one screen at a time
   (the editor and no-JS visitors see all three). */
:is(.nn-home, .editor-styles-wrapper) .nn-views__tabs {
  /* The divider is drawn inside the box (not a border the tabs overlap),
     so nothing spills over and Safari shows no scrollbar. Tabs still
     scroll sideways on narrow phones, without a visible bar. */
  box-shadow: inset 0 -1px 0 var(--border);
  display: flex;
  gap: 8px;
  justify-content: safe center;
  margin: -24px 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__tabs::-webkit-scrollbar {
  display: none;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 18px 14px;
  white-space: nowrap;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__tab span {
  color: var(--text-muted);
  margin-right: 8px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__tab:hover {
  color: var(--text-strong);
}

:is(.nn-home, .editor-styles-wrapper) .nn-views__tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.nn-home .nn-views.is-tabbed .nn-views__row:not(.is-active) {
  display: none;
}

.nn-home .nn-views.is-tabbed .nn-views__row {
  animation: nn-views-in 0.3s ease-out;
  gap: 64px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  margin-top: 0;
}

.nn-home .nn-views.is-tabbed .nn-views__row .nn-views__shot {
  order: 0;
}

.nn-home .nn-views.is-tabbed .nn-views__step {
  display: none;
}

@keyframes nn-views-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   Capabilities: compact, no cards
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-caps {
  padding: 80px 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps .container {
  align-items: start;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__head p:where(:not(.nn-div, .nn-span)) {
  font-size: 0.98rem;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__grid {
  display: grid;
  gap: 0 36px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__item {
  border-top: 1px solid var(--border);
  padding: 22px 0 26px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__icon {
  color: var(--accent);
  height: 26px;
  margin-bottom: 12px;
  width: 26px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__icon svg,
:is(.nn-home, .editor-styles-wrapper) .nn-cred__audience svg {
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 100%;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__item h3,
:is(.nn-home, .editor-styles-wrapper) .nn-secure__item h3 {
  color: var(--text-strong);
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-caps__item p:where(:not(.nn-div, .nn-span)),
:is(.nn-home, .editor-styles-wrapper) .nn-secure__item p:where(:not(.nn-div, .nn-span)) {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* ----------------------------------------------------------
   About: navy, text-led
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-cred {
  background: linear-gradient(140deg, #071c34, #0a2a4a 60%, #073f52);
  color: #fff;
  overflow: hidden;
  position: relative;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__glow {
  background: radial-gradient(circle, rgba(16, 184, 129, 0.22), transparent 65%);
  height: 620px;
  pointer-events: none;
  position: absolute;
  right: -160px;
  top: -220px;
  width: 620px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred .container {
  position: relative;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__grid {
  display: grid;
  gap: 72px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred h2 {
  color: #fff;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred p:where(:not(.nn-div, .nn-span)) {
  color: rgba(255, 255, 255, 0.78);
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred p.nn-cred__intro {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.6;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__points {
  align-self: center;
  display: grid;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__point {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 20px 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__point:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__point h3 {
  color: #97f6d6;
  font-size: 1rem;
  margin: 0 0 6px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__point p:where(:not(.nn-div, .nn-span)) {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__audience {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  justify-content: space-between;
  list-style: none;
  margin: 56px 0 0;
  padding: 32px 0 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__audience li {
  align-items: center;
  color: #fff;
  display: flex;
  font-weight: 600;
  gap: 12px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-cred__audience svg {
  color: #97f6d6;
  height: 26px;
  width: 26px;
}

/* ----------------------------------------------------------
   Security: short list
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-secure {
  padding: 80px 0;
}

:is(.nn-home, .editor-styles-wrapper) .nn-secure__grid {
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
}

:is(.nn-home, .editor-styles-wrapper) .nn-secure__list {
  display: grid;
  gap: 0 36px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.nn-home, .editor-styles-wrapper) .nn-secure__item {
  border-top: 2px solid var(--text-strong);
  padding: 18px 0 26px;
}

/* ----------------------------------------------------------
   Analysis areas, inside the solutions section (2.7)
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) .nn-areas {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 40px;
  scroll-margin-top: 96px;
}

:is(.nn-home, .editor-styles-wrapper) .nn-areas__title {
  color: var(--text-strong);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-align: center;
}

:is(.nn-home, .editor-styles-wrapper) .nn-areas .nn-caps__grid {
  gap: 0 28px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

:is(.nn-home, .editor-styles-wrapper) .nn-areas .nn-caps__item {
  border-top: 0;
  padding: 20px 0 0;
}

/* ----------------------------------------------------------
   Section rhythm and spacing (2.7)
   One padding size for every full section, one gap under
   every section heading, and alternating backgrounds so each
   section reads as its own block in light mode.
---------------------------------------------------------- */

:is(.nn-home, .editor-styles-wrapper) {
  --nn-section-pad: clamp(64px, 8vw, 96px);
  --nn-head-gap: clamp(36px, 4.4vw, 52px);
}

:is(.nn-home, .editor-styles-wrapper) :is(.section, .nn-caps, .nn-secure) {
  padding-block: var(--nn-section-pad);
}

:is(.nn-home, .editor-styles-wrapper) :is(.section-heading, .intelligence-heading, .nn-unify__head, .nn-views__head) {
  margin-bottom: var(--nn-head-gap);
}

:is(.nn-home, .editor-styles-wrapper) .intelligence-heading h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify {
  background: var(--surface-alt);
  border-block: 1px solid var(--border);
}

:is(.nn-home, .editor-styles-wrapper) .nn-unify__col--before {
  background: var(--surface);
}

:is(.nn-home, .editor-styles-wrapper) .tiers-section {
  background: var(--bg);
  border-top: 0;
}

html:not(.is-dark) :is(.nn-home, .editor-styles-wrapper) .intelligence-card {
  box-shadow: var(--shadow-sm);
}

/* Small colored labels on the tinted cards use the darker ink so they stay readable. */
:is(.nn-home, .editor-styles-wrapper) :is(.intelligence-step-number, .intelligence-outcome .intelligence-kicker) {
  color: var(--intelligence-ink);
}

/* ----------------------------------------------------------
   Smaller screens
---------------------------------------------------------- */

@media (max-width: 1100px) {
  :is(.nn-home, .editor-styles-wrapper) .nn-areas .nn-caps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-caps .container,
  :is(.nn-home, .editor-styles-wrapper) .nn-secure__grid,
  :is(.nn-home, .editor-styles-wrapper) .nn-cred__grid {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-views__row,
  :is(.nn-home, .editor-styles-wrapper) .nn-views__row--flip {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-views__row--flip .nn-views__shot {
    order: 0;
  }

  .nn-home .nn-views.is-tabbed .nn-views__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  :is(.nn-home, .editor-styles-wrapper) .nn-unify__compare {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-unify__arrow {
    height: 44px;
    justify-self: center;
    transform: rotate(90deg);
    width: 44px;
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-unify__col {
    padding: 24px 22px;
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-caps__grid,
  :is(.nn-home, .editor-styles-wrapper) .nn-areas .nn-caps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-cred__audience {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  :is(.nn-home, .editor-styles-wrapper) .nn-caps__grid {
    gap: 0 18px;
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-secure__list,
  :is(.nn-home, .editor-styles-wrapper) .nn-cred__audience {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.nn-home, .editor-styles-wrapper) .nn-unify__head {
    text-align: left;
  }
}

/* ==========================================================
   Wide desktop composition — 2.7.4
   Expand product-led sections only. Editorial text stays bounded.
   These rules intentionally do not affect viewports below 1440px.
========================================================== */
@media (min-width: 1440px) {
  .nn-home {
    --nn-container-reading: 760px;
    --nn-container-standard: 1200px;
    --nn-container-wide: 1440px;
  }

  .nn-home .container {
    width: min(calc(100% - 80px), var(--nn-container-standard));
  }

  .nn-home :is(.hero, .tiers-section, .nn-views, .nn-cred) > .container,
  .nn-home .hero .container,
  .nn-home .tiers-section .container,
  .nn-home .nn-views .container,
  .nn-home .nn-cred .container {
    width: min(calc(100% - 80px), var(--nn-container-wide));
  }

  .nn-home .hero-grid {
    gap: clamp(56px, 5vw, 96px);
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .nn-home .intelligence-grid {
    gap: clamp(18px, 1.6vw, 28px);
  }

  .nn-home .nn-views__row {
    gap: clamp(56px, 5vw, 96px);
  }

  .nn-home .nn-cred__grid {
    gap: clamp(72px, 6vw, 112px);
  }

  .nn-home .section {
    padding-block: clamp(92px, 6.5vw, 124px);
  }

  .nn-home :is(.nn-unify__head, .nn-views__head, .section-heading.centered) > p:not(.eyebrow) {
    max-width: var(--nn-container-reading);
    margin-inline: auto;
  }
}