/*
  HPE global theme (brand-critical subset)

  Source reference:
    styles/hpe-generic-v3.d053f41d172e.css

  This file intentionally focuses on:
    - theme tokens (light/dark)
    - typography scales (base + typo4 + typo5)
    - links/CTAs
    - buttons (classic + v3 + typo4)
    - color utility classes (style-bg/style-color/style-border)

  Fonts:
    Include styles/hpe-fonts.css separately.
*/

/* ---------- Theme tokens ---------- */

.dark-theme,
.dark-theme-prespecific,
.dark-theme-specific {
  --note-border-color: #fff;
  --note-bg-color: transparent;
  --note-fg-color: #fff;
  --note-bg-active-color: #fff;
  --note-fg-active-color: #01a982;

  --typo-text-color: #e5e5e5;
  --typo-quote-color: white;
  --typo-heading-color: white;
  --typo-icons-color: white;
  --typo-link-underline-color: #fff9;
  --typo-link-hover-underline-color: white;

  --btn-v4-color: white;

  /* Global-nav (gn-v4) tokens (as used on the iLO page). */
  --_gn-primary-nav-bg: #1d1f27;
  --_gn-secondary-nav-bg: #1d1f27;
  --_gn-header-bg: #292d3a;
  --_gn-flyout-bg: #1d1f27;
  --_gn-sec-more-bg: #292d3a;
  --_gn-flyout-shadow: linear-gradient(180deg, #0000004d -31.25%, #0000 100%);
  --_gn-flyout-hr: #3e4550;
  --_gn-search-color: white;
  --_gn-link-select-bg: #ffffff0a;
  --_gn-sec-link-select-bg: #1f222d;
  --_gn-nav-link-color: #d4d4d4;
  --_gn-nav-avatar-color: white;

  /* Unicorn gradient tokens (uc-gradient high/medium/low) */
  --high-gradient-color: #000000e6;
  --medium-gradient-color: #000000bf;
  --low-gradient-color: #0009;
}

body,
.light-theme,
.light-theme-prespecific,
.light-theme-specific {
  --note-border-color: #01a982;
  --note-bg-color: #fff;
  --note-fg-color: #01a982;
  --note-bg-active-color: #01a982;
  --note-fg-active-color: #fff;

  --typo-text-color: #67686e;
  --typo-quote-color: #444;
  --typo-heading-color: #292d3a;
  --typo-icons-color: black;
  --typo-link-underline-color: #01a982;
  --typo-link-hover-underline-color: #707070;

  --btn-v4-color: #444;

  /* Global-nav (gn-v4) tokens (as used on the iLO page). */
  --_gn-primary-nav-bg: #f7f7f7;
  --_gn-secondary-nav-bg: white;
  --_gn-header-bg: #e6e8e9;
  --_gn-flyout-bg: white;
  --_gn-sec-more-bg: white;
  --_gn-flyout-shadow: linear-gradient(180deg, #0000004d -31.25%, #0000 100%);
  --_gn-flyout-hr: #e9e9e9;
  --_gn-search-color: #292d3a;
  --_gn-link-select-bg: #0000000a;
  --_gn-sec-link-select-bg: #f0f0f1;
  --_gn-nav-link-color: #444;
  --_gn-nav-avatar-color: black;

  /* Unicorn gradient tokens (uc-gradient high/medium/low) */
  --high-gradient-color: #fffffff2;
  --medium-gradient-color: #ffffffd9;
  --low-gradient-color: #ffffffb3;
}

/* ---------- Base page defaults ---------- */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: var(--typo-text-color);
  background-color: #fff;
}

.dark-theme,
.dark-theme-prespecific,
.dark-theme-specific {
  color: var(--typo-text-color);
  background-color: #000;
}

:focus {
  outline: 2px solid #2ad2c9;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

/* ---------- Base typography (classic / typo3-ish) ---------- */

h1, h2, h3, h4, h5, h6,
.tag-h1, .tag-h2, .tag-h3, .tag-h4, .tag-h5, .tag-h6 {
  color: var(--typo-heading-color);
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: inherit;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-style: normal;
}

h1, .tag-h1 { font-size: 60px; line-height: 55px; }
h2, .tag-h2 { font-size: 40px; line-height: 42px; }
h3, .tag-h3 { font-size: 30px; line-height: 33px; }
h4, .tag-h4 { font-size: 20px; line-height: 23px; }
h5, .tag-h5 { font-size: 15px; line-height: 19px; }
h6, .tag-h6 { font-size: 25px; line-height: 29px; }

/* ---------- Typo4 typography scale ---------- */

.typo4 h1, .typo4 .tag-h1,
.typo4-h1 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 60px; line-height: 55px; font-weight: 600; }
.typo4 h2, .typo4 .tag-h2,
.typo4-h2 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 40px; line-height: 42px; font-weight: 600; }
.typo4 h3, .typo4 .tag-h3,
.typo4-h3 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 30px; line-height: 33px; font-weight: 600; }
.typo4 h4, .typo4 .tag-h4,
.typo4-h4 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 20px; line-height: 23px; font-weight: 600; }
.typo4 h5, .typo4 .tag-h5,
.typo4-h5 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 15px; line-height: 19px; font-weight: 600; }
.typo4 h6, .typo4 .tag-h6,
.typo4-h6 { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 25px; line-height: 29px; font-weight: 600; }

.typo4 .body-copy-large { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 23px; line-height: 25px; font-weight: 300; }
.typo4 .body-copy { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 18px; line-height: 22px; font-weight: 300; }
.typo4 .body-copy-small { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 15px; line-height: 19px; font-weight: 300; }
.typo4 .caption { font-family: "MetricHPEXS", Arial, sans-serif; font-size: 12px; line-height: 16px; font-weight: 400; }

/* ---------- Typo5 typography scale ---------- */

.typo5 h1, .typo5 .tag-h1,
.typo5-h1 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 60px; line-height: 55px; font-weight: 600; }
.typo5 h2, .typo5 .tag-h2,
.typo5-h2 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 40px; line-height: 42px; font-weight: 600; }
.typo5 h3, .typo5 .tag-h3,
.typo5-h3 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 30px; line-height: 33px; font-weight: 600; }
.typo5 h4, .typo5 .tag-h4,
.typo5-h4 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 20px; line-height: 23px; font-weight: 600; }
.typo5 h5, .typo5 .tag-h5,
.typo5-h5 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 15px; line-height: 19px; font-weight: 600; }
.typo5 h6, .typo5 .tag-h6,
.typo5-h6 { font-family: "HPEGraphik", Arial, sans-serif; font-size: 25px; line-height: 29px; font-weight: 600; }

.typo5 .body-copy-large { font-family: "HPEGraphik", Arial, sans-serif; font-size: 23px; line-height: 25px; font-weight: 300; }
.typo5 .body-copy { font-family: "HPEGraphik", Arial, sans-serif; font-size: 18px; line-height: 22px; font-weight: 300; }
.typo5 .body-copy-small { font-family: "HPEGraphik", Arial, sans-serif; font-size: 15px; line-height: 19px; font-weight: 300; }
.typo5 .caption { font-family: "HPEGraphik", Arial, sans-serif; font-size: 12px; line-height: 16px; font-weight: 400; }

.body-copy-large {
  color: var(--typo-heading-color);
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 23px;
  font-style: normal;
  line-height: 25px;
}

.body-copy {
  color: var(--typo-heading-color);
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 22px;
}

.body-copy-small {
  color: var(--typo-heading-color);
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  line-height: 19px;
}

.caption {
  color: var(--typo-heading-color);
  font-family: "Metric Regular", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}

@media screen and (width<=767px) {
  body { font-size: 16px; line-height: 20px; }
  h1, .tag-h1 { font-size: 45px; line-height: 45px; }
  h2, .tag-h2 { font-size: 25px; line-height: 26px; }
  h3, .tag-h3 { font-size: 20px; line-height: 22px; }
  h4, .tag-h4 { font-size: 17px; line-height: 19px; }
  h5, .tag-h5 { font-size: 12px; line-height: 16px; }
  h6, .tag-h6 { font-size: 19px; line-height: 21px; }
  .body-copy-large { font-size: 19px; line-height: 22px; }
  .body-copy { font-size: 16px; line-height: 20px; }
}

@media screen and (width<=510px) {
  h1, .tag-h1 { font-size: 32px; line-height: 32px; }
}

/* ---------- Link patterns ---------- */

.inline-links a,
.rich-text-container a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  border-bottom: 1px solid var(--typo-link-underline-color);
  transition: color .2s, border-color .2s, fill .2s;
  position: relative;
}

.inline-links a:hover,
.inline-links a:focus-visible,
.inline-links a.focus,
.inline-links a:active,
.inline-links a.active,
.rich-text-container a:hover,
.rich-text-container a:focus-visible,
.rich-text-container a.focus,
.rich-text-container a:active,
.rich-text-container a.active {
  color: var(--typo-heading-color);
  border-bottom: 1px solid var(--typo-link-hover-underline-color);
}

.rich-text-container u {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* HPE arrow link (classic) */
.hpe-arrow-link {
  --f-base-size: 20px;
  cursor: pointer;
  color: #01a982;
  fill: #01a982;
  padding-right: 5px;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.20001em;
  text-decoration: none;
  position: relative;
}

.hpe-arrow-link .arrow {
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  margin-left: 5px;
  transition: transform .15s ease-in-out;
  display: inline-block;
}

.hpe-arrow-link:hover .arrow,
body:not(.disabled-focus) .hpe-arrow-link:focus .arrow {
  transform: translate(5px);
}

/* ---------- Buttons ---------- */

/* Classic (square, uppercase) */
.btn {
  white-space: normal;
  text-transform: uppercase;
  background: #01a982;
  border-radius: 0;
  width: auto;
  margin-top: 15px;
  padding: 10px 30px;
  font-family: "Metric Regular", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  position: relative;
}

.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-contact {
  min-width: 200px;
  max-width: 400px;
  min-height: 40px;
}

.btn-primary {
  color: #000;
  background: #01a982;
  border: 2px solid #01a982;
}

/* Hover/focus/active states (include .hover/.focus/.active helpers for static demos) */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.focus,
.btn-primary.hover {
  background: #1cd3a8;
  border-color: #1cd3a8;
}

.btn-primary:active,
.btn-primary.active {
  background: #01a982;
}

@supports (background: color-mix(in srgb, black 0%, white 100%)) {
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:focus-visible,
  .btn-primary.focus,
  .btn-primary.hover {
    background: color-mix(in srgb, #01a982 85%, white);
    border-color: color-mix(in srgb, #01a982 85%, white);
  }
  .btn-primary:active,
  .btn-primary.active {
    background: color-mix(in srgb, #01a982 82%, black);
    border-color: color-mix(in srgb, #01a982 82%, black);
  }
}

.btn-secondary {
  color: #000;
  background: transparent;
  border: 2px solid #01a982;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary.focus,
.btn-secondary.hover {
  background: #01a982;
  color: #000;
}

.btn-secondary:active,
.btn-secondary.active {
  background: #01a982;
}

@supports (background: color-mix(in srgb, black 0%, white 100%)) {
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:focus-visible,
  .btn-secondary.focus,
  .btn-secondary.hover {
    background: color-mix(in srgb, #01a982 85%, white);
    border-color: color-mix(in srgb, #01a982 85%, white);
  }
  .btn-secondary:active,
  .btn-secondary.active {
    background: color-mix(in srgb, #01a982 82%, black);
    border-color: color-mix(in srgb, #01a982 82%, black);
  }
}

.btn-tertiary {
  color: #000;
  background: transparent;
  border: 2px solid #0003;
}

.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:focus-visible,
.btn-tertiary.focus,
.btn-tertiary.hover {
  border-color: #000;
}

.btn-tertiary:active,
.btn-tertiary.active {
  border-color: #000;
}

.btn-contact {
  color: #000;
  background: transparent;
  border: 2px solid #ff8d6d;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact:focus-visible,
.btn-contact.focus,
.btn-contact.hover {
  background: #ff8d6d;
}

.btn-contact:active,
.btn-contact.active {
  background: #ff8d6d;
}

@supports (background: color-mix(in srgb, black 0%, white 100%)) {
  .btn-contact:hover,
  .btn-contact:focus,
  .btn-contact:focus-visible,
  .btn-contact.focus,
  .btn-contact.hover {
    background: color-mix(in srgb, #ff8d6d 85%, white);
    border-color: color-mix(in srgb, #ff8d6d 85%, white);
  }
  .btn-contact:active,
  .btn-contact.active {
    background: color-mix(in srgb, #ff8d6d 82%, black);
    border-color: color-mix(in srgb, #ff8d6d 82%, black);
  }
}

.btn.disabled,
.btn[disabled] {
  color: #c6c9ca;
  background: transparent;
  border-color: #c6c9ca;
  pointer-events: none;
}

/* v3 button (rounded corners + optional arrow) */
.btn-v3 {
  --btnMinHeight: 60px;
  --btnMinWidth: 242px;
  --btnMaxWidth: 450px;

  min-height: var(--btnMinHeight);
  min-width: var(--btnMinWidth);
  max-width: var(--btnMaxWidth);

  --f-base-size: 20px;
  text-align: center;
  cursor: pointer;
  background: #01a982;
  border: 2px solid #01a982;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 10px 22px;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.10001em;
  display: inline-flex;
  position: relative;
  color: #fff;
}

.btn-v3:after {
  content: "";
  pointer-events: none;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 4px #01a982;
}

.btn-v3:hover:after,
.btn-v3.hover:after {
  display: inline-block;
}

.btn-v3:active:after,
.btn-v3.active:after {
  display: inline-block;
}

.btn-v3 .btn-arrow {
  white-space: nowrap;
  color: inherit;
  padding-right: 1.33em;
  position: relative;
}

.btn-v3 .btn-arrow:after {
  content: "";
  width: 1em;
  height: 1em;
  transition: transform .15s ease-in-out;
  position: absolute;
  top: 2px;
  right: 0;
}

.btn-v3:hover .btn-arrow:after,
.btn-v3:focus .btn-arrow:after {
  transform: translate(5px);
}

/* Typo4 (modern gradient button) */
.btn-typo4 {
  vertical-align: middle;
  text-align: center;
  --f-base-size: 16px;
  border-radius: 4px;
  height: 37px;
  padding: 4px 23px;
  font-size: 16px;
  line-height: 1.5625em;
  display: inline-block;
  position: relative;
  font-family: "MetricHPEXS", Arial, sans-serif;
  font-weight: 600;
}

.btn-typo4.primary {
  color: #fff;
  border: 2px solid transparent;
  background: linear-gradient(60deg, #01a982 0% 13%, #1cd3a8 20%, #01a982 27%, #01a982) 99%/200% 200%;
  transition: background-position .5s;
}

.btn-typo4.primary:hover {
  background-position: 0;
}

.btn-typo4.primary.hover,
.btn-typo4.primary.focus,
.btn-typo4.primary:focus,
.btn-typo4.primary:focus-visible {
  background-position: 0;
}

.btn-typo4.primary:active,
.btn-typo4.primary.active {
  background-position: 0;
}

.btn-typo4.secondary {
  border: 2px solid #01a982;
  background-color: transparent;
  color: var(--btn-v4-color);
}

.btn-typo4.secondary:hover,
.btn-typo4.secondary:focus,
.btn-typo4.secondary:focus-visible,
.btn-typo4.secondary.focus,
.btn-typo4.secondary.hover {
  background-color: #01a982;
  color: #fff;
}

.btn-typo4.secondary:active,
.btn-typo4.secondary.active {
  background-color: #01a982;
  color: #fff;
}

@supports (background-color: color-mix(in srgb, black 0%, white 100%)) {
  .btn-typo4.secondary:hover,
  .btn-typo4.secondary:focus,
  .btn-typo4.secondary:focus-visible,
  .btn-typo4.secondary.focus,
  .btn-typo4.secondary.hover {
    background-color: color-mix(in srgb, #01a982 85%, white);
  }
  .btn-typo4.secondary:active,
  .btn-typo4.secondary.active {
    background-color: color-mix(in srgb, #01a982 82%, black);
  }
}

/* ---------- Gradients (from typo4 primary button) ---------- */

.hpe-gradient-green {
  background: linear-gradient(60deg, #01a982 0% 13%, #1cd3a8 20%, #01a982 27%, #01a982) 99%/200% 200%;
  color: #fff;
}

/* ---------- Unicorn gradients (used by Adaptive Marquee / Our Customers, etc.) ---------- */

.uc-gradient {
  inset: var(--uc-gradient-position, 0 25% 0 0);
  z-index: 1;
  position: absolute;
}

.uc-gradient.high-gradient {
  background: linear-gradient(var(--uc-gradient-direction, to right), var(--high-gradient-color, #fffffff2), #fff0);
}

.uc-gradient.medium-gradient {
  background: linear-gradient(var(--uc-gradient-direction, to right), var(--medium-gradient-color, #ffffffd9), #fff0);
}

.uc-gradient.low-gradient {
  background: linear-gradient(var(--uc-gradient-direction, to right), var(--low-gradient-color, #ffffffb3), #fff0);
}

/* ---------- Landmark CTA buttons (used heavily on AEM pages) ---------- */

.cta.btn-landmark {
  --_cta-gap: 12px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_cta-gap);
  font-family: "MetricHPEXS", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
}

.cta.btn-landmark.small {
  font-size: 16px;
  min-height: 37px;
  padding: 4px 23px;
}

.cta.btn-landmark.standard {
  font-size: 18px;
  min-height: 44px;
  padding: 10px 24px;
}

.cta.btn-landmark.primary {
  color: #fff;
  background: linear-gradient(60deg, #01a982 0% 13%, #1cd3a8 20%, #01a982 27%, #01a982) 99%/200% 200%;
  transition: background-position .5s;
}

.cta.btn-landmark.primary:hover,
.cta.btn-landmark.primary.hover,
.cta.btn-landmark.primary:focus,
.cta.btn-landmark.primary:focus-visible,
.cta.btn-landmark.primary.focus {
  background-position: 0;
}

.cta.btn-landmark.secondary {
  border-color: #01a982;
  background: transparent;
  color: var(--btn-v4-color);
}

.cta.btn-landmark.secondary:hover,
.cta.btn-landmark.secondary.hover,
.cta.btn-landmark.secondary:focus,
.cta.btn-landmark.secondary:focus-visible,
.cta.btn-landmark.secondary.focus {
  background: #01a982;
  color: #fff;
}

.cta.btn-landmark .icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-grid;
  place-items: center;
}

.cta.btn-landmark .icon.arrow-icon::before {
  content: "→";
  font-weight: 700;
}

/* ---------- UC card hover accent (used by simple-card / clickable cards) ---------- */

.uc-card,
.uc-card-shadow {
  position: relative;
}

.uc-card-hover-bg {
  opacity: 0;
  z-index: -1;
  background: linear-gradient(160deg, #00e0af00 70%, #00e0af66 100%);
  transition: opacity .5s linear;
  position: absolute;
  inset: 0;
}

.uc-card:hover .uc-card-hover-bg,
.uc-card-shadow:hover .uc-card-hover-bg {
  opacity: 1;
}

/* ---------- Tabs (hpe-tabs) ---------- */

.hpe-tabs {
  --tab-arrow-gap: -30px;
  --arrow-color: #068667;
  --arrow-size: 25px;
  --tab-text-color: #67686e;
  --tab-text-color-active: #292d3a;
  --tab-accent-color: transparent;
  --tab-accent-color-active: #068667;
  --tab-accent-color-hover: #d4d8d8;
  --tab-accent-size: 4px;
  --tab-gap: 32px;
  --tab-padding: 16px 0;
  margin-bottom: 20px;
}

.dark-theme .hpe-tabs,
.dark-theme-prespecific .hpe-tabs,
.dark-theme-specific .hpe-tabs {
  --tab-text-color: #e5e5e5;
  --tab-text-color-active: white;
  --arrow-color: #00e0af;
  --tab-accent-color-active: #00e0af;
}

@media (width>=768px) {
  .hpe-tabs { --tab-arrow-gap: -35px; }
}

@media (width>=768px) and (width<=1199px) {
  .hpe-tabs { --tab-gap: 44px; }
}

@media (width>=992px) and (width<=1599px) {
  .hpe-tabs { --tab-gap: 48px; --tab-padding: 20px 0; margin-bottom: 30px; }
}

@media (width>=1200px) {
  .hpe-tabs { --tab-gap: 56px; }
}

@media (width>=1600px) {
  .hpe-tabs { --tab-gap: 64px; --tab-padding: 24px 0; margin-bottom: 40px; }
}

.hpe-tabs .hpe-tab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--tab-gap);
  align-items: stretch;
}

.hpe-tabs .hpe-tab {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.hpe-tabs .hpe-tab:after {
  background-color: var(--tab-accent-color);
  width: 100%;
  height: var(--tab-accent-size);
  content: "";
  transition: background-color .1s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
}

.hpe-tabs .hpe-tab:hover:after {
  background-color: var(--tab-accent-color-hover);
}

.hpe-tabs .hpe-tab.active:after,
.hpe-tabs .hpe-tab[active]:after {
  background-color: var(--tab-accent-color-active);
}

.hpe-tabs .hpe-tab-title {
  padding: var(--tab-padding);
  color: var(--tab-text-color);
  font-family: "HPEGraphik", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.375;
}

.hpe-tabs .hpe-tab.active .hpe-tab-title,
.hpe-tabs .hpe-tab[active] .hpe-tab-title {
  color: var(--tab-text-color-active);
}

/* ---------- Unicorn: Text-only (typography wrapper used heavily across iLO page) ---------- */

/*
  NOTE:
  The real site uses a more complex “text-box-trim/crop” system.
  This is a lightweight subset focused on spacing + reasonable defaults.
*/

.text-only {
  --to-gap: 30px;
}

@media (width>=992px) and (width<=1599px) {
  .text-only { --to-gap: 35px; }
}

@media (width>=1600px) {
  .text-only { --to-gap: 40px; }
}

.text-only .txto-title {
  display: inline-block;
  margin: 0;
}

.text-only .txto-title-wrapper {
  display: flow-root;
}

.text-only .txto-title-wrapper:not(:last-child) {
  margin-bottom: var(--to-gap);
}

.text-only .txto-title-alternate {
  margin: 0;
}

.text-only .txto-title-alternate .txto-title {
  display: block;
  color: inherit;
}

.text-only .txto-title-text {
  display: inline-block;
}

.text-only .categorical-label {
  margin: 0 0 10px;
}

.text-only .txto-description {
  margin: 0;
}

.text-only .txto-description > :first-child {
  margin-top: 0;
}

.text-only .txto-description > :last-child {
  margin-bottom: 0;
}

/* “no-text-box-trim” variant: keep predictable margins */
.text-only.no-text-box-trim {
  --to-gap: 24px;
}

.text-only.no-text-box-trim .txto-title-wrapper {
  margin-block: 0 var(--to-gap);
}

.text-only.no-text-box-trim .txto-title-wrapper:last-child {
  margin-bottom: 0;
}

/* ---------- Unicorn: Content-block (2-column layout + spacing) ---------- */

.content-block {
  gap: 48px;
  display: flex;
  position: relative;
}

@media (width>=992px) {
  .content-block { gap: 64px; }
}

@media (width>=1px) and (width<=767px) {
  .content-block { flex-direction: column; }
}

.content-block.layout-vertical {
  flex-direction: column;
  gap: 32px;
}

@media (width>=1600px) {
  .content-block.layout-vertical { gap: 40px; }
}

@media (width>=768px) {
  .content-block.image-right { flex-direction: row-reverse; }
}

.content-block .cb-content {
  min-width: 0;
}

.content-block.layout-50-50 .cb-content {
  flex: 50%;
}

.content-block .cb-text-content {
  display: flex;
  flex-direction: column;
}

.content-block .cb-text-content.vertical-center {
  justify-content: center;
}

.content-block .cb-text-content.vertical-bottom {
  justify-content: flex-end;
}

.content-block .cb-text {
  --to-gap: 20px;
}

@media (width>=1600px) {
  .content-block .cb-text { --to-gap: 24px; }
}

.content-block .cb-cta-group {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

@media (width>=1600px) {
  .content-block .cb-cta-group {
    margin-top: 22px;
    gap: 32px;
  }
}

/* Common CTA group helper used across iLO page */
.btn-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* small alignment helpers commonly present in iLO markup */
.pull-left {
  justify-content: flex-start;
}

/* ---------- Navigation (lightweight demo styles) ---------- */

.hpe-nav {
  background: var(--_gn-primary-nav-bg, #425563);
  color: var(--_gn-nav-link-color, #fff);
  padding: 14px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hpe-nav .hpe-nav__brand {
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  margin-right: 8px;
}

.hpe-nav a {
  color: var(--_gn-nav-link-color, #fff);
  border-bottom: 1px solid transparent;
}

.hpe-nav a:hover,
.hpe-nav a:focus-visible,
.hpe-nav a.focus,
.hpe-nav a:active,
.hpe-nav a.active {
  color: var(--_gn-nav-link-color, #fff);
  border-bottom-color: #01a982;
}

/* ---------- Forms ---------- */

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 14px;
  color: var(--typo-heading-color);
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #c6c9ca;
  border-radius: 4px;
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--typo-text-color);
  background-color: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.form-input:focus {
  outline: none;
  border-color: #01a982;
  box-shadow: 0 0 0 3px #01a98233;
}

.form-input.error {
  border-color: #ff4d4f;
}

.form-input.success {
  border-color: #52c41a;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #c6c9ca;
  border-radius: 4px;
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--typo-text-color);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 3rem;
  transition: border-color .2s, box-shadow .2s;
}

.form-select:focus {
  outline: none;
  border-color: #01a982;
  box-shadow: 0 0 0 3px #01a98233;
}

.form-checkbox,
.form-radio {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: #01a982;
}

.form-checkbox-group,
.form-radio-group {
  margin-bottom: 15px;
}

.form-checkbox-label,
.form-radio-label {
  display: inline-flex;
  align-items: center;
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 16px;
  color: var(--typo-text-color);
  cursor: pointer;
}

/* ---------- Cards ---------- */

.hpe-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.hpe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-color: #d4d8d8;
}

.hpe-card.dark-theme {
  background: #292d3a;
  border-color: #3e4550;
}

.hpe-card.dark-theme:hover {
  border-color: #5f7a76;
}

.card-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 15px;
}

.card-body {
  margin-bottom: 15px;
}

.card-footer {
  border-top: 1px solid #e9e9e9;
  padding-top: 15px;
}

/* ---------- Modals ---------- */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform .3s;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  margin: 0;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 24px;
  color: var(--typo-heading-color);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--typo-text-color);
  padding: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .2s;
}

.modal-close:hover {
  background-color: #f0f0f1;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e9e9e9;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

/* ---------- Carousels ---------- */

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.carousel-btn {
  background: rgba(255,255,255,0.8);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.carousel-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: transparent;
  cursor: pointer;
  transition: all .2s;
}

.carousel-dot.active {
  background: #01a982;
  border-color: #01a982;
}

.carousel-dot:hover {
  border-color: #01a982;
}

/* ---------- Accordion ---------- */

.accordion-item {
  border: 1px solid #e9e9e9;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-header {
  background: #f7f7f7;
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Metric Semibold", Arial, sans-serif;
  font-size: 16px;
  color: var(--typo-heading-color);
  transition: background-color .2s;
}

.accordion-header:hover {
  background: #f0f0f1;
}

.accordion-header.active {
  background: #e6e8e9;
}

.accordion-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out, padding .3s;
  font-family: "Metric Light", Arial, sans-serif;
  font-size: 16px;
  color: var(--typo-text-color);
}

.accordion-content.active {
  padding: 20px;
  max-height: 500px;
}

/* ---------- Utility Classes ---------- */

/* Layout utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }
.m-4 { margin: 32px; }
.m-5 { margin: 40px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 40px; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 8px; }
.mr-2 { margin-right: 16px; }
.mr-3 { margin-right: 24px; }
.mr-4 { margin-right: 32px; }
.mr-5 { margin-right: 40px; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 8px; }
.ml-2 { margin-left: 16px; }
.ml-3 { margin-left: 24px; }
.ml-4 { margin-left: 32px; }
.ml-5 { margin-left: 40px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }
.p-5 { padding: 40px; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 8px; }
.pt-2 { padding-top: 16px; }
.pt-3 { padding-top: 24px; }
.pt-4 { padding-top: 32px; }
.pt-5 { padding-top: 40px; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 8px; }
.pb-2 { padding-bottom: 16px; }
.pb-3 { padding-bottom: 24px; }
.pb-4 { padding-bottom: 32px; }
.pb-5 { padding-bottom: 40px; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 8px; }
.pr-2 { padding-right: 16px; }
.pr-3 { padding-right: 24px; }
.pr-4 { padding-right: 32px; }
.pr-5 { padding-right: 40px; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 8px; }
.pl-2 { padding-left: 16px; }
.pl-3 { padding-left: 24px; }
.pl-4 { padding-left: 32px; }
.pl-5 { padding-left: 40px; }

/* Responsive utilities */
.hidden-xs { display: none; }
.visible-xs { display: block; }

@media (min-width: 768px) {
  .hidden-xs { display: block; }
  .visible-xs { display: none; }
  .hidden-sm { display: none; }
  .visible-sm { display: block; }
}

@media (min-width: 992px) {
  .hidden-sm { display: block; }
  .visible-sm { display: none; }
  .hidden-md { display: none; }
  .visible-md { display: block; }
}

@media (min-width: 1200px) {
  .hidden-md { display: block; }
  .visible-md { display: none; }
  .hidden-lg { display: none; }
  .visible-lg { display: block; }
}

@media (min-width: 1600px) {
  .hidden-lg { display: block; }
  .visible-lg { display: none; }
  .hidden-xl { display: none; }
  .visible-xl { display: block; }
}

/* Color utility classes (common HPE tokens) ---------- */

.style-bg-green,
.style-bg-hpe-green { background-color: #01a982; }
.style-bg-slate { background-color: #425563; }
.style-bg-bronze { background-color: #80746e; }
.style-bg-dark-steel { background-color: #5f7a76; }
.style-bg-gray { background-color: #c6c9ca; }
.style-bg-turquoise { background-color: #2ad2c9; }
.style-bg-orange { background-color: #ff8d6d; }
.style-bg-purple { background-color: #614767; }
.style-bg-white { background-color: #fff; }
.style-bg-black { background-color: #000; }
.style-bg-light-gray { background-color: #f6f6f6; }

.style-color-green { color: #01a982; }
.style-color-slate { color: #425563; }
.style-color-bronze { color: #80746e; }
.style-color-dark-steel { color: #5f7a76; }
.style-color-gray { color: #c6c9ca; }
.style-color-turquoise { color: #2ad2c9; }
.style-color-orange { color: #ff8d6d; }
.style-color-purple { color: #614767; }
.style-color-white { color: #fff; }
.style-color-black { color: #000; }

[class*="style-border-"] { border-top: 4px solid; }
.style-border-green { border-color: #01a982; }
.style-border-slate { border-color: #425563; }
.style-border-bronze { border-color: #80746e; }
.style-border-dark-steel { border-color: #5f7a76; }
.style-border-gray { border-color: #c6c9ca; }
.style-border-turquoise { border-color: #2ad2c9; }
.style-border-orange { border-color: #ff8d6d; }
.style-border-purple { border-color: #614767; }
.style-border-white { border-color: #fff; }
.style-border-black { border-color: #000; }