/* ============================================================
   hpe-core.css — HPE microsites shared core design system
   IDENTICAL FILE on all four HPE sites (ServerComputeWorks,
   EdgeCloudStore, SecureWirelessWorks, NetworkScreen). Single
   source of truth: edit one, copy to the other three. Loaded
   globally from includes/head.inc AFTER each site's own
   styles.css and after CDN Bootstrap 5.0.2, so these rules win
   on equal specificity and unify the portfolio.

   STRUCTURE
     1. Design tokens (:root)        — HPE palette + Bootstrap var overrides
     2. Bootstrap component overrides — .btn-primary / accents -> HPE green
     3. Typography & vertical rhythm  — H1-H6 scale + spacing utilities
     4. Card modifiers                — .card-hpe-shadow / -gradient / -bordered
     5. Standardization               — body font, links, card shell
     6. Chrome                        — topmenu, hero, footer, financing banner
   (Sections 5-6 are the original redesign.css; 1-4 are the core layer.
   The Zebra topmenu is a faithful port of the PrintSystemsWorks navbar,
   recolored to HPE green. The HPE black bar (hpe-site.inc) stays untouched.)
   ============================================================ */

:root {
  /* ---- HPE brand palette ---- */
  --hpe-green:        #01A982;   /* signature HPE green (primary) — buttons / large UI */
  --hpe-green-dark:   #017a5e;   /* inline text links / hover / active — WCAG AA (~5.3:1 on white) */
  --hpe-green-darker: #015f49;   /* link hover / focus feedback */
  --hpe-green-light:  #4fd1ab;
  --hpe-green-accent: #5fe3bf;   /* on-dark accent */
  --hpe-ink:          #15201c;   /* headings / body ink */
  --hpe-slate:        #586b65;   /* muted text */
  --hpe-line:         #e0e5e3;   /* hairline borders */
  --hpe-bg:           #f4f6f5;   /* light section bg */
  --hpe-dark:         #0d1714;   /* dark band bg */

  /* ---- Bootstrap 5 variable overrides ----
     These retheme everything Bootstrap drives off CSS variables (link
     color, .bg-primary/.text-primary via -rgb, etc.). Buttons in 5.0.2
     are NOT var-themed, so they are recolored explicitly in section 2. */
  --bs-primary:           #01A982;
  --bs-primary-rgb:       1, 169, 130;
  --bs-link-color:        #017a5e;   /* AA-compliant for normal body text (~5.3:1) */
  --bs-link-color-rgb:    1, 122, 94;
  --bs-link-hover-color:  #015f49;

  /* ---- Back-compat aliases ----
     Legacy --scw-* tokens (used by the chrome in sections 5-6 and by
     inline styles on existing pages) now resolve to the HPE tokens, so
     nothing that references --scw-* needs to change. */
  --scw-green:      var(--hpe-green);
  --scw-green-dark: var(--hpe-green-dark);
  --scw-green-lt:   var(--hpe-green-light);
  --scw-ink:        var(--hpe-ink);
  --scw-slate:      var(--hpe-slate);
  --scw-line:       var(--hpe-line);
  --scw-bg:         var(--hpe-bg);
  --scw-dark:       var(--hpe-dark);
}

/* ============================================================
   2. BOOTSTRAP COMPONENT OVERRIDES — HPE green primary + accents
   Bootstrap 5.0.2 compiles button colors, so recolor them by rule.
   The --bs-btn-* custom props are harmless here and make this rule
   forward-compatible if the CDN is ever bumped to 5.2+.
   ============================================================ */
.btn-primary {
  --bs-btn-bg: var(--hpe-green);
  --bs-btn-border-color: var(--hpe-green);
  --bs-btn-hover-bg: var(--hpe-green-dark);
  --bs-btn-hover-border-color: var(--hpe-green-dark);
  --bs-btn-active-bg: var(--hpe-green-dark);
  --bs-btn-active-border-color: var(--hpe-green-dark);
  --bs-btn-disabled-bg: var(--hpe-green);
  --bs-btn-disabled-border-color: var(--hpe-green);
  background-color: var(--hpe-green);
  border-color: var(--hpe-green);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active {
  background-color: var(--hpe-green-dark);
  border-color: var(--hpe-green-dark);
  color: #fff;
}
.btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(1, 169, 130, .4); }
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--hpe-green);
  border-color: var(--hpe-green);
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--hpe-green);
  --bs-btn-border-color: var(--hpe-green);
  --bs-btn-hover-bg: var(--hpe-green);
  --bs-btn-hover-border-color: var(--hpe-green);
  --bs-btn-active-bg: var(--hpe-green);
  color: var(--hpe-green);
  border-color: var(--hpe-green);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--hpe-green);
  border-color: var(--hpe-green);
  color: #fff;
}
/* shared accents driven by Bootstrap helpers */
.text-primary { color: var(--hpe-green) !important; }
.bg-primary   { background-color: var(--hpe-green) !important; }
.border-primary { border-color: var(--hpe-green) !important; }
.link-primary { color: var(--hpe-green-dark) !important; }
.link-primary:hover, .link-primary:focus { color: var(--hpe-green-darker) !important; }

/* ============================================================
   3. TYPOGRAPHY & VERTICAL RHYTHM — standard H1-H6 hierarchy.
   Sizes/weight/line-height/margins are normalized portfolio-wide so
   headings match across the four sites. Heading COLOR is intentionally
   left to existing rules (hero h1 stays white; section themes keep their
   accent), so this is a structural standardization, not a recolor.
   ============================================================ */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: .95rem; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: .6rem;
}
@media (max-width: 767px) {
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.6rem; }
  h3, .h3 { font-size: 1.3rem; }
}

/* Custom spacing utilities — extend the Bootstrap 0-5 scale with a
   level 6 so hero / section padding can be expressed as utilities
   (py-6 / py-md-6) instead of bespoke per-site CSS. !important matches
   Bootstrap's own utility behavior. */
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.pt-6 { padding-top: 4.5rem !important; }
.pb-6 { padding-bottom: 4.5rem !important; }
.my-6 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
@media (min-width: 768px) {
  .py-md-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  .pt-md-6 { padding-top: 4.5rem !important; }
  .pb-md-6 { padding-bottom: 4.5rem !important; }
}

/* ============================================================
   4. CARD MODIFIERS — three portfolio-standard card styles.
   Add to a Bootstrap .card (e.g. <div class="card card-hpe-shadow">).
   Defined after the generic .card shell (section 5) wins by source order
   for shared properties; gradient/bordered set their own border so they
   beat the shell's 1px line.
   ============================================================ */
.card-hpe-shadow {
  background: #fff;
  border: 1px solid var(--hpe-line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card-hpe-shadow:hover {
  box-shadow: 0 16px 38px rgba(1, 169, 130, .14);
  transform: translateY(-3px);
  border-color: #bfe9dd;
}
.card-hpe-gradient {
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--hpe-green) 0%, var(--hpe-green-dark) 100%);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-hpe-gradient:hover {
  box-shadow: 0 16px 38px rgba(1, 122, 94, .35);
  transform: translateY(-3px);
}
.card-hpe-gradient .card-title,
.card-hpe-gradient .card-body,
.card-hpe-gradient h1, .card-hpe-gradient h2, .card-hpe-gradient h3,
.card-hpe-gradient h4, .card-hpe-gradient h5, .card-hpe-gradient p {
  color: #fff;
}
.card-hpe-bordered {
  background: #fff;
  border: 1px solid var(--hpe-line);
  border-top: 4px solid var(--hpe-green);
  border-radius: 12px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card-hpe-bordered:hover {
  box-shadow: 0 12px 30px rgba(1, 169, 130, .12);
  transform: translateY(-3px);
}

/* Contain the full-bleed navbar breakout (width:100vw) so it never adds a
   horizontal scrollbar when a vertical scrollbar is present. No sticky
   elements depend on the scroll container, so this is side-effect free. */
html, body { overflow-x: hidden; }

/* ---- content width wrapper (Zebra container-1350) ---- */
.container-1350 {
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  position: relative;
}

/* ---- full-bleed band ----
   Lets a coloured/background section break out of a .container-1350 wrapper and
   span the full viewport width, while its content stays centred. Put .scw-fullbleed
   on the band (the element that carries the background) and wrap that band's content
   in a .container-1350. !important beats per-page inline band margins. */
.scw-fullbleed {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   TOPMENU — Zebra sdw-navbar-dark (ported, HPE-green accents)
   Full-bleed even when the page wraps it inside a .container.
   ============================================================ */
.sdw-skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 0 0 8px 0; }
.sdw-skip-link:focus, .sdw-skip-link:focus-visible { left: 0; }

.sdw-navbar-dark {
  background-color: #1D1F27 !important;
  padding: .75rem 0;
  /* full-bleed breakout so the bar spans the viewport even inside .container */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

.brand-mark { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; color: #fff !important; text-decoration: none; padding: .15rem 0; }
.brand-mark:hover { color: #fff !important; }
.brand-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.brand-tld { font-weight: 500; opacity: .7; }
.brand-tagline { display: block; margin-top: .2rem; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }

.sdw-navbar-dark .navbar-collapse { flex-direction: column; align-items: flex-end; }
.sdw-navbar-dark .navbar-nav { margin-left: auto; }
.sdw-navbar-dark .nav-link { color: rgba(255,255,255,.9) !important; font-size: .9rem; padding: .35rem .75rem; }
.sdw-navbar-dark .nav-link:hover, .sdw-navbar-dark .nav-link:focus { color: var(--scw-green-lt) !important; }

.sdw-phone-header { color: rgba(255,255,255,.85); font-size: .875rem; }
.sdw-phone-header .sdw-tel { color: var(--scw-green-lt); text-decoration: none; font-weight: 600; }
.sdw-phone-header .sdw-tel:hover { color: var(--scw-green); }

/* dropdowns (white panels on the black bar) */
.sdw-navbar-dark .dropdown-menu { background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; padding: .5rem 0; margin-top: .5rem; min-width: 240px; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.sdw-navbar-dark .dropdown-menu .dropdown-item { color: #000 !important; padding: .45rem 1rem; font-size: .9rem; transition: .15s ease; white-space: normal; }
.sdw-navbar-dark .dropdown-menu .dropdown-item:hover, .sdw-navbar-dark .dropdown-menu .dropdown-item:focus { background: rgba(1,169,130,.10); color: var(--scw-green-dark) !important; }
.sdw-navbar-dark .dropdown-menu .dropdown-divider { border-color: #e9ecef; margin: .4rem 0; }

/* Products mega-menu */
.mega-menu { border-radius: 0 0 12px 12px; }
.mega-menu .text-primary { color: var(--scw-green) !important; }
.mega-featured { background: #f1f5f4; }
.mega-list a { transition: color .15s ease; }
.mega-list a:hover strong, .mega-list a:hover { color: var(--scw-green) !important; }

@media (max-width: 991px) {
  .sdw-navbar-dark .navbar-collapse { align-items: stretch; }
  .sdw-navbar-dark .sdw-phone-header { text-align: center; padding: .5rem 0; }
  .sdw-navbar-dark .navbar-nav { margin-left: 0; }
  .mega-menu .row { --bs-gutter-y: 1rem; }
}

/* footer: always full-bleed band, content at 1350.
   Some pages include footer.inc INSIDE the .container-1350 page wrapper, which
   would cap the band at 1350. This breaks it out to the full viewport. It is a
   no-op when the footer is already a full-width body child (50% - 50vw = 0). */
#footer-widgets { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
#footer-widgets > .container { max-width: 1350px; }
#footer-widgets .top-search .input-group { border-radius: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); }
#footer-widgets .top-search .form-control { border: none; box-shadow: none; }

/* ============================================================
   DL394 PAGE LAYOUT (used by rebuilt product pages)
   ============================================================ */
.scw-section { padding: 64px 0; }
.scw-section--tight { padding: 44px 0; }
.scw-bg-light { background: var(--scw-bg); }
.scw-bg-white { background: #fff; }
.scw-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--scw-green); margin-bottom: .6rem; }
.scw-section h2 { font-size: 2rem; font-weight: 800; color: var(--scw-ink); margin-bottom: .6rem; letter-spacing: -.01em; }
.scw-lead { font-size: 1.08rem; color: var(--scw-slate); max-width: 64ch; }

/* breadcrumb bar */
.scw-breadcrumb-bar { background: #f0f2f1; border-bottom: 1px solid var(--scw-line); }
.scw-breadcrumb-bar .breadcrumb { margin: 0; padding: .6rem 0; font-size: .85rem; }
.scw-breadcrumb-bar .breadcrumb a { color: var(--scw-slate); text-decoration: none; }
.scw-breadcrumb-bar .breadcrumb a:hover { color: var(--scw-green); }
.scw-breadcrumb-bar .breadcrumb-item.active { color: var(--scw-ink); }

/* hero */
.scw-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(115deg, #0d1714 0%, #13211c 45%, #0a3b2d 100%); }
.scw-hero::after { content: ""; position: absolute; inset: 0; background: url("https://cdn.blueally.com/hpe-shared/images/background/hpes-simplified-brand-bg.jpg") center/cover; opacity: .12; mix-blend-mode: luminosity; pointer-events: none; }
.scw-hero .container-1350 { position: relative; z-index: 1; padding-top: 62px; padding-bottom: 62px; }
.scw-hero h1 { font-size: 2.65rem; font-weight: 800; line-height: 1.08; margin: .5rem 0 1rem; letter-spacing: -.02em; color: #fff; }
.scw-hero p { font-size: 1.12rem; color: rgba(255,255,255,.86); max-width: 54ch; }
.scw-hero .scw-eyebrow { color: #5fe3bf; }
.scw-hero-img { width: 100%; max-width: 660px; filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)); }
.scw-badge { display: inline-block; background: var(--scw-green); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 13px; border-radius: 30px; }

/* buttons */
.scw-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; padding: .72rem 1.3rem; border-radius: 6px; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; transition: .15s; }
.scw-btn-ghost:hover { background: #fff; color: var(--scw-ink); border-color: #fff; }

/* jump sub-nav */
.scw-subnav { background: #fff; border-bottom: 1px solid var(--scw-line); }
.scw-subnav ul { display: flex; flex-wrap: wrap; gap: 1.6rem; list-style: none; margin: 0; padding: .9rem 0; }
.scw-subnav a { color: var(--scw-slate); text-decoration: none; font-weight: 600; font-size: .92rem; }
.scw-subnav a:hover { color: var(--scw-green); }

/* value strip */
.scw-valuestrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border: 1px solid var(--scw-line); border-radius: 14px; overflow: hidden; background: #fff; }
.scw-valuestrip > div { padding: 26px 24px; border-right: 1px solid var(--scw-line); }
.scw-valuestrip > div:last-child { border-right: none; }
.scw-valuestrip .n { font-size: 1.7rem; font-weight: 800; color: var(--scw-green); line-height: 1.1; }
.scw-valuestrip .l { font-size: .92rem; color: var(--scw-slate); margin-top: .35rem; }

/* card grid */
.scw-grid { display: grid; gap: 18px; }
.scw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.scw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.scw-card { background: #fff; border: 1px solid var(--scw-line); border-radius: 14px; padding: 26px; transition: .18s; height: 100%; }
.scw-card:hover { box-shadow: 0 14px 34px rgba(1,169,130,.10); transform: translateY(-3px); border-color: #bfe9dd; }
.scw-card .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(1,169,130,.10); color: var(--scw-green); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 14px; }
.scw-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--scw-ink); margin-bottom: .4rem; }
.scw-card p { font-size: .95rem; color: var(--scw-slate); margin: 0; }

/* dark architecture band */
.scw-dark { background: var(--scw-dark); color: #fff; }
.scw-dark h2 { color: #fff; }
.scw-dark .scw-eyebrow { color: #5fe3bf; }
.scw-dark .scw-lead { color: rgba(255,255,255,.78); }
.scw-feature-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.scw-feature-list li { padding: 15px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: .8rem; }
.scw-feature-list li i { color: var(--scw-green); margin-top: 4px; }
.scw-feature-list b { color: #fff; display: block; margin-bottom: 2px; }
.scw-feature-list span { color: rgba(255,255,255,.72); font-size: .95rem; }
.scw-cpu-img { width: 100%; max-width: 430px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }

/* mid-page CTA band */
.scw-ctaband { background: linear-gradient(120deg, #01A982, #017a5e); color: #fff; border-radius: 18px; padding: 50px 44px; }
.scw-ctaband h2 { color: #fff; }
.scw-ctaband .scw-eyebrow { color: rgba(255,255,255,.85); }
.scw-ctaband .scw-lead { color: rgba(255,255,255,.92); max-width: 70ch; }
.scw-ctaband ul { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; }
.scw-ctaband li { padding: 5px 0; display: flex; gap: .6rem; align-items: flex-start; }
.scw-ctaband li i { margin-top: 4px; }
.scw-ctaband .btn-light { font-weight: 700; color: var(--scw-green-dark); }

/* use-case card */
.scw-uc { background: #fff; border: 1px solid var(--scw-line); border-radius: 14px; padding: 24px; height: 100%; }
.scw-uc i { color: var(--scw-green); font-size: 1.4rem; }
.scw-uc h3 { font-size: 1.05rem; font-weight: 700; margin: .7rem 0 .35rem; color: var(--scw-ink); }
.scw-uc p { font-size: .92rem; color: var(--scw-slate); margin: 0; }

/* accordion polish */
.scw-acc .accordion-button:not(.collapsed) { background: rgba(1,169,130,.07); color: var(--scw-ink); box-shadow: none; }
.scw-acc .accordion-button:focus { box-shadow: none; border-color: var(--scw-line); }
/* keyboard-visible focus ring (mouse clicks stay ring-free via :focus above) */
.scw-acc .accordion-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1,122,94,.45); }

/* downloads */
.scw-dl { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--scw-line); border-radius: 12px; padding: 16px 20px; text-decoration: none; transition: .15s; height: 100%; }
.scw-dl:hover { border-color: var(--scw-green); box-shadow: 0 10px 26px rgba(1,169,130,.10); }
.scw-dl i { color: var(--scw-green); font-size: 1.6rem; }
.scw-dl .t { font-weight: 700; color: var(--scw-ink); font-size: .98rem; }
.scw-dl .s { color: var(--scw-slate); font-size: .82rem; }

/* ---- responsive ---- */
@media (max-width: 991px) {
  .scw-hero h1 { font-size: 2rem; }
  .scw-section { padding: 46px 0; }
  .scw-ctaband { padding: 36px 26px; }
}

/* ===== Shared family chrome: topmenu search bar + homepage hero (IDENTICAL on all 4 HPE sites) ===== */
/* Search bar pinned to one fixed size everywhere (overrides each site's styles.css) */
.sdw-navbar-dark .top-search { display: flex; justify-content: flex-end; }
.sdw-navbar-dark .top-search .input-group { width: 320px !important; max-width: 320px !important; flex: 0 0 320px !important; flex-wrap: nowrap !important; }
.sdw-navbar-dark .top-search .form-control { height: 48px !important; font-size: .95rem !important; }
.sdw-navbar-dark .top-search .btn { height: 48px !important; flex: 0 0 52px !important; min-width: 52px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* Zebra-style homepage hero: image background (dimmed) + dark text backdrop */
.hero-section-image {
  position: relative;
  left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  background-color: #000;
  background-image: var(--hero-img);
  background-size: cover; background-position: center; color: #fff;
}
.hero-section-image.hero-dim { background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--hero-img); }
.hero-section-image .hero-inner { max-width: 1350px; margin: 0 auto; padding: 72px 24px; position: relative; }
.hero-section-image .hero-text-backdrop { display: inline-block; background: rgba(0,0,0,.8); padding: 1.9rem 2.1rem; border-radius: 6px; max-width: 760px; }
.hero-section-image .hero-text-backdrop > :last-child { margin-bottom: 0; }
.hero-section-image .hero-eyebrow { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.04em; color:#fff; margin-bottom:.7rem; }
.hero-section-image h1 { color:#fff; font-weight:800; }
.hero-section-image .hero-intro { font-size:1.125rem; line-height:1.55; color:rgba(255,255,255,.92); }
.hero-section-image .hero-product-img { position:absolute; right:3%; top:50%; transform:translateY(-50%); max-height:280px; object-fit:contain; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
@media (max-width: 991px){ .hero-section-image .hero-product-img { display:none; } }
.btn-hero-primary, .btn-primary-hero { background:#01A982; border:1px solid #01A982; color:#fff !important; font-weight:600; padding:.72rem 1.3rem; border-radius:6px; display:inline-flex; align-items:center; text-decoration:none; transition:.15s; }
.btn-hero-primary:hover, .btn-primary-hero:hover { background:#017a5e; border-color:#017a5e; }
.btn-hero-ghost { background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff !important; font-weight:600; padding:.72rem 1.3rem; border-radius:6px; display:inline-flex; align-items:center; text-decoration:none; transition:.15s; }
.btn-hero-ghost:hover { background:#fff; color:#1a1a1a !important; border-color:#fff; }

/* ===== Zebra-style footer (shared, identical on all 4 HPE sites) ===== */
#footer-widgets { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background:#0f1216 !important; color:#cdd2da !important; }
#footer-widgets .zb-trust-band { background:#0f1216; border-bottom:1px solid rgba(255,255,255,.07); padding:22px 0; }
#footer-widgets .zb-trust-item { display:flex; align-items:center; gap:.75rem; }
#footer-widgets .zb-trust-icon { color:#01A982; font-size:1.4rem; flex:0 0 auto; }
#footer-widgets .zb-trust-item strong { display:block; color:#fff; font-size:.92rem; }
#footer-widgets .zb-trust-item span { display:block; color:#9aa3b0; font-size:.78rem; }
#footer-widgets .footer-header { background:#1a1e26; padding:44px 0; text-align:center; border-bottom:1px solid rgba(255,255,255,.07); }
#footer-widgets .footer-eyebrow { display:inline-block; color:#01A982; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; }
#footer-widgets .footer-cta-title { color:#fff !important; font-weight:800; margin-bottom:.5rem; }
#footer-widgets .footer-cta-lead { color:#9aa3b0; max-width:640px; margin:0 auto 1.4rem; }
#footer-widgets .footer-body { padding:44px 0; background:#0f1216 !important; }
#footer-widgets .footer-body .container-1350 { gap:28px; }
#footer-widgets .footer-col { flex:1 1 160px; min-width:150px; }
#footer-widgets .footer-col-contact, #footer-widgets .footer-col-social { flex:1 1 240px; }
#footer-widgets .footer-widget-title { color:#fff !important; font-size:.95rem; font-weight:700; margin-bottom:1rem; }
#footer-widgets .footer-col a { color:#cdd2da !important; text-decoration:none; }
#footer-widgets .footer-col a:hover { color:#01A982 !important; }
#footer-widgets .footer-col ul li { margin-bottom:.5rem; }
#footer-widgets .footer-contact-item { display:flex; gap:.6rem; margin-bottom:.9rem; align-items:flex-start; color:#cdd2da; }
#footer-widgets .footer-contact-item a { color:#cdd2da !important; text-decoration:none; }
#footer-widgets .footer-contact-item a:hover { color:#01A982 !important; }
#footer-widgets .footer-icon { color:#01A982; margin-top:3px; flex:0 0 auto; }
#footer-widgets .footer-search { margin-bottom:1rem; max-width:300px; }
#footer-widgets .footer-social-label { display:block; color:#9aa3b0; font-size:.8rem; margin-bottom:.5rem; }
#footer-widgets .footer-social a { color:#cdd2da !important; font-size:1.5rem; margin-right:.7rem; }
#footer-widgets .footer-social a:hover { color:#01A982 !important; }
#footer { background:#0f1216 !important; color:#8c95a3 !important; text-align:center; padding:22px 15px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
#footer a { color:#cdd2da !important; }
.btn-hero-ghost-dark { background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#fff !important; font-weight:600; padding:.6rem 1.1rem; border-radius:6px; display:inline-flex; align-items:center; text-decoration:none; transition:.15s; }
.btn-hero-ghost-dark:hover { background:#fff; color:#15181f !important; border-color:#fff; }
@media (max-width: 767px){ #footer-widgets .footer-body .container-1350 { flex-direction:column; } #footer-widgets .zb-trust-band .text-md-end { text-align:left; } }

/* ============================================================
   SHARED STANDARDIZATION — identical on all four HPE microsites.
   These rules load after each site's styles.css and unify the
   three things that drifted between sites: body typography, text
   links, and the card shell.
   ============================================================ */

/* ---- 1. One font family across all four sites ----
   head.inc loads Open Sans on every site; pin the body stack to it so
   all text — and therefore every text link — shares one family and one
   inherited size, instead of SCW/ECS/NS using Open Sans while SWW fell
   back to HPE Graphik/Helvetica. */
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- 2. Unified text links ----
   Every text link: same color, no underline, family/size inherited from
   the unified body above. This mirrors each site's existing
   a:link,a:visited,a:active selector, so it carries identical specificity
   and simply wins by load order — replacing per-site link colors
   (#069f7e / #0e4f75 / #2E6A00) with one HPE green. Chrome links
   (navbar, footer, breadcrumb, dropdown, .btn buttons) keep their own
   look via the higher-specificity / !important rules defined above. */
a:link, a:visited, a:active {
  color: var(--scw-green);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--scw-green-dark);
  text-decoration: none;
}

/* ---- 3. Unified card shell ----
   One frame (white, 1px line border, 14px radius) and one hover lift for
   the whole card family used across the four sites, on every page.
   Functional internals are intentionally left to each site's styles.css:
   product-card arrows (.card-prod::after), featured-card padding, image
   layout, and inner typography are untouched, so dynamic-pricing product
   grids keep working. Bootstrap utilities (.border-0, .bg-*, .shadow-*)
   still override these because they carry !important. */
.card,
.scw-card, .scw-uc,
.card-prod, .card-prod-no-arrow, .card-featprod,
.server-card, .hc-card, .hpe-card,
.industry-card, .feat-card, .prod-card, .hn-card {
  background: #fff;
  border: 1px solid var(--scw-line);
  border-radius: 14px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Hover lift is reserved for INTERACTIVE cards only — a card that is a link,
   is wrapped in a link, or contains a link/button. Purely informational cards
   (e.g. "at a glance" or note boxes) stay flat instead of reading as clickable.
   Split into two rules so browsers without :has() still lift link/wrapped cards. */
:is(.card, .scw-card, .scw-uc,
    .card-prod, .card-prod-no-arrow, .card-featprod,
    .server-card, .hc-card, .hpe-card,
    .industry-card, .feat-card, .prod-card, .hn-card):is(a):hover,
a:hover > :is(.card, .scw-card, .scw-uc,
    .card-prod, .card-prod-no-arrow, .card-featprod,
    .server-card, .hc-card, .hpe-card,
    .industry-card, .feat-card, .prod-card, .hn-card),
:is(.card, .scw-card, .scw-uc,
    .card-prod, .card-prod-no-arrow, .card-featprod,
    .server-card, .hc-card, .hpe-card,
    .industry-card, .feat-card, .prod-card, .hn-card):is(:has(a[href]), :has(button)):hover {
  box-shadow: 0 14px 34px rgba(1,169,130,.10);
  transform: translateY(-3px);
  border-color: #bfe9dd;
}

/* ---- 4. Financing Options banner ----
   One full-width HPE Financial Services image banner, identical on all four
   sites. Replaces the per-site inline frame styling (radius/shadow/border)
   and the per-site width caps (ECS was capped at 1200px). The <a> wrapper
   carries .hpe-financing-banner-link; the <img> carries .hpe-financing-banner.
   Each site points the <img> src at its own CDN copy of
   hpe-financial-services-banner-2026.jpg. */
.hpe-financing-banner-link { display: block; width: 100%; }
.hpe-financing-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  border: 1px solid #dee2e6;
}

/* ============================================================
   GREENLAKE / HPE PAGE DESIGN SYSTEM  (opt-in via .gl-* classes)
   ------------------------------------------------------------
   Reusable section bands, capability tiles, pillars, benefit
   cards and content cards. Everything keys off .gl-* classes, so
   it is fully opt-in and never restyles pages that don't use it.
   Build pages from these instead of per-page inline <style>.
   Canonical usage: default.asp. Quick reference: css/PATTERNS.md
   ------------------------------------------------------------
   Band scaffold:
     <div class="gl-band gl-band--gray scw-fullbleed">
       <div class="container-1350"> …content… </div>
     </div>
   Alternate --white / --gray each section; --dark for an accent
   band (e.g. the capability tiles).
   ============================================================ */

/* ---- Alternating full-width section bands ---- */
.gl-band.scw-fullbleed { padding: 60px 0; }
.gl-band > .container-1350 { padding-left: 15px; padding-right: 15px; }
.gl-band--white { background: #ffffff; }
.gl-band--gray  { background: #f6f8fa; }
.gl-band--dark  { background: #14161c; }
.gl-band--dark h2, .gl-band--dark h3 { color: #fff; }
.gl-band h2 { font-weight: 800; letter-spacing: -.01em; }
.gl-band .card, .gl-band .well-container { border: 1px solid #e6e9ee; border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease; }
/* Lift on hover ONLY when the whole box is a link (avoid faux-interactive static boxes) */
.gl-band a .card:hover, .gl-band a.card:hover, .gl-band a .well-container:hover, .gl-band a.well-container:hover { box-shadow: 0 14px 34px rgba(0,0,0,.10); transform: translateY(-3px); }

/* ---- Short section lead paragraph ---- */
.gl-lead { max-width: 820px; margin: 0 auto 42px; font-size: 1.15rem; line-height: 1.6; color: #444; }
.gl-band--dark .gl-lead { color: #aeb6c2; }

/* ---- Equal-height product/solution cards (CTAs pinned to bottom) ---- */
.gl-featured .row { align-items: stretch; }
.gl-featured .well-container, .gl-featured .card { height: 100%; display: flex; flex-direction: column; }
.gl-featured .card > .card-body { display: flex; flex-direction: column; flex: 1; }
.gl-featured .well-container > img { margin-bottom: 16px; }
.gl-featured .gl-cta { margin-top: auto; margin-bottom: 0; }
.gl-featured .btn-round, .gl-featured .btn-outline-round { white-space: normal; }

/* ---- Styled data table (wrap the .table-responsive in .gl-table-wrap; use .gl-table on the table) ---- */
.gl-table-wrap { border: 1px solid #e6e9ee; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.gl-table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; font-size: .95rem; }
.gl-table thead th { background: linear-gradient(135deg, #01A982 0%, #01795e 100%); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding: 14px 16px; border: none; vertical-align: middle; }
.gl-table tbody td { padding: 13px 16px; border-top: 1px solid #eef1f4; color: #4a4a57; vertical-align: middle; }
.gl-table tbody tr:hover td { background: #eef9f4; }
.gl-table tbody td[rowspan] { background: #f6faf9; font-weight: 700; color: #1a1a1a; border-left: 3px solid #01A982; }
.gl-table td.text-end, .gl-table th.text-end { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Enterprise capability tiles (dark). Wrap grid in .gl-explore on a --dark band ---- */
.gl-explore .gl-sub { color: #aeb6c2; text-align: center; max-width: 760px; margin: 0 auto 40px; font-size: 1.05rem; }
.gl-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.gl-tile { flex: 1 1 300px; max-width: 360px; background: linear-gradient(160deg, #252a36 0%, #1b1e27 100%); border: 1px solid rgba(255,255,255,.10); border-radius: 22px; color: #fff; padding: 32px 30px; display: flex; flex-direction: column; text-align: left; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gl-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.35); border-color: rgba(1,169,130,.45); }
.gl-tile h3 { color: #01A982; font-size: .95rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 6px; }
.gl-tile h2 { color: #fff; font-size: 1.4rem; margin: 0 0 14px; }
.gl-tile p { color: #c3cad4; font-size: 1rem; line-height: 1.55; margin: 0 0 22px; }
.gl-tile .btn-outline-round { margin-top: auto; align-self: flex-start; border-color: #01A982; color: #01A982; background: transparent; }
.gl-tile .btn-outline-round:hover { background: #01A982; color: #fff; }

/* ---- Pillars: icon + title + one line (borderless), good on white/gray ---- */
.gl-pillars { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.gl-pillar { flex: 1 1 250px; max-width: 330px; text-align: center; }
.gl-ic { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(135deg, #e9f9f2 0%, #cfeee1 100%); color: #01A982; font-size: 1.8rem; box-shadow: inset 0 0 0 1px rgba(1,169,130,.22), 0 8px 20px rgba(1,169,130,.12); }
.gl-pillar .gl-ic { margin-bottom: 18px; }
.gl-pillar h4 { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; color: #1a1a1a; }
.gl-pillar p { font-size: .98rem; color: #5a6472; margin: 0; line-height: 1.55; }

/* ---- Benefit cards: compact icon + title + one line, white cards ---- */
.gl-benefits { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-bottom: 10px; }
.gl-benefit { flex: 1 1 280px; max-width: 352px; background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; padding: 26px 26px; transition: transform .18s ease, box-shadow .18s ease; }
/* only lift a benefit card when it is actually a link (wraps or contains one) */
a:hover > .gl-benefit,
.gl-benefit:is(a, :has(a[href])):hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.gl-benefit .gl-ic { margin-bottom: 16px; }
.gl-benefit h4 { font-size: 1.08rem; font-weight: 700; margin: 0 0 8px; color: #1a1a1a; }
.gl-benefit p { font-size: .95rem; color: #5a6472; margin: 0; line-height: 1.5; }

/* ---- Content / news cards: image + tag + title + text + link ---- */
.gl-card { flex: 1 1 320px; max-width: 362px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.08); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
a:hover > .gl-card,
.gl-card:is(a, :has(a[href])):hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.gl-card-media { height: 185px; background-color: #eef1f4; background-size: cover; background-position: center; background-repeat: no-repeat; }
.gl-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.gl-tag { align-self: flex-start; background: #e6f7f1; color: #01795e; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; margin-bottom: 12px; }
.gl-card h3 { font-size: 19px; margin: 0 0 10px; color: #1a1a1a; line-height: 1.3; }
.gl-card p { color: #555; font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.gl-card-link { margin-top: auto; }
.gl-card-link a { display: inline-block; font-weight: 700; color: #01A982; text-decoration: none; font-size: 15px; }
.gl-card-link a:hover { text-decoration: underline; }

/* ---- Podcast / video proof band ---- */
.gl-band .blog, .blog.scw-fullbleed { background-color: #ffffff; padding: 60px 22px; }

@media (max-width: 767px) {
  .gl-card { flex: 1 1 100%; max-width: 430px; }
}

/* ============================================================
   PAGE-TOP TRIO (model: edge.asp / default.asp / platform.asp)
   Every interior page opens with: scw-breadcrumb-bar -> scw-hero
   -> (optional) below-hero jump nav. Keep these consistent across
   pages; the hero BACKGROUND may vary across the neutral HPE
   palette using the --slate / --mist modifiers below.
   ============================================================ */

/* Hero background variants — default .scw-hero is the HPE green gradient.
   Add ONE modifier for a neutral look on pages that want variety. */
.scw-hero--slate { background: linear-gradient(120deg, #2a313d 0%, #1b1e27 100%); }
.scw-hero--slate::after { opacity: .08; }
.scw-hero--mist { background: linear-gradient(120deg, #eef1f4 0%, #e4e9ee 100%); color: var(--scw-ink); }
.scw-hero--mist::after { opacity: .05; mix-blend-mode: normal; }
.scw-hero--mist h1 { color: var(--scw-ink); }
.scw-hero--mist p { color: var(--scw-slate); }
.scw-hero--mist .scw-eyebrow { color: var(--scw-green); }
.scw-hero--mist .scw-hero-img { filter: drop-shadow(0 20px 40px rgba(0,0,0,.18)); }
.scw-hero--mist .scw-btn-ghost { border-color: rgba(0,0,0,.32); color: var(--scw-ink) !important; }
.scw-hero--mist .scw-btn-ghost:hover { background: var(--scw-ink); color: #fff !important; border-color: var(--scw-ink); }

/* Image-backed hero: set --hero-bg on the section to a CDN image URL. A dark
   green-tinted overlay keeps white hero text legible over any photo. Shared
   optimized images live at cdn.blueally.com/hpe-shared/images/hero/ (all 4 sites).
   <section class="scw-hero scw-hero--img" id="main-content"
            style="--hero-bg:url('https://cdn.blueally.com/hpe-shared/images/hero/<file>');"> */
.scw-hero--img { background: linear-gradient(115deg, rgba(11,18,16,.82) 0%, rgba(9,40,31,.72) 100%), var(--hero-bg, none); background-size: cover; background-position: center; }
.scw-hero--img::after { display: none; }

/* Below-hero jump nav (section tabs) — shared, matches edge.asp.
   Markup: <div class="row text-center" id="nav"><div class="col-sm-12">
   <a href="#sec1"><button class="btn btn-bar">Label</button></a> … </div></div> */
.btn-bar { border: 2px solid #18AF8C; background: #fff; color: #18AF8C; font-size: 1.1rem; margin: 0 4px 8px; }
.btn-bar:hover { background-color: #18AF8C; color: #fff; }

/* ---- Polished data tables (enterprise look) — applies to any .table inside a gl-band ---- */
.gl-band .table-responsive { border-radius: 12px; }
.gl-band .table {
  --bs-table-striped-bg: #f5faf8;
  --bs-table-hover-bg: #eef7f3;
  width: 100%; margin: 0; background: #fff; color: #243b31;
  border: 1px solid #e2e9e5; border-radius: 12px; overflow: hidden;
  border-collapse: separate; border-spacing: 0; font-size: .95rem;
}
/* wipe Bootstrap's per-cell borders/shadows, then apply our own rhythm */
.gl-band .table > :not(caption) > * > * { border: 0; box-shadow: none; padding: .82rem 1.1rem; vertical-align: middle; }
.gl-band .table > thead > tr > th {
  background: #edf6f2; color: #0e3d30; text-transform: uppercase;
  letter-spacing: .045em; font-size: .76rem; font-weight: 700;
  border-bottom: 2px solid var(--hpe-green);
}
.gl-band .table > tbody > tr > * { border-bottom: 1px solid #edf1ef; }
.gl-band .table > tbody > tr:last-child > * { border-bottom: 0; }
.gl-band .table > tbody > tr:hover > * { background: #f4faf7; }
.gl-band .table th[scope="row"] { font-weight: 600; color: #13251e; background: #fafcfb; }
/* exec-summary key/value tables sit inside a .card — drop the inner frame to avoid box-in-box */
.gl-band .card .table { border: 0; border-radius: 0; }
.gl-band .card .table > tbody > tr:first-child > * { border-top: 0; }
/* dark bands render the table on a white inset (inline bg); keep the frame subtle */
.gl-band--dark .table { border-color: #d8e2dd; }

/* ============================================================
   Polished accordion — applies to any Bootstrap .accordion inside a
   gl-band (and to the .scw-acc opt-in class). Rounded, spaced cards
   with an HPE-green active state and a green chevron. Bootstrap 5.0.2
   has no --bs-accordion-* vars, so we override real properties.
   ============================================================ */
.gl-band .accordion, .scw-acc { max-width: 940px; margin-left: auto; margin-right: auto; }
.gl-band .accordion-item, .scw-acc .accordion-item {
  background: #fff; border: 1px solid #e6e9ee; border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.gl-band .accordion-item:last-child, .scw-acc .accordion-item:last-child { margin-bottom: 0; }
.gl-band .accordion-item:hover, .scw-acc .accordion-item:hover {
  border-color: #bfe9dd; box-shadow: 0 8px 22px rgba(1,169,130,.09);
}
.gl-band .accordion-header, .scw-acc .accordion-header { margin: 0; }
.gl-band .accordion-button, .scw-acc .accordion-button {
  font-weight: 700; font-size: 1.02rem; color: var(--scw-ink);
  background: #fff; padding: 1.05rem 1.25rem; border-radius: 12px;
  transition: background .18s ease, color .18s ease;
}
.gl-band .accordion-button:not(.collapsed),
.scw-acc .accordion-button:not(.collapsed) {
  color: var(--scw-green-dark);
  background: linear-gradient(180deg, #f2fbf7 0%, #eaf7f1 100%);
  box-shadow: inset 3px 0 0 var(--scw-green);
  border-radius: 12px 12px 0 0;
}
.gl-band .accordion-button:focus, .scw-acc .accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(1,169,130,.20); border-color: transparent; z-index: 2;
}
/* chevron: soft gray when collapsed, HPE green when open */
.gl-band .accordion-button::after, .scw-acc .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236a7684'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.gl-band .accordion-button:not(.collapsed)::after,
.scw-acc .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2301A982'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.gl-band .accordion-body, .scw-acc .accordion-body {
  color: #4a4a57; line-height: 1.62; padding: .35rem 1.25rem 1.2rem;
}

/* ============================================================
   .gl-home — homepage / category design-enhancement layer
   (Archivo display headings · tinted-shadow depth · dark-band
   atmosphere · scroll-reveal motion, plus a few de-cliche
   content patterns). Opt in by adding class="gl-home" to the
   <main>/content wrapper, then drop the IntersectionObserver
   reveal snippet in before </body>. Everything is scoped to
   .gl-home so no other page is affected.
   Used by: default.asp, greenlake-services.asp.
   ============================================================ */

/* Self-hosted display face (Archivo, OFL) for headings; Open Sans stays for body */
@font-face{font-family:"ArchivoDisplay";src:url('/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"ArchivoDisplay";src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"ArchivoDisplay";src:url('/fonts/archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
.gl-home h1,.gl-home h2,.gl-home h3,.gl-home h4,.gl-home .scw-eyebrow,.gl-home .hero-eyebrow{font-family:"ArchivoDisplay","Open Sans",Helvetica,Arial,sans-serif;}
.gl-home h1,.gl-home h2{font-weight:800;letter-spacing:-.028em;}
.gl-home h3{font-weight:700;letter-spacing:-.015em;}

/* HERO (image-backed dark hero used by default.asp) */
.gl-home .hero-section-image.hero-dim{background-image:linear-gradient(100deg,rgba(8,24,19,.95) 0%,rgba(8,24,19,.80) 32%,rgba(8,24,19,.34) 64%,rgba(8,24,19,.08) 100%),var(--hero-img);}
.gl-home .hero-inner{padding:110px 24px 100px;}
.gl-home .hero-text-backdrop{background:transparent;padding:0;max-width:720px;}
.gl-home .hero-eyebrow{color:#5fe3bf;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;}
.gl-home .hero-section-image h1{font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.02;letter-spacing:-.032em;margin:.6rem 0 1.1rem;max-width:16ch;text-shadow:0 2px 40px rgba(0,0,0,.55);}
.gl-home .hero-intro{max-width:50ch;text-shadow:0 1px 20px rgba(0,0,0,.5);}

/* left-aligned section intro */
.gl-home .gl-lead--left{margin-left:0;margin-right:0;text-align:left;}
.gl-home .gl-h2-left{text-align:left;}
.gl-home .gl-eyebrow-rule{display:inline-flex;align-items:center;gap:.6rem;}
.gl-home .gl-eyebrow-rule::before{content:"";width:26px;height:2px;background:var(--hpe-green);border-radius:2px;}

/* hairline stack list */
.gl-home .gl-stacklist{list-style:none;margin:0;padding:0;}
.gl-home .gl-stacklist li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--hpe-line);}
.gl-home .gl-stacklist li:first-child{border-top:none;padding-top:0;}
.gl-home .gl-stacklist .gl-rule{flex:none;width:3px;align-self:stretch;background:linear-gradient(180deg,var(--hpe-green),var(--hpe-green-dark));border-radius:3px;}
.gl-home .gl-stacklist h4{margin:0 0 4px;font-size:1.08rem;color:var(--hpe-ink);font-weight:700;}
.gl-home .gl-stacklist p{margin:0;color:var(--hpe-slate);font-size:.97rem;line-height:1.55;}

/* PROOF — asymmetric context + boxed 2x2 stat grid with uptick (de-cliche the big-number block) */
.gl-home .gl-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:48px;align-items:center;}
@media(max-width:860px){.gl-home .gl-proof{grid-template-columns:1fr;gap:26px;}}
.gl-home .gl-statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hpe-line);border:1px solid var(--hpe-line);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(1,122,94,.12);}
.gl-home .gl-statgrid > div{background:#fff;padding:26px 24px;}
.gl-home .gl-statgrid .n{display:flex;align-items:baseline;gap:.3rem;font-size:clamp(2rem,3.4vw,2.85rem);font-weight:800;color:var(--hpe-green);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-family:"ArchivoDisplay","Open Sans",sans-serif;}
.gl-home .gl-statgrid .n i{font-size:.8rem;}
.gl-home .gl-statgrid .l{margin-top:9px;color:var(--hpe-slate);font-size:.9rem;line-height:1.4;}

/* proof video row */
.gl-home .blog{padding:8px 0 0!important;background:transparent!important;}
.gl-home .blog .row{align-items:center;}
.gl-home .blog .ratio{border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.16);}
.gl-home .proof-divider{height:1px;background:var(--hpe-line);margin:44px 0 30px;}

/* ABOUT — numbered partner lifecycle (a real sequence), replaces generic icon tiles */
.gl-home .gl-steps{list-style:none;margin:0;padding:0;}
.gl-home .gl-steps li{display:flex;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.10);}
.gl-home .gl-steps li:first-child{border-top:none;padding-top:0;}
.gl-home .gl-step-n{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:"ArchivoDisplay","Open Sans",sans-serif;font-weight:800;font-size:1.05rem;color:#08241e;background:linear-gradient(135deg,#5fe3bf,#01A982);box-shadow:0 6px 16px rgba(1,169,130,.4);}
.gl-home .gl-steps h4{margin:0 0 3px;color:#fff;font-size:1.05rem;font-weight:700;}
.gl-home .gl-steps p{margin:0;color:#aeb6c2;font-size:.93rem;line-height:1.5;}

/* DEPTH — consistent tinted shadows + atmospheric dark bands */
.gl-home .gl-band .well-container{box-shadow:0 10px 30px rgba(16,32,28,.07);}
.gl-home .gl-explore .gl-tile{box-shadow:0 16px 40px rgba(0,0,0,.30);}
.gl-home .gl-band--dark{position:relative;}
.gl-home .gl-band--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 82% -10%,rgba(1,169,130,.16),transparent 66%);pointer-events:none;}
.gl-home .gl-band--dark > .container-1350{position:relative;z-index:1;}

/* MOTION — scroll reveal (only when JS adds .js-reveal) + hero load-in; reduced-motion safe */
@media (prefers-reduced-motion:no-preference){
  .gl-home.js-reveal .gl-band > .container-1350{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
  .gl-home.js-reveal .gl-band.in > .container-1350{opacity:1;transform:none;}
  .gl-home .hero-text-backdrop{animation:glHeroIn .85s cubic-bezier(.16,1,.3,1) both;}
  @keyframes glHeroIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
}

/* jump-anchor offset so in-page targets aren't hidden under chrome */
.gl-home [id]{scroll-margin-top:90px;}

/* ---- FAQ category segmented control (de-bulks a long single accordion) ---- */
.gl-faqnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:940px;margin:22px auto 26px;padding:6px;background:#fff;border:1px solid var(--hpe-line);border-radius:16px;box-shadow:0 10px 30px rgba(16,32,28,.06);}
.gl-faqnav__btn{display:inline-flex;align-items:center;gap:.5rem;border:0;background:transparent;color:var(--hpe-slate);font-family:"ArchivoDisplay","Open Sans",sans-serif;font-weight:700;font-size:.95rem;line-height:1;padding:.7rem 1.15rem;border-radius:11px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease;}
.gl-faqnav__btn i{font-size:.9em;opacity:.85;}
.gl-faqnav__btn:hover{color:var(--hpe-ink);background:rgba(1,169,130,.07);}
.gl-faqnav__btn.active{color:#fff;background:linear-gradient(135deg,#01A982,#017a5e);box-shadow:0 8px 20px rgba(1,169,130,.28);}
.gl-faqnav__btn.active i{opacity:1;}
.gl-faqnav__btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(1,122,94,.40);}
@media(max-width:600px){.gl-faqnav__btn{flex:1 1 auto;justify-content:center;font-size:.9rem;padding:.65rem .7rem;}}