/* ═══════════════════════════════════════════════════════════
   welcome.css: the marketing page a first-time visitor lands on.

   It sits in front of the game rather than beside it: the same index.html,
   the same scripts loading underneath, so "Enter the Front Office" is
   instant. Nothing here styles the game. Everything is scoped to .mkt, and
   the only rules that reach outside it are the html.mkt-on ones at the top,
   which put the game's own screens away while the page is up.

   Who sees it is decided before first paint by the small script in the head
   of index.html (html.mkt-on). welcome.js does the rest: reveals, the
   pinned feature tour, the scroll progress ball, the trailer, and the
   hand-off into the game. The basketball cursor is CSS alone (below).

   Motion is transform and opacity only, and all of it stops under
   prefers-reduced-motion. Phone first: 720px is the main cutoff, as in
   style.css; tap targets 44px; nothing wider than the screen.
   ═══════════════════════════════════════════════════════════ */

/* ── the page is up: the game waits underneath ── */
.mkt { display: none; }
html.mkt-on .mkt { display: block; }
html.mkt-on body > .screen,
html.mkt-on #a2hs,
html.mkt-on #mnav { display: none !important; }
html.mkt-on body { overflow-x: hidden; }
html.mkt-on { scroll-behavior: smooth; }

/* ── a signed-in visit: the save files open in place of the title screen ──
   The head marks it (html.rtf-in) and app.js clears the mark once the save
   files (or, for a lapsed session, this page) are up. Until then the title and
   the install card stay out of sight, so neither flashes first. If the mark is
   never cleared (a script failed to load), they come back after a few seconds
   rather than leave an empty screen. */
html.rtf-in #screen-title,
html.rtf-in #a2hs { visibility: hidden; animation: rtf-in-failsafe 0s 6s forwards; }
@keyframes rtf-in-failsafe { to { visibility: visible; } }

.mkt {
  --mkt-orange: var(--acc, #ff6b2c);
  --mkt-orange-hot: var(--acc-hot, #ff8a4d);
  --mkt-orange-rgb: var(--acc-rgb, 255,107,44);
  --mkt-gold: #ffd166;
  --mkt-ink: #05070f;
  --mkt-navy: #0a1024;
  --mkt-text: #f2f5fd;
  --mkt-dim: #9aa4bd;
  --mkt-faint: #67718c;
  --mkt-line: rgba(255,255,255,.11);
  --mkt-glass: rgba(255,255,255,.05);
  --mkt-display: 'Outfit', 'Archivo', system-ui, sans-serif;
  --mkt-block: 'Bebas Neue', 'Outfit', sans-serif;
  --mkt-body: 'Archivo', system-ui, sans-serif;
  --mkt-gutter: max(20px, 4vw);
  --mkt-max: 1240px;
  position: relative; z-index: 2; overflow-x: clip;
  color: var(--mkt-text); font-family: var(--mkt-body);
  background: var(--mkt-ink);
  -webkit-font-smoothing: antialiased;
}
.mkt *, .mkt *::before, .mkt *::after { box-sizing: border-box; }
.mkt img, .mkt video { display: block; max-width: 100%; }
.mkt a { color: inherit; }
.mkt section { position: relative; }
.mkt-wrap { width: min(var(--mkt-max), 100% - 2 * var(--mkt-gutter)); margin-inline: auto; }

/* ── scroll progress: a hairline across the top, a ball rolling along it ── */
.mkt-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.mkt-progress i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--mkt-p, 0));
  background: linear-gradient(90deg, var(--mkt-orange), var(--mkt-gold));
  box-shadow: 0 0 14px rgba(var(--mkt-orange-rgb), .7);
}
.mkt-progress b {
  position: absolute; top: -5px; left: 0; width: 13px; height: 13px; border-radius: 50%;
  transform: translateX(calc(var(--mkt-p, 0) * (100vw - 13px))) rotate(calc(var(--mkt-p, 0) * 1440deg));
  background: radial-gradient(circle at 32% 30%, #ffb07a, var(--mkt-orange) 55%, #b8420f);
  box-shadow: 0 0 10px rgba(var(--mkt-orange-rgb), .8);
}
.mkt-progress b::before, .mkt-progress b::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(20,8,2,.55); clip-path: inset(0 45% 0 45%);
}
.mkt-progress b::after { clip-path: inset(45% 0 45% 0); }

/* ── nav ── */
.mkt-nav {
  position: fixed; top: calc(12px + var(--safe-t, 0px)); left: 50%; z-index: 50;
  width: min(var(--mkt-max), 100% - 2 * var(--mkt-gutter));
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 18px;
  padding: 10px 10px 10px 18px; border-radius: 999px;
  background: rgba(8,11,24,.35); border: 1px solid transparent;
  transition: background .4s, border-color .4s, box-shadow .4s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.mkt-nav.is-solid {
  background: rgba(8,11,24,.72); border-color: var(--mkt-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.mkt-nav.is-away { transform: translate(-50%, calc(-100% - 24px)); }
.mkt-brand { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; min-height: 44px; min-width: 44px; }
.mkt-brand img { height: 30px; width: auto; }
.mkt-brand span { font-family: var(--mkt-display); font-weight: 700; letter-spacing: -.01em; font-size: 16px; white-space: nowrap; }
.mkt-brand b { color: var(--mkt-orange); font-weight: 700; }
.mkt-links { display: flex; gap: 4px; margin-left: auto; }
.mkt-links a {
  text-decoration: none; font-size: 14px; font-weight: 600; color: var(--mkt-dim);
  padding: 12px 14px; border-radius: 999px; transition: color .2s, background .2s;
}
.mkt-links a:hover { color: var(--mkt-text); background: rgba(255,255,255,.06); }
.mkt-nav .mkt-nav-cta { min-height: 44px; padding: 0 22px; font-size: 14px; white-space: nowrap; }

/* ── buttons: the game's own primary, with the shine the theme already has ── */
.mkt .mkt-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
  color: var(--mkt-text); font: 600 15px/1 var(--mkt-body); cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.mkt .mkt-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.mkt .mkt-ghost .mkt-play-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mkt-orange); box-shadow: 0 0 0 0 rgba(var(--mkt-orange-rgb), .6);
  animation: mkt-pulse 2.4s infinite;
}
.mkt .mkt-ghost .mkt-play-dot svg { width: 12px; height: 12px; margin-left: 2px; fill: #fff; }
@keyframes mkt-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--mkt-orange-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(var(--mkt-orange-rgb), 0); } }
.mkt .mkt-cta { min-height: 56px; }

/* ── hero ── */
.mkt-hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(120px + var(--safe-t, 0px)) 0 calc(92px + var(--safe-b, 0px));
  overflow: hidden; isolation: isolate;
}
.mkt-hero-media {
  position: absolute; inset: 0; z-index: -1;
  transform: scale(calc(1 - var(--mkt-h, 0) * .06)); transform-origin: 50% 30%;
  border-radius: calc(var(--mkt-h, 0) * 36px); overflow: hidden;
}
.mkt-hero-media img, .mkt-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mkt-hero-video { opacity: 0; transition: opacity 1.2s ease; }
.mkt-hero-video.is-playing { opacity: 1; }
.mkt-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,15,.78) 0%, rgba(5,7,15,.4) 40%, rgba(5,7,15,0) 68%),
    radial-gradient(120% 70% at 50% 110%, rgba(5,7,15,.95) 20%, rgba(5,7,15,0) 70%),
    linear-gradient(180deg, rgba(5,7,15,.55) 0%, rgba(5,7,15,.1) 30%, rgba(5,7,15,.55) 70%, var(--mkt-ink) 100%);
}
.mkt-hero-copy {
  width: min(var(--mkt-max), 100% - 2 * var(--mkt-gutter)); margin-inline: auto;
  transform: translateY(calc(var(--mkt-h, 0) * -60px)); opacity: calc(1 - var(--mkt-h, 0) * 1.4);
}
.mkt-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1 var(--mkt-body); letter-spacing: .22em; color: var(--mkt-orange);
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(var(--mkt-orange-rgb), .32);
  background: linear-gradient(rgba(var(--mkt-orange-rgb), .12), rgba(var(--mkt-orange-rgb), .12)), rgba(5,7,15,.62);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mkt-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mkt-orange); box-shadow: 0 0 12px var(--mkt-orange); animation: mkt-blink 1.6s infinite; }
@keyframes mkt-blink { 50% { opacity: .35; } }
.mkt-title {
  margin: 22px 0 0; font-family: var(--mkt-display); font-weight: 800; letter-spacing: -.045em;
  font-size: clamp(56px, 11.5vw, 176px); line-height: .86; text-transform: uppercase;
}
.mkt-line { display: block; overflow: hidden; padding-bottom: .04em; }
.mkt-line > span { display: inline-block; transform: translateY(105%); animation: mkt-rise 1.1s cubic-bezier(.16,1,.3,1) forwards; }
.mkt-line + .mkt-line > span { animation-delay: .12s; }
.mkt-accent > span {
  background: linear-gradient(95deg, var(--mkt-orange) 10%, var(--mkt-gold) 55%, var(--mkt-orange-hot) 90%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mkt-rise 1.1s .12s cubic-bezier(.16,1,.3,1) forwards, mkt-sheen 6s 1.4s ease-in-out infinite;
}
/* the glow is its own layer: a filter on clipped text drew a box behind the word */
.mkt-accent { position: relative; }
.mkt-accent::after {
  content: ''; position: absolute; inset: 22% 8% 10% 2%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--mkt-orange-rgb), .38), transparent);
  filter: blur(34px); opacity: 0; animation: mkt-in 1.4s .5s ease forwards;
}
@keyframes mkt-rise { to { transform: translateY(0); } }
@keyframes mkt-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.mkt-lede { max-width: 620px; margin: 26px 0 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: #d6dcec; }
.mkt-lede b { color: var(--mkt-text); }
.mkt-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mkt-note { margin: 18px 0 0; font-size: 13px; color: var(--mkt-dim); letter-spacing: .02em; }
.mkt-hero .mkt-in { opacity: 0; transform: translateY(18px); animation: mkt-in .9s cubic-bezier(.16,1,.3,1) forwards; }
.mkt-hero .mkt-in:nth-child(1) { animation-delay: .05s; }
.mkt-hero .mkt-lede.mkt-in { animation-delay: .5s; }
.mkt-hero .mkt-cta-row.mkt-in { animation-delay: .65s; }
.mkt-hero .mkt-note.mkt-in { animation-delay: .8s; }
@keyframes mkt-in { to { opacity: 1; transform: none; } }
.mkt-scroll {
  position: absolute; left: 50%; bottom: calc(22px + var(--safe-b, 0px)); transform: translateX(-50%);
  width: 44px; height: 64px; display: grid; place-items: end center; text-decoration: none;
}
.mkt-scroll::before { content: ''; position: absolute; bottom: 0; width: 26px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.6); animation: mkt-shadow 1.1s ease-in infinite alternate; }
.mkt-scroll span {
  width: 20px; height: 20px; border-radius: 50%; margin-bottom: 6px;
  background: radial-gradient(circle at 32% 30%, #ffb07a, var(--mkt-orange) 55%, #b8420f);
  animation: mkt-bounce 1.1s cubic-bezier(.5,0,.8,.5) infinite alternate;
}
@keyframes mkt-bounce { from { transform: translateY(-34px); } to { transform: translateY(0) scaleY(.88); } }
@keyframes mkt-shadow { from { transform: scale(.45); opacity: .3; } to { transform: scale(1); opacity: .9; } }

/* ── the ticker ── */
.mkt-ticker {
  overflow: hidden; border-block: 1px solid var(--mkt-line);
  background: linear-gradient(90deg, rgba(var(--mkt-orange-rgb), .08), rgba(255,209,102,.05), rgba(var(--mkt-orange-rgb), .08));
  transform: rotate(-1.2deg) scale(1.02); margin: 10px 0 0;
}
.mkt-ticker-track { display: flex; width: max-content; animation: mkt-marquee 38s linear infinite; }
.mkt-ticker-track span {
  font: 400 clamp(26px, 3.4vw, 44px)/1 var(--mkt-block); letter-spacing: .06em; padding: 18px 0; white-space: nowrap;
  color: var(--mkt-text);
}
.mkt-ticker-track i { font-style: normal; color: var(--mkt-orange); padding: 0 .8em; }
@keyframes mkt-marquee { to { transform: translateX(-50%); } }

/* ── the statement: words light up as it scrolls past ── */
.mkt-intro { padding: clamp(110px, 16vw, 200px) 0 clamp(80px, 10vw, 140px); }
.mkt-words {
  margin: 0; font-family: var(--mkt-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12; max-width: 1080px;
}
.mkt-words .w { opacity: .14; transition: opacity .35s linear, color .35s linear; }
.mkt-words .w.on { opacity: 1; }
.mkt-words .w.hot.on { color: var(--mkt-orange); }

/* ── numbers ── */
.mkt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: clamp(90px, 12vw, 160px); }
.mkt-stat {
  padding: 26px 22px; border-radius: 22px; background: var(--mkt-glass); border: 1px solid var(--mkt-line);
  position: relative; overflow: hidden;
}
.mkt-stat::after {
  content: ''; position: absolute; inset: auto -30% -60% -30%; height: 90%;
  background: radial-gradient(closest-side, rgba(var(--mkt-orange-rgb), .16), transparent);
}
.mkt-stat b { display: block; font: 400 clamp(54px, 6vw, 86px)/.9 var(--mkt-block); color: var(--mkt-text); letter-spacing: .01em; }
.mkt-stat b sup { font-size: .42em; color: var(--mkt-orange); vertical-align: top; margin-left: 2px; }
.mkt-stat span { display: block; margin-top: 10px; font-size: 14px; color: var(--mkt-dim); line-height: 1.4; }

/* ── section headings ── */
.mkt-eyebrow { font: 700 12px/1 var(--mkt-body); letter-spacing: .24em; color: var(--mkt-orange); text-transform: uppercase; }
.mkt-h2 {
  margin: 16px 0 0; font-family: var(--mkt-display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(40px, 6vw, 86px); line-height: .95; text-transform: uppercase;
}
.mkt-h2 em { font-style: normal; color: var(--mkt-orange); }
.mkt-sub { margin: 18px 0 0; max-width: 560px; color: var(--mkt-dim); font-size: 17px; line-height: 1.55; }

/* ── the pinned feature tour ── */
.mkt-tour { padding: 40px 0 40px; }
.mkt-tour-head { margin-bottom: clamp(30px, 5vw, 60px); }
.mkt-tour-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); }
/* centred in the window: the device is 62.5% of the wrap wide and 16:10, so half its height is ~.184 of the wrap */
.mkt-stage { position: sticky; top: max(calc(96px + var(--safe-t, 0px)), calc(50vh - min(1240px, 92vw) * .184)); align-self: start; }
.mkt-device {
  position: relative; aspect-ratio: 16 / 10; border-radius: 26px; padding: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 80px rgba(var(--mkt-orange-rgb), .08);
  transform: perspective(1400px) rotateY(calc(var(--mkt-tilt-x, 0) * 1deg)) rotateX(calc(var(--mkt-tilt-y, 0) * 1deg));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.mkt-screen { position: relative; height: 100%; border-radius: 16px; overflow: hidden; background: #070a16; }
.mkt-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.04) translateY(14px); filter: blur(6px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.mkt-screen img.on { opacity: 1; transform: none; filter: none; }
.mkt-screen img.phone-shot { display: none; }
.mkt-stage-glow {
  position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--mkt-orange-rgb), .22), transparent 70%);
  filter: blur(20px); transition: background .6s;
}
.mkt-steps { display: flex; flex-direction: column; }
.mkt-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; opacity: .28; transition: opacity .5s; }
.mkt-step.on { opacity: 1; }
.mkt-step-n { font: 400 22px/1 var(--mkt-block); letter-spacing: .12em; color: var(--mkt-orange); }
.mkt-step h3 { margin: 12px 0 0; font-family: var(--mkt-display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; text-transform: uppercase; }
.mkt-step p { margin: 16px 0 0; color: var(--mkt-dim); font-size: 17px; line-height: 1.6; max-width: 460px; }
.mkt-step .mkt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mkt-tags span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--mkt-line); color: #cfd6e8;
}
.mkt-step-shot { display: none; }

/* ── game night: the live court, zooming in as it arrives ── */
.mkt-live { padding: clamp(90px, 12vw, 170px) 0; overflow: hidden; }
.mkt-live-frame {
  margin-top: 44px; border-radius: 28px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.14); background: #070a16;
  box-shadow: 0 50px 140px rgba(0,0,0,.6), 0 0 120px rgba(var(--mkt-orange-rgb), .12);
  transform: scale(calc(.86 + var(--mkt-z, 0) * .14)); transform-origin: 50% 0;
}
.mkt-live-frame video, .mkt-live-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mkt-live-badge {
  position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: rgba(5,7,15,.7); border: 1px solid var(--mkt-line);
  font: 700 12px/1 var(--mkt-body); letter-spacing: .14em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mkt-live-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: mkt-blink 1.2s infinite; }

/* ── collect: packs and your players in gold ── */
.mkt-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: clamp(90px, 12vw, 160px); }
.mkt-card {
  position: relative; border-radius: 26px; overflow: hidden; padding: 30px 30px 0;
  background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--mkt-line); isolation: isolate;
  transform: perspective(1200px) rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s;
}
.mkt-card:hover { border-color: rgba(var(--mkt-orange-rgb), .45); }
.mkt-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--mkt-orange-rgb), .16), transparent 60%);
}
.mkt-card:hover::before { opacity: 1; }
.mkt-card h3 { margin: 0; font-family: var(--mkt-display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(28px, 2.8vw, 40px); text-transform: uppercase; line-height: 1; }
.mkt-card p { margin: 12px 0 0; color: var(--mkt-dim); font-size: 16px; line-height: 1.55; max-width: 440px; }
.mkt-card-shot { margin: 26px -6px 0; border-radius: 16px 16px 0 0; overflow: hidden; border: 1px solid var(--mkt-line); border-bottom: 0; }
.mkt-card-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.mkt-card:hover .mkt-card-shot img { transform: scale(1.04); }
.mkt-card.gold h3 em { font-style: normal; color: var(--mkt-gold); }

/* ── how it works: a court line that draws itself ── */
.mkt-how { padding: clamp(40px, 6vw, 80px) 0 clamp(100px, 13vw, 180px); }
.mkt-how-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.mkt-how-line { position: absolute; left: 0; right: 0; top: 38px; height: 60px; width: 100%; overflow: visible; pointer-events: none; }
.mkt-how-line path { fill: none; stroke: var(--mkt-orange); stroke-width: 2; stroke-dasharray: var(--len, 1200); stroke-dashoffset: calc(var(--len, 1200) * (1 - var(--mkt-d, 0))); filter: drop-shadow(0 0 6px rgba(var(--mkt-orange-rgb), .8)); }
.mkt-how-step { position: relative; padding: 0 6px; }
.mkt-how-dot {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  font: 400 34px/1 var(--mkt-block); color: var(--mkt-text);
  background: radial-gradient(circle at 32% 28%, #1c2440, #0b1022); border: 1px solid rgba(var(--mkt-orange-rgb), .5);
  box-shadow: 0 0 0 8px var(--mkt-ink), 0 0 30px rgba(var(--mkt-orange-rgb), .25);
}
.mkt-how-step h3 { margin: 22px 0 0; font-family: var(--mkt-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; text-transform: uppercase; }
.mkt-how-step p { margin: 10px 0 0; color: var(--mkt-dim); line-height: 1.6; font-size: 16px; max-width: 330px; }

/* ── PRO ── */
.mkt-pro { padding: 0 0 clamp(100px, 13vw, 180px); }
.mkt-pro-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center;
  padding: clamp(28px, 5vw, 64px); border-radius: 32px; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255,209,102,.16), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(var(--mkt-orange-rgb), .16), transparent 60%),
    linear-gradient(160deg, #10162c, #070a16);
  border: 1px solid rgba(255,209,102,.28);
}
.mkt-pro-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.02) 22px 23px);
}
.mkt-price { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; }
.mkt-price b { font: 400 clamp(64px, 8vw, 110px)/.85 var(--mkt-block); color: var(--mkt-gold); letter-spacing: .01em; }
.mkt-price span { color: var(--mkt-dim); font-size: 15px; }
.mkt-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mkt-perks li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--mkt-line);
}
.mkt-perks .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(255,209,102,.1); }
.mkt-perks b { display: block; font-size: 15px; }
.mkt-perks small { display: block; margin-top: 3px; color: var(--mkt-dim); font-size: 13px; }

/* ── the last word ── */
.mkt-final { padding: clamp(110px, 15vw, 200px) 0; text-align: center; overflow: hidden; isolation: isolate; }
.mkt-final::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(var(--mkt-orange-rgb), .28), transparent 70%),
    radial-gradient(35% 45% at 50% 100%, rgba(255,209,102,.18), transparent 70%);
}
.mkt-court {
  position: absolute; left: 50%; bottom: -40%; width: min(1100px, 150vw); aspect-ratio: 1; z-index: -1; transform: translateX(-50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 120px rgba(255,255,255,.012), 0 0 0 121px rgba(255,255,255,.06);
}
.mkt-final .mkt-h2 { font-size: clamp(48px, 9vw, 140px); }
.mkt-final .mkt-sub { margin-inline: auto; }
.mkt-final .mkt-cta-row { justify-content: center; }

/* ── footer ── */
.mkt-foot { border-top: 1px solid var(--mkt-line); padding: 36px 0 calc(36px + var(--safe-b, 0px)); }
.mkt-foot .mkt-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mkt-foot small { color: var(--mkt-faint); font-size: 13px; }
.mkt-foot nav { margin-left: auto; display: flex; gap: 6px; }
.mkt-foot nav button, .mkt-foot nav a {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: none; color: var(--mkt-dim);
  font: 600 14px/44px var(--mkt-body); cursor: pointer; text-decoration: none;
}
.mkt-foot nav button:hover, .mkt-foot nav a:hover { color: var(--mkt-text); background: rgba(255,255,255,.05); }

/* ── reveals ── */
html.mkt-js .mkt [data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .9s ease; transition-delay: calc(var(--i, 0) * 90ms); }
html.mkt-js .mkt [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ── the trailer ── */
.mkt-trailer {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px;
  background: rgba(3,5,12,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .35s;
}
.mkt-trailer[hidden] { display: none; }
.mkt-trailer.open { opacity: 1; }
.mkt-trailer video {
  width: min(1200px, 100%); max-height: calc(100vh - 120px); border-radius: 18px; background: #000;
  box-shadow: 0 40px 140px rgba(0,0,0,.7); transform: scale(.94); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.mkt-trailer.open video { transform: none; }
.mkt-trailer-x {
  position: absolute; top: calc(16px + var(--safe-t, 0px)); right: calc(16px + var(--safe-r, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  color: #fff; font-size: 22px; cursor: pointer;
}

/* ── into the game: an orange tip-off wipe from wherever it was pressed ── */
.mkt-wipe {
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  background: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%), #ffb07a 0%, var(--acc, #ff6b2c) 35%, #7a2508 100%);
  clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%));
  transition: clip-path .62s cubic-bezier(.7,0,.2,1), opacity .45s ease;
}
.mkt-wipe.grow { clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 50%)); }
.mkt-wipe.fade { opacity: 0; }

/* ── the basketball cursor ──
   A plain pointer image that the browser draws itself, so it sits exactly on
   the mouse and never lags, rolls or fades out, over the trailer too. Mouse
   only, and scoped to html.mkt-on, so the game gets its normal cursor back
   the moment the page is put away. The 2x image keeps it sharp on retina
   screens; a browser that cannot read image-set() keeps the 1x line. */
@media (hover: hover) and (pointer: fine) {
  html.mkt-on .mkt, html.mkt-on .mkt * {
    cursor: url("assets/welcome/cursor-ball.png") 16 16, auto !important;
    cursor: -webkit-image-set(url("assets/welcome/cursor-ball.png") 1x, url("assets/welcome/cursor-ball-2x.png") 2x) 16 16, auto !important;
    cursor: image-set(url("assets/welcome/cursor-ball.png") 1x, url("assets/welcome/cursor-ball-2x.png") 2x) 16 16, auto !important;
  }
}

/* ── the game's title screen: a way back to the tour for returning players ── */
.title-tour {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 12px;
  color: var(--text-dim, #9aa4bd); font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .02em;
}
.title-tour:hover { color: var(--text, #f2f5fd); }

/* ═════════ phones and small tablets ═════════ */
@media (max-width: 960px) {
  .mkt-links { display: none; }
  .mkt-nav .mkt-nav-cta { margin-left: auto; }
  .mkt-stats { grid-template-columns: repeat(2, 1fr); }
  .mkt-tour-grid { grid-template-columns: minmax(0, 1fr); }   /* 1fr would let a screenshot's own width set the column */
  .mkt-stage { display: none; }
  .mkt-step { min-height: 0; opacity: 1; padding: 0 0 64px; }
  .mkt-step-shot {
    display: block; margin-top: 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--mkt-line);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
  }
  .mkt-step-shot img { width: 100%; height: auto; }
  .mkt-duo { grid-template-columns: 1fr; }
  .mkt-how-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
  .mkt-how-line { display: none; }
  .mkt-how-step { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; align-items: start; }
  .mkt-how-dot { width: 64px; height: 64px; font-size: 28px; grid-row: span 2; }
  .mkt-how-step h3 { margin-top: 6px; }
  .mkt-pro-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mkt { --mkt-gutter: 16px; }
  .mkt-nav { top: calc(8px + var(--safe-t, 0px)); padding: 6px 6px 6px 12px; gap: 10px; }
  .mkt-brand img { height: 26px; }
  .mkt-brand span { font-size: 14px; }
  .mkt-nav .mkt-nav-cta { padding: 0 16px; font-size: 13px; }
  .mkt-hero { align-items: end; padding-top: calc(96px + var(--safe-t, 0px)); padding-bottom: calc(96px + var(--safe-b, 0px)); }
  .mkt-title { font-size: clamp(50px, 16.5vw, 84px); }
  .mkt-lede { font-size: 16px; }
  .mkt-cta-row { flex-direction: column; align-items: stretch; }
  .mkt-cta-row .btn, .mkt-cta-row .mkt-ghost { width: 100%; justify-content: center; }
  .mkt-kicker { font-size: 12px; letter-spacing: .14em; }
  .mkt-stat { padding: 20px 16px; border-radius: 18px; }
  .mkt-stat span { font-size: 13px; }
  .mkt-sub { font-size: 16px; }
  .mkt-card { padding: 22px 20px 0; border-radius: 22px; }
  .mkt-live-frame { border-radius: 18px; transform: none; }
  .mkt-live-frame video, .mkt-live-frame img { aspect-ratio: 195 / 174; }   /* the phone clip: scoreboard and the whole court */
  .mkt-perks li { grid-template-columns: 36px 1fr; padding: 12px 14px; }
  .mkt-foot .mkt-wrap { flex-direction: column; align-items: flex-start; }
  .mkt-foot nav { margin-left: -14px; flex-wrap: wrap; }
  .mkt-ticker { transform: rotate(-2deg) scale(1.04); }
}
@media (max-width: 480px) {
  .mkt-nav .mkt-brand span { display: none; }   /* the footer keeps the full name */
}

/* ═════════ reduced motion: the page, still ═════════ */
@media (prefers-reduced-motion: reduce) {
  html.mkt-on { scroll-behavior: auto; }
  .mkt *, .mkt *::before, .mkt *::after { animation: none !important; transition-duration: .01ms !important; }
  .mkt-line > span { transform: none; }
  .mkt-hero .mkt-in { opacity: 1; transform: none; }
  html.mkt-js .mkt [data-reveal] { opacity: 1; transform: none; filter: none; }
  .mkt-words .w { opacity: 1; }
  .mkt-hero-media, .mkt-hero-copy, .mkt-live-frame, .mkt-device, .mkt-card { transform: none !important; }
  .mkt-hero-copy { opacity: 1 !important; }
  .mkt-how-line path { stroke-dashoffset: 0; }
  .mkt-wipe { display: none; }
}