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

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

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

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

/* ===================================================================
   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/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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("assets/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 */
  }
}