/* Light = minimal blue/purple field: navy base + two soft blobs (no white page) */

/* Light + documentation: same blue field + spheres as other public pages; cards/footer stay paper via scoped rules */

/* Light + user portal (sign in / dashboard): same doc-style surface as documentation */

/* Light + Rise AI Suite workspace: same paper + navy bar as /documentation */

/* Signed-in /dashboard* — flat page (no Three.js, no hero spheres/blobs); light = paper white */

/* Dark /dashboard/* — black/gray surfaces (not navy/slate). Public /automated-trading matches so product entry stays consistent. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* SVG film grain sat above #starfield (z0); disabled in both themes  reads as a moving / milky sheet */

.nav__bd {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: var(--nav-bg);
      backdrop-filter: blur(16px) saturate(1.15);
      -webkit-backdrop-filter: blur(16px) saturate(1.15);
    }

.nav__strip {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      min-width: 0;
    }

/* Spend in: label on top, full-width trigger below (same rhythm as Billing for AI). */

/* Profile flyout: Spend-in menu opens downward so it stays visible and clickable. */

/* Panel is light while global light theme can keep --text white for the blue field; force readable type inside the dropdown only. */

.wallet-opt-list {
      border: 1px solid var(--hero-border);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.22);
    }

.wallet-opt {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 0.65rem;
      padding: 0.72rem 0.8rem;
      margin: 0;
      border: none;
      border-bottom: 1px solid var(--hero-border);
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 0.14s ease;
    }

.wallet-opt:last-child {
      border-bottom: none;
    }

.wallet-opt:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.06);
    }

.wallet-opt:disabled {
      opacity: 0.42;
      cursor: not-allowed;
    }

.wallet-opt__lead {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      min-width: 0;
      flex: 1;
    }

.wallet-opt__ico {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      box-shadow: none;
      color: var(--text);
    }

.wallet-opt__logo-img {
      width: 28px;
      height: 28px;
      display: block;
      object-fit: contain;
    }

.wallet-opt__text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.12rem;
    }

.wallet-opt__name {
      font-weight: 750;
      font-size: 0.9rem;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }

.wallet-opt__sub {
      font-size: 0.68rem;
      line-height: 1.25;
      color: var(--text-muted);
    }

.wallet-opt__ico--ok {
      background: rgba(34, 197, 94, 0.18);
      border-color: rgba(34, 197, 94, 0.42);
      color: #4ade80;
    }

.wallet-opt__sub--addr {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: rgba(226, 232, 240, 0.92);
      word-break: break-all;
      line-height: 1.3;
    }

.wallet-opt__badge {
      flex-shrink: 0;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

.wallet-opt__chev {
      flex-shrink: 0;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1;
      opacity: 0.65;
      padding: 0 0.1rem;
    }

/* Desktop: title card below each centered nav icon (same labels as mobile list) */

/*  Rise stack (HoverGrid-style mosaic + product nav)  */

/* Pinned preview + scroll narrative (pattern after GSAP pinned mask demos; Rise copy + theme). */

/* Mosaic arch sits on the deep blue stack band in light theme  match dark-mode contrast (light copy). */

/* Awwwards-style layer for home product story cards */

/* Arch: ignore sheet-sized shot-frame heights  fill under chrome, clip only the canvas. */

/* Tall track is #riseStackArchPin; sticky inner keeps preview viewport-height (no GSAP position:fixed pin). */

/* Headline block, then a full-width product UI preview as the focal point */

/*  Product showcase: themed glass + cards + motion  */

/* Scroll story: hide bits until revealed */

/* Partner strip pinned to bottom of hero */

.home-overview__partners {
      position: relative;
      margin: 0;
      max-width: none;
      width: 100%;
    }

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

/* Pause while hovering, while a logo link is focused, or after pointer interaction (see partners-marquee pause script) */

/* Both keyframe values use % of the track width so the loop restarts reliably (vw + % mix can break infinite in some browsers). */

/* Vercel mark is black; invert on dark page so it stays visible like their light-on-dark usage */

/* Use the global Three.js background on landing too (no local hero backdrop layers). */

/* GlowBlobs  outer full-bleed; inner cluster true mid/mid of hero */

/* Purple pair  back layer, nudged inward for overlap */

/* Cyan pair  mid layer through violets */

/* Pink pair  front layer, sits in the mixed core */

/* Extra purple */

/* Extra cyan */

/* Extra pink */

/* Left rail  extra purple + cyan (balance mass vs right stack) */

/* Light: same motion pattern, larger inhale (heavier blob breathe) */

/* Breathing mesh behind hero title  both themes (default was dark-only before) */

/* Mesh replaces aurora (old screen-blend aurora read as invisible behind hero) */

.hero-product-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0.52rem 0.42rem;
      text-align: center;
      text-decoration: none;
      border-radius: 12px;
      border: 1px solid var(--hero-border);
      background: var(--bg-elevated);
      color: var(--text);
      opacity: 0;
      transform: translateY(18px);
      animation: spotlight-cta-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    }

/* Dark: secondary hero tiles  no default stroke; border matches suite / primary CTA on hover only */

.hero-product-tile:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 255, 255, 0.45);
    }

.hero-product-tile--suite {
      flex-direction: column;
      gap: 0.3rem;
      min-height: 0;
      padding: 0.52rem 0.42rem;
    }

.hero-product-tile--suite .hero-product-tile__title {
      font-size: clamp(0.72rem, 1.45vw, 0.86rem);
      letter-spacing: 0.035em;
      text-transform: none;
    }

.hero-product-tile__icon {
      width: 1.15rem;
      height: 1.15rem;
      flex-shrink: 0;
      color: var(--cyan);
      opacity: 0.92;
    }

.hero-product-tile--suite .hero-product-tile__icon {
      width: 1.25rem;
      height: 1.25rem;
    }

.hero-product-tile__title {
      font-weight: 780;
      font-size: clamp(0.72rem, 1.45vw, 0.86rem);
      letter-spacing: 0.035em;
      line-height: 1.22;
      color: var(--text);
    }

footer {
      position: relative;
      z-index: 3;
      margin-top: auto;
      padding: 0.72rem 1.35rem 0.58rem;
      border-top: 1px solid var(--hero-border);
      background: var(--bg-page);
    }

/* Paper routes: light footer band + black type (navy footer + slate was low-contrast) */

.footer-inner {
      width: 100%;
      max-width: none;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem 1.25rem;
    }

.footer-brand {
      margin: 0;
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.03em;
    }

.footer-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.2rem 0.55rem;
      justify-content: flex-end;
      margin: 0;
    }

.footer-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.3rem;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 500;
      border-radius: 0.45rem;
      transition: color 0.2s, background 0.2s;
    }

.footer-links a:hover {
      color: var(--cyan);
      background: color-mix(in srgb, var(--cyan) 12%, transparent);
    }

.footer-links .ico {
      width: 20px;
      height: 20px;
      opacity: 0.92;
      flex-shrink: 0;
    }

/* Public scope: apply dashboard-like dark surfaces without removing background FX. */
html[data-rise-scope="public"] .hero-product-tile {
      border-color: color-mix(in srgb, var(--hero-border) 85%, rgba(255, 255, 255, 0.06));
      background: color-mix(in srgb, var(--bg-elevated) 90%, rgba(2, 6, 23, 0.18));
      box-shadow:
        0 10px 28px rgba(2, 6, 23, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(8px) saturate(1.08);
    }

html[data-rise-scope="public"] .hero-product-tile:hover {
      border-color: color-mix(in srgb, var(--cyan) 42%, rgba(255, 255, 255, 0.3));
      box-shadow:
        0 14px 34px rgba(2, 6, 23, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

/*
      Light + home: full 17 glow blobs + mesh breathe again (same count as markup).
      Still skip grain + sweep + grid motion and soften nav blur  those layers were the extra compositor cost on top of the blob stack.
      Slightly slower wave than default 4s / 8s so motion stays calmer on integrated GPUs.
    */

/* WIP routes: landing lives in .page-home-content; /overview, /products, etc. = empty stub + footer */

.page-stub {
      display: none;
    }

/* Pause landing-only CSS animations when the home shell is not active (GPU + compositor) */

/* Hard non-home spacing below fixed navbar. */

/* AI Suite: lock document height so site footer stays on-screen; long chat scrolls inside the column. */

/*
      AI Suite (non-embed): section already has header-offset; inner grid stays flush to the padded box.
    */

.page-merch-hub {
      display: none;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 2.65rem 1.25rem 2.75rem;
      box-sizing: border-box;
    }

.merch-hub__visual-shell {
      position: relative;
      width: 100%;
      height: clamp(360px, calc(86vh - 11rem), 780px);
      max-height: min(80vh, 860px);
      min-height: 320px;
      border-radius: 0.55rem;
      overflow: hidden;
      background: rgba(2, 6, 23, 0.5);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--gold) 28%, rgba(255, 255, 255, 0.08)),
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 0 80px color-mix(in srgb, var(--gold) 14%, transparent);
    }

.merch-hub__shelf {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      padding: 0.85rem;
      box-sizing: border-box;
    }

.merch-hub__tile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 0.2rem;
      padding: 0.75rem 0.7rem;
      border-radius: 0.5rem;
      border: 1px solid var(--hero-border);
      background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
    }

.merch-hub__tile-tag {
      font-size: 0.52rem;
      font-weight: 850;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold);
    }

.merch-hub__tile-name {
      font-size: 0.78rem;
      font-weight: 750;
      color: var(--text);
    }

.merch-hub__tile-price {
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--text-muted);
    }

/* User portal  product dashboard */

/* Wrapper only — gradient + clip on nested inline-blocks breaks in WebKit if applied here. */

/* Dashboard (light): same card surface as /documentation doc-cards */

/* Dashboard: doc-style cards — large icon hero, title + gate only */

/* Code & chat: portrait — full card width (cover); bias crop to top so GM / head stay in frame. */

/* Swap: portrait scenic — favor upper/mid framing (characters + skyline). */

/* Dashboard product launch (Codrops-style add-to-cart motion, dependency-free) */

.rise-dash-launch-shell {
      position: fixed;
      z-index: 10050;
      margin: 0;
      padding: 0;
      pointer-events: none;
      transform-origin: 50% 50%;
      will-change: transform, opacity;
      box-sizing: border-box;
    }

.rise-dash-launch-shell .rise-dash-launch-clone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      margin: 0;
      cursor: default;
    }

/* Rise AI Suite  same layout chrome as automated-trading / documentation hubs */

/* Rise AI Suite  workspace (Google AI Studiostyle 3-column shell) */

/* Live page embed (?embed=1)  hide site chrome for in-app / iframe previews */

/* Left rail copy uses var(--text) / var(--text-muted); scope true black here (brand + nav + foot). */

/* Wraps spacers + hero; grid + data-suite-hero-mode center the logo/tagline mid-column on all tools. */

/* Mid-column P5 / logo hero: Code & chat only — other tools need that vertical space. */

/*
      Center-mode vertical alignment: flex + two flex:1 children split space 50/50 (hero looks "too high").
      Use grid: hero row gets all remaining height (1fr); chat/tool row is auto — hero centers in true mid-band.
    */

/* Push hero lower: more flex above, less gap before chat stream. */

/* Hero is visually hidden but still reserved space  shrink top flex when hero collapses. */

/* AI Suite (non-embed): kill marketing top spacer — would re-introduce a gap below the nav. */

/* Hero margin always (collapsed too) so removing .is-collapsed does not strip margin and jump layout. */

/* Wider track so the p5 wings are not clipped; tagline stays a readable measure below. */

/* Open upward in the nav rail so the menu stays inside overflow regions. */

/* Collapse layout when working (images/code): opacity-only left ~56vh of empty chrome above chat. */

/* Push short threads toward the prompt; shrinks away when history overflows (unlike justify-content: flex-end + tall media). */

/* Center mode: chat/tool strip is one auto-sized row so the hero row absorbs spare height (vertical mid). */

/*
      Videos / speech: hero cluster is CSS-hidden (not code-chat), so the "collapsed hero" full-height
      branch never matches — the rule above would cap tool-output to ~36vh and breaks the hub UI.
    */

/*
      Images: gallery fills the column from the top; composer stays sticky at the bottom (Leonardo-like).
      Remove the flex spacer pseudo-element used to pin short chat threads toward the prompt.
    */

/* Projects = file manager: hide credits strip, prompt, hero, and right settings rail */

/* Leonardo-style outcome row: image + meta, full width above the composer. */

/* Speech transcript is filled by JS only  keep out of layout. */

#suiteStudioSpeechTranscript {
      display: none !important;
    }

/* Author `display:flex` wins over `[hidden]` otherwise — Images must not show the chat engine (gpt-4o-mini). */

#suiteStudioPromptEngineWrap[hidden] {
      display: none !important;
    }

/* Product hub cinematic heroes  mesh, preview shot, stat chips */

.rise-hub-hero {
      position: relative;
      margin: 0 0 clamp(2rem, 4vw, 2.75rem);
      padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.15rem, 2.8vw, 1.85rem);
      border-radius: clamp(0.85rem, 2vw, 1.2rem);
      border: 1px solid var(--hero-border);
      overflow: hidden;
      isolation: isolate;
      background: color-mix(in srgb, var(--bg-elevated) 55%, var(--bg-page));
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
        0 24px 64px rgba(0, 0, 0, 0.28);
    }

.rise-hub-hero::before {
      content: "";
      position: absolute;
      inset: -55%;
      z-index: 0;
      pointer-events: none;
      opacity: 0.95;
      background:
        radial-gradient(ellipse 55% 42% at 12% 18%, rgba(167, 139, 250, 0.35), transparent 52%),
        radial-gradient(ellipse 50% 38% at 88% 72%, rgba(56, 189, 248, 0.28), transparent 50%),
        radial-gradient(ellipse 40% 35% at 70% 12%, rgba(244, 114, 182, 0.12), transparent 45%);
    }

.rise-hub-hero--trade::before {
      background:
        radial-gradient(ellipse 55% 42% at 10% 22%, rgba(52, 211, 153, 0.32), transparent 52%),
        radial-gradient(ellipse 48% 40% at 90% 70%, rgba(212, 175, 55, 0.22), transparent 50%),
        radial-gradient(ellipse 38% 32% at 62% 8%, rgba(14, 165, 233, 0.15), transparent 46%);
    }

.rise-hub-hero--markets::before {
      background:
        radial-gradient(ellipse 52% 40% at 15% 20%, rgba(129, 140, 248, 0.38), transparent 52%),
        radial-gradient(ellipse 48% 38% at 85% 75%, rgba(99, 102, 241, 0.22), transparent 50%),
        radial-gradient(ellipse 36% 30% at 78% 10%, rgba(34, 197, 94, 0.14), transparent 44%);
    }

.rise-hub-hero--events::before {
      background:
        radial-gradient(ellipse 52% 40% at 12% 24%, rgba(251, 113, 133, 0.32), transparent 52%),
        radial-gradient(ellipse 50% 38% at 88% 68%, rgba(251, 191, 36, 0.2), transparent 50%),
        radial-gradient(ellipse 40% 34% at 55% 6%, rgba(244, 63, 94, 0.16), transparent 46%);
    }

.rise-hub-hero--merch::before {
      background:
        radial-gradient(ellipse 52% 40% at 14% 22%, rgba(212, 175, 55, 0.34), transparent 52%),
        radial-gradient(ellipse 48% 38% at 86% 72%, rgba(244, 114, 182, 0.2), transparent 50%),
        radial-gradient(ellipse 38% 32% at 58% 10%, rgba(56, 189, 248, 0.14), transparent 46%);
    }

.rise-hub-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.35;
      background-image:
        linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 72%);
    }

.rise-hub-hero__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.92fr);
      gap: clamp(1.15rem, 3vw, 2.1rem);
      align-items: center;
    }

@media (max-width: 900px) {
      .rise-hub-hero__inner {
        grid-template-columns: minmax(0, 1fr);
      }
      .rise-hub-hero__visual {
        order: -1;
      }
    }

.rise-hub-hero__eyebrow {
      margin: 0 0 0.55rem;
      font-size: 0.62rem;
      font-weight: 850;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--cyan) 85%, var(--text-muted));
    }

.rise-hub-hero--trade .rise-hub-hero__eyebrow {
      color: color-mix(in srgb, var(--gold) 75%, var(--text-muted));
    }

.rise-hub-hero--markets .rise-hub-hero__eyebrow {
      color: color-mix(in srgb, #818cf8 80%, var(--text-muted));
    }

.rise-hub-hero--events .rise-hub-hero__eyebrow {
      color: color-mix(in srgb, #fb7185 85%, var(--text-muted));
    }

.rise-hub-hero--merch .rise-hub-hero__eyebrow {
      color: color-mix(in srgb, var(--gold) 78%, var(--text-muted));
    }

.rise-hub-hero .rise-hub-hero__title {
      font-size: clamp(1.55rem, 4.2vw, 2.35rem);
      font-weight: 850;
      letter-spacing: -0.02em;
      line-height: 1.12;
      margin: 0 0 0.65rem;
      color: var(--text);
      text-wrap: balance;
    }

.rise-hub-hero .rise-hub-hero__lead {
      margin: 0;
      max-width: 42rem;
      font-size: clamp(0.92rem, 1.55vw, 1.08rem);
      line-height: 1.58;
      color: var(--text-muted);
    }

.rise-hub-hero .rise-hub-hero__lead strong {
      color: var(--text);
      font-weight: 700;
    }

.rise-hub-hero__stats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 1.1rem;
    }

.rise-hub-hero__stat {
      display: inline-flex;
      align-items: center;
      padding: 0.38rem 0.72rem;
      border-radius: 999px;
      font-size: 0.66rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text);
      border: 1px solid color-mix(in srgb, var(--cyan) 38%, var(--hero-border));
      background: color-mix(in srgb, var(--bg-page) 65%, transparent);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    }

.rise-hub-hero--trade .rise-hub-hero__stat {
      border-color: color-mix(in srgb, var(--gold) 42%, var(--hero-border));
    }

.rise-hub-hero--markets .rise-hub-hero__stat {
      border-color: color-mix(in srgb, #818cf8 45%, var(--hero-border));
    }

.rise-hub-hero--events .rise-hub-hero__stat {
      border-color: color-mix(in srgb, #fb7185 42%, var(--hero-border));
    }

.rise-hub-hero--merch .rise-hub-hero__stat {
      border-color: color-mix(in srgb, var(--gold) 44%, var(--hero-border));
    }

.rise-hub-hero__links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1.15rem;
    }

.rise-hub-hero__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.48rem 0.95rem;
      border-radius: 0.5rem;
      font-size: 0.78rem;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid var(--hero-border);
      color: var(--text);
      background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

.rise-hub-hero__link:hover {
      border-color: color-mix(in srgb, var(--cyan) 45%, var(--hero-border));
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

.rise-hub-hero__link--primary {
      border-color: #00267a;
      background: #00267a;
      color: #fff;
    }

.rise-hub-hero__link--primary:hover {
      border-color: #003d9e;
      background: #003d9e;
      color: #fff;
    }

.rise-hub-hero__visual {
      min-width: 0;
    }

.rise-hub-hero__chrome {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.45rem;
      padding: 0.35rem 0.5rem;
      border-radius: 0.5rem 0.5rem 0 0;
      border: 1px solid var(--hero-border);
      border-bottom: none;
      background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    }

.rise-hub-hero__dots {
      display: inline-flex;
      gap: 0.28rem;
    }

.rise-hub-hero__dots span {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
      background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    }

.rise-hub-hero__dots span:nth-child(1) {
      background: #fb7185;
    }

.rise-hub-hero__dots span:nth-child(2) {
      background: #fbbf24;
    }

.rise-hub-hero__dots span:nth-child(3) {
      background: #34d399;
    }

.rise-hub-hero__visual-wrap {
      border-radius: 0.55rem;
      overflow: hidden;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent),
        0 28px 70px rgba(0, 0, 0, 0.35);
    }

.rise-hub-hero--suite .rise-hub-hero__inner {
      grid-template-columns: minmax(0, 1fr);
    }

.rise-hub-hero--suite .rise-hub-hero__title {
      max-width: 20ch;
    }

.rise-hub-hero--suite .rise-hub-hero__lead {
      max-width: 56rem;
    }

/* /ai-suite: denser type + spacing (marketing page) */

/* Public product pages (light): white copy on blue field (marketing hubs; card surfaces use scoped rules below). */

/* Light + paper trade surfaces (public + dashboard): dark type — do not inherit marketing white-on-blue from .page-trade-hub */

/* Public product hubs (light): homepage hero tile + meta-row button colors; flat (no box-shadow) */

.page-trade-hub {
      display: none;
      width: 100%;
      max-width: 1180px;
      margin-left: auto;
      margin-right: auto;
      padding: 2.65rem 1.25rem 2.75rem;
      box-sizing: border-box;
    }

#tradeHubDashboardDesk {
      display: none;
    }

.rise-public-page-preview {
      display: none;
      width: 100%;
      max-width: min(1440px, calc(100vw - 1rem));
      margin-left: 0;
      margin-right: auto;
      padding-top: 0.25rem;
    }

.rise-public-page-preview__frame {
      border: 1px solid var(--hero-border);
      border-radius: 0.95rem;
      overflow: hidden;
      background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
      box-shadow: 0 24px 70px color-mix(in srgb, #0f172a 45%, transparent);
    }

.rise-public-page-preview__img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

.rise-public-page-preview__img--light {
      display: none;
    }

/* Icons had no size rule — <img> used intrinsic PNG/SVG dimensions (huge on cards). */

/* Mobile optimization pass for Trading deck */

/* Kept for clarity if automated markup ever re-used a bordered wrapper */

/* Rise trading desk  DEX screener + sniper (APEX-style layout, Rise tokens) */

#trade-hub-bots {
      scroll-margin-top: calc(var(--header-offset) + 0.75rem);
    }

#trade-hub-modules {
      scroll-margin-top: calc(var(--header-offset) + 0.75rem);
    }

#trade-hub-choose {
      scroll-margin-top: calc(var(--header-offset) + 0.75rem);
    }

/* Dashboard — sports pools (parimutuel UI shell; execution not wired yet) */

.page-rise-swap,
    .page-rise-dashboard-swap {
      display: none;
      width: 100%;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      padding: 0.5rem 0.75rem 2rem;
      box-sizing: border-box;
      flex: 1 1 auto;
    }

/* Light: same “three blobs + haze” idea, tuned for pale backgrounds */

/* Dashboard ETH↔TOP tokens: pills are not gated on eth-rise / rise-eth selectors */

/* --- Dashboard swap: Uniswap-style layout (scoped) --- */

/* Invisible tap target opens Uniswap-style token modal */

/* --- Token picker modal (dashboard swap) --- */

/* Light scrim only — avoid full-screen blackout; page stays readable behind the picker. */

/* One scroll surface (like Uniswap): search, chips, “Your tokens”, “Tokens”, and list move together */

/* Allow wrap so long subtitles do not collide with amount column ("Ethere" clipping). */

.page-prediction-markets {
      display: none;
      width: 100%;
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
      padding: 2.65rem 1.25rem 2.75rem;
      box-sizing: border-box;
    }

/* Events betting  same hub chrome & components as prediction markets */

.page-events-rail {
      display: none;
      width: 100%;
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
      padding: 2.65rem 1.25rem 2.75rem;
      box-sizing: border-box;
    }

/* Public product pages: cinematic preview-first presentation. */

/* Public marketing: preview-first layout only when the wallet is not on the RISE trade gate. With access, the desk + screener are shown (not /dashboard; do not add dashboard scope here). */

/* Prediction markets  Polymarket-style feed (static UI) */

/* Doc hub: avoid hover translateChrome often softens images on subpixel transforms */

/* Photo thumbs: native cover onlyno CSS scale (scale blurs rasters). Reframe with object-position. */

/* Documentation hub (light): deep blue frame + cool surface; icons match nav blue */

/* PDF: dark chrome + fill card so the iframe uses all space below the toolbar */

/* Image assets: no white cardonly the photo over the dimmed overlay */

/* Public product pages: visual redesign pass */

/* No top-of-page radial wash behind headers (was .page-*::before) */

/* Homepage rise-stack: Awwwards-style redesign */

/* Product previews standard: same card + terminal shell only. */

/* Keep product page content centered in the viewport. */

/* Hide kicker text above product page H1 titles. */

/* One type scale for the whole Platform Tools block (head + tiles) */

/* Light: “hardware mockup” — metal frame, frosted bar + fake URL, dark display bezel (not flat white) */

/* Default: dark screenshot; light hidden until theme is explicitly light */