:root[data-dexscan-hero="chart-and-rewards"] { --dexscan-hero-art:url("/assets/dexscan/hero-options/1de4848902b2/chart-and-rewards.webp"); }
:root[data-dexscan-hero="watch-and-earn"] { --dexscan-hero-art:url("/assets/dexscan/hero-options/1de4848902b2/watch-and-earn.webp"); }
:root[data-dexscan-hero="multichain-discovery"] { --dexscan-hero-art:url("/assets/dexscan/hero-options/1de4848902b2/multichain-discovery.webp"); }
:root[data-dexscan-hero="token-dashboard"] { --dexscan-hero-art:url("/assets/dexscan/hero-options/1de4848902b2/token-dashboard.webp"); }
:root[data-dexscan-hero="solana-dashboard"] { --dexscan-hero-art:url("/assets/dexscan/hero-options/1de4848902b2/solana-dashboard.webp"); }
/* The default hero is a window: a 40px title bar carrying three traffic-light
   dots over a dark pane. A chosen hero keeps that window and replaces only the
   pane, so switching heroes changes the content and not the furniture. The dots
   stay the template's own elements rather than a copy, so their colours, sizes,
   spacing and responsive behaviour cannot drift from the default hero.
   customizeHeroHTML asserts all four class names still exist.

   Nothing here restyles the window. An earlier version gave it an 18px radius,
   a 1px border, a #050609 background and a 24px drop shadow, none of which the
   default has: measured on the live page, the window is #0a0a0b with a 16px
   radius, no border and no shadow at all, and the pane inside it is #040405
   with an 8px radius. A chosen hero was reading as a floating card next to a
   window. The only declarations left are the two the caption needs —
   position for its absolute box, container-type for its clamp() — and neither
   paints anything.

   The pane keeps the template's own 1020x463 too, so a chosen hero is exactly
   the same size as the default. The artwork is 1672x941, a different shape, so
   it is drawn with cover from the top edge: the overflow comes off the bottom,
   where it reads as content continuing past the window, rather than off the top
   where it would behead the artwork's own header row.

   The host's mask is the one thing still overridden. The template fades the
   hero into the page over its bottom ~120px, and a mask paints only inside the
   border box, so it would erase the caption along with the artwork. */
html[data-dexscan-hero] .framer-201m93 { -webkit-mask:none !important; mask:none !important; }
html[data-dexscan-hero] .framer-uqjc1i { position:relative; container-type:inline-size; }
html[data-dexscan-hero] .framer-446a8m { background:var(--dexscan-hero-art) center top/cover no-repeat !important; }
/* visibility, not display. The pane has no height of its own — its 463px comes
   from the children — so display:none collapses it to zero and the window
   shrinks to just the title bar. Hiding them by visibility keeps every box
   exactly where the template put it, so the pane stays the size it is on the
   default hero and the artwork paints behind them. */
html[data-dexscan-hero] .framer-446a8m * { visibility:hidden !important; }
/* Every one of these images shows a price, a market cap, a holder count and a
   transaction feed. None of it is real: the prices, holder counts and contract
   addresses on the artwork are invented and contradict the live $DEX market and
   its real contract address. Three of the five carry a small "Product preview" badge
   of their own and two do not, so the caption is painted here instead of
   being trusted to the artwork — a picture cannot be relied on to disclaim
   itself. ::before is used because the children of this element are hidden and
   ::after is already the artwork; a pseudo-element is not a child, so it
   survives that rule. Do not remove this without removing the artwork too. */
html[data-dexscan-hero] .framer-uqjc1i::before {
  content:"Illustrative concept — not live market data. The prices, holders and contract shown are not real.";
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:.85em 1.1em; box-sizing:border-box;
  background:linear-gradient(to top, #040405f2, #040405d9 60%, #04040500);
  color:#c8cdd8; font:500 clamp(9px, .85cqw, 13px)/1.35 Sora, Arial, sans-serif;
  letter-spacing:.01em; text-align:center;
}
.dexscan-hero-gallery { box-sizing:border-box; max-width:1160px; padding:130px 24px 80px; margin:auto; color:#fff; font-family:Sora,Arial,sans-serif; }
.dexscan-hero-gallery a { color:inherit; }
.dexscan-hero-gallery h1 { font-size:clamp(32px,5vw,52px); letter-spacing:-.04em; line-height:1.15; margin:22px 0 16px; }
.dexscan-hero-gallery > p { max-width:640px; color:#9297a1; line-height:1.7; margin:0 0 40px; }
.dexscan-hero-gallery-grid { display:grid; gap:28px; }
.dexscan-hero-option { border:1px solid #25272d; background:#0d0f14; border-radius:18px; overflow:hidden; }
.dexscan-hero-option-picture { display:block; background:#050609; }
.dexscan-hero-option-picture img { width:100%; height:auto; aspect-ratio:1672/941; display:block; }
.dexscan-hero-option-info { padding:24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.dexscan-hero-option h2 { font-size:22px; font-weight:500; margin:0 0 9px; }
.dexscan-hero-option p { color:#9297a1; font-size:14px; line-height:1.6; margin:0; }
.dexscan-hero-recommendation { display:inline-block; color:#8da1ff; font-size:11px; letter-spacing:.03em; margin:0 0 9px; }
.dexscan-hero-preview-link { flex-shrink:0; font-size:13px; text-decoration:none; border-radius:9px; background:#0015cf; padding:14px 18px; }
.dexscan-hero-preview-link:hover { background:#142ee7; }
.dexscan-hero-gallery a:focus-visible { outline:2px solid #98aaff; outline-offset:5px; }
@media(max-width:600px) { .dexscan-hero-gallery { padding:100px 16px 48px; } .dexscan-hero-option-info { align-items:flex-start; flex-direction:column; padding:20px; gap:18px; } .dexscan-hero-option h2 { font-size:20px; } }