/* ════════════════════════════════════════════════════ Utility: nowrap on desktop, wrap on mobile. Used by closer-section sentences that must stay one line on desktop but should wrap naturally on phones so they don't crop out of the section gutter. */ .mlp-nowrap-desktop { white-space: nowrap; } @media (max-width: 767px) { .mlp-nowrap-desktop { white-space: normal !important; } } /* ════════════════════════════════════════════════════ FULL-SCREEN DOCS PORTAL — hide page chrome When the engine-docs modal opens (TradingEnginePage sets body[data-mel-docs-open="1"]), hide the floating LandingNav and the Discord pill so the modal reads as a true portal layer instead of sitting on top of page chrome. ════════════════════════════════════════════════════ */ body[data-mel-docs-open="1"] nav[aria-label="Site navigation"], body[data-mel-docs-open="1"] .mlp-discord-cta { display: none !important; } /* ════════════════════════════════════════════════════ DISCORD CTA — product-page bottom alignment On the product pages, drop the floating "Join the community" pill down to match the ThemeToggle's bottom-right corner anchor (bottom: 20px), so the two floating controls read as a matched pair at the same baseline on desktop. Mobile keeps the existing top-left circle anchor (the component already sets top: 12). ════════════════════════════════════════════════════ */ @media (min-width: 769px) { [data-mel-product="1"] .mlp-discord-cta { bottom: 88px !important; } } /* ════════════════════════════════════════════════════ CREW PERSONA PARADE — desktop chevron controls Hides the native scrollbar, positions two big modern glassmorphic chevron buttons on the LEFT and RIGHT edges of the parade, vertically centered with the persona rail. Chevrons clickable on desktop, hidden on mobile (touch-swipe is the affordance there). ════════════════════════════════════════════════════ */ .mlp-crew-parade-scroll::-webkit-scrollbar { display: none; } .mlp-crew-parade-scroll { scrollbar-width: none; -ms-overflow-style: none; } .mlp-crew-parade-chev { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; /* Lighter "floating" feel — barely-there border, soft diffuse halo instead of a hard shadow, deeper blur so the parade behind reads through the chip. */ background: linear-gradient(165deg, rgba(28, 34, 50, 0.55) 0%, rgba(16, 20, 30, 0.45) 100%); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(232, 240, 255, 0.88); cursor: pointer; z-index: 6; padding: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 10px 30px -10px rgba(8, 12, 24, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02); transition: transform 260ms cubic-bezier(.22,.61,.36,1), background 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease; } .mlp-crew-parade-chev:hover { transform: translateY(-50%) scale(1.07); background: linear-gradient(165deg, rgba(45, 212, 191, 0.20) 0%, rgba(139, 92, 246, 0.14) 100%); border-color: rgba(45, 212, 191, 0.40); color: #ECFEFF; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 40px -10px rgba(45, 212, 191, 0.42), 0 0 0 1px rgba(45, 212, 191, 0.12); } .mlp-crew-parade-chev:active { transform: translateY(-50%) scale(0.96); } .mlp-crew-parade-chev:focus-visible { outline: 2px solid rgba(45, 212, 191, 0.55); outline-offset: 3px; } .mlp-crew-parade-chev-left { left: 18px; } .mlp-crew-parade-chev-right { right: 18px; } /* ── Light theme: floating teal-tinted frosted chip ── Modern fresh white glass with a baked-in cyan flush so the chip never reads as "grey button" at rest. Hairline cyan border, teal icon, soft cyan glow halo. */ :root.light .mlp-crew-parade-chev { background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 254, 255, 0.78) 100%); border-color: rgba(45, 212, 191, 0.22); color: #0F766E; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 10px 28px -10px rgba(45, 212, 191, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.85) inset, 0 1px 4px -1px rgba(15, 23, 42, 0.06); } :root.light .mlp-crew-parade-chev:hover { background: linear-gradient(165deg, rgba(204, 251, 241, 0.95) 0%, rgba(237, 233, 254, 0.82) 100%); border-color: rgba(45, 212, 191, 0.55); color: #0E7490; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 14px 40px -10px rgba(45, 212, 191, 0.42), 0 0 0 1px rgba(45, 212, 191, 0.30); } /* Hide the chevrons on mobile — the carousel is touch-swipe, no need for click targets in the way. */ @media (max-width: 768px) { .mlp-crew-parade-chev { display: none !important; } } /* ════════════════════════════════════════════════════ DESKTOP WIDTH CONSTRAINT — applied to all product pages so content never sprawls full-width on huge displays. The Framework page already wraps its sections in explicit maxWidth: 1440 containers; this rule does the same for Engine + Crew via the MotionSection wrapper, which both pages use. Sections that need full-bleed (background wordmark drifts, marquees) handle their own overflow internally and stay unaffected because the cap is set on the OUTER section, not on inner overflow: hidden / position: absolute children. ════════════════════════════════════════════════════ */ [data-mel-product="1"] .mlp-product-section { max-width: 1440px; margin-left: auto; margin-right: auto; } /* ExchangeStrip is shared with the landing page where it carries a sm:py-36 (144 px) Tailwind padding. On the product page that prints a 170-200 px dead band between the marquee and the stat row that follows. Tagged with .mlp-cov-strip on the product page; collapse the inherited padding here so the gap closes to the marginTop on the stat row only. */ [data-mel-product="1"] .mlp-cov-strip > section { padding-top: 0 !important; padding-bottom: 0 !important; } /* ════════════════════════════════════════════════════ ROOT TOKENS — scoped to product surface ════════════════════════════════════════════════════ */ [data-mel-product="1"] { --mlp-section-gutter: clamp(20px, 3.6vw, 56px); --mlp-section-y: clamp(56px, 8vh, 104px); } [data-mel-product="1"], [data-mel-product="1"] *, [data-mel-product="1"] *::before, [data-mel-product="1"] *::after { box-sizing: border-box; } /* All known grid containers + their direct children must allow shrinking — prevents min-content blowout on phones where a single long token can otherwise push the grid past 100vw. */ [data-mel-product="1"] :is( .mlp-product-section, .mlp-framework-surface-grid, .mlp-framework-safety-grid, .mlp-framework-trigger-grid, .mlp-framework-models-grid, .mlp-framework-rag-grid, .mlp-framework-team-grid, .mlp-framework-monitor-grid, .mlp-crew-tools-grid, .mlp-crew-steps-grid, .mlp-crew-dryrun-grid, .trading-engine-core-grid, .trading-engine-crypto-grid, .trading-engine-prediction-grid, .trading-engine-studio-grid, .trading-engine-studio-pipeline, .trading-engine-bt-grid, .trading-engine-live-grid, .trading-engine-compose-grid, .trading-engine-wire-triplet, .trading-engine-tier-grid, .trading-engine-lattice-header, .trading-engine-lattice-row, .trading-engine-live-stage ) > * { min-width: 0; } .mlp-product-section { scroll-margin-top: 92px; } /* ════════════════════════════════════════════════════ SCROLL BEHAVIOUR — vertical magnetism removed The page-wide light scroll-snap (previously scroll-snap-type: y proximity on html.mlp-snap plus scroll-snap-align: start on every .mlp-product-section) has been removed. Product-page sections are TALLER than the viewport, so a proximity snap never lined a section up one-to-one on screen and instead fought the user's scroll and the mobile sticky decks. Scroll is now free and native on every viewport, phones included. The mlp-snap class is still toggled by the mount effect but no longer carries a snap type, so it is harmless. scroll-padding-top is kept so anchor deep-links and scrollIntoView still land a section below the fixed glass nav rather than under it. ════════════════════════════════════════════════════ */ html.mlp-snap { scroll-padding-top: 92px; } /* ════════════════════════════════════════════════════ TIER 1 — TABLET PORTRAIT (≤ 1024 px) - Tighten the section gutter scale - Collapse every 2-/3-col section grid to single column - Cap every decorative N-vw font-size above 12 vw - Soften, do not yet hide, the giant ambient wordmarks ════════════════════════════════════════════════════ */ @media (max-width: 1024px) { [data-mel-product="1"] { --mlp-section-gutter: clamp(20px, 4.2vw, 36px); --mlp-section-y: clamp(52px, 7vh, 80px); } /* Side padding compression. Sections were eating up to 64 px per side on tablets — too much for an editorial layout that already runs ~720 px wide content. */ [data-mel-product="1"] section[id], [data-mel-product="1"] .mlp-section, [data-mel-product="1"] .mlp-product-section, [data-mel-product="1"] .mlp-hero-section { padding-left: clamp(16px, 4vw, 36px) !important; padding-right: clamp(16px, 4vw, 36px) !important; } /* Engine-page named grids. */ [data-mel-product="1"] :is( .trading-engine-core-grid, .trading-engine-crypto-grid, .trading-engine-prediction-grid, .trading-engine-studio-grid, .trading-engine-studio-pipeline, .trading-engine-bt-grid, .trading-engine-live-grid, .trading-engine-compose-grid, .trading-engine-wire-triplet, .trading-engine-tier-grid, .trading-engine-lattice-header, .trading-engine-lattice-row, .trading-engine-live-stage ) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; column-gap: 0 !important; } /* Crew + framework page named grids. */ [data-mel-product="1"] :is( .mlp-crew-steps-grid, .mlp-crew-tools-grid, .mlp-crew-dryrun-grid, .mlp-framework-surface-grid, .mlp-framework-safety-grid, .mlp-framework-trigger-grid, .mlp-framework-models-grid, .mlp-framework-rag-grid, .mlp-framework-team-grid, .mlp-framework-monitor-grid ) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; column-gap: 0 !important; } /* Inline grid-template-columns minmax() variants used by framework + engine pages — collapse any of them. */ [data-mel-product="1"] [style*="minmax(0, 1.35fr) minmax(0, 1fr)"], [data-mel-product="1"] [style*="minmax(0, 1.4fr) minmax(0, 1fr)"], [data-mel-product="1"] [style*="minmax(0, 1.1fr) minmax(0, 1fr)"], [data-mel-product="1"] [style*="minmax(0, 1.08fr) minmax(0, 1fr)"], [data-mel-product="1"] [style*="minmax(0, 1.05fr) minmax(0, 1fr)"], [data-mel-product="1"] [style*="minmax(0, 1fr) minmax(0, 1.35fr)"], [data-mel-product="1"] [style*="minmax(0, 1fr) minmax(0, 1.08fr)"], [data-mel-product="1"] [style*="minmax(0, 1fr) minmax(0, 1.1fr)"], [data-mel-product="1"] [style*="minmax(0, 2fr) minmax(0, 1fr)"] { grid-template-columns: 1fr !important; row-gap: 28px !important; } /* Cap every decorative N-vw font (anything above 12 vw is background wordmark territory — DISPATCH, COVERAGE, CATALOG, REPLAY, etc.). The 18/22/28 vw inline styles in AgenticFrameworkPage all match the substring selectors below. */ [data-mel-product="1"] [style*="fontSize: \"30vw\""], [data-mel-product="1"] [style*="fontSize: \"28vw\""], [data-mel-product="1"] [style*="fontSize: \"24vw\""], [data-mel-product="1"] [style*="fontSize: \"22vw\""], [data-mel-product="1"] [style*="fontSize: \"20vw\""], [data-mel-product="1"] [style*="fontSize: \"18vw\""], [data-mel-product="1"] [style*="fontSize: \"16vw\""], [data-mel-product="1"] [style*="fontSize: \"14vw\""], [data-mel-product="1"] [style*="font-size: 30vw"], [data-mel-product="1"] [style*="font-size: 28vw"], [data-mel-product="1"] [style*="font-size: 24vw"], [data-mel-product="1"] [style*="font-size: 22vw"], [data-mel-product="1"] [style*="font-size: 18vw"], [data-mel-product="1"] [style*="font-size: 16vw"] { font-size: clamp(72px, 12vw, 160px) !important; } } /* ════════════════════════════════════════════════════ TIER 2 — LARGE PHONE (≤ 768 px) - Neutralise every position: sticky (touch scroll trap) - Promote vh → dvh for full-viewport regions - Force 44 px minimum touch targets on every CTA + tab - Compress typography scale, stat grids, persona discs - Hide pure-decoration loops: GlyphStream, ParticleDrift ════════════════════════════════════════════════════ */ @media (max-width: 768px) { [data-mel-product="1"] { --mlp-section-gutter: clamp(18px, 5vw, 24px); --mlp-section-y: clamp(28px, 5vh, 44px); } /* Vertical rhythm — ASYMMETRIC on mobile. Generous space BEFORE a section (top) separates it from the previous one; tighter space after (bottom) binds a section's own content together. Total edge gap between consecutive sections lands ~64-88px, weighted toward the incoming section so each block reads as its own unit instead of blurring into the previous one. The inline margin-top 48..80 → 22px cap below stays: a subtitle still sits close to the content under it. Hero is excluded — it manages its own nav-clearing top padding. */ [data-mel-product="1"] section[id]:not(.mlp-hero-section), [data-mel-product="1"] .mlp-section:not(.mlp-hero-section), [data-mel-product="1"] .mlp-product-section:not(.mlp-hero-section) { padding-top: clamp(68px, 11vh, 100px) !important; padding-bottom: clamp(44px, 7vh, 64px) !important; } /* First section directly under the nav keeps a compact top — the big pre-section gap only belongs BETWEEN sections, never under the fixed nav. */ [data-mel-product="1"] .mlp-product-content > .mlp-product-section:first-child:not(.mlp-hero-section) { padding-top: clamp(20px, 4vh, 32px) !important; } /* Compress oversize inline marginTop on the FIRST child of any section content area. Many sections set marginTop:48 or 56 between a lead paragraph and the cards/visual underneath. On mobile that compounds with the section's own padding and reads as wasted space. This rule caps inline marginTop attribute values of 48/56/64/80 to 20px on mobile. */ [data-mel-product="1"] section [style*="margin-top: 48"], [data-mel-product="1"] section [style*="marginTop: 48"], [data-mel-product="1"] section [style*="margin-top: 56"], [data-mel-product="1"] section [style*="marginTop: 56"], [data-mel-product="1"] section [style*="margin-top: 64"], [data-mel-product="1"] section [style*="marginTop: 64"], [data-mel-product="1"] section [style*="margin-top: 80"], [data-mel-product="1"] section [style*="marginTop: 80"] { margin-top: 22px !important; } /* Engine page route override — keep section gutters aligned to the token but exclude the strategy-studio (it owns its own pinned canvas styling). */ [data-product-route="trading-engine"] .mlp-product-section:not(#strategy-studio):not(.mlp-hero-section) { padding-left: var(--mlp-section-gutter) !important; padding-right: var(--mlp-section-gutter) !important; /* Same asymmetric rhythm as the generic mobile rule — this selector outranks it, so it must carry the tiers itself rather than the symmetric token. */ padding-top: clamp(68px, 11vh, 100px) !important; padding-bottom: clamp(44px, 7vh, 64px) !important; } [data-product-route="trading-engine"] #strategy-studio { padding: 0 var(--mlp-section-gutter) !important; } /* DISABLE STICKY ON TOUCH. Every sticky pin captures the scrollable region and traps two-finger pan + flick gestures on iOS. We unstick all of them and let native scroll run. EXCEPTIONS: - .trading-engine-studio-pin — sticky DRAFTER → CRITIC → REPAIRER crossfade across ~220vh. - .mlp-crew-composition-mobile-pin — sticky pile of the 8 composition cards across ~180vh. */ [data-mel-product="1"] [style*="position: sticky"]:not(.trading-engine-studio-pin):not(.mlp-crew-composition-mobile-pin), [data-mel-product="1"] [style*="position:sticky"]:not(.trading-engine-studio-pin):not(.mlp-crew-composition-mobile-pin) { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; } /* Studio scroll wrapper KEEPS its 320vh height on mobile (the choreography needs the scroll distance). */ .trading-engine-studio-scroll { min-height: 320vh !important; } /* Studio pin: use dvh on mobile for the URL-bar collapse but otherwise keep the desktop sticky behaviour intact. */ .trading-engine-studio-pin { height: 100dvh !important; } /* Composition mobile pile — wrapper keeps its 280vh height and the pin uses dvh to survive the URL-bar collapse. Without these the global rules above either collapse the wrapper or shrink the pin below the viewport, killing the pile choreography. */ .mlp-crew-composition-mobile-wrap { min-height: 280vh !important; } .mlp-crew-composition-mobile-pin { height: 100dvh !important; } /* Collapse the over-tall scroll-driven wrappers. */ [data-mel-product="1"] [style*="minHeight: \"180vh\""], [data-mel-product="1"] [style*="minHeight: \"160vh\""], [data-mel-product="1"] [style*="minHeight: \"130vh\""], [data-mel-product="1"] [style*="minHeight: \"120vh\""], [data-mel-product="1"] [style*="minHeight: \"115vh\""] { min-height: auto !important; } /* vh → dvh for genuine full-viewport regions, so the iOS Safari URL bar collapse doesn't clip the content. */ [data-mel-product="1"] [style*="minHeight: \"100vh\""], [data-mel-product="1"] [style*="min-height: 100vh"] { min-height: 100dvh !important; } [data-mel-product="1"] [style*="height: \"100vh\""], [data-mel-product="1"] [style*="height: 100vh"] { height: 100dvh !important; } /* Typography scale reduction. Maps every editorial heading down two tiers per MobileVersion.md §2.3. */ [data-mel-product="1"] h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.06 !important; letter-spacing: -0.03em !important; } [data-mel-product="1"] h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; } [data-mel-product="1"] h3 { font-size: clamp(17px, 4.5vw, 22px) !important; line-height: 1.2 !important; } [data-mel-product="1"] p { font-size: clamp(14px, 3.8vw, 15px) !important; line-height: 1.6 !important; } /* StatRow tiles: any 4-up grid auto-fit collapses to 2-up. */ [data-mel-product="1"] [class*="StatRow"], [data-mel-product="1"] .mlp-stat-row, [data-mel-product="1"] [style*="repeat(auto-fit, minmax(180px"], [data-mel-product="1"] [style*="repeat(auto-fit, minmax(200px"], [data-mel-product="1"] [style*="repeat(auto-fit, minmax(220px"], [data-mel-product="1"] [style*="repeat(auto-fit, minmax(240px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } [data-mel-product="1"] .mlp-product-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 14px !important; } /* Crew stat rows stay flex-nowrap on mobile (per the "counters in ONE row" mandate). The flex original keeps wrapping naturally on narrow screens, so we pin flex-wrap: nowrap and shrink the gap. */ [data-product-route="agentic-trading-crew"] .mlp-crew-stat-row { flex-wrap: nowrap !important; gap: 10px !important; } [data-product-route="agentic-trading-crew"] .mlp-crew-stat-row > * { min-width: 0 !important; flex: 1 1 0 !important; } /* 44 px touch targets on every interactive pill, tab, anchor button. Catches both inline-style and class variants of the rounded CTAs (borderRadius: 999, border-radius: 9999px, .rounded-full, etc.). */ [data-mel-product="1"] a[style*="borderRadius: 999"], [data-mel-product="1"] a[style*="border-radius: 999"], [data-mel-product="1"] a[style*="borderRadius: 9999"], [data-mel-product="1"] button[style*="borderRadius: 999"], [data-mel-product="1"] button[style*="border-radius: 999"], [data-mel-product="1"] a.mlp-cta, [data-mel-product="1"] button.mlp-cta, [data-mel-product="1"] .mlp-hero-actions > a, [data-mel-product="1"] [role="tab"], [data-mel-product="1"] [role="button"] { min-height: 44px !important; min-width: 44px !important; padding-left: 18px !important; padding-right: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Cap persona / avatar SVGs hand-sized for the desktop layout. They overpower a 375 px viewport otherwise. */ [data-mel-product="1"] svg[width="120"], [data-mel-product="1"] svg[width="100"], [data-mel-product="1"] svg[width="92"], [data-mel-product="1"] svg[width="80"], [data-mel-product="1"] svg[width="72"], [data-mel-product="1"] svg[width="70"], [data-mel-product="1"] svg[width="64"] { width: 48px !important; height: 48px !important; } /* DECORATIVE-ONLY ANIMATIONS — hide on phone. These are pure ambient loops with no content payload: - mlpHeroGlyphStream : matrix-like falling glyph tape - mlpHeroParticleDrift: scattered floating dots - mlpHeroDashSweep : horizontal dash sweep bar - mlpAgentSpin / mlpAgentRing : decorative orbit rings - mlpWsScan : websocket scan bar (decor) */ [data-mel-product="1"] [style*="mlpHeroGlyphStream"], [data-mel-product="1"] [style*="mlpHeroParticleDrift"], [data-mel-product="1"] [style*="mlpHeroDashSweep"], [data-mel-product="1"] [style*="mlpAgentSpin"], [data-mel-product="1"] [style*="mlpAgentRing"], [data-mel-product="1"] [style*="mlpWsScan"] { display: none !important; } /* Decorative conic-gradient sweeps used in hero radar / compose canvas. The substring catches the inline background-image setter. */ [data-mel-product="1"] [style*="conic-gradient"] { display: none !important; } /* Background wordmarks set with WebkitTextStroke and very low fill opacity — they read as visual noise on a 375 px viewport. Drop to 5 % so they're effectively invisible without being removed (preserves layout). */ [data-mel-product="1"] [style*="WebkitTextStroke"] { opacity: 0.05 !important; } /* Crew page: persona parade rebuilt as a horizontal scroll-snap carousel of glassmorphic cards on mobile. Width 76vw shows a sliver of the next card on the right edge so the user immediately understands the rail scrolls horizontally. */ .mlp-crew-persona-parade { gap: 14px !important; padding-left: 16px !important; /* Extra right padding so the LAST card can snap to left edge without sitting against the viewport. */ padding-right: 28vw !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-left: 16px; transform: none !important; } .mlp-crew-persona-parade::-webkit-scrollbar { display: none; } /* Glassmorphic plate — frosted background with a soft accent border + subtle elevation. The :nth-child(odd) vs (even) tint variation gives the rail rhythm as the user swipes through cards. */ .mlp-crew-persona-plate { width: 76vw !important; min-width: 76vw !important; max-width: 320px !important; scroll-snap-align: start; scroll-snap-stop: always; padding: 18px 18px 20px !important; border-radius: 20px !important; background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%, rgba(34, 211, 238, 0.04) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -32px rgba(8, 12, 24, 0.55) !important; transition: transform 280ms ease, box-shadow 280ms ease; gap: 12px !important; } /* Lift the focused plate as it snaps into view. */ .mlp-crew-persona-plate:has(*) { transform: translateY(0); } /* In light theme keep the glass cool, not flat. */ :root.light [data-mel-product="1"] .mlp-crew-persona-plate { background: linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 60%, rgba(34, 211, 238, 0.08) 100%) !important; border-color: rgba(15, 23, 42, 0.08) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 44px -28px rgba(15, 23, 42, 0.22) !important; } /* Compress portrait + name + mandate so all 5 lines of content fit comfortably on a 360px viewport. */ .mlp-crew-persona-plate > div:first-child { width: 72px !important; height: 72px !important; } .mlp-crew-persona-plate > div:first-child > div:last-child { width: 72px !important; height: 72px !important; } .mlp-crew-persona-plate > div:first-child svg { width: 68px !important; height: 68px !important; } /* "Swipe →" affordance: a faint hint pinned to the right of the parade so the user knows it scrolls. Implemented as a sticky pseudo on the LAST plate. */ .mlp-crew-persona-plate:last-child::after { content: ""; position: absolute; right: -22vw; top: 50%; transform: translateY(-50%); width: 16vw; height: 60%; background: linear-gradient(90deg, rgba(34, 211, 238, 0.10) 0%, transparent 100%); border-radius: 12px; pointer-events: none; opacity: 0.7; } .mlp-crew-persona-plate { position: relative !important; } /* Crew composition ladder — PopCard owns its own layout (image at top, marker + description below). The old StepCard-grid rules were left over from the previous design and pushed the image out by 38 px from the left edge — now removed. Keep only the templates-closer compression and the description font size. */ .mlp-crew-step-card-desc { font-size: 15px !important; line-height: 1.55 !important; } /* Sidecars: on desktop the bands pile up in a sticky spot via absolute positioning + a 360vh scroll-pin wrapper. On mobile the sticky-pin is awkward, so we: - collapse the wrapper height (no scroll trap) - un-stick the pin - collapse the 2-col grid to single column - de-absolute the bands (they stack vertically with normal flow, all visible) Descriptive prose drops below the band stack. */ .mlp-crew-sidecars-scroll-wrap { min-height: 0 !important; } .mlp-crew-sidecars-pin { position: relative !important; top: auto !important; height: auto !important; display: block !important; } .mlp-crew-sidecars-grid { grid-template-columns: 1fr !important; row-gap: 32px !important; } .mlp-crew-sidecars-pile { height: auto !important; } .mlp-crew-sidecars-pile > * { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; opacity: 1 !important; transform: none !important; margin-top: 18px !important; } .mlp-crew-sidecars-pile > *:first-child { margin-top: 0 !important; } /* Templates closer — kept compact on mobile. The new hyperframe collapses its 3-cell grid to a single column on narrow viewports, with the inter-cell dividers flipped from vertical to horizontal. */ .mlp-crew-templates-closer { margin-top: 48px !important; } .mlp-crew-templates-grid { grid-template-columns: 1fr !important; } .mlp-crew-template-tile { border-right: none !important; border-bottom: 1px solid rgba(45,212,191,0.14) !important; } .mlp-crew-template-tile:last-child { border-bottom: none !important; } :root.light .mlp-crew-template-tile { border-bottom-color: rgba(15,23,42,0.08) !important; } /* Crew tool stream — narrow icon column + ellipsised tool names; capped height so it doesn't dominate a vertical scroll. */ .mlp-crew-tool-stream { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 12px !important; height: min(480px, 62vh) !important; } .mlp-crew-tool-stream > * { min-width: 0 !important; } .mlp-crew-tool-logo { width: 32px !important; height: 32px !important; } .mlp-crew-tool-logo > svg { width: 26px !important; height: 26px !important; } .mlp-crew-tool-name { min-width: 0; overflow-wrap: anywhere; font-size: clamp(12px, 3.4vw, 15px) !important; } /* ── Hero (ProductHero.tsx) ── Hero is the only sticky-class region we treat as a *named exception* to the no-sticky rule above — but it isn't sticky in the first place, just full-viewport. Below we rebuild it so the centre block stacks cleanly, MetricStrip wraps, and the bottom rail scrolls. */ .mlp-hero-section { min-height: 100dvh !important; /* 108px clears the LandingNav burger (top:56 + h:36 = 92px) with breathing room; lower values left the hero headline hidden beneath the burger. */ padding-top: 108px !important; padding-bottom: 18px !important; } /* Kill the centre block's scroll-driven y-parallax on mobile. centerY translates the headline up to -80px as the user scrolls, which pulls "The trading core under every signal." into the "▍ THE CORE_" eyebrow row above it on narrow viewports. */ .mlp-hero-center { transform: none !important; } .mlp-hero-center { margin-top: clamp(18px, 3vh, 32px) !important; margin-bottom: clamp(10px, 2vh, 20px) !important; } .mlp-hero-metric-strip { padding: 14px !important; max-width: 100% !important; } .mlp-hero-metric-tiles { grid-template-columns: 1fr 1fr !important; row-gap: 14px !important; } .mlp-hero-metric-tiles > div { border-right: none !important; padding: 4px 10px !important; } .mlp-hero-bottom-rail { row-gap: 8px !important; column-gap: 14px !important; font-size: 9.5px !important; } } /* ════════════════════════════════════════════════════ TIER 2.5 — DENSE PHONE (≤ 560 px) Hero finetuning specifically for the 414-560 px band (iPhone Plus / Pro Max). Keeps MetricStrip 3-up where it still fits, then T3 collapses to 1-up. ════════════════════════════════════════════════════ */ @media (max-width: 560px) { .mlp-hero-section { min-height: max(720px, 100dvh) !important; padding-top: max(108px, env(safe-area-inset-top)) !important; padding-bottom: max(18px, env(safe-area-inset-bottom)) !important; padding-left: var(--mlp-section-gutter) !important; padding-right: var(--mlp-section-gutter) !important; } .mlp-hero-center { margin-top: clamp(12px, 2vh, 20px) !important; margin-bottom: clamp(8px, 1.5vh, 14px) !important; } .mlp-hero-center > p { max-width: 34ch !important; font-size: 14.25px !important; line-height: 1.58 !important; } .mlp-hero-actions { width: 100%; margin-top: 22px !important; gap: 10px !important; } .mlp-hero-actions > a:first-child { width: 100%; min-height: 46px; justify-content: center; } .mlp-hero-actions > a:last-child { min-height: 44px; justify-content: center; } .mlp-hero-metric-strip { margin-top: 24px !important; padding: 12px !important; border-radius: 16px !important; } .mlp-hero-metric-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 0 !important; } .mlp-hero-metric-tile { padding: 5px 7px !important; } .mlp-hero-metric-tile:not(:last-child) { border-right: 1px solid rgba(34, 211, 238, 0.14) !important; } .mlp-hero-metric-tile > span:first-child { font-size: 8px !important; letter-spacing: 0.16em !important; } .mlp-hero-metric-tile > span:nth-child(2) { font-size: clamp(15px, 4.4vw, 19px) !important; } .mlp-hero-metric-tile > span:last-child:not(:nth-child(2)) { display: none; } .mlp-hero-bottom-rail { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .mlp-hero-bottom-rail::-webkit-scrollbar { display: none; } } /* ════════════════════════════════════════════════════ TIER 3 — SMALL PHONE (≤ 480 px, iPhone SE etc.) - Single-column StatRow / MetricStrip - Stronger ambient-loop suppression (no scan bars, mesh layers dimmed) - Tightest gutter / padding values in the system - Persona / avatar discs minimum legible size (40 px) ════════════════════════════════════════════════════ */ @media (max-width: 480px) { [data-mel-product="1"] { --mlp-section-gutter: 16px; --mlp-section-y: clamp(40px, 7vh, 60px); } /* Same asymmetric before/after rhythm as the 768 tier, scaled down one notch for the smallest viewports. Hero excluded (owns its nav-clearing padding). */ [data-mel-product="1"] section[id]:not(.mlp-hero-section), [data-mel-product="1"] .mlp-section:not(.mlp-hero-section), [data-mel-product="1"] .mlp-product-section:not(.mlp-hero-section) { padding-left: 14px !important; padding-right: 14px !important; padding-top: clamp(60px, 10vh, 88px) !important; padding-bottom: clamp(38px, 6vh, 54px) !important; } [data-mel-product="1"] .mlp-product-content > .mlp-product-section:first-child:not(.mlp-hero-section) { padding-top: clamp(16px, 3.5vh, 26px) !important; } [data-mel-product="1"] h1 { font-size: clamp(24px, 7.5vw, 32px) !important; line-height: 1.05 !important; } [data-mel-product="1"] h2 { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.1 !important; } [data-mel-product="1"] h3 { font-size: clamp(16px, 4.4vw, 19px) !important; } [data-mel-product="1"] p { font-size: 13.5px !important; line-height: 1.58 !important; } /* MetricStrip + generic StatRow: single column on iPhone SE. Named counter strips (.trading-engine-*-stats, .mlp-fw-stat-row, .mlp-crew-stat-row) are EXCLUDED from this rule — they have their own "stay horizontal" overrides further below per the explicit one-row mandate. */ [data-mel-product="1"] [class*="StatRow"], [data-mel-product="1"] .mlp-stat-row, [data-mel-product="1"] .mlp-product-stat-grid, [data-mel-product="1"] [style*="repeat(auto-fit, minmax(180px"], [data-mel-product="1"] [style*="repeat(auto-fit, minmax(200px"], [data-mel-product="1"] [style*="repeat(auto-fit, minmax(220px"] { grid-template-columns: 1fr !important; gap: 12px !important; } .mlp-hero-metric-tiles { grid-template-columns: 1fr !important; row-gap: 12px !important; } .mlp-hero-section { padding-top: 100px !important; padding-bottom: 14px !important; } /* Hide remaining ambient hero loops on the smallest tier (scan sweep is jittery on low-end mobile GPUs, mesh layers dimmed to 50 % to keep depth without cost). */ [data-mel-product="1"] [style*="mlpHeroScanSweep"], [data-mel-product="1"] [style*="mlpWsLive"], [data-mel-product="1"] [style*="mlpWsFeedIn"], [data-mel-product="1"] [style*="mlpFeedIn"], [data-mel-product="1"] [style*="mlpMonRunPulse"], [data-mel-product="1"] [style*="mlpMonApprPulse"] { display: none !important; } [data-mel-product="1"] [style*="mlpHeroMeshA"], [data-mel-product="1"] [style*="mlpHeroMeshB"] { opacity: 0.5 !important; } /* Avatar discs even smaller on iPhone SE. */ [data-mel-product="1"] svg[width="120"], [data-mel-product="1"] svg[width="100"], [data-mel-product="1"] svg[width="92"], [data-mel-product="1"] svg[width="80"], [data-mel-product="1"] svg[width="72"], [data-mel-product="1"] svg[width="70"], [data-mel-product="1"] svg[width="64"], [data-mel-product="1"] svg[width="56"] { width: 40px !important; height: 40px !important; } /* Background wordmarks (DISPATCH, COVERAGE, CATALOG, REPLAY) — drop to 4 % opacity. Already gated to ghost wordmarks via the WebkitTextStroke substring. */ [data-mel-product="1"] [style*="WebkitTextStroke"] { opacity: 0.04 !important; } /* Cap remaining N-vw decorative fonts more aggressively on the smallest tier (catches the crew page's 9 vw / 7 vw ghost numerals + any other sub-12 vw decorative wordmark that slipped through). */ [data-mel-product="1"] [style*="fontSize: \"14vw\""], [data-mel-product="1"] [style*="fontSize: \"12vw\""], [data-mel-product="1"] [style*="fontSize: \"10vw\""], [data-mel-product="1"] [style*="fontSize: \"9vw\""], [data-mel-product="1"] [style*="fontSize: \"8vw\""], [data-mel-product="1"] [style*="fontSize: \"7vw\""] { font-size: clamp(40px, 9vw, 72px) !important; } } /* ════════════════════════════════════════════════════ MOBILE COUNTERS — stay horizontal, shrink fonts User mandate: counter strips never stack on mobile, they remain a single horizontal dashboard row. Each page declares per-section @media rules that collapse these strips to 1fr at 880-980px; selectors below use [data-mel-product="1"] + class for higher specificity than the local .foo rules. StatBlock markup is two stacked
s (label then value); :first-child / :nth-child(2) compress both. ════════════════════════════════════════════════════ */ @media (max-width: 980px) { [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats ) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } [data-mel-product="1"] :is( .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats ) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } /* .mlp-fw-stat-row deliberately NOT forced into one row at this breakpoint — it contains 4 items with long labels ("concurrent lanes", "runs / mo Citadel") that crush at 90px each on a 360px viewport. Local AgenticFramework media rules handle its 4→2→1 col collapse. */ } @media (max-width: 768px) { [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats, .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats, .mlp-fw-stat-row, .mlp-crew-stat-row ) > div > div:first-child { font-size: 9px !important; letter-spacing: 0.14em !important; } [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats, .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats, .mlp-fw-stat-row, .mlp-crew-stat-row ) > div > div:nth-child(2) { font-size: 13px !important; margin-top: 4px !important; letter-spacing: -0.01em !important; } } @media (max-width: 480px) { [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats, .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats, .mlp-fw-stat-row ) { gap: 6px !important; } [data-product-route="agentic-trading-crew"] .mlp-crew-stat-row { gap: 6px !important; } [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats, .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats, .mlp-fw-stat-row, .mlp-crew-stat-row ) > div > div:first-child { font-size: 8.25px !important; letter-spacing: 0.1em !important; } [data-mel-product="1"] :is( .trading-engine-cov-stats, .trading-engine-shape-stats, .trading-engine-studio-stats, .trading-engine-bt-stats, .trading-engine-live-stats, .trading-engine-wire-stats, .mlp-fw-stat-row, .mlp-crew-stat-row ) > div > div:nth-child(2) { font-size: 11.5px !important; margin-top: 3px !important; } } /* ════════════════════════════════════════════════════ SAFE-AREA INSETS (iOS notch + bottom home bar) Apply across all sizes so notch + home-bar swipes don't eat the hero padding. ════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { [data-mel-product="1"] .mlp-hero-section { padding-left: max(env(safe-area-inset-left), 16px); padding-right: max(env(safe-area-inset-right), 16px); padding-top: max(108px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); } } /* ════════════════════════════════════════════════════ REDUCED MOTION — disable scroll smoothing ════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-mel-product="1"] { scroll-behavior: auto; } }