@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #000;
  color: #fff;
  scroll-behavior: smooth;
}

body {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(255,255,255,0.06) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(255,255,255,0.035), transparent 35%, rgba(255,255,255,0.025) 70%, transparent);
  background-size: 7px 7px, 11px 11px, 100% 100%;
  mix-blend-mode: screen;
}

main {
  width: 100%;
  background: #000;
}

.access-screen,
.intro,
.page {
  isolation: isolate;
}

.access-screen::before,
.intro::before,
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-position: 16px 16px;
  background-size: 145px auto;
}

.access-screen::before,
.intro::before,
.page-home::before,
.product-page-white::before,
.product-page-pink::before {
  background-image: url("assets/monogram-dark.png");
  opacity: 0.24;
}

.product-page-black::before {
  background-image: url("assets/monogram-light.png");
  opacity: 0.28;
}

.product-page::before {
  background-position: center top;
}


.hero,
.bottom-left,
.bottom-right,
.archive-link,
.product-shirt {
  position: relative;
  z-index: 2;
}

.intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: introOut 2.15s ease forwards;
}

.intro-logo {
  width: min(70vw, 860px);
  max-width: 80%;
  height: auto;
  image-rendering: auto;
  animation: introLogo 1.85s ease both;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: min(62vw, 860px);
  text-align: center;
  z-index: 5;
  animation: heroIn 0.9s ease-out 1.9s both;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.hero-logo {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
}

.instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(10px, 1.5vh, 18px);
  color: #fff;
  font-family: "Arial Black", Impact, Haettenschweiler, sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.075em;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  z-index: 999;
  cursor: pointer;
  padding: 11px 18px 10px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
  transition: transform 0.22s ease, opacity 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.instagram:hover {
  transform: translateY(-2px);
  opacity: 0.92;
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 28px rgba(255,255,255,0.14);
}

.insta-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}

.bottom-left {
  position: absolute;
  left: 5.2vw;
  bottom: 8.5vh;
  width: min(20vw, 215px);
  z-index: 2;
  animation: fadeUp 0.85s ease-out 2.05s both;
  will-change: opacity, transform;
}

.scars-logo {
  width: 100%;
  height: auto;
  display: block;
}

.archive-link {
  position: absolute;
  right: 4.5vw;
  bottom: 5.5vh;
  color: rgba(87, 255, 122, 0.62);
  text-decoration: none;
  font-family: "Courier New", monospace;
  font-size: clamp(7px, 0.62vw, 9px);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  text-shadow: 0 0 7px rgba(87,255,122,0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease, text-shadow 0.2s ease, transform 0.55s ease;
}

.archive-link:hover {
  opacity: 0.95;
  text-shadow: 0 0 11px rgba(87,255,122,0.28);
  transform: translateY(-1px);
}

body.archive-revealed .archive-link {
  opacity: 0.72;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.bottom-right {
  position: absolute;
  right: 4.5vw;
  bottom: 11vh;
  color: #fff;
  font-size: clamp(13px, 1.15vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  animation: fadeUp 0.85s ease-out 2.15s both;
  will-change: opacity, transform;
}

.product-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

.product-shirt {
  position: relative;
  z-index: 2;
  width: min(72vw, 860px);
  max-height: 92vh;
  max-height: 92svh;
  height: auto;
  object-fit: contain;
  display: block;
  filter: contrast(1.03);
  transition: transform 0.25s ease, opacity 0.25s ease;
  animation: fadeUp 0.9s ease-out both;
}



.product-page-black {
  background: #ffffff;
}

.product-page-black .product-shirt {
  background: transparent;
}

.product-page-white {
  background: #000;
}

.product-page-pink {
  background: #000;
}

.product-page-pink .product-shirt {
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-shirt:hover {
  transform: scale(1.018);
}

@keyframes introOut {
  0%, 72% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes introLogo {
  0% { opacity: 0; transform: scale(0.96); filter: blur(5px) drop-shadow(0 0 0 rgba(255, 186, 0, 0)); }
  32% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 18px rgba(255, 186, 0, 0.22)); }
  72% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 18px rgba(255, 186, 0, 0.22)); }
  100% { opacity: 0; transform: scale(1.035); filter: blur(2px) drop-shadow(0 0 25px rgba(255, 186, 0, 0.12)); }
}

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroIn { from { opacity: 0; transform: translate3d(-50%, calc(-50% + 18px), 0); } to { opacity: 1; transform: translate3d(-50%, -50%, 0); } }

@media (max-width: 760px) {
  body::before { display: none; }

  .access-screen::before,
  .intro::before,
  .page::before,
  .archive-page::before {
    background-size: 96px auto;
    background-position: center top;
  }

  .access-screen::before,
  .intro::before,
  .page-home::before,
  .product-page-white::before,
  .product-page-pink::before,
  .archive-page::before {
    opacity: 0.19;
  }

  .product-page-black::before {
    opacity: 0.36;
  }

  .intro-logo { width: 88vw; }
  .hero { top: 48.4%; width: 92vw; }
  .instagram { margin-top: 13px; font-size: 12px; padding: 12px 17px 11px; gap: 8px; }
  .insta-icon { width: 17px; height: 17px; }
  .bottom-left { left: 5vw; bottom: 7vh; width: 31vw; max-width: 128px; }
  .bottom-right { right: 5vw; bottom: 8vh; max-width: 45vw; font-size: 11px; line-height: 1.2; text-align: right; letter-spacing: 0.06em; }
  .product-page { padding: 4vh 3vw; }
  .product-shirt { width: 96vw; max-height: 94svh; }
}

@media (max-width: 430px) {
  body::before { display: none; }

  .access-screen::before,
  .intro::before,
  .page::before,
  .archive-page::before {
    background-size: 82px auto;
    background-position: center top;
  }

  .access-screen::before,
  .intro::before,
  .page-home::before,
  .product-page-white::before,
  .product-page-pink::before,
  .archive-page::before {
    opacity: 0.17;
  }

  .product-page-black::before {
    opacity: 0.36;
  }

  .hero { top: 48.2%; width: 94vw; }
  .bottom-left { width: 30vw; max-width: 118px; }
  .bottom-right { bottom: 7.5vh; font-size: 10px; }
  .product-page { padding: 3.5vh 2vw; }
  .product-shirt { width: 98vw; max-height: 95svh; }
}

/* Access screen: DVD TOUCH HERE + pixel login sequence before the gold logo animation */

.access-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  overflow: hidden;
  background: #000;
  transition: opacity 0.52s ease, visibility 0.52s ease;
}

.touch-box {
  position: absolute;
  left: 0;
  top: 0;
  width: min(76vw, 340px);
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dvd-color, rgba(255, 255, 255, 0.68));
  background: rgba(0, 0, 0, 0.94);
  color: var(--dvd-color, rgba(255, 255, 255, 0.62));
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(22px, 5vw, 34px);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.72;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dvd-color, #fff) 16%, transparent),
    0 0 26px color-mix(in srgb, var(--dvd-color, #fff) 18%, transparent);
  animation: touchBlink 1.95s ease-in-out infinite;
  will-change: transform, color, border-color;
  -webkit-tap-highlight-color: transparent;
}

.touch-box:active {
  filter: brightness(1.35);
}

.login-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 740px);
  transform: translate(-50%, -50%) scale(0.99);
  display: none;
  grid-template-columns: 1fr;
  gap: 16px;
  opacity: 0;
  color: #fff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  image-rendering: pixelated;
}

.login-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(150px, 0.74fr) minmax(250px, 1.2fr);
  align-items: center;
  gap: 16px;
}

.login-label {
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(10px, 1.15vw, 14px);
  line-height: 1.2;
  text-align: right;
  text-transform: none;
  letter-spacing: -0.05em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.72), 0 0 18px rgba(255,255,255,0.08);
  white-space: nowrap;
}

.login-input {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(0,0,0,0.88);
  color: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.22),
    inset -1px -1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(0,0,0,0.80),
    0 0 22px rgba(255,255,255,0.05);
  overflow: hidden;
  white-space: nowrap;
  text-transform: none;
  font-size: clamp(8px, 1.02vw, 13px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.login-input.is-active {
  border-color: rgba(255,255,255,0.96);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.32),
    inset -1px -1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(255,255,255,0.12),
    0 0 24px rgba(255,255,255,0.16);
}

.field-value {
  display: inline-block;
  color: rgba(255,255,255,0.96);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.86);
}

.typing-caret {
  display: none;
  width: 0.7em;
  height: 1.15em;
  margin-left: 0.16em;
  background: rgba(255,255,255,0.88);
  animation: caretBlink 0.58s step-end infinite;
  flex: 0 0 auto;
}

.login-input.is-active .typing-caret {
  display: inline-block;
}

.shop-open-button {
  justify-self: center;
  margin-top: 4px;
  min-width: min(72vw, 300px);
  min-height: 42px;
  padding: 0 24px;
  border: 2px solid #111;
  background: #bfbfb7;
  color: rgba(22,22,22,0.92);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: clamp(9px, 1.18vw, 13px);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.05em;
  cursor: pointer;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.78),
    inset -3px -3px 0 rgba(0,0,0,0.36),
    0 4px 0 #060606;
  -webkit-tap-highlight-color: transparent;
}

.shop-open-button:hover,
.shop-open-button.is-hovered {
  background: #d0d0c7;
}

.shop-open-button.is-pressed {
  transform: translateY(3px);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.56),
    inset -2px -2px 0 rgba(0,0,0,0.38),
    0 1px 0 #060606;
}

.fake-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 28px;
  height: 36px;
  z-index: 10002;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(50vw, 58vh, 0);
  transition: transform 0.42s cubic-bezier(.21,.82,.22,1), opacity 0.12s ease;
  background: url("assets/cursor-arrow.svg") center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.55));
  image-rendering: pixelated;
  transform-origin: 3px 3px;
}

.fake-cursor.is-hand {
  width: 28px;
  height: 36px;
  background-image: url("assets/cursor-hand.svg");
}

.fake-cursor.is-hidden {
  opacity: 0 !important;
}

body.cursor-ready .fake-cursor {
  opacity: 1;
}

body.access-login .touch-box {
  display: none;
}

body.access-login .login-panel {
  display: grid;
  animation: loginPanelIn 0.35s ease-out forwards;
}

body.access-done .access-screen {
  opacity: 0;
  visibility: hidden;
}

/* The gold logo animation starts only after the access sequence. */
.intro {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.intro-logo {
  opacity: 0;
  animation: none;
}

body.show-intro .intro {
  opacity: 1;
  visibility: visible;
  animation: introOut 2.15s ease forwards;
}

body.show-intro .intro-logo {
  animation: introLogo 1.85s ease both;
}

body:not(.show-intro) .hero,
body:not(.show-intro) .bottom-left,
body:not(.show-intro) .bottom-right {
  opacity: 0;
  animation: none;
}

body.show-intro .hero {
  animation: heroIn 0.9s ease-out 1.9s both;
}

body.show-intro .bottom-left {
  animation: fadeUp 0.85s ease-out 2.05s both;
}

body.show-intro .bottom-right {
  animation: fadeUp 0.85s ease-out 2.15s both;
}

@keyframes touchBlink {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.86; }
}

@keyframes loginPanelIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.985) translateY(8px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}

@keyframes caretBlink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}


@media (max-width: 760px) {
  .touch-box {
    height: 52px;
    width: min(62vw, 245px);
    font-size: clamp(15px, 4.2vw, 22px);
    letter-spacing: 0.045em;
    word-spacing: -0.18em;
  }

  .login-panel {
    width: min(88vw, 420px);
    gap: 10px;
    transform: translate(-50%, -50%) scale(0.96);
  }

  .login-row {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 8px;
  }

  .login-label {
    font-size: clamp(6.7px, 1.85vw, 9px);
    letter-spacing: -0.10em;
  }

  .login-input {
    height: 30px;
    padding: 0 7px;
    font-size: clamp(5.6px, 1.58vw, 8px);
    letter-spacing: -0.10em;
  }

  .shop-open-button {
    min-height: 34px;
    min-width: min(54vw, 220px);
    padding: 0 14px;
    font-size: 7.4px;
    box-shadow:
      inset 2px 2px 0 rgba(255,255,255,0.78),
      inset -2px -2px 0 rgba(0,0,0,0.36),
      0 3px 0 #060606;
  }
}

@media (max-width: 430px) {
  .touch-box {
    height: 48px;
    width: min(64vw, 225px);
    font-size: 16px;
  }

  .login-panel {
    width: min(88vw, 350px);
    gap: 9px;
    transform: translate(-50%, -50%) scale(0.95);
  }

  .login-row {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 7px;
  }

  .login-label { font-size: 6.25px; }

  .login-input {
    height: 28px;
    padding: 0 6px;
    font-size: 5.25px;
    letter-spacing: -0.12em;
  }

  .shop-open-button {
    min-height: 32px;
    min-width: min(58vw, 205px);
    font-size: 6.8px;
  }
}


.server-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  color: rgba(87,255,122,0.78);
  opacity: 0;
  font-family: "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.server-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(87,255,122,0.13);
  border-top-color: rgba(87,255,122,0.78);
  animation: serverSpin 0.8s linear infinite;
  box-shadow: 0 0 10px rgba(87,255,122,0.12);
}

.server-text {
  font-size: clamp(9px, 0.88vw, 12px);
  text-align: center;
  text-shadow: 0 0 9px rgba(87,255,122,0.16);
  line-height: 1.4;
}

body.access-loading .server-loading {
  display: flex;
  animation: loadingIn 0.18s ease-out forwards;
}

@keyframes serverSpin { to { transform: rotate(360deg); } }
@keyframes loadingIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


.archive-body {
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  overflow: hidden;
}

.archive-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #000;
  isolation: isolate;
  overflow: hidden;
}

.archive-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/monogram-dark.png");
  background-repeat: repeat;
  background-size: 145px auto;
  background-position: 16px 16px;
  opacity: 0.24;
}

.archive-center {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  place-items: center;
  text-align: center;
  padding: 24px;
  font-family: "Courier New", monospace;
}

.archive-code {
  color: rgba(87,255,122,0.82);
  font-size: clamp(10px, 1.05vw, 14px);
  letter-spacing: 0.06em;
  word-spacing: -0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(87,255,122,0.22);
}

.archive-back {
  color: rgba(87,255,122,0.58);
  font-size: clamp(8px, 0.78vw, 11px);
  letter-spacing: 0.10em;
  text-decoration: none;
  text-transform: lowercase;
  text-shadow: 0 0 9px rgba(87,255,122,0.15);
}

.archive-back:hover {
  color: rgba(87,255,122,0.88);
}

@media (max-width: 760px) {
  .archive-link { right: 5vw; bottom: 4.8vh; font-size: 7.2px; letter-spacing: 0.10em; }

  .archive-page::before {
    background-size: 96px auto;
    background-position: center top;
  }
}

@media (max-width: 430px) {
  .archive-link { right: 5vw; bottom: 4.6vh; font-size: 6.8px; letter-spacing: 0.09em; }

  .archive-page::before {
    background-size: 82px auto;
    background-position: center top;
  }

  .archive-code {
    font-size: 9px;
    letter-spacing: 0.10em;
  }

  .archive-back {
    font-size: 7.4px;
  }
}


body.shop-direct .intro {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

body.shop-direct .hero,
body.shop-direct .bottom-left,
body.shop-direct .bottom-right {
  opacity: 1 !important;
  animation: none !important;
}

body.shop-direct .access-screen {
  display: none !important;
}


/* 32.7s stay interruption overlay */

body.stay-locked {
  overflow: hidden;
}

.stay-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}

body.stay-overlay-on .stay-overlay {
  display: flex;
}

.stay-card {
  display: none;
  width: min(92vw, 860px);
  text-align: center;
  color: #fff;
  pointer-events: auto;
}

.stay-card-wasted {
  width: 100%;
  max-width: none;
}

.stay-overlay[data-mode="wasted"] .stay-card-wasted,
.stay-overlay[data-mode="shop"] .stay-card-shop {
  display: block;
}

.wasted-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(14px, 2.1vw, 22px) 16px;
  background: rgba(78, 78, 78, 0.88);
  transform: rotate(-1.35deg);
  box-shadow: 0 0 34px rgba(0,0,0,0.22);
}

.wasted-title {
  color: #b60000;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(38px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.78),
    0 0 2px rgba(0,0,0,0.86),
    0 0 10px rgba(110,0,0,0.12);
}

.wasted-subtitle {
  margin-top: clamp(18px, 2.8vw, 32px);
  font-family: "Courier New", monospace;
  font-size: clamp(11px, 1.05vw, 15px);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 0 12px rgba(255,255,255,0.08);
}

.stay-actions {
  margin-top: clamp(18px, 2.6vw, 30px);
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stay-button {
  min-width: 170px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(0,0,0,0.74);
  color: rgba(255,255,255,0.88);
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255,255,255,0.05);
}

.stay-button:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.quit-button {
  border-color: rgba(225,18,18,0.72);
  color: rgba(255,180,180,0.90);
}

.stay-card-shop {
  font-family: "Press Start 2P", "Courier New", monospace;
  text-transform: uppercase;
  image-rendering: pixelated;
}

.shop-over-title {
  margin: 0 auto;
  filter: saturate(1.9) contrast(1.45);
  font-size: clamp(26px, 6.2vw, 76px);
  line-height: 1.25;
  letter-spacing: 0.16em;
  color: transparent;
  background: linear-gradient(
    180deg,
    #a32218 0 31%,
    #e7b141 31% 43%,
    #fdf95d 43% 52%,
    #0803b2 52% 77%,
    #0d0687 77% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 6px 0 #03006f,
    0 -2px 0 rgba(120,0,0,0.58),
    0 0 1px rgba(0,0,0,0.72);
}

.shop-over-message {
  margin-top: clamp(18px, 2.2vw, 28px);
  color: rgba(255,255,255,0.90);
  font-size: clamp(6px, 0.78vw, 10px);
  line-height: 1.7;
  letter-spacing: 0.10em;
  white-space: nowrap;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.8),
    0 0 14px rgba(255,255,255,0.12);
}

.shop-over-rule {
  margin-top: clamp(18px, 2.4vw, 30px);
  color: rgba(255,255,255,0.72);
  font-size: clamp(5.4px, 0.62vw, 8px);
  line-height: 1.7;
  letter-spacing: 0.11em;
  white-space: nowrap;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.76),
    0 0 10px rgba(255,255,255,0.08);
}

.shop-countdown {
  margin-top: clamp(22px, 3.2vw, 38px);
  color: #fff;
  font-size: clamp(34px, 6vw, 70px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.86);
}

.shop-countdown.is-gold {
  color: #fbaf17;
  text-shadow:
    2px 2px 0 rgba(0,0,0,0.8),
    0 0 18px rgba(251,175,23,0.42);
}

@media (max-width: 760px) {
  .stay-overlay {
    padding: 18px;
  }

  .wasted-band {
    padding: 14px 12px;
  }

  .wasted-title {
    font-size: clamp(34px, 11vw, 56px);
  }

  .wasted-subtitle {
    font-size: 9.5px;
    line-height: 1.6;
  }

  .stay-actions {
    gap: 10px;
  }

  .stay-button {
    min-width: min(40vw, 160px);
    min-height: 38px;
    font-size: 8.2px;
    padding: 0 10px;
  }

  .shop-over-title {
    font-size: clamp(22px, 8vw, 42px);
    letter-spacing: 0.10em;
  }

  .shop-over-message {
    font-size: 6.4px;
    line-height: 1.8;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
  }

  .shop-over-rule {
    margin-top: 18px;
    font-size: 5.5px;
    white-space: nowrap;
  }

  .shop-countdown {
    font-size: 44px;
  }
}

@media (max-width: 430px) {
  .wasted-title {
    font-size: clamp(28px, 10vw, 44px);
  }

  .wasted-subtitle {
    font-size: 8px;
    letter-spacing: 0.045em;
  }

  .stay-button {
    min-width: 138px;
    font-size: 7.2px;
  }

  .shop-over-title {
    font-size: 28px;
  }

  .shop-over-message {
    font-size: 5.4px;
  }

  .shop-over-rule {
    margin-top: 16px;
    font-size: 4.7px;
  }
}


.story-link {
  position: absolute;
  left: 50%;
  bottom: 2.4vh;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(20,20,20,0.62);
  font-family: "Courier New", monospace;
  font-size: clamp(7px, 0.7vw, 10px);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.story-link:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.story-body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #000;
  overflow: hidden;
}

.story-scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #000;
  isolation: isolate;
  color: #fff;
  font-family: "Courier New", monospace;
}

.story-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("assets/monogram-dark.png");
  background-repeat: repeat;
  background-size: 145px auto;
  background-position: center top;
  opacity: 0.18;
}

.story-game {
  position: relative;
  z-index: 2;
  width: min(92vw, 940px);
  min-height: min(82svh, 720px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
}

.professor-area {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}

.professor-sprite {
  width: clamp(88px, 13vw, 138px);
  height: clamp(120px, 18vw, 184px);
  position: relative;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,0.4));
}

.professor-sprite::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 52%;
  height: 32%;
  transform: translateX(-50%);
  background: #e8e8e8;
  border: 4px solid #111;
  border-radius: 50% 50% 44% 44%;
}

.professor-sprite::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 70%;
  height: 54%;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent 0 36%, #111 36% 40%, transparent 40% 60%, #111 60% 64%, transparent 64%),
    linear-gradient(180deg, #fff 0 76%, #dcdcdc 76% 100%);
  border: 4px solid #111;
  border-radius: 14px 14px 8px 8px;
}

.starter-row {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 34px);
  align-items: end;
  width: min(92vw, 900px);
  margin: 0 auto;
}

.story-scene.is-choice .starter-row {
  display: grid;
}

.starter-card {
  display: grid;
  place-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.capsule {
  width: clamp(54px, 8vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #101010;
  background:
    linear-gradient(180deg, #d41414 0 47%, #111 47% 54%, #f4f4f4 54% 100%);
  box-shadow:
    inset 0 7px 0 rgba(255,255,255,0.22),
    0 0 0 3px rgba(255,255,255,0.10),
    0 16px 0 rgba(0,0,0,0.30);
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.capsule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: #f6f6f6;
  border: 3px solid #111;
  border-radius: 50%;
}

.starter-card:hover .capsule {
  transform: translateY(-5px);
  filter: brightness(1.15);
}

.starter-preview {
  max-width: min(26vw, 210px);
  max-height: 190px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.starter-card:hover .starter-preview,
.starter-card.is-selected .starter-preview {
  opacity: 1;
  transform: translateY(0);
}

.starter-name {
  color: rgba(255,255,255,0.78);
  font-size: clamp(7px, 0.8vw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dialogue-box {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 130px;
  background: #f2f2f2;
  color: #111;
  border: 5px solid #111;
  box-shadow:
    inset 0 0 0 4px #fff,
    0 0 0 4px #f2f2f2;
  padding: clamp(16px, 2vw, 24px);
  font-family: "Courier New", monospace;
  cursor: pointer;
}

.dialogue-name {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  background: #111;
  color: #fff;
  font-size: clamp(8px, 0.9vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dialogue-text {
  font-size: clamp(11px, 1.15vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.dialogue-hint {
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-size: 10px;
  animation: dialogueBlink 0.9s steps(2, end) infinite;
}

.story-back {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;
  color: rgba(87,255,122,0.65);
  text-decoration: none;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
}

@keyframes dialogueBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .story-link {
    bottom: 1.8vh;
    font-size: 7px;
    width: 92vw;
    text-align: center;
  }

  .story-game {
    min-height: 86svh;
  }

  .professor-area {
    min-height: 320px;
  }

  .starter-row {
    gap: 8px;
  }

  .starter-preview {
    max-width: 28vw;
    max-height: 145px;
  }

  .dialogue-box {
    min-height: 150px;
  }

  .dialogue-text {
    font-size: 11px;
  }
}


/* v49 product flip + side actions */

.product-card {
  position: relative;
  z-index: 2;
  width: min(72vw, 860px);
  max-height: 92vh;
  max-height: 92svh;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.product-card .product-shirt {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  max-height: 92vh;
  max-height: 92svh;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
  animation: fadeUp 0.9s ease-out both;
}

.product-card .product-back {
  opacity: 0;
  pointer-events: none;
}

.product-card:hover .product-front {
  opacity: 0;
  transform: scale(1.006);
}

.product-card:hover .product-back {
  opacity: 1;
  transform: scale(1.006);
}

.product-page-pink {
  background: #000;
}

.product-page-pink .product-shirt {
  background: transparent;
}

.product-side-actions {
  position: absolute;
  left: calc(50% + min(36vw, 430px) + 4vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  justify-items: start;
  gap: 14px;
  width: min(18vw, 230px);
}

.product-side-actions .story-link {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: auto;
  color: rgba(255,255,255,0.64);
  font-family: "Courier New", monospace;
  font-size: clamp(7px, 0.66vw, 10px);
  letter-spacing: 0.10em;
  line-height: 1.45;
  text-transform: lowercase;
  text-decoration: none;
  opacity: 0.74;
  pointer-events: auto;
  visibility: visible;
  text-align: left;
  transition: opacity 0.2s ease, text-shadow 0.2s ease;
}

.product-side-actions .story-link:hover {
  opacity: 1;
  text-shadow: 0 0 12px rgba(255,255,255,0.16);
  transform: none;
}

.product-page-black .product-side-actions .story-link {
  color: rgba(20,20,20,0.62);
}

.buy-button {
  display: inline-grid;
  place-items: center;
  min-width: 126px;
  min-height: 42px;
  padding: 8px 14px;
  border: 3px solid #111;
  background:
    linear-gradient(180deg, #fff04a 0 49%, #ff2a2a 49% 100%);
  color: #111;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow:
    4px 4px 0 #000,
    0 0 0 3px rgba(255,255,255,0.18);
  animation: buyBlink 0.84s steps(2, end) infinite;
}

.product-page-black .buy-button {
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.24),
    0 0 0 3px rgba(0,0,0,0.10);
}

.buy-button:hover {
  transform: translate(-1px, -1px);
  filter: saturate(1.25) contrast(1.08);
}

@keyframes buyBlink {
  0%, 49% {
    background: linear-gradient(180deg, #fff04a 0 49%, #ff2a2a 49% 100%);
    color: #111;
  }
  50%, 100% {
    background: linear-gradient(180deg, #00e5ff 0 49%, #ffffff 49% 100%);
    color: #d40000;
  }
}

/* v49 story language switch */

.language-switch {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 8;
  display: flex;
  gap: 8px;
}

.lang-button {
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.88);
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 7px 9px;
  cursor: pointer;
}

.lang-button.is-active {
  background: rgba(87,255,122,0.16);
  border-color: rgba(87,255,122,0.64);
  color: rgba(87,255,122,0.95);
}

.story-subtitle {
  position: absolute;
  left: 50%;
  top: 7vh;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(87,255,122,0.58);
  font-family: "Courier New", monospace;
  font-size: clamp(8px, 0.75vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(87,255,122,0.14);
}

@media (max-width: 760px) {
  .product-card {
    width: 96vw;
    max-height: 94svh;
  }

  .product-card .product-shirt {
    max-height: 94svh;
  }

  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront 6.54s steps(1, end) 1.1s infinite;
  }

  .product-card .product-back {
    animation: autoFlipBack 6.54s steps(1, end) 1.1s infinite;
  }

  .product-side-actions {
    left: 50%;
    top: auto;
    bottom: 2.6vh;
    transform: translateX(-50%);
    width: 92vw;
    justify-items: center;
    gap: 10px;
  }

  .product-side-actions .story-link {
    color: rgba(255,255,255,0.58);
    font-size: 7px;
    text-align: center;
    max-width: 92vw;
  }

  .product-page-black .product-side-actions .story-link {
    color: rgba(20,20,20,0.58);
  }

  .buy-button {
    min-width: 112px;
    min-height: 36px;
    font-size: 14px;
    padding: 6px 12px;
  }

  .language-switch {
    right: 12px;
    top: 12px;
  }

  .lang-button {
    font-size: 10px;
    padding: 6px 7px;
  }

  .story-subtitle {
    top: 6.8vh;
    font-size: 7px;
    max-width: 82vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@keyframes autoFlipFront {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes autoFlipBack {
  0%, 49.9% { opacity: 0; }
  50%, 100% { opacity: 1; }
}


/* v50 refinements: inactivity event, better 90s BUY card, fixed product flip, product file */

.product-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

.product-card {
  position: relative;
  z-index: 2;
  width: min(72vw, 860px);
  max-height: 92vh;
  max-height: 92svh;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.product-card .product-shirt {
  grid-area: 1 / 1;
  width: 100%;
  max-height: 92vh;
  max-height: 92svh;
  height: auto;
  object-fit: contain;
  display: block;
  filter: contrast(1.03);
  transition: opacity 0.34s ease, transform 0.34s ease, filter 0.34s ease;
  animation: fadeUp 0.9s ease-out both;
}

.product-card .product-front {
  opacity: 1 !important;
  z-index: 2;
  pointer-events: auto;
}

.product-card .product-back {
  opacity: 0 !important;
  z-index: 3;
  pointer-events: none;
  transform: translateY(10px) scale(0.992);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-front {
    opacity: 0 !important;
    transform: translateY(-8px) scale(0.985);
    filter: blur(0.5px) contrast(0.98);
  }

  .product-card:hover .product-back {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
  }
}

.product-page-pink {
  background: #000;
}

.product-page-pink .product-shirt {
  background: transparent;
}

.pink-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vw, 850px);
  height: min(64vh, 680px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 106, 190, 0.20), rgba(255, 106, 190, 0.08) 38%, transparent 67%),
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.10), transparent 55%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.product-page-pink .product-card:hover + .buy-card,
.product-page-pink .product-card:hover ~ .buy-card {
  z-index: 6;
}

.product-page-pink .product-card:hover ~ .pink-glow,
.product-page-pink .product-card:hover + .pink-glow {
  opacity: 1;
}

/* keep glow visible when pink back appears on mobile */
.product-page-pink .pink-glow {
  opacity: 0.62;
}

.buy-card {
  position: absolute;
  left: calc(50% + min(36vw, 430px) + 4vw);
  top: 50%;
  transform: translateY(-50%) rotate(-1.5deg);
  z-index: 6;
  width: min(19vw, 255px);
  min-width: 168px;
  padding: 13px 14px 15px;
  border: 3px solid #0b0b0b;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34) 0 10%, transparent 10% 20%, rgba(255,255,255,0.24) 20% 30%, transparent 30%),
    linear-gradient(180deg, #fff45d 0 45%, #ff761b 45% 64%, #e10014 64% 100%);
  color: #080808;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  box-shadow:
    6px 6px 0 rgba(0,0,0,0.92),
    inset 0 0 0 2px rgba(255,255,255,0.62),
    0 0 0 2px rgba(255,255,255,0.16);
  overflow: hidden;
  transition: transform 0.18s ease, filter 0.18s ease;
  animation: buyPulse90 1.12s steps(2, end) infinite;
}

.buy-card::before,
.buy-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.buy-card::before {
  inset: -28px;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.36) 0deg 8deg, transparent 8deg 16deg);
  opacity: 0.20;
  animation: starSpin90 6s linear infinite;
}

.buy-card::after {
  right: -20px;
  top: -12px;
  width: 70px;
  height: 70px;
  background: #00e7ff;
  border: 3px solid #0b0b0b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.55);
}

.buy-card-kicker,
.buy-card strong,
.buy-card-story {
  position: relative;
  z-index: 2;
  display: block;
}

.buy-card-kicker {
  font-family: "Courier New", monospace;
  font-size: clamp(6px, 0.52vw, 8px);
  letter-spacing: 0.16em;
  color: rgba(0,0,0,0.78);
  margin-bottom: 5px;
}

.buy-card strong {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(24px, 2.05vw, 37px);
  line-height: 0.92;
  letter-spacing: 0.045em;
  color: #0714d8;
  -webkit-text-stroke: 1px #fff;
  text-shadow:
    2px 2px 0 #000,
    0 0 8px rgba(255,255,255,0.28);
}

.buy-card-story {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: clamp(6px, 0.55vw, 8px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.82);
}

.buy-card:hover {
  transform: translateY(-50%) rotate(0deg) scale(1.035);
  filter: saturate(1.22) contrast(1.08);
}

.product-page-black .buy-card {
  box-shadow:
    6px 6px 0 rgba(0,0,0,0.26),
    inset 0 0 0 2px rgba(255,255,255,0.62),
    0 0 0 2px rgba(0,0,0,0.08);
}

@keyframes buyPulse90 {
  0%, 49% { filter: saturate(1.06) contrast(1.02); }
  50%, 100% { filter: saturate(1.34) contrast(1.12); }
}

@keyframes starSpin90 {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .product-card {
    width: 96vw;
    max-height: 94svh;
  }

  .product-card .product-shirt {
    max-height: 94svh;
  }

  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront327 6.54s steps(1, end) 1.1s infinite;
  }

  .product-card .product-back {
    animation: autoFlipBack327 6.54s steps(1, end) 1.1s infinite;
  }

  .buy-card {
    left: 50%;
    top: auto;
    bottom: 2.8vh;
    width: min(76vw, 260px);
    min-width: 0;
    transform: translateX(-50%) rotate(-1deg);
    padding: 10px 12px 12px;
  }

  .buy-card:hover {
    transform: translateX(-50%) rotate(0deg) scale(1.025);
  }

  .buy-card strong {
    font-size: 25px;
  }

  .pink-glow {
    width: 92vw;
    height: 58vh;
    opacity: 0.72;
  }
}

@keyframes autoFlipFront327 {
  0%, 49.9% { opacity: 1; transform: translateY(0) scale(1); }
  50%, 100% { opacity: 0; transform: translateY(-8px) scale(0.985); }
}

@keyframes autoFlipBack327 {
  0%, 49.9% { opacity: 0; transform: translateY(10px) scale(0.992); }
  50%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* v50 product file / pseudo payment page */

.product-file-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

.product-file-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(54px, 7vw, 92px) 5vw;
  isolation: isolate;
}

.product-file-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/monogram-dark.png");
  background-size: 145px auto;
  background-repeat: repeat;
  background-position: center top;
  opacity: 0.18;
}

.product-file-layout {
  position: relative;
  z-index: 2;
  width: min(1180px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(290px, 0.82fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
}

.viewer-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.viewer-hint {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  font-family: "Courier New", monospace;
  color: rgba(255,255,255,0.50);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shirt-viewer {
  width: min(56vw, 620px);
  height: min(74vh, 720px);
  display: grid;
  place-items: center;
  perspective: 1100px;
  cursor: grab;
  touch-action: none;
}

.shirt-viewer.is-dragging {
  cursor: grabbing;
}

.shirt-360 {
  --rotation: 0deg;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--rotation));
  transition: transform 0.04s linear;
}

.shirt-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: contrast(1.04);
}

.shirt-face-back {
  transform: rotateY(180deg);
}

.product-file-pink .viewer-wrap::before {
  content: "";
  position: absolute;
  width: min(54vw, 560px);
  height: min(54vw, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,104,190,0.24), rgba(255,104,190,0.08) 44%, transparent 68%);
  filter: blur(18px);
  z-index: -1;
}

.product-info-panel {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 24px 80px rgba(0,0,0,0.42);
  padding: clamp(20px, 3vw, 36px);
  font-family: "Courier New", monospace;
}

.product-file-tag {
  color: rgba(87,255,122,0.78);
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}

.product-info-panel h1 {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(34px, 5vw, 74px);
  line-height: 0.94;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.product-description {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 22px;
}

.product-specs {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.product-specs div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-bottom: 8px;
}

.product-specs dt {
  color: rgba(255,255,255,0.50);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.product-specs dd {
  color: rgba(255,255,255,0.88);
  font-size: 11px;
  text-align: right;
}

.checkout-button {
  display: grid;
  place-items: center;
  min-height: 50px;
  text-decoration: none;
  color: #0b0b0b;
  background: linear-gradient(180deg, #fff45d 0 48%, #ff761b 48% 68%, #e10014 68% 100%);
  border: 3px solid #fff;
  box-shadow: 5px 5px 0 rgba(255,255,255,0.18);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .product-file-layout {
    grid-template-columns: 1fr;
  }

  .shirt-viewer {
    width: min(92vw, 620px);
    height: min(58vh, 620px);
  }

  .product-info-panel {
    width: min(92vw, 620px);
    margin: 0 auto;
  }
}


/* v53 emergency restore: t-shirts back to previous display */
.page.product-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4vh 4vw !important;
}

.product-stage {
  width: auto !important;
  display: contents !important;
}

.product-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(72vw, 860px) !important;
  max-height: 92vh !important;
  max-height: 92svh !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
}

.product-card .product-shirt {
  grid-area: 1 / 1 !important;
  position: relative !important;
  width: 100% !important;
  max-height: 92vh !important;
  max-height: 92svh !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease !important;
}

.product-card .product-front {
  opacity: 1 !important;
  z-index: 2 !important;
}

.product-card .product-back {
  opacity: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.995) !important;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-front {
    opacity: 0 !important;
    transform: scale(1.006) !important;
  }

  .product-card:hover .product-back {
    opacity: 1 !important;
    transform: scale(1.006) !important;
  }
}

.buy-card {
  position: absolute !important;
  left: calc(50% + min(36vw, 430px) + 4vw) !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-1.5deg) !important;
  z-index: 6 !important;
}

.product-page-pink .pink-glow {
  opacity: 0.62 !important;
}

@media (max-width: 760px) {
  .product-card {
    width: 96vw !important;
    max-height: 94svh !important;
  }

  .product-card .product-shirt {
    max-height: 94svh !important;
  }

  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront 6.54s steps(1, end) 1.1s infinite !important;
  }

  .product-card .product-back {
    animation: autoFlipBack 6.54s steps(1, end) 1.1s infinite !important;
  }

  .buy-card {
    left: 50% !important;
    top: auto !important;
    bottom: 2.8vh !important;
    transform: translateX(-50%) rotate(-1deg) !important;
    width: min(76vw, 260px) !important;
  }
}


/* v55: real shirt-only assets + same-size pink + visible pink back */

.product-card {
  width: min(68vw, 820px) !important;
  max-height: 92svh !important;
  display: grid !important;
  place-items: center !important;
}

.product-card .product-shirt {
  width: 100% !important;
  max-height: 92svh !important;
  height: auto !important;
  object-fit: contain !important;
}

.product-card .product-front,
.product-card .product-back {
  grid-area: 1 / 1 !important;
}

.product-card .product-back {
  opacity: 0 !important;
  pointer-events: none !important;
}

.product-card:hover .product-front {
  opacity: 0 !important;
  transform: scale(1.006) !important;
}

.product-card:hover .product-back {
  opacity: 1 !important;
  transform: scale(1.006) !important;
}

.product-page-pink .pink-glow {
  opacity: 0.54 !important;
  width: min(72vw, 850px) !important;
  height: min(72vh, 780px) !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.18), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(255, 115, 195, 0.22), rgba(255, 115, 195, 0.10) 42%, transparent 68%) !important;
  filter: blur(14px) !important;
}

.product-card-pink .product-back,
.product-file-pink .shirt-face-back {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.32))
    drop-shadow(0 0 34px rgba(255,122,198,0.26))
    contrast(1.04) !important;
}

/* keep the BUY card between shirt and side, not glued to the screen */
.buy-card {
  left: calc(50% + min(31vw, 390px) + 3vw) !important;
}

@media (max-width: 760px) {
  .product-card {
    width: 96vw !important;
  }

  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront 6.54s steps(1, end) 1.1s infinite !important;
  }

  .product-card .product-back {
    animation: autoFlipBack 6.54s steps(1, end) 1.1s infinite !important;
  }

  .buy-card {
    left: 50% !important;
  }

  .product-page-pink .pink-glow {
    width: 92vw !important;
    height: 62vh !important;
    opacity: 0.68 !important;
  }
}


/* v56: shirts slightly smaller */
.product-card {
  width: min(63vw, 780px) !important;
}

.product-card .product-shirt {
  max-height: 88svh !important;
}

.pink-glow {
  width: min(66vw, 790px) !important;
  height: min(66vh, 720px) !important;
}

.product-page-pink .pink-glow {
  width: min(66vw, 790px) !important;
  height: min(66vh, 720px) !important;
}

.shirt-viewer {
  width: min(58vw, 700px) !important;
  height: min(74vh, 720px) !important;
}

@media (max-width: 760px) {
  .product-card {
    width: 91vw !important;
  }

  .product-card .product-shirt {
    max-height: 88svh !important;
  }

  .product-page-pink .pink-glow,
  .pink-glow {
    width: 86vw !important;
    height: 58vh !important;
  }

  .shirt-viewer {
    width: min(90vw, 650px) !important;
    height: min(54vh, 610px) !important;
  }
}


/* v57: BUY placement, Pokémon-like story UX, starter opening, ergonomic 360 */

html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* BUY card: only BUY / ACHETER, centered between shirt and edge */
.page.product-page {
  display: grid !important;
  grid-template-columns: minmax(0, min(63vw, 780px)) clamp(130px, 11vw, 170px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(22px, 4vw, 70px) !important;
  padding: clamp(14px, 2.8vw, 30px) 4vw !important;
}

.product-card {
  width: min(63vw, 780px) !important;
  max-height: 88svh !important;
  display: grid !important;
  place-items: center !important;
}

.product-card .product-shirt {
  width: 100% !important;
  max-height: 88svh !important;
  height: auto !important;
  object-fit: contain !important;
}

.product-card .product-front,
.product-card .product-back {
  grid-area: 1 / 1 !important;
}

.product-card .product-back {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.995) !important;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-front {
    opacity: 0 !important;
    transform: scale(1.006) !important;
  }

  .product-card:hover .product-back {
    opacity: 1 !important;
    transform: scale(1.006) !important;
  }
}

.page.product-page .buy-card,
.buy-card {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  justify-self: center !important;
  align-self: center !important;
  width: clamp(130px, 10.5vw, 162px) !important;
  height: clamp(74px, 6vw, 94px) !important;
  min-width: 0 !important;
  padding: 10px !important;
  transform: rotate(-1.35deg) !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #101010 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.36), transparent 30%),
    radial-gradient(circle at 18% 18%, #fffec4 0 10%, transparent 11%),
    linear-gradient(180deg, #fff444 0 35%, #ff9f15 35% 55%, #ff3434 55% 100%) !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
  text-align: center !important;
  overflow: hidden !important;
  box-shadow:
    5px 5px 0 rgba(0,0,0,0.78),
    inset 0 0 0 2px rgba(255,255,255,0.70),
    0 0 0 2px rgba(255,255,255,0.12) !important;
  animation: buyPulseV57 0.95s steps(2, end) infinite !important;
}

.page.product-page .buy-card::before,
.buy-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border: 2px solid rgba(255,255,255,0.86) !important;
  background: repeating-linear-gradient(-28deg, transparent 0 9px, rgba(255,255,255,0.13) 9px 17px) !important;
  pointer-events: none !important;
  animation: none !important;
}

.page.product-page .buy-card::after,
.buy-card::after {
  display: none !important;
}

.page.product-page .buy-card strong,
.buy-card strong {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif !important;
  font-size: clamp(19px, 1.55vw, 27px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.02em !important;
  color: #1637ff !important;
  -webkit-text-stroke: 0.9px #ffffff !important;
  text-shadow: 2px 2px 0 #111, 0 0 7px rgba(255,255,255,0.20) !important;
}

.page.product-page .buy-card:hover,
.buy-card:hover {
  transform: rotate(0deg) scale(1.045) !important;
  filter: saturate(1.18) brightness(1.05) !important;
}

.buy-card-kicker,
.buy-card-story {
  display: none !important;
}

@keyframes buyPulseV57 {
  0%, 49% { filter: saturate(1.05); }
  50%, 100% { filter: saturate(1.40) brightness(1.08); }
}

/* Story page: choice visible, black starter glow, starter-opening animation */
.dialogue-box {
  padding-bottom: 34px !important;
}

.dialogue-skip {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font: 9px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  color: rgba(17,17,17,0.52);
  text-transform: uppercase;
}

.story-scene.is-choice .starter-row {
  display: grid !important;
}

.story-scene.is-choice .starter-preview,
.starter-card:hover .starter-preview {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.starter-card {
  position: relative !important;
}

.starter-card-black::before {
  content: "" !important;
  position: absolute !important;
  inset: 22px 0 8px !important;
  z-index: 0 !important;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,0.28), rgba(255,255,255,0.10) 36%, transparent 70%) !important;
  filter: blur(12px) !important;
  pointer-events: none !important;
}

.starter-card-black .starter-preview {
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.58))
    drop-shadow(0 0 28px rgba(255,255,255,0.24)) !important;
}

.starter-card.is-opening {
  pointer-events: none !important;
  z-index: 9 !important;
}

.starter-card.is-opening .capsule {
  animation: capsuleOpen327 1.05s ease forwards !important;
}

.starter-card.is-opening .capsule::before {
  content: "" !important;
  position: absolute !important;
  inset: -26px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.35) 24%, transparent 58%) !important;
  animation: capsuleFlash327 1.05s ease forwards !important;
}

.starter-card.is-opening .starter-preview {
  opacity: 1 !important;
  animation: starterReveal327 1.05s ease forwards !important;
}

@keyframes capsuleOpen327 {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  35% { transform: scale(1.18) rotate(-8deg); filter: brightness(1.4); }
  62% { transform: scale(0.88) rotate(8deg); filter: brightness(1.9); }
  100% { transform: scale(0.2) rotate(0deg); opacity: 0; filter: brightness(2.3); }
}

@keyframes capsuleFlash327 {
  0% { transform: scale(0.2); opacity: 0; }
  40% { transform: scale(1); opacity: 0.95; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes starterReveal327 {
  0% { transform: translateY(22px) scale(0.84); opacity: 0; }
  46% { transform: translateY(-12px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Product page: easier 360, no horizontal scrollbar, slower rotation */
.product-file-body,
.product-file-page {
  overflow-x: hidden !important;
  max-width: 100% !important;
  overscroll-behavior-x: none !important;
}

.product-file-layout {
  width: min(1220px, 95vw) !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
  gap: clamp(24px, 4vw, 58px) !important;
}

.product-file-tag {
  color: rgba(87,255,122,0.78) !important;
  text-transform: uppercase !important;
}

.viewer-wrap {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
}

.viewer-hint {
  position: static !important;
  transform: none !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.viewer-mode-switch {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.viewer-mode-button {
  min-width: 92px !important;
  min-height: 34px !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  background: rgba(0,0,0,0.80) !important;
  color: rgba(255,255,255,0.78) !important;
  font-family: "Courier New", monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.viewer-mode-button.is-active {
  background: #fff !important;
  color: #000 !important;
}

.shirt-viewer {
  width: min(58vw, 720px) !important;
  height: min(76vh, 760px) !important;
  overflow: visible !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
}

.shirt-viewer.is-dragging {
  cursor: grabbing !important;
}

.shirt-360 {
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  transition: transform 0.08s linear !important;
}

.shirt-face {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: clamp(16px, 2.4vw, 38px) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
}

.product-file-pink .viewer-wrap::before,
.product-file-black .viewer-wrap::before {
  content: "" !important;
  position: absolute !important;
  width: min(56vw, 610px) !important;
  height: min(56vw, 610px) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 38%, transparent 68%) !important;
  filter: blur(18px) !important;
  z-index: -1 !important;
}

/* pink back still visible on black */
.product-card-pink .product-back,
.product-file-pink .shirt-face-back {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.32))
    drop-shadow(0 0 34px rgba(255,122,198,0.26))
    contrast(1.04) !important;
}

@media (max-width: 880px) {
  .page.product-page {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px 3vw 74px !important;
  }

  .product-card {
    width: 91vw !important;
  }

  .product-card .product-shirt {
    max-height: 88svh !important;
  }

  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront 6.54s steps(1, end) 1.1s infinite !important;
  }

  .product-card .product-back {
    animation: autoFlipBack 6.54s steps(1, end) 1.1s infinite !important;
  }

  .page.product-page .buy-card,
  .buy-card {
    width: 138px !important;
    height: 78px !important;
    transform: rotate(-1deg) !important;
  }

  .buy-card strong {
    font-size: 22px !important;
  }

  .product-file-layout {
    grid-template-columns: 1fr !important;
  }

  .shirt-viewer {
    width: min(92vw, 680px) !important;
    height: min(55vh, 620px) !important;
  }

  .shirt-face {
    padding: 18px !important;
  }

  .viewer-mode-button {
    min-width: 82px !important;
    font-size: 8px !important;
  }
}


/* v58 tweaks: stronger glow for pink back, deeper story text, simplified product descriptions */
.product-page-pink .product-card {
  position: relative !important;
  isolation: isolate !important;
}

.product-page-pink .product-card::after {
  content: "" !important;
  position: absolute !important;
  left: 7% !important;
  right: 7% !important;
  top: 3% !important;
  bottom: 5% !important;
  border-radius: 38% 38% 24% 24% / 28% 28% 20% 20% !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.22), rgba(255,255,255,0.12) 32%, transparent 58%),
    radial-gradient(circle at 50% 58%, rgba(255, 114, 198, 0.22), rgba(255, 114, 198, 0.10) 44%, transparent 68%) !important;
  filter: blur(22px) !important;
  opacity: 0.38 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.product-page-pink .product-card:hover::after {
  opacity: 0.74 !important;
  transform: scale(1.035) !important;
}

.product-page-pink .product-front,
.product-page-pink .product-back {
  position: relative !important;
  z-index: 2 !important;
}

.product-page-pink .product-back,
.product-file-pink .shirt-face-back {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.50))
    drop-shadow(0 0 30px rgba(255,255,255,0.22))
    drop-shadow(0 0 46px rgba(255, 118, 198, 0.28))
    contrast(1.05) !important;
}

.product-page-pink .pink-glow {
  opacity: 0.70 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.18), transparent 30%),
    radial-gradient(circle at 50% 48%, rgba(255, 122, 198, 0.26), rgba(255, 122, 198, 0.10) 44%, transparent 70%) !important;
  filter: blur(18px) !important;
}

.product-description {
  text-transform: none !important;
}


/* v59: stronger pink glow + more official pokemon-like story UI */
.story-scene {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.06), transparent 26%),
    radial-gradient(circle at 50% 110%, rgba(87,255,122,0.05), transparent 24%),
    #000 !important;
}

.professor-sprite {
  filter:
    drop-shadow(0 10px 0 rgba(0,0,0,0.42))
    drop-shadow(0 0 18px rgba(255,255,255,0.10)) !important;
}

.professor-sprite::before {
  background: linear-gradient(180deg, #f8f8f8 0%, #dddddd 100%) !important;
  border-width: 5px !important;
}

.professor-sprite::after {
  background:
    linear-gradient(90deg, transparent 0 36%, #111 36% 40%, transparent 40% 60%, #111 60% 64%, transparent 64%),
    linear-gradient(180deg, #ffffff 0 72%, #d9d9d9 72% 100%) !important;
  border-width: 5px !important;
}

.dialogue-box {
  min-height: 148px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%) !important;
  border: 4px solid #141414 !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 9px #dfe7ff,
    0 0 0 5px #141414,
    0 18px 36px rgba(0,0,0,0.28) !important;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px) 38px !important;
}

.dialogue-name {
  background: linear-gradient(180deg, #2b2f45 0%, #171a25 100%) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px #171a25 !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.11em !important;
}

.dialogue-text {
  font-size: clamp(12px, 1.18vw, 17px) !important;
  line-height: 1.72 !important;
  max-width: 96% !important;
  text-wrap: pretty;
}

.dialogue-skip {
  left: 24px !important;
  bottom: 13px !important;
  color: rgba(17,17,17,0.62) !important;
}

.dialogue-hint {
  right: 20px !important;
  bottom: 12px !important;
  font-size: 12px !important;
  color: rgba(17,17,17,0.72) !important;
}

.story-scene.is-choice .dialogue-box {
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 9px #e6ecff,
    0 0 0 5px #141414,
    0 0 26px rgba(87,255,122,0.18),
    0 18px 36px rgba(0,0,0,0.30) !important;
}

.starter-card {
  transform: translateZ(0);
}

.starter-card .capsule {
  box-shadow:
    inset 0 7px 0 rgba(255,255,255,0.24),
    0 0 0 3px rgba(255,255,255,0.10),
    0 0 18px rgba(255,255,255,0.10),
    0 16px 0 rgba(0,0,0,0.30) !important;
}

.starter-card:hover .capsule {
  filter: brightness(1.18) saturate(1.05) !important;
}

.starter-card.is-opening .capsule::before {
  inset: -34px !important;
  background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0.42) 28%, transparent 60%) !important;
}

.starter-card.is-opening .starter-preview {
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,0.65))
    drop-shadow(0 0 34px rgba(255,255,255,0.28)) !important;
}

.product-page-pink .product-card::after {
  left: 6% !important;
  right: 6% !important;
  top: 2% !important;
  bottom: 4% !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.28), rgba(255,255,255,0.16) 28%, transparent 54%),
    radial-gradient(circle at 50% 58%, rgba(255, 118, 198, 0.30), rgba(255, 118, 198, 0.14) 42%, transparent 70%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,0.10), transparent 54%) !important;
  filter: blur(28px) !important;
  opacity: 0.52 !important;
}

.product-page-pink .product-card:hover::after {
  opacity: 0.88 !important;
  transform: scale(1.05) !important;
}

.product-page-pink .product-back,
.product-file-pink .shirt-face-back {
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.62))
    drop-shadow(0 0 34px rgba(255,255,255,0.26))
    drop-shadow(0 0 56px rgba(255, 118, 198, 0.34))
    contrast(1.06) brightness(1.03) !important;
}

.product-page-pink .pink-glow {
  opacity: 0.86 !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.22), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.14), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 124, 200, 0.36), rgba(255, 124, 200, 0.12) 42%, transparent 74%) !important;
  filter: blur(22px) !important;
}

.product-page-pink .product-card:hover ~ .pink-glow,
.product-page-pink .product-card:hover + .pink-glow {
  opacity: 1 !important;
}


/* v60: smaller centered main shirts, reduced pink glow, refined professor emphasis */
.page.product-page {
  grid-template-columns: minmax(0, min(58vw, 700px)) clamp(112px, 9.6vw, 148px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 46px) !important;
  padding: clamp(8px, 2vw, 20px) 4vw !important;
}

.product-card {
  width: min(58vw, 700px) !important;
  max-height: 78svh !important;
  justify-self: center !important;
  align-self: center !important;
}

.product-card .product-shirt {
  max-height: 78svh !important;
}

.page.product-page .buy-card,
.buy-card {
  justify-self: center !important;
  align-self: center !important;
}

@media (max-width: 980px) {
  .page.product-page {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: center !important;
  }

  .product-card {
    width: min(84vw, 540px) !important;
    max-height: 72svh !important;
  }

  .product-card .product-shirt {
    max-height: 72svh !important;
  }

  .page.product-page .buy-card,
  .buy-card {
    margin-top: 6px !important;
  }
}

.product-page-pink .product-card::after {
  left: 8% !important;
  right: 8% !important;
  top: 5% !important;
  bottom: 8% !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.16), rgba(255,255,255,0.08) 24%, transparent 52%),
    radial-gradient(circle at 50% 58%, rgba(255, 122, 198, 0.18), rgba(255, 122, 198, 0.08) 42%, transparent 70%) !important;
  filter: blur(20px) !important;
  opacity: 0.28 !important;
}

.product-page-pink .product-card:hover::after {
  opacity: 0.52 !important;
  transform: scale(1.025) !important;
}

.product-page-pink .product-back,
.product-file-pink .shirt-face-back {
  filter:
    drop-shadow(0 0 9px rgba(255,255,255,0.42))
    drop-shadow(0 0 20px rgba(255,255,255,0.16))
    drop-shadow(0 0 30px rgba(255, 118, 198, 0.18))
    contrast(1.03) brightness(1.01) !important;
}

.product-page-pink .pink-glow {
  opacity: 0.50 !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,0.12), transparent 28%),
    radial-gradient(circle at 50% 48%, rgba(255, 124, 200, 0.16), rgba(255, 124, 200, 0.06) 42%, transparent 70%) !important;
  filter: blur(16px) !important;
}

.dialogue-box {
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 9px #dfe7ff,
    0 0 0 5px #141414,
    0 20px 42px rgba(0,0,0,0.34),
    0 0 20px rgba(89, 146, 255, 0.14) !important;
}

.dialogue-name {
  background: linear-gradient(180deg, #344884 0%, #181f35 100%) !important;
  box-shadow: 0 0 0 2px #171a25, 0 4px 14px rgba(30,58,138,0.20) !important;
}

.dialogue-text {
  font-size: clamp(13px, 1.23vw, 18px) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.01em !important;
}


/* v61: short mall-inspired intro animation before story */
.buy-intro[hidden] {
  display: none !important;
}

.buy-intro {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,0.05), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.62)),
    #000;
}

.buy-intro__panel {
  position: relative;
  width: min(92vw, 820px);
  min-height: min(66svh, 470px);
  overflow: hidden;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,0.26);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.56),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 8px rgba(17,17,17,0.55);
  background:
    linear-gradient(180deg, rgba(26,26,26,0.96) 0%, rgba(7,7,7,0.96) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(24px, 4vw, 40px);
  cursor: pointer;
  isolation: isolate;
}

.buy-intro__chrome,
.buy-intro__grid,
.buy-intro__panel::before,
.buy-intro__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.buy-intro__chrome {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,0.06) 8% 9%, transparent 9% 91%, rgba(255,255,255,0.06) 91% 92%, transparent 92%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%, transparent 82%, rgba(255,255,255,0.04));
  mix-blend-mode: screen;
}

.buy-intro__grid {
  inset: auto 0 0 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,0.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 26px);
  transform: perspective(520px) rotateX(72deg) translateY(42px);
  transform-origin: center bottom;
  opacity: 0.28;
  animation: mallGridPan327 2.5s linear infinite;
}

.buy-intro__panel::before {
  inset: auto -12% -18%;
  height: 52%;
  background: radial-gradient(circle at 50% 0%, rgba(255,95,162,0.14), transparent 52%);
  filter: blur(14px);
}

.buy-intro__panel::after {
  inset: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
}

.buy-intro__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
  font-size: 10px;
  letter-spacing: 0.26em;
}

.buy-intro__eyebrow,
.buy-intro__title,
.buy-intro__ticker,
.buy-intro__monogram,
.buy-intro__prompt {
  position: relative;
  z-index: 2;
}

.buy-intro__eyebrow {
  color: rgba(255,255,255,0.72);
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  animation: introRise327 .45s ease .12s forwards;
}

.buy-intro__title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 5vw, 60px);
  line-height: 0.95;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow:
    0 0 14px rgba(255,255,255,0.22),
    0 0 24px rgba(255,95,162,0.14);
  max-width: 9.5em;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: introRise327 .5s ease .34s forwards;
}

.buy-intro__ticker {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  width: min(76vw, 480px);
}

.buy-intro__ticker span {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
}

.buy-intro__ticker span:nth-child(1) { animation: introRise327 .4s ease .72s forwards; }
.buy-intro__ticker span:nth-child(2) { animation: introRise327 .4s ease 1.02s forwards; }
.buy-intro__ticker span:nth-child(3) { animation: introRise327 .4s ease 1.32s forwards; }

.buy-intro__monogram {
  margin-top: 30px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(76px, 14vw, 140px);
  line-height: 0.9;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.08);
  text-shadow: 0 0 22px rgba(255,255,255,0.06);
  opacity: 0;
  animation: introFade327 .6s ease 1.36s forwards;
}

.buy-intro__prompt {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.88);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.buy-intro.is-ready .buy-intro__prompt {
  opacity: 1;
  animation: introPromptBlink327 1.15s linear infinite;
}

.buy-intro.is-leaving {
  animation: introOverlayOut327 .32s ease forwards;
}

@keyframes introRise327 {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introFade327 {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes introPromptBlink327 {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; }
}

@keyframes introOverlayOut327 {
  to { opacity: 0; transform: scale(1.01); }
}

@keyframes mallGridPan327 {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 0, 0 38px; }
}

@media (max-width: 700px) {
  .buy-intro__panel {
    min-height: min(72svh, 460px);
    border-radius: 18px;
    padding: 22px 16px 44px;
  }

  .buy-intro__badge {
    top: 14px;
    left: 14px;
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .buy-intro__title {
    max-width: 7.8em;
  }

  .buy-intro__ticker {
    width: 100%;
    margin-top: 20px;
  }

  .buy-intro__ticker span {
    padding: 9px 10px;
    letter-spacing: 0.12em;
  }

  .buy-intro__prompt {
    width: calc(100% - 24px);
    bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}


/* v62 truck cinematic intro */
.buy-intro {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.04), transparent 22%), rgba(0,0,0,0.72);
}
.buy-intro[hidden] { display: none !important; }
.buy-intro__panel {
  width: min(94vw, 940px);
  min-height: min(78svh, 640px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  padding: 18px;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 4px #111, 0 24px 60px rgba(0,0,0,0.6);
  background: #0e0e0e;
  cursor: pointer;
  image-rendering: pixelated;
  position: relative;
  overflow: hidden;
}
.buy-intro__scene {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border: 4px solid #0d0d0d;
  background: linear-gradient(180deg, #4b3a67 0%, #6d517d 24%, #bf8ea1 58%, #f1c1a7 100%);
}
.buy-intro__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,0.75) 0 1px, transparent 2px) 0 0/64px 64px,
    radial-gradient(circle at 74% 10%, rgba(255,255,255,0.4) 0 1px, transparent 2px) 0 0/88px 88px,
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 44%);
}
.buy-intro__mall {
  position: absolute;
  left: 0; right: 0; bottom: 96px;
  height: 150px;
  background:
    linear-gradient(180deg, transparent 0 24px, #1f1a29 24px 100%),
    linear-gradient(90deg, #3d3150 0 10%, transparent 10% 14%, #3d3150 14% 25%, transparent 25% 30%, #3d3150 30% 43%, transparent 43% 47%, #3d3150 47% 68%, transparent 68% 72%, #3d3150 72% 86%, transparent 86% 90%, #3d3150 90% 100%);
}
.buy-intro__mall::before {
  content: "327 MALL";
  position: absolute;
  left: 50%; top: 8px;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: #fff1a6;
  color: #101010;
  font: 900 18px/1 Arial, sans-serif;
  letter-spacing: 0.18em;
  box-shadow: 0 0 0 4px #303030;
}
.buy-intro__road {
  position: absolute;
  left: -10%; right: -10%; bottom: 0;
  height: 116px;
  background: linear-gradient(180deg, #4a4a4a 0%, #232323 100%);
  overflow: hidden;
}
.buy-intro__road::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 48px; height: 10px;
  background: repeating-linear-gradient(90deg, #f6f2b8 0 60px, transparent 60px 110px);
  animation: truckRoadMove327 0.7s linear infinite;
}
.buy-intro__road::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 12px;
  background: #121212;
}
.buy-intro__truck {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: min(78vw, 640px);
  height: 220px;
  transform: translateX(-50%);
  animation: truckBob327 0.82s steps(2, end) infinite;
}
.buy-intro__truck-glow {
  position: absolute;
  left: 6%; right: 6%; bottom: 18px; height: 40px;
  background: radial-gradient(circle, rgba(255,232,170,0.28) 0%, rgba(255,232,170,0.08) 46%, transparent 72%);
  filter: blur(8px);
}
.buy-intro__cargo,
.buy-intro__cabin,
.buy-intro__wheel,
.buy-intro__mentor { position: absolute; }
.buy-intro__cargo {
  left: 0; bottom: 40px;
  width: 72%; height: 108px;
  background: linear-gradient(180deg, #fbf7ef 0%, #d7d0c7 100%);
  box-shadow: inset 0 0 0 4px #202020, 0 0 0 4px #202020;
}
.buy-intro__cargo::before {
  content: "";
  position: absolute; inset: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent 30%);
  border: 2px solid rgba(0,0,0,0.1);
}
.buy-intro__cargo-mark {
  position: absolute; left: 28px; top: 22px;
  font: 900 34px/1 Arial, sans-serif; letter-spacing: 0.08em;
  color: #101010;
}
.buy-intro__cargo-sub {
  position: absolute; left: 28px; top: 64px;
  font: 900 18px/1 Arial, sans-serif; letter-spacing: 0.32em;
  color: #ff5fa2;
}
.buy-intro__cabin {
  right: 54px; bottom: 58px;
  width: 142px; height: 90px;
  background: linear-gradient(180deg, #ff9db7 0%, #e87295 100%);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 34%);
  box-shadow: inset 0 0 0 4px #202020, 0 0 0 4px #202020;
}
.buy-intro__cabin::before {
  content: "";
  position: absolute;
  left: 18px; top: 14px; width: 54px; height: 34px;
  background: #b9f0ff;
  box-shadow: inset 0 0 0 3px #202020;
}
.buy-intro__mentor {
  left: 28px; top: 16px;
  width: 30px; height: 48px;
  background:
    linear-gradient(180deg, #5d452d 0 16px, transparent 16px),
    linear-gradient(180deg, #ffd7b4 0 22px, #162849 22px 36px, #0f1730 36px 100%);
  box-shadow: inset 0 0 0 2px #202020;
}
.buy-intro__wheel {
  bottom: 0; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, #696969 0 32%, #101010 33% 100%);
  box-shadow: inset 0 0 0 4px #202020, 0 0 0 4px #202020;
}
.buy-intro__wheel--left { left: 88px; }
.buy-intro__wheel--right { right: 104px; }
.buy-intro__dialogue {
  position: relative;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 4px #111;
  background: #f6f6f6;
  padding: 18px 20px 26px;
  min-height: 150px;
}
.buy-intro__speaker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: #111;
  color: #fff;
  font: 700 14px/1 "Courier New", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.buy-intro__line {
  margin: 0;
  min-height: 3.2em;
  color: #1c1c1c;
  font: 400 clamp(17px, 2.1vw, 31px)/1.42 "Courier New", monospace;
}
.buy-intro__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.buy-intro__skip,
.buy-intro__prompt {
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #333;
}
.buy-intro__prompt { opacity: 0; }
.buy-intro.is-ready .buy-intro__prompt { opacity: 1; animation: introPromptBlink327 1s linear infinite; }
.buy-intro.is-leaving { animation: introOverlayOut327 0.28s ease forwards; }
@keyframes truckRoadMove327 { from { transform: translateX(0); } to { transform: translateX(-110px); } }
@keyframes truckBob327 { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-2px); } }
@media (max-width: 720px) {
  .buy-intro__panel { width: 95vw; min-height: min(88svh, 700px); padding: 12px; }
  .buy-intro__scene { min-height: 280px; }
  .buy-intro__truck { width: 92%; height: 180px; bottom: 34px; }
  .buy-intro__cargo { height: 88px; }
  .buy-intro__cargo-mark { left: 16px; top: 18px; font-size: 22px; }
  .buy-intro__cargo-sub { left: 16px; top: 50px; font-size: 12px; letter-spacing: 0.20em; }
  .buy-intro__cabin { width: 100px; height: 68px; right: 26px; bottom: 48px; }
  .buy-intro__mentor { left: 18px; top: 14px; width: 22px; height: 38px; }
  .buy-intro__wheel { width: 38px; height: 38px; }
  .buy-intro__wheel--left { left: 60px; }
  .buy-intro__wheel--right { right: 60px; }
  .buy-intro__line { font-size: clamp(14px, 4.3vw, 20px); min-height: 4.7em; }
  .buy-intro__meta { flex-direction: column; align-items: flex-start; }
  .buy-intro__skip, .buy-intro__prompt { font-size: 10px; }
}


/* v63: deeper buy cinematic, centered main shirts */
.page.product-page {
  grid-template-columns: 1fr minmax(0, min(46vw, 560px)) minmax(160px, 200px) 1fr !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(16px, 2.4vw, 34px) !important;
}
.page.product-page .product-card {
  grid-column: 2 !important;
  width: min(46vw, 560px) !important;
  max-height: 72svh !important;
  justify-self: center !important;
  align-self: center !important;
}
.page.product-page .product-card .product-shirt {
  max-height: 72svh !important;
}
.page.product-page .buy-card {
  grid-column: 3 !important;
  justify-self: center !important;
}
.page.product-page .pink-glow {
  grid-column: 2 !important;
}
@media (max-width: 980px) {
  .page.product-page {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .page.product-page .product-card,
  .page.product-page .buy-card,
  .page.product-page .pink-glow {
    grid-column: 1 !important;
  }
}

.buy-intro[hidden] { display: none !important; }
.buy-intro { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(0,0,0,0.72); }
.buy-intro__panel {
  width: min(94vw, 920px) !important;
  min-height: min(84svh, 720px) !important;
  display: grid !important;
  place-items: stretch !important;
  padding: 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
}
.buy-intro__welcome-screen,
.buy-intro__boarding-screen,
.buy-intro__drive-screen {
  display: grid;
  align-content: stretch;
  gap: 14px;
  min-height: 100%;
}
.buy-intro__welcome-screen[hidden],
.buy-intro__boarding-screen[hidden],
.buy-intro__drive-screen[hidden] { display: none !important; }

.buy-intro__rear-scene {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #302547 0%, #73547c 45%, #b98b9c 78%, #d4a48a 100%);
}
.buy-intro__rear-sky { position:absolute; inset:0; background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.75) 0 1px, transparent 2px) 0 0/68px 68px,
    radial-gradient(circle at 72% 14%, rgba(255,255,255,0.45) 0 1px, transparent 2px) 0 0/94px 94px,
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 34%);
}
.buy-intro__rear-city {
  position:absolute; left:0; right:0; bottom:122px; height:118px;
  background:
    linear-gradient(180deg, transparent 0 22px, #231c31 22px 100%),
    linear-gradient(90deg, #36294a 0 8%, transparent 8% 11%, #36294a 11% 18%, transparent 18% 22%, #36294a 22% 34%, transparent 34% 39%, #36294a 39% 52%, transparent 52% 56%, #36294a 56% 68%, transparent 68% 73%, #36294a 73% 87%, transparent 87% 91%, #36294a 91% 100%);
}
.buy-intro__rear-ground {
  position:absolute; left:0; right:0; bottom:0; height:140px;
  background:
    linear-gradient(180deg, #494949 0%, #1c1c1c 100%);
}
.buy-intro__rear-ground::before {
  content:""; position:absolute; left:50%; top:62px; width:220px; height:8px; transform:translateX(-50%);
  background: repeating-linear-gradient(90deg, #f0e49c 0 28px, transparent 28px 46px);
}
.buy-intro__rear-truck {
  position:absolute; left:50%; bottom:26px; width:min(80vw, 520px); height:220px; transform:translateX(-50%);
}
.buy-intro__rear-cargo {
  position:absolute; left:50%; bottom:56px; transform:translateX(-50%);
  width:240px; height:130px; background: linear-gradient(180deg, #f3eee6 0%, #d6cec3 100%);
  box-shadow: inset 0 0 0 4px #1a1a1a, 0 0 0 4px #1a1a1a;
}
.buy-intro__rear-doors {
  position:absolute; inset:10px; background:
    linear-gradient(90deg, rgba(0,0,0,0.16) calc(50% - 1px), transparent calc(50% - 1px) calc(50% + 1px), rgba(0,0,0,0.16) calc(50% + 1px)),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 22%);
  border: 2px solid rgba(0,0,0,0.12);
}
.buy-intro__rear-doors--open::before,
.buy-intro__rear-doors--open::after {
  content:""; position:absolute; top:0; bottom:0; width:50%; background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 22%); border:2px solid rgba(0,0,0,0.12);
}
.buy-intro__rear-doors--open::before { left:0; transform-origin:left center; animation: rearDoorLeft327 1.0s ease forwards; }
.buy-intro__rear-doors--open::after { right:0; transform-origin:right center; animation: rearDoorRight327 1.0s ease forwards; }
.buy-intro__rear-logo {
  position:absolute; left:50%; top:22px; transform:translateX(-50%);
  font: italic 900 52px/1 Georgia, serif; letter-spacing:0.12em; color: rgba(17,17,17,0.20);
}
.buy-intro__rear-cabin {
  position:absolute; left:50%; bottom:66px; transform:translateX(-50%);
  width:150px; height:64px; background: linear-gradient(180deg, #ff9db7 0%, #e77295 100%);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  box-shadow: inset 0 0 0 4px #1a1a1a, 0 0 0 4px #1a1a1a;
}
.buy-intro__rear-wheel {
  position:absolute; bottom:0; width:50px; height:50px; border-radius:50%;
  background: radial-gradient(circle, #6e6e6e 0 32%, #111 33% 100%); box-shadow: inset 0 0 0 4px #1a1a1a, 0 0 0 4px #1a1a1a;
}
.buy-intro__rear-wheel--left { left:120px; }
.buy-intro__rear-wheel--right { right:120px; }
.buy-intro__welcome-card {
  position: relative; z-index: 1; display:grid; gap:0; place-items:center; text-align:center;
  padding: clamp(18px, 3vw, 30px) clamp(18px, 3vw, 38px) 48px;
  border-radius: 18px; border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(19,19,19,0.92), rgba(8,8,8,0.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.buy-intro__welcome-card .buy-intro__badge { position: static; margin-bottom: 10px; }
.buy-intro__welcome-card .buy-intro__eyebrow { opacity:1; transform:none; animation:none; }
.buy-intro__welcome-card .buy-intro__title { opacity:1; transform:none; animation:none; max-width: 11em; margin: 12px auto 0; }
.buy-intro__welcome-card .buy-intro__ticker { width:min(78vw,420px); margin-top:18px; }
.buy-intro__welcome-card .buy-intro__ticker span { opacity:1; transform:none; animation:none; }
.buy-intro__welcome-card .buy-intro__prompt {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); opacity:1; animation:introPromptBlink327 1.15s linear infinite;
}
.buy-intro__boarding-copy {
  position: relative; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,12,12,0.92), rgba(7,7,7,0.94));
  border:1px solid rgba(255,255,255,0.10); color:#fff; font:700 12px/1 "Courier New", monospace; letter-spacing:0.18em; text-transform:uppercase; text-align:center;
}
.buy-intro__runner {
  position:absolute; bottom:52px; width:22px; height:34px; background: linear-gradient(180deg, #f8d5b2 0 12px, #0f1730 12px 100%); box-shadow: inset 0 0 0 2px #1a1a1a;
}
.buy-intro__runner--mentor { left:calc(50% - 110px); animation: runnerMentor327 1.35s linear forwards; }
.buy-intro__runner--player { left:calc(50% - 148px); animation: runnerPlayer327 1.35s linear forwards; background: linear-gradient(180deg, #f8d5b2 0 12px, #232323 12px 100%); }
.buy-intro__drive-screen .buy-intro__scene { min-height: 360px; border-radius:18px; }
.buy-intro__dialogue {
  position: relative; border-radius: 18px; border:1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(17,17,17,0.94), rgba(7,7,7,0.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 18px 36px rgba(0,0,0,0.36); padding: 18px 20px 24px; min-height: 154px;
}
.buy-intro__speaker {
  display:inline-block; margin-bottom:12px; padding:8px 14px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font:700 12px/1 "Courier New", monospace; letter-spacing:0.22em; text-transform:uppercase;
}
.buy-intro__line { min-height:3.6em; color:#f4f4f4; }
.buy-intro__meta { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.buy-intro__skip, .buy-intro__dialogue .buy-intro__prompt { color: rgba(255,255,255,0.82); font:700 10px/1 "Courier New", monospace; letter-spacing:0.16em; text-transform:uppercase; }
.buy-intro__dialogue .buy-intro__prompt { position: static; transform:none; opacity:0; }
.buy-intro[data-state="drive"] .buy-intro__dialogue .buy-intro__prompt { animation:introPromptBlink327 1.1s linear infinite; }
.buy-intro.is-leaving { animation: introOverlayOut327 .32s ease forwards; }

.story-scene.choice-opening .starter-row {
  display:grid !important; position:relative; overflow:hidden; isolation:isolate;
}
.story-scene.choice-opening .starter-row::before,
.story-scene.choice-opening .starter-row::after {
  content:""; position:absolute; top:0; bottom:0; width:50%; z-index:6; background: linear-gradient(180deg, #1b1b1b 0%, #090909 100%); border:2px solid rgba(255,255,255,0.05);
}
.story-scene.choice-opening .starter-row::before { left:0; animation: choiceDoorLeft327 .95s ease forwards; }
.story-scene.choice-opening .starter-row::after { right:0; animation: choiceDoorRight327 .95s ease forwards; }
.story-scene.choice-opening .starter-card { opacity:0; transform: translateY(30px) scale(0.92); }
.story-scene.is-choice.choice-opening .starter-card { animation: choiceStarterPop327 0.9s ease 0.4s forwards; }
.story-scene.is-choice .starter-card:nth-child(2) { animation-delay: .54s; }
.story-scene.is-choice .starter-card:nth-child(3) { animation-delay: .68s; }

@keyframes rearDoorLeft327 { from { transform: perspective(440px) rotateY(0deg); } to { transform: perspective(440px) rotateY(74deg) translateX(-12px); opacity:0.1; } }
@keyframes rearDoorRight327 { from { transform: perspective(440px) rotateY(0deg); } to { transform: perspective(440px) rotateY(-74deg) translateX(12px); opacity:0.1; } }
@keyframes runnerMentor327 {
  0% { transform: translateX(0) translateY(0); opacity:1; }
  55% { transform: translateX(100px) translateY(-4px); opacity:1; }
  100% { transform: translateX(150px) translateY(-10px) scale(0.72); opacity:0; }
}
@keyframes runnerPlayer327 {
  0% { transform: translateX(0) translateY(0); opacity:1; }
  55% { transform: translateX(112px) translateY(-2px); opacity:1; }
  100% { transform: translateX(162px) translateY(-10px) scale(0.72); opacity:0; }
}
@keyframes choiceDoorLeft327 { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes choiceDoorRight327 { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes choiceStarterPop327 { from { opacity:0; transform: translateY(28px) scale(0.88);} 55% { opacity:1; transform: translateY(-8px) scale(1.04);} to { opacity:1; transform: translateY(0) scale(1);} }

@media (max-width: 720px) {
  .buy-intro__panel { width:95vw !important; min-height:min(90svh, 760px) !important; padding: 12px !important; }
  .buy-intro__rear-scene { min-height: 270px; }
  .buy-intro__rear-truck { width: 92%; height: 180px; }
  .buy-intro__rear-cargo { width: 190px; height: 104px; }
  .buy-intro__rear-logo { font-size: 40px; }
  .buy-intro__rear-cabin { width: 120px; height: 52px; }
  .buy-intro__rear-wheel { width: 38px; height: 38px; }
  .buy-intro__rear-wheel--left { left: 72px; }
  .buy-intro__rear-wheel--right { right: 72px; }
  .buy-intro__welcome-card .buy-intro__title { max-width: 8.5em; }
  .buy-intro__meta { flex-direction: column; align-items: flex-start; }
  .buy-intro__line { min-height: 4.6em; font-size: clamp(14px, 4.4vw, 20px); }
}


/* v64: deeper truck intro, retro title, mentor sprite remix */
.story-body .professor-sprite {
  width: clamp(110px, 15vw, 168px) !important;
  height: clamp(156px, 22vw, 244px) !important;
  background: url('assets/mentor-c3h2e7n.png') center bottom / contain no-repeat !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.38)) drop-shadow(0 0 16px rgba(255,255,255,0.08)) !important;
}
.story-body .professor-sprite::before,
.story-body .professor-sprite::after { content: none !important; display:none !important; }

.story-body .buy-intro {
  background: radial-gradient(circle at 50% 50%, rgba(7,10,18,0.55), rgba(0,0,0,0.9)) !important;
}
.story-body .buy-intro__panel--v64 {
  width: min(96vw, 980px) !important;
  min-height: min(88svh, 760px) !important;
  padding: 14px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(20,22,34,0.98), rgba(5,6,12,0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 24px 70px rgba(0,0,0,0.55) !important;
}
.story-body .buy-intro__welcome-screen,
.story-body .buy-intro__boarding-screen,
.story-body .buy-intro__drive-screen {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 16px;
}
.story-body .buy-intro__title-stage,
.story-body .buy-intro__entry-scene,
.story-body .buy-intro__inside-scene {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,0.08);
  background: #090b12;
}
.story-body .buy-intro__title-stage {
  background:
    linear-gradient(180deg, #2b2a4f 0%, #12142c 50%, #090b12 100%);
}
.story-body .buy-intro__pixel-sky {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,0.82) 0 2px, transparent 3px) 0 0/128px 86px,
    radial-gradient(circle at 28% 21%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/136px 100px,
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/130px 92px,
    linear-gradient(180deg, rgba(255,255,255,0.10), transparent 46%);
  opacity: 0.85;
}
.story-body .buy-intro__truck-backdrop {
  position:absolute; inset: 64px 56px 86px;
  display:grid; place-items:center;
}
.story-body .buy-intro__truck-frame {
  position:relative; width:min(82vw, 680px); height:260px;
  background: linear-gradient(180deg, #d1cdc5 0%, #b3aea4 100%);
  box-shadow: inset 0 0 0 4px #16161a, 0 0 0 6px #11161f, 0 0 0 10px rgba(255,255,255,0.06);
}
.story-body .buy-intro__truck-door {
  position:absolute; top:14px; bottom:14px; width:18%; background: linear-gradient(180deg, #6f6b74 0%, #45444d 100%);
  border: 3px solid #1a1a22;
}
.story-body .buy-intro__truck-door--left { left:-2%; transform: perspective(640px) rotateY(72deg); transform-origin:left center; }
.story-body .buy-intro__truck-door--right { right:-2%; transform: perspective(640px) rotateY(-72deg); transform-origin:right center; }
.story-body .buy-intro__truck-interior-glow {
  position:absolute; inset:18px 56px 46px; background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.12), transparent 22%),
    linear-gradient(180deg, #3d3a47 0%, #0f1016 42%, #09090d 100%);
  box-shadow: inset 0 -18px 0 rgba(0,0,0,0.34);
}
.story-body .buy-intro__truck-floor {
  position:absolute; left:56px; right:56px; bottom:18px; height:34px; background:
    repeating-linear-gradient(90deg, #776c56 0 24px, #645943 24px 48px);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.08);
}
.story-body .buy-intro__truck-stack,
.story-body .buy-intro__truck-crate {
  position:absolute; bottom:58px; background: linear-gradient(180deg, #a8834f 0%, #78552f 100%); box-shadow: inset 0 0 0 3px #352312;
}
.story-body .buy-intro__truck-stack--left { left:96px; width:110px; height:104px; }
.story-body .buy-intro__truck-stack--right { right:100px; width:126px; height:92px; }
.story-body .buy-intro__truck-stack--left::before,
.story-body .buy-intro__truck-stack--right::before,
.story-body .buy-intro__truck-crate::before,
.story-body .buy-intro__truck-stack--left::after,
.story-body .buy-intro__truck-stack--right::after,
.story-body .buy-intro__truck-crate::after {
  content:""; position:absolute; background: rgba(47,29,14,0.55);
}
.story-body .buy-intro__truck-stack--left::before,
.story-body .buy-intro__truck-stack--right::before,
.story-body .buy-intro__truck-crate::before { left:0; right:0; top:48%; height:3px; }
.story-body .buy-intro__truck-stack--left::after,
.story-body .buy-intro__truck-stack--right::after,
.story-body .buy-intro__truck-crate::after { top:0; bottom:0; left:48%; width:3px; }
.story-body .buy-intro__truck-crate { left:50%; transform: translateX(-50%); width:160px; height:96px; background: linear-gradient(180deg, #ea8cb1 0%, #d66f97 100%); }
.story-body .buy-intro__title-copy {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width:min(92%, 820px); text-align:center; z-index:2;
}
.story-body .buy-intro__series {
  display:inline-block; padding: 6px 16px; margin-bottom: 12px; border-radius: 999px;
  background: rgba(13,16,28,0.82); border:1px solid rgba(255,255,255,0.12); color:#e8f3ff; font:700 12px/1 "Courier New", monospace; letter-spacing:0.22em; text-transform:uppercase;
}
.story-body .buy-intro__emerald-title {
  margin:0 auto 10px; max-width: 9.8em; line-height:0.84; font-size: clamp(34px, 6.4vw, 86px); font-weight: 900; letter-spacing:-0.02em;
  color:#d7f2a2; transform: skew(-6deg); text-shadow:
    -4px 0 #175f9b, 4px 0 #175f9b, 0 -4px #175f9b, 0 4px #175f9b,
    -4px -4px #175f9b, 4px -4px #175f9b, -4px 4px #175f9b, 4px 4px #175f9b,
    0 8px 0 #0a2643, 0 0 22px rgba(217,242,162,0.18);
}
.story-body .buy-intro__copyright {
  color:#eef4ff; font: 700 14px/1.2 "Courier New", monospace; letter-spacing:0.16em; text-transform:uppercase; text-shadow:0 2px 0 rgba(0,0,0,0.45);
}
.story-body .buy-intro__prompt--title {
  display:inline-block; margin-top:18px; position:static !important; transform:none !important; color:#f8f8f8; padding:12px 24px; border-radius:999px;
  background: rgba(8,10,18,0.75); border:1px solid rgba(255,255,255,0.12); font:700 12px/1 "Courier New", monospace; letter-spacing:0.20em; text-transform:uppercase; animation:introPromptBlink327 1.12s linear infinite;
}
.story-body .buy-intro__entry-scene {
  background: linear-gradient(180deg, #1a1a1f 0%, #090a0f 100%);
}
.story-body .buy-intro__entry-roof {
  position:absolute; left:0; right:0; top:0; height:84px; background: linear-gradient(180deg, #353540 0%, #191920 100%); box-shadow: inset 0 -8px 0 rgba(255,255,255,0.05);
}
.story-body .buy-intro__entry-depth {
  position:absolute; inset:84px 42px 92px; background: linear-gradient(180deg, rgba(28,29,38,0.80), rgba(6,6,10,0.98)); box-shadow: inset 0 0 0 4px #1d1e26, inset 0 0 44px rgba(0,0,0,0.65);
}
.story-body .buy-intro__entry-floor { position:absolute; left:42px; right:42px; bottom:34px; height:86px; background: repeating-linear-gradient(90deg, #6b604d 0 32px, #564b39 32px 64px); }
.story-body .buy-intro__entry-open-door {
  position:absolute; inset:84px 42px 120px; border-left: 28px solid #4d4d56; border-right:28px solid #4d4d56; box-shadow: inset 0 0 0 4px rgba(0,0,0,0.52);
}
.story-body .buy-intro__entry-boxes { position:absolute; bottom:118px; width:140px; height:124px; background: linear-gradient(180deg, #a17942 0%, #6d4724 100%); box-shadow: inset 0 0 0 4px #2f1b0e; }
.story-body .buy-intro__entry-boxes--left { left:86px; }
.story-body .buy-intro__entry-boxes--right { right:86px; width:160px; height:136px; }
.story-body .buy-intro__entry-boxes::before,
.story-body .buy-intro__entry-boxes::after { content:""; position:absolute; background: rgba(52,33,17,0.55); }
.story-body .buy-intro__entry-boxes::before { left:0; right:0; top:48%; height:4px; }
.story-body .buy-intro__entry-boxes::after { top:0; bottom:0; left:48%; width:4px; }
.story-body .buy-intro__entry-character {
  position:absolute; bottom:68px; width:40px; height:72px; image-rendering:pixelated; filter: drop-shadow(0 0 6px rgba(255,255,255,0.10));
}
.story-body .buy-intro__entry-character--mentor {
  left:calc(50% - 54px); background:
    linear-gradient(180deg, #f0ddb4 0 16px, transparent 16px),
    linear-gradient(180deg, transparent 0 18px, #d0bb59 18px 48px, #5e5635 48px 100%);
  clip-path: polygon(38% 0, 62% 0, 68% 10%, 74% 30%, 100% 32%, 100% 52%, 82% 54%, 82% 74%, 67% 74%, 67% 100%, 55% 100%, 55% 76%, 45% 76%, 45% 100%, 33% 100%, 33% 74%, 18% 74%, 18% 54%, 0 52%, 0 32%, 24% 30%, 30% 10%);
  animation: sneakMentor327 1.8s linear forwards;
}
.story-body .buy-intro__entry-character--player {
  left:calc(50% - 8px); width:36px; height:64px; background:
    linear-gradient(180deg, #efc89d 0 14px, transparent 14px),
    linear-gradient(180deg, transparent 0 16px, #222 16px 44px, #4c4c4c 44px 100%);
  clip-path: polygon(38% 0, 62% 0, 68% 10%, 73% 28%, 100% 30%, 100% 50%, 80% 52%, 80% 72%, 66% 72%, 66% 100%, 54% 100%, 54% 74%, 46% 74%, 46% 100%, 34% 100%, 34% 72%, 20% 72%, 20% 52%, 0 50%, 0 30%, 26% 28%, 31% 10%);
  animation: sneakPlayer327 1.8s linear forwards;
}
.story-body .buy-intro__inside-scene {
  background: linear-gradient(180deg, #11121a 0%, #05060b 100%);
}
.story-body .buy-intro__inside-darkness {
  position:absolute; inset:0; background: radial-gradient(circle at 62% 52%, rgba(255,255,255,0.05), transparent 16%), rgba(0,0,0,0.38);
}
.story-body .buy-intro__inside-wall { position:absolute; top:0; bottom:104px; width:17%; background: linear-gradient(180deg, #3d404c 0%, #20212b 100%); }
.story-body .buy-intro__inside-wall--left { left:0; }
.story-body .buy-intro__inside-wall--right { right:0; }
.story-body .buy-intro__inside-floor { position:absolute; left:0; right:0; bottom:0; height:104px; background: repeating-linear-gradient(90deg, #6c624c 0 40px, #58503d 40px 80px); }
.story-body .buy-intro__inside-boxes { position:absolute; background: linear-gradient(180deg, #a27c46 0%, #714a26 100%); box-shadow: inset 0 0 0 4px #2f1b0e; }
.story-body .buy-intro__inside-boxes::before,
.story-body .buy-intro__inside-boxes::after { content:""; position:absolute; background: rgba(52,33,17,0.55); }
.story-body .buy-intro__inside-boxes::before { left:0; right:0; top:48%; height:4px; }
.story-body .buy-intro__inside-boxes::after { top:0; bottom:0; left:48%; width:4px; }
.story-body .buy-intro__inside-boxes--left { left:88px; bottom:114px; width:132px; height:126px; }
.story-body .buy-intro__inside-boxes--right { right:92px; bottom:110px; width:148px; height:138px; }
.story-body .buy-intro__inside-boxes--back { left:50%; transform:translateX(-50%); bottom:156px; width:176px; height:94px; opacity:0.8; }
.story-body .buy-intro__inside-mentor {
  position:absolute; left:70px; bottom:62px; width:164px; height:228px; background: url('assets/mentor-c3h2e7n.png') center bottom / contain no-repeat; image-rendering:pixelated; filter: drop-shadow(0 10px 0 rgba(0,0,0,0.34)); z-index:3;
}
.story-body .buy-intro__inside-player {
  position:absolute; left:214px; bottom:72px; width:56px; height:118px; background:
    linear-gradient(180deg, #efc89d 0 26px, transparent 26px),
    linear-gradient(180deg, transparent 0 28px, #1e1f23 28px 82px, #4b4b4b 82px 100%);
  clip-path: polygon(34% 0, 66% 0, 74% 16%, 78% 34%, 100% 38%, 100% 58%, 78% 62%, 78% 80%, 64% 80%, 64% 100%, 52% 100%, 52% 82%, 48% 82%, 48% 100%, 36% 100%, 36% 80%, 22% 80%, 22% 62%, 0 58%, 0 38%, 22% 34%, 26% 16%);
  z-index:3;
}
.story-body .buy-intro__inside-flashlight {
  position:absolute; left:176px; top:132px; width:360px; height:190px; background: radial-gradient(ellipse at left center, rgba(255,255,220,0.34) 0%, rgba(255,244,170,0.22) 26%, rgba(255,250,190,0.08) 46%, transparent 70%); transform: rotate(-7deg); filter: blur(1px); animation: flashlightSweep327 3.4s ease-in-out infinite alternate; z-index:2;
}
.story-body .buy-intro__inside-starters {
  position:absolute; right:104px; bottom:106px; display:flex; gap:20px; z-index:2;
}
.story-body .buy-intro__inside-starter {
  width:34px; height:34px; border-radius:50%; border:3px solid #0e0e12; box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 12px rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #f4f4f4 0 50%, #1a1a1a 50% 100%);
}
.story-body .buy-intro__inside-starter--white { box-shadow: 0 0 0 3px rgba(255,255,255,0.10), 0 0 16px rgba(255,255,255,0.24); }
.story-body .buy-intro__inside-starter--black { background: linear-gradient(180deg, #2a2a2a 0 50%, #0d0d0d 50% 100%); box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 16px rgba(87,255,122,0.20); }
.story-body .buy-intro__inside-starter--pink { background: linear-gradient(180deg, #f28fb3 0 50%, #d76591 50% 100%); box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 16px rgba(242,143,179,0.26); }
.story-body .buy-intro__boarding-copy,
.story-body .buy-intro__dialogue {
  position:relative; border-radius:18px; border:1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(15,16,24,0.96), rgba(7,8,13,0.96)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 16px 32px rgba(0,0,0,0.34);
}
.story-body .buy-intro__boarding-copy {
  color:#f2f6ff; text-align:center; padding:16px 18px; font:700 12px/1 "Courier New", monospace; letter-spacing:0.20em; text-transform:uppercase;
}
.story-body .buy-intro__dialogue { padding: 18px 20px 24px; min-height: 170px; }
.story-body .buy-intro__speaker { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); }
.story-body .buy-intro__line { min-height: 4.2em; color:#eef3fb; font-size: clamp(16px, 2vw, 22px); line-height: 1.62; }
.story-body .buy-intro__meta { align-items:center; }
.story-body .buy-intro__skip,
.story-body .buy-intro__dialogue .buy-intro__prompt { color: rgba(240,244,255,0.80); }
.story-body .buy-intro__dialogue .buy-intro__prompt { opacity:0; }
.story-body .buy-intro__welcome-screen[hidden],
.story-body .buy-intro__boarding-screen[hidden],
.story-body .buy-intro__drive-screen[hidden] { display:none !important; }

@keyframes sneakMentor327 {
  0% { transform: translateX(-24px) translateY(18px) scale(1.05); opacity:0; }
  16% { opacity:1; }
  100% { transform: translateX(38px) translateY(-18px) scale(0.78); opacity:0.96; }
}
@keyframes sneakPlayer327 {
  0% { transform: translateX(-28px) translateY(22px) scale(1.05); opacity:0; }
  18% { opacity:1; }
  100% { transform: translateX(32px) translateY(-16px) scale(0.78); opacity:0.96; }
}
@keyframes flashlightSweep327 {
  0% { transform: rotate(-11deg) translateX(-8px); }
  100% { transform: rotate(-2deg) translateX(12px); }
}
@media (max-width: 760px) {
  .story-body .buy-intro__panel--v64 { width:95vw !important; min-height:min(92svh, 780px) !important; padding:12px !important; }
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 320px; }
  .story-body .buy-intro__truck-backdrop { inset: 54px 22px 76px; }
  .story-body .buy-intro__truck-frame { width: 100%; height: 206px; }
  .story-body .buy-intro__truck-door { width: 20%; }
  .story-body .buy-intro__truck-interior-glow { inset: 16px 36px 36px; }
  .story-body .buy-intro__truck-floor { left:36px; right:36px; }
  .story-body .buy-intro__truck-stack--left { left:52px; width:82px; height:84px; }
  .story-body .buy-intro__truck-stack--right { right:54px; width:88px; height:76px; }
  .story-body .buy-intro__truck-crate { width: 112px; height: 74px; }
  .story-body .buy-intro__emerald-title { max-width: 8.2em; font-size: clamp(28px, 8.2vw, 52px); }
  .story-body .buy-intro__copyright { font-size: 11px; }
  .story-body .buy-intro__entry-depth, .story-body .buy-intro__entry-open-door { inset-left:18px; inset-right:18px; }
  .story-body .buy-intro__entry-depth { inset:84px 18px 92px; }
  .story-body .buy-intro__entry-open-door { inset:84px 18px 120px; border-left-width:18px; border-right-width:18px; }
  .story-body .buy-intro__entry-floor { left:18px; right:18px; }
  .story-body .buy-intro__entry-boxes--left { left:34px; width:92px; height:94px; }
  .story-body .buy-intro__entry-boxes--right { right:34px; width:104px; height:102px; }
  .story-body .buy-intro__inside-mentor { left:20px; width:130px; height:192px; }
  .story-body .buy-intro__inside-player { left:118px; width:46px; height:96px; }
  .story-body .buy-intro__inside-flashlight { left:102px; top:118px; width:236px; height:150px; }
  .story-body .buy-intro__inside-boxes--left { left:26px; width:92px; height:92px; }
  .story-body .buy-intro__inside-boxes--right { right:24px; width:94px; height:98px; }
  .story-body .buy-intro__inside-boxes--back { width:114px; height:74px; bottom:142px; }
  .story-body .buy-intro__inside-starters { right:30px; gap:12px; }
  .story-body .buy-intro__inside-starter { width:26px; height:26px; }
  .story-body .buy-intro__line { font-size: clamp(14px, 4.2vw, 18px); }
  .story-body .buy-intro__meta { flex-direction: column; align-items:flex-start; gap:8px; }
}


/* v65: truck-night intro refresh, emerald title, fixed mentor sprite */
.story-body .buy-intro {
  background:
    radial-gradient(circle at 50% 14%, rgba(74,102,175,0.10), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.05), transparent 36%),
    #05070c !important;
}
.story-body .buy-intro__panel--v64 {
  width: min(96vw, 1120px) !important;
  min-height: min(92svh, 820px) !important;
  padding: 10px 10px 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-body .buy-intro__title-stage,
.story-body .buy-intro__entry-scene,
.story-body .buy-intro__inside-scene {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.story-body .buy-intro__series { display: none !important; }
.story-body .buy-intro__title-stage {
  min-height: 450px !important;
  background:
    linear-gradient(180deg, #07163a 0%, #172b55 18%, #1b2745 38%, #101934 55%, #0e1323 56%, #121720 66%, #0d1019 100%) !important;
}
.story-body .buy-intro__pixel-sky {
  background:
    radial-gradient(circle at 9% 16%, rgba(255,245,183,0.95) 0 2px, transparent 3px) 0 0/152px 92px,
    radial-gradient(circle at 28% 21%, rgba(255,255,255,0.72) 0 2px, transparent 3px) 0 0/166px 120px,
    radial-gradient(circle at 73% 13%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/174px 110px,
    radial-gradient(circle at 50% 12%, rgba(255,227,119,0.96) 0 34px, transparent 35px),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 48%);
  opacity: 1 !important;
}
.story-body .buy-intro__pixel-sky::before,
.story-body .buy-intro__pixel-sky::after {
  content:"";
  position:absolute;
  left:0; right:0;
}
.story-body .buy-intro__pixel-sky::before {
  bottom: 116px;
  height: 170px;
  background:
    linear-gradient(90deg,
      transparent 0 2%, #31436d 2% 12%, transparent 12% 14%, #26385d 14% 22%, transparent 22% 28%,
      #3c2f57 28% 38%, transparent 38% 42%, #55426f 42% 54%, transparent 54% 57%,
      #2d355b 57% 65%, transparent 65% 69%, #443057 69% 80%, transparent 80% 83%,
      #313a67 83% 94%, transparent 94% 100%),
    linear-gradient(180deg, transparent 0 12%, rgba(245,214,100,0.88) 12% 14%, transparent 14% 100%);
  opacity: .9;
  clip-path: polygon(0 100%,0 36%,6% 36%,6% 54%,13% 54%,13% 26%,19% 26%,19% 61%,28% 61%,28% 34%,39% 34%,39% 57%,47% 57%,47% 31%,58% 31%,58% 52%,67% 52%,67% 22%,76% 22%,76% 58%,86% 58%,86% 42%,94% 42%,94% 34%,100% 34%,100% 100%);
}
.story-body .buy-intro__pixel-sky::after {
  bottom: 92px;
  height: 26px;
  background: #21345b;
  box-shadow: 0 6px 0 #0b1223;
}
.story-body .buy-intro__truck-backdrop {
  inset: 118px 90px 130px !important;
  display:grid;
  align-items:end;
}
.story-body .buy-intro__truck-frame {
  width: min(76vw, 620px) !important;
  height: 230px !important;
  background:
    linear-gradient(180deg, #dad7d0 0%, #c3beb5 100%) !important;
  box-shadow:
    inset 0 0 0 4px #2a2b31,
    inset 0 -14px 0 rgba(0,0,0,0.18),
    0 24px 0 -10px rgba(0,0,0,0.22) !important;
  border-radius: 0 !important;
}
.story-body .buy-intro__truck-frame::before {
  content:"";
  position:absolute;
  left:-10px; right:-10px; bottom:-42px; height:46px;
  background: linear-gradient(180deg, #1f2534 0%, #0e1118 100%);
  clip-path: polygon(3% 28%, 12% 28%, 16% 0, 84% 0, 88% 28%, 97% 28%, 97% 78%, 3% 78%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,0.04);
}
.story-body .buy-intro__truck-frame::after {
  content:"";
  position:absolute;
  left:50%; bottom:-54px; transform:translateX(-50%);
  width: 68%; height: 18px;
  background: repeating-linear-gradient(90deg, #f4e58f 0 28px, #8d7530 28px 40px);
}
.story-body .buy-intro__truck-door {
  top: 12px !important; bottom: 20px !important; width: 22% !important;
  background:
    linear-gradient(180deg, #8b8b8f 0%, #56555c 100%) !important;
  border: 3px solid #24252d !important;
}
.story-body .buy-intro__truck-door--left { left: -4% !important; transform: perspective(760px) rotateY(74deg) !important; }
.story-body .buy-intro__truck-door--right { right: -4% !important; transform: perspective(760px) rotateY(-74deg) !important; }
.story-body .buy-intro__truck-interior-glow {
  inset: 16px 80px 28px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.11), transparent 26%),
    linear-gradient(180deg, #464751 0%, #20222c 32%, #090b10 80%, #050608 100%) !important;
  box-shadow: inset 0 -6px 0 rgba(255,255,255,0.04), inset 0 0 0 3px rgba(11,11,14,0.55) !important;
}
.story-body .buy-intro__truck-floor {
  left: 80px !important; right:80px !important; bottom: 16px !important; height: 24px !important;
  background: repeating-linear-gradient(90deg, #7a6f5b 0 26px, #625745 26px 52px) !important;
}
.story-body .buy-intro__truck-stack,
.story-body .buy-intro__truck-crate {
  bottom: 40px !important;
  background: linear-gradient(180deg, #a27b48 0%, #694325 100%) !important;
  box-shadow: inset 0 0 0 3px #2b190d !important;
}
.story-body .buy-intro__truck-stack--left { left: 116px !important; width: 94px !important; height: 88px !important; }
.story-body .buy-intro__truck-stack--right { right: 120px !important; width: 104px !important; height: 78px !important; }
.story-body .buy-intro__truck-crate { left:50% !important; transform:translateX(-50%) !important; width: 128px !important; height: 80px !important; background: linear-gradient(180deg, #f299ba 0%, #d6729b 100%) !important; }
.story-body .buy-intro__title-copy {
  bottom: 22px !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 11.3em !important;
  font-size: clamp(38px, 5.75vw, 84px) !important;
  font-weight: 900 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.035em !important;
  color: #f0d58d !important;
  text-transform: uppercase;
  transform: none !important;
  text-shadow:
    -4px 0 #1a62ab, 4px 0 #1a62ab, 0 -4px #1a62ab, 0 4px #1a62ab,
    -4px -4px #1a62ab, 4px -4px #1a62ab, -4px 4px #1a62ab, 4px 4px #1a62ab,
    -7px 0 #0b1628, 7px 0 #0b1628, 0 -7px #0b1628, 0 7px #0b1628,
    -7px -7px #0b1628, 7px -7px #0b1628, -7px 7px #0b1628, 7px 7px #0b1628,
    0 9px 0 rgba(7,14,28,0.55) !important;
}
.story-body .buy-intro__copyright {
  margin-top: 10px;
  color: #f2f4f6 !important;
  font-size: clamp(13px, 1.1vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: none !important;
  text-shadow:
    -2px 0 #0b1628, 2px 0 #0b1628, 0 -2px #0b1628, 0 2px #0b1628,
    -2px -2px #0b1628, 2px -2px #0b1628, -2px 2px #0b1628, 2px 2px #0b1628 !important;
}
.story-body .buy-intro__prompt--title {
  margin-top: 16px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  color: #f7f4e8 !important;
  text-shadow:
    -1px 0 #0b1628, 1px 0 #0b1628, 0 -1px #0b1628, 0 1px #0b1628,
    0 0 14px rgba(255,255,255,0.10) !important;
}

/* boarding scene: rear open truck in night alley */
.story-body .buy-intro__entry-scene {
  min-height: 430px !important;
  background:
    linear-gradient(180deg, #061438 0%, #17264b 30%, #11162b 54%, #0a0d14 55%, #0d1118 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,235,134,0.94) 0 30px, transparent 31px),
    linear-gradient(90deg, transparent 0 4%, #34466f 4% 16%, transparent 16% 19%, #293a63 19% 31%, transparent 31% 35%, #3f2f59 35% 47%, transparent 47% 52%, #516184 52% 64%, transparent 64% 69%, #3f315e 69% 83%, transparent 83% 87%, #2f4367 87% 100%);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,0 100%,0 64%,4% 64%,4% 48%,12% 48%,12% 34%,19% 34%,19% 62%,28% 62%,28% 38%,37% 38%,37% 58%,48% 58%,48% 26%,58% 26%,58% 61%,68% 61%,68% 40%,78% 40%,78% 58%,88% 58%,88% 50%,96% 50%,96% 100%);
  opacity: .92;
}
.story-body .buy-intro__entry-scene::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:116px;
  background: linear-gradient(180deg, #1b2438 0%, #10151f 18%, #171d28 18%, #171d28 100%);
  box-shadow: inset 0 8px 0 #2c4067;
}
.story-body .buy-intro__entry-roof,
.story-body .buy-intro__entry-depth,
.story-body .buy-intro__entry-floor { display:none !important; }
.story-body .buy-intro__entry-open-door {
  inset: 98px 260px 118px !important;
  border: none !important;
  background:
    linear-gradient(180deg, rgba(252,252,252,0.14), rgba(255,255,255,0.02) 18%, transparent 22%),
    linear-gradient(180deg, #4a4b53 0%, #b9b4ad 14%, #2d2f37 18%, #0c0e14 35%, #050607 100%) !important;
  box-shadow:
    inset 0 0 0 6px #2b2c32,
    0 0 0 8px rgba(255,255,255,0.04) !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  content:"";
  position:absolute; top:12px; bottom:18px; width:26%;
  background: linear-gradient(180deg, #9d9ca2 0%, #57565c 100%);
  border: 4px solid #27282e;
}
.story-body .buy-intro__entry-open-door::before { left:-5%; transform: perspective(800px) rotateY(76deg); transform-origin:left center; }
.story-body .buy-intro__entry-open-door::after { right:-5%; transform: perspective(800px) rotateY(-76deg); transform-origin:right center; }
.story-body .buy-intro__entry-boxes {
  bottom: 154px !important;
  background: linear-gradient(180deg, #a5814e 0%, #6b4526 100%) !important;
  box-shadow: inset 0 0 0 3px #2f1b0e, 0 6px 0 rgba(0,0,0,0.25) !important;
}
.story-body .buy-intro__entry-boxes--left { left: 292px !important; width: 88px !important; height: 86px !important; }
.story-body .buy-intro__entry-boxes--right { right: 286px !important; width: 94px !important; height: 96px !important; }
.story-body .buy-intro__entry-character {
  bottom: 78px !important;
  z-index: 2;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,0.25)) !important;
}
.story-body .buy-intro__entry-character--mentor {
  left: calc(50% - 92px) !important;
  width: 74px !important; height: 126px !important;
  background: url('assets/mentor-c3h2e7n-v2.png') center bottom / contain no-repeat !important;
  clip-path: none !important;
  animation: sneakMentor327v65 2.18s cubic-bezier(.22,.74,.2,1) forwards !important;
}
.story-body .buy-intro__entry-character--player {
  left: calc(50% + 18px) !important;
  width: 44px !important; height: 92px !important;
  background:
    linear-gradient(180deg, #efc89d 0 22px, transparent 22px),
    linear-gradient(180deg, transparent 0 24px, #1d1d20 24px 64px, #4f5054 64px 100%) !important;
  clip-path: polygon(34% 0, 66% 0, 74% 16%, 78% 34%, 100% 38%, 100% 58%, 78% 62%, 78% 80%, 64% 80%, 64% 100%, 52% 100%, 52% 82%, 48% 82%, 48% 100%, 36% 100%, 36% 80%, 22% 80%, 22% 62%, 0 58%, 0 38%, 22% 34%, 26% 16%) !important;
  animation: sneakPlayer327v65 2.18s cubic-bezier(.22,.74,.2,1) forwards !important;
}
.story-body .buy-intro__boarding-copy {
  margin-top: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align:center;
  color: #f6f6f6 !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: -1px 0 #0b1628, 1px 0 #0b1628, 0 -1px #0b1628, 0 1px #0b1628 !important;
}

/* inside scene and dialogue use same box spirit */
.story-body .buy-intro__inside-scene {
  min-height: 430px !important;
  background: linear-gradient(180deg, #181b25 0%, #090b10 100%) !important;
}
.story-body .buy-intro__inside-darkness { background: radial-gradient(circle at 64% 48%, rgba(255,255,255,0.06), transparent 16%), rgba(0,0,0,0.44) !important; }
.story-body .buy-intro__inside-wall { top:0 !important; bottom:108px !important; width: 17% !important; background: linear-gradient(180deg, #50515a 0%, #25262f 100%) !important; }
.story-body .buy-intro__inside-floor { height: 108px !important; background: repeating-linear-gradient(90deg, #766b57 0 40px, #5d5341 40px 80px) !important; }
.story-body .buy-intro__inside-mentor {
  left: 54px !important; bottom: 66px !important; width: 188px !important; height: 282px !important;
  background: url('assets/mentor-c3h2e7n-v2.png') center bottom / contain no-repeat !important;
}
.story-body .buy-intro__inside-player { left: 214px !important; bottom: 82px !important; }
.story-body .buy-intro__inside-flashlight {
  left: 168px !important; top: 126px !important; width: 420px !important; height: 210px !important;
  background: radial-gradient(ellipse at left center, rgba(255,255,225,0.40) 0%, rgba(255,244,170,0.22) 22%, rgba(255,250,190,0.08) 46%, transparent 72%) !important;
  animation: flashlightSweep327v65 4.1s ease-in-out infinite alternate !important;
}
.story-body .buy-intro__inside-starters { right: 94px !important; bottom: 112px !important; }
.story-body .buy-intro__dialogue {
  padding: 20px 26px 24px !important;
  border-radius: 0 !important;
  border: none !important;
  background: #ececec !important;
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 9px #dfe7ff,
    0 0 0 5px #141414,
    0 18px 36px rgba(0,0,0,0.32),
    0 0 18px rgba(89,146,255,0.12) !important;
}
.story-body .buy-intro__speaker {
  display:inline-flex; align-items:center; margin-bottom:14px;
  padding: 9px 28px !important;
  background: linear-gradient(180deg, #344884 0%, #181f35 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: 2px solid #f4f4f4 !important;
  box-shadow: 0 0 0 4px #171a25 !important;
  letter-spacing: .14em !important;
}
.story-body .buy-intro__line {
  min-height: 4.3em !important;
  color:#171717 !important;
  font-size: clamp(14px, 1.8vw, 20px) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.01em !important;
}
.story-body .buy-intro__meta { margin-top: 12px !important; }
.story-body .buy-intro__skip,
.story-body .buy-intro__dialogue .buy-intro__prompt {
  color: rgba(40,40,40,0.68) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
}

.story-body .professor-sprite {
  width: clamp(118px, 15vw, 176px) !important;
  height: clamp(184px, 24vw, 266px) !important;
  background: url('assets/mentor-c3h2e7n-v2.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,0.32)) drop-shadow(0 0 18px rgba(255,255,255,0.05)) !important;
}

@keyframes sneakMentor327v65 {
  0% { transform: translateX(-12px) translateY(12px) scale(1.04); opacity:0; }
  10% { opacity:1; }
  50% { transform: translateX(-8px) translateY(0px) scale(0.92); opacity:1; }
  100% { transform: translateX(12px) translateY(-62px) scale(0.56); opacity:0.9; }
}
@keyframes sneakPlayer327v65 {
  0% { transform: translateX(8px) translateY(18px) scale(1.06); opacity:0; }
  10% { opacity:1; }
  52% { transform: translateX(4px) translateY(2px) scale(0.95); opacity:1; }
  100% { transform: translateX(-18px) translateY(-56px) scale(0.58); opacity:0.88; }
}
@keyframes flashlightSweep327v65 {
  0% { transform: rotate(-11deg) translateX(-12px); }
  100% { transform: rotate(-3deg) translateX(16px); }
}

@media (max-width: 900px) {
  .story-body .buy-intro__truck-backdrop { inset: 108px 24px 136px !important; }
  .story-body .buy-intro__truck-frame { width: 100% !important; height: 190px !important; }
  .story-body .buy-intro__truck-interior-glow { inset: 14px 42px 24px !important; }
  .story-body .buy-intro__truck-floor { left:42px !important; right:42px !important; }
  .story-body .buy-intro__truck-stack--left { left:58px !important; width:76px !important; height:70px !important; }
  .story-body .buy-intro__truck-stack--right { right:60px !important; width:82px !important; height:66px !important; }
  .story-body .buy-intro__truck-crate { width: 92px !important; height: 58px !important; }
  .story-body .buy-intro__title-stage { min-height: 380px !important; }
  .story-body .buy-intro__emerald-title { font-size: clamp(30px, 8vw, 56px) !important; max-width: 9.6em !important; }
  .story-body .buy-intro__entry-open-door { inset: 104px 110px 126px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 116px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 112px !important; }
  .story-body .buy-intro__inside-mentor { left:18px !important; width:150px !important; height:230px !important; }
  .story-body .buy-intro__inside-player { left:132px !important; }
  .story-body .buy-intro__inside-flashlight { left:112px !important; width:290px !important; height:150px !important; }
  .story-body .buy-intro__inside-starters { right: 34px !important; bottom: 96px !important; gap: 12px !important; }
}
@media (max-width: 640px) {
  .story-body .buy-intro__panel--v64 { width: 96vw !important; min-height: min(94svh, 760px) !important; }
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 290px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 82px 14px 136px !important; }
  .story-body .buy-intro__truck-frame { height: 138px !important; }
  .story-body .buy-intro__truck-door { width: 23% !important; }
  .story-body .buy-intro__truck-interior-glow { inset: 8px 28px 16px !important; }
  .story-body .buy-intro__truck-floor { left:28px !important; right:28px !important; height:16px !important; }
  .story-body .buy-intro__truck-stack--left { left:32px !important; width:48px !important; height:40px !important; }
  .story-body .buy-intro__truck-stack--right { right:34px !important; width:54px !important; height:44px !important; }
  .story-body .buy-intro__truck-crate { width:56px !important; height:34px !important; }
  .story-body .buy-intro__title-copy { width: 95% !important; bottom: 18px !important; }
  .story-body .buy-intro__prompt--title { font-size: 11px !important; }
  .story-body .buy-intro__entry-open-door { inset: 86px 44px 84px !important; }
  .story-body .buy-intro__entry-boxes { bottom: 112px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 56px !important; width: 54px !important; height: 52px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 54px !important; width: 56px !important; height: 58px !important; }
  .story-body .buy-intro__entry-character--mentor { left: calc(50% - 54px) !important; width: 46px !important; height: 74px !important; }
  .story-body .buy-intro__entry-character--player { left: calc(50% + 4px) !important; width: 30px !important; height: 58px !important; }
  .story-body .buy-intro__inside-boxes--left { left:16px !important; width:64px !important; height:64px !important; }
  .story-body .buy-intro__inside-boxes--right { right:16px !important; width:68px !important; height:72px !important; }
  .story-body .buy-intro__inside-boxes--back { width:84px !important; height:56px !important; }
  .story-body .buy-intro__inside-mentor { left:10px !important; width:108px !important; height:164px !important; bottom:76px !important; }
  .story-body .buy-intro__inside-player { left:90px !important; width:38px !important; height:80px !important; bottom:84px !important; }
  .story-body .buy-intro__inside-flashlight { left:72px !important; top:98px !important; width:180px !important; height:108px !important; }
  .story-body .buy-intro__inside-starters { right: 14px !important; bottom: 86px !important; }
  .story-body .buy-intro__inside-starter { width:22px !important; height:22px !important; }
  .story-body .buy-intro__dialogue { padding: 16px 16px 20px !important; }
  .story-body .buy-intro__speaker { padding: 8px 18px !important; font-size: 12px !important; }
  .story-body .buy-intro__line { font-size: 14px !important; line-height: 1.66 !important; }
}


/* v66: clearer truck, emerald-like typography without pokemon colors, deeper GBA-style interior */
.story-body .buy-intro {
  background:
    linear-gradient(180deg, rgba(11,17,32,0.98) 0%, rgba(6,8,13,1) 100%) !important;
}
.story-body .buy-intro__panel--v64 {
  width: min(96vw, 1140px) !important;
  min-height: min(92svh, 820px) !important;
}
.story-body .buy-intro__title-stage {
  min-height: 462px !important;
  background:
    linear-gradient(180deg, #07142f 0%, #15244c 22%, #0f1831 52%, #09111f 53%, #0b1019 100%) !important;
}
.story-body .buy-intro__pixel-sky {
  background:
    radial-gradient(circle at 50% 12%, rgba(255,236,141,0.96) 0 33px, transparent 34px),
    radial-gradient(circle at 9% 18%, rgba(255,255,255,0.8) 0 2px, transparent 3px) 0 0/160px 100px,
    radial-gradient(circle at 66% 26%, rgba(255,255,255,0.66) 0 2px, transparent 3px) 0 0/180px 110px,
    radial-gradient(circle at 86% 14%, rgba(255,248,210,0.6) 0 2px, transparent 3px) 0 0/166px 120px !important;
}
.story-body .buy-intro__pixel-sky::before {
  bottom: 118px !important;
  height: 176px !important;
  background:
    linear-gradient(90deg,
      transparent 0 2%, #32456c 2% 10%, transparent 10% 13%, #2c3d62 13% 20%, transparent 20% 23%,
      #3c2f57 23% 31%, transparent 31% 35%, #516082 35% 47%, transparent 47% 52%,
      #2f3f67 52% 61%, transparent 61% 64%, #42305c 64% 76%, transparent 76% 80%, #2b395d 80% 92%, transparent 92% 100%) !important;
}
.story-body .buy-intro__pixel-sky::after {
  bottom: 88px !important;
  height: 32px !important;
  background: linear-gradient(180deg, #1c2e4f 0%, #112038 100%) !important;
}
/* welcome truck rear */
.story-body .buy-intro__truck-backdrop { inset: 116px 100px 134px !important; }
.story-body .buy-intro__truck-frame {
  width: min(78vw, 650px) !important;
  height: 244px !important;
  background: linear-gradient(180deg, #d8d5ce 0%, #bbb7af 100%) !important;
  box-shadow: inset 0 0 0 5px #2d3038, 0 8px 0 rgba(255,255,255,0.08), 0 26px 0 -10px rgba(0,0,0,0.25) !important;
}
.story-body .buy-intro__truck-frame::before {
  content:"";
  position:absolute;
  inset:-14px -18px auto -18px;
  height: 20px;
  background: linear-gradient(180deg, #efede8 0%, #c7c2b8 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.18), 0 4px 0 rgba(0,0,0,0.14);
}
.story-body .buy-intro__truck-frame::after {
  content:"";
  position:absolute;
  left:-16px; right:-16px; bottom:-56px;
  height: 58px;
  background:
    radial-gradient(circle at 14% 62%, #ce3f3f 0 7px, transparent 8px),
    radial-gradient(circle at 86% 62%, #ce3f3f 0 7px, transparent 8px),
    linear-gradient(180deg, #242936 0%, #10141b 100%);
  clip-path: polygon(0 42%, 16% 42%, 19% 20%, 81% 20%, 84% 42%, 100% 42%, 100% 88%, 0 88%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.06);
}
.story-body .buy-intro__truck-door {
  top: 14px !important; bottom: 22px !important; width: 23% !important;
  background: linear-gradient(180deg, #97969b 0%, #5b5c63 100%) !important;
  border: 4px solid #262830 !important;
}
.story-body .buy-intro__truck-door--left { left: -4.5% !important; transform: perspective(760px) rotateY(76deg) !important; }
.story-body .buy-intro__truck-door--right { right: -4.5% !important; transform: perspective(760px) rotateY(-76deg) !important; }
.story-body .buy-intro__truck-interior-glow {
  inset: 18px 82px 30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 10%, transparent 10%),
    linear-gradient(180deg, #5b5e66 0%, #2e3138 28%, #13161b 70%, #060709 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(17,19,23,0.7), inset 0 -8px 0 rgba(255,255,255,0.02) !important;
}
.story-body .buy-intro__truck-floor {
  left: 82px !important; right: 82px !important; bottom: 16px !important; height: 26px !important;
  background: linear-gradient(180deg, #746a58 0%, #544b3d 100%) !important;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
.story-body .buy-intro__truck-stack,
.story-body .buy-intro__truck-crate {
  bottom: 40px !important;
  background: linear-gradient(180deg, #af8352 0%, #6d4728 100%) !important;
  box-shadow: inset 0 0 0 3px #2f1c0f !important;
}
.story-body .buy-intro__truck-stack--left { left: 122px !important; width: 102px !important; height: 92px !important; }
.story-body .buy-intro__truck-stack--right { right: 126px !important; width: 98px !important; height: 84px !important; }
.story-body .buy-intro__truck-crate { left:50% !important; transform:translateX(-50%) !important; width: 114px !important; height: 76px !important; }
.story-body .buy-intro__emerald-title {
  max-width: 10.8em !important;
  font-size: clamp(38px, 5.9vw, 80px) !important;
  color: #f4f4f6 !important;
  text-transform: uppercase;
  letter-spacing: -0.05em !important;
  line-height: 0.86 !important;
  text-shadow:
    0 2px 0 #cfd3dc,
    -4px 0 #1f2430, 4px 0 #1f2430, 0 -4px #1f2430, 0 4px #1f2430,
    -4px -4px #1f2430, 4px -4px #1f2430, -4px 4px #1f2430, 4px 4px #1f2430,
    -7px 0 #06090f, 7px 0 #06090f, 0 -7px #06090f, 0 7px #06090f,
    -7px -7px #06090f, 7px -7px #06090f, -7px 7px #06090f, 7px 7px #06090f !important;
}
.story-body .buy-intro__copyright {
  color: #f2f2f2 !important;
  text-shadow:
    -2px 0 #080c15, 2px 0 #080c15, 0 -2px #080c15, 0 2px #080c15,
    -2px -2px #080c15, 2px -2px #080c15, -2px 2px #080c15, 2px 2px #080c15 !important;
}
.story-body .buy-intro__prompt--title { color: #f7f7f7 !important; }

/* boarding scene clearer truck rear */
.story-body .buy-intro__entry-scene {
  min-height: 430px !important;
  background:
    linear-gradient(180deg, #081539 0%, #162247 28%, #11172d 56%, #141a24 56%, #0d1118 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,236,141,0.96) 0 32px, transparent 33px),
    linear-gradient(90deg,
      transparent 0 4%, #31446b 4% 14%, transparent 14% 18%, #283a61 18% 31%, transparent 31% 35%, #46345f 35% 46%, transparent 46% 52%, #5a698d 52% 63%, transparent 63% 68%, #3f315e 68% 79%, transparent 79% 84%, #2b3f66 84% 100%);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,0 100%,0 68%,7% 68%,7% 46%,14% 46%,14% 31%,22% 31%,22% 63%,32% 63%,32% 39%,41% 39%,41% 58%,52% 58%,52% 27%,61% 27%,61% 61%,71% 61%,71% 42%,81% 42%,81% 58%,91% 58%,91% 46%,100% 46%,100% 100%);
}
.story-body .buy-intro__entry-scene::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:118px;
  background:
    linear-gradient(180deg, #20355a 0 6px, transparent 6px),
    linear-gradient(180deg, #141923 0%, #0d1118 100%);
}
.story-body .buy-intro__entry-roof,
.story-body .buy-intro__entry-depth,
.story-body .buy-intro__entry-floor { display:none !important; }
.story-body .buy-intro__entry-open-door {
  inset: 92px 232px 112px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 8%),
    linear-gradient(180deg, #d9d5cc 0 12px, #3b404b 12px 22px, #0d1016 22px 100%) !important;
  box-shadow: inset 0 0 0 6px #2b2d34, 0 12px 0 rgba(255,255,255,0.03) !important;
  border: none !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  content:"";
  position:absolute; top: 16px; bottom: 28px; width: 23%;
  background: linear-gradient(180deg, #98979c 0%, #55565d 100%);
  border: 4px solid #272930;
}
.story-body .buy-intro__entry-open-door::before { left:-4%; transform: perspective(780px) rotateY(78deg); transform-origin:left center; }
.story-body .buy-intro__entry-open-door::after { right:-4%; transform: perspective(780px) rotateY(-78deg); transform-origin:right center; }
.story-body .buy-intro__entry-open-door .none { display:none; }
.story-body .buy-intro__entry-open-door > * { display:none; }
.story-body .buy-intro__entry-open-door::marker { display:none; }
.story-body .buy-intro__entry-open-door:after, .story-body .buy-intro__entry-open-door:before {}
.story-body .buy-intro__entry-open-door::selection { background: transparent; }
.story-body .buy-intro__entry-open-door {
  overflow: visible;
}
.story-body .buy-intro__entry-open-door > .truck-bumper { display:none; }
.story-body .buy-intro__entry-open-door::after, .story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door + .buy-intro__entry-character--mentor {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before, .story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::after { }
.story-body .buy-intro__entry-open-door::before { }
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::after,
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::after, .story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::after,
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::before, .story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::after { }
.story-body .buy-intro__entry-open-door::before { }
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::before, .story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::after { }
.story-body .buy-intro__entry-open-door::before { }
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door + .buy-intro__entry-character {}
.story-body .buy-intro__entry-open-door::selection { background:transparent; }
.story-body .buy-intro__entry-open-door::after, .story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door {
}
.story-body .buy-intro__entry-open-door::after,
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-boxes {
  bottom: 144px !important;
  background: linear-gradient(180deg, #aa804f 0%, #704728 100%) !important;
  box-shadow: inset 0 0 0 3px #301c0e, 0 6px 0 rgba(0,0,0,0.24) !important;
}
.story-body .buy-intro__entry-boxes--left { left: 258px !important; width: 102px !important; height: 96px !important; }
.story-body .buy-intro__entry-boxes--right { right: 256px !important; width: 104px !important; height: 98px !important; }
.story-body .buy-intro__entry-character--player,
.story-body .buy-intro__inside-player { display:none !important; }
.story-body .buy-intro__entry-character--mentor {
  left: calc(50% - 42px) !important;
  bottom: 84px !important;
  width: 82px !important; height: 134px !important;
  background: url('assets/mentor-c3h2e7n-v3.png') center bottom / contain no-repeat !important;
  animation: sneakMentor327v66 2.72s cubic-bezier(.22,.74,.2,1) forwards !important;
}
.story-body .buy-intro__boarding-copy {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* deeper vertical inside-truck scene */
.story-body .buy-intro__inside-scene {
  min-height: 446px !important;
  background: linear-gradient(180deg, #11141c 0%, #050608 100%) !important;
}
.story-body .buy-intro__inside-wall {
  top: 12px !important; bottom: 112px !important; width: 26% !important;
  background: linear-gradient(180deg, #6c6f76 0%, #31333a 35%, #171920 100%) !important;
  opacity: 1;
}
.story-body .buy-intro__inside-wall--left {
  left: 0 !important;
  clip-path: polygon(0 0, 100% 11%, 82% 100%, 0 100%);
}
.story-body .buy-intro__inside-wall--right {
  right: 0 !important;
  clip-path: polygon(0 11%, 100% 0, 100% 100%, 18% 100%);
}
.story-body .buy-intro__inside-floor {
  left: 8% !important; right: 8% !important; bottom: 0 !important; height: 122px !important;
  background: linear-gradient(180deg, #85785f 0%, #594f40 100%) !important;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.story-body .buy-intro__inside-boxes {
  background: linear-gradient(180deg, #ad8252 0%, #6a4527 100%) !important;
  box-shadow: inset 0 0 0 3px #2d1c0f !important;
}
.story-body .buy-intro__inside-boxes--back {
  left: 50% !important; bottom: 178px !important; width: 132px !important; height: 86px !important;
  transform: translateX(-50%) !important;
  clip-path: polygon(10% 0, 90% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
}
.story-body .buy-intro__inside-boxes--left { left: 82px !important; bottom: 118px !important; width: 94px !important; height: 98px !important; }
.story-body .buy-intro__inside-boxes--right { right: 86px !important; bottom: 126px !important; width: 108px !important; height: 92px !important; }
.story-body .buy-intro__inside-mentor {
  left: 54px !important; bottom: 82px !important; width: 182px !important; height: 282px !important;
  background: url('assets/mentor-c3h2e7n-v3.png') center bottom / contain no-repeat !important;
  z-index: 3;
  transition: opacity .35s ease, transform .35s ease;
}
.story-body .buy-intro__inside-flashlight {
  left: 178px !important; top: 112px !important; width: 470px !important; height: 248px !important;
  background: radial-gradient(ellipse at left center, rgba(255,247,197,0.56) 0%, rgba(255,243,176,0.30) 24%, rgba(255,251,225,0.13) 48%, transparent 74%) !important;
  transition: opacity .34s ease;
}
.story-body .buy-intro__inside-starters { right: 108px !important; bottom: 130px !important; }
.story-body .buy-intro__inside-starter { box-shadow: 0 0 0 2px #121212, 0 0 14px rgba(255,255,255,0.06) !important; }
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-wall,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-floor,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-boxes,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-mentor,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-starters,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-flashlight {
  opacity: 0 !important;
}
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-darkness {
  background: rgba(0,0,0,0.98) !important;
}
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-darkness {
  background: radial-gradient(circle at 66% 45%, rgba(255,255,255,0.05), transparent 16%), rgba(0,0,0,0.42) !important;
}
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  border-radius: 0 !important;
  border: none !important;
  background: #f0f0f0 !important;
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 9px #dce5ff,
    0 0 0 5px #141414,
    0 12px 24px rgba(0,0,0,0.28) !important;
}
.story-body .buy-intro__dialogue {
  padding: 22px 28px 24px !important;
}
.story-body .dialogue-box {
  max-width: min(100%, 1180px) !important;
  margin-top: 34px !important;
  padding: 22px 28px 24px !important;
}
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px !important;
  background: linear-gradient(180deg, #364a84 0%, #1b2136 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 2px solid #f3f3f3 !important;
  box-shadow: 0 0 0 4px #1d202b !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.story-body .dialogue-name { margin-bottom: 16px !important; }
.story-body .buy-intro__line,
.story-body .dialogue-text {
  color: #171717 !important;
  font-size: clamp(15px, 1.9vw, 21px) !important;
  line-height: 1.82 !important;
  min-height: 4.3em !important;
}
.story-body .dialogue-skip,
.story-body .buy-intro__skip,
.story-body .buy-intro__dialogue .buy-intro__prompt {
  color: rgba(42,42,42,0.7) !important;
  letter-spacing: .16em !important;
  font-size: 12px !important;
}
.story-body .dialogue-hint { color: rgba(18,18,18,0.7) !important; }
.story-body .professor-sprite {
  background: url('assets/mentor-c3h2e7n-v3.png') center bottom / contain no-repeat !important;
  width: clamp(126px, 16vw, 182px) !important;
  height: clamp(188px, 24vw, 274px) !important;
}

@keyframes sneakMentor327v66 {
  0% { transform: translateY(8px) scale(1.02); opacity:0; }
  8% { opacity:1; }
  36% { transform: translateY(6px) scale(1); opacity:1; }
  62% { transform: translateY(-20px) scale(.84); opacity:1; }
  100% { transform: translateY(-86px) scale(.54); opacity:.94; }
}

@media (max-width: 900px) {
  .story-body .buy-intro__truck-backdrop { inset: 114px 28px 138px !important; }
  .story-body .buy-intro__truck-frame { width: 100% !important; height: 204px !important; }
  .story-body .buy-intro__truck-interior-glow { inset: 16px 48px 24px !important; }
  .story-body .buy-intro__truck-floor { left:48px !important; right:48px !important; }
  .story-body .buy-intro__truck-stack--left { left:72px !important; width:88px !important; height:74px !important; }
  .story-body .buy-intro__truck-stack--right { right:74px !important; width:86px !important; height:68px !important; }
  .story-body .buy-intro__truck-crate { width: 90px !important; height: 58px !important; }
  .story-body .buy-intro__entry-open-door { inset: 98px 126px 116px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 126px !important; width: 84px !important; height: 78px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 126px !important; width: 86px !important; height: 80px !important; }
  .story-body .buy-intro__inside-mentor { left: 26px !important; width: 144px !important; height: 230px !important; }
  .story-body .buy-intro__inside-boxes--left { left: 54px !important; width: 74px !important; height: 76px !important; }
  .story-body .buy-intro__inside-boxes--right { right: 56px !important; width: 84px !important; height: 72px !important; }
  .story-body .buy-intro__inside-boxes--back { width: 100px !important; height: 66px !important; bottom: 170px !important; }
  .story-body .buy-intro__inside-flashlight { left: 124px !important; width: 322px !important; height: 176px !important; }
  .story-body .buy-intro__inside-starters { right: 44px !important; bottom: 116px !important; }
}
@media (max-width: 640px) {
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 304px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 82px 14px 142px !important; }
  .story-body .buy-intro__truck-frame { height: 148px !important; }
  .story-body .buy-intro__truck-interior-glow { inset: 10px 28px 18px !important; }
  .story-body .buy-intro__truck-floor { left:28px !important; right:28px !important; height:18px !important; }
  .story-body .buy-intro__truck-stack--left { left:36px !important; width:52px !important; height:42px !important; }
  .story-body .buy-intro__truck-stack--right { right:36px !important; width:52px !important; height:40px !important; }
  .story-body .buy-intro__truck-crate { width: 52px !important; height: 34px !important; }
  .story-body .buy-intro__emerald-title { font-size: clamp(28px, 8vw, 46px) !important; max-width: 9.4em !important; }
  .story-body .buy-intro__entry-open-door { inset: 76px 42px 84px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 54px !important; width: 54px !important; height: 48px !important; bottom: 100px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 54px !important; width: 56px !important; height: 52px !important; bottom: 104px !important; }
  .story-body .buy-intro__entry-character--mentor { width: 52px !important; height: 82px !important; left: calc(50% - 26px) !important; bottom: 66px !important; }
  .story-body .buy-intro__inside-wall { bottom: 86px !important; width: 28% !important; }
  .story-body .buy-intro__inside-floor { height: 86px !important; }
  .story-body .buy-intro__inside-boxes--left { left: 16px !important; width: 56px !important; height: 58px !important; bottom: 94px !important; }
  .story-body .buy-intro__inside-boxes--right { right: 18px !important; width: 60px !important; height: 56px !important; bottom: 98px !important; }
  .story-body .buy-intro__inside-boxes--back { width: 74px !important; height: 48px !important; bottom: 132px !important; }
  .story-body .buy-intro__inside-mentor { left: 12px !important; width: 94px !important; height: 148px !important; bottom: 64px !important; }
  .story-body .buy-intro__inside-flashlight { left: 64px !important; top: 94px !important; width: 190px !important; height: 102px !important; }
  .story-body .buy-intro__inside-starters { right: 16px !important; bottom: 80px !important; }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box { padding: 16px 16px 20px !important; }
  .story-body .buy-intro__speaker,
  .story-body .dialogue-name { padding: 8px 16px !important; font-size: 12px !important; }
  .story-body .buy-intro__line,
  .story-body .dialogue-text { font-size: 14px !important; line-height: 1.68 !important; }
}


/* v67: clearer pixel truck, cleaner welcome screen, compact dialogue, darker mentor */
.story-body .buy-intro { background: rgba(0,0,0,0.92) !important; }
.story-body .buy-intro__panel--v64 {
  width: min(98vw, 1320px) !important;
  min-height: min(96svh, 930px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.story-body .buy-intro__welcome-screen,
.story-body .buy-intro__boarding-screen,
.story-body .buy-intro__drive-screen { gap: 10px !important; }
.story-body .buy-intro__title-stage,
.story-body .buy-intro__entry-scene,
.story-body .buy-intro__inside-scene {
  min-height: 540px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.story-body .buy-intro__title-stage {
  background: linear-gradient(180deg, #07163b 0%, #0b1c45 42%, #081326 68%, #0a111a 68%, #0b1018 100%) !important;
}
.story-body .buy-intro__pixel-sky {
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,0.86) 0 2px, transparent 3px) 0 0/132px 82px,
    radial-gradient(circle at 28% 21%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/140px 96px,
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/130px 92px,
    radial-gradient(circle at 85% 12%, rgba(255,255,255,0.76) 0 2px, transparent 3px) 0 0/150px 86px,
    radial-gradient(circle at 50% 12%, rgba(247,229,132,0.98) 0 44px, transparent 45px),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 45%) !important;
  opacity: 1 !important;
}
.story-body .buy-intro__pixel-sky::before {
  content:""; position:absolute; left:0; right:0; bottom:96px; height:170px;
  background: linear-gradient(90deg,
    transparent 0 2%, #2e456e 2% 10%, transparent 10% 14%, #203456 14% 20%, transparent 20% 24%,
    #3c345a 24% 34%, transparent 34% 38%, #526182 38% 47%, transparent 47% 51%, #304165 51% 60%,
    transparent 60% 65%, #45335f 65% 75%, transparent 75% 80%, #2b395d 80% 100%) !important;
}
.story-body .buy-intro__pixel-sky::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:
    linear-gradient(180deg, rgba(91,150,255,0.08), rgba(0,0,0,0)) 0 0/100% 34px no-repeat,
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(180deg, #0f141d 0%, #090d13 100%) !important;
}
.story-body .buy-intro__truck-backdrop {
  inset: 88px 74px 148px !important;
  overflow: visible !important;
}
.story-body .buy-intro__truck-backdrop::before {
  content:"";
  position:absolute; left:50%; transform:translateX(-50%); bottom:-52px;
  width:min(92vw,880px); height:108px;
  background:
    linear-gradient(180deg, rgba(70,116,193,0.14), rgba(0,0,0,0) 38%),
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(180deg, #0f141d 0%, #0a0f16 100%);
}
.story-body .buy-intro__truck-backdrop::after {
  content:"";
  position:absolute; left:50%; transform:translateX(-50%); bottom:-18px;
  width:min(78vw,660px); height:76px;
  background:
    radial-gradient(circle at 18% 72%, #090b10 0 34px, transparent 35px),
    radial-gradient(circle at 82% 72%, #090b10 0 34px, transparent 35px),
    radial-gradient(circle at 18% 72%, #d7dce4 0 16px, transparent 17px),
    radial-gradient(circle at 82% 72%, #d7dce4 0 16px, transparent 17px),
    linear-gradient(180deg, transparent 0 16px, #202734 16px 32px, transparent 32px),
    linear-gradient(180deg, transparent 0 18px, #151a22 18px 34px, transparent 34px);
  background-repeat:no-repeat;
}
.story-body .buy-intro__truck-frame {
  width: min(82vw, 720px) !important;
  height: 280px !important;
  background: linear-gradient(180deg, #d6d2ca 0%, #b9b3a9 100%) !important;
  box-shadow: inset 0 0 0 5px #2b3038, inset 0 12px 0 rgba(255,255,255,0.10), 0 8px 0 rgba(0,0,0,0.18) !important;
}
.story-body .buy-intro__truck-frame::before {
  content:""; position:absolute; left:42px; right:42px; top:-10px; height: 18px;
  background: linear-gradient(180deg, #f0ede7 0%, #d1cbc1 100%) !important;
  clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,0.14);
}
.story-body .buy-intro__truck-frame::after {
  content:"";
  position:absolute; left:-10px; right:-10px; bottom:-34px; height: 38px;
  background:
    radial-gradient(circle at 10% 60%, #d74e4e 0 7px, transparent 8px),
    radial-gradient(circle at 90% 60%, #d74e4e 0 7px, transparent 8px),
    linear-gradient(180deg, #303743 0%, #141921 100%);
  clip-path: polygon(0 34%, 15% 34%, 18% 0, 82% 0, 85% 34%, 100% 34%, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-door {
  top:18px !important; bottom:28px !important; width:20% !important;
  background: linear-gradient(180deg, #898a91 0%, #595c66 100%) !important;
  border: 4px solid #2a2d34 !important;
}
.story-body .buy-intro__truck-door--left { left:-2.5% !important; transform: perspective(860px) rotateY(74deg) !important; }
.story-body .buy-intro__truck-door--right { right:-2.5% !important; transform: perspective(860px) rotateY(-74deg) !important; }
.story-body .buy-intro__truck-interior-glow {
  inset: 16px 82px 34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 11%),
    linear-gradient(180deg, #5b6069 0%, #2d333d 24%, #12151a 66%, #08090d 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(18,20,24,0.74), inset 0 -10px 0 rgba(255,255,255,0.03) !important;
}
.story-body .buy-intro__truck-floor {
  left:82px !important; right:82px !important; bottom:18px !important; height:36px !important;
  background: linear-gradient(180deg, #80725d 0%, #5d5140 100%) !important;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-stack,
.story-body .buy-intro__truck-crate {
  bottom:54px !important;
  background: linear-gradient(180deg, #b78854 0%, #714926 100%) !important;
  box-shadow: inset 0 0 0 3px #301d10 !important;
}
.story-body .buy-intro__truck-stack--left { left:98px !important; width:126px !important; height:104px !important; }
.story-body .buy-intro__truck-stack--right { right:98px !important; width:126px !important; height:104px !important; }
.story-body .buy-intro__truck-crate { left:50% !important; transform:translateX(-50%) !important; width:148px !important; height:94px !important; }
.story-body .buy-intro__title-copy {
  left:50% !important; bottom:18px !important; transform:translateX(-50%) !important;
  width:min(96%, 1240px) !important;
}
.story-body .buy-intro__series { display:none !important; }
.story-body .buy-intro__emerald-title {
  margin:0 auto 14px !important;
  max-width: 18ch !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: clamp(28px, 4.8vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.03em !important;
  color: #f4f4f8 !important;
  text-transform: uppercase !important;
  transform: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  text-shadow:
    -4px 0 #222833, 4px 0 #222833, 0 -4px #222833, 0 4px #222833,
    -4px -4px #222833, 4px -4px #222833, -4px 4px #222833, 4px 4px #222833,
    -7px 0 #05070b, 7px 0 #05070b, 0 -7px #05070b, 0 7px #05070b,
    -7px -7px #05070b, 7px -7px #05070b, -7px 7px #05070b, 7px 7px #05070b !important;
}
.story-body .buy-intro__copyright {
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: clamp(10px, 1.2vw, 16px) !important;
  letter-spacing: 0.08em !important;
  color:#ffffff !important;
  text-transform:none !important;
  text-shadow:
    -2px 0 #090d13, 2px 0 #090d13, 0 -2px #090d13, 0 2px #090d13,
    -2px -2px #090d13, 2px -2px #090d13, -2px 2px #090d13, 2px 2px #090d13 !important;
}
.story-body .buy-intro__prompt--title {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: clamp(10px, 1.1vw, 14px) !important;
  letter-spacing: 0.10em !important;
  color:#ffffff !important;
  text-shadow:
    -2px 0 #090d13, 2px 0 #090d13, 0 -2px #090d13, 0 2px #090d13,
    -2px -2px #090d13, 2px -2px #090d13, -2px 2px #090d13, 2px 2px #090d13 !important;
}

/* boarding screen: clearer truck rear and mentor stepping inside */
.story-body .buy-intro__entry-scene {
  min-height: 460px !important;
  background: linear-gradient(180deg, #07163b 0%, #0d1d46 48%, #0f141d 48%, #0b1018 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 12%, rgba(247,229,132,0.98) 0 36px, transparent 37px),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.8) 0 2px, transparent 3px) 0 0/140px 86px,
    radial-gradient(circle at 68% 22%, rgba(255,255,255,0.72) 0 2px, transparent 3px) 0 0/142px 94px,
    linear-gradient(90deg,
      transparent 0 3%, #2f436b 3% 13%, transparent 13% 17%, #24395e 17% 24%, transparent 24% 28%,
      #3d345c 28% 39%, transparent 39% 44%, #5a6887 44% 53%, transparent 53% 57%,
      #34476d 57% 67%, transparent 67% 71%, #473360 71% 80%, transparent 80% 84%, #2a3859 84% 100%);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,0 100%,0 62%,8% 62%,8% 40%,18% 40%,18% 56%,27% 56%,27% 31%,40% 31%,40% 60%,53% 60%,53% 36%,63% 36%,63% 57%,77% 57%,77% 46%,87% 46%,87% 58%,100% 58%,100% 100%);
}
.story-body .buy-intro__entry-scene::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:108px;
  background: linear-gradient(180deg, #1a3157 0 8px, transparent 8px), linear-gradient(180deg, #121722 0%, #0a0f16 100%) !important;
}
.story-body .buy-intro__entry-roof,
.story-body .buy-intro__entry-depth,
.story-body .buy-intro__entry-floor { display:none !important; }
.story-body .buy-intro__entry-open-door {
  position:absolute !important;
  inset: 92px 252px 88px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 8%),
    linear-gradient(180deg, #d7d3cb 0 12px, #363c46 12px 24px, #0a0d13 24px 100%) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 5px #2b3037, 0 10px 0 rgba(0,0,0,0.18) !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  content:""; position:absolute; top:18px; bottom:34px; width:18%;
  background: linear-gradient(180deg, #929399 0%, #5f626b 100%);
  border: 4px solid #2a2d35;
}
.story-body .buy-intro__entry-open-door::before { left:-2%; transform: perspective(760px) rotateY(76deg); transform-origin:left center; }
.story-body .buy-intro__entry-open-door::after { right:-2%; transform: perspective(760px) rotateY(-76deg); transform-origin:right center; }
.story-body .buy-intro__entry-open-door { overflow: visible !important; }
.story-body .buy-intro__entry-open-door .none { display:none !important; }
.story-body .buy-intro__entry-open-door > * { display:none !important; }
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door { clip-path: none !important; }
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::selection { background:transparent; }
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door { }
.story-body .buy-intro__entry-open-door::after {}
.story-body .buy-intro__entry-open-door::before {}
.story-body .buy-intro__entry-open-door {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 8%),
    linear-gradient(180deg, #d7d3cb 0 12px, #363c46 12px 24px, #0a0d13 24px 100%) !important;
}
.story-body .buy-intro__entry-open-door::marker { display:none; }
.story-body .buy-intro__entry-open-door:focus { outline:none; }
.story-body .buy-intro__entry-boxes {
  bottom: 138px !important;
  background: linear-gradient(180deg, #b58653 0%, #704726 100%) !important;
  box-shadow: inset 0 0 0 3px #2f1c0f, 0 6px 0 rgba(0,0,0,0.22) !important;
}
.story-body .buy-intro__entry-boxes--left { left: 308px !important; width: 108px !important; height: 96px !important; }
.story-body .buy-intro__entry-boxes--right { right: 304px !important; width: 112px !important; height: 100px !important; }
.story-body .buy-intro__entry-character--mentor {
  width: 88px !important; height: 140px !important;
  left: calc(50% - 44px) !important; bottom: 74px !important;
  background: url('assets/mentor-c3h2e7n-v4.png') center bottom / contain no-repeat !important;
  clip-path: none !important;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.34)) !important;
  animation: mentorIntoTruckV67 2.2s steps(8, end) forwards !important;
}
.story-body .buy-intro__boarding-copy {
  text-transform: uppercase !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  color: #f4f4f6 !important;
}

/* inside truck: dark first, then lamp reveals deeper scene */
.story-body .buy-intro__inside-scene {
  min-height: 470px !important;
  background: linear-gradient(180deg, #0b0e15 0%, #040507 100%) !important;
}
.story-body .buy-intro__inside-darkness {
  background: rgba(0,0,0,0.995) !important;
  z-index: 5 !important;
  transition: opacity .25s steps(2, end), background .25s steps(2, end) !important;
}
.story-body .buy-intro__inside-wall {
  top: 16px !important; bottom: 122px !important; width: 24% !important;
  background: linear-gradient(180deg, #71747b 0%, #353841 38%, #15181e 100%) !important;
  opacity: 1 !important;
}
.story-body .buy-intro__inside-wall--left { left: 0 !important; clip-path: polygon(0 0, 100% 12%, 82% 100%, 0 100%) !important; }
.story-body .buy-intro__inside-wall--right { right: 0 !important; clip-path: polygon(0 12%, 100% 0, 100% 100%, 18% 100%) !important; }
.story-body .buy-intro__inside-floor {
  left: 8% !important; right: 8% !important; bottom: 0 !important; height: 132px !important;
  background: linear-gradient(180deg, #8a7b62 0%, #5e5241 100%) !important;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__inside-boxes {
  background: linear-gradient(180deg, #b48652 0%, #6a4426 100%) !important;
  box-shadow: inset 0 0 0 3px #2e1c0f, 0 8px 0 rgba(0,0,0,0.18) !important;
}
.story-body .buy-intro__inside-boxes--back { left:50% !important; bottom:182px !important; width:138px !important; height:92px !important; transform:translateX(-50%) !important; }
.story-body .buy-intro__inside-boxes--left { left: 86px !important; bottom: 130px !important; width: 98px !important; height: 104px !important; }
.story-body .buy-intro__inside-boxes--right { right: 92px !important; bottom: 136px !important; width: 110px !important; height: 98px !important; }
.story-body .buy-intro__inside-mentor {
  left: 48px !important; bottom: 82px !important; width: 196px !important; height: 300px !important;
  background: url('assets/mentor-c3h2e7n-v4.png') center bottom / contain no-repeat !important;
  image-rendering: pixelated !important; z-index: 3 !important;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,0.34)) !important;
  transform: translateX(0) scale(1) !important;
}
.story-body .buy-intro__inside-flashlight {
  left: 188px !important; top: 108px !important; width: 500px !important; height: 260px !important;
  background: radial-gradient(ellipse at left center, rgba(255,245,190,0.62) 0%, rgba(255,240,162,0.30) 22%, rgba(255,251,231,0.12) 46%, transparent 72%) !important;
  opacity: 0 !important;
  transition: opacity .28s steps(2, end) !important;
}
.story-body .buy-intro__inside-starters {
  right: 112px !important; bottom: 142px !important; gap: 20px !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition: opacity .2s steps(2,end), transform .25s steps(4,end) !important;
}
.story-body .buy-intro__inside-starter {
  width: 34px !important; height: 34px !important;
  box-shadow: 0 0 0 3px #101010, 0 0 16px rgba(255,255,255,0.05) !important;
  transform: scale(0.5) !important;
  opacity: 0 !important;
}
.story-body .buy-intro__inside-starter--white { background: linear-gradient(180deg, #f2f2f2 0 50%, #d8d8d8 50% 100%) !important; }
.story-body .buy-intro__inside-starter--black { background: linear-gradient(180deg, #353535 0 50%, #0b0b0b 50% 100%) !important; }
.story-body .buy-intro__inside-starter--pink { background: linear-gradient(180deg, #f39abb 0 50%, #d36b94 50% 100%) !important; }
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-wall,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-floor,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-boxes,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-mentor,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-flashlight,
.story-body .buy-intro__drive-screen.is-dark .buy-intro__inside-starters { opacity: 0 !important; }
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-darkness { opacity: 0.24 !important; background: rgba(0,0,0,0.24) !important; }
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-mentor {
  opacity: 1 !important;
  animation: mentorLampInsideV67 0.8s steps(4,end) both !important;
}
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-flashlight { opacity: 1 !important; }
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-starters { opacity: 1 !important; transform: translateY(0) !important; }
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-starter--white { animation: starterPopV67 0.36s steps(5,end) .02s both !important; }
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-starter--black { animation: starterPopV67 0.36s steps(5,end) .11s both !important; }
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-starter--pink { animation: starterPopV67 0.36s steps(5,end) .2s both !important; }
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  max-width: min(100%, 1060px) !important;
  margin: 0 auto !important;
  padding: 16px 20px 18px !important;
  border-radius: 0 !important;
  background: #efefef !important;
  border: none !important;
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 8px #d7d7d7, 0 0 0 4px #171717 !important;
}
.story-body .buy-intro__dialogue { margin-top: 10px !important; }
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  padding: 9px 18px !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 4px #1a1a1a !important;
  border-radius: 999px !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}
.story-body .buy-intro__line,
.story-body .dialogue-text {
  min-height: 3.6em !important;
  margin: 18px 0 10px !important;
  color: #181818 !important;
  font-family: "Courier New", monospace !important;
  font-size: clamp(18px, 2.1vw, 22px) !important;
  line-height: 1.55 !important;
}
.story-body .buy-intro__meta { gap: 8px !important; }
.story-body .buy-intro__skip,
.story-body .dialogue-skip,
.story-body .buy-intro__prompt,
.story-body .dialogue-hint {
  color: rgba(26,26,26,0.7) !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}
.story-body .dialogue-hint { margin-left:auto !important; }
.story-body .professor-sprite {
  width: clamp(124px, 15vw, 172px) !important;
  height: clamp(186px, 22vw, 252px) !important;
  background: url('assets/mentor-c3h2e7n-v4.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.38)) !important;
}

@keyframes mentorIntoTruckV67 {
  0% { transform: translateY(28px) scale(1.08); opacity: 0; }
  10% { opacity: 1; }
  34% { transform: translateY(18px) scale(1.02); }
  60% { transform: translateY(-6px) scale(0.86); }
  100% { transform: translateY(-82px) scale(0.58); opacity: 1; }
}
@keyframes mentorLampInsideV67 {
  0% { transform: translateX(10px) translateY(8px); opacity: 0.9; }
  35% { transform: translateX(0) translateY(0); opacity: 1; }
  100% { transform: translateX(0) translateY(0); opacity: 1; }
}
@keyframes starterPopV67 {
  0% { transform: scale(0.48) translateY(14px); opacity: 0; }
  55% { transform: scale(1.12) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 900px) {
  .story-body .buy-intro__panel--v64 { width: 100% !important; min-height: 100svh !important; }
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 430px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 76px 24px 132px !important; }
  .story-body .buy-intro__truck-frame { width: 100% !important; height: 224px !important; }
  .story-body .buy-intro__truck-frame::after { bottom: -28px !important; }
  .story-body .buy-intro__truck-backdrop::after { width: min(88vw, 540px) !important; }
  .story-body .buy-intro__emerald-title { font-size: clamp(22px, 5.2vw, 40px) !important; max-width: 18ch !important; }
  .story-body .buy-intro__entry-open-door { inset: 92px 122px 86px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 136px !important; width: 90px !important; height: 78px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 136px !important; width: 90px !important; height: 80px !important; }
  .story-body .buy-intro__inside-boxes--left { left: 42px !important; width: 76px !important; height: 78px !important; }
  .story-body .buy-intro__inside-boxes--right { right: 46px !important; width: 84px !important; height: 76px !important; }
  .story-body .buy-intro__inside-boxes--back { width: 104px !important; height: 72px !important; }
  .story-body .buy-intro__inside-mentor { left: 16px !important; width: 150px !important; height: 230px !important; }
  .story-body .buy-intro__inside-flashlight { left: 110px !important; width: 330px !important; height: 190px !important; }
  .story-body .buy-intro__inside-starters { right: 40px !important; gap: 14px !important; }
  .story-body .buy-intro__inside-starter { width: 28px !important; height: 28px !important; }
}
@media (max-width: 640px) {
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 300px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 54px 8px 124px !important; }
  .story-body .buy-intro__truck-frame { height: 152px !important; }
  .story-body .buy-intro__truck-door { width: 22% !important; }
  .story-body .buy-intro__truck-interior-glow { inset: 10px 30px 20px !important; }
  .story-body .buy-intro__truck-floor { left:30px !important; right:30px !important; height:22px !important; }
  .story-body .buy-intro__truck-stack--left, .story-body .buy-intro__truck-stack--right { width: 56px !important; height: 48px !important; bottom: 34px !important; }
  .story-body .buy-intro__truck-stack--left { left: 34px !important; }
  .story-body .buy-intro__truck-stack--right { right: 34px !important; }
  .story-body .buy-intro__truck-crate { width: 66px !important; height: 42px !important; bottom: 36px !important; }
  .story-body .buy-intro__truck-backdrop::after { height: 48px !important; bottom: -8px !important; }
  .story-body .buy-intro__emerald-title { font-size: clamp(16px, 5vw, 24px) !important; max-width: 18ch !important; }
  .story-body .buy-intro__copyright,
  .story-body .buy-intro__prompt--title { font-size: 8px !important; }
  .story-body .buy-intro__entry-open-door { inset: 64px 36px 76px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 42px !important; width: 50px !important; height: 46px !important; bottom: 102px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 42px !important; width: 52px !important; height: 48px !important; bottom: 104px !important; }
  .story-body .buy-intro__entry-character--mentor { width: 48px !important; height: 76px !important; left: calc(50% - 24px) !important; bottom: 58px !important; }
  .story-body .buy-intro__inside-wall { bottom: 88px !important; width: 28% !important; }
  .story-body .buy-intro__inside-floor { height: 88px !important; }
  .story-body .buy-intro__inside-boxes--left { left: 16px !important; width: 52px !important; height: 52px !important; bottom: 90px !important; }
  .story-body .buy-intro__inside-boxes--right { right: 18px !important; width: 56px !important; height: 52px !important; bottom: 92px !important; }
  .story-body .buy-intro__inside-boxes--back { width: 70px !important; height: 46px !important; bottom: 126px !important; }
  .story-body .buy-intro__inside-mentor { left: 8px !important; width: 92px !important; height: 140px !important; bottom: 62px !important; }
  .story-body .buy-intro__inside-flashlight { left: 60px !important; top: 84px !important; width: 180px !important; height: 92px !important; }
  .story-body .buy-intro__inside-starters { right: 14px !important; bottom: 74px !important; gap: 8px !important; }
  .story-body .buy-intro__inside-starter { width: 22px !important; height: 22px !important; }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box { padding: 14px 14px 16px !important; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #d7d7d7, 0 0 0 3px #171717 !important; }
  .story-body .buy-intro__speaker,
  .story-body .dialogue-name { font-size: 9px !important; padding: 8px 12px !important; }
  .story-body .buy-intro__line,
  .story-body .dialogue-text { font-size: 14px !important; line-height: 1.5 !important; }
}


/* v68 fixes: same dialogue box throughout, opaque intro stage, road/parking, discreet skip */
.story-body .buy-intro {
  background: #05070b !important;
}
.story-body .buy-intro__panel--v64 {
  position: relative !important;
  overflow: hidden !important;
  background: #05070b !important;
}
.story-body .buy-intro__welcome-screen,
.story-body .buy-intro__boarding-screen,
.story-body .buy-intro__drive-screen {
  position: relative !important;
  width: 100% !important;
  background: #05070b !important;
  overflow: hidden !important;
}
.story-body .buy-intro__title-stage,
.story-body .buy-intro__entry-scene,
.story-body .buy-intro__inside-scene {
  width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
.story-body .buy-intro__title-stage {
  min-height: 500px !important;
}
.story-body .buy-intro__title-stage::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 146px;
  background:
    linear-gradient(180deg, rgba(95,145,219,0.08), rgba(0,0,0,0) 22%),
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(180deg, #161c28 0 42%, #0d121a 42% 100%);
  z-index: 1;
}
.story-body .buy-intro__title-stage::before {
  content:"";
  position:absolute; left:0; right:0; bottom:18px; height: 78px;
  background:
    linear-gradient(180deg, transparent 0 18px, rgba(20,25,36,0.9) 18px 22px, transparent 22px),
    linear-gradient(90deg, #f0d96a 0 24px, transparent 24px 54px) 50% 28px / 520px 10px repeat-x,
    linear-gradient(180deg, transparent 0 24px, #222a37 24px 48px, #11161f 48px 100%);
  z-index: 1;
}
.story-body .buy-intro__truck-backdrop {
  z-index: 2 !important;
}
.story-body .buy-intro__title-copy {
  position: relative !important;
  z-index: 3 !important;
  padding-bottom: 24px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(5,7,11,0.66) 20%, rgba(5,7,11,0.94) 100%) !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 19ch !important;
  font-size: clamp(26px, 4.4vw, 56px) !important;
  margin-top: 4px !important;
  margin-bottom: 18px !important;
}
.story-body .buy-intro__entry-scene {
  min-height: 420px !important;
}
.story-body .buy-intro__entry-scene::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(90deg, #f0d96a 0 20px, transparent 20px 52px) 50% 36px / 500px 8px repeat-x,
    linear-gradient(180deg, transparent 0 34px, #242c39 34px 56px, #131922 56px 100%) !important;
}
.story-body .buy-intro__entry-open-door {
  inset: 90px 248px 96px !important;
  z-index: 2 !important;
}
.story-body .buy-intro__entry-character--mentor {
  filter: brightness(0.58) contrast(1.16) saturate(0.75) drop-shadow(0 8px 0 rgba(0,0,0,0.34)) !important;
}
.story-body .buy-intro__inside-mentor,
.story-body .professor-sprite {
  filter: brightness(0.6) contrast(1.16) saturate(0.78) drop-shadow(0 8px 0 rgba(0,0,0,0.34)) !important;
}
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  position: relative !important;
  z-index: 5 !important;
  width: min(100%, 1060px) !important;
  max-width: min(100%, 1060px) !important;
  min-height: 210px !important;
  margin: 8px auto 0 !important;
  padding: 16px 20px 18px !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 10px #d7d7d7 !important;
  background: #efefef !important;
}
.story-body .buy-intro__dialogue--boarding {
  margin-top: 8px !important;
}
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.story-body .buy-intro__line,
.story-body .dialogue-text {
  min-height: 3.55em !important;
}
.story-body .buy-intro__meta {
  justify-content: space-between !important;
  align-items: center !important;
}
.story-body .buy-intro__meta .buy-intro__prompt {
  margin-left: auto !important;
}
.story-body .buy-intro__skip-button {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 12 !important;
  border: 0 !important;
  background: rgba(10,12,18,0.78) !important;
  color: rgba(255,255,255,0.86) !important;
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  opacity: 0.82 !important;
}
.story-body .buy-intro__skip-button:hover { opacity: 1 !important; }
.story-body .buy-intro__boarding-copy { margin: 18px 0 10px !important; }
.story-body .buy-intro__copyright,
.story-body .buy-intro__prompt--title { position: relative !important; z-index: 4 !important; }

@media (max-width: 900px) {
  .story-body .buy-intro__title-stage { min-height: 430px !important; }
  .story-body .buy-intro__entry-open-door { inset: 86px 116px 90px !important; }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box { min-height: 186px !important; width: min(100%, 94vw) !important; }
}
@media (max-width: 640px) {
  .story-body .buy-intro__title-stage { min-height: 280px !important; }
  .story-body .buy-intro__title-stage::after { height: 88px !important; }
  .story-body .buy-intro__title-stage::before { bottom: 0 !important; height: 54px !important; }
  .story-body .buy-intro__emerald-title { max-width: 16ch !important; font-size: clamp(15px, 5vw, 22px) !important; }
  .story-body .buy-intro__entry-scene { min-height: 270px !important; }
  .story-body .buy-intro__entry-open-door { inset: 58px 30px 68px !important; }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box {
    min-height: 146px !important;
    padding: 14px 14px 16px !important;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #d7d7d7 !important;
  }
  .story-body .buy-intro__skip-button {
    right: 10px !important; bottom: 10px !important; font-size: 8px !important; padding: 7px 8px !important;
  }
}


/* v69: coherent truck scenes, persistent lang switch/skip, cleaner dialogue, buy sound support */
.story-body .buy-intro__welcome-screen[hidden],
.story-body .buy-intro__boarding-screen[hidden],
.story-body .buy-intro__drive-screen[hidden] { display:none !important; }

.story-body .language-switch {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 1200 !important;
}
.story-body .buy-intro__skip-button {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 1201 !important;
}
.story-body .buy-intro,
.story-body .buy-intro__panel--v64,
.story-body .buy-intro__welcome-screen,
.story-body .buy-intro__boarding-screen,
.story-body .buy-intro__drive-screen,
.story-body .buy-intro__title-stage,
.story-body .buy-intro__entry-scene,
.story-body .buy-intro__inside-scene {
  overflow: hidden !important;
  background-color: #05070b !important;
}

/* same dialogue box style all along, no outside fine outline */
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  width: min(100%, 1020px) !important;
  max-width: min(100%, 1020px) !important;
  min-height: 202px !important;
  margin: 8px auto 0 !important;
  padding: 16px 20px 18px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #efefef !important;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 10px #d7d7d7 !important;
}
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}
.story-body .buy-intro__title-copy {
  background: linear-gradient(180deg, rgba(5,7,11,0) 0%, rgba(5,7,11,0.72) 28%, rgba(5,7,11,0.96) 100%) !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 24ch !important;
  font-size: clamp(24px, 4vw, 50px) !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
}
.story-body .buy-intro__copyright,
.story-body .buy-intro__prompt--title { position: relative !important; z-index: 4 !important; }

/* welcome screen truck: clearer readable rear with proper road and bumper */
.story-body .buy-intro__title-stage {
  min-height: 520px !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(240,224,129,0.98) 0 40px, transparent 41px),
    radial-gradient(circle at 7% 20%, rgba(255,255,255,0.78) 0 2px, transparent 3px) 0 0/150px 98px,
    radial-gradient(circle at 58% 18%, rgba(255,255,255,0.72) 0 2px, transparent 3px) 0 0/160px 102px,
    linear-gradient(180deg, #071739 0%, #0b1f4e 58%, #0d1420 58%, #090d14 100%) !important;
}
.story-body .buy-intro__title-stage::before {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      transparent 0 3%, #344f84 3% 11%, transparent 11% 15%, #253a63 15% 22%, transparent 22% 27%,
      #52406c 27% 38%, transparent 38% 44%, #506a99 44% 53%, transparent 53% 58%,
      #31497b 58% 67%, transparent 67% 72%, #43325f 72% 81%, transparent 81% 86%, #273a60 86% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 6% 62%, 6% 39%, 16% 39%, 16% 55%, 26% 55%, 26% 31%, 38% 31%, 38% 58%, 50% 58%, 50% 34%, 61% 34%, 61% 56%, 75% 56%, 75% 42%, 85% 42%, 85% 57%, 100% 57%, 100% 100%);
  opacity: .95 !important;
}
.story-body .buy-intro__title-stage::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:118px;
  background:
    linear-gradient(180deg, rgba(76,120,196,0.14), rgba(0,0,0,0) 24%),
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(90deg, #eacb56 0 20px, transparent 20px 56px) 50% 70px / 540px 8px repeat-x,
    linear-gradient(180deg, transparent 0 30px, #232a37 30px 58px, #10151d 58px 100%) !important;
  z-index: 1;
}
.story-body .buy-intro__truck-backdrop { inset: 90px 78px 150px !important; z-index: 2 !important; }
.story-body .buy-intro__truck-backdrop::before {
  width: min(90vw, 900px) !important;
  height: 114px !important;
  bottom: -58px !important;
  background:
    linear-gradient(180deg, rgba(76,120,196,0.10), rgba(0,0,0,0) 24%),
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(90deg, #eacb56 0 20px, transparent 20px 56px) 50% 72px / 540px 8px repeat-x,
    linear-gradient(180deg, transparent 0 28px, #232a37 28px 58px, #10151d 58px 100%) !important;
}
.story-body .buy-intro__truck-backdrop::after {
  content:"";
  position:absolute; left:50%; transform:translateX(-50%); bottom:-30px;
  width:min(80vw,700px); height:94px;
  background:
    radial-gradient(circle at 16% 74%, #0a0d13 0 34px, transparent 35px),
    radial-gradient(circle at 84% 74%, #0a0d13 0 34px, transparent 35px),
    radial-gradient(circle at 16% 74%, #d9dee6 0 16px, transparent 17px),
    radial-gradient(circle at 84% 74%, #d9dee6 0 16px, transparent 17px),
    linear-gradient(180deg, transparent 0 16px, #212835 16px 36px, transparent 36px),
    radial-gradient(circle at 8% 48%, #d64b4b 0 7px, transparent 8px),
    radial-gradient(circle at 92% 48%, #d64b4b 0 7px, transparent 8px),
    linear-gradient(180deg, #323945 0%, #141920 100%);
  clip-path: polygon(0 36%, 14% 36%, 18% 0, 82% 0, 86% 36%, 100% 36%, 100% 100%, 0 100%) !important;
  background-repeat:no-repeat;
}
.story-body .buy-intro__truck-frame::after {
  content:"";
  position:absolute; left:-10px; right:-10px; bottom:-36px; height:42px;
  background:
    radial-gradient(circle at 8% 54%, #d74e4e 0 7px, transparent 8px),
    radial-gradient(circle at 92% 54%, #d74e4e 0 7px, transparent 8px),
    linear-gradient(180deg, #303743 0%, #141921 100%);
  clip-path: polygon(0 34%, 14% 34%, 18% 0, 82% 0, 86% 34%, 100% 34%, 100% 100%, 0 100%) !important;
}

/* boarding screen now matches same location and truck look */
.story-body .buy-intro__boarding-screen { background: #05070b !important; }
.story-body .buy-intro__entry-scene {
  min-height: 420px !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(240,224,129,0.98) 0 40px, transparent 41px),
    radial-gradient(circle at 7% 20%, rgba(255,255,255,0.78) 0 2px, transparent 3px) 0 0/150px 98px,
    radial-gradient(circle at 58% 18%, rgba(255,255,255,0.72) 0 2px, transparent 3px) 0 0/160px 102px,
    linear-gradient(180deg, #071739 0%, #0b1f4e 58%, #0d1420 58%, #090d14 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      transparent 0 3%, #344f84 3% 11%, transparent 11% 15%, #253a63 15% 22%, transparent 22% 27%,
      #52406c 27% 38%, transparent 38% 44%, #506a99 44% 53%, transparent 53% 58%,
      #31497b 58% 67%, transparent 67% 72%, #43325f 72% 81%, transparent 81% 86%, #273a60 86% 100%);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 6% 62%, 6% 39%, 16% 39%, 16% 55%, 26% 55%, 26% 31%, 38% 31%, 38% 58%, 50% 58%, 50% 34%, 61% 34%, 61% 56%, 75% 56%, 75% 42%, 85% 42%, 85% 57%, 100% 57%, 100% 100%);
  opacity: .95 !important;
}
.story-body .buy-intro__entry-scene::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:118px;
  background:
    linear-gradient(180deg, rgba(76,120,196,0.14), rgba(0,0,0,0) 24%),
    linear-gradient(180deg, #1a3157 0 8px, transparent 8px),
    linear-gradient(90deg, #eacb56 0 20px, transparent 20px 56px) 50% 72px / 540px 8px repeat-x,
    radial-gradient(circle at 30% 62%, #0a0d13 0 26px, transparent 27px),
    radial-gradient(circle at 70% 62%, #0a0d13 0 26px, transparent 27px),
    radial-gradient(circle at 30% 62%, #d9dee6 0 12px, transparent 13px),
    radial-gradient(circle at 70% 62%, #d9dee6 0 12px, transparent 13px),
    linear-gradient(180deg, transparent 0 34px, #323945 34px 56px, transparent 56px),
    radial-gradient(circle at 17% 50%, #d64b4b 0 6px, transparent 7px),
    radial-gradient(circle at 83% 50%, #d64b4b 0 6px, transparent 7px),
    linear-gradient(180deg, transparent 0 30px, #232a37 30px 58px, #10151d 58px 100%) !important;
}
.story-body .buy-intro__entry-open-door {
  inset: 88px 270px 76px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 10%),
    linear-gradient(180deg, #ddd8d0 0 12px, #3a404b 12px 24px, #080b10 24px 100%) !important;
  box-shadow: inset 0 0 0 5px #2b3037, 0 8px 0 rgba(0,0,0,0.16) !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  top: 18px !important;
  bottom: 28px !important;
  width: 20% !important;
  border: 4px solid #2a2d35 !important;
}
.story-body .buy-intro__entry-boxes { bottom: 126px !important; }
.story-body .buy-intro__entry-boxes--left { left: 306px !important; width: 100px !important; height: 92px !important; }
.story-body .buy-intro__entry-boxes--right { right: 302px !important; width: 104px !important; height: 96px !important; }
.story-body .buy-intro__entry-character--mentor {
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.32)) !important;
}

/* mentor sprite darker skin tone, shirt still visible */
.story-body .buy-intro__inside-mentor,
.story-body .professor-sprite {
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.34)) !important;
}
.story-body .buy-intro__inside-scene { background: linear-gradient(180deg, #07090d 0%, #030406 100%) !important; }

@media (max-width: 900px) {
  .story-body .buy-intro__emerald-title { max-width: 18ch !important; font-size: clamp(18px, 5vw, 34px) !important; }
  .story-body .buy-intro__title-stage { min-height: 430px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 82px 22px 136px !important; }
  .story-body .buy-intro__entry-open-door { inset: 90px 118px 72px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 132px !important; width: 84px !important; height: 76px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 132px !important; width: 88px !important; height: 80px !important; }
}
@media (max-width: 640px) {
  .story-body .language-switch { top: 10px !important; right: 10px !important; }
  .story-body .buy-intro__skip-button { right: 10px !important; bottom: 10px !important; font-size: 8px !important; }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box { width: min(100%, 94vw) !important; min-height: 156px !important; padding: 14px 14px 16px !important; }
  .story-body .buy-intro__title-stage { min-height: 300px !important; }
  .story-body .buy-intro__title-stage::after,
  .story-body .buy-intro__entry-scene::after { height: 92px !important; background-size: auto, auto, 320px 6px, auto !important; }
  .story-body .buy-intro__truck-backdrop { inset: 78px 12px 118px !important; }
  .story-body .buy-intro__entry-scene { min-height: 270px !important; }
  .story-body .buy-intro__entry-open-door { inset: 68px 42px 58px !important; }
  .story-body .buy-intro__entry-boxes { bottom: 92px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 54px !important; width: 48px !important; height: 48px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 54px !important; width: 50px !important; height: 52px !important; }
  .story-body .buy-intro__entry-character--mentor { width: 46px !important; height: 74px !important; left: calc(50% - 23px) !important; bottom: 56px !important; }
}


/* v70 cleanup and readability improvements */
.story-scene::before,
.story-body::before,
.story-body::after,
.buy-intro__pixel-sky,
.buy-intro__series { display: none !important; }
.story-scene { background: #000 !important; }

/* remove box/rounded outer contour around cinematic */
.story-body .buy-intro,
.story-body .buy-intro__panel,
.story-body .buy-intro__panel--v64 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
}
.story-body .buy-intro__panel::before,
.story-body .buy-intro__panel::after,
.story-body .buy-intro__panel--v64::before,
.story-body .buy-intro__panel--v64::after { display:none !important; }

/* persistent UI */
.story-back {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 1300 !important;
}
.story-body .language-switch {
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 1301 !important;
}
.story-body .buy-intro__skip-button {
  position: fixed !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 1302 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(9,12,18,0.86) !important;
  color: #f0f2f6 !important;
  backdrop-filter: blur(4px) !important;
}
.story-body .buy-intro__skip-button:hover { opacity: 1 !important; }

/* same dialogue box from start to finish */
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  width: min(100%, 1020px) !important;
  max-width: min(100%, 1020px) !important;
  min-height: 174px !important;
  margin: 8px auto 0 !important;
  padding: 16px 20px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ececec !important;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 10px #d2d2d2 !important;
}
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  border-radius: 20px !important;
  border: 2px solid #ffffff !important;
  background: #111 !important;
  color: #fff !important;
}
.story-body .buy-intro__meta,
.story-body .dialogue-skip { color: #696969 !important; }

/* welcome screen */
.story-body .buy-intro__welcome-screen,
.story-body .buy-intro__boarding-screen,
.story-body .buy-intro__drive-screen {
  background: #05070b !important;
}
.story-body .buy-intro__title-stage {
  position: relative !important;
  min-height: 520px !important;
  background:
    radial-gradient(circle at 50% 60px, #efe184 0 42px, transparent 43px),
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.88) 0 1.6px, transparent 1.8px) 0 0/140px 86px,
    radial-gradient(circle at 73% 31%, rgba(255,255,255,.82) 0 1.5px, transparent 1.7px) 0 0/150px 96px,
    linear-gradient(180deg, #081739 0%, #0c2457 58%, #182334 58%, #0f141c 100%) !important;
}
.story-body .buy-intro__title-stage::before {
  content:""; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:1;
  background:
    linear-gradient(180deg, rgba(66,104,169,0.16), rgba(0,0,0,0) 18%),
    linear-gradient(180deg, transparent 0 22px, #2d3747 22px 52px, #141920 52px 100%),
    linear-gradient(90deg, transparent 0 8%, #efcf57 8% 12%, transparent 12% 49%, #efcf57 49% 53%, transparent 53% 88%, #efcf57 88% 92%, transparent 92% 100%) 50% 76px/780px 10px no-repeat !important;
}
.story-body .buy-intro__title-stage::after {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, transparent 0 3%, #4c6897 3% 12%, transparent 12% 16%, #36527b 16% 22%, transparent 22% 27%, #5a4676 27% 36%, transparent 36% 44%, #4a6593 44% 53%, transparent 53% 58%, #304a79 58% 67%, transparent 67% 74%, #4d3a68 74% 83%, transparent 83% 100%);
  clip-path: polygon(0 100%,0 68%,6% 68%,6% 44%,18% 44%,18% 58%,27% 58%,27% 36%,39% 36%,39% 60%,51% 60%,51% 40%,63% 40%,63% 58%,75% 58%,75% 46%,86% 46%,86% 62%,100% 62%,100% 100%);
  opacity:.72 !important;
}
.story-body .buy-intro__truck-backdrop {
  position:absolute !important;
  inset: 108px 140px 148px !important;
  z-index: 2 !important;
}
.story-body .buy-intro__truck-frame {
  position: relative !important;
  height: 100% !important;
  background: #d7d3cb !important;
  border: 8px solid #4a4d55 !important;
  box-shadow: inset 0 0 0 6px #f5f1e8 !important;
}
.story-body .buy-intro__truck-frame::before {
  content:""; position:absolute; left:4%; right:4%; top:-18px; height:18px;
  background: linear-gradient(180deg, #f3efe7 0%, #cfc8bb 100%) !important;
  clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%);
}
.story-body .buy-intro__truck-frame::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-50px; width:min(88%,720px); height:84px;
  background:
    radial-gradient(circle at 16% 68%, #090c12 0 34px, transparent 35px),
    radial-gradient(circle at 84% 68%, #090c12 0 34px, transparent 35px),
    radial-gradient(circle at 16% 68%, #d7dde8 0 15px, transparent 16px),
    radial-gradient(circle at 84% 68%, #d7dde8 0 15px, transparent 16px),
    radial-gradient(circle at 6% 38%, #e05656 0 7px, transparent 8px),
    radial-gradient(circle at 94% 38%, #e05656 0 7px, transparent 8px),
    linear-gradient(180deg, #2f3640 0%, #141920 100%);
  clip-path: polygon(0 44%, 12% 44%, 18% 0, 82% 0, 88% 44%, 100% 44%, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-door { width: 11% !important; top: 12% !important; bottom: 16% !important; background: linear-gradient(180deg,#cfcfd5,#9297a5) !important; border: 5px solid #4f5360 !important; }
.story-body .buy-intro__truck-door--left { left: -8% !important; transform: skewY(8deg) !important; }
.story-body .buy-intro__truck-door--right { right: -8% !important; transform: skewY(-8deg) !important; }
.story-body .buy-intro__truck-interior-glow { display:none !important; }
.story-body .buy-intro__truck-floor {
  left: 17% !important; right: 17% !important; bottom: 13% !important; height: 17% !important;
  background: linear-gradient(180deg, #6a665e 0%, #3d3b36 100%) !important;
  clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-stack,
.story-body .buy-intro__truck-crate {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, #d7a364 0%, #a8733f 100%) !important;
  border: 3px solid #6b4525 !important;
}
.story-body .buy-intro__truck-stack--left { left: 14% !important; width: 17% !important; height: 38% !important; bottom: 20% !important; }
.story-body .buy-intro__truck-stack--right { right: 14% !important; width: 17% !important; height: 38% !important; bottom: 20% !important; }
.story-body .buy-intro__truck-crate { left: 40%; width: 20%; height: 31%; bottom: 20% !important; }
.story-body .buy-intro__title-copy {
  position: relative !important;
  z-index: 3 !important;
  padding: 18px 24px 24px !important;
  min-height: 260px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(4,6,10,.64) 12%, rgba(4,6,10,.96) 34%, #05070b 100%) !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 19ch !important;
  margin: 0 auto 12px !important;
  font-size: clamp(28px, 4.2vw, 46px) !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
}
.story-body .buy-intro__copyright { font-size: clamp(18px, 2vw, 28px) !important; }
.story-body .buy-intro__prompt--title { opacity: .94 !important; }

/* boarding scene: coherent parking + open truck */
.story-body .buy-intro__entry-scene {
  position: relative !important;
  min-height: 430px !important;
  background:
    radial-gradient(circle at 50% 60px, #efe184 0 42px, transparent 43px),
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.88) 0 1.6px, transparent 1.8px) 0 0/140px 86px,
    radial-gradient(circle at 73% 31%, rgba(255,255,255,.82) 0 1.5px, transparent 1.7px) 0 0/150px 96px,
    linear-gradient(180deg, #081739 0%, #0c2457 58%, #182334 58%, #0f141c 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 0 3%, #4c6897 3% 12%, transparent 12% 16%, #36527b 16% 22%, transparent 22% 27%, #5a4676 27% 36%, transparent 36% 44%, #4a6593 44% 53%, transparent 53% 58%, #304a79 58% 67%, transparent 67% 74%, #4d3a68 74% 83%, transparent 83% 100%);
  clip-path: polygon(0 100%,0 68%,6% 68%,6% 44%,18% 44%,18% 58%,27% 58%,27% 36%,39% 36%,39% 60%,51% 60%,51% 40%,63% 40%,63% 58%,75% 58%,75% 46%,86% 46%,86% 62%,100% 62%,100% 100%);
  opacity:.72 !important;
}
.story-body .buy-intro__entry-scene::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:140px;
  background:
    linear-gradient(180deg, rgba(66,104,169,0.16), rgba(0,0,0,0) 18%),
    linear-gradient(180deg, transparent 0 22px, #2d3747 22px 52px, #141920 52px 100%),
    linear-gradient(90deg, transparent 0 8%, #efcf57 8% 12%, transparent 12% 49%, #efcf57 49% 53%, transparent 53% 88%, #efcf57 88% 92%, transparent 92% 100%) 50% 76px/780px 10px no-repeat !important;
}
.story-body .buy-intro__entry-roof,
.story-body .buy-intro__entry-depth,
.story-body .buy-intro__entry-floor { display:none !important; }
.story-body .buy-intro__entry-open-door {
  inset: 96px 230px 84px !important;
  background: linear-gradient(180deg, #dad4ca 0 12px, #4d5057 12px 24px, #06080d 24px 100%) !important;
  box-shadow: inset 0 0 0 8px #f5f1e8, inset 0 0 0 14px #44474f !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  content:""; position:absolute; top:16px; bottom:26px; width:16%; background: linear-gradient(180deg,#cfcfd5,#9095a4); border:4px solid #4f5360;
}
.story-body .buy-intro__entry-open-door::before { left:-12%; transform: skewY(8deg); }
.story-body .buy-intro__entry-open-door::after { right:-12%; transform: skewY(-8deg); }
.story-body .buy-intro__entry-open-door + .buy-intro__entry-character--mentor { z-index:4 !important; }
.story-body .buy-intro__entry-boxes {
  z-index: 4 !important;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, #d7a364 0%, #a8733f 100%) !important;
  border: 3px solid #6b4525 !important;
}
.story-body .buy-intro__entry-boxes--left { left: 285px !important; width: 118px !important; height: 106px !important; bottom: 94px !important; }
.story-body .buy-intro__entry-boxes--right { right: 285px !important; width: 122px !important; height: 108px !important; bottom: 94px !important; }
.story-body .buy-intro__entry-character--mentor {
  width: 56px !important; height: 90px !important; left: calc(50% - 28px) !important; bottom: 92px !important;
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 7px 0 rgba(0,0,0,.32)) !important;
}

/* inside scene immersive */
.story-body .buy-intro__inside-scene {
  position: relative !important;
  min-height: 440px !important;
  background:
    linear-gradient(180deg, #020305 0%, #05080d 40%, #0c121a 100%) !important;
}
.story-body .buy-intro__inside-darkness {
  position:absolute !important; inset:0 !important; z-index:1 !important;
  background: radial-gradient(circle at 52% 44%, rgba(0,0,0,.08) 0 6%, rgba(0,0,0,.68) 18%, rgba(0,0,0,.94) 52%, rgba(0,0,0,1) 100%) !important;
}
.story-body .buy-intro__inside-wall--left,
.story-body .buy-intro__inside-wall--right {
  top: 42px !important; bottom: 30px !important; width: 20% !important;
  background: linear-gradient(180deg, #252a33 0%, #0d1118 100%) !important;
  z-index: 2 !important;
}
.story-body .buy-intro__inside-wall--left { left: 12% !important; transform: skewY(10deg) !important; }
.story-body .buy-intro__inside-wall--right { right: 12% !important; transform: skewY(-10deg) !important; }
.story-body .buy-intro__inside-floor {
  left: 22% !important; right: 22% !important; bottom: 38px !important; height: 28% !important;
  background: linear-gradient(180deg, #44433f 0%, #1d1c19 100%) !important;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%) !important;
  z-index: 2 !important;
}
.story-body .buy-intro__inside-boxes,
.story-body .buy-intro__inside-boxes--back {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(74,49,23,.55) 48% 52%, transparent 52%),
    linear-gradient(180deg, #c99358 0%, #8f5f34 100%) !important;
  border: 3px solid #613b21 !important;
  z-index: 3 !important;
}
.story-body .buy-intro__inside-boxes--left { left: 27% !important; bottom: 122px !important; width: 15% !important; height: 22% !important; }
.story-body .buy-intro__inside-boxes--right { right: 27% !important; bottom: 122px !important; width: 15% !important; height: 22% !important; }
.story-body .buy-intro__inside-boxes--back { left: 40%; bottom: 162px !important; width: 20% !important; height: 19% !important; }
.story-body .buy-intro__inside-mentor {
  width: 74px !important; height: 120px !important; left: 50% !important; bottom: 86px !important; transform: translateX(-50%) !important;
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  z-index: 4 !important;
}
.story-body .buy-intro__inside-flashlight {
  left: 50% !important; bottom: 188px !important; width: 190px !important; height: 190px !important; transform: translateX(-50%) !important;
  background: radial-gradient(circle at 50% 50%, rgba(254,245,205,.66) 0 10%, rgba(254,245,205,.32) 22%, rgba(254,245,205,.12) 40%, transparent 72%) !important;
  z-index: 3 !important; opacity: 0 !important; transition: opacity .18s linear !important;
}
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-flashlight,
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-flashlight { opacity: 1 !important; }
.story-body .buy-intro__inside-starters { z-index: 5 !important; bottom: 74px !important; }
.story-body .buy-intro__inside-starter { filter: drop-shadow(0 2px 0 rgba(0,0,0,.42)) !important; }

/* hide lingering prompts behind title */
.story-body .buy-intro__welcome-screen .buy-intro__dialogue,
.story-body .buy-intro__welcome-screen .buy-intro__skip,
.story-body .buy-intro__welcome-screen .buy-intro__meta { display:none !important; }

/* product page wording and back to shop helper */
.product-file-body .story-back { position: fixed !important; top: 14px !important; left: 14px !important; z-index: 1200 !important; }
.product-file-body .product-file-page::before,
.product-file-body .product-file-page::after { display:none !important; }

@media (max-width: 980px) {
  .story-body .buy-intro__truck-backdrop { inset: 98px 50px 148px !important; }
  .story-body .buy-intro__entry-open-door { inset: 96px 130px 84px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 170px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 170px !important; }
}
@media (max-width: 700px) {
  .story-back { top: 10px !important; left: 10px !important; }
  .story-body .language-switch { top: 10px !important; right: 10px !important; }
  .story-body .buy-intro__skip-button { right: 10px !important; bottom: 10px !important; font-size: 9px !important; }
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 300px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 74px 14px 116px !important; }
  .story-body .buy-intro__truck-frame::after { bottom: -28px !important; height: 56px !important; }
  .story-body .buy-intro__title-copy { min-height: 220px !important; }
  .story-body .buy-intro__emerald-title { max-width: 16ch !important; font-size: clamp(18px, 5.6vw, 28px) !important; }
  .story-body .buy-intro__entry-open-door { inset: 70px 42px 56px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 58px !important; width: 58px !important; height: 54px !important; bottom: 70px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 58px !important; width: 58px !important; height: 54px !important; bottom: 70px !important; }
  .story-body .buy-intro__entry-character--mentor { width: 42px !important; height: 68px !important; bottom: 68px !important; }
  .story-body .buy-intro__inside-mentor { width: 52px !important; height: 88px !important; bottom: 60px !important; }
}


/* v71 polish based on feedback */
.story-body .buy-intro {
  padding-top: 44px !important;
}
.story-back {
  top: 8px !important;
  left: 12px !important;
  z-index: 1400 !important;
}
.story-body .language-switch {
  top: 4px !important;
  right: 8px !important;
  z-index: 1400 !important;
}
.story-body .buy-intro__skip-button {
  right: 14px !important;
  bottom: 12px !important;
  z-index: 1401 !important;
}

/* cleaner dialogue and prompt */
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  position: relative !important;
  z-index: 30 !important;
  width: min(100%, 1000px) !important;
  margin: 12px auto 0 !important;
  min-height: 162px !important;
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 9px #d0d0d0 !important;
}
.story-body .buy-intro__meta,
.story-body .dialogue-skip {
  color: #777 !important;
  opacity: 1 !important;
}
.story-body .buy-intro__welcome-screen .buy-intro__meta,
.story-body .buy-intro__welcome-screen .dialogue-skip { display: none !important; }
.story-body .buy-intro__prompt--title {
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  color: rgba(245,245,245,.92) !important;
  opacity: 1 !important;
  margin-top: 10px !important;
}
/* hide stray ghost prompt but keep the proper one inside title copy */
.story-body .buy-intro__title-stage > .buy-intro__prompt--title { display: none !important; }

/* title / welcome screen back to the cleaner older layout */
.story-body .buy-intro__title-stage {
  min-height: 470px !important;
  background:
    radial-gradient(circle at 50% 68px, #ebe083 0 48px, transparent 49px),
    radial-gradient(circle at 10% 24%, rgba(255,255,255,.95) 0 2px, transparent 2.2px),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.9) 0 2px, transparent 2.2px),
    radial-gradient(circle at 43% 27%, rgba(255,255,255,.85) 0 1.8px, transparent 2px),
    radial-gradient(circle at 69% 20%, rgba(255,255,255,.95) 0 2px, transparent 2.2px),
    radial-gradient(circle at 83% 26%, rgba(255,255,255,.88) 0 1.8px, transparent 2px),
    linear-gradient(180deg, #07163a 0%, #0d265d 63%, #122238 63%, #0b0e13 100%) !important;
}
.story-body .buy-intro__title-stage::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 126px !important;
  height: 126px !important;
  background:
    linear-gradient(90deg,
      transparent 0 4%, #4a6896 4% 12%, transparent 12% 18%, #2d4772 18% 24%, transparent 24% 29%, #55416e 29% 37%, transparent 37% 44%, #44618b 44% 53%, transparent 53% 60%, #2e4672 60% 69%, transparent 69% 75%, #58456f 75% 83%, transparent 83% 89%, #456085 89% 100%) !important;
  clip-path: polygon(0 100%, 0 52%, 7% 52%, 7% 26%, 16% 26%, 16% 44%, 26% 44%, 26% 18%, 38% 18%, 38% 40%, 51% 40%, 51% 16%, 63% 16%, 63% 46%, 76% 46%, 76% 24%, 88% 24%, 88% 42%, 100% 42%, 100% 100%) !important;
  opacity: .82 !important;
  z-index: 0 !important;
}
.story-body .buy-intro__title-stage::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 126px !important;
  background:
    linear-gradient(180deg, rgba(58,95,149,.16) 0, rgba(58,95,149,0) 16px),
    linear-gradient(180deg, transparent 0 30px, #2b3444 30px 58px, #11161d 58px 100%),
    linear-gradient(90deg,
      transparent 0 10%, #f0d05a 10% 13%, transparent 13% 47%, #f0d05a 47% 50%, transparent 50% 84%, #f0d05a 84% 87%, transparent 87% 100%) 50% 74px / 760px 10px no-repeat !important;
  z-index: 1 !important;
}
.story-body .buy-intro__truck-backdrop {
  inset: 88px 84px 158px !important;
  z-index: 2 !important;
}
.story-body .buy-intro__truck-backdrop::before,
.story-body .buy-intro__truck-backdrop::after { display: none !important; }
.story-body .buy-intro__truck-frame {
  height: 228px !important;
  background: #d8d3cb !important;
  border: 7px solid #515560 !important;
  box-shadow: inset 0 0 0 6px #f4f0e8 !important;
}
.story-body .buy-intro__truck-frame::before {
  left: 6% !important; right: 6% !important; top: -18px !important; height: 18px !important;
  background: linear-gradient(180deg, #f5f1ea 0%, #cbc4b8 100%) !important;
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%) !important;
}
.story-body .buy-intro__truck-frame::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important; transform: translateX(-50%) !important;
  bottom: -38px !important;
  width: min(80%, 620px) !important;
  height: 74px !important;
  background:
    radial-gradient(circle at 18% 62%, #080b11 0 30px, transparent 31px),
    radial-gradient(circle at 82% 62%, #080b11 0 30px, transparent 31px),
    radial-gradient(circle at 18% 62%, #d8dee7 0 12px, transparent 13px),
    radial-gradient(circle at 82% 62%, #d8dee7 0 12px, transparent 13px),
    radial-gradient(circle at 6% 28%, #e35c5c 0 7px, transparent 8px),
    radial-gradient(circle at 94% 28%, #e35c5c 0 7px, transparent 8px),
    linear-gradient(180deg, #2d3440 0%, #121720 100%) !important;
  clip-path: polygon(0 54%, 14% 54%, 21% 0, 79% 0, 86% 54%, 100% 54%, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-door {
  width: 10% !important;
  top: 12% !important; bottom: 16% !important;
  background: linear-gradient(180deg, #d0d1d8 0%, #b4b5bd 100%) !important;
  border: 5px solid #5a5e69 !important;
}
.story-body .buy-intro__truck-door--left { left: -7% !important; transform: skewY(8deg) !important; }
.story-body .buy-intro__truck-door--right { right: -7% !important; transform: skewY(-8deg) !important; }
.story-body .buy-intro__truck-floor {
  left: 17% !important; right: 17% !important; bottom: 11% !important; height: 17% !important;
  background: linear-gradient(180deg, #716a5f 0%, #403c35 100%) !important;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__truck-stack--left,
.story-body .buy-intro__truck-stack--right,
.story-body .buy-intro__truck-crate {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, #d9a86b 0%, #af7944 100%) !important;
  border: 3px solid #6d4626 !important;
}
.story-body .buy-intro__truck-stack--left { left: 16% !important; width: 16% !important; height: 38% !important; bottom: 20% !important; }
.story-body .buy-intro__truck-stack--right { right: 16% !important; width: 16% !important; height: 38% !important; bottom: 20% !important; }
.story-body .buy-intro__truck-crate { left: 41% !important; width: 18% !important; height: 30% !important; bottom: 20% !important; }
.story-body .buy-intro__title-copy {
  min-height: 210px !important;
  padding: 22px 24px 24px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3,4,8,.72) 14%, rgba(3,4,8,.95) 36%, #020307 100%) !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 18ch !important;
  margin: 0 auto 8px !important;
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: 1.02 !important;
  text-wrap: balance !important;
}
.story-body .buy-intro__copyright {
  font-size: clamp(14px, 1.4vw, 24px) !important;
  margin-top: 2px !important;
}

/* boarding scene: coherent with welcome and not touching ui */
.story-body .buy-intro__entry-scene {
  min-height: 470px !important;
  background:
    radial-gradient(circle at 50% 68px, #ebe083 0 48px, transparent 49px),
    radial-gradient(circle at 10% 24%, rgba(255,255,255,.95) 0 2px, transparent 2.2px),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.9) 0 2px, transparent 2.2px),
    radial-gradient(circle at 43% 27%, rgba(255,255,255,.85) 0 1.8px, transparent 2px),
    radial-gradient(circle at 69% 20%, rgba(255,255,255,.95) 0 2px, transparent 2.2px),
    radial-gradient(circle at 83% 26%, rgba(255,255,255,.88) 0 1.8px, transparent 2px),
    linear-gradient(180deg, #07163a 0%, #0d265d 63%, #122238 63%, #0b0e13 100%) !important;
}
.story-body .buy-intro__entry-scene::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 126px !important;
  height: 126px !important;
  background:
    linear-gradient(90deg,
      transparent 0 4%, #4a6896 4% 12%, transparent 12% 18%, #2d4772 18% 24%, transparent 24% 29%, #55416e 29% 37%, transparent 37% 44%, #44618b 44% 53%, transparent 53% 60%, #2e4672 60% 69%, transparent 69% 75%, #58456f 75% 83%, transparent 83% 89%, #456085 89% 100%) !important;
  clip-path: polygon(0 100%, 0 52%, 7% 52%, 7% 26%, 16% 26%, 16% 44%, 26% 44%, 26% 18%, 38% 18%, 38% 40%, 51% 40%, 51% 16%, 63% 16%, 63% 46%, 76% 46%, 76% 24%, 88% 24%, 88% 42%, 100% 42%, 100% 100%) !important;
  opacity: .82 !important;
  z-index: 0 !important;
}
.story-body .buy-intro__entry-scene::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 126px !important;
  background:
    linear-gradient(180deg, rgba(58,95,149,.16) 0, rgba(58,95,149,0) 16px),
    linear-gradient(180deg, transparent 0 30px, #2b3444 30px 58px, #11161d 58px 100%),
    linear-gradient(90deg,
      transparent 0 10%, #f0d05a 10% 13%, transparent 13% 47%, #f0d05a 47% 50%, transparent 50% 84%, #f0d05a 84% 87%, transparent 87% 100%) 50% 74px / 760px 10px no-repeat !important;
  z-index: 1 !important;
}
.story-body .buy-intro__entry-open-door {
  inset: 86px 210px 134px !important;
  background: linear-gradient(180deg, #d9d3c9 0 10px, #4d5158 10px 20px, #05070b 20px 100%) !important;
  box-shadow: inset 0 0 0 6px #f5f1e8, inset 0 0 0 12px #4c5159 !important;
  z-index: 2 !important;
}
.story-body .buy-intro__entry-open-door::before,
.story-body .buy-intro__entry-open-door::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important; bottom: 18px !important; width: 12% !important;
  background: linear-gradient(180deg, #d0d1d8 0%, #b4b5bd 100%) !important;
  border: 4px solid #5a5e69 !important;
}
.story-body .buy-intro__entry-open-door::before { left: -10% !important; transform: skewY(8deg) !important; }
.story-body .buy-intro__entry-open-door::after { right: -10% !important; transform: skewY(-8deg) !important; }
.story-body .buy-intro__entry-boxes {
  z-index: 3 !important;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, #d9a86b 0%, #af7944 100%) !important;
  border: 3px solid #6d4626 !important;
}
.story-body .buy-intro__entry-boxes--left { left: 300px !important; width: 110px !important; height: 110px !important; bottom: 146px !important; }
.story-body .buy-intro__entry-boxes--right { right: 300px !important; width: 110px !important; height: 110px !important; bottom: 146px !important; }
.story-body .buy-intro__entry-character--mentor {
  width: 64px !important; height: 98px !important; left: calc(50% - 32px) !important; bottom: 134px !important;
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.3)) brightness(.95) !important;
}

/* truck inside: cleaner, boxes less extreme, more immersive */
.story-body .buy-intro__inside-scene {
  min-height: 470px !important;
  background: linear-gradient(180deg, #04060a 0%, #010204 100%) !important;
}
.story-body .buy-intro__inside-darkness {
  inset: 0 !important;
  background: radial-gradient(circle at 50% 38%, rgba(0,0,0,.18) 0 10%, rgba(0,0,0,.68) 28%, rgba(0,0,0,.96) 64%, rgba(0,0,0,1) 100%) !important;
}
.story-body .buy-intro__inside-wall--left,
.story-body .buy-intro__inside-wall--right {
  top: 40px !important; bottom: 44px !important; width: 20% !important;
  background: linear-gradient(180deg, #242a33 0%, #0b0f15 100%) !important;
}
.story-body .buy-intro__inside-wall--left { left: 12% !important; transform: skewY(10deg) !important; }
.story-body .buy-intro__inside-wall--right { right: 12% !important; transform: skewY(-10deg) !important; }
.story-body .buy-intro__inside-floor {
  left: 21% !important; right: 21% !important; bottom: 42px !important; height: 29% !important;
  background: linear-gradient(180deg, #4a4741 0%, #1b1814 100%) !important;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%) !important;
}
.story-body .buy-intro__inside-boxes,
.story-body .buy-intro__inside-boxes--back {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, transparent 0 48%, rgba(80,52,25,.52) 48% 52%, transparent 52%),
    linear-gradient(180deg, #cb9659 0%, #8e5d32 100%) !important;
  border: 3px solid #5d371e !important;
}
.story-body .buy-intro__inside-boxes--left { left: 23% !important; width: 12% !important; height: 20% !important; bottom: 126px !important; }
.story-body .buy-intro__inside-boxes--right { right: 23% !important; width: 12% !important; height: 20% !important; bottom: 126px !important; }
.story-body .buy-intro__inside-boxes--back { left: 41%; width: 18% !important; height: 18% !important; bottom: 172px !important; transform: none !important; }
.story-body .buy-intro__inside-mentor {
  width: 80px !important; height: 128px !important; left: 50% !important; bottom: 88px !important; transform: translateX(-50%) !important;
  background: url('assets/mentor-c3h2e7n-v5.png') center bottom / contain no-repeat !important;
  filter: brightness(.95) !important;
}
.story-body .buy-intro__inside-flashlight {
  left: 50% !important; top: 128px !important; width: 240px !important; height: 240px !important; transform: translateX(-50%) !important;
  background: radial-gradient(circle at 50% 50%, rgba(255,244,188,.72) 0 10%, rgba(255,244,188,.35) 22%, rgba(255,244,188,.14) 44%, transparent 72%) !important;
}
.story-body .buy-intro__drive-screen.is-lit .buy-intro__inside-flashlight,
.story-body .buy-intro__drive-screen.show-starters .buy-intro__inside-flashlight { opacity: 1 !important; }

/* small screens */
@media (max-width: 980px) {
  .story-body .buy-intro__truck-backdrop { inset: 94px 30px 152px !important; }
  .story-body .buy-intro__entry-open-door { inset: 88px 92px 136px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 150px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 150px !important; }
}
@media (max-width: 700px) {
  .story-body .buy-intro { padding-top: 40px !important; }
  .story-back { top: 6px !important; left: 8px !important; }
  .story-body .language-switch { top: 4px !important; right: 6px !important; }
  .story-body .buy-intro__skip-button { right: 8px !important; bottom: 8px !important; }
  .story-body .buy-intro__title-stage,
  .story-body .buy-intro__entry-scene,
  .story-body .buy-intro__inside-scene { min-height: 300px !important; }
  .story-body .buy-intro__title-stage::before,
  .story-body .buy-intro__entry-scene::before { bottom: 86px !important; height: 92px !important; }
  .story-body .buy-intro__title-stage::after,
  .story-body .buy-intro__entry-scene::after { height: 86px !important; }
  .story-body .buy-intro__truck-backdrop { inset: 72px 12px 118px !important; }
  .story-body .buy-intro__truck-frame { height: 150px !important; }
  .story-body .buy-intro__truck-frame::after { bottom: -26px !important; height: 54px !important; width: min(82%, 280px) !important; }
  .story-body .buy-intro__title-copy { min-height: 170px !important; padding: 18px 14px 18px !important; }
  .story-body .buy-intro__emerald-title { font-size: clamp(22px, 7vw, 34px) !important; max-width: 16ch !important; }
  .story-body .buy-intro__copyright { font-size: 12px !important; }
  .story-body .buy-intro__entry-open-door { inset: 66px 38px 108px !important; }
  .story-body .buy-intro__entry-boxes--left { left: 54px !important; width: 58px !important; height: 58px !important; bottom: 118px !important; }
  .story-body .buy-intro__entry-boxes--right { right: 54px !important; width: 58px !important; height: 58px !important; bottom: 118px !important; }
  .story-body .buy-intro__entry-character--mentor { width: 44px !important; height: 68px !important; bottom: 108px !important; }
  .story-body .buy-intro__inside-boxes--left { left: 18% !important; width: 15% !important; height: 15% !important; bottom: 96px !important; }
  .story-body .buy-intro__inside-boxes--right { right: 18% !important; width: 15% !important; height: 15% !important; bottom: 96px !important; }
  .story-body .buy-intro__inside-boxes--back { left: 39% !important; width: 22% !important; height: 14% !important; bottom: 128px !important; }
  .story-body .buy-intro__inside-mentor { width: 52px !important; height: 84px !important; bottom: 66px !important; }
  .story-body .buy-intro__inside-flashlight { width: 170px !important; height: 170px !important; top: 94px !important; }
}


/* v72 - title placement + prompt polish */
.story-body .buy-intro__title-copy {
  min-height: 172px !important;
  margin-top: -24px !important;
  padding: 12px 24px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.story-body .buy-intro__emerald-title {
  max-width: 22ch !important;
  width: 100% !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 0.96 !important;
  margin: 0 auto 10px !important;
  text-align: center !important;
}
.story-body .buy-intro__prompt--title {
  order: 2 !important;
  display: block !important;
  margin: 2px auto 6px !important;
  font-size: clamp(11px, 1.1vw, 18px) !important;
  letter-spacing: 0.18em !important;
  color: rgba(245,245,245,.95) !important;
  opacity: 1 !important;
  animation: buyIntroSlowBlink 2.2s ease-in-out infinite !important;
}
.story-body .buy-intro__copyright {
  order: 3 !important;
  font-size: clamp(13px, 1.4vw, 24px) !important;
  margin-top: 0 !important;
}
@keyframes buyIntroSlowBlink {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
@media (max-width: 700px) {
  .story-body .buy-intro__title-copy {
    min-height: 142px !important;
    margin-top: -12px !important;
    padding: 10px 12px 14px !important;
  }
  .story-body .buy-intro__emerald-title {
    max-width: 18ch !important;
    font-size: clamp(20px, 6.2vw, 30px) !important;
    margin-bottom: 8px !important;
  }
  .story-body .buy-intro__prompt--title {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  .story-body .buy-intro__copyright {
    font-size: 10px !important;
  }
}


/* v73 - pixel perfect title / prompt / copyright stacking */
.story-body .buy-intro__title-copy {
  min-height: 210px !important;
  padding: 10px 24px 8px !important;
  margin-top: -18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.story-body .buy-intro__emerald-title {
  order: 1 !important;
  max-width: 18ch !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(30px, 4.4vw, 56px) !important;
  line-height: 0.96 !important;
}
.story-body .buy-intro__prompt--title {
  order: 2 !important;
  margin: 14px auto 10px !important;
  font-size: clamp(11px, 1.1vw, 18px) !important;
  letter-spacing: 0.18em !important;
  color: rgba(245,245,245,.96) !important;
  opacity: 1 !important;
  animation: buyIntroContinueBlink 2.4s ease-in-out infinite !important;
}
.story-body .buy-intro__copyright {
  order: 3 !important;
  margin: 0 auto !important;
  font-size: clamp(12px, 1.35vw, 22px) !important;
}
@keyframes buyIntroContinueBlink {
  0%,100% { opacity: .22; }
  50% { opacity: 1; }
}
@media (min-width: 701px) {
  .story-body .buy-intro__prompt--title {
    margin-top: 12px !important;
  }
}
@media (max-width: 700px) {
  .story-body .buy-intro__title-copy {
    min-height: 160px !important;
    margin-top: -8px !important;
    padding: 8px 12px 8px !important;
  }
  .story-body .buy-intro__emerald-title {
    max-width: 18ch !important;
    font-size: clamp(18px, 6.4vw, 30px) !important;
  }
  .story-body .buy-intro__prompt--title {
    font-size: 9px !important;
    margin: 8px auto 6px !important;
  }
  .story-body .buy-intro__copyright {
    font-size: 10px !important;
  }
}


/* v74 - title a bit higher, exactly 2-line feel, centered blinking continue */
.story-body .buy-intro__title-copy {
  position: relative !important;
  min-height: 228px !important;
  margin-top: -34px !important;
  padding: 0 24px !important;
  display: block !important;
}
.story-body .buy-intro__emerald-title {
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100%, 20ch) !important;
  max-width: 20ch !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(28px, 4.1vw, 52px) !important;
  line-height: 0.96 !important;
  text-wrap: balance !important;
}
.story-body .buy-intro__prompt--title {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 44px !important;
  width: max-content !important;
  max-width: 90% !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(11px, 1.08vw, 17px) !important;
  letter-spacing: 0.18em !important;
  color: rgba(245,245,245,.97) !important;
  opacity: 1 !important;
  animation: buyIntroContinueBlinkV74 2.6s ease-in-out infinite !important;
}
.story-body .buy-intro__copyright {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 8px !important;
  width: max-content !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(12px, 1.25vw, 20px) !important;
}
@keyframes buyIntroContinueBlinkV74 {
  0%,100% { opacity: .22; }
  50% { opacity: 1; }
}
@media (max-width: 700px) {
  .story-body .buy-intro__title-copy {
    min-height: 172px !important;
    margin-top: -18px !important;
    padding: 0 12px !important;
  }
  .story-body .buy-intro__emerald-title {
    top: 0 !important;
    width: min(100%, 16ch) !important;
    max-width: 16ch !important;
    font-size: clamp(18px, 6vw, 28px) !important;
  }
  .story-body .buy-intro__prompt--title {
    bottom: 32px !important;
    font-size: 8px !important;
    letter-spacing: 0.14em !important;
    white-space: normal !important;
  }
  .story-body .buy-intro__copyright {
    bottom: 6px !important;
    font-size: 9px !important;
  }
}


/* v75 - exact intro title/prompt/copyright adjustments */
.story-body .buy-intro__title-copy {
  min-height: 252px !important;
  margin-top: -28px !important;
}
.story-body .buy-intro__emerald-title {
  top: -4px !important;
  width: min(100%, 24ch) !important;
  max-width: 24ch !important;
  line-height: 1.10 !important;
  letter-spacing: 0.01em !important;
}
.story-body .buy-intro__prompt--title {
  top: 164px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 92% !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(14px, 1.28vw, 21px) !important;
  letter-spacing: 0.16em !important;
  animation: buyIntroContinueBlinkV75 3.8s ease-in-out infinite !important;
}
.story-body .buy-intro__copyright {
  bottom: 0px !important;
  font-size: clamp(11px, 1.1vw, 18px) !important;
}
@keyframes buyIntroContinueBlinkV75 {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 1; }
}
@media (max-width: 700px) {
  .story-body .buy-intro__title-copy {
    min-height: 188px !important;
    margin-top: -16px !important;
  }
  .story-body .buy-intro__emerald-title {
    top: -2px !important;
    width: min(100%, 17ch) !important;
    max-width: 17ch !important;
    line-height: 1.12 !important;
  }
  .story-body .buy-intro__prompt--title {
    top: 118px !important;
    bottom: auto !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    white-space: normal !important;
  }
  .story-body .buy-intro__copyright {
    bottom: 0px !important;
    font-size: 9px !important;
  }
}


/* v76 - slow visible blink for continue prompt */
.story-body .buy-intro__prompt--title {
  animation: buyIntroContinueBlinkV76 4.6s ease-in-out infinite !important;
  opacity: 1 !important;
}
@keyframes buyIntroContinueBlinkV76 {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 1; }
}


/* v77 - mobile-only polish: one-line cart CTA, tighter dialogue, cleaner intro layout */
@media (max-width: 700px) {
  .product-info-panel {
    width: min(94vw, 620px) !important;
    padding: 14px !important;
  }

  .checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
  }

  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box {
    width: calc(100vw - 16px) !important;
    min-height: auto !important;
    margin: 8px auto 0 !important;
    padding: 12px 12px 14px !important;
    box-sizing: border-box !important;
  }

  .story-body .buy-intro__speaker,
  .story-body .dialogue-name {
    font-size: 10px !important;
    padding: 7px 12px !important;
  }

  .story-body .buy-intro__line,
  .story-body .dialogue-text {
    min-height: 0 !important;
    margin: 10px 0 8px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .story-body .buy-intro__meta {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  .story-body .buy-intro__skip,
  .story-body .buy-intro__prompt,
  .story-body .dialogue-skip,
  .story-body .dialogue-hint {
    font-size: 8px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .story-body .buy-intro__skip,
  .story-body .buy-intro__prompt {
    flex: 0 0 calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }

  .story-body .buy-intro__skip {
    text-align: left !important;
  }

  .story-body .buy-intro__prompt {
    margin-left: 0 !important;
    text-align: right !important;
  }

  .story-body .dialogue-box {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name name"
      "text text"
      "skip hint" !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: end !important;
  }

  .story-body .dialogue-name {
    grid-area: name !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .story-body .dialogue-text {
    grid-area: text !important;
  }

  .story-body .dialogue-skip {
    grid-area: skip !important;
    justify-self: start !important;
    align-self: end !important;
  }

  .story-body .dialogue-hint {
    grid-area: hint !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
  }

  .story-body .buy-intro__entry-character--mentor {
    animation: none !important;
    left: 50% !important;
    top: auto !important;
    bottom: 68px !important;
    width: 38px !important;
    height: 62px !important;
    transform: translateX(-50%) !important;
  }

  .story-body .buy-intro__inside-mentor {
    left: 50% !important;
    top: auto !important;
    bottom: 74px !important;
    width: 44px !important;
    height: 72px !important;
    transform: translateX(-50%) !important;
  }

  .story-body .buy-intro__inside-boxes--left {
    left: 34px !important;
    width: 52px !important;
    height: 52px !important;
    bottom: 92px !important;
  }

  .story-body .buy-intro__inside-boxes--right {
    right: 34px !important;
    width: 52px !important;
    height: 52px !important;
    bottom: 92px !important;
  }

  .story-body .buy-intro__inside-boxes--back {
    left: 50% !important;
    width: 70px !important;
    height: 46px !important;
    bottom: 126px !important;
    transform: translateX(-50%) !important;
  }

  .story-body .buy-intro__inside-flashlight {
    left: 50% !important;
    top: 88px !important;
    width: 170px !important;
    height: 108px !important;
    transform: translateX(-50%) !important;
  }
}


/* v78 - dialogue hint cleanup and mobile welcome reflow */
.story-body .buy-intro__meta {
  align-items: flex-end !important;
}
.story-body .buy-intro__meta .buy-intro__skip {
  flex: 1 1 auto !important;
  max-width: calc(100% - 28px) !important;
}
.story-body .buy-intro__dialogue .buy-intro__prompt {
  flex: 0 0 auto !important;
  max-width: none !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: rgba(88,88,88,0.95) !important;
}
@media (max-width: 700px) {
  .story-body .buy-intro__title-copy {
    position: relative !important;
    min-height: 238px !important;
    margin-top: -18px !important;
    padding: 0 10px !important;
    display: block !important;
  }
  .story-body .buy-intro__emerald-title {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100%, 21ch) !important;
    max-width: 21ch !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(17px, 5.1vw, 24px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
  }
  .story-body .buy-intro__prompt--title {
    position: absolute !important;
    left: 50% !important;
    top: 148px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 92% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.08em !important;
    animation: buyIntroContinueBlinkV78 4.8s ease-in-out infinite !important;
  }
  .story-body .buy-intro__copyright {
    position: absolute !important;
    left: 50% !important;
    bottom: -8px !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    margin: 0 !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box {
    width: calc(100vw - 18px) !important;
    padding: 12px 12px 14px !important;
    margin-top: 8px !important;
  }
  .story-body .buy-intro__line,
  .story-body .dialogue-text {
    font-size: 11px !important;
    line-height: 1.30 !important;
    margin: 10px 0 10px !important;
  }
  .story-body .buy-intro__meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .story-body .buy-intro__skip,
  .story-body .dialogue-skip {
    font-size: 7px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .story-body .buy-intro__dialogue .buy-intro__prompt {
    font-size: 12px !important;
  }
  .story-body .dialogue-box {
    row-gap: 6px !important;
  }
  .story-body .dialogue-skip {
    align-self: end !important;
  }
  .story-body .dialogue-hint {
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 0 1px 0 !important;
  }
}
@keyframes buyIntroContinueBlinkV78 {
  0%, 100% { opacity: 0.10; }
  50% { opacity: 1; }
}


/* v79 - mobile dialogue cleanup */
@media (max-width: 700px) {
  .story-body .buy-intro__prompt,
  .story-body .dialogue-hint {
    font-family: "Press Start 2P", "Courier New", monospace !important;
  }

  /* keep a small triangle on every dialogue box */
  .story-body .dialogue-hint {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    display: block !important;
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* keep the speed hint below the text without overlap */
  .story-body .dialogue-box {
    min-height: auto !important;
    padding: 12px 12px 34px !important;
  }
  .story-body .dialogue-text {
    font-size: 10px !important;
    line-height: 1.28 !important;
    margin: 10px 0 18px !important;
  }
  .story-body .dialogue-skip {
    position: absolute !important;
    left: 12px !important;
    bottom: 10px !important;
    right: auto !important;
    max-width: calc(100% - 34px) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* v80 - mobile-only dialogue refinements */
@media (max-width: 700px) {
  /* one consistent, smaller dialogue box on phone */
  .story-body .dialogue-box {
    width: min(100%, 92vw) !important;
    min-height: 0 !important;
    padding: 12px 12px 28px !important;
  }

  .story-body .dialogue-name {
    font-size: 8px !important;
    padding: 6px 12px !important;
    margin-bottom: 8px !important;
  }

  .story-body .dialogue-text {
    font-size: 12px !important;
    line-height: 1.42 !important;
    margin: 10px 0 14px !important;
  }

  /* keep the speed hint smaller than the professor text */
  .story-body .dialogue-skip {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    bottom: 9px !important;
    max-width: calc(100% - 30px) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  /* show the small triangle on every dialogue box */
  .story-body .dialogue-hint {
    position: absolute !important;
    right: 10px !important;
    bottom: 8px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 9px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* final starter-choice dialogue: less tall, more balanced */
  .story-body .story-scene.is-choice .dialogue-box {
    width: min(100%, 92vw) !important;
    min-height: 0 !important;
    padding: 11px 12px 28px !important;
  }

  .story-body .story-scene.is-choice .dialogue-text {
    font-size: 12px !important;
    line-height: 1.36 !important;
    margin: 10px 0 13px !important;
  }

  .story-body .story-scene.is-choice .dialogue-skip {
    font-size: 7px !important;
  }
}


/* v81 - phone-only welcome/title/product refinements */
.story-body .buy-intro__emerald-title .title-line {
  display: block;
}
.story-body .buy-intro__emerald-title .title-line + .title-line {
  margin-top: 0.34em;
}

@media (max-width: 700px) {
  /* two clean title lines on phone */
  .story-body .buy-intro__title-copy {
    min-height: 276px !important;
    margin-top: -8px !important;
    padding: 0 8px !important;
  }
  .story-body .buy-intro__emerald-title {
    top: 18px !important;
    width: 92vw !important;
    max-width: 92vw !important;
    font-size: clamp(13px, 3.8vw, 18px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }
  .story-body .buy-intro__emerald-title .title-line {
    white-space: nowrap !important;
  }
  .story-body .buy-intro__emerald-title .title-line + .title-line {
    margin-top: 0.52em !important;
  }

  /* full continue line, centered between title and copyright */
  .story-body .buy-intro__prompt--title {
    top: 174px !important;
    width: 92vw !important;
    max-width: 92vw !important;
    font-size: clamp(7px, 2.3vw, 9px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
    animation: buyIntroContinueBlinkV78 5.6s ease-in-out infinite !important;
  }

  /* copyright lower */
  .story-body .buy-intro__copyright {
    bottom: 10px !important;
    font-size: 8px !important;
  }

  /* mobile dialogue boxes: tighter text balance */
  .story-body .dialogue-box {
    padding: 12px 12px 32px !important;
  }
  .story-body .dialogue-text {
    font-size: 11px !important;
    line-height: 1.34 !important;
    margin: 10px 0 14px !important;
  }
  .story-body .dialogue-skip {
    font-size: 6px !important;
    bottom: 10px !important;
    max-width: calc(100% - 32px) !important;
  }
  .story-body .dialogue-hint {
    right: 10px !important;
    bottom: 8px !important;
    font-size: 8px !important;
  }
  .story-body .story-scene.is-choice .dialogue-box {
    min-height: 0 !important;
    padding: 11px 12px 31px !important;
  }
  .story-body .story-scene.is-choice .dialogue-text {
    font-size: 11px !important;
    line-height: 1.32 !important;
    margin: 10px 0 14px !important;
  }
  .story-body .story-scene.is-choice .dialogue-skip {
    font-size: 6px !important;
  }

  /* product cards on phone: auto flip 3.27s front / 3.27s back */
  .product-card .product-front {
    animation: fadeUp 0.9s ease-out both, autoFlipFront 6.54s steps(1, end) 0s infinite !important;
  }
  .product-card .product-back {
    animation: autoFlipBack 6.54s steps(1, end) 0s infinite !important;
  }

  /* if client taps, switch manually front/back */
  .product-card.is-manual .product-shirt {
    animation: none !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }
  .product-card.is-manual-front .product-front {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  .product-card.is-manual-front .product-back {
    opacity: 0 !important;
    transform: translateY(6px) scale(0.992) !important;
    pointer-events: none !important;
  }
  .product-card.is-manual-back .product-front {
    opacity: 0 !important;
    transform: translateY(-6px) scale(0.992) !important;
    pointer-events: none !important;
  }
  .product-card.is-manual-back .product-back {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}


/* v82 - mobile-only final polish: clean welcome layout + tap-only shirt flip */
@media (max-width: 700px) {
  html, body {
    overflow-x: hidden !important;
  }
  .story-body {
    overflow-x: hidden !important;
    -webkit-font-smoothing: none !important;
  }
  .story-body .buy-intro,
  .story-body .buy-intro__panel--v64,
  .story-body .buy-intro__welcome-screen {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* stable black area on phone */
  .story-body .buy-intro__title-copy {
    position: relative !important;
    min-height: 400px !important;
    margin-top: -6px !important;
    padding: 0 8px !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* NOTE: emerald-title / prompt--title / copyright positioning for this
     breakpoint now lives in the single "v97 — restore mobile welcome screen"
     block further down (same media query). This avoids two rule sets
     fighting over the same three elements. */

  /* no auto 3.27 flip anymore on phone: tap only */
  .product-card .product-shirt,
  .product-card .product-front,
  .product-card .product-back {
    animation: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }
  .product-card .product-front {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  .product-card .product-back {
    opacity: 0 !important;
    transform: translateY(6px) scale(0.992) !important;
    pointer-events: none !important;
  }
  .product-card.is-manual-front .product-front {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
  .product-card.is-manual-front .product-back {
    opacity: 0 !important;
    transform: translateY(6px) scale(0.992) !important;
    pointer-events: none !important;
  }
  .product-card.is-manual-back .product-front {
    opacity: 0 !important;
    transform: translateY(-6px) scale(0.992) !important;
    pointer-events: none !important;
  }
  .product-card.is-manual-back .product-back {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
}
@keyframes buyIntroContinueBlinkV82 {
  0%, 100% { opacity: .16; }
  50% { opacity: 1; }
}


/* v83 final polish: stability, product states, SEO/404 visual layer */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }
a, button { touch-action: manipulation; }
.product-card { touch-action: manipulation; }
@media (max-width: 700px) {
  body { overscroll-behavior-x: none; }
  .page, .product-page, .story-body, .product-file-body { overflow-x: hidden !important; }
  .product-shirt, .shirt-face, .intro-logo, .hero-logo { transform: translateZ(0); will-change: opacity, transform; }
}
.drop-locked-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background: rgba(0,0,0,.42);
}
.drop-locked-modal.is-visible { opacity: 1; }
.drop-locked-card {
  width: min(92vw, 520px);
  padding: 24px 22px;
  border: 2px solid #fbaf17;
  background: #050505;
  color: #fbaf17;
  text-align: center;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  box-shadow: 0 0 0 4px #000, 0 0 34px rgba(251,175,23,.22);
}
.drop-locked-card strong { display:block; font-size: clamp(18px,4vw,34px); margin-bottom: 12px; }
.drop-locked-card span { display:block; color: #fff; font-size: clamp(9px,2.1vw,14px); letter-spacing: .1em; }
.not-found-body {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  overflow: hidden;
}
.not-found-body::before {
  content:"";
  position: fixed;
  inset: 0;
  opacity: .18;
  background-image: url('assets/monogram-dark.png');
  background-size: 130px auto;
}
.not-found-page {
  position: relative;
  z-index: 1;
  width: min(90vw, 720px);
  text-align: center;
  padding: 42px 20px;
}
.not-found-logo {
  width: min(54vw, 260px);
  margin: 0 auto 26px;
  display: block;
  filter: drop-shadow(0 0 24px rgba(251,175,23,.28));
}
.not-found-page h1 { font-size: clamp(20px, 5vw, 42px); line-height: 1.15; margin: 0 0 18px; }
.not-found-page p { color: rgba(255,255,255,.72); font-size: clamp(10px, 2vw, 15px); line-height: 1.8; }
.not-found-page a {
  display: inline-block;
  margin-top: 18px;
  color: #39ff73;
  text-decoration: none;
  border: 1px solid rgba(57,255,115,.65);
  padding: 12px 16px;
}
.checkout-button { cursor: pointer; }
@media (max-width: 700px) {
  .drop-locked-card { padding: 20px 14px; }
  .drop-locked-card strong { font-size: 18px; }
  .drop-locked-card span { font-size: 9px; }
}


/* v86 final QA polish: mobile stability, brand coherence, policy, premium controls */
:root {
  --scars-black: #000000;
  --scars-white: #f4f4f4;
  --scars-gold: #fbaf17;
}
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
img, video, canvas, svg { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
.policy-link {
  position: absolute;
  right: 5.2vw;
  bottom: calc(8.5vh + 34px);
  z-index: 4;
  color: rgba(255,255,255,.58);
  font: 700 clamp(9px, .9vw, 12px)/1 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .18s ease, color .18s ease;
}
.policy-link:hover { color: var(--scars-gold); opacity: 1; }
.policy-body {
  min-height: 100svh;
  background: #000;
  color: #fff;
  font-family: "Courier New", monospace;
  overflow-x: hidden;
}
.policy-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 18px 36px;
  background-image: url('assets/monogram-dark.png');
  background-size: 125px auto;
}
.policy-card {
  width: min(960px, 94vw);
  padding: clamp(22px, 4vw, 44px);
  background: rgba(0,0,0,.86);
  border: 1px solid rgba(251,175,23,.44);
  box-shadow: 0 0 38px rgba(251,175,23,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}
.policy-card h1 {
  margin: 10px 0 24px;
  color: var(--scars-gold);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: clamp(22px, 4vw, 42px);
  line-height: 1.12;
}
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.policy-grid h2 { color: #fff; margin-bottom: 12px; font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 14px; }
.policy-grid p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.not-found-page p span { color: rgba(255,255,255,.62); }
.drop-locked-card strong { color: var(--scars-gold); }
.drop-locked-card span { line-height: 1.55; }
@media (max-width: 700px) {
  .policy-link { right: 14px; bottom: 72px; font-size: 8px; opacity: .62; }
  .policy-grid { grid-template-columns: 1fr; gap: 18px; }
  .policy-card { padding: 20px 16px; }
  .policy-grid p { font-size: 13px; line-height: 1.55; }
  .page { min-height: 100svh; transform: translateZ(0); contain: layout paint; }
  .product-page { overflow: hidden !important; touch-action: pan-y; }
  .product-card { cursor: pointer; user-select: none; -webkit-user-select: none; }
  .product-card .product-shirt { will-change: opacity, transform; }
  .story-body .buy-intro__title-copy { contain: layout paint; }
  .story-body .buy-intro__prompt--title { animation-duration: 5.8s !important; }
  .story-body .buy-intro__copyright { bottom: 22px !important; }
  .checkout-button { white-space: nowrap !important; }
}


/* v87 - final placement for drop policy + animated policy monogram lanes */
.policy-link {
  left: max(14px, 2.2vw) !important;
  right: auto !important;
  bottom: max(10px, 1.8vh) !important;
  position: absolute !important;
  z-index: 40 !important;
  opacity: .72 !important;
}
.policy-link:hover {
  opacity: 1 !important;
}
@media (max-width: 700px) {
  .policy-link {
    left: 12px !important;
    right: auto !important;
    bottom: 8px !important;
    font-size: 8px !important;
  }
}

/* Drop policy page: alternating rows of moving monograms */
.policy-page {
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
  background-image: none !important;
  isolation: isolate !important;
}
.policy-page::before,
.policy-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: url('assets/monogram-dark.png') !important;
  background-repeat: repeat !important;
  background-size: 118px auto !important;
  opacity: .18 !important;
  will-change: background-position !important;
}
.policy-page::before {
  -webkit-mask-image: repeating-linear-gradient(
    180deg,
    #000 0 72px,
    transparent 72px 144px
  ) !important;
  mask-image: repeating-linear-gradient(
    180deg,
    #000 0 72px,
    transparent 72px 144px
  ) !important;
  animation: policyMonogramRight 46s linear infinite !important;
}
.policy-page::after {
  -webkit-mask-image: repeating-linear-gradient(
    180deg,
    transparent 0 72px,
    #000 72px 144px
  ) !important;
  mask-image: repeating-linear-gradient(
    180deg,
    transparent 0 72px,
    #000 72px 144px
  ) !important;
  animation: policyMonogramLeft 52s linear infinite !important;
  opacity: .14 !important;
}
.policy-card,
.policy-page .story-back {
  position: relative !important;
  z-index: 2 !important;
}
@keyframes policyMonogramRight {
  from { background-position: 0 0; }
  to { background-position: 360px 0; }
}
@keyframes policyMonogramLeft {
  from { background-position: 0 0; }
  to { background-position: -360px 0; }
}
@media (max-width: 700px) {
  .policy-page::before,
  .policy-page::after {
    background-size: 92px auto !important;
    opacity: .16 !important;
  }
  .policy-page::before {
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 58px, transparent 58px 116px) !important;
    mask-image: repeating-linear-gradient(180deg, #000 0 58px, transparent 58px 116px) !important;
  }
  .policy-page::after {
    -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 58px, #000 58px 116px) !important;
    mask-image: repeating-linear-gradient(180deg, transparent 0 58px, #000 58px 116px) !important;
  }
}


/* v88 - drop policy only after starter selection / product file */
.page-home .policy-link,
.policy-link { display: none !important; }
.product-policy-link {
  position: fixed;
  right: max(18px, 2.4vw);
  bottom: max(14px, 2vh);
  z-index: 1200;
  color: rgba(255,255,255,.62);
  font: 700 clamp(9px, .85vw, 12px)/1 "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
.product-policy-link:hover {
  color: var(--scars-gold, #fbaf17);
  opacity: 1;
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .product-policy-link {
    right: 12px;
    bottom: 10px;
    font-size: 8px;
    opacity: .72;
  }
}


/* v89 - requested mobile + drop policy return refinements */
@media (max-width: 700px) {
  /* TOUCH HERE: more air between words/letters */
  .touch-box {
    letter-spacing: 0.14em !important;
    word-spacing: 0.32em !important;
  }

  /* Main page shirts larger on phone */
  .page.product-page .product-card,
  .product-card {
    width: min(94vw, 620px) !important;
    max-height: 80svh !important;
  }
  .page.product-page .product-card .product-shirt,
  .product-card .product-shirt {
    max-height: 80svh !important;
  }

  /* Keep BUY card balanced after larger shirts */
  .page.product-page .buy-card,
  .buy-card {
    transform: scale(0.96) !important;
    transform-origin: center !important;
  }
}

/* Drop policy return link: it now returns to the selected starter/product file */
.policy-page .story-back {
  text-transform: lowercase !important;
}


/* v90 - ergonomic polish: guides, clearer taps, sticky mobile CTA, final footer */
:root {
  --scars-neon: #57ff7a;
  --scars-gold: #fbaf17;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
a, button, .product-card, .starter-card, .shirt-viewer { cursor: pointer; }
a:focus-visible, button:focus-visible, .product-card:focus-visible, .starter-card:focus-visible {
  outline: 2px solid var(--scars-neon) !important;
  outline-offset: 4px !important;
}
.site-guide {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1150;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 10px 14px;
  border: 1px solid rgba(87,255,122,.26);
  background: rgba(0,0,0,.68);
  color: rgba(255,255,255,.80);
  font: 700 10px/1.3 "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
  backdrop-filter: blur(4px);
}
body.show-intro .site-guide,
body.shop-direct .site-guide { opacity: .82; transform: translateX(-50%) translateY(0); }
.buy-card, .checkout-button, .viewer-mode-button, .lang-button, .story-back, .product-policy-link {
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease !important;
}
.buy-card:hover, .buy-card:focus-visible,
.checkout-button:hover, .checkout-button:focus-visible,
.viewer-mode-button:hover, .viewer-mode-button:focus-visible,
.lang-button:hover, .lang-button:focus-visible,
.story-back:hover, .story-back:focus-visible,
.product-policy-link:hover, .product-policy-link:focus-visible {
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}
.buy-card::before {
  animation: buyPulseV90 2.6s ease-in-out infinite;
}
@keyframes buyPulseV90 {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.product-card { position: relative !important; }
.tap-flip-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.70);
  color: rgba(255,255,255,.92);
  font: 700 8px/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.product-card.is-manual-back .tap-flip-hint { color: var(--scars-gold); }
.site-footer,
.product-mini-footer,
.policy-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 22px 22px;
  background: #000;
  color: rgba(255,255,255,.46);
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-footer a,
.product-mini-footer a,
.policy-footer a { color: rgba(87,255,122,.58); text-decoration: none; }
.story-route-guide {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 1300;
  width: max-content;
  max-width: calc(100vw - 260px);
  padding: 8px 12px;
  border: 1px solid rgba(87,255,122,.20);
  background: rgba(0,0,0,.46);
  color: rgba(255,255,255,.64);
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
.starter-choice-guide {
  display: none;
  color: var(--scars-neon);
  text-align: center;
  font: 700 clamp(10px,1vw,14px)/1.2 "Press Start 2P", "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 auto 16px;
  text-shadow: 0 0 16px rgba(87,255,122,.22);
}
.story-scene.is-choice .starter-choice-guide { display: block; }
.starter-action-label {
  display: block;
  margin-top: 8px;
  color: rgba(87,255,122,.72);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-scene.is-choice .starter-card {
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 22px rgba(87,255,122,.055) !important;
}
.story-scene.is-choice .starter-card:hover,
.story-scene.is-choice .starter-card:focus-visible {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 0 0 2px rgba(87,255,122,.28), 0 0 28px rgba(87,255,122,.16) !important;
}
.product-route-hint,
.policy-route-hint {
  margin: 0 0 14px;
  color: rgba(87,255,122,.70);
  font: 700 10px/1.3 "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.product-info-panel { position: relative; }
.drop-locked-card {
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.drop-locked-modal.is-visible .drop-locked-card {
  transform: translateY(0) scale(1);
  animation: lockedPulseV90 .28s steps(2,end) 2;
}
@keyframes lockedPulseV90 {
  0%,100% { box-shadow: 0 0 0 4px #000, 0 0 34px rgba(251,175,23,.22); }
  50% { box-shadow: 0 0 0 4px #fbaf17, 0 0 46px rgba(251,175,23,.34); }
}
@media (max-width: 700px) {
  body { overscroll-behavior-y: contain; }
  .site-guide {
    bottom: 12px;
    width: calc(100vw - 22px);
    padding: 9px 10px;
    font-size: 7px;
    letter-spacing: .08em;
  }
  .site-footer,
  .product-mini-footer,
  .policy-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 14px 18px;
    font-size: 8px;
  }
  .page.product-page { min-height: 100svh !important; padding-bottom: 92px !important; }
  .tap-flip-hint { display: block; bottom: 3.6%; font-size: 7px; padding: 6px 8px; }
  .product-card:active, .starter-card:active, .buy-card:active, .checkout-button:active { transform: scale(.985) !important; }
  .buy-card { min-width: 132px !important; min-height: 74px !important; }
  .story-route-guide {
    top: auto;
    bottom: 14px;
    max-width: calc(100vw - 28px);
    font-size: 7px;
    letter-spacing: .08em;
    opacity: .72;
  }
  .story-scene.is-choice .story-route-guide { opacity: 0; }
  .starter-choice-guide {
    display: block;
    font-size: 9px;
    margin-bottom: 12px;
  }
  .starter-row { gap: 10px !important; }
  .starter-card { min-height: 150px !important; padding-bottom: 12px !important; }
  .starter-action-label { font-size: 7px; }
  .product-file-layout { padding-bottom: 118px !important; }
  .product-info-panel { padding-bottom: 92px !important; }
  .product-route-hint { font-size: 8px; margin-bottom: 10px; }
  .checkout-button {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 48px !important;
    z-index: 1502 !important;
    width: auto !important;
    min-height: 54px !important;
    padding: 0 10px !important;
    font-size: clamp(10px,2.55vw,12px) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 24px rgba(251,175,23,.20) !important;
  }
  .product-policy-link { bottom: 14px !important; right: 14px !important; }
  .viewer-mode-button, .lang-button, .story-back, .product-policy-link { min-height: 38px; }
  .product-file-page { padding-bottom: 118px !important; }
  .policy-route-hint { font-size: 8px; margin: 56px 14px 14px; }
  .drop-locked-card { width: calc(100vw - 28px); padding: 20px 14px; }
}


/* v91 - ergonomie clean: guide minimal + no progress hint + mobile tap hint */
.site-guide {
  width: auto !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
  letter-spacing: .12em !important;
}
.story-route-guide {
  display: none !important;
}
@media (max-width: 700px) {
  .site-guide {
    bottom: 12px !important;
    font-size: 8px !important;
    padding: 8px 10px !important;
  }
  .tap-flip-hint {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -26px !important;
    transform: translateX(-50%) !important;
    z-index: 7 !important;
    width: max-content !important;
    max-width: 82vw !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(87,255,122,.24) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.72) !important;
    color: rgba(255,255,255,.82) !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    pointer-events: none !important;
  }
}


/* v92 - starter choice cleanup + stronger hover + no-scroll product file */
.starter-action-label {
  display: none !important;
}
.story-scene.is-choice .starter-card {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 8px 8px !important;
  gap: 12px !important;
}
.story-scene.is-choice .starter-card:hover,
.story-scene.is-choice .starter-card:focus-visible {
  transform: translateY(-8px) scale(1.045) !important;
  box-shadow: none !important;
}
.story-scene.is-choice .starter-card .capsule,
.story-scene.is-choice .starter-card .starter-preview {
  transition: transform .22s ease, filter .22s ease, opacity .22s ease !important;
}
.story-scene.is-choice .starter-card:hover .capsule,
.story-scene.is-choice .starter-card:focus-visible .capsule {
  transform: translateY(-8px) scale(1.14) !important;
  filter: brightness(1.08) saturate(1.04) !important;
}
.story-scene.is-choice .starter-card:hover .starter-preview,
.story-scene.is-choice .starter-card:focus-visible .starter-preview,
.story-scene.is-choice .starter-card.is-selected .starter-preview {
  opacity: 1 !important;
  transform: translateY(-4px) scale(1.13) !important;
  filter: drop-shadow(0 12px 18px rgba(255,255,255,.08)) !important;
}
.story-scene.is-choice .starter-row {
  align-items: start !important;
}
.starter-preview {
  max-width: min(27vw, 232px) !important;
  max-height: 228px !important;
}
.starter-card-black::before,
.story-scene.is-choice .starter-card-black::before {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Product file: keep everything inside the viewport on desktop */
.product-file-body,
.product-file-page {
  overflow-x: hidden !important;
}
@media (min-width: 701px) {
  html, body.product-file-body {
    height: 100svh !important;
    overflow: hidden !important;
  }
  .product-file-page {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 48px 3.2vw 56px !important;
    overflow: hidden !important;
    align-content: center !important;
  }
  .product-file-layout {
    width: min(1200px, 94vw) !important;
    gap: clamp(18px, 2.4vw, 36px) !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
  .viewer-wrap {
    gap: 10px !important;
  }
  .shirt-viewer {
    width: min(48vw, 520px) !important;
    height: min(55vh, 500px) !important;
  }
  .product-info-panel {
    max-width: 520px !important;
    padding: 18px 22px 18px !important;
  }
  .product-route-hint {
    margin-bottom: 10px !important;
    font-size: 9px !important;
  }
  .product-file-tag {
    margin-bottom: 10px !important;
  }
  .product-info-panel h1 {
    font-size: clamp(32px, 4.2vw, 60px) !important;
    margin-bottom: 12px !important;
  }
  .product-description {
    font-size: 11px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .product-specs {
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .product-specs div {
    padding-bottom: 6px !important;
  }
  .checkout-button {
    min-height: 46px !important;
    font-size: 16px !important;
  }
  .product-mini-footer {
    position: fixed !important;
    left: 16px !important;
    bottom: 12px !important;
    z-index: 1200 !important;
    padding: 0 !important;
    background: transparent !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
}

/* Product file mobile: bigger shirt, tighter layout, no useless scroll */
@media (max-width: 700px) {
  html, body.product-file-body {
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
  }
  .product-file-page {
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    padding: 56px 10px 98px !important;
  }
  .product-file-layout {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
    padding-bottom: 0 !important;
  }
  .viewer-wrap {
    gap: 6px !important;
  }
  .viewer-hint {
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }
  .viewer-mode-switch {
    gap: 6px !important;
    margin-bottom: 0 !important;
  }
  .viewer-mode-button {
    min-width: 74px !important;
    min-height: 30px !important;
    font-size: 8px !important;
  }
  .shirt-viewer {
    width: min(95vw, 372px) !important;
    height: min(34vh, 270px) !important;
    touch-action: pan-y !important;
  }
  .product-info-panel {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 12px 74px !important;
  }
  .product-route-hint {
    margin-bottom: 8px !important;
    font-size: 7px !important;
  }
  .product-file-tag {
    font-size: 8px !important;
    margin-bottom: 8px !important;
  }
  .product-info-panel h1 {
    font-size: clamp(28px, 10.5vw, 46px) !important;
    line-height: .92 !important;
    margin-bottom: 10px !important;
  }
  .product-description {
    font-size: 10px !important;
    line-height: 1.42 !important;
    margin-bottom: 12px !important;
  }
  .product-specs {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .product-specs div {
    padding-bottom: 6px !important;
  }
  .product-specs dt,
  .product-specs dd {
    font-size: 9px !important;
  }
  .checkout-button {
    bottom: 44px !important;
    min-height: 46px !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    letter-spacing: .04em !important;
  }
  .product-policy-link {
    bottom: 10px !important;
    right: 10px !important;
  }
  .product-mini-footer {
    position: fixed !important;
    left: 10px !important;
    bottom: 12px !important;
    z-index: 1200 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }
  .story-back {
    top: 8px !important;
    left: 8px !important;
    font-size: 8px !important;
  }
  .product-language-switch {
    top: 8px !important;
    right: 8px !important;
  }
  .starter-card {
    min-height: 138px !important;
  }
  .starter-preview {
    max-width: min(29vw, 126px) !important;
    max-height: 130px !important;
  }
  .story-scene.is-choice .starter-card {
    padding: 0 2px 8px !important;
    gap: 10px !important;
  }
  .story-scene.is-choice .starter-card:hover .capsule,
  .story-scene.is-choice .starter-card:focus-visible .capsule,
  .story-scene.is-choice .starter-card:active .capsule {
    transform: translateY(-5px) scale(1.08) !important;
  }
  .story-scene.is-choice .starter-card:hover .starter-preview,
  .story-scene.is-choice .starter-card:focus-visible .starter-preview,
  .story-scene.is-choice .starter-card:active .starter-preview {
    transform: translateY(-2px) scale(1.08) !important;
  }
}


/* v93 - SCROLL FIX / stable final ergonomics */
html,
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  max-width: 100% !important;
}

/* never lock vertical scroll on these pages */
body.product-file-body,
body.story-body,
body.policy-body,
body.archive-body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100svh !important;
  overscroll-behavior-y: auto !important;
}

.product-file-page,
.story-page,
.policy-page,
.archive-page {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100svh !important;
}

/* Product page: keep the clean layout, but allow normal scroll if the screen is small */
.product-file-page {
  display: grid !important;
  place-items: center !important;
  padding: clamp(58px, 6vw, 86px) 4vw clamp(86px, 8vw, 118px) !important;
}

.product-file-layout {
  width: min(1180px, 94vw) !important;
  align-items: center !important;
}

@media (min-width: 701px) {
  html,
  body.product-file-body {
    overflow-y: auto !important;
    height: auto !important;
  }
  .product-file-page {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100svh !important;
    padding-top: 58px !important;
    padding-bottom: 92px !important;
  }
  .product-file-layout {
    gap: clamp(22px, 3vw, 44px) !important;
  }
  .shirt-viewer {
    width: min(50vw, 560px) !important;
    height: min(64vh, 620px) !important;
  }
  .product-info-panel {
    max-width: 540px !important;
  }
}

@media (max-width: 700px) {
  html,
  body.product-file-body,
  body.story-body,
  body.policy-body,
  body.archive-body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .product-file-page {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100svh !important;
    display: block !important;
    padding: 58px 10px 128px !important;
  }

  .product-file-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .viewer-wrap {
    min-height: auto !important;
    gap: 6px !important;
  }

  .shirt-viewer {
    width: min(94vw, 390px) !important;
    height: min(42vh, 340px) !important;
    min-height: 260px !important;
    touch-action: pan-y !important;
  }

  .product-info-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
    margin: 0 auto 18px !important;
    padding: 14px 12px 88px !important;
  }

  .product-info-panel h1 {
    font-size: clamp(30px, 10vw, 48px) !important;
    line-height: .94 !important;
  }

  .checkout-button {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 48px !important;
    z-index: 1502 !important;
  }

  .product-policy-link {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 1503 !important;
  }

  .product-mini-footer {
    position: fixed !important;
    left: 12px !important;
    bottom: 14px !important;
    z-index: 1501 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* story page also scrolls normally when browser chrome changes size */
  .story-page,
  .story-scene,
  .buy-intro {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: visible !important;
  }
}


/* v94 - mobile ergonomics refinements */
@media (max-width: 700px) {
  /* stronger mentor / dialogue readability on phone */
  .story-body .buy-intro__line {
    font-weight: 700 !important;
    color: rgba(255,255,255,0.95) !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
  }
  .story-body .dialogue-text {
    font-weight: 700 !important;
    color: #2a2a2a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.46 !important;
  }
  .story-body .dialogue-name {
    font-weight: 700 !important;
  }
  .story-body .dialogue-skip,
  .story-body .buy-intro__skip {
    font-size: 6px !important;
    letter-spacing: 0.06em !important;
  }

  /* welcome title locked on two lines, centered, with more spacing */
  .story-body .buy-intro__title-copy {
    min-height: 412px !important;
  }
  .story-body .buy-intro__emerald-title {
    top: 20px !important;
    font-size: clamp(11px, 2.95vw, 13px) !important;
    line-height: 1.02 !important;
  }
  .story-body .buy-intro__emerald-title .title-line + .title-line {
    margin-top: 0.9em !important;
  }
  .story-body .buy-intro__prompt--title {
    top: 205px !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    font-size: clamp(6px, 1.9vw, 7.5px) !important;
    letter-spacing: 0.015em !important;
  }
  .story-body .buy-intro__copyright {
    bottom: 18px !important;
  }

  /* starter choice: finger-glide highlight on mobile */
  .story-scene.is-choice .starter-row {
    gap: 8px !important;
    align-items: start !important;
  }
  .story-scene.is-choice .starter-card {
    min-height: 152px !important;
    padding: 0 2px 8px !important;
    gap: 8px !important;
    transition: transform 0.18s ease, filter 0.18s ease !important;
    transform-origin: center top !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .story-scene.is-choice .starter-card .capsule,
  .story-scene.is-choice .starter-card .starter-preview {
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover,
  .story-scene.is-choice .starter-card:active {
    transform: translateY(-6px) scale(1.035) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .capsule,
  .story-scene.is-choice .starter-card:active .capsule {
    transform: translateY(-7px) scale(1.15) !important;
    filter: brightness(1.1) saturate(1.06) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .starter-preview,
  .story-scene.is-choice .starter-card:active .starter-preview {
    opacity: 1 !important;
    transform: translateY(-4px) scale(1.14) !important;
    filter: drop-shadow(0 12px 20px rgba(255,255,255,.10)) !important;
  }

  /* product file on phone: simpler / cleaner layout */
  html, body.product-file-body {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .product-file-page {
    display: block !important;
    min-height: 100svh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 56px 10px 76px !important;
  }
  .product-file-layout {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding-bottom: 0 !important;
  }
  .viewer-wrap {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 0 auto !important;
  }
  .viewer-mode-switch {
    justify-content: center !important;
    gap: 6px !important;
  }
  .viewer-mode-button {
    min-width: 72px !important;
    min-height: 30px !important;
    font-size: 8px !important;
  }
  .shirt-viewer {
    width: min(94vw, 382px) !important;
    height: min(38vh, 300px) !important;
    margin: 0 auto !important;
    touch-action: pan-y !important;
  }
  .shirt-face {
    padding: 8px !important;
  }
  .product-info-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto 18px !important;
    padding: 14px 12px 18px !important;
  }
  .product-route-hint {
    margin-bottom: 8px !important;
    font-size: 8px !important;
  }
  .product-file-tag {
    margin-bottom: 8px !important;
  }
  .product-info-panel h1 {
    font-size: clamp(30px, 9.4vw, 44px) !important;
    line-height: 0.94 !important;
    margin-bottom: 10px !important;
  }
  .product-description {
    font-size: 10px !important;
    line-height: 1.44 !important;
    margin-bottom: 12px !important;
  }
  .product-specs {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .product-specs dt,
  .product-specs dd {
    font-size: 9px !important;
  }
  .checkout-button {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 14px !important;
    min-height: 48px !important;
    padding: 10px 8px !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 10px 18px rgba(0,0,0,.18) !important;
  }
  .product-mini-footer,
  .product-policy-link {
    position: fixed !important;
    bottom: 10px !important;
  }
  .product-mini-footer {
    left: 10px !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    z-index: 1501 !important;
  }
  .product-policy-link {
    right: 10px !important;
    font-size: 8px !important;
    z-index: 1503 !important;
  }
  .story-back {
    top: 8px !important;
    left: 8px !important;
    font-size: 8px !important;
  }
  .product-language-switch {
    top: 8px !important;
    right: 8px !important;
  }
}


/* v95 - mobile fixes and ergonomics */
@media (max-width: 700px) {
  .story-body .dialogue-text,
  .story-body .buy-intro__line {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    -webkit-font-smoothing: none !important;
    text-rendering: optimizeSpeed !important;
  }
  .story-body .dialogue-text {
    color: #1f1f1f !important;
    line-height: 1.46 !important;
  }

  .story-scene.is-choice .starter-row {
    gap: 8px !important;
    align-items: start !important;
    touch-action: pan-y !important;
  }
  .story-scene.is-choice .starter-card {
    position: relative !important;
    min-height: 156px !important;
    transform-origin: center top !important;
    transition: transform 0.16s ease, opacity 0.16s ease, filter 0.16s ease !important;
  }
  .story-scene.is-choice .starter-card .capsule,
  .story-scene.is-choice .starter-card .starter-preview,
  .story-scene.is-choice .starter-card .starter-name {
    transition: transform 0.16s ease, opacity 0.16s ease, filter 0.16s ease !important;
  }
  .story-scene.is-choice .starter-row.has-touch-hover .starter-card:not(.is-touch-hover) {
    opacity: .68 !important;
    transform: scale(.93) translateY(8px) !important;
    filter: saturate(.82) brightness(.92) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover,
  .story-scene.is-choice .starter-card:active {
    opacity: 1 !important;
    z-index: 5 !important;
    transform: scale(1.08) translateY(-10px) !important;
    filter: brightness(1.08) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .capsule,
  .story-scene.is-choice .starter-card:active .capsule {
    transform: translateY(-8px) scale(1.18) !important;
    filter: brightness(1.16) saturate(1.05) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .starter-preview,
  .story-scene.is-choice .starter-card:active .starter-preview {
    opacity: 1 !important;
    transform: translateY(-6px) scale(1.16) !important;
    filter: drop-shadow(0 14px 20px rgba(255,255,255,.10)) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .starter-name,
  .story-scene.is-choice .starter-card:active .starter-name {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
  }

  .product-file-page {
    display: block !important;
    min-height: 100svh !important;
    padding: 54px 10px 92px !important;
  }
  .product-file-layout {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .viewer-wrap {
    width: 100% !important;
    gap: 8px !important;
  }
  .viewer-hint {
    position: static !important;
    transform: none !important;
    order: 0 !important;
    margin: 0 auto 2px !important;
    font-size: 8px !important;
    text-align: center !important;
  }
  .viewer-mode-switch {
    order: 1 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
  }
  .viewer-mode-button {
    min-width: 76px !important;
    min-height: 32px !important;
    font-size: 8px !important;
  }
  .shirt-viewer {
    order: 2 !important;
    width: min(92vw, 360px) !important;
    height: min(38vh, 280px) !important;
    margin: 0 auto !important;
    touch-action: pan-y !important;
  }
  .product-info-panel {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 12px 16px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
  }
  .product-route-hint {
    margin-bottom: 8px !important;
    font-size: 8px !important;
  }
  .product-file-tag {
    font-size: 9px !important;
    margin-bottom: 8px !important;
  }
  .product-info-panel h1 {
    font-size: clamp(34px, 11vw, 50px) !important;
    line-height: .94 !important;
    margin-bottom: 10px !important;
  }
  .product-description {
    font-size: 10px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .product-specs {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .product-specs dt,
  .product-specs dd {
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }
  .checkout-button {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 46px !important;
    margin-top: 12px !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
  }
  .story-back {
    top: 8px !important;
    left: 8px !important;
    font-size: 8px !important;
    z-index: 20 !important;
  }
  .product-language-switch {
    top: 8px !important;
    right: 8px !important;
    z-index: 20 !important;
  }
  .product-mini-footer,
  .product-policy-link {
    position: absolute !important;
    bottom: 14px !important;
    z-index: 5 !important;
  }
  .product-mini-footer {
    left: 10px !important;
    right: auto !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
  .product-policy-link {
    right: 10px !important;
    left: auto !important;
    top: auto !important;
    font-size: 8px !important;
  }
}


/* v96 - mobile premium polish + product stability */
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  background: linear-gradient(180deg, rgba(235,235,235,0.96), rgba(208,208,208,0.97)) !important;
  color: #121212 !important;
  border: 1px solid rgba(16,16,16,0.72) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
.story-body .buy-intro__speaker,
.story-body .dialogue-name {
  color: #111 !important;
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(17,17,17,0.18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.story-body .buy-intro__line,
.story-body .dialogue-text {
  color: #101010 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  position: relative !important;
  padding-bottom: 30px !important;
}
.story-body .buy-intro__meta {
  margin-top: 8px !important;
}
.story-body .buy-intro__skip,
.story-body .dialogue-skip {
  color: rgba(16,16,16,0.82) !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.story-body .dialogue-skip {
  position: absolute !important;
  left: 16px !important;
  bottom: 10px !important;
}
.story-body .dialogue-hint {
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  color: #111 !important;
  opacity: 0.88 !important;
}
.story-body .buy-intro__meta .buy-intro__skip {
  position: absolute !important;
  left: 16px !important;
  bottom: 10px !important;
}
.story-body .buy-intro__dialogue .buy-intro__prompt {
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  color: #111 !important;
  opacity: 0.88 !important;
}

.shirt-face-front {
  transform: translateZ(0.5px) !important;
}
.shirt-face-back {
  transform: rotateY(180deg) translateZ(0.5px) !important;
}
.shirt-viewer {
  perspective: 1450px !important;
}
.shirt-360 {
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
.shirt-face {
  will-change: transform, opacity !important;
}

@media (max-width: 700px) {
  .story-body,
  .story-body .story-scene,
  .story-body .buy-intro,
  .story-body .buy-intro__panel {
    min-height: 100svh !important;
  }
  .story-body .buy-intro__welcome-screen {
    min-height: calc(100svh - 18px) !important;
    padding-bottom: 58px !important;
    overflow: hidden !important;
  }
  .story-body .buy-intro__title-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: calc(100svh - 22px) !important;
    padding: 18px 12px 26px !important;
    box-sizing: border-box !important;
  }
  .story-body .buy-intro__series {
    display: none !important;
  }
  .story-body .buy-intro__emerald-title {
    margin: 20px auto 0 !important;
    max-width: 15ch !important;
    text-align: center !important;
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.05 !important;
  }
  .story-body .buy-intro__emerald-title .title-line {
    display: block !important;
  }
  .story-body .buy-intro__emerald-title .title-line + .title-line {
    margin-top: 7px !important;
  }
  .story-body .buy-intro__prompt--title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 280px) !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
  }
  .story-body .buy-intro__copyright {
    position: absolute !important;
    left: 50% !important;
    bottom: 34px !important;
    transform: translateX(-50%) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .story-body .buy-intro__dialogue,
  .story-body .dialogue-box {
    width: min(100%, 94vw) !important;
    min-height: 120px !important;
    padding: 14px 14px 30px !important;
    border-radius: 16px !important;
  }
  .story-body .buy-intro__line,
  .story-body .dialogue-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .story-body .dialogue-text {
    padding-right: 6px !important;
  }
  .story-body .dialogue-name,
  .story-body .buy-intro__speaker {
    font-size: 10px !important;
    padding: 5px 10px !important;
    margin-bottom: 8px !important;
  }
  .story-body .dialogue-skip,
  .story-body .buy-intro__skip {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }
  .story-body .dialogue-hint,
  .story-body .buy-intro__dialogue .buy-intro__prompt {
    font-size: 11px !important;
  }
  .story-body .story-scene.is-choice .dialogue-box {
    min-height: 108px !important;
    padding: 12px 12px 28px !important;
  }
  .story-body .story-scene.is-choice .dialogue-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .story-scene.is-choice .starter-row {
    touch-action: pan-y !important;
  }
  .story-scene.is-choice .starter-card,
  .story-scene.is-choice .starter-card .capsule,
  .story-scene.is-choice .starter-card .starter-preview,
  .story-scene.is-choice .starter-card .starter-name {
    will-change: transform, opacity, filter !important;
  }
  .story-scene.is-choice .starter-row.has-touch-hover .starter-card:not(.is-touch-hover) {
    opacity: .62 !important;
    transform: scale(.91) translateY(10px) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover,
  .story-scene.is-choice .starter-card:active {
    transform: scale(1.1) translateY(-12px) !important;
  }
  .story-scene.is-choice .starter-card.is-touch-hover .starter-preview,
  .story-scene.is-choice .starter-card:active .starter-preview {
    transform: translateY(-8px) scale(1.18) !important;
  }

  .product-file-page {
    padding-bottom: 96px !important;
  }
  .product-file-layout {
    gap: 12px !important;
  }
  .viewer-wrap {
    gap: 6px !important;
  }
  .shirt-viewer {
    width: min(92vw, 360px) !important;
    height: min(36vh, 270px) !important;
    touch-action: none !important;
  }
  .product-info-panel {
    padding: 12px 12px 14px !important;
    border-radius: 16px !important;
  }
  .product-file-tag {
    margin-bottom: 6px !important;
  }
  .product-info-panel h1 {
    font-size: clamp(30px, 9.8vw, 42px) !important;
    margin-bottom: 8px !important;
  }
  .product-description {
    font-size: 10px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
  }
  .product-specs {
    margin-bottom: 10px !important;
  }
  .checkout-button {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 8 !important;
    min-height: 44px !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22) !important;
  }
  .product-policy-link,
  .product-mini-footer {
    position: fixed !important;
    bottom: 8px !important;
    z-index: 30 !important;
  }
  .product-mini-footer {
    left: 10px !important;
    font-size: 7px !important;
  }
  .product-policy-link {
    right: 10px !important;
    top: auto !important;
    font-size: 8px !important;
  }
}


/* v97 - restore mobile welcome screen + align product footer */
@media (max-width: 700px) {
  /* Welcome screen restored close to previous version: no weird flex layout */
  .story-body .buy-intro,
  .story-body .buy-intro__panel,
  .story-body .buy-intro__panel--v64,
  .story-body .buy-intro__welcome-screen {
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
  }

  .story-body .buy-intro__title-copy {
    position: relative !important;
    display: block !important;
    min-height: 400px !important;
    height: 100svh !important;
    margin-top: -6px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .story-body .buy-intro__emerald-title {
    position: absolute !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .story-body .buy-intro__emerald-title .title-line {
    display: block !important;
    white-space: nowrap !important;
    width: 100% !important;
    text-align: center !important;
  }

  .story-body .buy-intro__emerald-title .title-line + .title-line {
    margin-top: 0.72em !important;
  }

  .story-body .buy-intro__prompt--title {
    position: absolute !important;
    top: 198px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(7px, 2.05vw, 8.5px) !important;
    line-height: 1 !important;
    letter-spacing: 0.015em !important;
    animation: buyIntroContinueBlinkV82 5.4s ease-in-out infinite !important;
  }

  .story-body .buy-intro__copyright {
    position: absolute !important;
    left: 50% !important;
    bottom: 46px !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(8px, 2.35vw, 9.5px) !important;
    line-height: 1 !important;
  }

  /* Use the same premium dialogue styling for final starter choice */
  .story-body .story-scene.is-choice .dialogue-box {
    width: min(100%, 94vw) !important;
    min-height: 120px !important;
    padding: 14px 14px 30px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(235,235,235,0.96), rgba(208,208,208,0.97)) !important;
    color: #121212 !important;
    border: 1px solid rgba(16,16,16,0.72) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.65) !important;
  }

  .story-body .story-scene.is-choice .dialogue-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    color: #101010 !important;
  }

  .story-body .story-scene.is-choice .dialogue-skip {
    position: absolute !important;
    left: 16px !important;
    bottom: 10px !important;
    font-size: 8px !important;
    color: rgba(16,16,16,0.82) !important;
  }

  .story-body .story-scene.is-choice .dialogue-hint {
    position: absolute !important;
    right: 14px !important;
    bottom: 8px !important;
    font-size: 11px !important;
    color: #111 !important;
  }

  /* product footer: drop policy perfectly aligned with product file */
  .product-mini-footer,
  .product-policy-link {
    position: fixed !important;
    bottom: 12px !important;
    top: auto !important;
    z-index: 1503 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    display: block !important;
    transform: none !important;
  }

  .product-mini-footer {
    left: 10px !important;
    right: auto !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  .product-policy-link {
    right: 10px !important;
    left: auto !important;
    font-size: 8px !important;
    letter-spacing: 0.10em !important;
  }
}


/* v98 - final mobile micro polish requested */
@media (max-width: 700px) {
  /* Keep welcome exactly like v97, only place copyright under the continue line */
  .story-body .buy-intro__prompt--title {
    top: 198px !important;
  }

  .story-body .buy-intro__copyright {
    top: 222px !important;
    bottom: auto !important;
    font-size: clamp(8px, 2.25vw, 9px) !important;
    line-height: 1 !important;
  }

  /* Starter choice dialogue: same premium box, tighter text so the phrases sit on ~2 lines */
  .story-body .story-scene.is-choice .dialogue-box {
    width: min(100%, 94vw) !important;
    min-height: 120px !important;
    padding: 14px 14px 30px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(235,235,235,0.96), rgba(208,208,208,0.97)) !important;
    color: #121212 !important;
    border: 1px solid rgba(16,16,16,0.72) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.65) !important;
  }

  .story-body .story-scene.is-choice .dialogue-text {
    font-size: 12px !important;
    line-height: 1.42 !important;
    font-weight: 700 !important;
    color: #101010 !important;
    margin: 8px 0 12px !important;
  }

  .story-body .story-scene.is-choice .dialogue-name {
    font-size: 10px !important;
    padding: 5px 10px !important;
    margin-bottom: 8px !important;
    color: #111 !important;
    background: rgba(255,255,255,0.58) !important;
    border: 1px solid rgba(17,17,17,0.18) !important;
    border-radius: 999px !important;
  }

  .story-body .story-scene.is-choice .dialogue-skip {
    position: absolute !important;
    left: 16px !important;
    bottom: 10px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    color: rgba(16,16,16,0.82) !important;
  }

  .story-body .story-scene.is-choice .dialogue-hint {
    position: absolute !important;
    right: 14px !important;
    bottom: 8px !important;
    font-size: 11px !important;
    color: #111 !important;
  }

  /* Align footer + drop policy on the exact same baseline */
  .product-mini-footer,
  .product-policy-link {
    position: fixed !important;
    bottom: 12px !important;
    top: auto !important;
    z-index: 1503 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    display: block !important;
    transform: none !important;
  }

  .product-mini-footer {
    left: 10px !important;
    right: auto !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  .product-policy-link {
    right: 10px !important;
    left: auto !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    text-align: right !important;
  }
}


/* v99 — final micro-ergonomics audit */
:root {
  --ui-safe-x: clamp(12px, 3.2vw, 24px);
  --ui-touch-min: 42px;
  --ui-gap-tight: 8px;
  --ui-gap: 14px;
  --ui-gap-loose: 22px;
}
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
.story-back,
.lang-button,
.viewer-mode-button,
.product-policy-link,
.checkout-button,
.buy-card,
.starter-card {
  touch-action: manipulation;
}
.lang-button,
.viewer-mode-button,
.story-back,
.product-policy-link {
  min-height: var(--ui-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* one clear action per screen, always with breathing room */
.buy-intro__prompt--title,
.dialogue-skip,
.dialogue-hint,
.buy-intro__skip,
.buy-intro__dialogue .buy-intro__prompt {
  user-select: none;
}
/* dialogue boxes: premium, consistent spacing */
.story-body .buy-intro__dialogue,
.story-body .dialogue-box {
  border-radius: 16px !important;
  padding: 14px 16px 32px !important;
  box-sizing: border-box !important;
}
.story-body .buy-intro__line,
.story-body .dialogue-text {
  margin: 10px 0 12px !important;
  padding-right: 4px !important;
}
.story-body .dialogue-skip,
.story-body .buy-intro__meta .buy-intro__skip {
  left: 16px !important;
  bottom: 10px !important;
}
.story-body .dialogue-hint,
.story-body .buy-intro__dialogue .buy-intro__prompt {
  right: 14px !important;
  bottom: 9px !important;
}
/* mobile hints fade once the user has understood */
body.flip-hint-seen .tap-flip-hint,
body.product-hint-seen .viewer-hint {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(3px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
}
body.product-hint-seen .viewer-hint {
  transform: translateY(2px) !important;
}
/* clearer focus/active feedback without breaking visual identity */
.buy-card:active,
.starter-card:active,
.checkout-button:active,
.viewer-mode-button:active,
.lang-button:active {
  transform: scale(.985) !important;
}
.viewer-mode-button:focus-visible,
.lang-button:focus-visible,
.story-back:focus-visible,
.product-policy-link:focus-visible,
.checkout-button:focus-visible,
.starter-card:focus-visible {
  outline: 1px solid rgba(251,175,23,.72) !important;
  outline-offset: 3px !important;
}
/* product footer alignment: same line, same baseline */
.product-mini-footer,
.product-policy-link {
  line-height: 1 !important;
}
.product-mini-footer {
  gap: 0 !important;
}
.product-policy-link {
  padding: 0 !important;
}
@media (max-width: 700px) {
  html, body { overscroll-behavior-x: none; }
  .story-back {
    left: var(--ui-safe-x) !important;
    top: 8px !important;
  }
  .language-switch,
  .product-language-switch {
    right: var(--ui-safe-x) !important;
    top: 8px !important;
  }
  .buy-intro__prompt--title {
    max-width: calc(100vw - 2 * var(--ui-safe-x)) !important;
  }
  .story-body .dialogue-box,
  .story-body .buy-intro__dialogue {
    width: calc(100vw - 2 * var(--ui-safe-x)) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .story-body .story-scene.is-choice .dialogue-box {
    min-height: 116px !important;
  }
  .story-body .story-scene.is-choice .dialogue-text {
    max-width: 92% !important;
    line-height: 1.42 !important;
  }
  .starter-card {
    min-height: 44px !important;
  }
  .starter-card .capsule {
    min-width: 54px;
  }
  .tap-flip-hint,
  .viewer-hint {
    pointer-events: none !important;
  }
  .checkout-button {
    min-height: 46px !important;
  }
  .product-mini-footer,
  .product-policy-link {
    bottom: 10px !important;
    position: fixed !important;
  }
  .product-mini-footer {
    left: var(--ui-safe-x) !important;
  }
  .product-policy-link {
    right: var(--ui-safe-x) !important;
  }
  /* avoid accidental useless horizontal/vertical jiggle on mobile */
  .product-file-page,
  .story-scene,
  .page {
    overflow-x: hidden !important;
  }
}
@media (min-width: 701px) {
  .product-mini-footer,
  .product-policy-link {
    bottom: 18px !important;
  }
  .product-mini-footer { left: 20px !important; }
  .product-policy-link { right: 20px !important; }
}


/* v102 - restored mobile continue placement + immersive story transition */
.story-entry-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .52s ease, visibility .52s ease;
}
.story-entry-transition.is-done {
  opacity: 0;
  visibility: hidden;
}
.story-entry-tunnel {
  position: absolute;
  inset: -22%;
  opacity: .8;
  background:
    repeating-linear-gradient(90deg, rgba(251,175,23,.18) 0 2px, transparent 2px 42px),
    repeating-linear-gradient(0deg, rgba(57,255,115,.09) 0 2px, transparent 2px 44px),
    radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(0,0,0,.28) 15% 29%, rgba(251,175,23,.18) 30% 31%, transparent 32% 100%);
  transform: scale(1.35);
  animation: storyTunnel102 1.3s cubic-bezier(.16,.86,.2,1) forwards;
}
.story-entry-tunnel span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82vw, 700px);
  aspect-ratio: 1.75;
  border: 1px solid rgba(251,175,23,.38);
  transform: translate(-50%, -50%) scale(var(--s,1));
  opacity: .58;
  box-shadow: 0 0 22px rgba(251,175,23,.08);
}
.story-entry-tunnel span:nth-child(1){--s:.34}
.story-entry-tunnel span:nth-child(2){--s:.54}
.story-entry-tunnel span:nth-child(3){--s:.78}
.story-entry-tunnel span:nth-child(4){--s:1.06}
.story-entry-mark {
  position: relative;
  z-index: 2;
  color: #fbaf17;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(56px, 15vw, 150px);
  letter-spacing: .045em;
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(251,175,23,.38));
  animation: storyMark102 1.18s ease forwards;
}
@keyframes storyTunnel102 {
  0% { transform: scale(1.5) rotate(.5deg); opacity: 0; filter: blur(5px); }
  18% { opacity: .85; filter: blur(0); }
  100% { transform: scale(.7) rotate(0deg); opacity: .12; filter: blur(1px); }
}
@keyframes storyMark102 {
  0% { opacity: 0; transform: scale(.72); }
  22% { opacity: 1; transform: scale(1.03); }
  72% { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

@media (max-width: 700px) {
  .story-body .buy-intro__prompt--title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.12 !important;
    letter-spacing: .05em !important;
    margin: 0 !important;
    z-index: 6 !important;
  }
  .story-body .buy-intro__copyright {
    bottom: 34px !important;
  }
}


/* v120 — ergonomics only, TOUCH HERE untouched */

/* Tap-to-flip: mobile only, visible until the user interacts once */
.tap-flip-hint {
  display: none !important;
}
@media (max-width: 700px) {
  .tap-flip-hint {
    display: block !important;
    opacity: .86 !important;
    visibility: visible !important;
    pointer-events: none !important;
    bottom: -28px !important;
    font-size: 7px !important;
    letter-spacing: .07em !important;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease !important;
  }

  body.flip-hint-seen .tap-flip-hint,
  body.has-flipped-shirt .tap-flip-hint {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(6px) !important;
  }
}

/* Scroll pour explorer: disappears after the first real scroll */
.site-guide {
  transition: opacity .55s ease, transform .55s ease, visibility .55s ease !important;
}
body.site-guide-dismissed .site-guide,
.site-guide.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(10px) !important;
}


/* v125 — MOBILE ONLY: welcome touch prompt + tap-to-flip directive
   No desktop change. TOUCH HERE untouched. */

/* Desktop stays untouched */
.tap-flip-hint {
  display: none !important;
}

@media (max-width: 700px) {
  /* Welcome screen: only add/show "clique ou touche pour continuer" on mobile */
  .story-body .buy-intro__prompt--title,
  .story-body #welcomePrompt {
    display: block !important;
    visibility: visible !important;
    opacity: .94 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.72), 0 0 10px rgba(255,255,255,.12) !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.18 !important;
    letter-spacing: .045em !important;
  }

  /* Tap to flip: visible only on mobile */
  .tap-flip-hint {
    display: block !important;
    opacity: .86 !important;
    visibility: visible !important;
    pointer-events: none !important;
    bottom: -28px !important;
    font-size: 7px !important;
    letter-spacing: .07em !important;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease !important;
  }

  /* Disappears after first real interaction */
  body.has-flipped-shirt .tap-flip-hint,
  body.flip-hint-seen .tap-flip-hint {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(6px) !important;
  }
}

/* ============================================================
   v126 — SAFE-AREA PATCH (iPhone / Safari home-indicator bar)
   Purely additive: does not remove or rewrite any rule above.
   env(safe-area-inset-bottom) is 0 on every non-notch device
   and in browsers without support, so spacing on desktop and
   older phones is unchanged. On iPhones with a home-indicator,
   this pushes fixed bottom UI up above it so nothing sits
   underneath or gets clipped by Safari's UI.
   ============================================================ */
@supports (bottom: env(safe-area-inset-bottom)) {
  .story-body .buy-intro__skip-button {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .product-policy-link {
    bottom: calc(max(14px, 2vh) + env(safe-area-inset-bottom)) !important;
  }
  .site-guide {
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  @media (max-width: 700px) {
    .story-body .buy-intro__skip-button {
      bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    .product-mini-footer,
    .product-policy-link {
      bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    .checkout-button {
      bottom: calc(48px + env(safe-area-inset-bottom)) !important;
    }
  }
}


/* v129 — MOBILE SCROLL REPAIR
   Fixes mobile scroll without touching TOUCH HERE, BUY, story, or desktop.
   Main idea:
   - lock the home page only while the intro/access overlay is active
   - unlock normal vertical scrolling once the shop is visible
   - allow vertical pan over product cards/shirts, so swiping on a shirt still scrolls
*/

@media (max-width: 700px) {
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    overscroll-behavior-y: auto !important;
  }

  /* Home page only: before the shop appears, block background scrolling behind TOUCH HERE/login */
  body:not(.story-body):not(.product-file-body):not(.policy-body):not(.archive-body):not(.show-intro):not(.shop-direct) {
    overflow: hidden !important;
    height: 100svh !important;
    min-height: 100svh !important;
    touch-action: none !important;
  }

  /* Once shop is visible, restore real mobile scrolling */
  body.show-intro,
  body.shop-direct {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.show-intro main,
  body.shop-direct main {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100svh !important;
  }

  body.show-intro .page,
  body.shop-direct .page {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body.show-intro .product-page,
  body.shop-direct .product-page {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }

  body.show-intro .product-card,
  body.show-intro .product-shirt,
  body.shop-direct .product-card,
  body.shop-direct .product-shirt {
    touch-action: pan-y pinch-zoom !important;
  }

  /* Keep interactive elements tappable */
  body.show-intro .buy-card,
  body.shop-direct .buy-card,
  body.show-intro a,
  body.shop-direct a,
  body.show-intro button,
  body.shop-direct button {
    touch-action: manipulation !important;
  }

  /* Do not let the scroll guide block gestures */
  .site-guide {
    pointer-events: none !important;
  }
}


/* v131 — story transition wording */
.story-entry-mark {
  max-width: calc(100vw - 28px) !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(28px, 7vw, 92px) !important;
  letter-spacing: .035em !important;
}
@media (max-width: 700px) {
  .story-entry-mark {
    font-size: clamp(18px, 5.6vw, 38px) !important;
    letter-spacing: .025em !important;
    line-height: 1.12 !important;
  }
}


/* v136 — mobile performance polish
   Goal: smoother mobile scroll/animations without changing the SCARS327 DA. */
@media (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100% !important;
    scroll-behavior: auto !important;
  }

  body.show-intro main,
  body.shop-direct main,
  .product-file-page,
  .story-page {
    content-visibility: auto;
    contain-intrinsic-size: 1000px 1000px;
  }

  .product-card,
  .starter-card,
  .shirt-viewer,
  .buy-intro__welcome-screen {
    contain: layout paint style;
    transform: translateZ(0);
  }

  .product-card.is-offscreen .product-shirt,
  .starter-card.is-offscreen,
  body.tab-hidden .product-shirt,
  body.tab-hidden .starter-card,
  body.tab-hidden .story-entry-transition,
  body.tab-hidden .intro-logo {
    animation-play-state: paused !important;
  }

  .product-shirt,
  .starter-preview,
  .shirt-face,
  .intro-logo,
  .hero-logo,
  .scars-logo {
    image-rendering: auto;
    backface-visibility: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
}


/* v139 — idea 6: conversion + credibility pages */
.conversion-page {
  display: grid !important;
  place-items: center !important;
  padding: clamp(58px, 8vh, 110px) 18px !important;
}
.conversion-card,
.credibility-card {
  position: relative;
  z-index: 2;
  width: min(880px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 38%),
    radial-gradient(circle at 10% 0%, rgba(251,175,23,.12), transparent 30%),
    rgba(0,0,0,.72);
  box-shadow: 0 26px 80px rgba(0,0,0,.52), inset 0 0 0 1px rgba(251,175,23,.08);
  padding: clamp(22px, 4vw, 46px);
  text-align: center;
  backdrop-filter: blur(8px);
}
.conversion-card h2,
.credibility-card h1 {
  margin: 8px 0 12px;
  font-size: clamp(28px, 6.2vw, 76px);
  line-height: .92;
  letter-spacing: .035em;
  color: #fff;
  text-shadow: 0 0 18px rgba(251,175,23,.12);
}
.conversion-card p,
.cred-lead {
  margin: 0 auto 22px;
  max-width: 680px;
  font: 700 clamp(12px, 1.3vw, 16px)/1.55 "Courier New", monospace;
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}
.conversion-pills,
.cred-actions,
.cred-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.conversion-pills a,
.cred-button,
.cred-footer a {
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: .12em;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 11px 14px;
  background: rgba(0,0,0,.38);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.conversion-pills a:hover,
.cred-button:hover,
.cred-footer a:hover {
  transform: translateY(-2px);
  border-color: rgba(251,175,23,.72);
  color: #fbaf17;
  background: rgba(251,175,23,.08);
}
.conversion-cta,
.cred-button-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 14px 18px;
  min-height: 44px;
  border: 2px solid rgba(251,175,23,.86);
  background: linear-gradient(180deg, #ffe66a, #fbaf17 52%, #d67400);
  color: #050505 !important;
  text-decoration: none;
  font: 950 12px/1 "Courier New", monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(251,175,23,.2), 4px 4px 0 rgba(0,0,0,.8);
}
.credibility-body .story-back {
  z-index: 5;
}
.credibility-page {
  padding-bottom: 90px;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
  text-align: left;
}
.cred-mini-card {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  padding: 16px 14px;
}
.cred-mini-card h2 {
  margin: 0 0 9px;
  color: #fbaf17;
  font-size: 13px;
  letter-spacing: .12em;
}
.cred-mini-card p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font: 700 12px/1.55 "Courier New", monospace;
}
.cred-mini-card a {
  color: #fbaf17;
}
.cred-footer {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100vw - 32px));
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.58);
  font: 800 9px/1.4 "Courier New", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.site-footer a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fbaf17;
}

@media (max-width: 700px) {
  .conversion-page {
    min-height: auto !important;
    padding: 74px 12px 96px !important;
  }
  .conversion-card,
  .credibility-card {
    width: calc(100vw - 22px);
    padding: 20px 14px 22px;
  }
  .conversion-card h2,
  .credibility-card h1 {
    font-size: clamp(26px, 11vw, 46px);
  }
  .conversion-pills,
  .cred-actions {
    gap: 8px;
  }
  .conversion-pills a,
  .cred-button,
  .cred-footer a {
    font-size: 8px;
    padding: 10px 11px;
  }
  .conversion-cta,
  .cred-button-gold {
    width: 100%;
    font-size: 9px;
    padding: 13px 10px;
  }
  .cred-grid {
    grid-template-columns: 1fr;
  }
  .cred-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
  }
  .site-footer {
    gap: 7px !important;
  }
}


/* v140 — remove bulky conversion block + clean FAQ / Shipping ergonomics */
.conversion-page {
  display: none !important;
}

.simple-info-body {
  background: #000 !important;
}
.simple-info-page {
  min-height: 100svh;
  padding: clamp(72px, 9vh, 110px) 16px 38px;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,175,23,.08), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(87,255,122,.055), transparent 30%),
    #000;
}
.simple-hero {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 32px));
  margin: 0 auto 22px;
  text-align: center;
}
.simple-kicker {
  margin: 0 0 8px;
  color: #57ff7a;
  font: 900 12px/1 "Courier New", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.simple-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(46px, 10vw, 132px);
  line-height: .86;
  letter-spacing: .035em;
  text-shadow: 0 0 22px rgba(255,255,255,.08);
}
.simple-hero p {
  margin: 20px auto 0;
  max-width: 760px;
  color: rgba(255,255,255,.72);
  font: 800 clamp(13px, 1.5vw, 17px)/1.6 "Courier New", monospace;
}
.simple-panel {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100vw - 32px));
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.58);
  box-shadow: 0 22px 72px rgba(0,0,0,.42), inset 0 0 0 1px rgba(251,175,23,.06);
  backdrop-filter: blur(8px);
}
.simple-panel details {
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.simple-panel details:last-child {
  border-bottom: 0;
}
.simple-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 20px;
  color: #fff;
  font: 950 clamp(14px, 1.8vw, 20px)/1.2 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.simple-panel summary::-webkit-details-marker {
  display: none;
}
.simple-panel summary span,
.process-grid article span {
  color: #57ff7a;
  font: 900 11px/1 "Courier New", monospace;
  letter-spacing: .12em;
  min-width: 28px;
}
.simple-panel summary::after {
  content: "+";
  margin-left: auto;
  color: #fbaf17;
  font-size: 22px;
}
.simple-panel details[open] summary::after {
  content: "−";
}
.simple-panel p {
  margin: -6px 0 0;
  padding: 0 20px 22px 62px;
  color: rgba(255,255,255,.72);
  font: 800 13px/1.65 "Courier New", monospace;
}
.simple-panel a {
  color: #fbaf17;
}
.process-grid {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 32px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.process-grid article {
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 42%),
    rgba(0,0,0,.56);
  padding: 18px 16px;
}
.process-grid h2 {
  margin: 9px 0 8px;
  color: #fff;
  font-size: 18px;
  letter-spacing: .06em;
}
.process-grid p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font: 800 12px/1.55 "Courier New", monospace;
}
.simple-bottom-actions {
  width: min(900px, calc(100vw - 32px));
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.simple-bottom-actions a,
.simple-info-footer a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font: 950 10px/1 "Courier New", monospace;
  letter-spacing: .12em;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 12px 14px;
  background: rgba(0,0,0,.34);
}
.simple-bottom-actions a:hover,
.simple-info-footer a:hover {
  color: #fbaf17;
  border-color: rgba(251,175,23,.72);
}
.simple-info-footer {
  width: min(980px, calc(100vw - 32px));
  margin: 34px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  color: rgba(255,255,255,.5);
  font: 900 9px/1.4 "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.simple-info-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 700px) {
  .simple-info-page {
    padding: 68px 10px 28px;
  }
  .simple-hero {
    width: calc(100vw - 20px);
    text-align: left;
  }
  .simple-hero h1 {
    font-size: clamp(42px, 16vw, 72px);
    line-height: .9;
  }
  .simple-hero p {
    margin-top: 14px;
    font-size: 12px;
  }
  .simple-panel,
  .process-grid,
  .simple-bottom-actions,
  .simple-info-footer {
    width: calc(100vw - 20px);
  }
  .process-grid {
    grid-template-columns: 1fr;
  }
  .simple-panel summary {
    padding: 17px 14px;
    gap: 10px;
    font-size: 13px;
  }
  .simple-panel p {
    padding: 0 14px 18px 52px;
    font-size: 11.5px;
  }
  .simple-bottom-actions {
    justify-content: stretch;
  }
  .simple-bottom-actions a {
    flex: 1 1 100%;
    text-align: center;
  }
  .simple-info-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* v141 — bilingual FAQ/Shipping + bottom socials + gold 327 system */
.page-home .instagram,
.hero > .instagram {
  display: none !important;
}

.site-footer-v141 {
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}
.site-footer-links,
.footer-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-socials a,
.site-footer-v141 a {
  color: rgba(255,255,255,.72) !important;
  text-decoration: none !important;
}
.footer-socials a:hover,
.site-footer-v141 a:hover {
  color: #fbaf17 !important;
}

.simple-lang-switch {
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  z-index: 1200 !important;
}

.lang-fr [data-copy-en],
.lang-en [data-copy-fr] {
  display: none !important;
}
.lang-fr [data-copy-fr],
.lang-en [data-copy-en] {
  display: inline;
}
.lang-fr p[data-copy-fr],
.lang-en p[data-copy-en],
.lang-fr h2[data-copy-fr],
.lang-en h2[data-copy-en] {
  display: block;
}
.simple-panel summary b {
  font: inherit;
}

.simple-kicker,
.simple-panel summary span,
.process-grid article span,
.timeline-v141 article span,
.gold-327,
.archive-link {
  color: #fbaf17 !important;
}
.lang-button.is-active {
  background: rgba(251,175,23,.15) !important;
  border-color: rgba(251,175,23,.72) !important;
  color: #fbaf17 !important;
}

.shipping-title-one-line {
  white-space: nowrap !important;
  font-size: clamp(36px, 8vw, 104px) !important;
  letter-spacing: .015em !important;
}

.timeline-v141 {
  position: relative;
  z-index: 2;
  width: min(1050px, calc(100vw - 32px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.timeline-v141 article {
  position: relative;
  min-height: 190px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(251,175,23,.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.048), transparent 42%),
    rgba(0,0,0,.58);
  padding: 16px 12px 14px;
  text-align: center;
}
.timeline-v141 article::after {
  content: "";
  position: absolute;
  top: 45px;
  right: -11px;
  width: 12px;
  height: 1px;
  background: rgba(251,175,23,.48);
}
.timeline-v141 article:last-child::after {
  display: none;
}
.timeline-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251,175,23,.44);
  border-radius: 999px;
  background: rgba(251,175,23,.08);
  font-size: 23px;
  filter: grayscale(.1) contrast(1.05);
}
.timeline-v141 h2 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.05;
  letter-spacing: .06em;
}
.timeline-v141 p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font: 800 11px/1.45 "Courier New", monospace;
}

.simple-hero p {
  max-width: 820px;
}
.simple-panel summary {
  align-items: flex-start !important;
}
.simple-panel p {
  max-width: 780px;
}
.simple-bottom-actions {
  gap: 9px !important;
}

@media (max-width: 900px) {
  .timeline-v141 {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .timeline-v141 article {
    min-height: 0;
    display: grid;
    grid-template-columns: 54px 34px 1fr;
    grid-template-areas:
      "icon num title"
      "icon num text";
    column-gap: 10px;
    align-items: center;
    text-align: left;
    padding: 14px;
  }
  .timeline-v141 article::after {
    left: 35px;
    right: auto;
    top: auto;
    bottom: -10px;
    width: 1px;
    height: 10px;
  }
  .timeline-icon { grid-area: icon; margin: 0; }
  .timeline-v141 article span { grid-area: num; }
  .timeline-v141 h2 { grid-area: title; margin: 0 0 4px; }
  .timeline-v141 p { grid-area: text; }
}

@media (max-width: 700px) {
  .site-footer-v141 {
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .site-footer-links,
  .footer-socials {
    gap: 8px;
  }
  .simple-lang-switch {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }
  .shipping-title-one-line {
    font-size: clamp(25px, 9.4vw, 42px) !important;
    letter-spacing: -.015em !important;
  }
  .simple-hero {
    padding-right: 98px;
  }
  .simple-hero h1 {
    word-break: normal;
  }
  .simple-panel summary {
    font-size: 12px !important;
  }
  .timeline-v141 article {
    grid-template-columns: 48px 30px 1fr;
  }
  .timeline-icon {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }
}

@media (max-width: 390px) {
  .shipping-title-one-line {
    font-size: clamp(22px, 8.6vw, 34px) !important;
  }
}


/* v142 — ergonomic cleanup: no duplicate options, only 327 gold */
.site-footer-v142 {
  justify-content: space-between !important;
  gap: clamp(22px, 4vw, 62px) !important;
  padding-left: clamp(18px, 4vw, 60px) !important;
  padding-right: clamp(18px, 4vw, 60px) !important;
}
.site-footer-v142 .site-footer-links,
.site-footer-v142 .footer-socials {
  gap: clamp(18px, 2.8vw, 42px) !important;
}
.site-footer-v142 a {
  padding: 10px 2px;
}

.simple-info-footer-v142 {
  width: min(900px, calc(100vw - 32px));
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  color: rgba(255,255,255,.42);
  font: 900 9px/1.4 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.simple-info-footer-v142 nav {
  display: none !important;
}

/* Undo v141 broad gold: only the explicit 327 span stays gold */
.simple-kicker {
  color: rgba(255,255,255,.62) !important;
}
.gold-327 {
  color: #fbaf17 !important;
}
.simple-panel summary span,
.process-grid article span,
.timeline-v141 article span,
.timeline-v142 article span {
  color: rgba(87,255,122,.82) !important;
}
.archive-link {
  color: rgba(87,255,122,.58) !important;
}

/* More breathing room, less duplicated UI feeling */
.simple-bottom-actions-single {
  margin-top: clamp(34px, 5vh, 58px) !important;
  gap: clamp(14px, 2.4vw, 34px) !important;
}
.simple-bottom-actions-single a {
  min-width: clamp(170px, 18vw, 260px);
  text-align: center;
}

/* Shipping title centered, one-line, FR title in FR mode */
.shipping-hero,
.simple-hero.shipping-hero {
  text-align: center !important;
  padding-right: 0 !important;
}
.shipping-title-one-line {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(34px, 7.4vw, 116px) !important;
  line-height: .86 !important;
  letter-spacing: -.01em !important;
}
.shipping-title-one-line [data-copy-fr],
.shipping-title-one-line [data-copy-en] {
  white-space: nowrap !important;
}

/* Keep the language switch from forcing hero text off-center */
.simple-hero {
  padding-right: 0 !important;
}

@media (max-width: 700px) {
  .site-footer-v142 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .site-footer-v142 .site-footer-links,
  .site-footer-v142 .footer-socials {
    gap: 14px !important;
  }

  .simple-bottom-actions-single {
    margin-top: 30px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .simple-bottom-actions-single a {
    width: 100% !important;
    min-width: 0 !important;
  }

  .shipping-title-one-line {
    font-size: clamp(24px, 8.3vw, 40px) !important;
    letter-spacing: -.035em !important;
  }

  .simple-hero,
  .simple-hero.shipping-hero {
    text-align: center !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 390px) {
  .shipping-title-one-line {
    font-size: clamp(20px, 7.8vw, 32px) !important;
  }
}


/* v143 — center alignment + cleaner FR/EN + improved flow timeline */
.simple-info-page-v143 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.simple-hero-v143,
.simple-panel-v143,
.flow-timeline-v143,
.simple-bottom-actions-single,
.simple-info-footer-v142 {
  width: min(1460px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.simple-hero-v143 {
  text-align: center !important;
  padding-top: 40px;
  padding-bottom: 10px;
}

.clean-kicker {
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,.68) !important;
  letter-spacing: .24em;
}
.clean-kicker .gold-327 { color: #fbaf17 !important; }

.shipping-title-one-line-v143 {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(44px, 6.6vw, 102px);
  line-height: .9;
  letter-spacing: -.02em;
  margin: 8px auto 18px;
}

.simple-panel-v143 {
  margin-top: 36px;
}

.simple-panel-v143 summary span {
  color: #fbaf17 !important;
}

.flow-timeline-v143 {
  margin: 34px auto 18px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.flow-step-v143 {
  width: min(248px, 18vw);
  min-width: 0;
  background: rgba(0,0,0,.64);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(251,175,23,.06);
}

.flow-step-num {
  font: 900 clamp(18px, 1.4vw, 24px)/1 "Courier New", monospace;
  letter-spacing: .12em;
  color: #fbaf17 !important;
  margin-bottom: 14px;
}

.flow-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(251,175,23,.55);
  display: grid;
  place-items: center;
  font-size: 28px;
  margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(251,175,23,.1), 0 0 20px rgba(251,175,23,.08);
}

.flow-step-v143 h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.02;
  text-transform: none;
}

.flow-step-v143 p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.55;
}

.flow-arrow-v143 {
  align-self: center;
  color: rgba(251,175,23,.75);
  font: 900 clamp(24px, 2vw, 34px)/1 "Courier New", monospace;
  padding: 0 2px;
}

.simple-bottom-actions-single {
  gap: clamp(18px, 2.4vw, 34px) !important;
  justify-content: center !important;
}

@media (max-width: 1320px) {
  .flow-timeline-v143 {
    flex-wrap: wrap;
  }
  .flow-step-v143 {
    width: min(260px, calc(50vw - 50px));
  }
  .flow-arrow-v143 {
    display: none;
  }
}

@media (max-width: 760px) {
  .simple-hero-v143 {
    padding-top: 28px;
  }

  .shipping-title-one-line-v143 {
    white-space: normal;
    font-size: clamp(28px, 9vw, 44px);
    line-height: .95;
  }

  .flow-timeline-v143 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .flow-step-v143 {
    width: 100%;
    max-width: 100%;
  }

  .flow-arrow-v143 {
    display: none;
  }
}


/* v144 — clean proportions + ONLY brand 327 digits gold on FAQ/Shipping */
.brand-digits {
  color: #fbaf17 !important;
}

/* Reset all previous broad gold overrides on FAQ/Shipping utility numbers */
.simple-panel-v143 summary span,
.flow-step-num,
.flow-step-v143 .flow-step-num,
.timeline-v141 article span,
.timeline-v142 article span,
.process-grid article span {
  color: rgba(87,255,122,.82) !important;
}

/* Only literal brand digits remain gold */
.simple-info-body .brand-digits {
  color: #fbaf17 !important;
}

/* Page frame: centered, premium, no horizontal overflow */
.simple-info-body {
  overflow-x: hidden !important;
}

.simple-info-page-v143 {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
  padding: clamp(72px, 8vh, 96px) clamp(22px, 4vw, 54px) 44px !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

/* Hero proportions: not oversized, centered like a real info page */
.simple-hero-v143,
.shipping-hero-v143 {
  width: min(1120px, 100%) !important;
  margin: 0 auto 34px !important;
  padding: 0 !important;
  text-align: center !important;
}

.clean-kicker {
  margin: 0 0 16px !important;
  text-align: center !important;
  color: rgba(255,255,255,.62) !important;
  font-size: clamp(10px, .9vw, 14px) !important;
  letter-spacing: .24em !important;
}

.simple-hero-v143 h1,
.shipping-title-one-line-v143 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 22px !important;
  text-align: center !important;
  line-height: .92 !important;
  white-space: nowrap !important;
  letter-spacing: -.018em !important;
}

.simple-hero-v143 h1 {
  font-size: clamp(58px, 8vw, 118px) !important;
}

.shipping-title-one-line-v143 {
  font-size: clamp(42px, 5.9vw, 86px) !important;
}

.simple-hero-v143 p,
.shipping-hero-v143 p {
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(13px, 1.2vw, 17px) !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.72) !important;
}

/* Timeline: cleaner, centered, same width as the text, no huge cards */
.flow-timeline-v143 {
  width: min(1120px, 100%) !important;
  margin: 42px auto 38px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: visible !important;
}

.flow-arrow-v143 {
  display: none !important;
}

.flow-step-v143 {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 250px !important;
  padding: 20px 14px 22px !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  border-color: rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,175,23,.07), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(0,0,0,.58) !important;
}

.flow-step-num {
  margin: 0 0 14px !important;
  font-size: 16px !important;
  letter-spacing: .14em !important;
  color: rgba(87,255,122,.82) !important;
}

.flow-step-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 16px !important;
  font-size: 23px !important;
  border-color: rgba(251,175,23,.42) !important;
  background: rgba(251,175,23,.06) !important;
}

.flow-step-v143 h2 {
  min-height: 45px !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(16px, 1.25vw, 21px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.flow-step-v143 p {
  max-width: 170px !important;
  margin: 0 auto !important;
  font-size: clamp(10.5px, .82vw, 12.5px) !important;
  line-height: 1.55 !important;
  text-align: center !important;
  color: rgba(255,255,255,.68) !important;
}

/* FAQ/Shipping panels centered under the timeline */
.simple-panel-v143 {
  width: min(920px, 100%) !important;
  margin: 32px auto 0 !important;
}

.simple-panel-v143 summary {
  padding: 20px 22px !important;
}

.simple-panel-v143 p {
  max-width: 760px !important;
}

/* Bottom CTA row: single row, centered, breathing room */
.simple-bottom-actions-single {
  width: min(960px, 100%) !important;
  margin: 42px auto 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(18px, 2.6vw, 38px) !important;
  flex-wrap: wrap !important;
}

.simple-bottom-actions-single a {
  min-width: 190px !important;
  padding: 13px 18px !important;
}

/* Mobile/tablet proportions */
@media (max-width: 1100px) {
  .flow-timeline-v143 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(720px, 100%) !important;
  }

  .flow-step-v143 {
    min-height: 210px !important;
  }

  .flow-step-v143:last-child {
    grid-column: 1 / -1;
    width: min(350px, 100%) !important;
    justify-self: center !important;
  }
}

@media (max-width: 700px) {
  .simple-info-page-v143 {
    padding: 70px 14px 34px !important;
  }

  .simple-hero-v143,
  .shipping-hero-v143 {
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  .simple-hero-v143 h1 {
    font-size: clamp(46px, 18vw, 78px) !important;
  }

  .shipping-title-one-line-v143 {
    font-size: clamp(24px, 8.2vw, 39px) !important;
    letter-spacing: -.04em !important;
  }

  .flow-timeline-v143 {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .flow-step-v143,
  .flow-step-v143:last-child {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 16px !important;
  }

  .flow-step-v143 h2 {
    min-height: 0 !important;
  }

  .flow-step-v143 p {
    max-width: 280px !important;
  }

  .simple-bottom-actions-single {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .simple-bottom-actions-single a {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .shipping-title-one-line-v143 {
    font-size: clamp(21px, 7.4vw, 31px) !important;
  }
}


/* v145 — final cleanup: green markers, only 3/2/7 digits gold, centered title */
.brand-digits,
.gold-327 {
  color: inherit !important;
}
.brand-digit {
  color: #fbaf17 !important;
}

/* Markers / plus-minus back to the green feel */
.simple-panel summary span,
.simple-panel-v143 summary span,
.simple-panel summary::after,
.simple-panel-v143 summary::after,
.process-grid article span,
.timeline-v141 article span,
.timeline-v142 article span,
.flow-step-num,
.flow-step-v143 .flow-step-num {
  color: rgba(87,255,122,.86) !important;
}

.clean-kicker,
.simple-kicker {
  color: rgba(255,255,255,.64) !important;
}

/* Shipping hero: centered and smaller */
.shipping-hero-v143,
.simple-hero-v143.shipping-hero-v143 {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: visible !important;
}

.shipping-title-one-line-v143 {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto 22px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: clamp(34px, 4.9vw, 76px) !important;
  line-height: .94 !important;
  letter-spacing: -.025em !important;
  transform: none !important;
}

.shipping-title-one-line-v143 span {
  display: inline-block !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.simple-info-page-v143 {
  align-items: center !important;
  overflow-x: hidden !important;
}

.shipping-hero-v143 p {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.flow-timeline-v143 {
  width: min(1100px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

@media (max-width: 900px) {
  .shipping-title-one-line-v143 {
    font-size: clamp(30px, 7.5vw, 58px) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  .shipping-title-one-line-v143 {
    font-size: clamp(23px, 8vw, 37px) !important;
    white-space: nowrap !important;
    letter-spacing: -.04em !important;
    padding: 0 4px !important;
  }
  .shipping-hero-v143 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 390px) {
  .shipping-title-one-line-v143 {
    font-size: clamp(20px, 7.2vw, 30px) !important;
  }
}


/* v146 — stronger shipping centering/proportions + gold numbered markers + green language switch */

/* No 327 gold anymore */
.brand-digit,
.brand-digits,
.gold-327 {
  color: inherit !important;
}

/* Numbered markers are gold again */
.simple-panel summary span,
.simple-panel-v143 summary span,
.process-grid article span,
.timeline-v141 article span,
.timeline-v142 article span,
.flow-step-num,
.flow-step-v143 .flow-step-num {
  color: #fbaf17 !important;
}

/* Accordion + / - stays green like the site */
.simple-panel summary::after,
.simple-panel-v143 summary::after {
  color: rgba(87,255,122,.92) !important;
}

/* Language buttons: active box green, not gold */
.simple-lang-switch .lang-button,
.language-switch .lang-button {
  border-color: rgba(255,255,255,.28) !important;
}
.simple-lang-switch .lang-button.is-active,
.language-switch .lang-button.is-active {
  background: rgba(87,255,122,.12) !important;
  border-color: rgba(87,255,122,.72) !important;
  color: rgba(87,255,122,.96) !important;
  box-shadow: 0 0 18px rgba(87,255,122,.08) !important;
}

/* Stronger clean layout for Livraison / Retours */
.simple-info-body {
  overflow-x: hidden !important;
}

.simple-info-page-v143 {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100svh !important;
  padding: clamp(76px, 8vh, 104px) clamp(20px, 4vw, 64px) 48px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Hero column smaller and perfectly centered */
.shipping-hero-v143,
.simple-hero-v143.shipping-hero-v143 {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 0 auto 34px !important;
  padding: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.clean-kicker {
  width: 100% !important;
  margin: 0 auto 14px !important;
  text-align: center !important;
  color: rgba(255,255,255,.62) !important;
}

/* Main title: visibly smaller, centered, no cutting */
.shipping-title-one-line-v143 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 22px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transform: none !important;
  font-size: clamp(34px, 4.25vw, 64px) !important;
  line-height: .96 !important;
  letter-spacing: -.012em !important;
}

.shipping-title-one-line-v143 [data-copy-fr],
.shipping-title-one-line-v143 [data-copy-en] {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.shipping-hero-v143 p {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(12px, 1.05vw, 15px) !important;
  line-height: 1.62 !important;
}

/* Timeline: smaller, aligned, centered under title */
.flow-timeline-v143 {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin: 34px auto 34px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.flow-arrow-v143 {
  display: none !important;
}

.flow-step-v143 {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 218px !important;
  padding: 17px 12px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(251,175,23,.055), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(0,0,0,.58) !important;
}

.flow-step-num {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  letter-spacing: .13em !important;
}

.flow-step-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 13px !important;
  font-size: 20px !important;
}

.flow-step-v143 h2 {
  min-height: 38px !important;
  margin: 0 0 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(14px, 1.08vw, 18px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.flow-step-v143 p {
  max-width: 145px !important;
  margin: 0 auto !important;
  font-size: clamp(10px, .72vw, 11.5px) !important;
  line-height: 1.48 !important;
  text-align: center !important;
}

/* Details block and bottom links align with same centered width */
.simple-panel-v143 {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin: 30px auto 0 !important;
}

.simple-bottom-actions-single {
  width: min(860px, 100%) !important;
  margin: 40px auto 0 !important;
  justify-content: center !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .shipping-hero-v143,
  .simple-hero-v143.shipping-hero-v143,
  .flow-timeline-v143 {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
  }

  .flow-timeline-v143 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .flow-step-v143 {
    min-height: 190px !important;
  }

  .flow-step-v143:last-child {
    grid-column: 1 / -1 !important;
    width: min(360px, 100%) !important;
    justify-self: center !important;
  }

  .shipping-title-one-line-v143 {
    font-size: clamp(32px, 6vw, 56px) !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .simple-info-page-v143 {
    padding: 70px 14px 36px !important;
  }

  .shipping-hero-v143,
  .simple-hero-v143.shipping-hero-v143 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .shipping-title-one-line-v143 {
    font-size: clamp(23px, 7.8vw, 36px) !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    padding: 0 2px !important;
  }

  .shipping-hero-v143 p {
    font-size: 11.5px !important;
  }

  .flow-timeline-v143 {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 26px !important;
  }

  .flow-step-v143,
  .flow-step-v143:last-child {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 15px !important;
  }

  .flow-step-v143 h2 {
    min-height: 0 !important;
  }

  .flow-step-v143 p {
    max-width: 280px !important;
    font-size: 11.5px !important;
  }

  .simple-bottom-actions-single {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .shipping-title-one-line-v143 {
    font-size: clamp(20px, 7.1vw, 29px) !important;
  }
}


/* v147 shipping marker + title cleanup */
.shipping-page-v147 .flow-step-num,
.shipping-page-v147 .simple-panel-v143 summary span {
  color: rgba(87,255,122,.92) !important;
}
.shipping-page-v147 .flow-step-num.is-gold,
.shipping-page-v147 .simple-panel-v143 summary span.is-gold {
  color: #fbaf17 !important;
}
.shipping-page-v147 .simple-panel-v143 summary::after {
  color: rgba(87,255,122,.92) !important;
}

/* clean, centered title */
.shipping-page-v147 .shipping-hero-v143 {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 auto 28px !important;
}
.shipping-page-v147 .clean-kicker {
  margin-bottom: 12px !important;
}
.shipping-page-v147 .shipping-title-one-line-v143 {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto 18px !important;
  padding: 0 8px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: clamp(26px, 3.15vw, 48px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
}
.shipping-page-v147 .shipping-hero-v143 p[data-copy-fr],
.shipping-page-v147 .shipping-hero-v143 p[data-copy-en] {
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: clamp(11px, .95vw, 14px) !important;
  line-height: 1.55 !important;
}
.shipping-page-v147 .flow-timeline-v143 {
  width: min(1080px, 100%) !important;
  max-width: 1080px !important;
  margin: 28px auto 30px !important;
  gap: 10px !important;
}
.shipping-page-v147 .flow-step-v143 {
  min-height: 205px !important;
  padding: 16px 11px !important;
}
.shipping-page-v147 .flow-step-v143 h2 {
  font-size: clamp(13px, 1vw, 17px) !important;
}
.shipping-page-v147 .flow-step-v143 p {
  font-size: clamp(10px, .7vw, 11px) !important;
  line-height: 1.45 !important;
}
.shipping-page-v147 .simple-panel-v143 {
  width: min(950px, 100%) !important;
  max-width: 950px !important;
  margin: 28px auto 0 !important;
}

@media (max-width: 1200px) {
  .shipping-page-v147 .shipping-title-one-line-v143 {
    font-size: clamp(24px, 3.8vw, 40px) !important;
  }
}
@media (max-width: 900px) {
  .shipping-page-v147 .shipping-title-one-line-v143 {
    font-size: clamp(22px, 5vw, 34px) !important;
  }
  .shipping-page-v147 .flow-timeline-v143 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shipping-page-v147 .flow-step-v143:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(340px, 100%) !important;
  }
}
@media (max-width: 640px) {
  .shipping-page-v147 .shipping-title-one-line-v143 {
    font-size: clamp(20px, 7vw, 28px) !important;
  }
  .shipping-page-v147 .flow-timeline-v143 {
    grid-template-columns: 1fr !important;
  }
  .shipping-page-v147 .flow-step-v143,
  .shipping-page-v147 .flow-step-v143:last-child {
    width: 100% !important;
  }
}


/* v148 — all markers green + separated FR/EN shipping titles */
.simple-panel summary span,
.simple-panel-v143 summary span,
.simple-panel summary span.is-gold,
.simple-panel-v143 summary span.is-gold,
.simple-panel summary::after,
.simple-panel-v143 summary::after,
.process-grid article span,
.timeline-v141 article span,
.timeline-v142 article span,
.flow-step-num,
.flow-step-v143 .flow-step-num,
.flow-step-num.is-gold,
.shipping-page-v147 .flow-step-num,
.shipping-page-v147 .flow-step-num.is-gold,
.shipping-page-v147 .simple-panel-v143 summary span,
.shipping-page-v147 .simple-panel-v143 summary span.is-gold {
  color: rgba(87,255,122,.92) !important;
}

.brand-digit,
.brand-digits,
.gold-327 {
  color: inherit !important;
}

/* Separate FR/EN shipping titles: only one h1 visible at a time */
.shipping-title-split-v148 {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto 18px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  overflow: visible !important;
}

.shipping-title-fr-v148,
.shipping-title-en-v148 {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: .96 !important;
  letter-spacing: -.025em !important;
  font-size: clamp(30px, 3.7vw, 58px) !important;
  color: #fff !important;
  text-shadow: 0 0 22px rgba(255,255,255,.08) !important;
}

/* Stronger than old generic data-copy rules */
.lang-fr .shipping-title-en-v148,
.lang-en .shipping-title-fr-v148 {
  display: none !important;
}

.lang-fr .shipping-title-fr-v148,
.lang-en .shipping-title-en-v148 {
  display: block !important;
}

.shipping-page-v147 .shipping-title-split-v148,
.shipping-hero-v143 .shipping-title-split-v148 {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.shipping-page-v147 .shipping-hero-v143,
.simple-hero-v143.shipping-hero-v143 {
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
  align-items: center !important;
}

.shipping-page-v147 .shipping-hero-v143 p[data-copy-fr],
.shipping-page-v147 .shipping-hero-v143 p[data-copy-en] {
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  .shipping-title-fr-v148,
  .shipping-title-en-v148 {
    font-size: clamp(26px, 5.5vw, 44px) !important;
  }
}

@media (max-width: 700px) {
  .shipping-title-split-v148 {
    padding: 0 4px !important;
  }

  .shipping-title-fr-v148,
  .shipping-title-en-v148 {
    font-size: clamp(22px, 7.5vw, 34px) !important;
    letter-spacing: -.04em !important;
  }
}

@media (max-width: 390px) {
  .shipping-title-fr-v148,
  .shipping-title-en-v148 {
    font-size: clamp(19px, 6.9vw, 29px) !important;
  }
}




/* v150 — shipping title moved further left on desktop */
.shipping-page-v147 .shipping-title-split-v148,
.shipping-page-v147 .shipping-title-fr-v148,
.shipping-page-v147 .shipping-title-en-v148 {
  position: relative !important;
}

.shipping-page-v147 .shipping-title-split-v148 {
  transform: translateX(-132px) !important;
}

@media (max-width: 1100px) {
  .shipping-page-v147 .shipping-title-split-v148 {
    transform: translateX(-78px) !important;
  }
}

@media (max-width: 700px) {
  .shipping-page-v147 .shipping-title-split-v148 {
    transform: translateX(0) !important;
  }
}


/* v151 — shipping title pushed further left for visual centering */


/* v152 — shipping title pushed further left again for visual centering */
.shipping-page-v147 .shipping-title-split-v148 {
  transform: translateX(-190px) !important;
}

@media (max-width: 1100px) {
  .shipping-page-v147 .shipping-title-split-v148 {
    transform: translateX(-112px) !important;
  }
}

@media (max-width: 820px) {
  .shipping-page-v147 .shipping-title-split-v148 {
    transform: translateX(-58px) !important;
  }
}

@media (max-width: 700px) {
  .shipping-page-v147 .shipping-title-split-v148 {
    transform: translateX(0) !important;
  }
}


/* v155 - bottom actions one line + drop policy monkey layout */
.simple-bottom-actions {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.simple-bottom-actions::-webkit-scrollbar {
  display: none;
}
.simple-bottom-actions a {
  white-space: nowrap;
  flex: 0 0 auto;
}

.policy-card h1 {
  text-align: left;
}
.policy-grid-monkey {
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 320px);
  align-items: center;
  gap: 26px;
}
.policy-copy {
  min-width: 0;
}
.policy-monkey-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.policy-monkey {
  display: block;
  width: min(100%, 290px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(251,175,23,.12));
}

@media (max-width: 700px) {
  .simple-bottom-actions {
    justify-content: flex-start !important;
    padding-bottom: 2px;
  }
  .simple-bottom-actions a {
    flex: 0 0 auto !important;
  }
  .policy-card h1 {
    text-align: center;
  }
  .policy-grid-monkey {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .policy-monkey {
    width: min(72vw, 260px);
  }
}


/* v156 - transparent monkey + consistent back link */
.policy-page > .story-back {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  top: max(18px, env(safe-area-inset-top));
  z-index: 1201;
}
.policy-monkey-wrap {
  align-self: center;
}
.policy-monkey {
  background: transparent !important;
  mix-blend-mode: normal;
}
@media (max-width: 700px) {
  .policy-page > .story-back {
    left: max(14px, env(safe-area-inset-left));
    top: max(14px, env(safe-area-inset-top));
  }
}


/* v157 - edge pills fixed + supplied transparent monkey */
.simple-bottom-actions {
  width: min(1100px, calc(100vw - 44px)) !important;
  padding-inline: 10px;
  box-sizing: border-box;
  overflow: visible;
}
.simple-bottom-actions-single {
  width: min(1180px, calc(100vw - 44px)) !important;
  padding-inline: 12px !important;
}
.simple-bottom-actions a {
  min-width: 0;
}
.simple-bottom-actions-single a {
  min-width: clamp(150px, 17vw, 255px);
}
.policy-monkey {
  width: min(100%, 320px);
  background: transparent !important;
}
@media (max-width: 900px) {
  .simple-bottom-actions,
  .simple-bottom-actions-single {
    width: calc(100vw - 24px) !important;
    padding-inline: 6px !important;
    gap: 8px !important;
  }
  .simple-bottom-actions-single a {
    min-width: clamp(120px, 21vw, 220px);
    padding-inline: 12px;
  }
}
@media (max-width: 700px) {
  .simple-bottom-actions,
  .simple-bottom-actions-single {
    width: calc(100vw - 16px) !important;
    padding-inline: 2px !important;
    gap: 8px !important;
    overflow-x: auto;
    justify-content: flex-start !important;
    scroll-padding-inline: 10px;
  }
  .simple-bottom-actions-single {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .simple-bottom-actions a,
  .simple-bottom-actions-single a {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    white-space: nowrap;
    padding: 12px 16px !important;
  }
  .policy-monkey {
    width: min(74vw, 280px);
  }
}


/* v158 - drop policy back link aligned top-left like other info pages */
.policy-page { position: relative; }
.policy-page .story-back {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  z-index: 1300 !important;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 700px) {
  .policy-page .story-back {
    left: max(10px, env(safe-area-inset-left)) !important;
    top: max(10px, env(safe-area-inset-top)) !important;
  }
}



/* v162 — removed About / Legal / Drop List, keep clean one-line info buttons */
.info-actions-v162 {
  width: min(1100px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px) !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: center !important;
  padding: 0 8px 2px !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.info-actions-v162::-webkit-scrollbar {
  display: none;
}
.info-actions-v162 a {
  min-width: max-content !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
@media (max-width: 700px) {
  .info-actions-v162 {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    justify-content: flex-start !important;
  }
}


/* v168 — mobile restore from v162: tap-to-flip, all info buttons, clean starters */

/* Mobile: keep TAP TO FLIP / TOUCHE POUR RETOURNER visible on every t-shirt */
@media (max-width: 700px) {
  .page.product-page {
    padding-bottom: 96px !important;
  }

  .product-card .tap-flip-hint,
  body.has-flipped-shirt .tap-flip-hint,
  body.flip-hint-seen .tap-flip-hint {
    display: block !important;
    opacity: .94 !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -31px !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 92vw !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(87,255,122,.36) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.74) !important;
    color: rgba(255,255,255,.92) !important;
    font: 800 clamp(6.5px, 1.85vw, 8px)/1 "Courier New", monospace !important;
    letter-spacing: .07em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 14px rgba(87,255,122,.10) !important;
  }
}

/* FAQ / Livraison / Politique: all bottom cases visible, smaller on mobile */
.info-actions-v168 {
  width: min(1120px, calc(100vw - 42px)) !important;
  max-width: calc(100vw - 42px) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  padding: 0 6px 2px !important;
}

.info-actions-v168 a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

@media (max-width: 700px) {
  .info-actions-v168 {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    gap: 4px !important;
    padding: 0 2px 2px !important;
    overflow: visible !important;
  }

  .info-actions-v168 a {
    padding: 9px 6px !important;
    font-size: clamp(6px, 1.62vw, 7px) !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }
}

/* v169 — mobile: drop policy recadrée légèrement à gauche + tap-to-flip bien visible */
@media (max-width: 700px) {
  body.policy-body .policy-page {
    transform: translateX(-7px) !important;
    width: calc(100vw + 7px) !important;
    max-width: calc(100vw + 7px) !important;
  }

  body.policy-body .policy-page .policy-card {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }

  .page.product-page .product-card .tap-flip-hint,
  body.has-flipped-shirt .page.product-page .product-card .tap-flip-hint,
  body.flip-hint-seen .page.product-page .product-card .tap-flip-hint {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .98 !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -32px !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 94vw !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(87,255,122,.42) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.78) !important;
    color: rgba(255,255,255,.94) !important;
    font: 850 clamp(6.5px, 1.9vw, 8px)/1 "Courier New", monospace !important;
    letter-spacing: .065em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 16px rgba(87,255,122,.12) !important;
  }
}


/* v170 — FORCE mobile tap-to-flip visible, even if old hint is clipped/hidden */
@media (max-width: 700px) {
  .page.product-page {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 126px !important;
  }

  .page.product-page::after {
    content: "TAP TO FLIP / TOUCHE POUR RETOURNER" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 92px !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(87,255,122,.64) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.90) !important;
    color: #fff !important;
    font: 950 clamp(7px, 2.15vw, 9px)/1 "Courier New", monospace !important;
    letter-spacing: .07em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 0 8px rgba(87,255,122,.35) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.65),
      0 0 18px rgba(87,255,122,.20),
      0 12px 28px rgba(0,0,0,.42) !important;
    pointer-events: none !important;
  }

  .page.product-page .product-card {
    overflow: visible !important;
  }

  .page.product-page .product-card .tap-flip-hint,
  body.has-flipped-shirt .page.product-page .product-card .tap-flip-hint,
  body.flip-hint-seen .page.product-page .product-card .tap-flip-hint {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -44px !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(87,255,122,.64) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.90) !important;
    color: #fff !important;
    font: 950 clamp(7px, 2.15vw, 9px)/1 "Courier New", monospace !important;
    letter-spacing: .07em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 0 8px rgba(87,255,122,.35) !important;
    box-shadow:
      0 0 0 1px rgba(0,0,0,.65),
      0 0 18px rgba(87,255,122,.20),
      0 12px 28px rgba(0,0,0,.42) !important;
  }
}



/* v177 — mobile story welcome positions based on user screenshot (from v175 base, not v176) */
@media (max-width: 700px) {
  .story-body #welcomeScreen {
    position: relative !important;
  }

  .story-body #welcomeScreen .buy-intro__prompt--title {
    position: absolute !important;
    left: 50% !important;
    top: 70.5% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 360px) !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 10 !important;
  }

  .story-body #welcomeScreen .buy-intro__copyright {
    position: absolute !important;
    left: 50% !important;
    top: 80.5% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 56px) !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 10 !important;
  }
}

/* v178 — welcome screen prompt + copyright stacked clearly */
.story-body #welcomeScreen .buy-intro__prompt--title {
  position: absolute !important;
  left: 50% !important;
  top: 70% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(90vw, 520px) !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 20 !important;
}

.story-body #welcomeScreen .buy-intro__copyright {
  position: absolute !important;
  left: 50% !important;
  top: calc(70% + 42px) !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: max-content !important;
  max-width: calc(100vw - 40px) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 20 !important;
}

@media (max-width: 700px) {
  .story-body #welcomeScreen .buy-intro__prompt--title {
    top: 71.5% !important;
    width: min(88vw, 360px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .story-body #welcomeScreen .buy-intro__copyright {
    top: calc(71.5% + 34px) !important;
    max-width: calc(100vw - 56px) !important;
  }
}


/* v179 — mobile welcome screen: FORCE visible prompt + copyright in the exact lower zones */
@media (max-width: 700px) {
  .story-body #welcomeScreen {
    position: relative !important;
    overflow: visible !important;
  }

  .story-body #welcomeScreen #welcomePrompt {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 50% !important;
    top: 65svh !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 380px) !important;
    max-width: calc(100vw - 42px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
    color: rgba(255,255,255,.96) !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    font-family: "Press Start 2P", "Courier New", monospace !important;
    font-size: clamp(7px, 2.05vw, 9px) !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    text-shadow:
      0 2px 0 rgba(0,0,0,.82),
      0 0 12px rgba(255,255,255,.18) !important;
    pointer-events: none !important;
    animation: buyIntroContinueBlink 2.1s ease-in-out infinite !important;
  }

  .story-body #welcomeScreen #welcomeSub {
    display: block !important;
    visibility: visible !important;
    opacity: .86 !important;
    position: fixed !important;
    left: 50% !important;
    top: 76svh !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 54px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99998 !important;
    color: rgba(255,255,255,.58) !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    font-family: "Press Start 2P", "Courier New", monospace !important;
    font-size: clamp(6px, 1.75vw, 7.5px) !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.82) !important;
    pointer-events: none !important;
  }
}


/* v180 — FIX: the old welcome prompt/copyright was trapped by title-copy mobile stacking.
   This direct overlay is inside #welcomeScreen, above every decorative layer. */
.welcome-forced-copy-v180 {
  display: none;
}

@media (max-width: 700px) {
  .story-body #welcomeScreen {
    position: relative !important;
  }

  /* Hide old elements on mobile to avoid duplicates if a browser finally renders them. */
  .story-body #welcomeScreen #welcomePrompt,
  .story-body #welcomeScreen #welcomeSub {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .story-body #welcomeScreen .welcome-forced-copy-v180 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  .story-body #welcomeScreen .welcome-forced-prompt-v180 {
    position: absolute !important;
    left: 50% !important;
    top: 69% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    width: min(90vw, 390px) !important;
    max-width: calc(100vw - 34px) !important;
    color: #ffffff !important;
    font-family: "Press Start 2P", "Courier New", monospace !important;
    font-size: clamp(8px, 2.35vw, 10px) !important;
    line-height: 1.35 !important;
    letter-spacing: .035em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    text-shadow:
      0 2px 0 rgba(0,0,0,.95),
      0 0 12px rgba(255,255,255,.22) !important;
    animation: buyIntroContinueBlink 2.05s ease-in-out infinite !important;
  }

  .story-body #welcomeScreen .welcome-forced-copyright-v180 {
    position: absolute !important;
    left: 50% !important;
    top: 80.5% !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    width: max-content !important;
    max-width: calc(100vw - 44px) !important;
    color: rgba(255,255,255,.70) !important;
    font-family: "Press Start 2P", "Courier New", monospace !important;
    font-size: clamp(6px, 1.75vw, 8px) !important;
    line-height: 1.25 !important;
    letter-spacing: .035em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow:
      0 2px 0 rgba(0,0,0,.95),
      0 0 10px rgba(255,255,255,.12) !important;
  }
}


/* v182 - remove visible black-box / color difference behind shirts */
.story-scene.is-choice,
.story-scene.is-choice .starter-row,
.story-scene.is-choice .starter-card,
.story-scene.is-choice .starter-card .starter-preview,
.product-card,
.product-card .product-front,
.product-card .product-back,
.product-card .product-shirt,
.shirt-viewer,
.shirt-viewer img {
  background: transparent !important;
  background-color: transparent !important;
}

.story-scene.is-choice {
  background: #000 !important;
}

.story-scene.is-choice .starter-preview,
.product-card .product-shirt,
.shirt-viewer img {
  image-rendering: auto !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.story-scene.is-choice .starter-card-black .starter-preview,
.story-scene.is-choice .starter-card-black.is-selected .starter-preview,
.story-scene.is-choice .starter-card-black:active .starter-preview,
.story-scene.is-choice .starter-card-black.is-touch-hover .starter-preview {
  filter: none !important;
}