/* ===================================================================
   Intel Spring Bundle — responsive one-pager
   Breakpoints: Desktop 1440, Tablet 1024, Mobile 402
   All numeric positions derive from Figma frame coordinates and are
   expressed in container-query units (cqw) so each section scales
   fluidly to its viewport width.
   =================================================================== */

@font-face {
  font-family: "IntelOne Display";
  src: url("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("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("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("intelone-display-latin-bold.1e07e246.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IntelOne Display Heading";
  src: url("intelone-headline-bolditalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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;
}

.cta2 {
  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;
}

.s1-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  justify-content: center;
  transform: translateY(80rem)translateX(10rem);
  margin-top: 2rem;
}

@media screen and (max-width: 839px) {
  .s1-cta {
    display: flex;
    transform: translateY(56rem)translateX(5rem);
  }

  .cta-lg2 {
    height: 3.96cqw;
    font-size: 1.74cqw;
    padding: 0 1.6cqw;
  }
}

@media screen and (max-width: 479px) {
  .s1-cta {
    display: flex;
    transform: translateY(46rem)translateX(3rem);
  }

  .s1 .cta-lg2 {
    width: 20.6cqw;
    height: 5.18cqw;
    font-size: 2.64cqw;
  }
}


/* 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 Heading", "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 / 1523;
  background-image: url("assets/SpringDesktopHeader1Background.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;
}

/* 143 */
.s1-heading .l2 {
  font-size: 6.88cqw;
  /* 99  */
  padding-left: 10.2cqw;
  /* 147 */
}

.s1-heading .l3 {
  font-size: 10.9cqw;
}

/* 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;
}

.s1-sub strong {
  font-weight: 700;
}

.cta-lg {
  height: 3.96cqw;
  /* 57 */
  font-size: 1.74cqw;
  /* 25 */
  padding: 0 1.6cqw;
}

.cta-lg2 {
  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 .cta-lg2 {
  /* position: absolute; */
  left: 50%;
  top: 96.94cqw;
  /* 1324/1440 */
  width: 22.95cqw;
  /* 330 */
  transform: translateX(-50%);
}

.s1-offer {
  position: absolute;
  left: 0;
  right: 0;
  top: 102cqw;
  /* 1430 */
  text-align: center;
  font-size: 1.39cqw;
  /* 20 */
}

/* ---------- Section 2 — Build the legacy ---------- */
.s2 {
  aspect-ratio: 1440 / 577;
  background-image: url("assets/SpringDesktopSection2Background.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;
}

.s2 .cta {
  position: absolute;
  left: 6.25cqw;
  top: 29.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("assets/SpringDesktopSection3Background.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;
}

.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: 74.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: 9.17cqw;
  /* 60px breathing room above section 4 */
  width: 40.1cqw;
  /* 578 */
  font-size: 1.39cqw;
  /* 20px */
  line-height: 1.2;
}

.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("assets/SpringDesktopSection4Background.png");
}

.s4-heading {
  position: absolute;
  left: 52.5cqw;
  /* 756 */
  top: 9.82cqw;
  /* (4059-3932)/1440 */
  width: 46.05cqw;
  /* 620 */
  font-size: 4.5cqw;
  line-height: 1;
}

.s4-body {
  position: absolute;
  left: 52.5cqw;
  top: 22.1cqw;
  /* (4268-3932)/1440 */
  width: 42.57cqw;
  /* 613 */
  font-size: 1.39cqw;
  line-height: 1.25;
}

.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("assets/SpringDesktopSection5Background.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;
}

/* ---------- Section 6 — Unlock the offer (instructions) ---------- */
.s6 {
  aspect-ratio: 1440 / 1350;
  background-image: url("assets/SpringDesktopSection7Background.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;
}

.s6-sub strong {
  font-weight: 700;
}

.steps {
  position: absolute;
  left: 12.08cqw;
  /* 174 */
  top: 30.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;
}

.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("assets/SpringDesktopSection8Background.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
  gap: 4cqw;
}

.card {
  /* 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("assets/SpringDesktopSection6Background.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;
}

/* ---------- Section 9 — That's the power of Intel Inside ---------- */
.s9 {
  aspect-ratio: 1440 / 1644;
  background-image: url("assets/SpringDesktopSection9Background.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;
}

.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: 104.63cqw;
  /* (10038-8639)/1440 + 25px */
  width: 24.95cqw;
  /* 359 */
  height: 4.37cqw;
  /* 63 */
  transform: translateX(-50%);
  object-fit: contain;
}

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

  /* ---------- S1 hero ---------- */
  .s1 {
    aspect-ratio: 1024 / 1366;
    background-image: url("assets/SpringTabletHeader1Background.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: 11.70cqw;
  }

  /* 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: 114.33cqw;
    /* 1181 */
    width: 20.6cqw;
    /* 211 */
    height: 5.18cqw;
    /* 53 */
    font-size: 2.64cqw;
    /* 27 */
  }

  .s1 .cta-lg2 {
    top: 114.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("assets/SpringTabletSection2Background.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: 21.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("assets/SpringTabletSection3Background.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: 46.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: 57.96cqw;
    /* -15px */
    width: 38.09cqw;
    /* 390 */
    font-size: 4.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("assets/SpringTabletSection4Background.png");
  }

  .s4-heading {
    left: 50cqw;
    /* 512 */
    top: 11.76cqw;
    /* (3062-2982)/1024 + 20px */
    width: 45.35cqw;
    /* 403 */
    font-size: 4.27cqw;
    /* 54 */
  }

  .s4-body {
    left: 50cqw;
    top: 23.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("assets/SpringTabletSection5Background.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("assets/SpringTabletSection7Background.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: 8 cqw;
    /* +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("assets/SpringTabletSection8Background.png");
  }

  .s7-heading {
    top: 6.15cqw;
    /* (5018-4955)/1024 */
    font-size: 4.3cqw;
    /* 44 */
  }

  .cards {
    gap: 2cqw;
    display: flex;
  }

  .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("assets/SpringTabletSection6Background.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 / 1659;
    background-image: url("assets/SpringTabletSection9Background.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: 42.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("assets/SpringMobileHeader1Background.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: 4.98cqw;
    /* 16 */
    line-height: 1.35;
    text-align: center;
  }

  .s1 .cta-lg {
    top: 185.82cqw;
    /* 751 */
    width: 31.29cqw;
    /* 127 */
    height: 7.96cqw;
    /* 32 */
    font-size: 3.98cqw;
    /* 16 */
  }

  .s1 .cta-lg2 {
    top: 185.82cqw;
    width: 31.29cqw;
    height: 7.96cqw;
    font-size: 3.98cqw;
  }

  .s1-offer {
    top: 201cqw;
    /* 808 */
    font-size: 3.73cqw;
    /* 15 */
  }

  /* ---------- S2 Build the legacy ---------- */
  .s2 {
    aspect-ratio: 402 / 669;
    background-image: url("assets/SpringMobileSection2Background.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: 40.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: 71.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("assets/SpringMobileSection3Background.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: 87.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: 240.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("assets/SpringMobileSection4Background.png");
  }

  .s4-heading {
    left: 11.19cqw;
    top: 96.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("assets/SpringMobileSection5Background.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 / 975;
    background-image: url("assets/SpringMobileSection7Background.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: 73.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 / 500;
    background-image: url("assets/SpringMobileSection8Background.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;
    /* 241 */
    flex-direction: column;
    gap: 14.68cqw;
    /* (6262-5861-342)/402 ≈ 14.68 */
  }

  .card {
    width: 59.95cqw;
    padding-top: 15rem;
    align-items: center;
    justify-content: center;
    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("assets/SpringMobileSection6Background.png");
  }

  .s8-heading {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 14.44cqw;
    /* +20px */
    width: 80cqw;
    font-size: 8.94cqw;
    /* 48 */
    text-align: center;
  }

  .s8-body {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 40.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 / 1986;
    background-image: url("assets/SpringMobileSection9Background.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: 32.05cqw;
    /* -5px */
    width: 50.75cqw;
    /* 204 */
    height: 28.11cqw;
    /* 113 */
  }

  .s9-rating {
    left: 72.14cqw;
    /* 76+204+10 = 290px */
    transform: none;
    top: 41.89cqw;
    /* -5px */
    width: 8.96cqw;
    /* 36 */
    height: 12.44cqw;
    /* 50 */
  }

  .s9-legal {
    left: 8.71cqw;
    /* 35 */
    right: 8.96cqw;
    top: 67.14cqw;
    /* +60px */
    font-size: 3.48cqw;
    /* 14 */
    line-height: 1.4;
    text-align: center;
  }

  .s9-gaming {
    left: 50%;
    top: 474.51cqw;
    /* 50px from bottom */
    width: 46.77cqw;
    /* 188 */
    height: 8.21cqw;
    /* 33 */
  }

  .botoes-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}