/* /upgrade immersive tour — scoped; mirrors home hero tour rhythm without loading home.html styles. */
.trader-upgrade-page .upgrade-realm-hero {
    position: relative;
    box-sizing: border-box;
    /* At least one viewport tall, but allowed to grow to fit the tallest
       slide's natural content. This is what lets the stage auto-size to the
       biggest tour panel (inventory, mythics, exchange, atrium) without
       crushing the smaller intro — the same way the home hero behaves. */
    min-height: 100dvh;
    padding-top: var(--site-fixed-header-offset, 80px);
    display: flex;
    flex-direction: column;
    /* `overflow: clip` clips like `hidden` but does NOT create a scrolling
       container, so the dock's `position: sticky` inside can resolve against
       the page scroll. The `hidden` fallback handles Safari < 16 — those
       engines just lose the sticky dock effect but still clip the sweep
       overflow. Mirrors the home hero pattern exactly. */
    overflow: hidden;
    overflow: clip;
    background: #020617;
    border-bottom: 1px solid rgba(56, 189, 248, 0.12);
    box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(148, 163, 184, 0.06);
    transition:
        border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] {
    border-bottom-color: rgba(56, 189, 248, 0.16);
    box-shadow:
        inset 0 0 100px rgba(15, 23, 42, 0.55),
        inset 0 1px 0 rgba(186, 230, 253, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] {
    border-bottom-color: rgba(127, 29, 29, 0.28);
    box-shadow:
        inset 0 0 120px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(254, 202, 202, 0.06);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] {
    border-bottom-color: rgba(45, 212, 191, 0.2);
    box-shadow:
        inset 0 0 110px rgba(2, 6, 23, 0.5),
        inset 0 1px 0 rgba(94, 234, 212, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] {
    border-bottom-color: rgba(180, 83, 9, 0.22);
    box-shadow:
        inset 0 0 130px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(251, 191, 36, 0.06);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] {
    border-bottom-color: rgba(45, 212, 191, 0.26);
    box-shadow:
        inset 0 0 130px rgba(2, 21, 26, 0.55),
        inset 0 1px 0 rgba(167, 243, 224, 0.08);
}

.trader-upgrade-page .upgrade-realm-atmospheres {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.trader-upgrade-page .upgrade-realm-atm {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1);
    /* Each atmosphere is a multi-stop radial-gradient stack the size of
       the whole hero. Without containment, all 5 atmospheres are
       rasterized into ~hero-sized GPU layers up front and kept resident
       for the life of the page — even though only one is opacity:1 at
       a time. Containment lets the browser scope paint/layer work to
       this element and (combined with the dormant class below) drop
       the bitmaps when the layer is off-screen. */
    contain: layout paint style;
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] .upgrade-realm-atm--0,
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .upgrade-realm-atm--1,
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .upgrade-realm-atm--2,
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .upgrade-realm-atm--3,
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .upgrade-realm-atm--4 {
    opacity: 1;
}

/* `.upgrade-realm-atm-dormant` is added by the carousel JS in
   trader_upgrade.html after the 0.72s cross-fade settles. It tells the
   browser it may skip painting and storing the rasterized atmosphere
   gradient stack entirely while the layer is hidden. The class is
   removed slightly before the next fade-in begins, so the user never
   sees a missing frame. Combined, this drops the steady-state hero
   memory cost from "5 hero-sized bitmaps live" to ~1. */
.trader-upgrade-page .upgrade-realm-atm.upgrade-realm-atm-dormant {
    content-visibility: hidden;
    contain-intrinsic-size: 100vw 100vh;
}

.trader-upgrade-page .upgrade-realm-atm--0 {
    background:
        radial-gradient(ellipse 72% 58% at 50% 28%, rgba(248, 250, 252, 0.14) 0%, transparent 62%),
        radial-gradient(ellipse 110% 70% at 50% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 85% 70% at 50% 92%, rgba(16, 185, 129, 0.1) 0%, transparent 72%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

.trader-upgrade-page .upgrade-realm-atm--1 {
    background:
        radial-gradient(ellipse 90% 55% at 18% 40%, rgba(239, 68, 68, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 88% 22%, rgba(185, 28, 28, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(127, 29, 29, 0.35) 0%, transparent 65%),
        linear-gradient(180deg, #0c0a0f 0%, #1e0a0c 100%);
}

.trader-upgrade-page .upgrade-realm-atm--2 {
    background:
        radial-gradient(ellipse 85% 55% at 50% 18%, rgba(45, 212, 191, 0.2) 0%, transparent 58%),
        radial-gradient(ellipse 70% 45% at 12% 70%, rgba(6, 182, 212, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse 75% 50% at 92% 65%, rgba(94, 234, 212, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #020617 0%, #042f2e 100%);
}

.trader-upgrade-page .upgrade-realm-atm--3 {
    background:
        radial-gradient(ellipse 80% 50% at 50% 12%, rgba(251, 191, 36, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 8% 55%, rgba(245, 158, 11, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 55% at 95% 40%, rgba(180, 83, 9, 0.2) 0%, transparent 58%),
        linear-gradient(180deg, #0c0a06 0%, #1c1410 100%);
}

/* Slide 4 — Atrium / cyan-emerald chamber.
   Mirrors the /atrium ambient palette (radial cyan sky, soft horizon, deep
   teal floor) and stacks two oblique sunshafts so the hero reads as the
   atrium itself when the Atrium pillar is active. The leaf + mote layers
   below ride on top to complete the open-air feel. */
.trader-upgrade-page .upgrade-realm-atm--4 {
    background:
        radial-gradient(ellipse 95% 60% at 50% -6%, rgba(94, 234, 212, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 18% 35%, rgba(6, 182, 212, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 82% 30%, rgba(45, 212, 191, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 85% 55% at 50% 105%, rgba(16, 185, 129, 0.16) 0%, transparent 65%),
        linear-gradient(180deg, #03131a 0%, #042f2e 55%, #03131a 100%);
}

/* Drifting laurel leaves — same SVG + keyframes as /atrium, namespaced
   to .upgrade-realm-* so this hero stays self-contained (we don't load
   atrium.css here). Per-instance timing/tint vars are set inline in the
   template so the swarm reads as turbulent rather than a parade. */
.trader-upgrade-page .upgrade-realm-leaves {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    /* `contain: layout paint` tells the browser nothing inside this swarm
       affects the rest of the page — so a leaf moving never re-lays-out or
       repaints its surrounding section. Cheap, invisible, big repaint win. */
    contain: layout paint;
}

.trader-upgrade-page .upgrade-realm-leaf {
    position: absolute;
    top: var(--upr-ly, 40%);
    left: 0;
    width: clamp(18px, 2.2vw, 28px);
    height: clamp(18px, 2.2vw, 28px);
    color: var(--upr-ltint, rgba(94, 234, 212, 0.5));
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='currentColor'%3E%3Cpath d='M20 2c-2 7-9 11-15 12 2 9 9 16 18 16-1-6-1-12 3-17 4-5 9-8 12-9-6-1-13-3-18-2zm-2 13c3-1 7-1 10 0' fill='currentColor' opacity='0.92'/%3E%3Cpath d='M20 4c-1 6-7 10-13 11M20 4c5 5 8 12 6 19M20 4l-2 26' stroke='currentColor' stroke-width='0.6' fill='none' opacity='0.85'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.32));
    /* No `will-change` — the browser already composites transformed/opacity
       elements efficiently. `will-change` was reserving a permanent GPU
       backing texture per leaf (×20 leaves on the page) that the browser
       could never release because the animations are `infinite`. Dropping
       this is the single biggest VRAM win and doesn't change the look or
       smoothness — transforms/opacity are still GPU-composited. */
    opacity: 0;
}

.trader-upgrade-page .upgrade-realm-leaf--ltr {
    animation: upr-leaf-drift-ltr var(--upr-ld, 32s) var(--upr-ldelay, 0s) linear infinite;
}

.trader-upgrade-page .upgrade-realm-leaf--rtl {
    animation: upr-leaf-drift-rtl var(--upr-ld, 32s) var(--upr-ldelay, 0s) linear infinite;
}

@keyframes upr-leaf-drift-ltr {
    0% {
        transform:
            translate3d(-8vw, 0, 0)
            translateY(0)
            rotate(0deg)
            scale(var(--upr-lscale, 1));
        opacity: 0;
    }
    8%  { opacity: 0.85; }
    50% {
        transform:
            translate3d(50vw, 0, 0)
            translateY(calc(var(--upr-ldrift, 30px) * 1))
            rotate(calc(var(--upr-lrot, 360deg) * 0.5))
            scale(var(--upr-lscale, 1));
    }
    92% { opacity: 0.85; }
    100% {
        transform:
            translate3d(108vw, 0, 0)
            translateY(calc(var(--upr-ldrift, 30px) * 2))
            rotate(var(--upr-lrot, 360deg))
            scale(var(--upr-lscale, 1));
        opacity: 0;
    }
}

@keyframes upr-leaf-drift-rtl {
    0% {
        transform:
            translate3d(108vw, 0, 0)
            translateY(0)
            rotate(0deg)
            scale(var(--upr-lscale, 1)) scaleX(-1);
        opacity: 0;
    }
    8%  { opacity: 0.85; }
    50% {
        transform:
            translate3d(50vw, 0, 0)
            translateY(calc(var(--upr-ldrift, -30px) * 1))
            rotate(calc(var(--upr-lrot, -360deg) * 0.5))
            scale(var(--upr-lscale, 1)) scaleX(-1);
    }
    92% { opacity: 0.85; }
    100% {
        transform:
            translate3d(-8vw, 0, 0)
            translateY(calc(var(--upr-ldrift, -30px) * 2))
            rotate(var(--upr-lrot, -360deg))
            scale(var(--upr-lscale, 1)) scaleX(-1);
        opacity: 0;
    }
}

/* Rising cyan pollen motes — same as /atrium, namespaced. */
.trader-upgrade-page .upgrade-realm-motes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Matches .upgrade-realm-leaves — confine paint + layout so a rising
       mote never invalidates the rest of the section. */
    contain: layout paint;
}

.trader-upgrade-page .upgrade-realm-mote {
    position: absolute;
    left: var(--upr-mx, 10%);
    bottom: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #99f6e4;
    box-shadow:
        0 0 12px rgba(167, 243, 216, 0.7),
        0 0 22px rgba(94, 234, 212, 0.45);
    opacity: 0;
    animation: upr-mote-rise var(--upr-md, 24s) var(--upr-mdelay, 0s) linear infinite;
}

/* ----------------------------------------------------------------------
   Animation lifecycle gating (B + A from the optimization plan)
   ----------------------------------------------------------------------

   The leaves + motes use `animation: ... infinite` so they tick every
   single frame for the life of the page — even when their host section
   is off-screen or its parent atmosphere layer is `opacity: 0`. A paused
   CSS animation lets the browser release the layer's GPU backing, which
   is where the real memory savings come from.

   We gate with two attributes:

   B) `.upgrade-realm-hero[data-hero-bg-slide="N"]` — set by the carousel
      JS to the active slide index. The hero leaves/motes live inside
      .upgrade-realm-atm--4 (Atrium chamber). On slides 0–3 that atmosphere
      is transparent; pause its swarm so the GPU doesn't have to
      re-composite 16 invisible elements every frame.

   A) `data-paused="true"` — toggled by an IntersectionObserver in
      trader_upgrade.html on both .upgrade-realm-hero and
      .trader-spotlight--atrium when those sections leave the viewport.

   Both rules are pure CSS overrides of `animation-play-state`; they
   don't disturb keyframe timing, transforms, or opacity, so when the
   swarm resumes it picks up exactly where the underlying timeline
   continued. Visually identical to "always running" — just dormant
   when there's nothing to look at. */
.trader-upgrade-page .upgrade-realm-hero:not([data-hero-bg-slide="4"]) .upgrade-realm-atm--4 .upgrade-realm-leaf,
.trader-upgrade-page .upgrade-realm-hero:not([data-hero-bg-slide="4"]) .upgrade-realm-atm--4 .upgrade-realm-mote {
    animation-play-state: paused;
}

.trader-upgrade-page [data-upgrade-swarm-paused="true"] .upgrade-realm-leaf,
.trader-upgrade-page [data-upgrade-swarm-paused="true"] .upgrade-realm-mote {
    animation-play-state: paused;
}

@keyframes upr-mote-rise {
    0%   { bottom: -8px; opacity: 0; transform: translateX(0) scale(1); }
    12%  { opacity: 0.55; }
    50%  { transform: translateX(-18px) scale(1.05); }
    88%  { opacity: 0.32; }
    100% { bottom: 110%; opacity: 0; transform: translateX(-38px) scale(0.6); }
}

/* Price halo in hero rail — follows tour slide (same beats as .upgrade-realm-atm--*) */
.trader-upgrade-page .upgrade-realm-price-rail .price-glow {
    transition:
        background 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] .upgrade-realm-price-rail .price-glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, transparent 44%, rgba(59, 130, 246, 0.55) 72%, rgba(139, 92, 246, 0.75) 100%);
    opacity: 0.34;
    filter: blur(20px);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .upgrade-realm-price-rail .price-glow {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.92) 0%, transparent 42%, rgba(185, 28, 28, 0.78) 68%, rgba(127, 29, 29, 0.55) 100%);
    opacity: 0.36;
    filter: blur(22px);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .upgrade-realm-price-rail .price-glow {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.95) 0%, transparent 45%, rgba(6, 182, 212, 0.65) 70%, rgba(20, 184, 166, 0.5) 100%);
    opacity: 0.34;
    filter: blur(20px);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .upgrade-realm-price-rail .price-glow {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.92) 0%, transparent 44%, rgba(245, 158, 11, 0.72) 68%, rgba(180, 83, 9, 0.55) 100%);
    opacity: 0.35;
    filter: blur(21px);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .upgrade-realm-price-rail .price-glow {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.95) 0%, transparent 44%, rgba(45, 212, 191, 0.72) 70%, rgba(16, 185, 129, 0.55) 100%);
    opacity: 0.36;
    filter: blur(22px);
}

/* "Become a Trader" CTA — recolors with the active hero slide (matches atmosphere) */
.trader-upgrade-page .upgrade-realm-price-rail .cta-button {
    transition:
        background 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s ease;
}

/* Slide 0 — Overview / emerald (default) */
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] .upgrade-realm-price-rail .cta-button {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow:
        0 4px 20px rgba(16, 185, 129, 0.32),
        0 0 40px rgba(16, 185, 129, 0.12);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] .upgrade-realm-price-rail .cta-button:hover {
    box-shadow:
        0 8px 30px rgba(16, 185, 129, 0.45),
        0 0 60px rgba(16, 185, 129, 0.22);
}

/* Slide 1 — Inventory / crimson */
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .upgrade-realm-price-rail .cta-button {
    background: linear-gradient(135deg, #f87171, #b91c1c);
    box-shadow:
        0 4px 20px rgba(239, 68, 68, 0.34),
        0 0 40px rgba(239, 68, 68, 0.14);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .upgrade-realm-price-rail .cta-button:hover {
    box-shadow:
        0 8px 30px rgba(239, 68, 68, 0.5),
        0 0 60px rgba(239, 68, 68, 0.26);
}

/* Slide 2 — Seasonal mythics / cyan-teal */
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .upgrade-realm-price-rail .cta-button {
    background: linear-gradient(135deg, #2dd4bf, #06b6d4);
    box-shadow:
        0 4px 20px rgba(45, 212, 191, 0.34),
        0 0 40px rgba(6, 182, 212, 0.14);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .upgrade-realm-price-rail .cta-button:hover {
    box-shadow:
        0 8px 30px rgba(45, 212, 191, 0.5),
        0 0 60px rgba(6, 182, 212, 0.26);
}

/* Slide 3 — Exchange / amber-gold */
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .upgrade-realm-price-rail .cta-button {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    box-shadow:
        0 4px 20px rgba(251, 191, 36, 0.34),
        0 0 40px rgba(245, 158, 11, 0.14);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .upgrade-realm-price-rail .cta-button:hover {
    box-shadow:
        0 8px 30px rgba(251, 191, 36, 0.5),
        0 0 60px rgba(245, 158, 11, 0.26);
}

/* Slide 4 — Atrium / cyan-emerald */
.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .upgrade-realm-price-rail .cta-button {
    background: linear-gradient(135deg, #5eead4, #14b8a6);
    box-shadow:
        0 4px 20px rgba(45, 212, 191, 0.34),
        0 0 40px rgba(94, 234, 212, 0.16);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .upgrade-realm-price-rail .cta-button:hover {
    box-shadow:
        0 8px 30px rgba(45, 212, 191, 0.5),
        0 0 60px rgba(94, 234, 212, 0.28);
}

/* "You're already a Trader" badge also recolors */
.trader-upgrade-page .upgrade-realm-price-rail .already-trader {
    transition:
        background 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .upgrade-realm-price-rail .already-trader {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .upgrade-realm-price-rail .already-trader {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(45, 212, 191, 0.35);
    color: #5eead4;
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .upgrade-realm-price-rail .already-trader {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .upgrade-realm-price-rail .already-trader {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(94, 234, 212, 0.38);
    color: #99f6e4;
}

.trader-upgrade-page .upgrade-realm-slide-intro .upgrade-headline {
    margin-bottom: 18px;
}

.trader-upgrade-page .upgrade-realm-slide-intro .upgrade-subtitle {
    margin-bottom: 0;
}

/* Uniform vertical "perk tabs" — shared shape used by intro + feature slides */
.trader-upgrade-page .upgrade-realm-intro-tabs {
    list-style: none;
    margin: clamp(14px, 2.5vw, 22px) auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 22rem;
}

.trader-upgrade-page .upgrade-realm-intro-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(226, 232, 240, 0.92);
    font-family: 'Sora', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: left;
    backdrop-filter: blur(6px);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.trader-upgrade-page .upgrade-realm-intro-tab i {
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(94, 234, 212, 0.95);
}

.trader-upgrade-page .upgrade-realm-intro-tab:hover {
    border-color: rgba(94, 234, 212, 0.5);
    background: rgba(6, 78, 59, 0.32);
    color: #fff;
    transform: translateX(2px);
}

@media (max-width: 520px) {
    .trader-upgrade-page .upgrade-realm-slide-intro .headline-main {
        font-size: clamp(48px, 16vw, 96px);
        letter-spacing: -2px;
    }
}

.trader-upgrade-page .upgrade-realm-tour-root {
    --hero-tour-ms: 6800ms;
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(16px, 4vw, 48px);
    box-sizing: border-box;
}

.trader-upgrade-page .upgrade-realm-hero-grid {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: clamp(10px, 1.5vw, 16px);
    padding: clamp(8px, 1.5vh, 16px) 0 clamp(4px, 1vh, 10px);
    box-sizing: border-box;
    min-height: 0;
}

/* Stacked hero: show Trader Access (stage) before the price card — matches narrow / mobile layout only */
@media (max-width: 959px) {
    .trader-upgrade-page .upgrade-realm-hero-grid .upgrade-realm-stage-col {
        order: 1;
    }

    .trader-upgrade-page .upgrade-realm-hero-grid .upgrade-realm-price-rail {
        order: 2;
    }
}

@media (min-width: 960px) {
    .trader-upgrade-page .upgrade-realm-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 46rem) minmax(260px, 340px);
        /* 1fr: row fills the hero height so stage always has room for content */
        grid-template-rows: 1fr;
        align-items: stretch;
        column-gap: clamp(28px, 4.5vw, 60px);
        row-gap: 0;
        max-width: min(1100px, 100%);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 0;
    }

    .trader-upgrade-page .upgrade-realm-price-rail {
        grid-column: 2;
        grid-row: 1;
        flex: unset;
        width: 100%;
        max-width: none;
        margin: 0;
        justify-self: stretch;
        align-self: stretch;
        /* Vertically center card to match where slide content sits (slides use align-items:center
           on flex-row, vertically centering their inner) */
        justify-content: center;
        box-sizing: border-box;
    }

    .trader-upgrade-page .upgrade-realm-stage-col {
        grid-column: 1;
        grid-row: 1;
        align-items: center;
        justify-content: stretch;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        align-self: stretch;
    }
}

.trader-upgrade-page .upgrade-realm-price-rail {
    flex-shrink: 0;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trader-upgrade-page .upgrade-realm-price-rail .price-card {
    width: 100%;
    box-sizing: border-box;
    animation: none;
    opacity: 1;
    transform: none;
}

.trader-upgrade-page .upgrade-realm-price-rail-note {
    margin: 12px 0 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.88);
    text-align: center;
}

@media (max-width: 768px) {
    .trader-upgrade-page .upgrade-realm-price-rail-note-ext {
        display: none;
    }
}

.trader-upgrade-page .upgrade-realm-stage-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.trader-upgrade-page .upgrade-realm-showcase {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

@media (min-width: 960px) {
    .trader-upgrade-page .upgrade-realm-showcase {
        max-width: min(52rem, 100%);
    }
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-stage {
    position: relative;
    /* Stack all slides in a single grid cell so the stage auto-sizes to the
       tallest slide's natural content height, regardless of which one is
       active — same trick as `.home-page .hero-immersive-stage`. The grid
       is what enables the partially-sticky dock: the hero grows to fit
       slide content, dock sits at hero bottom and `position: sticky`
       pins it to the viewport bottom while the hero is on screen. */
    display: grid;
    grid-template-columns: 1fr;
    min-height: min(72vh, 760px);
    perspective: 1280px;
    perspective-origin: 50% 42%;
    overflow-x: clip;
    overflow-y: visible;
}

/* Keep [hidden] slides rendered so they contribute their natural height to
   the grid cell. Visual hiding stays on opacity / transform / pointer-events
   below; the [hidden] attribute remains as ARIA hint. Mobile overrides
   force display:none on non-intro slides — that override is !important and
   has higher specificity, so this rule never lights them up on phones. */
.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide[hidden] {
    display: flex;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(20px, 4vh, 40px) clamp(8px, 2vw, 20px) clamp(16px, 3vh, 28px);
    opacity: 0;
    transform: translateY(18px) scale(0.982);
    filter: blur(6px);
    pointer-events: none;
    transition:
        opacity 0.4s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.44s cubic-bezier(0.4, 0, 0.6, 1),
        filter 0.38s ease;
    overflow: hidden;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide--upgrade-intro {
    align-items: center;
}

@media (min-width: 960px) {
    /* Slides are flex-direction: row (default): align-items=vertical, justify-content=horizontal.
       Vertically center inner (align-items: center) so content sits mid-column,
       lined up with the centered price card. */
    .trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide {
        align-items: center;
        justify-content: center;
        padding-bottom: clamp(12px, 2.5vh, 28px);
    }

    .trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide-inner--feature {
        flex: 0 1 auto;
        padding-top: 0;
    }
}

.trader-upgrade-page #upgrade-product-showcase[data-hero-tour-dir="next"] .hero-immersive-slide:not(.is-active) {
    transform: translateX(-38px) translateY(-14px) scale(0.974) rotate(-0.42deg);
    filter: blur(9px);
}

.trader-upgrade-page #upgrade-product-showcase[data-hero-tour-dir="prev"] .hero-immersive-slide:not(.is-active) {
    transform: translateX(38px) translateY(-14px) scale(0.974) rotate(0.42deg);
    filter: blur(9px);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    pointer-events: auto;
    z-index: 2;
    transition:
        opacity 0.88s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide-inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.trader-upgrade-page .upgrade-realm-slide-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding-top: clamp(4px, 1.5vh, 16px);
}

.trader-upgrade-page .upgrade-realm-tour-hint {
    margin: clamp(10px, 2vw, 18px) 0 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.8125rem;
    color: rgba(148, 163, 184, 0.88);
    letter-spacing: 0.02em;
    max-width: 42ch;
}

.trader-upgrade-page .upgrade-realm-tour-hint a {
    color: rgba(94, 234, 212, 0.95);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trader-upgrade-page .upgrade-realm-tour-hint a:hover {
    color: #5eead4;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide-inner--feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    text-align: center;
    padding-top: clamp(0.75rem, 2.5vh, 1.75rem);
    max-width: none;
    width: 100%;
    padding-left: clamp(12px, 3vw, 28px);
    padding-right: clamp(12px, 3vw, 28px);
    box-sizing: border-box;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-head {
    max-width: min(52rem, 100%);
    flex-shrink: 0;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-feature-title {
    margin: 0 0 12px;
    font-family: 'Plus Jakarta Sans', 'Sora', system-ui, sans-serif;
    font-size: clamp(1.75rem, 4.2vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #f8fafc;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-feature-title--rpg-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06em;
    line-height: 1.08;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-feature-title-line {
    display: block;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-highlight-rpg {
    background: linear-gradient(115deg, #fde68a 0%, #f59e0b 42%, #fbbf24 78%, #fef3c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 28px rgba(245, 158, 11, 0.22));
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-lede {
    margin: 6px auto 0;
    max-width: 32rem;
    text-align: center;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.78);
    letter-spacing: 0.005em;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-lede strong {
    color: rgba(248, 250, 252, 0.95);
    font-weight: 600;
}

/* Feature-slide bullets — uniform vertical "perk tabs", same shape as intro tabs,
   tinted per section (red / cyan / amber). */
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts {
    list-style: none;
    margin: clamp(12px, 2vw, 20px) auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 22rem;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(226, 232, 240, 0.92);
    font-family: 'Sora', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-align: left;
    backdrop-filter: blur(6px);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts li i {
    flex-shrink: 0;
    width: 1.2rem;
    margin-top: 0;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.95);
}

/* Inventory — crimson accent */
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--inventory li {
    border-color: rgba(248, 113, 113, 0.22);
    background: linear-gradient(145deg, rgba(127, 29, 29, 0.28) 0%, rgba(15, 23, 42, 0.55) 100%);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--inventory li:hover {
    border-color: rgba(248, 113, 113, 0.55);
    background: linear-gradient(145deg, rgba(127, 29, 29, 0.42) 0%, rgba(15, 23, 42, 0.55) 100%);
    color: #fff;
    transform: translateX(2px);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--inventory li i {
    color: rgba(248, 113, 113, 0.95);
}

/* Seasonal mythics — cyan-teal accent */
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--seasonal li {
    border-color: rgba(45, 212, 191, 0.22);
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.28) 0%, rgba(15, 23, 42, 0.55) 100%);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--seasonal li:hover {
    border-color: rgba(45, 212, 191, 0.55);
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.42) 0%, rgba(15, 23, 42, 0.55) 100%);
    color: #fff;
    transform: translateX(2px);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--seasonal li i {
    color: rgba(94, 234, 212, 0.95);
}

/* Exchange — amber-gold accent */
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--exchange li {
    border-color: rgba(251, 191, 36, 0.22);
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.28) 0%, rgba(15, 23, 42, 0.55) 100%);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--exchange li:hover {
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.42) 0%, rgba(15, 23, 42, 0.55) 100%);
    color: #fff;
    transform: translateX(2px);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inline-facts--exchange li i {
    color: rgba(251, 191, 36, 0.95);
}

/* Probability boosts inside the inventory hero slide — same crimson card style as the spotlight section below */
.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts {
    margin: clamp(10px, 1.5vw, 14px) auto 0;
    max-width: min(440px, 100%);
    width: 100%;
    gap: 8px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts li {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.32);
    background: linear-gradient(145deg, rgba(127, 29, 29, 0.35) 0%, rgba(30, 10, 10, 0.55) 100%);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.06);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts .upgrade-findings-prob-label {
    color: rgba(254, 226, 226, 0.88);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts .upgrade-findings-prob-note {
    color: rgba(254, 202, 202, 0.45);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts .upgrade-findings-prob-from {
    color: rgba(203, 213, 225, 0.72);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts .upgrade-findings-prob-to {
    color: #fecaca;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts .upgrade-findings-prob-arrow {
    color: rgba(248, 113, 113, 0.85);
}

/* Seasonal mythics variant — cyan/teal accent */
.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season li {
    border-color: rgba(45, 212, 191, 0.32);
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.32) 0%, rgba(8, 47, 73, 0.5) 100%);
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.08);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season .upgrade-findings-prob-label {
    color: rgba(204, 251, 241, 0.92);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season .upgrade-findings-prob-note {
    color: rgba(153, 246, 228, 0.5);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season .upgrade-findings-prob-from {
    color: rgba(203, 213, 225, 0.72);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season .upgrade-findings-prob-to {
    color: #99f6e4;
    text-shadow: 0 0 14px rgba(45, 212, 191, 0.35);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--season .upgrade-findings-prob-arrow {
    color: rgba(94, 234, 212, 0.9);
}

/* Exchange variant — amber / gold accent */
.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange li {
    border-color: rgba(251, 191, 36, 0.32);
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.32) 0%, rgba(15, 23, 42, 0.55) 100%);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.08);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange .upgrade-findings-prob-label {
    color: rgba(254, 243, 199, 0.92);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange .upgrade-findings-prob-note {
    color: rgba(253, 224, 71, 0.5);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange .upgrade-findings-prob-from {
    color: rgba(203, 213, 225, 0.72);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange .upgrade-findings-prob-to {
    color: #fde68a;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-prob-boosts--exchange .upgrade-findings-prob-arrow {
    color: rgba(251, 191, 36, 0.9);
}

/* Amber/gold eyebrow label + icon box for the Denari/Exchange tour slide
   (mirrors the crimson .trader-spotlight-icon--findings style) */
.trader-upgrade-page .section-label--denari {
    color: #fbbf24;
    letter-spacing: 0.12em;
}

/* Intro slide eyebrow — emerald gem square + "TRADER ACCESS" label,
   mirrors the per-slide eyebrow pattern (icon + section label). */
.trader-upgrade-page .trader-spotlight-icon--trader {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.42), rgba(6, 95, 70, 0.28));
    color: #d1fae5;
    border-color: rgba(52, 211, 153, 0.4);
}

.trader-upgrade-page .section-label--trader {
    color: #6ee7b7;
    letter-spacing: 0.12em;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-eyebrow--intro {
    margin-bottom: clamp(14px, 2vw, 22px);
}

/* Eyebrow labels per slide — beat the inline `.section-label` emerald default
   on the upgrade page so each pillar reads in its theme colour. */
.trader-upgrade-page .section-label--findings {
    color: #fb7185;
    letter-spacing: 0.12em;
}

.trader-upgrade-page .section-label--season-findings {
    color: #5eead4;
    letter-spacing: 0.12em;
}

/* Boost-row "tab" for the seasonal spotlight section — mirrors the crimson
   `.trader-spotlight-boosts--findings` and amber `.trader-spotlight-boosts--exchange`
   patterns, in teal-cyan to match the seasonal atmosphere. */
.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings {
    margin-top: clamp(12px, 1.6vw, 20px);
    margin-bottom: clamp(8px, 1.4vw, 16px);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings li {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(45, 212, 191, 0.32);
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.32) 0%, rgba(8, 47, 73, 0.5) 100%);
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.08);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings .upgrade-findings-prob-label {
    color: rgba(204, 251, 241, 0.92);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings .upgrade-findings-prob-note {
    color: rgba(153, 246, 228, 0.5);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings .upgrade-findings-prob-from {
    color: rgba(203, 213, 225, 0.72);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings .upgrade-findings-prob-to {
    color: #99f6e4;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(45, 212, 191, 0.35);
}

.trader-upgrade-page .trader-spotlight--season-findings .upgrade-findings-prob-boosts.trader-spotlight-boosts--season-findings .upgrade-findings-prob-arrow {
    color: rgba(94, 234, 212, 0.9);
}

.trader-upgrade-page .trader-spotlight-icon--denari {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.4), rgba(180, 83, 9, 0.28));
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.4);
}

/* Pulsing teal "Seasonal" word in the hero seasonal slide
   (same recipe as .trader-spotlight-heading--season-findings .highlight--season-head-emerald in oracle_spotlight.css) */
.trader-upgrade-page .hero-immersive-head--seasonal .hero-immersive-feature-title--rpg-stack .highlight--season-head-emerald {
    color: #5eead4;
    text-shadow: 0 0 28px rgba(45, 212, 191, 0.42);
    animation: season-emerald-text-pulse 3.2s ease-in-out infinite;
    will-change: color, text-shadow;
}

@media (prefers-reduced-motion: reduce) {
    .trader-upgrade-page .hero-immersive-head--seasonal .hero-immersive-feature-title--rpg-stack .highlight--season-head-emerald {
        animation: none;
    }
}

/* Real composer-card swap contract preview inside the Exchange tour slide.
   Constrains the home-page demo card to fit the tour stage. */
.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap {
    width: 100%;
    max-width: min(28rem, 100%);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-composer-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-home-swap-demo-card {
    padding: 14px 16px 14px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-composer-title {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-home-swap-demo-body {
    gap: 12px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-picker-tile__label {
    font-size: 0.82rem;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-exchange-card-wrap .exchange-picker-tile__qty {
    font-size: 0.72rem;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-immersive-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(0.85rem, 2vw, 1.35rem);
    /* size to content only — flex:1 was stretching this to fill the full slide height */
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

.trader-upgrade-page .upgrade-realm-showcase .trader-spotlight-findings-frame {
    max-width: min(480px, 100%);
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 1;
    min-height: 0;
}

/* "EXOTICS" / "SEASON 1 MYTHICS" frame labels — left-aligned everywhere on /upgrade */
.trader-upgrade-page .trader-spotlight-findings-frame-label {
    text-align: left;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-inv-foot,
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-season-foot,
.trader-upgrade-page .upgrade-realm-showcase .hero-tour-exchange-foot {
    width: 100%;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-sublede {
    margin: 0;
    max-width: 40rem;
    font-size: clamp(0.8125rem, 1.2vw, 0.95rem);
    line-height: 1.6;
    color: rgba(148, 163, 184, 0.9);
    text-align: center;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-cta-row .btn {
    font-size: 0.9rem;
    padding: 0.55rem 1.1rem;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-cta-secondary {
    border-color: rgba(255, 255, 255, 0.14);
}

/* Exchange mini (matches home immersive sizing) */
.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini {
    width: 100%;
    max-width: 28rem;
    padding: 14px 16px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    flex-shrink: 1;
    min-height: 0;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(251, 191, 36, 0.88);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-meta {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.85);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-h {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.65);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-tile {
    border-radius: 14px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-tile--lg .profile-inventory-slot {
    width: 88px;
    height: 88px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-tile--denari-offer {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-tile--denari-offer .exchange-denari-want-badge {
    right: 5px;
    bottom: 5px;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-mid {
    display: flex;
    align-items: center;
    padding-top: 2rem;
    font-size: 1.1rem;
    color: rgba(251, 191, 36, 0.75);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(241, 245, 249, 0.9);
    text-align: center;
    line-height: 1.25;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-foot {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-exchange-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0f172a;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-exchange-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 1;
    min-height: 0;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-exchange-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.16);
    background: rgba(15, 23, 42, 0.45);
    font-size: 0.86rem;
    color: rgba(226, 232, 240, 0.9);
    text-align: left;
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-step-n {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.trader-upgrade-page .upgrade-realm-showcase .hero-tour-step-t {
    line-height: 1.35;
}

.trader-upgrade-page .upgrade-realm-tour-dock {
    /* Pinned to the viewport bottom for the entire lifetime of the upgrade
       hero. The intuitive setup is `position: sticky; bottom: 0` (what the
       home hero uses), but sticky only pulls an element up when its natural
       position would fall *below* the viewport bottom — i.e. when the
       containing section is taller than the viewport. The home hero gets
       that for free because its slides ship a lot of content; the upgrade
       slides are compact so the hero matches 100dvh exactly and the dock
       would just sit at section-bottom (and disappear below the fold the
       moment the browser window shrinks).

       Going fixed makes the dock guaranteed-visible at the viewport bottom
       on every viewport / zoom level. To keep the home-hero behaviour of
       "dock leaves with section 1", an IntersectionObserver in
       trader_upgrade.html toggles `--hidden` once the hero scrolls past,
       which smoothly slides the dock off-screen instead of letting it hang
       over downstream sections.

       The ≤768px override on `.hero-immersive--mobile-first-only` still
       sets `display: none` on the dock, so this only runs on desktop /
       tablet. */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 14px 0 22px;
    z-index: 5;
    background: transparent;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 0.36s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.28s cubic-bezier(0.33, 0, 0.2, 1);
}

.trader-upgrade-page .upgrade-realm-tour-dock.upgrade-realm-tour-dock--hidden {
    /* Slid off the bottom edge once the hero exits the viewport; the
       IntersectionObserver in trader_upgrade.html flips this class. */
    transform: translate3d(0, 100%, 0);
    opacity: 0;
}

.trader-upgrade-page .upgrade-realm-tour-dock > * {
    pointer-events: auto;
}

.trader-upgrade-page .upgrade-realm-tour-dock-inner {
    width: 100%;
    max-width: min(960px, 92%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-progress {
    height: 1px;
    margin: 0 auto 14px;
    width: min(420px, 70%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35));
    opacity: 0.8;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-progress-fill.hero-immersive-progress-fill--run {
    animation: upgradeRealmTourProgress var(--hero-tour-ms, 6800ms) linear forwards;
}

@keyframes upgradeRealmTourProgress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-dock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(226, 232, 240, 0.6);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab-icon {
    font-size: 0.95rem;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab:hover {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.035);
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab:hover .hero-immersive-tab-icon {
    opacity: 1;
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="0"] .hero-immersive-tab.is-active {
    color: #ecfdf5;
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.22), inset 0 0 0 1px rgba(52, 211, 153, 0.18);
    background: rgba(16, 185, 129, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="1"] .hero-immersive-tab.is-active {
    color: #fef2f2;
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.22), inset 0 0 0 1px rgba(248, 113, 113, 0.18);
    background: rgba(239, 68, 68, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="2"] .hero-immersive-tab.is-active {
    color: #ecfeff;
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.22), inset 0 0 0 1px rgba(94, 234, 212, 0.18);
    background: rgba(45, 212, 191, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="3"] .hero-immersive-tab.is-active {
    color: #fffbeb;
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.22), inset 0 0 0 1px rgba(251, 191, 36, 0.18);
    background: rgba(245, 158, 11, 0.08);
}

.trader-upgrade-page .upgrade-realm-hero[data-hero-bg-slide="4"] .hero-immersive-tab.is-active {
    color: #ecfeff;
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 0 18px rgba(45, 212, 191, 0.24), inset 0 0 0 1px rgba(167, 243, 224, 0.2);
    background: rgba(45, 212, 191, 0.08);
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab.is-active .hero-immersive-tab-icon {
    opacity: 1;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-tab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 3px;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-arrows {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-arrow {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-arrow:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-arrow:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-playpause {
    color: rgba(241, 245, 249, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-playpause i {
    font-size: 0.7rem;
}

.trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-playpause.is-paused {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
}

.trader-upgrade-page .upgrade-realm-tour-root.hero-immersive.is-paused .hero-immersive-progress-fill--run {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .trader-upgrade-page .hero-immersive--mobile-first-only .upgrade-realm-tour-dock {
        display: none !important;
    }

    .trader-upgrade-page .hero-immersive--mobile-first-only .upgrade-realm-showcase .hero-immersive-stage {
        min-height: 0;
        overflow: visible;
        perspective: none;
    }

    .trader-upgrade-page .hero-immersive--mobile-first-only .upgrade-realm-showcase .hero-immersive-slide {
        overflow: visible;
    }

    .trader-upgrade-page .hero-immersive--mobile-first-only .upgrade-realm-showcase .hero-immersive-slide.is-active {
        position: relative;
        inset: auto;
    }

    .trader-upgrade-page .hero-immersive--mobile-first-only #upgrade-slide-0 .upgrade-realm-slide-intro {
        transform: scale(0.93);
        transform-origin: top center;
        max-width: min(1040px, 100vw);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide {
        transition: none;
        filter: none !important;
    }

    .trader-upgrade-page .upgrade-realm-showcase .hero-immersive-slide.is-active {
        transition: none;
        filter: none !important;
    }

    .trader-upgrade-page #upgrade-product-showcase[data-hero-tour-dir="next"] .hero-immersive-slide:not(.is-active),
    .trader-upgrade-page #upgrade-product-showcase[data-hero-tour-dir="prev"] .hero-immersive-slide:not(.is-active) {
        transform: none !important;
        filter: none !important;
    }

    .trader-upgrade-page .upgrade-realm-showcase .hero-immersive-stage {
        perspective: none;
    }

    .trader-upgrade-page .upgrade-realm-tour-dock .hero-immersive-progress-fill.hero-immersive-progress-fill--run {
        animation: none;
        transform: scaleX(0.25);
    }

    .trader-upgrade-page .upgrade-realm-atm {
        transition: none;
    }

    .trader-upgrade-page .upgrade-realm-leaf,
    .trader-upgrade-page .upgrade-realm-mote {
        animation: none !important;
        opacity: 0 !important;
    }
}

@media (max-width: 520px) {
    .trader-upgrade-page .upgrade-realm-showcase .hero-tour-cta-row {
        flex-direction: column;
        width: 100%;
    }

    .trader-upgrade-page .upgrade-realm-showcase .hero-tour-cta-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   Below-the-fold content-visibility on /upgrade

   trader_upgrade.html stacks four heavy ambient sections below the hero:
     • .trader-spotlight--findings         (inventory frame + exotics grid)
     • .trader-spotlight--season-findings  (season mythics frame)
     • .trader-spotlight--atrium           (atrium chamber, leaves + motes)
     • .features-section + .comparison-section + footer CTA

   None of them are visible on initial load (the hero fills the viewport
   on every realistic desktop and phone size). Letting the browser defer
   their paint + layer rasterization until they actually scroll into view
   is a meaningful first-paint and steady-state memory win, especially on
   the Atrium spotlight which spawns its own swarm of GPU layers.

   `contain-intrinsic-size` reserves vertical space at a reasonable
   default so the scrollbar doesn't lurch when each section is promoted
   back to "render normally".
   ============================================================================ */
.trader-upgrade-page .trader-spotlight,
.trader-upgrade-page .features-section,
.trader-upgrade-page .comparison-section,
.trader-upgrade-page .trader-upgrade-footer-cta {
    content-visibility: auto;
    contain-intrinsic-size: 100% 760px;
}

@media (max-width: 768px) {
    .trader-upgrade-page .trader-spotlight,
    .trader-upgrade-page .features-section,
    .trader-upgrade-page .comparison-section,
    .trader-upgrade-page .trader-upgrade-footer-cta {
        contain-intrinsic-size: 100% 560px;
    }
}