/* build v=20261022a : matches base.css?v=20261022a in index.html; bump both together */
/* 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.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: 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; }
.header .logo { width: 125px; }
.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: var(--bg-dark-1); 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 — never exceeds 400px
================================*/
.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: var(--text-secondary); text-align: center; padding: var(--sp-2) clamp(24px, 6vw, 80px); }

/* 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 ──────────── */

/* Campaign tokens — synced to the Figma file "26-0929" (GTA6 Campaign collection)
================================*/
:root {
  --vc-ink:         #0E0A24;
  --vc-ink-2:       #150F33;
  --vc-ink-3:       #1C1546;
  --vc-indigo:      #2B1B6B;
  --vc-violet:      #6A4BD8;
  --vc-lavender:    #B99CFF;
  --vc-lavender-2:  #BC9CFF;
  --vc-pink:        #F0609E;
  --vc-pink-lt:     #F3A3FF;
  --vc-magenta:     #D63B8F;
  --vc-sun:         #FF8F3C;
  --vc-gold:        #FFC65A;
  --vc-gold-2:      #FEC15D;
  --ps-blue:        #3A7BE0;
  --ps-tag:         #C8DCFF;
  --ps-head:        #77A8FF;
  --xb-tag:         #78FF82;
  --xb-head:        #9DFFA4;
  /* Newegg design-system card + CTA tokens */
  --ne-white:       #FFFFFF;
  --ne-text:        #212121;
  --ne-text-2:      #636363;
  --ne-disabled:    #ADADAD;
  --ne-border:      #E8E8E8;
  --ne-sale:        #CC4100;
  --ne-hover-yellow:#FFB25D;
  --ne-active-yellow:#FF8500;
  --head-text:      #F5F0FF;
  --body-text:      rgba(245, 240, 255, 0.84);
  --hairline:       rgba(185, 156, 255, 0.14);
  --sky-type:       linear-gradient(90deg, #F5F0FF 0%, var(--vc-lavender) 55%, #FFC9E3 100%);
  --sky-line:       linear-gradient(90deg, var(--vc-gold), var(--vc-pink), var(--vc-lavender));
  --gta-max:        1280px;
  --card-gap:       20px;
}

body { background: var(--vc-ink); }
.section-inner { overflow: clip; background: var(--vc-ink); color: var(--head-text); }

.gta-wrap {
  max-width: var(--gta-max); margin: 0 auto;
  padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px);
}
.gta-defs { position: absolute; }

.section-inner a:focus-visible,
.section-inner button:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

/* Typography
================================*/
.gta-h1, .gta-h2 {
  font-family: var(--ngg-montserrat); text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--head-text); margin: 0 0 var(--sp-2); line-height: 1.02;
  background: var(--sky-type); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gta-h1 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 900; line-height: 1.02; }
.gta-h2 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; line-height: 47px; }
.gta-h2--center { text-align: center; }
.gta-body {
  font-family: var(--ngg-opensans); font-size: 16px; line-height: 26px;
  color: var(--body-text); margin: 0; max-width: none;
}
.gta-body--lg { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; }
.gta-body--center { text-align: center; max-width: none; margin-left: auto; margin-right: auto; }
.gta-eyebrow {
  display: inline-block; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-gold);
}

/* Palm wall-shadow (Intro) — a blurred silhouette that sways as if a breeze moves a tree
   outside the frame. Two layers: a nearer, sharper shadow and a farther, softer one.
================================*/
.gta-dusk { position: relative; overflow: hidden; }
.gta-dusk > .gta-intro, .gta-dusk > .gta-videos { position: relative; z-index: 1; }
/* Lock In Launch Day sits inside the dusk backdrop: transparent so the wash and palm shadows show through */
.gta-dusk > .gta-launch { position: relative; z-index: 1; padding-top: 40px; background: transparent; }
.gta-palm-shadow { position: absolute; width: 380px; height: auto; aspect-ratio: 260 / 360; overflow: visible; pointer-events: none; fill: var(--vc-ink); }
.gta-palm-shadow--near { opacity: 0.55; filter: blur(5px); animation: gta-shadow-light 7s ease-in-out infinite; }
.gta-palm-shadow--far { opacity: 0.24; filter: blur(13px); }
.gta-palm-shadow--1 { left: 24px; top: -70px; width: 400px; }
.gta-palm-shadow--2 { left: 160px; top: 300px; width: 300px; transform: scaleX(-1); }
.gta-palm-shadow--3 { right: 36px; top: -36px; width: 380px; transform: scaleX(-1); }
.gta-palm-shadow--4 { right: 200px; top: 380px; width: 280px; }
.gta-palm-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: gta-sway 9s ease-in-out infinite; }
.gta-palm-shadow--2 .gta-palm-tree { animation-duration: 12s; animation-delay: -4s; }
.gta-palm-shadow--3 .gta-palm-tree { animation-duration: 10s; animation-delay: -6s; }
.gta-palm-shadow--4 .gta-palm-tree { animation-duration: 13s; animation-delay: -2s; }
.gta-palm-shadow--3 { animation-delay: -3.5s; }
.gta-frond > path { transform-box: fill-box; transform-origin: 0% 100%; animation: gta-frond 5s ease-in-out infinite; --amp: 3deg; }
.gta-frond:nth-of-type(1) > path { animation-duration: 4.6s; animation-delay: -0.4s; --amp: 3.5deg; }
.gta-frond:nth-of-type(2) > path { animation-duration: 5.4s; animation-delay: -2.1s; --amp: 2.5deg; }
.gta-frond:nth-of-type(3) > path { animation-duration: 4.1s; animation-delay: -1.3s; --amp: 4deg; }
.gta-frond:nth-of-type(4) > path { animation-duration: 6.2s; animation-delay: -3.0s; --amp: 2deg; }
.gta-frond:nth-of-type(5) > path { animation-duration: 4.8s; animation-delay: -0.9s; --amp: 3deg; }
.gta-frond:nth-of-type(6) > path { animation-duration: 5.7s; animation-delay: -2.6s; --amp: 3.5deg; }
.gta-frond:nth-of-type(7) > path { animation-duration: 4.4s; animation-delay: -1.8s; --amp: 2.5deg; }
.gta-frond:nth-of-type(8) > path { animation-duration: 6.6s; animation-delay: -3.4s; --amp: 4deg; }
.gta-palm-shadow--far .gta-frond > path { animation-duration: 7s; }
@keyframes gta-sway { 0%, 100% { transform: rotate(-1.2deg) skewX(-1.5deg); } 50% { transform: rotate(1.2deg) skewX(1.5deg); } }
@keyframes gta-frond { 0%, 100% { transform: rotate(calc(-1 * var(--amp))); } 50% { transform: rotate(var(--amp)); } }
@keyframes gta-shadow-light { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.62; } }

/* Hero — banner art at its natural ratio
================================*/
.gta-hero { display: block; position: relative; background: var(--vc-indigo); }
.gta-hero img { width: 100%; height: auto; }

/* Console wayfinding dots (kept for optional use)
================================*/
.gta-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.gta-dot--ps5 { background: var(--ps-blue); box-shadow: 0 0 10px var(--ps-blue); }
.gta-dot--xbox { background: var(--xb-tag); box-shadow: 0 0 10px var(--xb-tag); }

/* Intro — the hero's sunset bleeds down into the page
   Figma: date lockup right-aligned (471 col), "Vice City opens" 36px gold, no eyebrow
================================*/
.gta-intro { position: relative; padding: 96px 0 40px; }
.gta-sky {
  position: absolute; left: 0; right: 0; top: 0; height: 66%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 143, 60, 0.28) 0%, rgba(240, 96, 158, 0.18) 28%, rgba(106, 75, 216, 0.10) 62%, rgba(14, 10, 36, 0) 100%);
}
.gta-intro-inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 471fr) minmax(0, 729fr);
  gap: 80px; align-items: center;
}
.gta-date { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; font-family: var(--ngg-montserrat); }
.gta-date-eyebrow { display: none; }
.gta-date-num {
  font-weight: 900; font-size: clamp(84px, 12.2vw, 176px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(240, 96, 158, 0.25));
}
.gta-date-sub { font-weight: 900; font-size: clamp(20px, 2.5vw, 36px); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-gold-2); }

/* Video series — three vertical (9:16) videos side by side
================================*/
.gta-videos { position: relative; padding: var(--sp-section) 0 var(--sp-section-lg); }
.gta-videos-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: 1020px; margin: 0 auto var(--sp-3); }
.gta-videos-note { font-family: var(--ngg-montserrat); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 240, 255, 0.62); }
.gta-video-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  max-width: 1020px; margin: 0 auto; padding: 0; list-style: none;
}
.gta-vslide { min-width: 0; }
.gta-video-frame {
  position: relative; background: var(--vc-ink-3); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), 0 30px 70px -30px rgba(240, 96, 158, 0.35);
}
.gta-video-frame--v { aspect-ratio: 9 / 16; }
.gta-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gta-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: var(--vc-ink-3); cursor: pointer; }
.gta-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.4s ease-out, opacity 0.3s; }
.gta-video-play:hover .gta-video-poster { transform: scale(1.03); opacity: 1; }
.gta-video-playicon {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--ne-yellow); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease-out, background-color 0.2s;
}
.gta-video-playicon::after {
  content: ''; position: absolute; left: 28px; top: 21px;
  border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--ne-text);
}
.gta-video-play:hover .gta-video-playicon { transform: scale(1.06); background: var(--ne-hover-yellow); }
.gta-vslide.is-playing .gta-video-play { display: none; }
.gta-vslide.is-empty .gta-video-play { cursor: default; }
.gta-vslide.is-empty .gta-video-playicon { opacity: 1; }
.gta-vslide.is-empty .gta-video-poster { display: none; }
.gta-vslide.is-empty .gta-video-frame::after {
  content: attr(data-empty-label); position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  font-family: var(--ngg-montserrat); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245, 240, 255, 0.55); white-space: nowrap;
}
.gta-slide-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 16px; color: var(--head-text); }
.gta-slide-num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sky-line); color: var(--vc-ink); font-size: 14px; font-weight: 800;
}

/* One Game. One Massive Install. — Figma: gas-station sunset art under a 78% ink overlay, white copy
================================*/
.gta-install {
  position: relative; overflow: hidden; padding: 104px 0;
  background:
    linear-gradient(rgba(14, 10, 36, 0.78), rgba(14, 10, 36, 0.78)),
    url(../imgs/bg-install.jpg) center / cover no-repeat,
    var(--vc-ink);
}
.gta-install-inner {
  position: relative; display: grid; grid-template-columns: 560px minmax(0, 1fr);
  gap: 80px; align-items: center;
}
.gta-install .gta-body { color: var(--ne-white); max-width: none; }
.gta-stats { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: clamp(24px, 3.6vw, 52px); padding-right: 3px; }
.gta-stat { display: flex; flex-direction: column; gap: 8px; font-family: var(--ngg-montserrat); color: var(--ne-white); }
.gta-stat-num { display: flex; align-items: baseline; gap: 4px; font-weight: 900; font-size: 72px; line-height: 91px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ne-white); }
.gta-stat-num small { font-size: 36px; line-height: 36px; font-weight: 800; letter-spacing: 0; }
.gta-stat-label { font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ne-white); }
.gta-stat--big { align-items: center; text-align: center; }
.gta-stat--big .gta-stat-num { gap: 0; font-size: clamp(120px, 12.5vw, 180px); line-height: 0.79; letter-spacing: -0.03em; }
.gta-stat--big .gta-stat-num > span:not(.gta-stat-approx) {
  background: linear-gradient(90deg, var(--vc-lavender) 0%, var(--vc-pink-lt) 54%, var(--vc-gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.gta-stat-approx { font-size: 0.5em; line-height: 1; color: var(--vc-lavender-2); -webkit-text-fill-color: var(--vc-lavender-2); align-self: center; margin-right: 0.02em; }
.gta-stat--big .gta-stat-num small { font-size: 56px; line-height: 56px; color: var(--vc-gold); -webkit-text-fill-color: var(--vc-gold); align-self: flex-end; margin-bottom: 0.08em; }
.gta-stat-arrow { display: none; }

/* Zig-zag feature sections (PS5 / Xbox / External)
   Figma: console lifestyle art at 15–20% under a directional ink overlay; tag + heading tinted per console; no rail
================================*/
.gta-zig { position: relative; padding: 64px 0; background: var(--vc-ink); }
.gta-zig::before, .gta-zig::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.gta-zig::before { background-repeat: no-repeat; }
.gta-zig--ps5::before { background-image: url(../imgs/bg-ps5.jpg); background-size: 137% auto; background-position: 230% 34%; opacity: 0.15; }
.gta-zig--ps5::after { background: radial-gradient(708px 415px at 52% 82%, var(--vc-ink) 0%, rgba(14, 10, 36, 0) 70%); }
.gta-zig--xbox::before { background-image: url(../imgs/bg-xbox.jpg); background-size: 155% auto; background-position: 100% 42%; opacity: 0.2; }
.gta-zig--xbox::after { background: linear-gradient(83.8deg, var(--vc-ink) 49.8%, rgba(14, 10, 36, 0) 78.6%); }
.gta-zig--ext::before { background-image: url(../imgs/bg-external.jpg); background-size: 155.3% auto; background-position: 182% 42%; opacity: 0.15; }
.gta-zig--ext::after { background: linear-gradient(92.7deg, rgba(14, 10, 36, 0) 38.6%, var(--vc-ink) 56%); }
.gta-zig-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(50% - var(--card-gap) / 2);
  column-gap: 40px; row-gap: var(--sp-4); align-items: center;
}
.gta-zig--flip .gta-zig-inner { grid-template-columns: calc(50% - var(--card-gap) / 2) minmax(0, 1fr); }
.gta-zig--flip .gta-zig-copy { order: 2; }
.gta-zig-copy { padding: 0; border: 0; }
.gta-zig-copy .gta-h2 { max-width: 560px; }
.gta-zig--ps5 .gta-h2 { background-image: linear-gradient(90deg, #FFFFFF 0%, var(--ps-head) 75%); }
.gta-zig--xbox .gta-h2 { max-width: 550px; background-image: linear-gradient(90deg, #FFFFFF 0%, var(--xb-head) 100%); }
.gta-zig--ext .gta-body { max-width: none; }

.gta-console-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); padding: 6px 12px 6px 10px;
  border-radius: 30px; border: 1px solid var(--hairline); background: rgba(185, 156, 255, 0.06);
  font-family: var(--ngg-montserrat); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--head-text);
}
.gta-console-tag--ps5 { color: var(--ps-tag); border-color: var(--ps-tag); background: rgba(207, 188, 255, 0.06); }
.gta-console-tag--xbox { color: var(--xb-tag); border-color: var(--xb-tag); }
.gta-console-glyphs { display: none; }

.gta-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); list-style: none; margin: 0; padding: 0; }

/* Product card — Newegg design system (LP / Product Card in Figma)
   White, 1px #E8E8E8, 12px radius, 4:3 image box, 16px padding, fixed row heights (title, price, CTA), DS Primary XL button.
================================*/
.gta-card { float: none; width: auto; margin: 0; padding: 0; border: 0; list-style: none; display: flex; }
.gta-card .item-container {
  position: relative; display: flex; flex-direction: column; width: 100%; box-sizing: border-box;
  background: var(--ne-white); border: 1px solid var(--ne-border); border-radius: 12px; overflow: hidden;
  box-shadow: none; transition: box-shadow 0.2s ease-out;
}
.gta-card .item-container:hover { opacity: 1; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 18px 40px -20px rgba(240, 96, 158, 0.45); }
/* Image box is a hard 4:3 (padding-ratio box) and the photo is absolutely
   positioned inside it, so no product image can ever change the card size. */
.gta-card .item-img { display: block; position: relative; height: 0; padding: 0 0 75%; overflow: hidden; background: var(--ne-white); border-bottom: 1px solid var(--ne-border); }
.gta-card .item-img > img {
  position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px);
  max-width: none; max-height: none; margin: 0; object-fit: contain; object-position: center;
}
.gta-card .item-info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px; }
.gta-card .item-title { margin: 0 0 10px; height: 60px; overflow: hidden; font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ne-text); }
.gta-card .item-title a { color: var(--ne-text); font-family: var(--ngg-opensans); font-weight: 700; font-size: 14px; line-height: 20px; -webkit-line-clamp: 3; line-clamp: 3; }
.gta-card .item-title a:hover { color: var(--vc-indigo); text-decoration: underline; }
.gta-card .item-container:hover .item-title { color: var(--ne-text); }
.gta-card .price { display: flex; flex-direction: column; justify-content: flex-end; height: 66px; margin: 0 0 12px; font-size: 14px; }
.gta-card .productList { list-style: none; margin: 0; padding: 0; }
.gta-card .productList li { margin: 0; }
.gta-card .productList .space { display: none; }
.gta-card .originalPrice { font-family: var(--ngg-opensans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ne-disabled); text-decoration: line-through; }
.gta-card .finalPrice { font-family: var(--ngg-opensans); font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: 0; color: var(--ne-text); }
.gta-card .instantSavings { display: block; font-family: var(--ngg-opensans); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ne-sale); }
.gta-card .shipping { display: none; }
.gta-card .soldout { display: block; font-family: var(--ngg-opensans); font-weight: 700; font-size: 16px; line-height: 26px; color: var(--ne-text-2); }
/* CTA — DS Button, Primary / Desktop / XL: 40px, Open Sans Bold 16, #FA9D28 on #212121, pill */
.gta-card .ngg-item-btn { margin: auto 0 0; }
.gta-card .ngg-item-btn a.btn,
.gta-card .ngg-item-btn a.btn:visited {
  display: flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
  width: 100%; height: 40px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--ne-yellow); color: var(--ne-text);
  font: 700 16px/22px var(--ngg-opensans); text-transform: none; letter-spacing: 0;
  transition: background-color 0.15s ease-out;
}
.gta-card .ngg-item-btn a.btn:hover { background: var(--ne-hover-yellow); color: var(--ne-text); }
.gta-card .ngg-item-btn a.btn:active { background: var(--ne-active-yellow); color: var(--ne-text); }
.gta-card .ngg-item-btn a.btn .fa { font-size: 16px; }

/* Gear Up for Leonida + More Storage — Figma: one 1440px-tall scene; the 8-up grid sits over the sunset
   Scene is anchored to the TOP of the section (horizon at 448px) so the cards overlap sun and water.
================================*/
.gta-gear {
  position: relative; overflow: hidden; padding: 112px 0 27px; isolation: isolate;
  background: var(--vc-ink);
}
/* Dot-matrix "sunrise" canvas: fills the whole section; the image rows sit at the top (fit=width) and the
   mask dissolves them into the dark canvas colour further down, behind the lower card rows. */
.gta-gear-bg { position: absolute; inset: 0; pointer-events: none; }
.gta-ascii {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 100%);
}
/* copy plate: soft dark pool behind the headings and paragraph, plus glyph shadows, for legibility over the dots */
.gta-gear-copy {
  position: relative; display: flex; flex-direction: column; align-items: center; align-self: stretch;
  padding: 72px clamp(16px, 4vw, 48px) 64px; margin: -72px calc(-1 * clamp(16px, 4vw, 48px)) 0;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(14, 10, 36, 0.85) 0%, rgba(14, 10, 36, 0.6) 55%, rgba(14, 10, 36, 0) 100%);
}
.gta-gear .gta-h2 { filter: drop-shadow(0 2px 4px rgba(14, 10, 36, 0.95)) drop-shadow(0 0 22px rgba(14, 10, 36, 0.9)); }
.gta-gear .gta-body--center { color: var(--head-text); font-weight: 700; font-size: 17px; line-height: 27px; text-shadow: 0 1px 3px rgba(14, 10, 36, 1), 0 0 16px rgba(14, 10, 36, 0.95), 0 0 32px rgba(14, 10, 36, 0.8); }
.gta-gear-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.gta-gear .gta-h2 { margin-bottom: 11px; }
.gta-gear .gta-h2 + .gta-h2 { max-width: 1280px; }
.gta-gear .gta-body--center { max-width: 1280px; width: 100%; margin-bottom: 0; }
.gta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); width: 100%; list-style: none; margin: 0 0 16px; padding: 0; }
.gta-gear .ngg-btn { margin: 16px auto 0; }
/* Shop all — DS Button Primary XL, 240 wide */
.gta-gear .ngg-shopall {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
  width: 240px; height: 40px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--ne-yellow); color: var(--ne-text);
  font: 700 16px/22px var(--ngg-opensans); text-transform: none; letter-spacing: 0;
  transition: background-color 0.15s ease-out;
}
.gta-gear .ngg-shopall:hover { background: var(--ne-hover-yellow); color: var(--ne-text); }
.gta-gear .ngg-shopall:active { background: var(--ne-active-yellow); color: var(--ne-text); }

.section-inner .disclaimer { padding: 16px 0 48px; max-width: 1100px; margin: 0 auto; font-size: 14px; line-height: 22px; color: var(--head-text); }

/* Stat band: 3-digit figure variant (e.g. "150 GB") so the pair still fits the right column
================================*/
.gta-stat--big.gta-stat--wide .gta-stat-num { font-size: clamp(100px, 10.4vw, 150px); }

/* PC build levels — three spec cards in the video-frame card language (ink-3, hairline, pink glow)
================================*/
.gta-tiers { position: relative; padding: 72px 0 64px; background: var(--vc-ink); }
.gta-tiers-head { margin: 0 0 36px; }
.gta-tiers-head .gta-eyebrow { margin-bottom: 10px; }
.gta-tiers-note { margin: 0; font-family: var(--ngg-opensans); font-size: 14px; line-height: 22px; color: rgba(245, 240, 255, 0.62); }
.gta-tier-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); list-style: none; margin: 0; padding: 0; align-items: stretch; }
.gta-tier {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 16px;
  background: var(--vc-ink-3); box-shadow: 0 0 0 1px var(--hairline), 0 30px 70px -30px rgba(240, 96, 158, 0.35);
}
.gta-tier--pop { box-shadow: 0 0 0 2px var(--vc-pink), 0 30px 70px -24px rgba(240, 96, 158, 0.55); }
.gta-tier-badge {
  position: absolute; top: -12px; left: 28px; padding: 4px 12px; border-radius: 30px; background: var(--sky-line);
  font-family: var(--ngg-montserrat); font-weight: 800; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vc-ink);
}
.gta-tier-name {
  margin: 0 0 6px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase;
  background: var(--sky-type); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--head-text);
}
.gta-tier-target { margin: 0 0 20px; font-family: var(--ngg-montserrat); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-gold); }
.gta-tier-specs { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; margin: 0 0 28px; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.gta-tier-specs dt { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; line-height: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 240, 255, 0.55); }
.gta-tier-specs dd { margin: 0; font-family: var(--ngg-opensans); font-size: 15px; line-height: 22px; color: var(--head-text); }
.gta-tier-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gta-tier-price { font-family: var(--ngg-opensans); font-size: 14px; line-height: 20px; color: rgba(245, 240, 255, 0.62); }
.gta-tier-price strong { display: block; font-weight: 800; font-size: 20px; line-height: 24px; color: var(--head-text); }
/* DS Button, Primary / Desktop / XL — same spec as the card CTAs */
.section-inner a.gta-btn, .section-inner a.gta-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; height: 40px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--ne-yellow); color: var(--ne-text); white-space: nowrap;
  font: 700 16px/22px var(--ngg-opensans); text-transform: none; letter-spacing: 0; transition: background-color 0.15s ease-out;
}
.section-inner a.gta-btn:hover { background: var(--ne-hover-yellow); color: var(--ne-text); }
.section-inner a.gta-btn:active { background: var(--ne-active-yellow); color: var(--ne-text); }

/* Launch block (beat 1) — section head + the shared 4-up product grid on plain ink
================================*/
.gta-launch { position: relative; padding: 72px 0 56px; background: var(--vc-ink); }
.gta-section-head { margin: 0 0 32px; }
.gta-section-head .gta-eyebrow { margin-bottom: 10px; }
.gta-section-head .gta-body { max-width: none; }

/* PC story (beat 4) — reuses the build-level card shell */
.gta-tier-specs--wide { grid-template-columns: 64px minmax(0, 1fr); }
.gta-tier-note { margin: auto 0 0; font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: rgba(245, 240, 255, 0.55); }
.gta-tower-list { display: grid; gap: 10px; list-style: none; margin: 0 0 28px; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.gta-tower-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ngg-opensans); font-size: 15px; line-height: 22px; color: var(--head-text); }
.gta-tower-list .fa { flex: 0 0 16px; margin-top: 4px; font-size: 14px; color: var(--vc-gold); }
.gta-tower-list li.is-next { font-weight: 700; }
.gta-tower-list li.is-next .fa { color: var(--vc-pink); }

/* Quick answers — static FAQ list, hairline dividers
================================*/
.gta-faq { position: relative; padding: 72px 0 40px; background: var(--vc-ink); }
.gta-faq-inner { max-width: 900px; }
.gta-faq .gta-h2 { margin-bottom: 24px; }
.gta-faq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.gta-faq-item { padding: 20px 0 22px; border-bottom: 1px solid var(--hairline); }
.gta-faq-q { margin: 0 0 6px; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 18px; line-height: 26px; color: var(--head-text); }
.gta-faq-a { margin: 0; font-family: var(--ngg-opensans); font-size: 16px; line-height: 26px; color: var(--body-text); }


/* ===== Gear Up for Vice City (v3 layout) ===== */
/* Hero copy (inside the dusk backdrop): CTAs + countdown chips */
.gta-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.section-inner a.gta-btn--ghost, .section-inner a.gta-btn--ghost:visited {
  background: rgba(14, 10, 36, 0.35); color: var(--head-text); box-shadow: inset 0 0 0 1.5px rgba(245, 240, 255, 0.55);
}
.section-inner a.gta-btn--ghost:hover { background: rgba(245, 240, 255, 0.1); color: var(--head-text); }
.gta-countdown { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gta-cd { min-width: 140px; padding: 12px 16px; border-radius: 12px; background: rgba(28, 21, 70, 0.72); box-shadow: inset 0 0 0 1px var(--hairline); }
.gta-cd b {
  display: block; font-family: var(--ngg-montserrat); font-weight: 900; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--vc-gold), var(--vc-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vc-gold);
}
.gta-cd span { display: block; margin-top: 6px; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 240, 255, 0.72); }

/* Story: copy left, numbered launch checklist right */
.gta-story { position: relative; z-index: 1; padding: 48px 0 56px; }
.gta-story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.gta-story .gta-eyebrow { margin-bottom: 10px; }
.gta-story .gta-body + .gta-body { margin-top: 14px; }
.gta-checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.gta-checklist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--hairline); }
.gta-checklist .n {
  font-family: var(--ngg-montserrat); font-weight: 900; font-size: 32px; line-height: 1;
  background: var(--sky-line); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vc-gold);
}
.gta-checklist strong { display: block; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: var(--head-text); }
.gta-checklist small { display: block; margin-top: 2px; font-family: var(--ngg-opensans); font-size: 14px; line-height: 20px; color: var(--body-text); }
.section-inner .gta-checklist a { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-gold); white-space: nowrap; }
.section-inner .gta-checklist a:hover { color: var(--vc-pink); }

/* Timeline: four dated stops on a rail */
.gta-timeline { position: relative; z-index: 1; padding: 24px 0 72px; }
.gta-timeline .gta-eyebrow { margin-bottom: 10px; }
.gta-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 30px 0 0; padding: 0; list-style: none; }
.gta-tl li { position: relative; padding-top: 24px; border-top: 2px solid rgba(185, 156, 255, 0.35); }
.gta-tl li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--vc-lavender); }
.gta-tl li.is-now { border-top-color: var(--vc-pink); }
.gta-tl li.is-now::before { background: var(--vc-pink); box-shadow: 0 0 14px var(--vc-pink); }
.gta-tl b { display: block; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; color: var(--vc-gold); }
.gta-tl h3 { margin: 6px 0 6px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 22px; line-height: 1.2; text-transform: uppercase; color: var(--head-text); }
.gta-tl p { margin: 0; font-family: var(--ngg-opensans); font-size: 15px; line-height: 24px; color: var(--body-text); }

/* Checklist stops: section art (reused), two-column head, fact chips, 4-up product grid, shop-all row */
.gta-stop { position: relative; padding: 80px 0 72px; background: var(--vc-ink); overflow: hidden; }
.gta-stop::before, .gta-stop::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.gta-stop::before { background-repeat: no-repeat; background-size: cover; background-position: center 30%; opacity: 0.2; }
.gta-stop::after { background: linear-gradient(180deg, var(--vc-ink) 0%, rgba(14, 10, 36, 0.4) 16%, rgba(14, 10, 36, 0.86) 50%, var(--vc-ink) 80%); }
.gta-stop--ps5::before { background-image: url(../imgs/bg-ps5.jpg); }
.gta-stop--net::before { background-image: url(../imgs/bg-install.jpg); opacity: 0.28; background-position: center 60%; }
.gta-stop--setup::before { background-image: url(../imgs/bg-xbox.jpg); }
.gta-stop--display::before { background-image: url(../imgs/bg-external.jpg); }
.gta-stop-inner { position: relative; z-index: 1; }
.gta-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: end; margin-bottom: 28px; }
.gta-cat-num { display: block; margin-bottom: 10px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vc-gold); }
.gta-cat-head .gta-h2 { margin: 0; }
.gta-cat-head .gta-body + .gta-body { margin-top: 12px; }
.gta-factbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.gta-fact { padding: 6px 14px; border-radius: 30px; background: rgba(185, 156, 255, 0.08); box-shadow: inset 0 0 0 1px var(--hairline); font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: var(--body-text); }
.gta-fact b { font-weight: 700; color: var(--head-text); }
.gta-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 22px; padding: 4px; border: 0; border-radius: 30px; box-shadow: inset 0 0 0 1px var(--hairline); }
.gta-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gta-switch label { padding: 8px 16px; border-radius: 30px; cursor: pointer; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body-text); }
.gta-switch input:checked + label { background: var(--sky-line); color: var(--vc-ink); }
.gta-switch input:focus-visible + label { outline: 3px solid var(--ne-yellow); outline-offset: 2px; }
.gta-card.is-filtered { display: none; }
.gta-shopall { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.gta-shopall small { font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: rgba(245, 240, 255, 0.62); }

/* Stop 05 sits on the dot-matrix sunrise: head + chips centred on the copy plate */
.gta-gear .gta-cat-num { text-align: center; }
.gta-gear .gta-factbar { justify-content: center; margin: 20px 0 0; }
.gta-gear .gta-gear-copy { margin-bottom: 28px; }

/* Launch Night Kits: build-level card shell, ordered lists */
.gta-kits { position: relative; padding: 72px 0 64px; background: var(--vc-ink); }
.gta-kit-list { list-style: decimal outside; margin: 0 0 24px; padding: 18px 0 0 22px; border-top: 1px solid var(--hairline); font-family: var(--ngg-opensans); font-size: 15px; line-height: 26px; color: var(--head-text); }
.gta-kit-list li { display: list-item; padding-left: 4px; }
.gta-kit-list li::marker { color: var(--vc-gold); font-family: var(--ngg-montserrat); font-weight: 800; }
.gta-kit-note { margin-top: auto; font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: rgba(245, 240, 255, 0.62); }

/* Gear Up guides: accordion of long-form buying guides */
.gta-guides { position: relative; padding: 72px 0 32px; background: var(--vc-ink); }
.gta-guides-inner { max-width: 900px; }
.gta-guide { border-bottom: 1px solid var(--hairline); }
.gta-guide:first-of-type { border-top: 1px solid var(--hairline); }
.gta-guide summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; }
.gta-guide summary::-webkit-details-marker { display: none; }
.gta-guide summary h3 { margin: 0; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 20px; line-height: 1.3; color: var(--head-text); }
.gta-guide summary .gta-chev { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-gold); white-space: nowrap; }
.gta-guide summary .gta-chev::after { content: '+'; display: inline-block; margin-left: 8px; font-size: 18px; transition: transform 0.2s ease-out; }
.gta-guide[open] summary .gta-chev::after { transform: rotate(45deg); }
.gta-guide summary:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 4px; }
.gta-post { padding: 0 0 28px; font-family: var(--ngg-opensans); font-size: 16px; line-height: 26px; color: var(--body-text); }
.gta-post .gta-byline { margin: 0 0 14px; font-size: 13px; color: rgba(245, 240, 255, 0.55); }
.gta-post h4 { margin: 24px 0 8px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--head-text); }
.gta-post p { margin: 0 0 12px; }
.gta-post ul { margin: 0 0 12px; padding-left: 20px; }
.gta-post strong { color: var(--head-text); }
.section-inner .gta-post a { color: var(--vc-gold); font-weight: 700; }
.section-inner .gta-post a:hover { color: var(--vc-pink); }
.gta-tablewrap { overflow-x: auto; margin: 6px 0 14px; }
.gta-post table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.gta-post th, .gta-post td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.gta-post th { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 240, 255, 0.62); }
.gta-post td { color: var(--head-text); }

@media only screen and (max-width: 900px) {
  .gta-story-grid, .gta-cat-head { grid-template-columns: 1fr; gap: 24px; }
  .gta-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .gta-stop { padding: 56px 0; }
}
@media only screen and (max-width: 480px) {
  .gta-tl { grid-template-columns: 1fr; }
  .gta-checklist li { grid-template-columns: 36px minmax(0, 1fr); }
  .gta-checklist li > a { grid-column: 2; }
  .gta-cd { min-width: 0; flex: 1 1 0; }
  .gta-ctas .gta-btn { width: 100%; }
}
/* Game-first variant: live countdown in the hero, pre-order block under it, kits on the sunrise */
.gta-timer { margin-top: 26px; }
.gta-timer-label { margin: 0 0 10px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vc-gold); }
.gta-timer-row { display: flex; flex-wrap: nowrap; gap: 10px; }
.gta-timer-cell { flex: 0 0 auto; min-width: 104px; padding: 12px 14px 10px; border-radius: 12px; text-align: center; background: rgba(28, 21, 70, 0.72); box-shadow: inset 0 0 0 1px var(--hairline); }
.gta-timer-cell b {
  display: block; font-family: var(--ngg-montserrat); font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--vc-gold), var(--vc-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vc-gold);
}
.gta-timer-cell span { display: block; margin-top: 6px; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 240, 255, 0.72); }
.gta-timer-note { margin: 10px 0 0; font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: rgba(245, 240, 255, 0.62); }
.gta-timer.is-live .gta-timer-row { opacity: 0.45; }
.gta-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gta-hero-game { position: relative; margin-top: 64px; }
.gta-hero-game-head { margin-bottom: 24px; }
.gta-hero-game-head .gta-eyebrow { margin-bottom: 10px; }
.gta-hero-game-head .gta-factbar { margin: 16px 0 0; }
.gta-gear--kits .gta-tier-row { margin-top: 8px; }
@media only screen and (max-width: 900px) {
  .gta-hero-game { margin-top: 40px; }
}
@media only screen and (max-width: 480px) {
  .gta-timer-row { gap: 6px; }
  .gta-timer-cell { flex: 1 1 0; min-width: 0; padding: 10px 4px 8px; }
  .gta-timer-cell b { font-size: 28px; }
  .gta-timer-cell span { font-size: 10px; letter-spacing: 0.06em; }
}
/* Round 2: ASCII sunrise behind the opening section; timeline as a standalone section */
.gta-intro--ascii { overflow: hidden; }
.gta-intro--ascii > .gta-wrap { position: relative; z-index: 1; }
.gta-intro--ascii .gta-intro-inner { position: relative; }
.gta-intro--ascii .gta-intro-inner::before {
  content: ''; position: absolute; inset: -56px -72px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(14, 10, 36, 0.82) 0%, rgba(14, 10, 36, 0.58) 55%, rgba(14, 10, 36, 0) 100%);
}
.gta-intro--ascii .gta-h1, .gta-intro--ascii .gta-date { filter: drop-shadow(0 2px 4px rgba(14, 10, 36, 0.95)) drop-shadow(0 0 22px rgba(14, 10, 36, 0.9)); }
.gta-intro--ascii .gta-body--lg { color: var(--head-text); text-shadow: 0 1px 3px rgba(14, 10, 36, 1), 0 0 16px rgba(14, 10, 36, 0.95), 0 0 32px rgba(14, 10, 36, 0.8); }
.gta-intro--ascii .gta-timer-note { color: rgba(245, 240, 255, 0.78); text-shadow: 0 1px 3px rgba(14, 10, 36, 1); }
.gta-timeline--standalone { padding: 72px 0 56px; background: var(--vc-ink); }
/* Round 5 (10-14): workbook section order, workbook-scale hero, clickable checklist rows, full-width banner,
   Gamer Zone panel, guides + FAQ across the full content container */

/* Hero: single column like the workbook: date chip, two-line H1 ("Vice" outlined), subtagline, CTA, live timer */
.gta-intro.gta-intro--hero { padding: clamp(96px, 12vh, 144px) 0 clamp(72px, 10vh, 112px); }
/* dissolve the dot-matrix into the dusk wash at the bottom instead of ending on a hard line */
.gta-intro--hero .gta-ascii {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 70%, rgba(0,0,0,0) 100%);
}
.gta-hero-stack { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.gta-hero-stack::before {
  content: ''; position: absolute; inset: -72px 22% -56px -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 40% 50%, rgba(14, 10, 36, 0.82) 0%, rgba(14, 10, 36, 0.55) 60%, rgba(14, 10, 36, 0) 100%);
}
.gta-datechip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 14px; font-family: var(--ngg-montserrat); filter: drop-shadow(0 2px 4px rgba(14, 10, 36, 0.95)) drop-shadow(0 0 22px rgba(14, 10, 36, 0.9)); }
.gta-datechip .gta-date-num { font-size: clamp(56px, 7.2vw, 108px); }
.gta-datechip .gta-date-sub { font-size: clamp(14px, 1.5vw, 22px); letter-spacing: 0.14em; }
.gta-hero-h1 {
  margin: 0; font-family: var(--ngg-montserrat); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 11.6vw, 128px); line-height: 0.92; letter-spacing: -0.025em; color: var(--head-text);
  filter: drop-shadow(0 2px 4px rgba(14, 10, 36, 0.95)) drop-shadow(0 0 22px rgba(14, 10, 36, 0.9));
}
.gta-hero-l1, .gta-hero-l2 { display: block; }
.gta-hero-l1, .gta-hero-l2 > span { background: var(--sky-type); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gta-hero-h1 em { font-style: normal; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: clamp(1.5px, 0.16vw, 2.5px) var(--head-text); }
.gta-intro--hero .gta-subtag {
  margin: 22px 0 0; font-family: var(--ngg-montserrat); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.35;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--head-text);
  text-shadow: 0 1px 3px rgba(14, 10, 36, 1), 0 0 16px rgba(14, 10, 36, 0.9);
}
.gta-intro--hero .gta-ctas { margin-top: 26px; }
.section-inner .gta-intro--hero a.gta-btn { height: 52px; padding: 0 32px; font-size: 18px; }
.gta-intro--hero .gta-timer { margin-top: 32px; }

/* Checklist: the whole row is the link, with a hover state */
.gta-checklist li { display: block; padding: 0; }
.section-inner .gta-checklist a.gta-check, .section-inner .gta-checklist a.gta-check:visited {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin: 0 -12px; padding: 16px 12px; border-radius: 12px; color: inherit; text-decoration: none;
  font: inherit; letter-spacing: normal; text-transform: none; white-space: normal;
  transition: background-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.gta-check-go { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-gold); white-space: nowrap; transition: color 0.18s ease-out, transform 0.18s ease-out; }
.gta-checklist .n, .gta-checklist strong { transition: filter 0.18s ease-out, color 0.18s ease-out; }
.section-inner .gta-checklist a.gta-check:hover, .section-inner .gta-checklist a.gta-check:focus-visible {
  background: rgba(185, 156, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(185, 156, 255, 0.3);
}
.gta-checklist a.gta-check:hover .gta-check-go, .gta-checklist a.gta-check:focus-visible .gta-check-go { color: var(--vc-pink); transform: translateX(4px); }
.gta-checklist a.gta-check:hover .n, .gta-checklist a.gta-check:focus-visible .n { filter: drop-shadow(0 0 10px rgba(240, 96, 158, 0.65)); }
.gta-checklist a.gta-check:hover strong, .gta-checklist a.gta-check:focus-visible strong { color: #FFFFFF; }

/* Stop 01: sunset glow instead of section art */
.gta-stop--game::before { opacity: 1; background-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(240, 96, 158, 0.3), rgba(240, 96, 158, 0) 70%), radial-gradient(ellipse 45% 50% at 88% 8%, rgba(255, 198, 90, 0.16), rgba(255, 198, 90, 0) 70%); }
.gta-stop--game::after { background: linear-gradient(180deg, var(--vc-ink) 0%, rgba(14, 10, 36, 0) 28%, rgba(14, 10, 36, 0) 72%, var(--vc-ink) 100%); }

/* Affirm prequalify banner: full container width, logo | copy | button */
.gta-affirm { position: relative; padding: 8px 0 24px; background: var(--vc-ink); }
.gta-affirm-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 32px;
  padding: 20px 32px; border-radius: 14px; background: #F4F5FA;
  box-shadow: 0 24px 60px -30px rgba(240, 96, 158, 0.45);
}
.gta-affirm-logo { display: block; width: auto; height: 34px; }
.gta-affirm-copy { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 32px; border-left: 1px solid rgba(16, 16, 33, 0.16); }
.gta-affirm-eyebrow { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #5C5F70; }
.gta-affirm-copy strong { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 20px; line-height: 1.25; color: #101021; }
.gta-affirm-btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; padding: 12px 26px; border-radius: 999px;
  background: #101021; color: #FFFFFF; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 15px; line-height: 1;
}
.gta-affirm-btn:hover { background: var(--vc-indigo); }
.gta-affirm-btn:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

/* Newegg Gamer Zone: one panel, story + list left, event and venue cards right, closing line across */
.gta-zone { position: relative; padding: 48px 0 72px; background: var(--vc-ink); }
.gta-zone-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px;
  padding: clamp(28px, 4vw, 56px); border-radius: 20px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(240, 96, 158, 0.22), rgba(240, 96, 158, 0) 70%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(255, 198, 90, 0.1), rgba(255, 198, 90, 0) 70%),
    var(--vc-ink-2);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 40px 90px -40px rgba(240, 96, 158, 0.45);
}
/* dot-matrix texture, fading out behind the copy */
.gta-zone-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(185, 156, 255, 0.24) 1px, rgba(185, 156, 255, 0) 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0) 35%, #000 100%); mask-image: linear-gradient(100deg, rgba(0,0,0,0) 35%, #000 100%);
}
.gta-zone-main .gta-eyebrow { margin-bottom: 10px; }
.gta-zone-main .gta-h2 { margin-bottom: 16px; }
.gta-zone-h3 { margin: 28px 0 14px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--head-text); }
.gta-zone-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gta-zone-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; }
.gta-zone-list p { margin: 0; font-family: var(--ngg-opensans); font-size: 16px; line-height: 24px; color: var(--body-text); }
.gta-zone-list b { color: var(--head-text); }
.gta-zone-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(240, 96, 158, 0.14); box-shadow: inset 0 0 0 1px rgba(240, 96, 158, 0.35); color: var(--vc-pink-lt); font-size: 20px; }
.gta-zone-side { display: flex; flex-direction: column; gap: 16px; }
.gta-zone-date { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-radius: 14px; background: rgba(14, 10, 36, 0.55); box-shadow: inset 0 0 0 1px rgba(240, 96, 158, 0.4); }
.gta-zone-kicker { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-gold); }
.gta-zone-day {
  font-family: var(--ngg-montserrat); font-weight: 900; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vc-gold);
}
.gta-zone-day b { font-weight: 900; }
.gta-zone-where { font-family: var(--ngg-opensans); font-size: 14px; line-height: 20px; color: var(--body-text); }
.gta-zone-where .fa, .gta-zone-venue .fa { width: 14px; margin-right: 6px; color: var(--vc-gold); text-align: center; }
.gta-zone-venue .fa { width: 20px; margin-right: 8px; font-size: 18px; }
.gta-zone-card { padding: 20px 24px; border-radius: 14px; background: rgba(28, 21, 70, 0.6); box-shadow: inset 0 0 0 1px var(--hairline); }
.gta-zone-card .gta-zone-h3 { margin-top: 0; margin-bottom: 8px; font-size: 16px; }
.gta-zone-card p { margin: 0; font-family: var(--ngg-opensans); font-size: 15px; line-height: 24px; color: var(--body-text); }
.gta-zone-venue { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; font-style: normal; font-family: var(--ngg-opensans); font-size: 16px; line-height: 26px; color: var(--head-text); }
.gta-zone-venue strong { font-family: var(--ngg-montserrat); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--head-text); }
.gta-zone-foot { grid-column: 1 / -1; margin: 0; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--ngg-opensans); font-size: 17px; line-height: 26px; color: var(--body-text); }
.gta-zone-foot b {
  font-family: var(--ngg-montserrat); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--sky-line); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vc-gold);
}

/* Guides and FAQ span the full content container; an open guide keeps a readable line length */
.gta-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.gta-faq-item { padding: 22px 0 24px; }
.gta-faq .gta-eyebrow { display: block; margin-bottom: 10px; }
.section-inner .gta-wrap > .disclaimer { max-width: none; }

@media only screen and (max-width: 900px) {
  .gta-h2 { line-height: 1.1; }
  .gta-zone-panel { grid-template-columns: 1fr; }
  .gta-faq-list { grid-template-columns: 1fr; }
  .gta-hero-stack::before { inset: -48px -8% -40px -8%; }
}
@media only screen and (max-width: 480px) {
  .section-inner .gta-checklist a.gta-check { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; }
  .gta-check-go { grid-column: 2; }
  .gta-intro--hero .gta-subtag { font-size: 15px; letter-spacing: 0.04em; }
  .section-inner .gta-intro--hero a.gta-btn { height: 48px; font-size: 17px; }
  .gta-affirm-bar { flex-direction: column; padding: 20px; text-align: center; }
  .gta-affirm-copy { align-items: center; padding-left: 0; border-left: 0; }
  .gta-affirm-btn { width: 100%; }
  .gta-zone-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .gta-zone-ico { width: 40px; height: 40px; font-size: 18px; }
}
/* Round 6 (10-14): hero sunset with pointer depth + page-load intro (masked hollow letters), window view behind
   the five stops (fixed skyline, dappled light, mullions, swaying fronds), Gamer Zone card background */

/* --- Hero scene: full-bleed sunset, overscanned so the look-around never shows an edge --- */
.section-inner { max-width: 2000px; }   /* the hero art spans 2000px; beyond that the wide-monitor edge fade takes over */
.gta-intro--hero { overflow: hidden; }
.gta-intro--hero::before { display: none; }
.gta-intro--hero::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none; background: linear-gradient(180deg, rgba(14, 10, 36, 0) 0%, rgba(14, 10, 36, 0.6) 45%, var(--vc-ink) 100%); }
.gta-hero-scene { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; will-change: transform; }
.gta-hero-bg {
  position: absolute; inset: -10% -8%; background: url(../imgs/bg-install.jpg) center 42% / cover no-repeat;
  transform-origin: 50% 50%; will-change: transform, opacity, filter;
}
/* warm sun bloom on the right, dark pool on the left so the copy stays readable */
.gta-hero-haze {
  position: absolute; inset: -10% -8%;
  background:
    radial-gradient(ellipse 36% 48% at 76% 44%, rgba(255, 198, 90, 0.22), rgba(255, 198, 90, 0) 70%),
    linear-gradient(90deg, rgba(14, 10, 36, 0.78) 0%, rgba(14, 10, 36, 0.52) 34%, rgba(14, 10, 36, 0.1) 62%, rgba(14, 10, 36, 0) 100%),
    linear-gradient(180deg, rgba(14, 10, 36, 0.55) 0%, rgba(14, 10, 36, 0) 22%, rgba(14, 10, 36, 0) 42%, rgba(14, 10, 36, 0.3) 54%, rgba(14, 10, 36, 0.66) 66%, rgba(14, 10, 36, 0.9) 76%, var(--vc-ink) 85%, var(--vc-ink) 100%);
}
.gta-hero-stack { will-change: transform; }
.gta-hero-stack::before { display: none; }
.gta-hero-head { position: relative; }
.gta-hero-h1 em { font-style: inherit; color: inherit; -webkit-text-stroke: 0; }
/* "Vice" is filled like the rest of the line (hollow effect removed) */
.gta-hero-l2 { background: var(--sky-type); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Stacking: the fixed layer sits under the stops; everything else paints over it --- */
.gta-dusk { z-index: 1; background: linear-gradient(180deg, var(--vc-ink) 0%, var(--vc-ink) calc(100% - 240px), rgba(14, 10, 36, 0) 100%); }
/* the hero ends on ink, so the story and timeline start on ink and warm up gently from there (the old sky wash is off) */
.gta-dusk > .gta-sky { display: none; }
.gta-story, .gta-timeline { background: none; }
.gta-affirm, .gta-zone, .gta-guides, .gta-faq, .section-inner > .gta-foot { position: relative; z-index: 1; background: var(--vc-ink); }
/* the Gamer Zone card's glow spills past its section; lift the section so the next one can't clip it */
.gta-zone { z-index: 2; padding-bottom: 104px; }
/* same for the Affirm banner's glow over the Gamer Zone section: each section paints over the one below it */
.gta-affirm { z-index: 3; padding-bottom: 56px; }
.gta-stop { z-index: 1; background: transparent; overflow: visible; }
.gta-stop::before, .gta-stop::after { display: none; }
/* gradient headings use background-clip, so a text-shadow would paint through the glyphs: use drop-shadow instead */
.gta-stop .gta-h2 { filter: drop-shadow(0 2px 3px rgba(14, 10, 36, 0.95)) drop-shadow(0 0 16px rgba(14, 10, 36, 0.85)); }
.gta-stop .gta-cat-num, .gta-stop .gta-body { text-shadow: 0 1px 3px rgba(14, 10, 36, 0.9), 0 0 18px rgba(14, 10, 36, 0.7); }
/* the Affirm banner section rises out of the lit wall on a gradient instead of a hard edge */
.gta-affirm { padding-top: 96px; background: linear-gradient(180deg, rgba(14, 10, 36, 0) 0%, var(--vc-ink) 220px); }
.gta-stop .gta-fact { background: rgba(14, 10, 36, 0.55); }
.gta-stop .gta-card { box-shadow: 0 24px 50px -24px rgba(14, 10, 36, 0.9); }

/* --- Dappled light (after the React Bits Pro demo): a rotated violet window of light with a bright core and a wide
   bloom on the dark wall; its cross bars and the palm fronds are soft shadows. Fixed to the viewport, faded in only
   while a stop is on screen; the light and shadows come into focus on first appearance --- */
.gta-dapple {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.7s ease-out; contain: strict;
  background: var(--vc-ink);   /* same ink as the page, so the wall matches the body colour at the edge fades */
}
.gta-dapple.is-on { opacity: 1; }
/* the window is projected onto the wall from the upper right: a perspective tilt, not just a rotation */
.gta-dapple { --gta-dapple-tf: translate(-50%, -50%) perspective(1100px) rotateX(20deg) rotateY(-28deg) rotate(-13deg); }
.gta-dapple-bloom, .gta-dapple-pane { position: absolute; left: 64%; top: 46%; width: 58vw; height: 37vw; transform: var(--gta-dapple-tf); }
.gta-dapple-bloom { width: 80vw; height: 58vw; background: radial-gradient(ellipse at 50% 50%, rgba(150, 128, 255, 0.55) 0%, rgba(124, 100, 242, 0.3) 40%, rgba(124, 100, 242, 0) 68%); }
/* the pane: fuzzy-edged light with a bright core (boosted to read through the wash); a cloud passes now and then */
.gta-dapple-glow {
  position: absolute; inset: -6%; mix-blend-mode: screen; opacity: 0.9;
  background: radial-gradient(ellipse 72% 62% at 42% 40%, #EAE3FF 0%, #BBAAFF 38%, #9681FF 68%, #7F66F0 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: gta-cloud 46s ease-in-out infinite;
}
/* a vague cityscape outside the window: soft, feathered into the light, tinted by it */
/* the skyline sits under the light and shows through it; softened in the image file, feathered to the same edges */
.gta-dapple-view {
  position: absolute; inset: -6%; background: url(../imgs/window-city.jpg) center 45% / cover no-repeat; opacity: 0.95;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,0), #000 20%, #000 80%, rgba(0,0,0,0));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* the cross bars are shadows on the light: softened less than the edges so they stay legible */
.gta-dapple-bars { position: absolute; inset: -6%; }
.gta-dapple-bars::before, .gta-dapple-bars::after { content: ''; position: absolute; }
.gta-dapple-bars::before { top: 0; bottom: 0; left: 46%; width: 8%; background: linear-gradient(90deg, rgba(10, 7, 28, 0) 0%, rgba(10, 7, 28, 0.82) 38%, rgba(10, 7, 28, 0.82) 62%, rgba(10, 7, 28, 0) 100%); }
.gta-dapple-bars::after { left: 0; right: 0; top: 45%; height: 10%; background: linear-gradient(180deg, rgba(10, 7, 28, 0) 0%, rgba(10, 7, 28, 0.82) 38%, rgba(10, 7, 28, 0.82) 62%, rgba(10, 7, 28, 0) 100%); }
@keyframes gta-cloud { 0%, 56% { opacity: 1; } 62% { opacity: 0.66; } 68% { opacity: 0.6; } 76% { opacity: 1; } 100% { opacity: 1; } }
/* film grain on the lit area only */
.gta-dapple-grain { position: absolute; inset: 0; display: block; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: 0.22; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%); }
/* ink wash in front of everything: the same page colour at 68% keeps #F5F0FF copy above 6:1 and the 14px gold labels above 4.5:1
   at the brightest point, and leaves the unlit wall exactly the body colour */
.gta-dapple-wash { position: absolute; inset: 0; background: rgba(14, 10, 36, 0.68); }
/* frond shadows over the light from the top right; soft because the fronds hang away from the wall; a slow gust shifts them */
.gta-dapple-shadows { position: absolute; inset: 0; filter: blur(3px); animation: gta-gust 8.5s ease-in-out infinite alternate; }
.gta-dapple-leaf { position: absolute; display: block; height: auto; fill: rgba(8, 5, 24, 0.78); will-change: transform; }
.gta-dapple-leaf--a { right: -59.2vw; top: -13.5vw; width: 60vw; transform-origin: 8% 22%; transform: rotate(150deg); animation: gta-sway-a 5.8s ease-in-out infinite alternate; }
.gta-dapple-leaf--b { right: -52vw; top: 6.4vw; width: 50vw; transform-origin: 8% 22%; transform: rotate(165deg); animation: gta-sway-b 4.8s ease-in-out infinite alternate; animation-delay: -2s; }
.gta-dapple-leaf--c { left: 80.8vw; top: -11.8vw; width: 40vw; transform-origin: 8% 22%; transform: rotate(110deg); animation: gta-sway-c 5.3s ease-in-out infinite alternate; animation-delay: -3.2s; }
@keyframes gta-sway-a { from { transform: rotate(147.5deg); } to { transform: rotate(152.5deg); } }
@keyframes gta-sway-b { from { transform: rotate(162.5deg); } to { transform: rotate(167.5deg); } }
@keyframes gta-sway-c { from { transform: rotate(107.5deg); } to { transform: rotate(112.5deg); } }
@keyframes gta-gust { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8px, 5px, 0); } }
.gta-dapple:not(.is-on) .gta-dapple-leaf, .gta-dapple:not(.is-on) .gta-dapple-shadows, .gta-dapple:not(.is-on) .gta-dapple-glow { animation-play-state: paused; }
/* stop copy sits over the light: full-strength text colour for contrast */
.gta-stop .gta-body, .gta-stop .gta-shopall small { color: var(--head-text); }
/* first appearance: blurred and dim, then into focus */
.gta-dapple:not(.is-focused) .gta-dapple-shadows { filter: blur(30px); opacity: 0.25; }
.gta-dapple:not(.is-focused) .gta-dapple-pane { opacity: 0.3; transform: var(--gta-dapple-tf) scale(1.06); }
.gta-dapple.is-focused .gta-dapple-shadows { transition: filter 1.9s ease-out, opacity 1.5s ease-out; }
.gta-dapple.is-focused .gta-dapple-pane { transition: opacity 1.5s ease-out, transform 2s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Gamer Zone card: faded, blurred venue photo under the panel gradients --- */
.gta-zone-bg { position: absolute; inset: -24px; z-index: -2; background: url(../imgs/gamer-zone.jpg) center / cover no-repeat; filter: blur(7px) saturate(1.15); opacity: 0.44; }
.gta-zone-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(21, 15, 51, 0.92) 0%, rgba(21, 15, 51, 0.72) 48%, rgba(21, 15, 51, 0.5) 100%); }
.gta-zone-panel { background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(240, 96, 158, 0.18), rgba(240, 96, 158, 0) 70%), var(--vc-ink-2); }
.gta-zone-panel::before { z-index: -1; }
.gta-zone-logo { display: block; width: 190px; height: auto; margin: 0 0 6px -10px; }

@media only screen and (max-width: 900px) {
  .gta-dapple { --gta-dapple-tf: translate(-50%, -50%) perspective(900px) rotateX(16deg) rotateY(-22deg) rotate(-12deg); }
  .gta-dapple-bloom, .gta-dapple-pane { left: 58%; top: 42%; width: 118vw; height: 76vw; }
  .gta-dapple-bloom { width: 140vw; height: 96vw; }
  .gta-dapple-leaf--a { right: -98vw; top: -21.8vw; width: 100vw; }
  .gta-dapple-leaf--b { right: -85.3vw; top: -0.8vw; width: 84vw; }
  .gta-dapple-leaf--c { display: none; }
  .gta-hero-haze { background: linear-gradient(180deg, rgba(14, 10, 36, 0.6) 0%, rgba(14, 10, 36, 0.35) 40%, rgba(14, 10, 36, 0.55) 75%, var(--vc-ink) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .gta-dapple-leaf, .gta-dapple-shadows, .gta-dapple-glow { animation: none; }
  .gta-hero-scene, .gta-hero-stack { transform: none !important; }
}

/* round 13: guide CTAs as DS buttons; Gamer Zone hours in the date card; address on one line */
.gta-guide-cta { margin-top: 20px; }
.section-inner .gta-guide-cta a.gta-btn { color: var(--ne-text); font-weight: 700; }
.gta-zone-where { font-size: 16px; line-height: 24px; color: var(--head-text); }
.gta-nowrap { white-space: nowrap; }

/* round 16: the day count as a lockup: big gradient number, DAYS + "until GTA VI unlocks" beside it, in a frosted
   capsule with a thin gradient ring and a pink glow; the preload note sits alongside and wraps under on phones */
.gta-timer--days { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.gta-timer-lockup {
  position: relative; display: inline-flex; align-items: center; gap: 20px; padding: 14px 32px 14px 26px; border-radius: 20px;
  background: rgba(14, 10, 36, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px -22px rgba(240, 96, 158, 0.6), inset 0 1px 0 rgba(245, 240, 255, 0.08);
}
.gta-timer-lockup::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0.85;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.gta-timer-num {
  font-family: var(--ngg-montserrat); font-weight: 900; font-size: clamp(64px, 6.6vw, 96px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(240, 96, 158, 0.3));
}
.gta-timer-unit { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.gta-timer-unit > span { font-family: var(--ngg-montserrat); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-gold); }
.gta-timer-unit > small { font-family: var(--ngg-opensans); font-weight: 600; font-size: 14px; line-height: 20px; color: rgba(245, 240, 255, 0.82); }
.gta-timer--days .gta-timer-note { margin: 0; font-size: 14px; line-height: 22px; color: rgba(245, 240, 255, 0.78); text-shadow: 0 1px 3px rgba(14, 10, 36, 1); }
.gta-timer.is-live .gta-timer-lockup::before { opacity: 1; }
@media only screen and (max-width: 480px) {
  .gta-timer--days { gap: 12px; }
  .gta-timer-lockup { gap: 14px; padding: 12px 22px 12px 18px; border-radius: 16px; }
  .gta-timer-num { font-size: 56px; }
  .gta-timer-unit > span { font-size: 18px; }
  .gta-timer-unit > small { font-size: 13px; line-height: 18px; }
  .gta-timer--days .gta-timer-note { flex-basis: 100%; }
}

/* round 15: each stop ends with its Gear Up guide as an article card on its own row: gold rule, book tile, kicker with
   the read time, title, "Read the guide". It opens in place and the article runs under the title. */
.gta-shopall .gta-shopall-note { flex-basis: 100%; }
.gta-stop-read { margin-top: 28px; }
.gta-stop-read .gta-guide--stop {
  position: relative; overflow: hidden; border: 1px solid rgba(185, 156, 255, 0.22); border-radius: 14px;
  background: linear-gradient(90deg, rgba(28, 21, 70, 0.9) 0%, rgba(14, 10, 36, 0.72) 100%);
}
.gta-stop-read .gta-guide--stop:first-of-type { border-top: 1px solid rgba(185, 156, 255, 0.22); }
.gta-stop-read .gta-guide--stop::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sky-line); }
.gta-stop-read .gta-guide--stop summary { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; padding: 18px 24px 18px 26px; }
.gta-stop-read .gta-guide--stop summary:hover { background: rgba(185, 156, 255, 0.06); }
.gta-guide-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 198, 90, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 198, 90, 0.4); color: var(--vc-gold); font-size: 22px; }
.gta-guide-head { min-width: 0; }
.gta-guide-kicker { display: block; margin-bottom: 4px; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-gold); }
.gta-stop-read .gta-guide--stop summary h3 { font-size: 19px; }
.gta-stop-read .gta-guide--stop .gta-post { padding: 2px 26px 28px 96px; }
.gta-stop-read .gta-guide--stop .gta-byline { display: none; }
@media only screen and (max-width: 900px) {
  .gta-stop-read .gta-guide--stop .gta-post { padding-left: 26px; }
}
@media only screen and (max-width: 480px) {
  .gta-stop-read .gta-guide--stop summary { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; padding: 16px 18px 16px 20px; }
  .gta-stop-read .gta-guide--stop summary .gta-chev { grid-column: 2; }
  .gta-guide-ico { width: 44px; height: 44px; font-size: 19px; }
  .gta-stop-read .gta-guide--stop summary h3 { font-size: 17px; }
  .gta-stop-read .gta-guide--stop .gta-post { padding: 2px 18px 24px 20px; }
}

/* round 18: the hero's Pre-order button is white with no arrow */
.section-inner a.gta-btn--white, .section-inner a.gta-btn--white:visited { background: #FFFFFF; color: var(--ne-text); box-shadow: 0 10px 30px -12px rgba(14, 10, 36, 0.8); }
.section-inner a.gta-btn--white:hover { background: #EDE8FF; color: var(--ne-text); }
.section-inner a.gta-btn--white:active { background: #DCD3FF; color: var(--ne-text); }

/* round 19: three-date timeline + Vintage Vice City Pack callout */
.gta-tl.gta-tl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gta-post .gta-post-note { margin: -4px 0 14px; font-size: 13px; line-height: 20px; font-style: italic; color: rgba(245, 240, 255, 0.66); }
@media only screen and (max-width: 900px) {
  .gta-tl.gta-tl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media only screen and (max-width: 640px) {
  .gta-tl.gta-tl--3 { grid-template-columns: 1fr; row-gap: 28px; }
}

/* round 19: the countdown is back to days / hours / minutes / seconds, in the same frosted lockup */
.gta-timer--full { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.gta-timer--full .gta-timer-label { flex-basis: 100%; margin: 0; }
.gta-timer-lockup--full { gap: 0; padding: 14px 10px; }
.gta-tu { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 0 16px; }
.gta-tu + .gta-tu { border-left: 1px solid rgba(245, 240, 255, 0.14); }
.gta-tu b {
  font-family: var(--ngg-montserrat); font-weight: 900; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(240, 96, 158, 0.3));
}
.gta-tu small { margin-top: 8px; font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 255, 0.78); }
.gta-timer--full .gta-timer-note { margin: 0; font-size: 14px; line-height: 22px; color: rgba(245, 240, 255, 0.78); text-shadow: 0 1px 3px rgba(14, 10, 36, 1); }
.gta-timer--full.is-live .gta-timer-lockup { opacity: 0.55; }
@media only screen and (max-width: 480px) {
  .gta-timer-lockup--full { padding: 12px 4px; width: 100%; justify-content: space-between; }
  .gta-tu { min-width: 0; flex: 1 1 0; padding: 0 6px; }
  .gta-tu b { font-size: 34px; }
  .gta-tu small { font-size: 10px; letter-spacing: 0.08em; }
  .gta-timer--full .gta-timer-note { flex-basis: 100%; }
}

/* round 20: the launch-day problem as visuals: three blocker stat tiles, then the 5-step checklist as icon tiles */

/* round 20: Mark your calendar as icon nodes on a rail (solid to the next date, dashed to launch) + a bonus card */

/* round 21: story without the blocker tiles; calmer step hover with a downward arrow */

/* round 21: the calendar rail spans the whole row (nodes left / centre / right); softer "Now" node */

/* round 21: the deadline reads as a date stamp, not a button */

/* round 22: story line runs the full container width */

/* round 22: "Now" node in a deep pink-to-purple instead of the washed-out tone */

/* round 22: preload note is 12px at every breakpoint on its own dark backing, so it clears WCAG AA (4.5:1) over any
   part of the hero art: #F5F0FF on ink at 80% stays above 9:1 even over pure white */
.gta-intro--hero .gta-timer--full .gta-timer-note {
  display: inline-flex; align-items: center; flex-basis: auto; margin: 0; padding: 6px 12px; border-radius: 999px;
  font-family: var(--ngg-opensans); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.01em;
  color: #F5F0FF; background: rgba(14, 10, 36, 0.8); box-shadow: inset 0 0 0 1px rgba(245, 240, 255, 0.12); text-shadow: none;
}

/* round 22: the hero's bottom ink fade must sit under the copy; it was painting over the lower hero (timer, preload note) */
.gta-intro--hero::after { z-index: 1; }
.gta-intro--hero .gta-hero-stack { position: relative; z-index: 2; }

/* round 23: a full section gap between the 5-step checklist and Mark your calendar, matching the product stops
   (72px bottom + 80px top on desktop, 56px + 56px from 900px down) */
.gta-story { padding-bottom: 72px; }
.gta-timeline { padding-top: 80px; }
@media only screen and (max-width: 900px) {
  .gta-story { padding-bottom: 56px; }
  .gta-timeline { padding-top: 56px; }
}

/* ===== Mark your calendar (consolidated in round 25) =====
   Desktop is about 15% smaller than round 22, phones about 30% smaller, tablets in between. Body text never drops
   below 12px. --node drives the icon circles and where the rail meets them. */
.gta-timeline .gta-h2 { font-size: clamp(22px, 2.9vw, 39px); line-height: 1.1; }
.gta-road { --node: 56px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.gta-road li { position: relative; }
.gta-road::before, .gta-road::after { content: ''; position: absolute; top: calc(var(--node) / 2 - 1px); height: 2px; z-index: 0; }
.gta-road::before { left: calc(var(--node) / 2); width: calc(50% - var(--node)); background: linear-gradient(90deg, rgba(240, 96, 158, 0.8), var(--vc-lavender)); }
.gta-road::after { left: calc(50% + var(--node) / 2); right: calc(var(--node) / 2); background: repeating-linear-gradient(90deg, rgba(185, 156, 255, 0.7) 0 8px, rgba(185, 156, 255, 0) 8px 14px); }
.gta-road-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  font-size: calc(var(--node) * 0.375); color: var(--vc-lavender); background: var(--vc-ink); box-shadow: inset 0 0 0 2px rgba(185, 156, 255, 0.6);
}
.gta-road li.is-now .gta-road-node {
  color: #FFFFFF; background: linear-gradient(135deg, #9C2C76 0%, #5B2A9E 100%);
  box-shadow: 0 0 0 5px rgba(240, 96, 158, 0.14), 0 0 18px rgba(240, 96, 158, 0.3);
}
.gta-road-date {
  display: block; margin: 16px 0 4px; font-family: var(--ngg-montserrat); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--vc-gold) 0%, var(--vc-pink) 55%, var(--vc-lavender) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.gta-road h3 { margin: 0 0 4px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; color: var(--head-text); }
.gta-road p { margin: 0; max-width: 30ch; font-family: var(--ngg-opensans); font-size: 13px; line-height: 20px; color: var(--body-text); }
.gta-road li:nth-child(2) { text-align: center; }
.gta-road li:nth-child(2) .gta-road-node, .gta-road li:nth-child(2) p { margin-left: auto; margin-right: auto; }
.gta-road li:nth-child(3) { text-align: right; }
.gta-road li:nth-child(3) .gta-road-node, .gta-road li:nth-child(3) p { margin-left: auto; }

.gta-bonus {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; margin-top: 34px; padding: 18px 22px; border-radius: 16px;
  background: linear-gradient(100deg, rgba(255, 198, 90, 0.12) 0%, rgba(240, 96, 158, 0.08) 60%, rgba(28, 21, 70, 0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 198, 90, 0.35);
}
.gta-bonus-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; font-size: 23px; color: var(--vc-ink); background: linear-gradient(135deg, var(--vc-gold), #FF8F5A); box-shadow: 0 10px 26px -10px rgba(255, 198, 90, 0.7); }
.gta-bonus-txt h3 { margin: 0 0 4px; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 17px; line-height: 1.2; text-transform: uppercase; color: var(--vc-gold); }
.gta-bonus-txt p { margin: 0; font-family: var(--ngg-opensans); font-size: 14px; line-height: 21px; color: var(--head-text); }
.gta-bonus-due { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; border-left: 1px solid rgba(255, 198, 90, 0.35); }
.gta-bonus-due small { font-family: var(--ngg-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 240, 255, 0.72); }
.gta-bonus-due b { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--ngg-montserrat); font-weight: 800; font-size: 17px; line-height: 1.1; color: var(--vc-gold); }
.gta-bonus-due b .fa { font-size: 15px; }

@media only screen and (max-width: 900px) {
  .gta-road { --node: 52px; gap: 24px; margin-top: 24px; }
  .gta-road-date { margin-top: 14px; font-size: 30px; }
  .gta-road h3 { font-size: 14px; }
  .gta-bonus { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 16px; margin-top: 28px; padding: 16px 18px; }
  .gta-bonus-ico { width: 48px; height: 48px; border-radius: 12px; font-size: 21px; }
  .gta-bonus-txt h3 { font-size: 16px; }
  .gta-bonus-due { grid-column: 2; flex-direction: row; align-items: baseline; gap: 10px; padding: 0; border-left: 0; }
  .gta-bonus-due b { font-size: 15px; }
  .gta-bonus-due b .fa { font-size: 13px; }
}
@media only screen and (max-width: 640px) {
  .gta-timeline .gta-h2 { font-size: 18px; line-height: 1.15; }
  .gta-road { --node: 44px; grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .gta-road::before, .gta-road::after { display: none; }
  .gta-road li { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; text-align: left; }
  .gta-road li::after { content: ''; position: absolute; top: var(--node); left: calc(var(--node) / 2 - 1px); width: 2px; height: calc(100% - var(--node)); z-index: 0; background: linear-gradient(180deg, var(--vc-pink), var(--vc-lavender)); }
  .gta-road li + li::after { background: repeating-linear-gradient(180deg, rgba(185, 156, 255, 0.7) 0 8px, rgba(185, 156, 255, 0) 8px 14px); }
  .gta-road li:last-child { padding-bottom: 0; }
  .gta-road li:last-child::after { display: none; }
  .gta-road-node { grid-row: 1 / span 3; }
  .gta-road li:nth-child(2), .gta-road li:nth-child(3) { text-align: left; }
  .gta-road li:nth-child(2) .gta-road-node, .gta-road li:nth-child(2) p, .gta-road li:nth-child(3) .gta-road-node, .gta-road li:nth-child(3) p { margin-left: 0; margin-right: 0; }
  .gta-road-date { margin: 2px 0 3px; font-size: 21px; }
  .gta-road h3 { font-size: 13px; }
  .gta-road p { max-width: none; font-size: 12px; line-height: 18px; }
  .gta-bonus { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; padding: 16px; }
  .gta-bonus-ico { width: 44px; height: 44px; font-size: 19px; }
  .gta-bonus-txt h3 { font-size: 14px; }
  .gta-bonus-txt p { font-size: 12px; line-height: 18px; }
  .gta-bonus-due { grid-column: 1; }
  .gta-bonus-due b { font-size: 14px; }
}

/* round 26: checklist labels nudge down on hover (their arrows point down: the rows jump down the page) */
.gta-checklist a.gta-check:hover .gta-check-go, .gta-checklist a.gta-check:focus-visible .gta-check-go { transform: translateY(2px); }

/* round 26: hero headline: a little more line height, and a soft, gradual shadow instead of a tight dark outline */
.gta-intro--hero .gta-hero-h1 {
  line-height: 1;
  filter: drop-shadow(0 6px 26px rgba(14, 10, 36, 0.55)) drop-shadow(0 2px 12px rgba(14, 10, 36, 0.35));
}

/* round 27: the checklist label carries a down arrow in a circle; the circle follows the label colour
   (gold, pink on hover) and fills on hover while the arrow nudges down */
.gta-check-go { display: inline-flex; align-items: center; gap: 8px; }
.gta-check-arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color 0.18s ease-out, transform 0.18s ease-out;
}
.gta-check-arrow .fa { transition: color 0.18s ease-out; }
.gta-checklist a.gta-check:hover .gta-check-go, .gta-checklist a.gta-check:focus-visible .gta-check-go { transform: none; }
.gta-checklist a.gta-check:hover .gta-check-arrow, .gta-checklist a.gta-check:focus-visible .gta-check-arrow { background: currentColor; transform: translateY(2px); }
.gta-checklist a.gta-check:hover .gta-check-arrow .fa, .gta-checklist a.gta-check:focus-visible .gta-check-arrow .fa { color: var(--vc-ink); }

/* round 28: lighter arrow circles. Desktop/tablet: 18px circle, 1px ring. Phones: the label text moves off-screen
   (it repeats the row title; screen readers still read it) and only the circle sits at the right of the row. */
.gta-check-go { gap: 6px; }
.gta-check-arrow { width: 18px; height: 18px; font-size: 9px; box-shadow: inset 0 0 0 1px currentColor; }
@media only screen and (max-width: 480px) {
  .section-inner .gta-checklist a.gta-check { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; }
  .gta-check-go { grid-column: auto; gap: 0; font-size: 0; letter-spacing: 0; }
  .gta-check-arrow { width: 20px; height: 20px; font-size: 9px; }
}
/* ===== end v3 layout ===== */

/* Wide monitors: the page caps at 1920px, so dissolve the section backgrounds into the body colour
   at the left and right edges instead of ending on a hard line.
================================*/
@media only screen and (min-width: 2001px) {
  .section-inner {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 200px, #000 calc(100% - 200px), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 200px, #000 calc(100% - 200px), rgba(0,0,0,0) 100%);
  }
}

/* Responsive
================================*/
@media only screen and (max-width: 1240px) {
  .gta-install-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .gta-palm-shadow--1 { width: 300px; left: 0; }
  .gta-palm-shadow--3 { width: 280px; right: 0; }
  .gta-palm-shadow--2 { width: 240px; left: 80px; }
  .gta-palm-shadow--4 { width: 220px; right: 120px; }
}
@media only screen and (max-width: 900px) {
  .gta-tier-row { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; row-gap: 28px; }
  .gta-tiers, .gta-faq, .gta-launch { padding-top: 56px; }
  :root { --card-gap: 16px; }
  .gta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gta-intro-inner, .gta-install-inner, .gta-zig-inner, .gta-zig--flip .gta-zig-inner { grid-template-columns: 1fr; }
  .gta-intro { padding-top: 56px; }
  .gta-date { align-items: flex-start; text-align: left; }
  .gta-zig--flip .gta-zig-copy { order: 0; }
  .gta-install { padding: 64px 0; }
  .gta-stats { justify-content: flex-start; }
  .gta-palm-shadow--1 { width: 220px; top: -40px; left: -20px; }
  .gta-palm-shadow--3 { width: 200px; top: 40px; right: -30px; }
  .gta-palm-shadow--2, .gta-palm-shadow--4 { display: none; }
  .gta-zig--ps5::before, .gta-zig--xbox::before, .gta-zig--ext::before { background-size: cover; background-position: center; }
  .gta-zig::after { background: linear-gradient(180deg, rgba(14, 10, 36, 0.2), var(--vc-ink) 70%); }
  .gta-gear { padding-top: 72px; }
  .gta-gear .gta-body--center { margin-bottom: 32px; }
  .gta-gear-copy { margin-top: -40px; padding-top: 40px; padding-bottom: 32px; }
}
@media only screen and (max-width: 640px) {
  .gta-stat--big.gta-stat--wide .gta-stat-num { font-size: 96px; }
  .gta-faq-q { font-size: 16px; line-height: 24px; }
  /* vertical videos become a swipe row, still ordered left to right */
  .gta-videos-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gta-video-row {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 0 clamp(16px, 4vw, 48px) 8px;
  }
  .gta-video-row::-webkit-scrollbar { display: none; }
  .gta-vslide { flex: 0 0 72%; scroll-snap-align: center; }
  .gta-stat-num { font-size: 56px; line-height: 64px; }
  .gta-stat--big .gta-stat-num { font-size: 120px; }
}
@media only screen and (max-width: 480px) {
  .gta-tier { padding: 28px 20px 22px; }
  .gta-tier-foot { flex-direction: column; align-items: stretch; }
  .section-inner a.gta-btn { width: 100%; }
  :root { --card-gap: 12px; }
  .gta-card .item-img > img { top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .gta-card .item-info { padding: 12px; }
  .gta-card .ngg-item-btn a.btn { padding: 0 12px; font-size: 14px; }
  .gta-video-playicon { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .gta-video-playicon::after { left: 23px; top: 18px; border-width: 12px 0 12px 19px; }
  .gta-gear .ngg-shopall { width: 100%; }
  .gta-palm-shadow--3 { display: none; }
  .gta-palm-shadow--1 { width: 180px; opacity: 0.4; }
}