@media (max-width: 550px) {
  .section-split {
    grid-template-columns: 1fr;
  }
}@media (max-width: 550px) {
  .section-split {
    grid-template-columns: 1fr;
  }
}



@font-face {
  font-family: "IntelOne Display";
  src: url("../fonts/intelone-display-latin-light.e8ee702d.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntelOne Display";
  src: url("../fonts/intelone-display-latin-regular.7d30ccfa.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntelOne Display";
  src: url("../fonts/intelone-display-latin-medium.38e8d51a.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntelOne Display";
  src: url("../fonts/intelone-display-latin-bold.1e07e246.woff2") format("woff2"),
   url("../fonts/IntelOneDisplay-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IntelOne Display Heading";
  src: url("../fonts/intelone-headline-bolditalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* template.css overrides -- use only when absolutely necessary
================================*/
.banner {padding-top:89.667%;}
.banner-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 641px;
background: url(../imgs/hero.jpg) no-repeat 0 0;
background-size:289.722222%;
}
.header2021-logo-img > img{
  width:102px !important;
  height:auto;
}

.price{margin:0 0 0.825em 0;}
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:#cc4e00;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:19px solid #cc4e00;border-right: 10px solid transparent;margin-bottom:0;}
.price-save-label{padding:0 0 1px 6px}
.price-save-dollar{padding:0 0 1px 2px}
.price-save-percent{padding:0 6px 1px 2px}
.price-save-label:before,.price-save-percent:after{content:'';position:absolute;bottom:0;width:0;height:0;}
.item-cell{border-bottom:none;}
.item-promo{margin-top:1em;}
.item-promo-code{border-color:#888;}
.item-promo-title span{color:#333;}
.item-promo-info{color:#cc4e00;}
.item-promo-code{padding:1.5em 5px 1em 5px;height:auto;color:#cc4e00;}
.item-promo-code-save{display:inline;}
li.mir{display:none;}
.instantSavings, .mir{display:block;}
.finalPrice{font-size:1.6em;}
.instantSavings{font-size:0.925em}
.finalPrice, .instantSavings {color:#000;}
.shipping{visibility:hidden;}
.mir{font-size:1em;margin:0;color:#016B04}
.header .logo { width:125px; }
.items-grid:after { background:none; }
.item-title a { font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; color:#000; }
.font-s {
    font-size: 12px;
    line-height: 16px;
    color: #2d2d2d;
}
/* No Orange Bar for Custom LPs with Black Background
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:none;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:none;border-right: 10px solid transparent;margin-bottom:0;}
================================*/


/* From Intel
================================*/

html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar { display: none; } /* Chrome/Safari */

html, body {
  background: #000;
  color: #fff;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: #000;
}

section {
  position: relative;
  width: 100%;
  container-type: inline-size;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  overflow: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
sup { font-size: 0.55em; vertical-align: super; line-height: 0; }

/* ========== shared CTA button ========== */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #4a3aff 0%, #a923f1 100%);
  color: #fff;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  text-align: center;
}

/* IntelOne Headline Bold Italic — heavy italic display face used for every
   big section heading in the Figma file. Archivo Black is the closest free
   match available on Google Fonts (similar geometric letterforms, same heavy
   weight). Falls back to a synthesised italic of Inter Black if needed. */
.s1-heading,
.s2-heading,
.s3-heading,
.s3b-heading,
.s4-heading,
.s5-heading,
.s6-heading,
.s7-heading,
.s8-heading,
.s9-heading {
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

/* ===================================================================
   DESKTOP  (default: up to 1440)
   All positions in % / cqw derived from a 1440-wide design.
   =================================================================== */

/* ---------- Section 1 — hero ---------- */
.s1 {
  aspect-ratio: 1440 / 1400;
  background-image: url("../imgs/Spring Desktop Header 1_Background.png");
}
.s1-heading {
  position: absolute;
  left: 10.55cqw;       /* 152/1440 */
  top: 4.6cqw;          /* 70/1440 */
  width: 53.1cqw;       /* 765/1440 */
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.s1-heading .l1 { font-size: 9.93cqw; font-style: italic; }     /* 143 */
.s1-heading .l2 {
  font-size: 6.88cqw;                        /* 99  */
  padding-left: 10.2cqw; font-style: italic;                    /* 147 */
}
.s1-heading .l3 { font-size: 10.9cqw; font-style: italic; }     /* 157 */
.s1-sub {
  position: absolute;
  left: 6.46cqw;        /* 93 */
  top: 78.91cqw;        /* 1133/1440 * 100 + 65px */
  width: 87cqw;         /* 1253/1440 */
  font-size: 3.125cqw;  /* 45 */
  line-height: 1.55;
  text-align: center;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s1-sub strong { font-weight: 700; }
.cta-lg {
  height: 3.96cqw;      /* 57 */
  font-size: 1.74cqw;   /* 25 */
  padding: 0 1.6cqw;
}
.s1 .cta-lg {
  position: absolute;
  left: 50%;
  top: 91.94cqw;        /* 1324/1440 */
  width: 22.95cqw;      /* 330 */
  transform: translateX(-50%);
}
.s1-offer {
  position: absolute;
  left: 0; right: 0;
  top: 99.3cqw;         /* 1430 */
  text-align: center;
  font-size: 1.39cqw;   /* 20 */
}

/* ---------- Section 2 — Build the legacy ---------- */
.s2 {
  aspect-ratio: 1440 / 577;
  background-image: url("../imgs/Spring Desktop Section 2_Background.png");
}
.s2-heading {
  position: absolute;
  left: 6.25cqw;        /* 90 */
  top: 6.1cqw;          /* (1611-1523)/1440 */
  width: 75cqw;
  font-size: 5.2cqw;    /* 75 */
  line-height: 1;
}
.s2-body {
  position: absolute;
  left: 6.25cqw;
  top: 18.21cqw;        /* (1805-1523)/1440 - 20px */
  width: 32.6cqw;       /* 469 */
  font-size: 1.39cqw;   /* 20 */
  line-height: 1.25;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s2 .cta {
  position: absolute;
  left: 6.25cqw;
  top: 28.71cqw;        /* (1956-1523)/1440 - 20px */
  width: 15.625cqw;     /* 225 */
  height: 3.96cqw;
  font-size: 1.74cqw;   /* 25 */
}

/* ---------- Section 3 — The offer + Win on performance ---------- */
.s3 {
  aspect-ratio: 1440 / 1832;
  background-image: url("../imgs/Spring Desktop Section 3_Background.png");
}
/* Wrapper div carries the border + glow, matching Figma's rounded-rectangle
   structure. The section has overflow:hidden so we use overflow:visible on
   the wrapper so the glow isn't clipped. */
.s3-thumb {
  position: absolute;
  left: 8.9cqw;         /* 128 */
  top: 13.68cqw;        /* (2297-2100)/1440 */
  width: 43.05cqw;      /* 620 */
  height: 42.98cqw;     /* 619 */
  overflow: visible;
}
.s3-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s3-heading {
  position: absolute;
  left: 59.72cqw;       /* 860 */
  top: 18.96cqw;        /* (2373-2100)/1440 */
  width: 34.5cqw;       /* 497 */
  font-size: 5.9cqw;    /* 85 */
  line-height: 1.1;
}
.s3-sub {
  position: absolute;
  left: 59.72cqw;
  top: 27.93cqw;        /* (2502-2100)/1440 */
  width: 34.5cqw;
  font-size: 2.98cqw;   /* 43 */
  line-height: 1.25;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s3-cta {
  position: absolute;
  left: 59.72cqw;
  top: 49.79cqw;        /* (2817-2100)/1440 */
  width: 15.625cqw;
}
.s3b-heading {
  position: absolute;
  left: 6.46cqw;        /* 93 */
  top: 76.32cqw;        /* (3359-2100)/1440 - 160px */
  width: 43.3cqw;       /* 624 */
  font-size: 5.2cqw;    /* 75 */
  line-height: 1;
}
.s3b-body {
  position: absolute;
  left: 6.46cqw;
  /* Anchored from bottom so expanded copy never bleeds into section 4 */
  bottom: 4.17cqw;      /* 60px breathing room above section 4 */
  width: 40.1cqw;       /* 578 */
  font-size: 1.39cqw;   /* 20px */
  line-height: 1.2;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s3b-body p { margin-bottom: 1.2em; }
.s3b-body p:last-child { margin-bottom: 0; }

/* ---------- Section 4 — Immersive and responsive play ---------- */
.s4 {
  aspect-ratio: 1440 / 764;
  background-image: url("../imgs/Spring Desktop Section 4_Background.png");
}
.s4-heading {
  position: absolute;
  left: 52.5cqw;        /* 756 */
  top: 8.82cqw;         /* (4059-3932)/1440 */
  width: 43.05cqw;      /* 620 */
  font-size: 5.2cqw;
  line-height: 1;
}
.s4-body {
  position: absolute;
  left: 52.5cqw;
  top: 23.3cqw;         /* (4268-3932)/1440 */
  width: 42.57cqw;      /* 613 */
  font-size: 1.39cqw;
  line-height: 1.25;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s4-body ul { padding-left: 1.3em; margin: 0.75em 0; }
.s4-body li { margin: 0.6em 0; }

/* ---------- Section 5 — Ultra Multitasking ---------- */
.s5 {
  aspect-ratio: 1440 / 725;
  background-image: url("../imgs/Spring Desktop Section 5_Background.png");
}
.s5-heading {
  position: absolute;
  left: 6.46cqw;
  top: 6.11cqw;         /* (4784-4696)/1440 */
  width: 48.96cqw;      /* 705 */
  font-size: 5.2cqw;
  line-height: 1;
  padding-left: 0;
}
.s5-body {
  position: absolute;
  left: 6.46cqw;
  top: 19.52cqw;        /* (4977-4696)/1440 */
  width: 39.3cqw;       /* 566 */
  font-size: 1.39cqw;
  line-height: 1.25;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Section 6 — Unlock the offer (instructions) ---------- */
.s6 {
  aspect-ratio: 1440 / 1448;
  background-image: url("../imgs/Spring Desktop Section 7_Background.png");
}
.s6-heading {
  position: absolute;
  left: 50%;
  top: 8.6cqw;          /* (5545-5421)/1440 */
  transform: translateX(-50%);
  font-size: 5.9cqw;    /* 85 */
  line-height: 1.1;
  text-align: center;
  width: 59.5cqw;       /* 856 */
}
.s6-sub {
  position: absolute;
  left: 6.46cqw;
  top: 18.19cqw;        /* (5683-5421)/1440 */
  width: 87cqw;
  font-size: 2.98cqw;   /* 43 */
  line-height: 1.25;
  text-align: center;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}
.s6-sub strong { font-weight: 700; }
.steps {
  position: absolute;
  left: 12.08cqw;       /* 174 */
  top: 32.78cqw;        /* (5893-5421)/1440 */
  width: 75.5cqw;       /* 1087 */
  list-style: none;
  font-size: 2.22cqw;   /* 32 */
  /* IntelOne Display renders at ~70px per line at 32px (line-height ≈ 2.19).
     Using 2.2 so our fallback Inter/Archivo matches Figma's step block height. */
  line-height: 2.35;
}
.steps li {
  display: flex;
  gap: 1.75cqw;
  /* Figma gap between step frames: 28px = 1.94cqw */
  margin-bottom: 3.33cqw; /* 48px */
}
.steps li:nth-child(2), .steps li:nth-child(3) { line-height: 1.2; }
.steps .num {
  flex: 0 0 1.9cqw;
  font-weight: 400;
}
.steps .txt { flex: 1; font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif; }
.steps a { text-decoration: none; }
.s6-foot {
  position: absolute;
  left: 8.61cqw;
  right: 9.1cqw;
  /* Anchor from bottom so it always stays near the section base
     regardless of how the steps wrap with the fallback font.
     Figma: section h=1448, footnote top=1389 → 59px from bottom = 4.1cqw */
  bottom: 5.49cqw; /* +20px */
  text-align: center;
  font-size: 1.67cqw;   /* 24 */
  line-height: 1.25;
}

/* ---------- Section 7 — Select your qualifying product ---------- */
.s7 {
  aspect-ratio: 1440 / 569;
  background-image: url("../imgs/Spring Desktop Section 8_Background.png");
  color: #00031a;
}
.s7-heading {
  position: absolute;
  left: 0; right: 0;
  top: 4.17cqw;         /* (6917-6857)/1440 */
  text-align: center;
  color: #00031a;
  font-size: 4.17cqw;   /* 60 */
  line-height: 1;
}
.cards {
  position: absolute;
  left: 9.375cqw;       /* 135 */
  right: 9.375cqw;
  top: 7.71cqw;         /* (6968-6857)/1440 */
  display: flex;
  justify-content: space-between;
  gap: 4cqw;
}
.card {
  width: 21.3cqw;       /* 307 */
  height: 30.28cqw;     /* 436 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.45cqw;
  padding: 1.3cqw 0.9cqw;
  color: #00031a;
}
.card img {
  width: 17.78cqw;      /* 256 */
  height: 12.08cqw;     /* 174 */
  object-fit: contain;
}
.card h3 {
  font-size: 1.67cqw;   /* 24 */
  font-weight: 500;
  text-align: center;
  color: #00031a;
}
.card p {
  font-size: 1.11cqw;   /* 16 */
  text-align: center;
  color: #00031a;
}
.cta-sm {
  width: 15.625cqw;     /* 225 */
  height: 2.85cqw;      /* 41 */
  font-size: 1.67cqw;   /* 24 */
}

/* ---------- Section 8 — Unleash AI ---------- */
.s8 {
  aspect-ratio: 1440 / 1213;
  background-image: url("../imgs/Spring Desktop Section 6_Background.png");
}
.s8-heading {
  position: absolute;
  left: 0; right: 0;
  top: 6.67cqw;         /* (7522-7426)/1440 */
  font-size: 5.2cqw;    /* 75 */
  text-align: center;
  line-height: 1;
}
.s8-body {
  position: absolute;
  left: 3.47cqw;        /* 50 */
  right: 3.47cqw;
  top: 14.58cqw;        /* (7636-7426)/1440 */
  font-size: 1.39cqw;
  line-height: 1.25;
  text-align: center;
  font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Section 9 — That's the power of Intel Inside ---------- */
.s9 {
  aspect-ratio: 1440 / 1544;
  background-image: url("../imgs/Spring Desktop Section 9_Background.png");
}
.s9-heading {
  position: absolute;
  left: 0; right: 0;
  top: 7.29cqw;         /* (8744-8639)/1440 */
  font-size: 8.89cqw;   /* 128 */
  text-align: center;
  line-height: 0.9;      /* Figma: leading-[0.9] */
  letter-spacing: 0.089cqw; /* 1.28px */
}
.s9-batman {
  position: absolute;
  left: 32.57cqw;       /* calc(25%+109px) = 469px */
  top: 24.58cqw;        /* (8993-8639)/1440 */
  width: 26.6cqw;       /* 383 */
  height: 14.72cqw;     /* 212 */
  object-fit: contain;
}
.s9-rating {
  position: absolute;
  left: 62.01cqw;       /* 893 */
  top: 29.8cqw;         /* (9068-8639)/1440 */
  width: 4.44cqw;       /* 64 */
  height: 6.18cqw;      /* 89 */
  object-fit: contain;
}
.s9-legal {
  position: absolute;
  left: 10.03cqw;       /* (1440-1151)/2 = 144.5px */
  right: 10.03cqw;
  top: 41.8cqw;         /* (9241-8639)/1440 */
  text-align: center;
  font-size: 1.39cqw;   /* 20 */
  line-height: 1;        /* Figma: leading-none */
  overflow-wrap: break-word;
  word-break: break-word;
}
.s9-legal p { margin-bottom: 1.4em; font-family: "IntelOne Display", "Helvetica Neue", Arial, sans-serif;}
.s9-legal p:last-child { margin-bottom: 0; }
.s9-legal a { text-decoration: underline; overflow-wrap: break-word; word-break: break-all; }
.s9-gaming {
  position: absolute;
  left: 50%;
  top: 98.63cqw;        /* (10038-8639)/1440 + 25px */
  width: 24.95cqw;      /* 359 */
  height: 4.37cqw;      /* 63 */
  transform: translateX(-50%);
  object-fit: contain;
}

.btn-primary, .button.button-primary, .ngg-shopall, .ngg-buynow {
    text-transform: none;
    font-family: var(--ngg-opensans);
    border: 0;
    background: linear-gradient(90deg, #4a3aff 0%, #a923f1 100%);
    color: #000;
}
.btn-primary, .button.button-primary {
    border-color: #c60;
    background: linear-gradient(90deg, #4a3aff 0%, #a923f1 100%);
}
.ngg-shopall, .ngg-buynow {
    border-radius: 30px;
    text-align: center;
    transition: 0.5s;
    font-weight: 700;
    font-family: var(--ngg-opensans);
	font-size: 18px;
    padding: 15px 8%;
	color: #fff;
 }

/* ===================================================================
   TABLET  (≤ 1024px)
   Positions derived from the 1024-wide Figma frame.
   =================================================================== */
@media (max-width: 1024px) {

  /* ---------- S1 hero ---------- */
  .s1 {
    aspect-ratio: 1024 / 1366;
    background-image: url("../imgs/Spring Tablet Header 1_Background.png");
  }
  .s1-heading {
    left: 10.06cqw;     /* 103 */
    top: 5.08cqw;       /* 52 */
    width: 74.7cqw;     /* 765 */
  }
  .s1-heading .l1 { font-size: 11.72cqw; }            /* 120 */
  .s1-heading .l2 { font-size: 9.67cqw; padding-left: 14.35cqw; } /* 99 */
  .s1-heading .l3 { font-size: 12.11cqw; }            /* 124 */
  .s1-sub {
    left: 6.05cqw;      /* 62 */
    top: 99.5cqw;       /* 1019/1024 * 100 */
    width: 89.75cqw;    /* 919 */
    font-size: 3.52cqw; /* 36 */
    text-align: center;
  }
  .s1 .cta-lg {
    top: 115.33cqw;     /* 1181 */
    width: 20.6cqw;     /* 211 */
    height: 5.18cqw;    /* 53 */
    font-size: 2.64cqw; /* 27 */
  }
  .s1-offer {
    top: 124.2cqw;      /* 1272 */
    font-size: 1.95cqw; /* 20 */
  }

  /* ---------- S2 Build the legacy ---------- */
  .s2 {
    aspect-ratio: 1024 / 423;
    background-image: url("../imgs/Spring Tablet Section 2_Background.png");
  }
  .s2-heading {
    left: 6.64cqw;      /* 68 */
    top: 4.88cqw;       /* (1416-1366)/1024 */
    width: 55.57cqw;
    font-size: 6.84cqw; /* 70 */
    line-height: 1;
  }
  .s2-body {
    left: 6.05cqw;
    top: 22.1cqw;       /* pushed down to clear 2-line Archivo heading - 40px */
    width: 39.06cqw;    /* 400 */
    font-size: 1.56cqw; /* 16 */
    line-height: 1.25;
  }
  .s2 .cta {
    left: 6.05cqw;
    top: 33.33cqw;      /* -10px */
    width: 16.7cqw;     /* 171 */
    height: 4.2cqw;     /* 43 */
    font-size: 1.85cqw; /* 19 */
  }

  /* ---------- S3 The offer + Win on performance ---------- */
  .s3 {
    aspect-ratio: 1024 / 1193;
    background-image: url("../imgs/Spring Tablet Section 3_Background.png");
  }
  .s3-thumb {
    left: 13.67cqw;     /* 140 */
    top: 14.65cqw;      /* (1924-1789)/1024 + 15px */
    width: 33.7cqw;     /* 345 */
    height: 33.7cqw;
  }
  .s3-heading {
    left: 59.47cqw;     /* 609 */
    top: 17.09cqw;      /* (1964-1789)/1024 */
    width: 33.1cqw;     /* 339 */
    font-size: 6.84cqw; /* 70 */
  }
  .s3-sub {
    left: 59.47cqw;
    top: 26.37cqw;      /* (2059-1789)/1024 */
    width: 33.1cqw;
    font-size: 2.83cqw; /* 29 */
  }
  .s3-cta {
    left: 59.47cqw;
    top: 42.68cqw;      /* (2226-1789)/1024 */
    width: 16.7cqw;
    height: 4.2cqw;
    font-size: 1.85cqw;
    padding: 0;
    transform: none;
  }
  .s3b-heading {
    left: 7.32cqw;      /* 75 */
    top: 55.96cqw;      /* -15px */
    width: 38.09cqw;    /* 390 */
    font-size: 5.57cqw; /* 57 */
  }
  .s3b-body {
    left: 7.32cqw;
    top: auto;
    bottom: 5.37cqw;    /* +15px */
    width: 34.47cqw;    /* 353 */
    font-size: 1.5625cqw; /* 16px */
    line-height: 1.2;
  }

  /* ---------- S4 Immersive and responsive play ---------- */
  .s4 {
    aspect-ratio: 1024 / 574;
    background-image: url("../imgs/Spring Tablet Section 4_Background.png");
  }
  .s4-heading {
    left: 50cqw;        /* 512 */
    top: 9.76cqw;       /* (3062-2982)/1024 + 20px */
    width: 39.35cqw;    /* 403 */
    font-size: 5.27cqw; /* 54 */
  }
  .s4-body {
    left: 50cqw;
    top: 25.29cqw;      /* (3181-2982)/1024 + 60px */
    width: 45.41cqw;    /* 465 */
    font-size: 1.56cqw; /* 16 */
  }

  /* ---------- S5 Ultra Multitasking ---------- */
  .s5 {
    aspect-ratio: 1024 / 497;
    background-image: url("../imgs/Spring Tablet Section 5_Background.png");
  }
  .s5-heading {
    left: 7.32cqw;      /* aligned with s5-body */
    top: 5.37cqw;       /* (3611-3556)/1024 */
    width: 36.1cqw;     /* 370 */
    font-size: 5.27cqw; /* 54 */
    padding-left: 0;
  }
  .s5-body {
    left: 7.32cqw;
    top: 18.85cqw;      /* (3749-3556)/1024 */
    width: 42.0cqw;     /* 430 */
    font-size: 1.56cqw; /* 16 */
  }

  /* ---------- S6 Unlock the offer ---------- */
  .s6 {
    aspect-ratio: 1024 / 1085;
    background-image: url("../imgs/Spring Tablet Section 7_Background.png");
  }
  .s6-heading {
    left: 50%;
    top: 9.67cqw;       /* (4102-4053)/1024 + 50px */
    transform: translateX(-50%);
    width: 47.6cqw;     /* 487 */
    font-size: 4.69cqw; /* 48 */
    text-align: center;
  }
  .s6-sub {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 17.67cqw;      /* (4184-4053)/1024 + 50px */
    width: 83.69cqw;    /* 857 */
    font-size: 3.13cqw; /* 32 */
    text-align: center;
  }
  .steps {
    left: 6.93cqw;      /* 71 */
    top: 33.49cqw;      /* (4346-4053)/1024 + 50px */
    width: 83.98cqw;    /* 860 */
    font-size: 2.34cqw; /* 24 */
  }
  .steps li { margin-bottom: 4.69cqw; gap: 1.5cqw; }
  .steps li:nth-child(2), .steps li:nth-child(3) { line-height: 1.2; }
  .steps .num { flex: 0 0 2.5cqw; }
  .s6-foot {
    left: 7.91cqw;
    right: auto;
    bottom: 9.66cqw;    /* +20px */
    top: auto;
    width: 82.3cqw;     /* 843 */
    font-size: 2.34cqw; /* 24 */
    text-align: center;
  }

  /* ---------- S7 Select qualifying product ---------- */
  .s7 {
    aspect-ratio: 1024 / 569;
    background-image: url("../imgs/Spring Tablet Section 8_Background.png");
  }
  .s7-heading {
    top: 6.15cqw;       /* (5018-4955)/1024 */
    font-size: 4.3cqw;  /* 44 */
  }
  .cards {
    left: 6.54cqw;      /* 67 */
    right: auto;
    top: 16.11cqw;      /* (5120-4955)/1024 */
    width: 87.4cqw;     /* frame 964 */
    gap: 2cqw;
    display: flex;
    justify-content: space-between;
  }
  .card {
    width: 23.54cqw;    /* 241 */
    height: 33.4cqw;    /* 342 */
    padding: 1cqw 0.6cqw;
    gap: 1cqw;
  }
  .card img {
    width: 25cqw;       /* 256 */
    height: 17cqw;      /* 174 */
  }
  .card h3 {
    font-size: 1.95cqw; /* 20 */
  }
  .card p {
    font-size: 1.37cqw; /* 14 */
  }
  .cta-sm {
    width: 21.97cqw;    /* 225 */
    height: 4.0cqw;     /* 41 */
    font-size: 1.56cqw; /* 16 */
  }

  /* ---------- S8 Unleash AI ---------- */
  .s8 {
    aspect-ratio: 1024 / 876;
    background-image: url("../imgs/Spring Tablet Section 6_Background.png");
  }
  .s8-heading {
    top: 7.03cqw;       /* (5596-5524)/1024 */
    font-size: 5.27cqw; /* 54 */
  }
  .s8-body {
    left: 11.13cqw;     /* 114 */
    right: 11.13cqw;
    top: 14.26cqw;      /* (5670-5524)/1024 */
    font-size: 2.05cqw;
  }

  /* ---------- S9 Intel Inside ---------- */
  .s9 {
    aspect-ratio: 1024 / 1709;
    background-image: url("../imgs/Spring Tablet Section 9_Background.png");
  }
  .s9-heading {
    top: 14.94cqw;      /* (6492-6399)/1024 + 60px */
    font-size: 10.74cqw;/* 110 */
  }
  .s9-batman {
    top: 36.43cqw;      /* centered + 90px */
    width: 29.39cqw;    /* 301 */
    height: 16.31cqw;   /* 167 */
  }
  .s9-rating {
    left: 63.77cqw;     /* 653 */
    top: 41.02cqw;      /* centered + 90px */
    width: 4.88cqw;     /* 50 */
    height: 6.93cqw;    /* 71 */
  }
  .s9-legal {
    left: 10.94cqw;     /* 112 */
    right: 10.94cqw;
    top: 58.69cqw;      /* (6850-6399)/1024 + 150px */
    font-size: 1.76cqw; /* 18 */
  }
  .s9-gaming {
    top: 151.96cqw;     /* (7855-6399)/1024 + 100px */
    width: 32.62cqw;    /* 334 */
    height: 5.66cqw;    /* 58 */
  }
}

/* ===================================================================
   MOBILE  (≤ 600px — design at 402 wide)
   =================================================================== */
@media (max-width: 600px) {

  /* ---------- S1 hero ---------- */
  .s1 {
    aspect-ratio: 402 / 874;
    background-image: url("../imgs/Spring Mobile Header 1_Background.png");
  }
  .s1-heading {
    left: 9.2cqw;       /* 37 */
    top: 4.98cqw;       /* 20px */
    width: 57.46cqw;    /* 231 */
  }
  .s1-heading .l1 { font-size: 14.93cqw; }            /* 60 */
  .s1-heading .l2 { font-size: 9.95cqw; padding-left: 14.93cqw; line-height: 1.1; } /* 40 */
  .s1-heading .l3 { font-size: 15.92cqw; }            /* 64 */
  .s1-sub {
    left: 3.23cqw;      /* 13 */
    top: 159cqw;        /* 639/402 */
    width: 93.5cqw;     /* 376 */
    font-size: 3.98cqw; /* 16 */
    line-height: 1.35;
    text-align: center;
  }
  .s1 .cta-lg {
    top: 186.82cqw;     /* 751 */
    width: 31.59cqw;    /* 127 */
    height: 7.96cqw;    /* 32 */
    font-size: 3.98cqw; /* 16 */
  }
  .s1-offer {
    top: 201cqw;        /* 808 */
    font-size: 3.73cqw; /* 15 */
  }

  /* ---------- S2 Build the legacy ---------- */
  .s2 {
    aspect-ratio: 402 / 669;
    background-image: url("../imgs/Spring Mobile Section 2_Background.png");
  }
  .s2-heading {
    left: 0;
    top: 10.95cqw;      /* (918-874)/402 */
    width: 100%;
    font-size: 11.94cqw; /* 48 */
    text-align: center;
  }
  .s2-body {
    left: 9.2cqw;
    top: 41.81cqw;      /* (982-874)/402 + 60px */
    width: 81.59cqw;    /* 328 */
    font-size: 3.48cqw; /* 14 */
    line-height: 1.35;
    text-align: center;
  }
  .s2 .cta {
    left: 50%;
    transform: translateX(-50%);
    top: 66.42cqw;      /* (1076-874)/402 + 65px */
    width: 31.59cqw;    /* 127 */
    height: 7.96cqw;    /* 32 */
    font-size: 3.98cqw; /* 16 */
  }

  /* ---------- S3 The offer + Win on performance ---------- */
  .s3 {
    aspect-ratio: 402 / 1474;
    background-image: url("../imgs/Spring Mobile Section 3_Background.png");
  }
  .s3-heading {
    left: 50%;
    transform: translateX(-50%);
    top: 7.96cqw;       /* (1575-1543)/402 */
    width: 84.33cqw;
    font-size: 11.94cqw; /* 48 */
    text-align: center;
  }
  .s3-thumb {
    left: 22.39cqw;     /* 90 */
    top: 29.6cqw;       /* (1662-1543)/402 */
    width: 54.98cqw;    /* 221 */
    height: 54.98cqw;
  }
  .s3-sub {
    left: 7.96cqw;      /* 32 */
    top: 89.55cqw;      /* (1903-1543)/402 */
    width: 84.33cqw;
    font-size: 5.97cqw; /* 24 */
    text-align: center;
  }
  .s3-cta {
    left: 50%;
    transform: translateX(-50%);
    top: 124.13cqw;     /* (2042-1543)/402 */
    width: 42.54cqw;    /* 171 */
    height: 10.70cqw;   /* 43 */
    font-size: 4.73cqw; /* 19 */
    padding: 0;
  }
  .s3b-heading {
    left: 11.19cqw;     /* 45 */
    top: 241.29cqw;     /* +15px */
    width: 84.33cqw;
    font-size: 9.45cqw; /* 38 */
  }
  .s3b-body {
    left: 11.19cqw;
    top: auto;
    bottom: 12.44cqw;   /* +15px */
    width: 77.61cqw;    /* 312 */
    font-size: 3.48cqw; /* 14px */
    line-height: 1.2;
  }

  /* ---------- S4 Immersive and responsive play ---------- */
  .s4 {
    aspect-ratio: 402 / 860;
    background-image: url("../imgs/Spring Mobile Section 4_Background.png");
  }
  .s4-heading {
    left: 11.19cqw;
    top: 103.48cqw;     /* (3383-3017)/402 + 50px */
    width: 79.6cqw;     /* 320 */
    font-size: 9.95cqw; /* 40 — max for 2-line break */
  }
  .s4-body {
    left: 11.94cqw;     /* 48 */
    top: 132.08cqw;     /* -20px */
    width: 79.85cqw;    /* 321 */
    font-size: 3.23cqw; /* 13 */
    line-height: 1.35;
  }

  /* ---------- S5 Ultra Multitasking ---------- */
  .s5 {
    aspect-ratio: 402 / 927;
    background-image: url("../imgs/Spring Mobile Section 5_Background.png");
  }
  .s5-heading {
    left: 11.94cqw;
    top: 10.45cqw;      /* (3919-3877)/402 */
    width: 92.04cqw;    /* 370 */
    font-size: 11.94cqw; /* 48 */
    padding-left: 0;
  }
  .s5-body {
    left: 11.94cqw;
    top: 40.05cqw;      /* +10px */
    width: 74.38cqw;    /* 299 */
    font-size: 3.48cqw;
    line-height: 1.35;
  }

  /* ---------- S6 Unlock the offer ---------- */
  .s6 {
    aspect-ratio: 402 / 1116;
    background-image: url("../imgs/Spring Mobile Section 7_Background.png");
  }
  .s6-heading {
    left: 50%;
    top: 22.89cqw;      /* +20px */
    transform: translateX(-50%);
    width: 90cqw;
    font-size: 9.95cqw; /* 40 */
    text-align: center;
  }
  .s6-sub {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 42.54cqw;      /* +20px */
    width: 88cqw;
    font-size: 4.98cqw; /* 20 */
    text-align: center;
  }
  .steps {
    left: 10.95cqw;     /* 44 */
    top: 87.06cqw;      /* 350px */
    width: 83.08cqw;    /* 334 */
    font-size: 3.98cqw; /* 16 */
    line-height: 1.4;
  }
  .steps li { margin-bottom: 10.75cqw; gap: 1.5cqw; }
  .steps .num { flex: 0 0 4cqw; }
  .s6-foot {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 26.65cqw;   /* +40px */
    top: auto;
    width: 72.89cqw;    /* 293 */
    font-size: 3.98cqw; /* 16 */
    text-align: center;
  }

  /* ---------- S7 Select qualifying product ---------- */
  .s7 {
    aspect-ratio: 402 / 1405;
    background-image: url("../imgs/Spring Mobile Section 8_Background.png");
  }
  .s7-heading {
    left: 14.43cqw;     /* 58 */
    right: auto;
    top: 12.94cqw;      /* (5704-5652)/402 */
    width: 71.14cqw;    /* 286 */
    text-align: center;
    font-size: 9.95cqw; /* 40 */
    line-height: 1.1;
  }
  .cards {
    left: 20.15cqw;     /* 81 */
    right: auto;
    top: 51.99cqw;      /* (5861-5652)/402 */
    width: 59.95cqw;    /* 241 */
    flex-direction: column;
    gap: 14.68cqw;      /* (6262-5861-342)/402 ≈ 14.68 */
  }
  .card {
    width: 59.95cqw;    /* 241 */
    height: 85.07cqw;   /* 342 */
    padding: 2cqw;
    gap: 2cqw;
  }
  .card img {
    width: 63.68cqw;    /* 256 */
    height: 43.28cqw;   /* 174 */
  }
  .card h3 { font-size: 4.98cqw; }
  .card p { font-size: 3.48cqw; }
  .cta-sm {
    width: 55.97cqw;    /* 225 */
    height: 10.2cqw;    /* 41 */
    font-size: 3.98cqw;
  }

  /* ---------- S8 Unleash AI ---------- */
  .s8 {
    aspect-ratio: 402 / 612;
    background-image: url("../imgs/Spring Mobile Section 6_Background.png");
  }
  .s8-heading {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 13.44cqw;      /* +20px */
    width: 80cqw;
    font-size: 11.94cqw; /* 48 */
    text-align: center;
  }
  .s8-body {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 43.53cqw;      /* (7232-7057)/402 */
    width: 89.8cqw;     /* 361 */
    font-size: 3.48cqw;
    line-height: 1.35;
    text-align: center;
  }

  /* ---------- S9 Intel Inside ---------- */
  .s9 {
    aspect-ratio: 402 / 1886;
    background-image: url("../imgs/Spring Mobile Section 9_Background.png");
  }
  .s9-heading {
    left: 11.44cqw;     /* 46 */
    right: auto;
    top: 10.7cqw;       /* +15px */
    width: 77.11cqw;    /* 310 */
    font-size: 9.95cqw; /* 40 */
    text-align: center;
    transform: none;
  }
  .s9-batman {
    left: 18.91cqw;     /* centered group: (402-250)/2 = 76px */
    transform: none;
    top: 42.05cqw;      /* -5px */
    width: 50.75cqw;    /* 204 */
    height: 28.11cqw;   /* 113 */
  }
  .s9-rating {
    left: 72.14cqw;     /* 76+204+10 = 290px */
    transform: none;
    top: 49.89cqw;      /* -5px */
    width: 8.96cqw;     /* 36 */
    height: 12.44cqw;   /* 50 */
  }
  .s9-legal {
    left: 8.71cqw;      /* 35 */
    right: 8.96cqw;
    top: 73.14cqw;      /* +60px */
    font-size: 3.48cqw; /* 14 */
    line-height: 1.4;
    text-align: center;
  }
  .s9-gaming {
    left: 50%;
    top: 448.51cqw;     /* 50px from bottom */
    width: 46.77cqw;    /* 188 */
    height: 8.21cqw;    /* 33 */
  }
}
scroll-behavior: smooth;
/* custom CSS on a per project basis
================================*/
body { background-color:#000; }
.ngg-line { /*background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(153,153,153,1) 50%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); height:1px; */
}
.combo-items li:nth-child(odd) { background:transparent; }
.combo-items li { color:white; font-weight:bold; }
.disclaimer {     
    color: #3a3a3a;
    width: 100%;
    text-align: center;
    margin: 0;
    background-color: #ffffff;
    line-height: 30px;
 }

.ngg-section { position:relative; color:#fff; }
.ngg-text-left { position:absolute; top:0; left:0; padding:5%; max-width:500px; }
.ngg-text-right { position:absolute; top:0; right:0; padding:5%; max-width:500px; }

.ngg-sect2 { background:url('../imgs/section2dsk.jpg') no-repeat; background-size:cover; padding-top:52.38%; max-height:716px; }
.ngg-sect3 { background:url('../imgs/section3dsk.jpg') no-repeat; background-size:cover; padding-top:53.44%; max-height:731px; }
.ngg-sect4 { background:url('../imgs/section4dsk.jpg') no-repeat; background-size:cover; padding-top:60.75%; max-height:846px; }
.ngg-sect5 { background:url('../imgs/section5dsk.jpg') no-repeat; background-size:cover; padding-top:53.00%; max-height:736px; }

.ngg-btn { margin:3% 0 0; max-width:180px; }
.ngg-btn a { padding:8px 16px; border:2px solid #fff; font-size:2.5rem; font-weight:700; transition:1s; }
.ngg-btn a:hover { background:#fff; color:#000; transition:0.8s; }
.ngg-seebtn { font-size:14px; width:100%; max-width:180px; }

.ngg-all-skus { padding:0; }
.ngg-sku { display:flex; justify-content:space-around; margin:5% auto; }
.ngg-sku-title { text-align:center; color:#000; font-weight:700; font-size:3rem; padding:3% 0 3%; }
.ngg-add { padding:15px 0; }

.disclaimer2 { color:#3a3a3a; text-align:left; font-size:12px; padding:0 3% 3%; line-height: 24px; }

.main-title {
    position: relative;
    margin: 1.5em 5%;
    color: #000;
    font-size: 1.2em;
	text-transform:none;
 text-align: center;
    font-family: 'IntelOne Display', 'Open Sans Condensed', 'Helvetica Narrow', arial, helvetica, sans-serif;
}
.section-inner {
    background-color: #ffffff;
}








/* responsive CSS on a per project basis
================================*/


@media only screen and (max-width: 768px) {
  /* insert responsive CSS for tablet screens below 768px */
}

@media only screen and (max-width: 550px) {
	/* insert responsive CSS for mobile screens below 550px */
  .items-grid .item-cell { width:90%; text-align:center; border-bottom:1px solid #333; padding-bottom:8%; }
  .item-img > img { max-width:300px; }
  .items-grid .item-title { height:auto; }
    .ngg-sku { flex-direction:column-reverse; margin-top:10%; }

	
	.section-performance .headline
 {
 font-size:50px;  
}

.section-performance .body-text {
  text-align: center;
  color:#ffffff;
  font-size:16px;
  
}

.section-performance .bullet-list {
  font-size:16px;
}


.section-split .headline {
    text-align: left;
    color: #ffffff;
    font-size: 50px;
    
}


 .section-ai {
    align-items: flex-start;
    padding-top: 20px;
    background-position: center 70%;
  }

  .section-ai-inner {
    padding-top: 10px;
  }

  .section-ai .headline {
    font-size: 28px;
  }

  .section-ai .body-text {
    font-size: 16px;
  }

.section {
    min-height: auto;
    padding: 40px 0 20px;
  }
  
  
  .section-inner2 {
    padding: 20px;
  }

  
  .headline {
    font-size: 32px !important;
    text-align: center;
  }

  
  .body-text {
    font-size: 16px !important;
    margin: 10px 0;
  }

 
  .section-focus-visual {
    min-height: 220px;
    background-position: center;
  }
  
  .section-split {
    grid-template-columns: 1fr;
  }
  
.section-speed, .section-ai {
    background-image: none;  
  }
  
  .section-speed::after {
    content: "";
    display: block;
    width: 100%;
    height: 220px; 
    background-image: url('../imgs/Section-4.png');
    background-size: cover;
    background-position: center;
    margin-top: 20px;
  }
  
  .section-speed .headline {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .section-speed .body-text {
    font-size: 16px;
    margin: 0;
  }

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

  .section-ai::after {
    content: "";
    display: block;
    width: 100%;
    height: 220px;
    background-image: url(../imgs/ai.png);
    background-size: cover;
    background-position: center;
    margin-top: 20px;
  }
  
    .section-focus-visual {
    min-height: 220px;
  }
  
  .section-inner2 {
    padding: 0px;
  }
  

  
  .section-footer .section-inner {
    padding: 20px 0;      
    overflow-x: hidden;    
  }
  .headline-footer {
    font-size: clamp(18px, 5vw, 32px);
  }
  
  .copyright {
    font-size: 12px;
  }
  .disclaimers { padding:0 10px; }
  
  .section4 {
    min-height: auto;          
    padding: 5% 5%;  
	}


  
  .section4 {
        min-height: auto;              
        background-size: contain;       
        background-position: right;   
        padding: 2rem 5%;               
    }

    .section4 .headline,
    .section4 .body-text {
        font-size: 1.5rem;             
        line-height: 1.4;
        text-align: center;             
    }
	
	 .section-split .headline,
    .section-split .body-text {
        text-align: center;
        margin-left: 5%; 
        margin-right: 5%;
        font-size: 16px; 
    }
	
	
}


@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 481px */
    .two-items .items-split { border-left:0; }
	.items4col { width:19% !important; margin:0; }
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner { padding-top: 46.96%; }
	.banner-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}	
    .items-grid .item-title { color:#fff; height:6em; }
    
    .ngg-sectbanner { padding-top: 26.286%; }
	.ngg-sect-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img2 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img3 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img4 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
	
	 .ngg-sect-img5 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
	

  
  
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
		.items-grid .item-cell { width: 22%; }

}
@media only screen and (min-width: 1000px) {
	/* insert responsive CSS for screens above 1025px */
	.ngg-details3 {
    position: relative;
    top: 0;
    right: -50%;
    padding: 4% 43% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 412px;
}

}

@media only screen and (min-width: 912px) {
	/* insert responsive CSS for screens above 1025px */
	.ngg-details3 {
    position: relative;
    top: 0;
    right: -50%;
    padding: 4% 43% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 420px;
}
}