/* template.css overrides
================================*/
.banner { padding-top: 41.667%; }
.banner-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-height: 300px;
  background: url(../imgs/hero-ps5-affirm.jpg) no-repeat 0 0; /* ../imgs/ — base.css lives in images/css/ */
  background-size: 289.722222%;
}
.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: 14px; }
.price-save-percent:after { left: 100%; border-bottom: 19px solid #cc4e00; border-right: 10px solid transparent; margin-bottom: 0; }
.price-save-label { padding: 2px 0 1px 6px; }
.price-save-dollar { padding: 2px 0 1px 2px; }
.price-save-percent { padding: 2px 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; }
.items-grid:after { background: none; }
.item-title a { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.item-container:hover { opacity: 1; filter: alpha(opacity=100); transition: all 0.2s ease-in-out; }

/* CSS Custom Properties — design tokens
================================*/
:root {
  --ne-logo-blue:   #09144F;
  --ne-blue:        #002D6A;
  --ne-light-blue:  #084BA6;
  --ne-yellow:      #FA9D28;
  --ne-lt-orange:   #FF8500;
  --ne-orange:      #F06C00;
  --ne-navy:        #00283A;
  --bg-dark-1:      #0a0a0f;
  --bg-dark-2:      #0d0d14;
  --bg-dark-3:      #111118;
  --bg-light-1:     #f5f5f7;
  --bg-light-2:     #fafafa;
  --bg-light-3:     #f0f0f0;
  --surface-dark-1: #0f1a2e;
  --surface-dark-2: #0d1b33;
  --text-primary:   #f0f0f0;
  --text-secondary: #9e9e9e;
  --gray-bg:        #F2F2F2;
  --gray-line:      #E8E8E8;
  --gray-border:    #D1D1D1;
  --gray-aux-light: #6E6E6E;
  --gray-body:      #212121;
  --ngg-orange:     #FA9D28;
  --ngg-darkorange: #FF8500;
  --ngg-btn-txt:    #212121;
  --ngg-opensans:   'Open Sans', sans-serif;
  --ngg-montserrat: 'Montserrat', sans-serif;
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-section:    40px;
  --sp-section-lg: 64px;
}

/* Newegg button standards
================================*/
.btn-primary, .button.button-primary, .ngg-shopall, .ngg-buynow {
  text-transform: none;
  font-family: var(--ngg-opensans);
  border: 0;
  background-color: var(--ngg-orange);
  color: var(--ngg-btn-txt);
}
.ngg-btn { border: 0; background: none; width: 100%; margin: 3% auto; text-align: center; }
.ngg-item-btn { margin: auto; text-align: center; }
.ngg-item-btn a { border-radius: 35px; width: 100%; letter-spacing: 0; font-size: 14px; }
.ngg-shopall, .ngg-buynow { border-radius: 30px; text-align: center; transition: 0.5s; font-weight: 700; font-family: var(--ngg-opensans); }
.ngg-shopall { border-radius: 50px; background-color: var(--ngg-orange); color: var(--ngg-btn-txt); border: 0; padding: 10px 4%; font-weight: 700; text-transform: none; font-size: clamp(1rem, 2vw, 1.5rem); }
.ngg-buynow { padding: 10px 8%; }
.ngg-shopall:hover, .ngg-buynow:hover, .ngg-item-btn a:hover { background-color: var(--ngg-darkorange); transition: 0.35s; }
.btn-primary:hover, .btn-primary:active, .button.button-primary:hover, .button.button-primary:active { background: var(--ngg-darkorange); color: var(--ngg-btn-txt); }

/* Global base — scoped to .section-inner only
   CRITICAL: Never apply color, font, or inherited rules to bare body, *, a, p, h1-h6.
   Newegg header and footer live outside .section-inner and must never be overridden.
   body may only receive background, margin, and padding.
================================*/
body { background: #ffffff; margin: 0; }
.section-inner {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  font-size: 14px;
  font-family: var(--ngg-opensans);
  color: var(--text-primary);
}
.section-inner * { font-size: max(14px, inherit); }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* Hero height cap
================================*/
.lp-hero { max-height: 400px; overflow: hidden; position: relative; width: 100%; }
.lp-hero-bg { width: 100%; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Scroll reveal
================================*/
.reveal { opacity: 1; transform: none; }
.will-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
.will-reveal.visible { opacity: 1; transform: none; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}

/* Disclaimer */
.disclaimer { font-size: 12px; color:#212121; text-align: center; padding: 5%; }

/* Responsive breakpoints
================================*/
@media only screen and (max-width: 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; }
  .lp-hero { max-height: 200px; }
  .lp-hero-bg { height: 200px; }
}
@media only screen and (min-width: 375px) {}
@media only screen and (min-width: 481px) {}
@media only screen and (min-width: 641px) {
  .banner { padding-top: 21.96%; }
  .banner-img { background-position: 100% 0; background-size: 152.7086383601757%; }
  .items-grid .item-cell { width: 19%; margin: 0; }
}
@media only screen and (min-width: 769px) {}
@media only screen and (min-width: 1025px) {}
@media only screen and (min-width: 1440px) {}

/* ── PAGE-SPECIFIC STYLES BELOW THIS LINE ────────────

   PS5 x Affirm — "Buy now, pay over time"

   The vendor comp is a fixed 1920 x 4800 canvas (supplied at 2x: 3840 x 9600).
   Desktop reproduces that canvas exactly: every element is absolutely placed at
   its measured design coordinate and the whole stage is multiplied by --k, a
   scale factor derived from the container width. At 1920 the page is 1:1 with
   the comp; at any narrower desktop width every distance shrinks by the same
   ratio, so the proportions never drift.

   Below 900px the stage is dismantled — positions go static and the layout
   reflows in normal document order.
   ───────────────────────────────────────────────────── */

.ps5lp, .ps5lp *, .ps5lp *::before, .ps5lp *::after { box-sizing: border-box; }

.ps5lp {
  width: 100%;
  color: #000;
  font-family: var(--ngg-opensans);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
@supports (container-type: inline-size) {
  .ps5lp { container-type: inline-size; container-name: ps5lp; }
}

.ps5lp-stage {
  --k: calc(min(100vw, 1920px) / 1920);   /* fallback */
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: calc(4800 * var(--k));
}
@supports (container-type: inline-size) {
  .ps5lp-stage { --k: calc(min(100cqw, 1920px) / 1920); }
}

.ps5lp-stage > * { position: absolute; margin: 0; }

/* Screen-reader-only */
.ps5lp-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Focus visibility — required on every interactive element */
.ps5lp a:focus-visible {
  outline: 3px solid var(--ne-yellow);
  outline-offset: 3px;
}

/* ── HERO ─────────────────────────────────────────── */
.ps5lp-hero {
  top: 0; left: 0;
  width: 100%;
  height: calc(1220 * var(--k));
}
.ps5lp-hero-img { width: 100%; height: auto; display: block; }

/* Hit areas mapped as percentages of the hero artwork, so they track the
   image at every scale. Coordinates measured off the 3840 x 2440 master. */
.ps5lp-hero-cta {
  position: absolute;
  left: 16.328%; top: 50.041%;
  width: 13.932%; height: 6.393%;
  border-radius: calc(60 * var(--k));
  z-index: 2;
}
.ps5lp-hero-disclosure {
  position: absolute;
  left: 28.229%; top: 76.6%;
  width: 11.25%; height: 5.4%;
  z-index: 2;
}

/* ── SECTION HEADLINE: PLAY LIKE NEVER BEFORE ─────── */
.ps5lp-h1 {
  top: calc(1212.92 * var(--k));
  left: 0; width: 100%;
  text-align: center;
  font-family: var(--ngg-opensans);
  font-weight: 700;
  font-size: calc(102 * var(--k));
  line-height: calc(110 * var(--k));
  letter-spacing: calc(-2 * var(--k));
  text-transform: uppercase;
  color: #00439A;
}
.ps5lp-h1 sup {
  font-size: 0.34em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
}

.ps5lp-lede {
  top: calc(1352.05 * var(--k));
  left: 0; width: 100%;
  text-align: center;
  font-size: calc(38.5 * var(--k));
  line-height: calc(55 * var(--k));
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #000;
}

/* Superscript footnote markers, shared */
.ps5lp sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* ── SPEC ICON ROW ────────────────────────────────── */
.ps5lp-specs { top: 0; left: 0; width: 100%; height: 100%; list-style: none; padding: 0; }
.ps5lp-specs > .ps5lp-spec { position: absolute; }
/* the cell is a zero-width anchor, so the template's `img { max-width:100% }`
   would otherwise collapse these to nothing */
.ps5lp-spec-ico { position: absolute; height: auto; max-width: none; }
.ps5lp-spec-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(1676.17 * var(--k));
  display: block;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  font-size: max(14px, calc(22 * var(--k)));
  line-height: calc(26 * var(--k));
  color: #000;
}
/* Each cell is a zero-width anchor at the icon's horizontal centre;
   the icon and the two-line label both centre on it. */
.ps5lp-spec { top: 0; width: 0; }
.ps5lp-spec .ps5lp-spec-ico { left: 50%; transform: translateX(-50%); }

.ps5lp-spec:nth-child(1) { left: calc(454.25 * var(--k)); }
.ps5lp-spec:nth-child(2) { left: calc(650.25 * var(--k)); }
.ps5lp-spec:nth-child(3) { left: calc(851.25 * var(--k)); }
.ps5lp-spec:nth-child(4) { left: calc(1050.75 * var(--k)); }
.ps5lp-spec:nth-child(5) { left: calc(1253.75 * var(--k)); }
.ps5lp-spec:nth-child(6) { left: calc(1458.00 * var(--k)); }

.ps5lp-ico-ray    { top: calc(1563.5 * var(--k)); width: calc(87   * var(--k)); }
.ps5lp-ico-ssd    { top: calc(1582.0 * var(--k)); width: calc(87   * var(--k)); }
.ps5lp-ico-4k     { top: calc(1591.0 * var(--k)); width: calc(83   * var(--k)); }
.ps5lp-ico-3d     { top: calc(1591.0 * var(--k)); width: calc(85   * var(--k)); }
.ps5lp-ico-haptic { top: calc(1591.0 * var(--k)); width: calc(85   * var(--k)); }
.ps5lp-ico-trig   { top: calc(1569.5 * var(--k)); width: calc(102.5 * var(--k)); }

/* ── STUNNING GAMES ON PS5 ────────────────────────── */
.ps5lp-h2 {
  left: 0; width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: calc(57 * var(--k));
  line-height: calc(62 * var(--k));
  letter-spacing: calc(-0.47 * var(--k));
  color: #00439A;
}
.ps5lp-h2 sup { font-size: 0.36em; }
.ps5lp-h2-games   { top: calc(1824.58 * var(--k)); }
.ps5lp-h2-visuals { top: calc(3315.58 * var(--k)); }

.ps5lp-body {
  left: 0; width: 100%;
  text-align: center;
  font-size: calc(38.5 * var(--k));
  letter-spacing: 0.02em;
  font-weight: 400;
  color: #000;
}
.ps5lp-body-games   { top: calc(1909.55 * var(--k)); line-height: calc(53.5 * var(--k)); }
.ps5lp-body-visuals { top: calc(3399.30 * var(--k)); line-height: calc(53 * var(--k)); }

/* The banner slides under the closing line of the paragraph above it —
   that overlap is in the comp, and the artwork's misty top edge is what
   makes it read cleanly. Text stays on top. */
.ps5lp-gow {
  top: calc(2010 * var(--k));
  left: calc(170 * var(--k));
  width: calc(1580 * var(--k));
  height: calc(390 * var(--k));
  z-index: 0;
}
.ps5lp-h2, .ps5lp-body, .ps5lp-h1, .ps5lp-lede { z-index: 1; }
/* the footnote gradient sits later in the DOM — keep content above it */
.ps5lp-specs, .ps5lp-tiles, .ps5lp-panels { z-index: 1; }
.ps5lp-gow img { width: 100%; height: 100%; object-fit: cover; }

/* ── GAME TILES ───────────────────────────────────── */
.ps5lp-tiles { top: 0; left: 0; width: 100%; height: 100%; list-style: none; padding: 0; }
.ps5lp-tile { position: absolute; top: calc(2524 * var(--k)); width: calc(450.5 * var(--k)); }
.ps5lp-tile:nth-child(1) { left: calc(169.5 * var(--k)); }
.ps5lp-tile:nth-child(2) { left: calc(734   * var(--k)); }
.ps5lp-tile:nth-child(3) { left: calc(1299  * var(--k)); }
.ps5lp-tile img { width: 100%; height: calc(568.5 * var(--k)); object-fit: cover; }
.ps5lp-tile-cap {
  position: absolute;
  left: 0; width: 100%;
  top: calc(610.80 * var(--k));   /* 3134.80 − 2524 */
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: calc(38.5 * var(--k));
  line-height: calc(48.5 * var(--k));
  color: #000;
}

/* ── DUALSENSE PANELS ─────────────────────────────── */
.ps5lp-panels { top: 0; left: 0; width: 100%; height: 100%; list-style: none; padding: 0; }
.ps5lp-panel { position: absolute; top: calc(3643.5 * var(--k)); width: calc(760.5 * var(--k)); }
.ps5lp-panel:nth-child(1) { left: calc(170 * var(--k)); }
.ps5lp-panel:nth-child(2) { left: calc(989 * var(--k)); }
.ps5lp-panel img { width: 100%; height: calc(441 * var(--k)); object-fit: cover; }
.ps5lp-panel-head {
  position: absolute;
  left: 0; width: 100%;
  top: calc(493.05 * var(--k));   /* 4136.55 − 3643.5 */
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: calc(38.5 * var(--k));
  line-height: calc(45 * var(--k));
  color: #000;
}
.ps5lp-panel-body {
  position: absolute;
  left: 0; width: 100%;
  top: calc(562.30 * var(--k));   /* 4205.80 − 3643.5 */
  left: calc(-70 * var(--k));
  width: calc(900.5 * var(--k));
  margin: 0;
  text-align: center;
  font-size: calc(38.5 * var(--k));
  letter-spacing: 0.02em;
  line-height: calc(52.5 * var(--k));
  font-weight: 400;
  color: #000;
}

/* ── FOOTNOTES ────────────────────────────────────── */
.ps5lp-fade {
  top: calc(4345 * var(--k));
  left: 0; width: 100%;
  height: calc(455 * var(--k));
  background: linear-gradient(180deg, #ffffff 0%, #E3E3E3 100%);
  z-index: 0;
}
.ps5lp-notes {
  top: calc(4619.55 * var(--k));
  left: calc(170 * var(--k));
  /* The comp sets the legal copy in a condensed cut of the brand face.
     Open Sans has no condensed sibling on the template, so this runs at the
     nearest comfortable size and wraps naturally — note 3 takes one extra
     line. Swap the family here if SST Condensed is ever licensed. */
  width: calc(1571 * var(--k));
  list-style: none;
  padding: 0;
  counter-reset: ps5note;
  font-weight: 400;
  font-size: max(12px, calc(16 * var(--k)));
  line-height: calc(21 * var(--k));
  color: #1D1D1D;
  z-index: 1;
}
.ps5lp-notes > li { counter-increment: ps5note; }
.ps5lp-notes > li::before { content: counter(ps5note) ". "; }

/* ── Mobile-only hero pieces: hidden on the desktop stage ── */
.ps5lp-hero-m, .ps5lp-hero-m-logo { display: none; }

/* ═══════════════════════════════════════════════════
   TABLET / MOBILE — the stage is dismantled here.
   Below 900px the comp's 38px body copy would scale to
   roughly 17px and the hero's baked-in headline would fall
   under 20px, so the layout reflows instead of shrinking.
   ═══════════════════════════════════════════════════ */
@media only screen and (max-width: 900px) {

  .ps5lp-stage { height: auto; padding-bottom: 0; }
  .ps5lp-stage > * { position: static; }
  /* Desktop stage geometry is absolute and in design units — clear all of it
     before the flow layout below sets its own. */
  .ps5lp-h1, .ps5lp-lede, .ps5lp-h2, .ps5lp-body,
  .ps5lp-specs, .ps5lp-spec, .ps5lp-spec-label, .ps5lp-spec-ico,
  .ps5lp-tiles, .ps5lp-tile, .ps5lp-tile-cap,
  .ps5lp-panels, .ps5lp-panel, .ps5lp-panel-head, .ps5lp-panel-body,
  .ps5lp-gow, .ps5lp-notes {
    position: static;
    top: auto; left: auto; right: auto;
    width: auto;
    transform: none;
    letter-spacing: normal;
  }
  .ps5lp-br { display: none; }

  /* Hero: crop the artwork to the console lockup — the baked headline is
     unreadable at this width — and carry the message in live text below. */
  .ps5lp-hero {
    height: auto;
    background: linear-gradient(180deg, #010F88 0%, #010F88 var(--ps5-hero-top, 34%), #0034BC 62%, #01218F 100%);
    padding-bottom: clamp(28px, 7vw, 48px); padding-top:1px; 
  }
  .ps5lp-hero picture { display: block; }
  .ps5lp-hero-m-logo {
    display: block;
    width: clamp(128px, 33vw, 210px);
    height: auto;
    margin: clamp(22px, 6vw, 40px) auto clamp(2px, 1vw, 8px);
  }
  .ps5lp-hero-img {
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 97%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 97%, transparent 100%);
  }
  .ps5lp-hero-cta, .ps5lp-hero-disclosure { display: none; }

  .ps5lp-hero-m {
    display: block;
    text-align: center;
    padding: 0 clamp(18px, 5vw, 40px);
    margin-top: clamp(10px, 3vw, 22px);
    color: #fff;
  }
  .ps5lp-hero-m-head {
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(30px, 8.4vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 0 0 clamp(10px, 2.6vw, 18px);
  }
  .ps5lp-hero-m-sub {
    font-size: clamp(15px, 3.9vw, 22px);
    line-height: 1.42;
    margin: 0 0 clamp(18px, 4.4vw, 28px);
  }
  .ps5lp-hero-m-sub strong { font-weight: 700; }
  .ps5lp-hero-m-btn {
    display: inline-block;
    min-width: 200px;
    min-height: 44px;
    padding: 13px 42px;
    border-radius: 50px;
    background: #D6450C;
    color: #fff;
    font-weight: 700;
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.2;
    transition: background 0.25s ease;
  }
  .ps5lp-hero-m-btn:hover, .ps5lp-hero-m-btn:active { background: #B93A0A; }
  .ps5lp-hero-m-fine {
    font-size: clamp(11px, 2.9vw, 14px);
    line-height: 1.45;
    margin: clamp(16px, 4vw, 24px) 0 0;
    color: #C9D3F2;
  }
  .ps5lp-hero-m-fine a { color: #fff; text-decoration: underline; }

  /* Type scale */
  .ps5lp-h1 {
    font-size: clamp(28px, 7.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.005em;
    padding: clamp(34px, 8vw, 56px) clamp(18px, 5vw, 40px) 0;
  }
  .ps5lp-lede, .ps5lp-body {
    font-size: clamp(15px, 3.7vw, 21px);
    line-height: 1.5;
    padding: clamp(14px, 3.4vw, 22px) clamp(18px, 5vw, 40px) 0;
    max-width: 760px;
    margin: 0 auto;
  }
  .ps5lp-h2 {
    font-size: clamp(22px, 5.4vw, 36px);
    line-height: 1.18;
    padding: clamp(34px, 8vw, 54px) clamp(18px, 5vw, 40px) 0;
  }

  /* Spec icons — 3 across, two rows */
  .ps5lp-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 6vw, 40px) clamp(8px, 3vw, 20px);
    height: auto;
    padding: clamp(30px, 7vw, 48px) clamp(18px, 5vw, 40px) 0;
    box-sizing: border-box;
  }
  .ps5lp-specs > .ps5lp-spec {
    position: static;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 2.4vw, 16px);
  }
  .ps5lp-spec .ps5lp-spec-ico {
    position: static;
    transform: none;
    width: auto;
    height: clamp(34px, 9vw, 52px);
    object-fit: contain;
  }
  .ps5lp-spec-label {
    position: static;
    transform: none;
    font-size: clamp(13px, 3.2vw, 17px);
    line-height: 1.22;
  }

  /* God of War banner — no overlap on mobile */
  .ps5lp-gow {
    width: 100%;
    height: clamp(130px, 30vw, 240px);
    margin-top: clamp(24px, 6vw, 40px);
  }

  /* Tiles */
  .ps5lp-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 3vw, 24px);
    height: auto;
    padding: clamp(34px, 8vw, 54px) clamp(18px, 5vw, 40px) 0;
    box-sizing: border-box;
  }
  .ps5lp-tile { position: static; width: auto; }
  /* show the full frame — heights may differ, widths stay equal */
  .ps5lp-tile img { height: auto; aspect-ratio: auto; object-fit: contain; }
  .ps5lp-tile-cap {
    position: static;
    margin-top: clamp(12px, 3vw, 20px);
    font-size: clamp(13px, 3.1vw, 18px);
    line-height: 1.26;
  }

  /* DualSense panels */
  .ps5lp-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 8vw, 48px);
    height: auto;
    padding: clamp(34px, 8vw, 54px) clamp(18px, 5vw, 40px) 0;
    box-sizing: border-box;
  }
  .ps5lp-panel { position: static; width: auto; }
  .ps5lp-panel img { height: auto; aspect-ratio: 761 / 441; }
  .ps5lp-panel-head {
    position: static;
    margin-top: clamp(14px, 3.4vw, 22px);
    font-size: clamp(18px, 4.4vw, 26px);
    line-height: 1.24;
  }
  .ps5lp-panel-body {
    position: static;
    margin-top: clamp(8px, 2.2vw, 14px);
    font-size: clamp(15px, 3.7vw, 21px);
    line-height: 1.5;
  }

  /* Footnotes */
  .ps5lp-fade { display: none; }
  .ps5lp-notes {
    width: auto;
    margin-top: clamp(40px, 10vw, 72px);
    padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 40px) clamp(30px, 7vw, 48px);
    background: linear-gradient(180deg, #ffffff 0%, #E3E3E3 100%);
    font-size: 12px;
    line-height: 1.5;
  }
  .ps5lp-notes > li + li { margin-top: 6px; }
}

/* Two tiles per row gets cramped captions below this — go single column */
@media only screen and (max-width: 560px) {
  .ps5lp-tiles { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 32px); }
  .ps5lp-specs { gap: clamp(20px, 5vw, 30px) clamp(6px, 2vw, 14px); }
}

/* Final floor — nothing breaks below this */
@media only screen and (max-width: 375px) {
  .ps5lp-hero-m-btn { min-width: 0; width: 100%; padding: 13px 20px; box-sizing: border-box; }
}