@charset "utf-8";
/* ==========================================================================
   HPE Smart Choice - NeweggBusiness LP
   Campaign-only overrides. Loaded last, after responsive-lp.css.
   Every rule is scoped to #main or an hpe-/info- class so nothing here
   leaks into the global header or footer.
   ========================================================================== */

:root {
	--hpe-green: #01A982;
	--hpe-bright: #01DB9B;
	--hpe-deep: #00806A;
	--hpe-ink: #12222A;
	--hpe-line: #D6DEE2;
	--hpe-body: #3B4A52;
}

/* --- Hero -----------------------------------------------------------------
   This template shows the hero as one centred <img>. A single 1440px file
   scaled to a 375px phone renders the headline at ~26%, so a tighter crop is
   swapped in at the template's own 640px breakpoint. */
#main #hero {
	background: #252830;
}
#main #hero img {
	max-width: 100%;
	height: auto;
}
#main #hero .hero-mobile { display: none; }

#main .section-action .hero-note {
	margin: 12px 0 0 0;
	color: var(--hpe-body);
	font-size: 14px;
}

/* --- Buttons: HPE green, matching the banner CTA -------------------------- */
#main .section-action .btn.btn-hpe {
	background: var(--hpe-green);
	border-color: var(--hpe-green);
	color: #FFF;
}
#main .section-action .btn.btn-hpe:hover {
	background: var(--hpe-deep);
	border-color: var(--hpe-deep);
}

/* --- Full-width imagery inside an .informations card ----------------------
   .info-img defaults to a 100px floated thumbnail; these are feature images. */
#main .informations .info-img.info-img-wide {
	float: none;
	margin: 0;
	width: 100%;
	height: auto;
}

/* --- Column support: col-8 -----------------------------------------------
   #main .item-grid .row sets font-size:0 to kill inline-block whitespace, and
   responsive-lp.css only restores it for .col-3/4/6/12. Any other column
   inherits 0 and renders invisible. This mirrors that rule for .col-8. */
#main .item-grid .col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
	display: inline-block;
	float: none;
	font-size: 14px;
	vertical-align: top;
	border-bottom: 1px solid #EFEFEF;
	box-sizing: border-box;
}

/* --- Card surfaces --------------------------------------------------------
   #main sits on a grey page. Product and feature imagery is shot on white, so
   cards need a white surface or every photo shows as a white box on grey. */
#main .item-grid .row { background: #FFF; }
#main .informations.info-pillar,
#main .informations.info-tech,
#main .informations.info-case { background: #FFF; }

/* .items:after draws a 1px column divider. These cards carry their own border,
   so the divider lands inside them and reads as a stray line. */
#main .item-grid .items.informations:after { width: 0; }

/* --- Program chips -------------------------------------------------------- */
#main .section-intro .hpe-chips {
	margin: 20px 0 0 0;
	padding: 0;
	text-align: center;
}
#main .section-intro .hpe-chips li {
	display: inline-block;
	margin: 0 5px 10px 5px;
	padding: 8px 22px;
	list-style: none;
	border-radius: 40px;
	background: var(--hpe-green);
	color: #FFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

/* --- Value-proposition triad (dark cards) --------------------------------- */
#main .informations.info-dark {
	background: var(--hpe-ink);
	border-radius: 6px;
}
#main .informations.info-dark .info-title { color: var(--hpe-bright); }
#main .informations.info-dark p { color: #E4EBEE; margin-bottom: 0; }

/* --- Four pillars --------------------------------------------------------- */
#main .informations.info-pillar {
	border: 1px solid var(--hpe-line);
	border-radius: 6px;
	text-align: center;
}
#main .informations.info-pillar .info-img {
	float: none;
	margin: 0 auto 10px auto;
	width: 96px;
}
#main .informations.info-pillar ul { margin: 0; }
#main .informations.info-pillar ul li {
	margin: 0;
	padding: 8px 0;
	list-style: none;
	border-top: 1px solid #EDF1F3;
	color: var(--hpe-body);
	font-size: 14px;
	line-height: 1.4;
}
#main .informations.info-pillar ul li:first-child { border-top: 0; }

/* --- Emphasis band -------------------------------------------------------- */
#main .section-intro.hpe-band {
	margin-top: 15px;
	border-radius: 6px;
	background: var(--hpe-ink);
	color: #FFF;
}
#main .section-intro.hpe-band strong { color: #FFF; }
#main .section-intro.hpe-band .hpe-band-note {
	margin-bottom: 0;
	color: var(--hpe-bright);
	font-size: 14px;
}

/* --- Video --------------------------------------------------------------
   .inner is the template's 16:9 box; responsive-lp.css only absolutely
   positions an <iframe> inside it, so a <video> needs the same treatment.
   object-fit:contain letterboxes rather than crops if a clip isn't exactly
   16:9, so nothing important gets cut off. */
/* the template adds padding-top:25px to .inner for legacy iframe chrome; a
   <video> needs none, and zeroing it makes the box an exact 16:9 */
/* responsive-lp.css caps .section-video at 800px; widen to 1440. Nothing in
   #main constrains width above this, so the box fills the column up to 1440
   and centres beyond it. */
#main .section-video { max-width: 1440px; }
#main .section-video .inner { padding-top: 0; background: #000; }
#main .section-video .inner .lp-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	object-fit: contain;
}
#main .section-video .inner .lp-video p {
	padding: 20px;
	color: #FFF;
	font-size: 14px;
}

/* --- Sold-out badge ------------------------------------------------------- */
#main .item-grid .item-price .soldout {
	display: block;
	padding: 6px 0;
	color: #C00;
	font-size: 16px;
	font-weight: 700;
}

/* --- DL385 AI panel ------------------------------------------------------- */
#main .hpe-ai {
	padding: 25px 30px 20px 30px;
	border-radius: 6px;
	background: var(--hpe-ink);
	text-align: center;
}
#main .hpe-ai .hpe-ai-pn {
	margin: 0 0 15px 0;
	color: var(--hpe-bright);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
#main .hpe-ai .hpe-ai-img {
	display: block;
	margin: 0 auto 20px auto;
	max-width: 620px;
	width: 100%;
	height: auto;
}
#main .hpe-ai .hpe-spec-table { width: 100%; }
#main .hpe-ai .hpe-spec-table th {
	color: var(--hpe-bright);
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: none;
	border-color: rgba(255, 255, 255, 0.2);
}
#main .hpe-ai .hpe-spec-table td {
	color: #E4EBEE;
	font-size: 14px;
	background: none;
	border-color: rgba(255, 255, 255, 0.2);
}
#main .hpe-ai .section-action { padding: 20px 0 0 0; }
#main .hpe-ai .hpe-ai-foot {
	margin: 15px 0 0 0;
	color: #A9B8BF;
	font-size: 14px;
	line-height: 1.5;
}

/* --- Technology + use-case cards ------------------------------------------ */
#main .informations.info-tech,
#main .informations.info-case {
	border: 1px solid var(--hpe-line);
	border-radius: 6px;
}
#main .informations.info-tech .info-tag {
	display: inline-block;
	margin: 0;
	padding: 5px 14px;
	border-radius: 30px;
	background: #E3F5F0;
	color: var(--hpe-deep);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* col-4 stays 50% wide on phones; without these the pill runs past the card */
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
}
#main .informations.info-case .info-kicker {
	margin-bottom: 10px;
	color: var(--hpe-green);
	font-size: 14px;
	font-weight: 700;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
	#main .hpe-ai { padding: 20px 15px 15px 15px; }
}

/* Responsive columns.
   responsive-lp.css writes its mobile column overrides as `width: 50%`, but
   Bootstrap 4 sizes columns with flex-basis + max-width, so those overrides
   never apply and every grid stays at its desktop count all the way down to
   375px -- product titles truncate to two words and prices clip. Restating
   them as flex properties is what actually makes the grids respond. */
@media (max-width: 768px) {
	#main .item-grid .col-3,
	#main .item-grid .col-4 {
		-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%;
	}
}

@media (max-width: 640px) {
	#main .item-grid .col-4,
	#main .item-grid .col-6,
	#main .item-grid .col-8 {
		-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%;
	}
	/* pillar cards are short enough to stay paired */
	#main .item-grid .col-3 {
		-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%;
	}
}

@media (max-width: 640px) {
	#main .item-grid .col-8 { width: 100%; }
	/* "See Availability" is wider than a half-width col-4 card at 375px and
	   pushes the page 21px past the viewport. Let it fill and wrap instead. */
	#main .item-grid .item-action .btn-blue,
	#main .informations .info-action .btn-blue {
		display: block;
		box-sizing: border-box;
		max-width: 100%;
		padding: 10px 6px;
		font-size: 14px;
		white-space: normal;
		text-align: center;
	}
	#main #hero .hero-desktop { display: none; }
	#main #hero .hero-mobile { display: block; margin: 0 auto; }
	#main .section-intro .hpe-chips li { padding: 7px 16px; font-size: 14px; }
	#main .informations.info-pillar .info-img { width: 80px; }
	#main .informations.info-tech .info-tag { padding: 6px 10px; font-size: 14px; }
	/* col-3 pillars sit 2-across at 375px; trim the gutter and type so the
	   longest label ("Better Experience") stays inside its card. */
	#main .informations.info-pillar { padding-left: 8px; padding-right: 8px; }
	#main .informations.info-pillar .info-title { font-size: 15px; word-wrap: break-word; }
	#main .informations.info-pillar ul li { font-size: 14px; }
}

/* ==========================================================================
   REVISIONS
   ========================================================================== */

/* --- 2. Bold headings ----------------------------------------------------- */
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
#main .section-title span,
#main .section-intro h3,
#main .section-intro h4,
#main .informations .info-title,
#main .section-table th,
#main .hpe-ai .hpe-ai-pn { font-weight: 700; }

/* --- 3. Equal column heights ---------------------------------------------
   .row is already a flex container, but .items sizes to its own content, so
   neighbouring cards end at different depths. Stretching the column and
   letting .items grow squares every row off. Making .items a column flexbox
   additionally pins each card's CTA to the bottom, so buttons line up too. */
#main .item-grid .row {
	-ms-flex-align: stretch;
	align-items: stretch;
}
#main .item-grid .col-3,
#main .item-grid .col-4,
#main .item-grid .col-6,
#main .item-grid .col-8,
#main .item-grid .col-12 { display: -ms-flexbox; display: flex; }

#main .item-grid .items {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
}
#main .item-grid .items > .item-group-right { margin-top: auto; }
#main .informations .group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
#main .informations .info-action { margin-top: auto; }
/* inline-block becomes a stretched flex item inside the column layout above,
   so the pill would span the whole card unless it opts out */
#main .informations .info-tag {
	margin-top: auto !important;
	-ms-flex-item-align: start;
	align-self: flex-start;
}
#main .informations .info-action {
	-ms-flex-item-align: start;
	align-self: flex-start;
}

/* --- 4. Pill buttons, sentence-case labels -------------------------------- */
.btn-blue,
#main .section-action .btn,
#main .section-action .btn.btn-hpe,
#main .item-grid .item-action .btn-blue,
#main .informations .info-action .btn-blue {
	border-radius: 50px;
	text-transform: none;
}
a.btn-blue2 { background-color:#012D6B !important; }
a.btn-blue2:hover { background-color:#333; }

/* --- 6. 14px minimum type -------------------------------------------------
   The template runs 11-13px in several places (grid columns, product bullets,
   spec tables). Everything is lifted to a 14px floor. */
#main .item-grid .col-3,
#main .item-grid .col-4,
#main .item-grid .col-6,
#main .item-grid .col-8,
#main .item-grid .col-12 { font-size: 14px; }

#main .item-grid .item-bullet ul { height: auto; }
#main .item-grid .item-bullet li {
	max-height: none;
	height: auto;
	min-height: 22px;
	line-height: 22px;
	font-size: 14px;
}
#main .section-table,
#main .section-table th,
#main .section-table td { font-size: 14px; }
#main .section-disclaimer { font-size: 14px; }
#main .informations p,
#main .informations ul li,
#main .informations ol li { font-size: 14px; }
#main .informations .info-title { font-size: 16px; }
#main .section-action .hero-note { font-size: 16px; font-weight:bold; }
#main .informations.info-tech .info-tag { font-size: 14px; padding: 6px 14px; }
#main .informations.info-case .info-kicker { font-size: 14px; }
#main .informations.info-pillar ul li { font-size: 14px; }
#main .section-intro .hpe-chips li { font-size: 14px; }
#main .hpe-ai .hpe-ai-pn { font-size: 15px; }
#main .hpe-ai .hpe-spec-table th,
#main .hpe-ai .hpe-spec-table td { font-size: 14px; }
#main .hpe-ai .hpe-ai-foot { font-size: 14px; }