/*!
 * NetApp Platform experience — SCOPED stylesheet (cleaned, mobile-first).
 *
 * Every selector is a descendant of .netapp-experience-container.
 * Custom properties live on that container rather than :root.
 * Layout sizes use --nlp-vw / --nlp-vh (set in px by script.js).
 *
 * Breakpoints (mobile-first):
 *   Base        — mobile (360px+)
 *   ≥ 768px     — tablet ($md-breakpoint-width)
 *   ≥ 1400px    — desktop ($lg-breakpoint-width)
 *
 * Additional conditional queries:
 *   ≤ 600px + ≤ 700px height — short phone (iPhone SE)
 *
 * Section index:
 *   1.  Font face & design tokens (mobile base)
 *   2.  Reset
 *   3.  Reduced motion
 *   4.  Container & scroll
 *   5.  Pinned viewport & stage
 *   6.  Steps & copy panels
 *   7.  Shared copy shell
 *   8.  Typography
 *   9.  Nav items & active highlight
 *  10.  Scroll cue & text link
 *  11.  Cube shell & slabs
 *  12.  Rain / data-flow
 *  13.  Particles
 *  14.  Expand buttons
 *  15.  Pagination
 *  16.  Dialogs
 *  17.  Workloads bar
 *  18.  CMS-safe icon sizing
 *  19.  Focus ring
 *  20.  Short phone overrides (≤ 600px + ≤ 700px height)
 *  21.  Tablet overrides (≥ 768px)
 *  21b. Narrow tablet overrides (768px – 1024px)
 *  22.  Desktop overrides (≥ 1400px)
 */
/* =================================================================
   CRITICAL: Prevent total rendering failure on older WebKit.
   If any CSS rule below causes a parse error, this ensures the
   container at minimum is visible and has dimensions.
   ================================================================= */
.netapp-experience-container {
  display: block !important;
  min-height: 100vh;
}

.netapp-experience-container .nlp {
  display: block;
}

/* =================================================================
  0. iOS 16.0-16.3 COMPATIBILITY
  These older WebKit versions don't support :has(), allow-discrete,
  or overlay transitions. Provide safe fallbacks.
  ================================================================= */

/* Safe dialog transition that doesn't use allow-discrete or overlay.
   The @supports block ensures modern browsers still get the enhanced
   transition while older ones get a basic fade. */
.netapp-experience-container .nlp-dialog {
  transition: opacity 280ms ease, transform 280ms ease;
}

@supports (transition-behavior: allow-discrete) {
  .netapp-experience-container .nlp-dialog {
    transition:
      opacity 280ms ease,
      transform 280ms ease,
      display 280ms allow-discrete,
      overlay 280ms allow-discrete;
  }
}

/* Fallback for :has() — older iOS won't apply the layer-focused
   cube repositioning. The JS already handles cube positioning
   via inline styles, so the :has() rules are progressive
   enhancement only. Ensure the base layout still works. */
@supports not selector(:has(*)) {
  .netapp-experience-container .nlp-cube--stage {
    display: block;
  }
}


/* =================================================================
   1. FONT FACE & DESIGN TOKENS (mobile base)
   ================================================================= */

@font-face {
  font-family: "F37 Judge";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/F37Judge-MediumExtended.woff2") format("woff2");
}

.netapp-experience-container {
  /* Colors */
  --nlp-violet: #7b27ff;
  --nlp-magenta: #e424ff;
  --nlp-cyan: #00ddf4;
  --nlp-lime: #b2f000;
  --nlp-white: #ffffff;
  --nlp-black: #000000;
  --nlp-gray-100: #efefef;
  --nlp-gray-400: #8f8e91;
  --nlp-gray-800: #333333;

  /* Typography */
  --nlp-font-heading: "F37 Judge", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nlp-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout — mobile base */
  --nlp-margin-l: 16px;
  --nlp-margin-r: 16px;
  --nlp-content-w: calc(var(--nlp-vw) - 32px);

  /* Cube — mobile base */
  --nlp-wf-left: 15.28%;
  --nlp-mobile-bottom-reserve: 112px;

  --nlp-cube-w: min(
    var(
      --nlp-mobile-start-cube-w,
      min(calc(var(--nlp-vw) * 0.6944), calc(var(--nlp-vh) * 0.56667))
    ),
    calc(
      (
        var(--nlp-vh) -
        var(--nlp-mobile-start-cube-top, 330px) -
        var(--nlp-mobile-bottom-reserve)
      ) / 1.152882
    )
  );

  --nlp-wf-w: var(--nlp-cube-w);
  --nlp-wf-h: calc(var(--nlp-cube-w) * 1.152882);
  --nlp-wf-top: var(
    --nlp-mobile-start-cube-top,
    calc(calc(var(--nlp-vh) * 0.6506) - var(--nlp-wf-h) / 2)
  );
  --nlp-lip-h: calc(var(--nlp-cube-w) * 0.570529);
  --nlp-bottom-top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.578118);
  --nlp-bottom-h: calc(var(--nlp-cube-w) * 0.576529);

  /* Env layer geometry */
  --nlp-env-left: calc(var(--nlp-wf-left) + var(--nlp-cube-w) * 0.109804);
  --nlp-env-w: calc(var(--nlp-cube-w) * 0.781);
  --nlp-env-h: calc(var(--nlp-cube-w) * 0.541076);
  --nlp-env-cp-top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.192176);
  --nlp-env-ds-top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.339353);
  --nlp-env-us-top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.488294);

  /* Transition */
  --nlp-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --nlp-dur: 650ms;
}


/* =================================================================
   2. RESET
   ================================================================= */

.netapp-experience-container,
.netapp-experience-container *,
.netapp-experience-container::before,
.netapp-experience-container *::before,
.netapp-experience-container::after,
.netapp-experience-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.netapp-experience-container img {
  display: block;
  max-width: none;
}

.netapp-experience-container button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

.netapp-experience-container ul,
.netapp-experience-container ol {
  list-style: none;
}

.netapp-experience-container dialog {
  padding: 0;
  border: none;
  background: none;
}

/* ─── Cross-platform scroll normalization ────────────────────── */
.netapp-experience-container {
  overscroll-behavior: auto;
  -ms-scroll-chaining: chained;
}

#nlp-scroll {
  overflow: visible;
  -webkit-overflow-scrolling: auto;
}

.nlp {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

@media (forced-colors: active) {
  .nlp-stream::before,
  .nlp-stream::after {
    forced-color-adjust: none;
  }
}

.pin-spacer {
  overflow: visible !important;
  padding: 0 !important;
}


/* =================================================================
   3. REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .netapp-experience-container,
  .netapp-experience-container *,
  .netapp-experience-container::before,
  .netapp-experience-container *::before,
  .netapp-experience-container::after,
  .netapp-experience-container *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .netapp-experience-container .nlp-rain,
  .netapp-experience-container .nlp-stage .nlp-particles {
    display: none;
  }
}


/* =================================================================
   4. CONTAINER & SCROLL
   ================================================================= */

.netapp-experience-container:not(.nlp-ready) .nlp {
  visibility: hidden;
}

.netapp-experience-container {
  position: relative;
  overflow: visible;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--nlp-black);
  color: var(--nlp-white);
}

@supports (overflow-x: clip) {
  .netapp-experience-container {
    overflow-x: clip;
    overflow-y: visible;
  }
}


.netapp-experience-container .nlp-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* =================================================================
   5. PINNED VIEWPORT & STAGE
   ================================================================= */

.netapp-experience-container .nlp {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: calc(var(--nlp-vh, 100vh) * 1);
  overflow: hidden;
  z-index: 1;
}

.netapp-experience-container .nlp-stage,
.netapp-experience-container .nlp-panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.netapp-experience-container .nlp-stage {
  z-index: 1;
}

.netapp-experience-container .nlp-panels {
  z-index: 2;
}


/* =================================================================
   6. STEPS & COPY PANELS
   ================================================================= */

.netapp-experience-container .nlp-scene {
  position: relative;
  width: calc(var(--nlp-vw) * 1);
  height: calc(var(--nlp-vh) * 1);
  flex-shrink: 0;
  overflow: hidden;
}

.netapp-experience-container .nlp-panels .nlp-step {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(var(--nlp-vh) * 1);
  background: none;
  overflow: visible;
}

.netapp-experience-container .nlp-scene__content {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 19px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.netapp-experience-container .nlp-panels .nlp-step .nlp-scene__content {
  visibility: hidden;
  pointer-events: none;
}

.netapp-experience-container .nlp-hgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.netapp-experience-container .nlp-scene__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.netapp-experience-container .nlp-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 28px;
}

.netapp-experience-container .nlp-layer-copy {
  border-left: 3px solid var(--nlp-violet);
  padding-left: 16px;
  padding-right: 35px;
  margin-top: 20px;
}

.netapp-experience-container .nlp-panels .nlp-hgroup,
.netapp-experience-container .nlp-panels .nlp-platform-nav,
.netapp-experience-container .nlp-panels .nlp-panel,
.netapp-experience-container .nlp-panels .nlp-scene__footer {
  will-change: opacity;
}

.netapp-experience-container .nlp-panels button,
.netapp-experience-container .nlp-panels a {
  pointer-events: auto;
}

.netapp-experience-container .nlp-panels [data-inert="true"] {
  pointer-events: none;
  visibility: hidden;
}

.netapp-experience-container .nlp-scene--start .nlp-scene__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  left: 16px;
  right: 16px;
  width: auto;
  height: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

.netapp-experience-container .nlp-scene--start .nlp-panel {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  margin-top: 20px;
}

.netapp-experience-container .nlp-scene--layer .nlp-layer-copy {
  border-left-color: var(--nlp-magenta);
  margin-top: 12px;
}

.netapp-experience-container .nlp-scene--layer .nlp-platform-nav {
  margin-top: 12px;
}

.netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-scene__content {
  padding-top: 16px;
  padding-bottom: 16px;
}

.netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-hgroup {
  margin-top: 0;
}

.netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-platform-nav,
.netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-panel {
  margin-top: 20px;
}

/* Layer-focused mobile: reposition cube into the lower portion
   of the screen below text. SCOPED to max-width so it never
   affects tablet or desktop. */
@media (max-width: 767px) {
  .netapp-experience-container:has(.nlp-step[aria-hidden="false"][data-layer]) {
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.62),
      calc(var(--nlp-vh) * 0.46)
    );
    --nlp-wf-top: calc(
      calc(var(--nlp-vh) * 0.62) - var(--nlp-wf-h) / 2
    );
    --nlp-wf-left: calc(50% - var(--nlp-cube-w) / 2);
  }
  /* Hide "The NetApp Platform" microcopy and
     "Intelligent data infrastructure..." heading
     from view 3 (CP) onwards — layer, summary, and final modes */
  .netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-hgroup,
  .netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-hgroup,
  .netapp-experience-container .nlp-copy-shell[data-mode="final"] .nlp-hgroup {
    display: none;
  }

  /* Hide footer block ("THE POWER OF THE NETAPP PLATFORM")*/
  .netapp-experience-container .nlp-copy-shell .nlp-scene__footer .nlp-eyebrow {
    display: none;
  }
}

/* Per-layer highlight colours */
.netapp-experience-container .nlp-panels .nlp-step[data-layer="cp"] .nlp-layer-copy {
  border-left-color: var(--nlp-magenta);
}

.netapp-experience-container .nlp-panels .nlp-step[data-layer="ds"] .nlp-layer-copy {
  border-left-color: var(--nlp-cyan);
}

.netapp-experience-container .nlp-panels .nlp-step[data-layer="us"] .nlp-layer-copy {
  border-left-color: var(--nlp-lime);
}

.netapp-experience-container .nlp-panels .nlp-step[data-layer="dr"] .nlp-layer-copy {
  border-left-color: var(--nlp-violet);
}

/* ─── Mobile: text content z-stacking over cube ─────────────── */
@media (max-width: 767px) {
  .netapp-experience-container .nlp-copy-shell .nlp-scene__content {
    position: relative;
    z-index: 5;
  }

  .netapp-experience-container .nlp-copy-shell .nlp-scene__content::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 0;
    height: calc(var(--nlp-mobile-layer-text-zone, 42%) + 12px);
    background: linear-gradient(
      to bottom,
      var(--nlp-black) 0%,
      var(--nlp-black) 85%,
      transparent 100%
    );
    z-index: -1;
    pointer-events: none;
  }

  .netapp-experience-container .nlp-copy-shell[data-mode="start"] .nlp-scene__content::after,
  .netapp-experience-container .nlp-copy-shell[data-mode="overview"] .nlp-scene__content::after,
  .netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-scene__content::after,
  .netapp-experience-container .nlp-copy-shell[data-mode="final"] .nlp-scene__content::after {
    content: none;
  }

  .netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-scene__footer,
  .netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-scene__footer {
    position: relative;
    z-index: 5;
  }

  /* =================================================================
   Mobile: center animated cube/stage reliably across iOS Safari
   ================================================================= */
  .netapp-experience-container {
    --nlp-wf-left: calc((var(--nlp-vw, 100vw) - var(--nlp-cube-w)) / 2);
  }

  .netapp-experience-container .nlp-cube--stage .nlp-cube__wireframe,
  .netapp-experience-container .nlp-cube--stage .nlp-cube__lip,
  .netapp-experience-container .nlp-cube--stage .nlp-cube__bottom {
    left: calc((var(--nlp-vw, 100vw) - var(--nlp-cube-w)) / 2) !important;
  }
}


/* =================================================================
   7. SHARED COPY SHELL
   ================================================================= */

.netapp-experience-container .nlp-copy-shell {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.netapp-experience-container .nlp-copy-shell button,
.netapp-experience-container .nlp-copy-shell a {
  pointer-events: auto;
}

.netapp-experience-container .nlp-copy-shell .nlp-scene__content {
  opacity: 1;
}

/* Mode: start */
.netapp-experience-container .nlp-copy-shell[data-mode="start"] .nlp-platform-nav,
.netapp-experience-container .nlp-copy-shell[data-mode="start"] .nlp-scene__footer,
.netapp-experience-container .nlp-copy-shell[data-mode="start"] .nlp-layer-copy {
  display: none;
}

/* Mode: overview */
.netapp-experience-container .nlp-copy-shell[data-mode="overview"] .nlp-copy-shell__start-panel,
.netapp-experience-container .nlp-copy-shell[data-mode="overview"] .nlp-layer-copy {
  display: none;
}

/* Mode: layer */
.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-copy-shell__start-panel {
  display: none;
}

/* Mode: summary */
.netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-copy-shell__start-panel,
.netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-layer-copy {
  display: none;
}

.netapp-experience-container .nlp-copy-shell[data-mode="summary"] .nlp-text-link {
  color: var(--nlp-white);
}

/* Mode: final */
.netapp-experience-container .nlp-copy-shell[data-mode="final"] {
  opacity: 0;
  pointer-events: none;
}

/* Layer copy — static left border */
.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-layer-copy {
  position: relative;
  border-left-color: transparent !important;
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-layer-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--nlp-active-layer-color, var(--nlp-violet));
  pointer-events: none;
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-layer-copy > * {
  position: relative;
  z-index: 1;
}

/* Layer copy border color via :has() */
.netapp-experience-container .nlp-copy-shell[data-mode="layer"]:has(.nlp-nav-item[data-layer-nav="cp"].is-active) {
  --nlp-active-layer-color: var(--nlp-magenta);
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"]:has(.nlp-nav-item[data-layer-nav="ds"].is-active) {
  --nlp-active-layer-color: var(--nlp-cyan);
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"]:has(.nlp-nav-item[data-layer-nav="us"].is-active) {
  --nlp-active-layer-color: var(--nlp-lime);
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"]:has(.nlp-nav-item[data-layer-nav="dr"].is-active) {
  --nlp-active-layer-color: var(--nlp-violet);
}


/* =================================================================
   8. TYPOGRAPHY (mobile base)
   ================================================================= */

.netapp-experience-container .nlp-microcopy {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-heading-4 {
  font-family: var(--nlp-font-heading);
  font-weight: 500;
  font-size: clamp(18px, calc(var(--nlp-vw) * 0.06), 24px);
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-start-heading__wide {
  display: none;
}

.netapp-experience-container .nlp-start-heading__mobile {
  display: block;
  white-space: nowrap;
}

.netapp-experience-container .nlp-scene--start .nlp-heading-4 {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 1px;
}

.netapp-experience-container .nlp-body-medium {
  font-family: var(--nlp-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-scene--start .nlp-body-medium {
  font-size: 18px;
}

.netapp-experience-container .nlp-eyebrow {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nlp-gray-400);
}


/* =================================================================
   9. NAV ITEMS & ACTIVE HIGHLIGHT
   ================================================================= */

.netapp-experience-container .nlp-platform-nav {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  position: relative;
}

.netapp-experience-container .nlp-nav-item {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--nlp-gray-400);
  text-align: left;
  display: flex;
  align-items: center;
  height: 36px;
  transition: color 200ms ease;
  position: relative;
  padding-left: 0;
  z-index: 1;
}

.netapp-experience-container .nlp-nav-item:hover {
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item.is-active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item.nlp-nav-item--active {
  background: transparent !important;
  font-size: 22px;
  line-height: 1.35;
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item:not(.is-active):not(.nlp-nav-item--active) {
  background: transparent !important;
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item.is-active::before,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item.nlp-nav-item--active::before {
  display: none !important;
  content: none !important;
}

/* Layer mode: active nav styling */
.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-nav-item.is-active,
.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-nav-item.nlp-nav-item--active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-height: 38px;
  padding: 0 12px;
  color: var(--nlp-black) !important;
  font-weight: 700;
  background: transparent !important;
}

.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-nav-item.is-active::before,
.netapp-experience-container .nlp-copy-shell[data-mode="layer"] .nlp-nav-item.nlp-nav-item--active::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
  pointer-events: none;
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item.nlp-animating {
  animation: nlp-shared-nav-label-opacity 0.4s ease-in-out both;
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item.nlp-animating::before {
  animation: nlp-shared-nav-bg-left-to-right 1s ease-in-out both;
}

/* Per-layer nav ::before background colors */
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="cp"].is-active::before,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="cp"].nlp-nav-item--active::before {
  background: var(--nlp-magenta);
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="ds"].is-active::before,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="ds"].nlp-nav-item--active::before {
  background: var(--nlp-cyan);
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="us"].is-active::before,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="us"].nlp-nav-item--active::before {
  background: var(--nlp-lime);
}

.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="dr"].is-active::before,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="dr"].nlp-nav-item--active::before {
  background: var(--nlp-violet);
}

/* Per-layer nav text colors */
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="cp"].is-active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="cp"].nlp-nav-item--active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="ds"].is-active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="ds"].nlp-nav-item--active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="us"].is-active,
.netapp-experience-container .nlp-copy-shell .nlp-nav-item[data-layer-nav="us"].nlp-nav-item--active {
  color: var(--nlp-black) !important;
}

/* Nav layer copy positioning */
.netapp-experience-container .nlp-copy-shell .nlp-layer-copy {
  position: relative;
  z-index: 1;
}

/* Nav highlight element — disabled */
.netapp-experience-container .nlp-copy-shell .nlp-nav-highlight {
  display: none !important;
}

@keyframes nlp-shared-nav-bg-left-to-right {
  0% {
    animation-timing-function: ease-in-out;
    transform: scaleX(0) scaleY(0);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}

@keyframes nlp-shared-nav-label-opacity {
  0% {
    animation-timing-function: ease-in-out;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* =================================================================
   10. SCROLL CUE & TEXT LINK
   ================================================================= */

.netapp-experience-container .nlp-cue {
  display: flex;
  align-items: center;
  gap: 14px;
}

.netapp-experience-container .nlp-cue__line {
  display: block;
  width: 22.4px;
  height: 1px;
  background: var(--nlp-gray-400);
  flex-shrink: 0;
  transform-origin: left center;
  animation: nlp-cue-line-pulse 3s linear infinite;
}

@keyframes nlp-cue-line-pulse {
  0% {
    animation-timing-function: ease-in-out;
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.04);
  }
  100% {
    transform: scaleX(1);
  }
}

.netapp-experience-container .nlp-cue__label {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nlp-gray-400);
  white-space: nowrap;
}

.netapp-experience-container .nlp-text-link {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--nlp-white);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: fit-content;
}

.netapp-experience-container .nlp-text-link__line {
  width: 100%;
  height: 0;
  position: relative;
}

.netapp-experience-container .nlp-text-link__line img {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: auto;
}


/* =================================================================
   11. CUBE SHELL & SLABS
   ================================================================= */

.netapp-experience-container .nlp-cube {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.netapp-experience-container .nlp-cube--stage {
  display: block;
}

.netapp-experience-container .nlp-scene--start .nlp-cube {
  display: block;
}

.netapp-experience-container .nlp-cube__wireframe {
  position: absolute;
  left: var(--nlp-wf-left);
  top: var(--nlp-wf-top);
  width: var(--nlp-wf-w);
  height: var(--nlp-wf-h);
  z-index: 2;
}

.netapp-experience-container .nlp-cube__lip {
  position: absolute;
  left: var(--nlp-wf-left);
  top: var(--nlp-wf-top);
  width: var(--nlp-wf-w);
  height: var(--nlp-lip-h);
  z-index: 3;
  -webkit-clip-path: inset(18% 33% 34% 33%) !important;
  clip-path: inset(18% 33% 34% 33%) !important;
}

.netapp-experience-container .nlp-cube__bottom {
  position: absolute;
  left: var(--nlp-wf-left);
  top: var(--nlp-bottom-top);
  width: var(--nlp-wf-w);
  height: var(--nlp-bottom-h);
  z-index: 1;
}

.netapp-experience-container .nlp-cube--stage .nlp-cube__wireframe,
.netapp-experience-container .nlp-cube--stage .nlp-cube__lip,
.netapp-experience-container .nlp-cube--stage .nlp-cube__bottom {
  will-change: opacity;
}

.netapp-experience-container .nlp-scene--start .nlp-cube__wireframe,
.netapp-experience-container .nlp-scene--start .nlp-cube__lip {
  left: 15.28%;
  top: calc(calc(var(--nlp-vh) * 0.5953) - var(--nlp-cube-w) * 0.577324);
  width: var(--nlp-cube-w);
}

.netapp-experience-container .nlp-scene--start .nlp-cube__wireframe {
  height: calc(var(--nlp-cube-w) * 1.154647);
}

.netapp-experience-container .nlp-scene--start .nlp-cube__lip {
  height: calc(var(--nlp-cube-w) * 0.577412);
}

.netapp-experience-container .nlp-slab {
  position: absolute;
  left: var(--nlp-env-left);
  width: var(--nlp-env-w);
  height: var(--nlp-env-h);
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.netapp-experience-container .nlp-slab[data-slab="cp"] {
  top: var(--nlp-env-cp-top);
}

.netapp-experience-container .nlp-slab[data-slab="ds"] {
  top: var(--nlp-env-ds-top);
}

.netapp-experience-container .nlp-slab[data-slab="us"] {
  top: var(--nlp-env-us-top);
}

.netapp-experience-container .nlp-slab__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.netapp-experience-container .nlp-slab__face--colored {
  will-change: opacity;
}


/* =================================================================
   12. RAIN / DATA-FLOW
   ================================================================= */

.netapp-experience-container .nlp-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

.netapp-experience-container .nlp-rain[data-rain="cp-ds"] {
  --c-upper: var(--nlp-magenta);
  --c-lower: var(--nlp-cyan);
}

.netapp-experience-container .nlp-rain[data-rain="ds-us"] {
  --c-upper: var(--nlp-cyan);
  --c-lower: var(--nlp-lime);
}

.netapp-experience-container .nlp-rain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(37, 0, 109, 1) 100%)
      left top / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(37, 0, 109, 1) 100%)
      center top / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(37, 0, 109, 1) 100%)
      right top / 1px 100% no-repeat;
  mask-image: repeating-linear-gradient(
    to bottom, #000 0, #000 7px, transparent 7px, transparent 18px
  );
  -webkit-mask-image: repeating-linear-gradient(
    to bottom, #000 0, #000 7px, transparent 7px, transparent 18px
  );
}

.netapp-experience-container .nlp-stream {
  position: absolute;
  left: var(--sl, 0);
  top: var(--st, 0);
  width: 24px;
  height: 38px;
  overflow: hidden;
  z-index: 1;
}

.netapp-experience-container .nlp-stream--mid,
.netapp-experience-container .nlp-stream--tall {
  height: 56px;
}

.netapp-experience-container .nlp-stream::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 24px;
  height: 12px;
  border-radius: 50px;
  background: var(--c-upper, var(--nlp-magenta));
  filter: blur(2px);
  -webkit-clip-path: inset(0 10px);
  clip-path: inset(0 10px);
  animation: nlp-stream-fall 2s linear infinite;
}

.netapp-experience-container .nlp-stream--upper::before {
  background: var(--c-upper);
}

.netapp-experience-container .nlp-stream--lower::before {
  background: var(--c-lower);
}

.netapp-experience-container .nlp-stream--phase-2::before {
  animation-name: nlp-stream-fall-delayed;
}

.netapp-experience-container .nlp-stream::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  width: 4px;
  height: 32px;
  background-image: linear-gradient(
    to bottom,
    rgba(123, 39, 255, 0) 0%,
    rgba(123, 39, 255, 0.3) 50%,
    rgba(123, 39, 255, 0) 100%
  );
}

.netapp-experience-container .nlp-stream--mid::before {
  left: -11px;
  width: 44px;
  height: 22px;
  -webkit-clip-path: inset(0 18px 0 22px);
  clip-path: inset(0 18px 0 22px);
}

.netapp-experience-container .nlp-stream--tall::before {
  left: -21px;
  width: 66px;
  height: 33px;
  -webkit-clip-path: inset(0 30px 0 32px);
  clip-path: inset(0 30px 0 32px);
}

@keyframes nlp-stream-fall {
  0% { transform: translateY(0); }
  25%, 100% { transform: translateY(52px); }
}

@keyframes nlp-stream-fall-delayed {
  0%, 25% { transform: translateY(0); }
  50%, 100% { transform: translateY(52px); }
}


/* =================================================================
   13. PARTICLES
   ================================================================= */

.netapp-experience-container .nlp-stage .nlp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  display: block;
}

.netapp-experience-container .nlp-stage .nlp-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: nlp-particle-twinkle 3s ease-in-out infinite var(--pd, 0s);
  will-change: transform, opacity;
}

.netapp-experience-container .nlp-particle--violet {
  background: var(--nlp-violet);
}

.netapp-experience-container .nlp-particle--cyan {
  background: var(--nlp-cyan);
}

@keyframes nlp-particle-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}


/* =================================================================
   14. EXPAND BUTTONS (mobile base)
   ================================================================= */

.netapp-experience-container .nlp-expand-btn {
  display: none;
}

.netapp-experience-container .nlp-stage .nlp-expand-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--nlp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 180ms ease;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
  overflow: hidden;
}

.netapp-experience-container .nlp-stage .nlp-expand-btn--cp,
.netapp-experience-container .nlp-stage .nlp-expand-btn--ds,
.netapp-experience-container .nlp-stage .nlp-expand-btn--us,
.netapp-experience-container .nlp-stage .nlp-expand-btn--dr {
  left: calc(var(--nlp-env-left) + var(--nlp-env-w) - 7px);
}

.netapp-experience-container .nlp-stage .nlp-expand-btn--cp {
  top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.25);
}

.netapp-experience-container .nlp-stage .nlp-expand-btn--ds {
  top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.44);
}

.netapp-experience-container .nlp-stage .nlp-expand-btn--us {
  top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.63);
}

.netapp-experience-container .nlp-stage .nlp-expand-btn--dr {
  top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.82);
}

.netapp-experience-container .nlp-stage .nlp-expand-btn[data-active="true"] {
  pointer-events: auto;
}

.netapp-experience-container .nlp-expand-btn:hover {
  opacity: 0.85;
}

.netapp-experience-container .nlp-expand-btn:focus-visible {
  outline: 2px solid var(--nlp-cyan);
  outline-offset: 2px;
}


/* =================================================================
   15. PAGINATION (mobile base)
   ================================================================= */

.netapp-experience-container .nlp-pagination {
  position: absolute;
  top: 40px;
  right: 16px;
  bottom: auto;
  z-index: 40;
  height: auto;
}

.netapp-experience-container .nlp-pagination__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.netapp-experience-container .nlp-pagination__item {
  position: relative;
  width: 4px;
  height: 4px;
  min-height: 4px;
  max-height: 4px;
  background: var(--nlp-gray-800);
  overflow: hidden;
  transform: none;
  transform-origin: center;
  transition: height 240ms ease, min-height 240ms ease, max-height 240ms ease;
}

.netapp-experience-container .nlp-pagination__item.is-active {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  transform: none;
  background: var(--nlp-gray-800);
}

.netapp-experience-container .nlp-pagination__thumb {
  display: block;
  position: relative;
  width: 4px;
  height: 100%;
  overflow: hidden;
}

.netapp-experience-container .nlp-pagination__indicator {
  display: none;
  animation: none;
}

.netapp-experience-container .nlp-pagination__item::before {
  content: none;
}

.netapp-experience-container .nlp-pagination__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 60px;
  background: var(--nlp-gray-100);
  transform: scaleY(0);
  transform-origin: top center;
  animation: nlp-page-indicator-fill-down 3s linear infinite;
  z-index: 1;
}

@keyframes nlp-page-indicator-fill-down {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}


/* =================================================================
   16. DIALOGS (mobile base — full-screen)
   ================================================================= */

.netapp-experience-container dialog::backdrop,
.netapp-experience-container .nlp-dialog::backdrop {
  background: transparent;
}

.netapp-experience-container.nlp-dialog-open .nlp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 90;
  pointer-events: none;
}

.netapp-experience-container .nlp-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--nlp-black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--nlp-white);
  opacity: 1;
  transform: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nlp-white) transparent;
  transition: opacity 280ms ease, transform 280ms ease;
}

@supports (transition-behavior: allow-discrete) {
  @starting-style {
    .netapp-experience-container .nlp-dialog[open] {
      opacity: 0;
      transform: translateY(24px);
    }
  }
}


.netapp-experience-container .nlp-dialog[open] {
  display: block;
}

.netapp-experience-container .nlp-dialog__inner {
  position: relative;
  min-height: calc(var(--nlp-vh, 100vh) * 1);
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.netapp-experience-container .nlp-dialog__close {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: var(--nlp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 180ms ease;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  z-index: 10;
}

.netapp-experience-container .nlp-dialog__close:hover {
  opacity: 0.85;
}

.netapp-experience-container .nlp-dialog__close:focus-visible {
  outline: 2px solid var(--nlp-cyan);
  outline-offset: 2px;
}

.netapp-experience-container .nlp-dialog__header {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  gap: 8px;
}

.netapp-experience-container .nlp-dialog__eyebrow {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-dialog__title-bar {
  border-left: 3px solid var(--dialog-accent, var(--nlp-magenta));
  padding-left: 10px;
  display: flex;
  align-items: center;
  min-height: 20px;
}

.netapp-experience-container .nlp-dialog__bar {
  display: none;
}

.netapp-experience-container .nlp-dialog__title {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--nlp-white);
  text-transform: capitalize;
}

.netapp-experience-container .nlp-dialog__body {
  display: flex;
  flex-direction: column;
  position: relative;
}

.netapp-experience-container #dialog-cp .nlp-dialog__body,
.netapp-experience-container #dialog-ds .nlp-dialog__body,
.netapp-experience-container #dialog-us .nlp-dialog__body,
.netapp-experience-container #dialog-dr .nlp-dialog__body {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  gap: 12px !important;
}

.netapp-experience-container .nlp-dialog__body > .nlp-connector-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.netapp-experience-container .nlp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.netapp-experience-container .nlp-cards--3,
.netapp-experience-container .nlp-cards--2,
.netapp-experience-container .nlp-cards--1 {
  grid-template-columns: 1fr;
}

.netapp-experience-container .nlp-card {
  border: 1px solid var(--dialog-accent, var(--nlp-magenta));
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
  min-height: 0;
  background: transparent;
}

.netapp-experience-container #dialog-cp { --dialog-accent: var(--nlp-magenta); }
.netapp-experience-container #dialog-ds { --dialog-accent: var(--nlp-cyan); }
.netapp-experience-container #dialog-us { --dialog-accent: var(--nlp-lime); }
.netapp-experience-container #dialog-dr { --dialog-accent: var(--nlp-violet); }

.netapp-experience-container #dialog-cp { --connector-dot: var(--nlp-cyan); }
.netapp-experience-container #dialog-dr { --connector-dot: var(--nlp-white); }

.netapp-experience-container .nlp-card__title {
  font-family: var(--nlp-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-card__body {
  font-family: var(--nlp-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-connector-overlay {
  display: none;
}

.netapp-experience-container .nlp-connector-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.netapp-experience-container .nlp-connector-path {
  fill: none;
  stroke: var(--dialog-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.netapp-experience-container .nlp-connector-dot {
  fill: var(--connector-dot, var(--dialog-accent));
  filter: blur(2px);
}


/* =================================================================
   17. WORKLOADS BAR (mobile base — full-screen)
   ================================================================= */

.netapp-experience-container #nlp-workloads-bar:not(.is-open) {
  display: none !important;
}

.netapp-experience-container #nlp-workloads-bar.is-open {
  display: block;
}

.netapp-experience-container .nlp-workloads-bar {
  position: absolute;
  bottom: 0;
  left: var(--nlp-margin-l);
  right: var(--nlp-margin-r);
  width: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 32px 16px 24px;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
}

.netapp-experience-container .nlp-workloads-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  background: var(--nlp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 180ms ease;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  z-index: 2;
}

.netapp-experience-container .nlp-workloads-close:hover {
  opacity: 0.85;
}

.netapp-experience-container .nlp-workloads-close:focus-visible {
  outline: 2px solid var(--nlp-cyan);
  outline-offset: 2px;
}

.netapp-experience-container .nlp-workloads-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: none;
  gap: 28px;
}

.netapp-experience-container .nlp-workloads-bar__intro {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.netapp-experience-container .nlp-workload-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  align-self: stretch;
}

.netapp-experience-container .nlp-workload-card {
  border-top: 1px solid var(--nlp-violet);
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  font-size: 0;
}

.netapp-experience-container .nlp-workload-card__label {
  font-family: var(--nlp-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--nlp-white);
}

.netapp-experience-container .nlp-workload-card__label br {
  display: none;
}


/* =================================================================
   18. CMS-SAFE ICON SIZING
   ================================================================= */

.netapp-experience-container .nlp-expand-btn img,
.netapp-experience-container .nlp-dialog__close img,
.netapp-experience-container .nlp-workloads-close img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  display: block;
  object-fit: contain;
  flex: 0 0 20px;
  pointer-events: none;
}

.netapp-experience-container .nlp-workload-card__icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
  display: block;
  object-fit: contain;
  flex: 0 0 28px;
}


/* =================================================================
   19. FOCUS RING
   ================================================================= */

.netapp-experience-container :focus-visible {
  outline: 2px solid var(--nlp-cyan);
  outline-offset: 2px;
}


/* =================================================================
   20. SHORT PHONE OVERRIDES (≤ 600px + ≤ 700px height)
   ================================================================= */

@media (max-width: 600px) and (max-height: 700px) {
  .netapp-experience-container {
    --nlp-mobile-bottom-reserve: 140px;
    --nlp-cube-w: min(
      var(
        --nlp-mobile-start-cube-w,
        min(calc(var(--nlp-vw) * 0.58), calc(var(--nlp-vh) * 0.42))
      ),
      calc(
        (
          var(--nlp-vh) -
          var(--nlp-mobile-start-cube-top, 300px) -
          var(--nlp-mobile-bottom-reserve)
        ) / 1.152882
      )
    );
    --nlp-wf-left: calc(50% - var(--nlp-cube-w) / 2);
  }

  .netapp-experience-container .nlp-scene--start .nlp-scene__content {
    padding-top: 20px;
    padding-bottom: 28px;
  }

  .netapp-experience-container .nlp-scene--start .nlp-panel {
    margin-top: 16px;
  }

  .netapp-experience-container .nlp-scene--start .nlp-heading-4 {
    font-size: 23px;
    line-height: 1.08;
  }

  .netapp-experience-container .nlp-scene--start .nlp-body-medium {
    font-size: 16px;
    line-height: 1.4;
  }

  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-scene__content {
    padding-top: 20px;
    padding-bottom: 28px;
  }

  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-platform-nav,
  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-panel {
    margin-top: 16px;
  }

  /* Short phone layer cube — scoped within this query */
  .netapp-experience-container:has(.nlp-step[aria-hidden="false"][data-layer]) {
    --nlp-mobile-layer-text-zone: calc(var(--nlp-vh) * 0.40);
    --nlp-mobile-layer-cube-zone: calc(var(--nlp-vh) - var(--nlp-mobile-layer-text-zone) - 20px);
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.52),
      calc(var(--nlp-mobile-layer-cube-zone) / 1.153)
    );
    --nlp-wf-top: calc(
      var(--nlp-mobile-layer-text-zone) +
      (var(--nlp-mobile-layer-cube-zone) - var(--nlp-wf-h)) / 2
    );
    --nlp-wf-left: calc(50% - var(--nlp-cube-w) / 2);
  }
}


/* =================================================================
   21. TABLET OVERRIDES (≥ 768px)
   ================================================================= */

@media (min-width: 768px) {
  .netapp-experience-container {
    --nlp-margin-l: 48px;
    --nlp-margin-r: 48px;
    --nlp-content-w: min(380px, calc(var(--nlp-vw) * 0.48));
    --nlp-wf-left: 51.25%;
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.46681),
      calc(var(--nlp-vh) * 0.56667)
    );
    --nlp-wf-top: calc(calc(var(--nlp-vh) * 0.50105) - var(--nlp-wf-h) / 2);
  }

  .netapp-experience-container .nlp-scene__content {
    left: var(--nlp-margin-l);
    right: auto;
    width: var(--nlp-content-w);
    padding-top: 124px;
    padding-bottom: 66px;
  }

  .netapp-experience-container .nlp-cube {
    display: block;
  }

  /* Layer-focused :has() override — reset to tablet defaults */
  .netapp-experience-container:has(.nlp-step[aria-hidden="false"][data-layer]) {
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.46681),
      calc(var(--nlp-vh) * 0.56667)
    );
    --nlp-wf-top: calc(calc(var(--nlp-vh) * 0.50105) - var(--nlp-wf-h) / 2);
    --nlp-wf-left: 51.25%;
  }

  .netapp-experience-container .nlp-scene--start .nlp-scene__content {
    left: 40px;
    right: auto;
    width: 417px;
    height: auto;
    padding-top: 60px;
    padding-bottom: 66px;
  }

  .netapp-experience-container .nlp-scene--start .nlp-panel {
    position: absolute;
    top: 192px;
    left: auto;
    right: auto;
    width: 370px;
    margin-top: 0;
  }

  .netapp-experience-container .nlp-scene--start .nlp-cube__wireframe {
    left: 327px;
    top: 391px;
    width: 400px;
    height: 461.88px;
  }

  .netapp-experience-container .nlp-scene--start .nlp-cube__lip {
    left: 327px;
    top: 391px;
    width: 400px;
    height: 230.94px;
  }

  .netapp-experience-container .nlp-scene--layer .nlp-scene__content {
    padding-top: 100px;
  }

  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-scene__content {
    padding-top: 124px;
    padding-bottom: 66px;
  }

  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-platform-nav,
  .netapp-experience-container .nlp-step:not(.nlp-scene--start) .nlp-panel {
    margin-top: 28px;
  }

  .netapp-experience-container .nlp-heading-4 {
    font-size: clamp(20px, calc(var(--nlp-vw) * 0.04), 26px);
    letter-spacing: 1.5px;
  }

  .netapp-experience-container .nlp-start-heading__wide {
    display: block;
    white-space: nowrap;
  }

  .netapp-experience-container .nlp-start-heading__mobile {
    display: none;
  }

  .netapp-experience-container .nlp-body-medium {
    font-size: 16px;
  }

  .netapp-experience-container .nlp-nav-item {
    font-size: 16px;
  }

  .netapp-experience-container .nlp-text-link {
    font-size: 16px;
  }

  /* Expand buttons — tablet: on the LEFT vertex of each slab */
  .netapp-experience-container .nlp-stage .nlp-expand-btn {
    left: calc(var(--nlp-env-left) - 20px);
  }

  .netapp-experience-container .nlp-stage .nlp-expand-btn--cp {
    top: calc(var(--nlp-env-cp-top) + var(--nlp-cube-w) * 0.270538 - 20px);
  }

  .netapp-experience-container .nlp-stage .nlp-expand-btn--ds {
    top: calc(var(--nlp-env-ds-top) + var(--nlp-cube-w) * 0.270538 - 20px);
  }

  .netapp-experience-container .nlp-stage .nlp-expand-btn--us {
    top: calc(var(--nlp-env-us-top) + var(--nlp-cube-w) * 0.270538 - 20px);
  }

  .netapp-experience-container .nlp-stage .nlp-expand-btn--dr {
    left: calc(var(--nlp-wf-left) - 20px);
    top: calc(var(--nlp-wf-top) + var(--nlp-cube-w) * 0.289015 - 20px);
  }

  .netapp-experience-container .nlp-pagination {
    top: 100px;
    right: var(--nlp-margin-r);
    bottom: auto;
  }

  .netapp-experience-container .nlp-dialog {
    width: calc(var(--nlp-vw) - 80px);
    max-width: calc(var(--nlp-vw) - 80px);
    max-height: calc(var(--nlp-vh) - 80px);
    background: rgba(23, 23, 23, 0.7);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .netapp-experience-container .nlp-dialog[open] {
    display: flex;
  }

  .netapp-experience-container .nlp-dialog__inner {
    min-height: 0;
    padding: 32px;
    gap: 32px;
  }

  .netapp-experience-container .nlp-dialog__close {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
  }

  .netapp-experience-container .nlp-dialog__header {
    gap: 12px;
  }

  .netapp-experience-container .nlp-dialog__eyebrow {
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .netapp-experience-container .nlp-dialog__title-bar {
    padding-left: 12px;
    min-height: auto;
  }

  .netapp-experience-container .nlp-dialog__title {
    font-size: 18px;
  }

  .netapp-experience-container #dialog-cp .nlp-dialog__body,
  .netapp-experience-container #dialog-ds .nlp-dialog__body,
  .netapp-experience-container #dialog-us .nlp-dialog__body,
  .netapp-experience-container #dialog-dr .nlp-dialog__body {
    display: flex !important;
    flex-direction: column !important;
    align-self: auto !important;
    width: auto !important;
    max-width: none !important;
    gap: 20px !important;
  }

  .netapp-experience-container .nlp-cards {
    gap: 16px;
  }

  .netapp-experience-container .nlp-cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .netapp-experience-container .nlp-cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .netapp-experience-container .nlp-card {
    padding: 16px;
    background: none;
  }

  .netapp-experience-container .nlp-card__title {
    font-family: var(--nlp-font-heading);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 100%;
  }

  .netapp-experience-container .nlp-card__body {
    font-size: 16px;
  }

  .netapp-experience-container .nlp-connector-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .netapp-experience-container .nlp-workloads-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: auto;
    min-height: auto;
    max-height: none;
    padding: 48px 24px 32px;
    overflow: visible;
  }

  .netapp-experience-container .nlp-workloads-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  .netapp-experience-container .nlp-workloads-bar__inner {
    flex-direction: column;
    gap: 34px;
    max-width: 1144px;
  }

  .netapp-experience-container .nlp-workloads-bar__intro {
    flex-basis: auto;
    flex-direction: column;
  }

  .netapp-experience-container .nlp-workload-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-self: center;
  }

  .netapp-experience-container .nlp-workload-card {
    padding: 12px;
  }

  .netapp-experience-container .nlp-workload-card__label br {
    display: inline;
  }
}


/* =================================================================
   21b. NARROW TABLET OVERRIDES (768px – 1024px)
   Prevents cube/text overlap on narrower tablets by shifting
   the cube further right and capping its size.
   ================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .netapp-experience-container {
    --nlp-wf-left: 54%;
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.40),
      calc(var(--nlp-vh) * 0.52)
    );
  }

  .netapp-experience-container:has(.nlp-step[aria-hidden="false"][data-layer]) {
    --nlp-wf-left: 54%;
    --nlp-cube-w: min(
      calc(var(--nlp-vw) * 0.40),
      calc(var(--nlp-vh) * 0.52)
    );
    --nlp-wf-top: calc(calc(var(--nlp-vh) * 0.50105) - var(--nlp-wf-h) / 2);
  }
}


/* =================================================================
   22. DESKTOP OVERRIDES (≥ 1400px)
   ================================================================= */

@media (min-width: 1400px) {
  .netapp-experience-container {
    --nlp-layout-w: min(calc(var(--nlp-vw) * 1), 1600px);
    --nlp-layout-h: min(calc(var(--nlp-vh) * 1), 900px);
    --nlp-layout-x: max(0px, calc((var(--nlp-vw) - var(--nlp-layout-w)) * 0.5));
    --nlp-layout-y: max(0px, calc((var(--nlp-vh) - var(--nlp-layout-h)) * 0.5));
    --nlp-margin-l: calc(var(--nlp-layout-x) + 188px);
    --nlp-margin-r: calc(var(--nlp-layout-x) + 188px);
    --nlp-content-w: 417px;
    --nlp-cube-w: min(
      calc(var(--nlp-layout-w) * 0.31875),
      calc(var(--nlp-layout-h) * 0.56667)
    );
    --nlp-wf-left: calc(var(--nlp-layout-x) + var(--nlp-layout-w) * 0.5125);
    --nlp-wf-top: calc(
      var(--nlp-layout-y) +
      var(--nlp-layout-h) * 0.50105 -
      var(--nlp-wf-h) / 2
    );
  }

  /* Layer-focused :has() override — reset to desktop defaults */
  .netapp-experience-container:has(.nlp-step[aria-hidden="false"][data-layer]) {
    --nlp-cube-w: min(
      calc(var(--nlp-layout-w) * 0.31875),
      calc(var(--nlp-layout-h) * 0.56667)
    );
    --nlp-wf-left: calc(var(--nlp-layout-x) + var(--nlp-layout-w) * 0.5125);
    --nlp-wf-top: calc(
      var(--nlp-layout-y) +
      var(--nlp-layout-h) * 0.50105 -
      var(--nlp-wf-h) / 2
    );
  }

  .netapp-experience-container .nlp-scene__content {
    padding-top: calc(var(--nlp-layout-y) + 124px);
    padding-bottom: calc(var(--nlp-layout-y) + 66px);
  }

  .netapp-experience-container .nlp-scene--start .nlp-scene__content {
    padding-top: calc(var(--nlp-layout-y) + 100px);
  }

  .netapp-experience-container .nlp-scene--start .nlp-panel {
    top: calc(var(--nlp-layout-y) + 240px);
  }

  .netapp-experience-container .nlp-heading-4 {
    font-size: clamp(22px, calc(var(--nlp-vw) * 0.01875), 30px);
  }

  .netapp-experience-container .nlp-body-medium {
    font-size: 18px;
  }

  .netapp-experience-container .nlp-nav-item {
    font-size: 18px;
  }

  .netapp-experience-container .nlp-text-link {
    font-size: 18px;
  }

  .netapp-experience-container .nlp-pagination {
    top: auto;
    right: var(--nlp-margin-r);
    bottom: calc(var(--nlp-layout-y) + 66px);
  }

  .netapp-experience-container .nlp-dialog {
    width: min(1224px, calc(var(--nlp-vw) - 80px));
    max-width: min(1224px, calc(var(--nlp-vw) - 80px));
    max-height: calc(var(--nlp-vh) * 0.9);
  }

  .netapp-experience-container .nlp-dialog__inner {
    min-height: 0;
    padding: 40px;
    gap: 40px;
  }

  .netapp-experience-container .nlp-workloads-bar {
    left: var(--nlp-margin-l);
    right: var(--nlp-margin-r);
    bottom: calc(var(--nlp-layout-y) + 66px);
    min-height: 321px;
    padding: 60px 40px 40px;
  }

  .netapp-experience-container .nlp-workloads-bar__inner {
    flex-direction: row;
  }

  .netapp-experience-container .nlp-workloads-bar__intro {
    flex: 0 0 424px;
  }

  .netapp-experience-container .nlp-workload-grid {
    grid-template-columns: repeat(3, 1fr);
    flex: 1;
  }
}