/* ═══════════════════════════════════════════════════════════════
PINGR — MOBILE.CSS
Single source of truth for ≤820px viewports.
Load via:
No @media wrappers needed — the handles the gate.
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
1. TOKENS — mobile overrides on top of style.css :root
─────────────────────────────────────────────────────────── */
:root {
/* Spacing scale (4-pt base) */
--m-space-1: 4px;
--m-space-2: 8px;
--m-space-3: 12px;
--m-space-4: 16px;
--m-space-5: 24px;
--m-space-6: 32px;
--m-space-7: 48px;
--m-space-8: 64px;
/* Type scale (mobile-first clamps) */
--m-text-xs: 11px;
--m-text-sm: 13px;
--m-text-base: 15px;
--m-text-lg: 17px;
--m-text-xl: 20px;
--m-text-2xl: 24px;
--m-text-3xl: 30px;
--m-text-4xl: 38px;
--m-text-5xl: 46px;
/* Layout */
--m-wrap-pad: 20px;
--m-tap-min: 44px;
--m-radius-sm: 8px;
--m-radius-md: 12px;
--m-radius-lg: 16px;
--m-radius-xl: 24px;
}
/* ───────────────────────────────────────────────────────────
2. RESET / BASELINE
─────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-feature-settings: "tnum" 1, "lnum" 1;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
* { -webkit-tap-highlight-color: transparent; }
input, textarea, select, button { font-family: inherit; font-size: 16px; /* prevents iOS zoom */ }
img, svg, video { max-width: 100%; height: auto; }
/* Kill heavy backdrop-filter perf cost on mobile */
* { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
*:not(.floating-pill):not(.island-bar):not(.dash-bottom-nav):not(#authModal):not(.support-drawer):not(.topbar) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Hide things that don't translate */
.what-orb, .what-orb-1, .what-orb-2,
.orb-canvas, #orbCanvas,
.footer__arc,
.what-visual,
.phoneStage,
.conveyor-hint {
display: none !important;
}
/* Kill 3D perspective transforms that lose meaning on phone */
.what-img, .conv-card.state-active,
[style*="rotateY"], [style*="rotateX"] {
transform: none !important;
}
/* ───────────────────────────────────────────────────────────
3. AMBIENT BACKGROUND — replaces orb canvas on mobile
Static CSS radial gradients. Same vibe, zero JS cost.
─────────────────────────────────────────────────────────── */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(900px 600px at 20% 10%, rgba(79, 226, 255, 0.07) 0%, transparent 55%),
radial-gradient(700px 500px at 90% 80%, rgba(160, 92, 255, 0.05) 0%, transparent 60%),
radial-gradient(500px 400px at 50% 50%, rgba(56, 189, 255, 0.03) 0%, transparent 70%);
}
/* Dashboard gets its own quieter ambient */
body.dashboard-page::before {
background:
radial-gradient(800px 500px at 50% -10%, rgba(79, 226, 255, 0.04) 0%, transparent 60%),
radial-gradient(600px 400px at 100% 100%, rgba(160, 92, 255, 0.03) 0%, transparent 65%);
}
/* ───────────────────────────────────────────────────────────
DASHBOARD BACKGROUND — match the desktop dark sleek look.
The real orbs are #ambient-mesh's two blurred circles (cyan +
purple) from style.css. On mobile we drop the purple entirely,
keep one faint cyan glow, and sit it on a flat near-black base.
─────────────────────────────────────────────────────────── */
body.dashboard-page #ambient-mesh {
background: #050505 !important;
}
body.dashboard-page .mesh-purple {
display: none !important;
}
body.dashboard-page .mesh-cyan {
opacity: 0.12 !important;
width: 90vw !important;
height: 90vw !important;
top: -25vh !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
/* ───────────────────────────────────────────────────────────
4. TYPOGRAPHY — mobile type scale
─────────────────────────────────────────────────────────── */
.h1, h1 {
font-family: 'Sora', sans-serif;
font-size: clamp(32px, 9vw, 44px) !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -1.2px !important;
}
.h2, h2 {
font-family: 'Sora', sans-serif;
font-size: clamp(26px, 7vw, 34px) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.8px !important;
}
.h3, h3 {
font-family: 'Sora', sans-serif;
font-size: clamp(20px, 5.5vw, 24px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
p, .body-text {
font-size: var(--m-text-base) !important;
line-height: 1.65 !important;
}
/* ───────────────────────────────────────────────────────────
5. SIGNATURE COMPONENTS — preserved Pingr DNA
─────────────────────────────────────────────────────────── */
/* Eyebrow: mono caps + horizontal accent line. The most recognizable Pingr signature. */
.eyebrow,
.what-eyebrow,
.conveyor-eyebrow,
[class*="-eyebrow"] {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
color: rgba(79, 226, 255, 0.65) !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: var(--m-space-4) !important;
}
/* Buttons — touch-target compliant, hue-aware */
.btn,
.modal__btn,
button.btn--cyan,
.support-send-btn {
min-height: var(--m-tap-min) !important;
padding: 12px 20px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
border-radius: var(--m-radius-md) !important;
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
/* Cards — universal mobile unit */
.card, .panel-card, .tier-card, .conv-card {
border-radius: var(--m-radius-lg) !important;
padding: var(--m-space-5) !important;
}
/* Score pills — hue-coded data unit */
.score-pill, .pingr-score, [data-score-pill] {
font-family: 'JetBrains Mono', monospace !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Code blocks — preserve traffic-light dot pattern */
pre, code, .code-block {
font-size: 11px !important;
line-height: 1.6 !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* ───────────────────────────────────────────────────────────
6. NAV — PUBLIC SITE (topbar + hamburger drawer)
─────────────────────────────────────────────────────────── */
.topbar {
width: 100% !important;
max-width: 100% !important;
padding: 12px 16px !important;
background: rgba(10, 22, 48, 0.92) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 900;
}
.topbar__inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 0 !important;
}
.topbar img, .topbar svg.logo {
height: 32px !important;
width: auto !important;
}
/* Hide desktop nav links — surfaced in drawer */
.topnav a:not(.nav-btn-login):not(.open-modal):not(.m-keep) { display: none !important; }
/* Login button stays in topbar */
.nav-btn-login {
font-size: 11px !important;
padding: 8px 14px !important;
min-height: 36px !important;
border-radius: 100px !important;
}
/* Hamburger — injected by mobile.js */
.m-hamburger {
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
cursor: pointer;
padding: 0;
}
.m-hamburger span {
display: block;
width: 18px;
height: 1.5px;
background: #fff;
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.m-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.m-hamburger.is-open span:nth-child(2) { opacity: 0; }
.m-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Drawer — full-height right panel */
.m-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 950;
}
.m-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.m-drawer {
position: fixed;
top: 0; right: 0;
bottom: 0;
width: 84vw;
max-width: 360px;
background: #050810;
border-left: 1px solid rgba(79, 226, 255, 0.1);
z-index: 960;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
padding: 80px 28px 32px;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.m-drawer.is-open { transform: translateX(0); }
.m-drawer-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(79, 226, 255, 0.55);
margin-bottom: 16px;
}
.m-drawer-eyebrow::before {
content: '';
display: inline-block;
width: 22px;
height: 1px;
background: rgba(79, 226, 255, 0.4);
vertical-align: middle;
margin-right: 8px;
}
.m-drawer a,
.m-drawer button {
display: block;
padding: 16px 0;
font-family: 'Sora', sans-serif;
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
background: transparent;
border-left: none;
border-right: none;
border-top: none;
text-align: left;
width: 100%;
cursor: pointer;
}
.m-drawer a:active,
.m-drawer button:active { color: #4fe2ff; }
.m-drawer-cta {
margin-top: 24px !important;
background: linear-gradient(135deg, #4fe2ff, #00b8d4) !important;
color: #000 !important;
border: none !important;
padding: 14px 20px !important;
border-radius: 12px !important;
font-family: 'Sora', sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
text-align: center !important;
}
.m-drawer-section {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Body scroll-lock when drawer open */
body.m-no-scroll {
overflow: hidden !important;
position: fixed !important;
width: 100%;
}
/* ───────────────────────────────────────────────────────────
7. NAV — DASHBOARD (bottom tab bar app-style)
─────────────────────────────────────────────────────────── */
.dash-bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 64px;
background: rgba(5, 8, 16, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(79, 226, 255, 0.08);
display: flex;
align-items: stretch;
justify-content: space-around;
z-index: 800;
padding-bottom: env(safe-area-inset-bottom);
}
.dash-bottom-nav a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: color 0.2s ease;
}
.dash-bottom-nav a svg {
width: 20px;
height: 20px;
stroke-width: 1.8;
transition: stroke 0.2s ease;
}
.dash-bottom-nav a.is-active {
color: #4fe2ff;
}
.dash-bottom-nav a.is-active svg {
filter: drop-shadow(0 0 6px rgba(79, 226, 255, 0.5));
}
/* Push dashboard content above bottom nav */
body.dashboard-page main,
body.dashboard-page .spatial-core,
body.dashboard-page .dashboard-content {
padding-bottom: 80px !important;
}
/* Hide desktop dashboard nav on mobile */
body.dashboard-page .island-bar,
body.dashboard-page #commandIsland {
position: sticky !important;
top: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 10px 14px !important;
background: rgba(5, 8, 16, 0.92) !important;
z-index: 700 !important;
}
/* ───────────────────────────────────────────────────────────
8. AUTH MODAL — bottom sheet on mobile
─────────────────────────────────────────────────────────── */
#authModal.modal {
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
width: 100vw !important;
height: 100vh !important;
}
#authModal .solid-box,
#authModal .modal__content {
width: 100vw !important;
max-width: 100vw !important;
border-radius: 24px 24px 0 0 !important;
padding: 28px 20px 40px !important;
max-height: 92vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
position: relative !important;
transform: none !important;
margin: 0 !important;
}
/* Drag-handle indicator on bottom sheets */
#authModal .solid-box::before,
#authModal .modal__content::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.15);
}
#authModal .modal__title {
font-size: 22px !important;
margin-top: 12px !important;
}
#authModal .modal__sub { font-size: 13px !important; }
#authModal .modal__btn {
height: 50px !important;
font-size: 14px !important;
width: 100% !important;
}
#authModal .input-group input {
height: 50px !important;
font-size: 16px !important; /* prevents iOS zoom */
}
#authModal .auth-plan-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#authModal .survey-grid {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
/* Support drawer also becomes bottom sheet */
.support-drawer {
width: 100vw !important;
max-width: 100vw !important;
border-radius: 24px 24px 0 0 !important;
height: auto !important;
max-height: 90vh !important;
bottom: 0 !important;
top: auto !important;
right: 0 !important;
left: 0 !important;
transform: translateY(100%) !important;
}
.support-drawer.is-open {
transform: translateY(0) !important;
}
/* ───────────────────────────────────────────────────────────
9. FLOATING PILL CTA — preserved & enhanced
─────────────────────────────────────────────────────────── */
#floatingCta {
bottom: 20px !important;
left: 16px !important;
right: 16px !important;
width: auto !important;
transform: translateY(20px) !important;
}
#floatingCta.visible {
transform: translateY(0) !important;
}
.floating-pill {
width: 100% !important;
justify-content: center !important;
border-radius: 14px !important;
font-size: 12.5px !important;
padding: 14px 24px !important;
min-height: var(--m-tap-min) !important;
}
/* ───────────────────────────────────────────────────────────
10. PAGE — INDEX.HTML
─────────────────────────────────────────────────────────── */
/* Hero */
.hero {
padding: 96px 20px 48px !important;
min-height: auto !important;
}
.heroCard {
padding: 24px 18px !important;
min-height: auto !important;
border-radius: var(--m-radius-lg) !important;
}
.heroCard__actions {
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
}
.heroCard__actions .btn {
width: 100% !important;
}
.sub {
font-size: 15px !important;
padding: 0 8px !important;
line-height: 1.55 !important;
}
/* What section — stack vertically, kill image */
.what-section {
padding: 56px 20px !important;
min-height: auto !important;
}
.what-inner {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.what-title {
font-size: clamp(28px, 8vw, 36px) !important;
letter-spacing: -1px !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}
.what-divider {
width: 40px !important;
margin-bottom: 20px !important;
}
.what-body { max-width: 100% !important; }
.what-body .punch {
font-size: 15px !important;
line-height: 1.7 !important;
margin-bottom: 14px !important;
}
.what-body .supporting {
font-size: 13px !important;
line-height: 1.75 !important;
}
.what-cta {
font-size: 11px !important;
padding: 12px 22px !important;
margin-top: 28px !important;
min-height: var(--m-tap-min) !important;
}
/* ── Conveyor → TikTok-style horizontal swipe carousel ────────────
A contained section: the stage cards sit in a horizontal snap
strip that you swipe sideways, one card per gesture. Card content
is always visible (mobile.js force-resets .conv-card classes, so
the reveal must NOT depend on classes). The motion IS the native
horizontal snap-slide — smooth, no JS sliding required. */
#conveyorOuter {
height: auto !important;
padding: 44px 0 36px !important;
}
#conveyorInner {
position: relative !important;
height: auto !important;
display: block !important;
padding: 0 !important;
}
.conveyor-eyebrow {
position: relative !important;
z-index: 5;
margin: 0 0 22px !important;
justify-content: center !important;
}
/* The track — a horizontal scroll-snap strip. */
.conveyor-track {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
height: auto !important;
gap: 0 !important;
perspective: none !important;
scroll-snap-type: x mandatory;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Side padding so the first/last card can center in the viewport. */
padding: 0 16px !important;
scroll-padding: 0 16px;
}
.conveyor-track::-webkit-scrollbar { display: none; }
/* Each card is a contained slide — not full-screen. */
.conv-card,
.conv-card.state-active,
.conv-card.state-prev,
.conv-card.state-prev-far,
.conv-card.state-next,
.conv-card.state-next-far,
.conv-card.state-hidden,
.conv-card.state-hidden-left {
position: relative !important;
flex: 0 0 calc(100vw - 64px) !important;
width: calc(100vw - 64px) !important;
max-width: 380px !important;
height: auto !important;
min-height: 0 !important;
margin: 0 8px !important;
padding: 24px 20px 26px !important;
border-radius: 20px !important;
background: #0a0f1e !important;
border: 1px solid rgba(56, 189, 255, 0.22) !important;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center;
}
.conv-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 20px !important;
background: radial-gradient(ellipse at 50% -10%, rgba(56,189,255,0.1) 0%, transparent 55%) !important;
pointer-events: none !important;
}
.conv-card::after { display: none !important; }
/* Content — always visible, no class-gated reveal. */
.conv-card > * {
opacity: 1 !important;
transform: none !important;
}
.card-stage {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 2.2px !important;
text-transform: uppercase !important;
color: rgba(56, 189, 255, 0.7) !important;
margin-bottom: 10px !important;
}
.card-title {
font-family: 'Sora', sans-serif !important;
font-size: clamp(20px, 5.4vw, 24px) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -0.4px !important;
color: #fff !important;
text-align: center !important;
margin: 0 0 18px !important;
}
.card-image-wrap {
width: 100% !important;
min-height: 0 !important;
}
.card-image-wrap img {
width: 100% !important;
height: auto !important;
border-radius: 12px !important;
border: 1px solid rgba(56, 189, 255, 0.14) !important;
}
/* Progress pips — horizontal row beneath the carousel. */
.conveyor-pips {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 7px !important;
position: relative !important;
margin: 22px 0 0 !important;
inset: auto !important;
transform: none !important;
}
.conveyor-pips .pip {
width: 22px !important;
height: 3px !important;
border-radius: 3px !important;
}
.conveyor-pips .pip.active {
width: 38px !important;
height: 3px !important;
}
/* Swipe hint below the pips. */
.conveyor-hint {
display: flex !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
margin: 16px auto 0 !important;
}
.conveyor-hint .hint-arrow { transform: rotate(-90deg); }
/* Alerts section */
.alerts {
padding: 56px 0 !important;
min-height: auto !important;
}
.alerts__inner,
#alerts .alerts-grid {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
align-items: stretch !important;
padding: 0 20px !important;
}
#alerts .alerts-headline {
font-size: clamp(30px, 8vw, 40px) !important;
letter-spacing: -1.4px !important;
}
.about {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 24px 20px !important;
height: auto !important;
border-radius: var(--m-radius-lg) !important;
}
.about__title { font-size: 22px !important; margin-bottom: 16px !important; }
.about__text.lead { font-size: 15px !important; margin-bottom: 18px !important; }
.about__features { gap: 16px !important; }
.feature-item { gap: 12px !important; }
.feature-item p { font-size: 14px !important; line-height: 1.55 !important; }
/* Built grid */
.builtGrid {
grid-template-columns: 1fr !important;
grid-auto-rows: minmax(180px, auto) !important;
gap: 12px !important;
padding: 0 20px !important;
max-width: 100% !important;
}
.tile--a, .tile--b, .tile--c, .tile--d, .tile--e {
grid-column: span 1 !important;
grid-row: auto !important;
padding: 24px 20px !important;
border-radius: var(--m-radius-lg) !important;
}
/* Verified cards */
.verifiedCards {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 0 20px !important;
}
/* Trust strip */
.trust-strip {
padding: 14px 20px !important;
}
.trust-strip__inner {
flex-wrap: wrap !important;
gap: 12px !important;
justify-content: flex-start !important;
}
.trust-item {
font-size: 11px !important;
gap: 6px !important;
}
.trust-divider { display: none !important; }
/* Credibility strip */
.credStrip {
flex-wrap: wrap !important;
gap: 14px !important;
padding: 16px 20px !important;
justify-content: center !important;
}
.cred-divider { display: none !important; }
/* ── Credibility strip — compact 2-2-1 card grid on mobile ──────── */
.cred-strip {
padding: 36px 18px !important;
}
.cred-strip__inner {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-auto-rows: auto !important;
gap: 10px !important;
max-width: 420px !important;
margin: 0 auto !important;
}
/* Each of the four top cards is a TRUE SQUARE (aspect-ratio:1) so the
2×2 block is four identical squares regardless of copy length.
Content is centred; long copy is allowed to use the room. */
.cred-strip .cred-item {
aspect-ratio: 1 / 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 7px !important;
margin: 0 !important;
padding: 16px 15px !important;
background: rgba(255, 255, 255, 0.022) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 14px !important;
overflow: hidden !important;
}
/* The fifth card spans both columns — a clean wide rectangle beneath
the four squares (no aspect-ratio; a fixed shorter height). */
.cred-strip .cred-item:last-of-type {
aspect-ratio: auto !important;
grid-column: 1 / -1 !important;
height: 104px !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.cred-strip .cred-item:last-of-type .cred-text { align-items: center !important; }
/* Icon chip — a soft tinted square, not a bare glyph. */
.cred-strip .cred-icon {
width: 30px !important;
height: 30px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: rgba(79, 226, 255, 0.08) !important;
border: 1px solid rgba(79, 226, 255, 0.16) !important;
}
.cred-strip .cred-icon svg {
width: 15px !important;
height: 15px !important;
}
.cred-strip .cred-label {
font-size: 13px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.92) !important;
}
.cred-strip .cred-sub {
font-size: 11.5px !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.38) !important;
}
/* Live "Engine Active" dot keeps its pulse inside the icon chip. */
.cred-strip .cred-item--live .cred-icon {
background: rgba(79, 226, 255, 0.08) !important;
}
/* Developer API section */
#dev-api { padding: 56px 20px 40px !important; }
#dev-api .wrap > div {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
#dev-api h2 {
font-size: clamp(28px, 7vw, 36px) !important;
letter-spacing: -1px !important;
}
#dev-api p { font-size: 14px !important; }
#dev-api pre, #dev-api .code-block {
font-size: 11px !important;
padding: 16px 14px !important;
}
/* Legal mini section */
.legal-mini__box {
flex-direction: column !important;
text-align: left !important;
gap: 16px !important;
padding: 24px 20px !important;
border-radius: var(--m-radius-lg) !important;
}
.legal-mini__whale { margin: 0 !important; }
.legal-mini__whale img { width: 64px !important; }
.legal-mini__title { font-size: 20px !important; margin-bottom: 8px !important; }
.legal-mini__p { font-size: 13px !important; line-height: 1.6 !important; }
/* Footer — 3-column centered layout (matches desktop arrangement),
sized compact so all links sit within one phone screen section. */
.footer {
padding: 32px 0 88px !important;
min-height: auto !important;
}
.footerCols {
flex-direction: row !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 18px !important;
padding: 0 16px !important;
text-align: center !important;
}
.footerCol {
flex: 1 1 0 !important;
gap: 2px !important;
align-items: center !important;
text-align: center !important;
}
.footerCol a, .footerCol button {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.55) !important;
padding: 5px 0 !important;
min-height: 30px;
line-height: 1.35 !important;
text-align: center !important;
background: transparent !important;
border: none !important;
}
.footerCol--right { align-items: center !important; }
/* ───────────────────────────────────────────────────────────
11. PAGE — DASHBOARD
─────────────────────────────────────────────────────────── */
body.dashboard-page,
.dashboard-page body { background: #02040a; }
/* Top island — collapse to compact sticky header */
#commandIsland,
.island-bar {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
padding: 10px 14px !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.island-search {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
order: 2;
}
.island-search input {
width: 100% !important;
font-size: 14px !important;
height: 40px !important;
padding: 0 14px !important;
}
.island-filters {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none;
flex-wrap: nowrap !important;
order: 3;
padding: 4px !important;
gap: 4px !important;
}
.island-filters::-webkit-scrollbar { display: none; }
.island-filters button,
.island-filters a {
flex-shrink: 0 !important;
font-size: 11px !important;
padding: 6px 12px !important;
white-space: nowrap !important;
min-height: 32px !important;
}
.island-btn-hot {
max-width: none !important;
flex-shrink: 0 !important;
font-size: 10.5px !important;
padding: 7px 12px !important;
}
/* Feed — vertical card stack (no tables) */
.spatial-core,
.dashboard-content,
.feed-grid {
padding: 16px 14px 100px !important;
max-width: 100% !important;
}
/* Trade card — the dashboard mobile primitive */
.trade-card,
.feed-card,
.signal-card,
[data-trade-card],
.classified-blade {
position: relative !important;
display: block !important;
width: 100% !important;
padding: 16px 16px 16px 22px !important; /* extra left for hue stripe */
margin-bottom: 10px !important;
border-radius: var(--m-radius-md) !important;
background: linear-gradient(135deg, rgba(8, 12, 18, 0.92) 0%, rgba(12, 18, 28, 0.88) 100%) !important;
border: 1px solid rgba(79, 226, 255, 0.08) !important;
cursor: pointer !important;
transition: transform 0.15s ease, border-color 0.15s ease !important;
overflow: hidden !important;
}
.trade-card:active,
.feed-card:active,
.signal-card:active,
.classified-blade:active {
transform: scale(0.99) !important;
}
/* Hue stripe on left edge — category indicator */
.trade-card::before,
.feed-card::before,
.signal-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: currentColor;
opacity: 0.7;
}
.trade-card[data-cat="whale"]::before, .feed-card.cat-whale::before { background: #3B82F6; }
.trade-card[data-cat="cluster"]::before, .feed-card.cat-cluster::before { background: #10B981; }
.trade-card[data-cat="penny"]::before, .feed-card.cat-penny::before { background: #EF4444; }
.trade-card[data-cat="golden"]::before, .feed-card.cat-golden::before { background: #FFD700; }
.trade-card[data-cat="basic"]::before, .feed-card.cat-basic::before { background: #ff9f43; }
/* Card header: score + ticker + capital */
.trade-card__head,
.feed-card__head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 10px !important;
}
.trade-card__score,
.feed-card__score,
.pingr-score {
font-family: 'JetBrains Mono', monospace !important;
font-size: 22px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
line-height: 1 !important;
letter-spacing: -0.5px !important;
flex-shrink: 0 !important;
}
.trade-card__ticker,
.feed-card__ticker {
font-family: 'Sora', sans-serif !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -0.3px !important;
color: #fff !important;
flex: 1 !important;
}
.trade-card__capital,
.feed-card__capital {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.6) !important;
font-variant-numeric: tabular-nums !important;
}
/* Card body: insider + role */
.trade-card__body,
.feed-card__body {
font-size: 13px !important;
line-height: 1.45 !important;
color: rgba(255, 255, 255, 0.75) !important;
margin-bottom: 8px !important;
}
.trade-card__meta,
.feed-card__meta {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.35) !important;
}
/* Witness reveal — tap to expand */
.trade-card__witness,
.feed-card__witness {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s ease, opacity 0.25s ease 0.1s, margin-top 0.3s ease;
font-family: 'Lora', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: rgba(255, 255, 255, 0.78) !important;
}
.trade-card.is-expanded .trade-card__witness,
.feed-card.is-expanded .feed-card__witness,
.signal-card.is-expanded .signal-card__witness {
max-height: 400px;
opacity: 1;
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Stat blocks on dashboard */
.stat-row,
.stat-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.stat-item {
padding: 14px 12px !important;
}
.stat-num {
font-size: 20px !important;
}
.stat-label {
font-size: 10px !important;
}
/* Charts containers */
canvas, .chart-wrap {
max-width: 100% !important;
height: auto !important;
}
/* ───────────────────────────────────────────────────────────
12. PAGE — PRICING
─────────────────────────────────────────────────────────── */
.pricing-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 0 16px !important;
margin: 0 auto 48px !important;
}
.pricing-card,
.tier-card {
padding: 28px 22px !important;
border-radius: var(--m-radius-lg) !important;
}
.pricing-card h3,
.tier-card h3 {
font-size: 22px !important;
margin-bottom: 10px !important;
}
.pricing-price,
.tier-price {
font-size: 36px !important;
margin: 12px 0 !important;
}
.pricing-features li,
.tier-features li {
font-size: 13px !important;
padding: 8px 0 !important;
line-height: 1.45 !important;
}
.pricing-sub {
font-size: 15px !important;
padding: 0 16px !important;
margin-bottom: 28px !important;
}
.referral-banner {
margin: 0 16px 28px !important;
padding: 14px 18px !important;
font-size: 13px !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 10px !important;
}
.faq-section {
padding: 0 16px !important;
margin-bottom: 56px !important;
}
.faq-item {
padding: 18px 0 !important;
}
.faq-question {
font-size: 15px !important;
padding-right: 28px !important;
}
.faq-answer {
font-size: 13.5px !important;
line-height: 1.6 !important;
}
/* ───────────────────────────────────────────────────────────
13. PAGE — LOGIN / SIGNUP
Already has split-stage layout; refine for mobile.
─────────────────────────────────────────────────────────── */
.login-split,
.signup-stage {
grid-template-columns: 1fr !important;
min-height: 100vh;
}
.login-stage-left,
.signup-stage-art {
display: none !important; /* hide cinematic art on phone — focus on form */
}
.login-stage-right,
.signup-stage-form {
padding: 80px 24px 40px !important;
width: 100% !important;
}
.signup-step-indicator {
margin-bottom: 28px !important;
}
.signup-step-indicator span {
width: 28px !important;
height: 2px !important;
}
.login-form input,
.signup-form input,
.signup-form select {
height: 50px !important;
font-size: 16px !important;
padding: 0 16px !important;
}
.login-form button[type="submit"],
.signup-form .next-btn,
.signup-form .submit-btn {
height: 52px !important;
font-size: 15px !important;
}
.plan-selector {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.plan-card {
padding: 18px 16px !important;
}
/* ───────────────────────────────────────────────────────────
14. PAGE — PING OF THE WEEK
─────────────────────────────────────────────────────────── */
.potw-wrap {
padding: 96px 20px 60px !important;
perspective: none !important;
}
.potw-hero {
padding: 32px 20px !important;
text-align: left !important;
}
.potw-headline,
.potw-hero h1 {
font-size: clamp(30px, 8.5vw, 42px) !important;
letter-spacing: -1.4px !important;
line-height: 1.05 !important;
}
.potw-card,
.potw-trade-card {
padding: 22px 18px !important;
margin-bottom: 14px !important;
}
.potw-score {
font-size: 56px !important;
margin-bottom: 8px !important;
}
.potw-witness {
font-family: 'Lora', Georgia, serif !important;
font-size: 15.5px !important;
line-height: 1.75 !important;
padding: 0 !important;
}
.wireframe-img {
max-width: 240px !important;
}
/* ───────────────────────────────────────────────────────────
15. PAGE — TRACK RECORD
─────────────────────────────────────────────────────────── */
.tr-hero,
.track-record-hero {
padding: 96px 20px 32px !important;
text-align: left !important;
}
.tr-stats {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 0 16px !important;
margin-bottom: 32px !important;
}
.tr-stat {
padding: 18px 14px !important;
}
.tr-stat-num {
font-size: 24px !important;
}
.tr-stat-label {
font-size: 10px !important;
}
.tr-table-wrap,
.track-record-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 -16px !important;
padding: 0 16px !important;
}
.tr-table th,
.tr-table td {
font-size: 12px !important;
padding: 10px 8px !important;
white-space: nowrap !important;
}
/* ───────────────────────────────────────────────────────────
16. PAGE — INSIDER PROFILE / TICKER
─────────────────────────────────────────────────────────── */
.insider-hero,
.ticker-hero {
padding: 96px 20px 24px !important;
text-align: left !important;
}
.insider-name,
.ticker-symbol {
font-size: clamp(28px, 8vw, 38px) !important;
letter-spacing: -1.2px !important;
}
.insider-role,
.ticker-name {
font-size: 14px !important;
margin-top: 6px !important;
}
.insider-stats,
.ticker-stats {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 0 16px !important;
}
.resume-card,
.history-card {
padding: 20px 18px !important;
margin: 0 16px 16px !important;
border-radius: var(--m-radius-lg) !important;
}
/* ───────────────────────────────────────────────────────────
17. PAGE — MISSION (editorial)
─────────────────────────────────────────────────────────── */
main, .letter {
padding-left: 4px !important;
padding-right: 4px !important;
}
.letter-title {
font-size: clamp(26px, 7.5vw, 34px) !important;
margin-bottom: 32px !important;
}
.letter p {
font-size: 15.5px !important;
line-height: 1.85 !important;
margin-bottom: 26px !important;
}
.stat-strip {
grid-template-columns: 1fr !important;
margin: 32px 0 !important;
}
.stat-item {
padding: 20px 16px !important;
}
/* ───────────────────────────────────────────────────────────
18. PAGE — DOCS / API
─────────────────────────────────────────────────────────── */
.docs-wrap,
.docs-content {
padding: 96px 16px 60px !important;
max-width: 100% !important;
}
.docs-sidebar {
display: none !important; /* surfaced via drawer on mobile */
}
.docs-section h2 {
font-size: 22px !important;
margin-top: 32px !important;
}
.docs-section h3 {
font-size: 17px !important;
margin-top: 24px !important;
}
.docs-section pre {
font-size: 11px !important;
padding: 14px 12px !important;
border-radius: 10px !important;
margin: 12px -4px !important;
}
.endpoint-card {
padding: 18px 16px !important;
margin-bottom: 16px !important;
}
/* ───────────────────────────────────────────────────────────
19. PAGE — BACKTEST, EXITS, GOLD, CLUSTER-HEATMAP
Basic responsive coverage — stack grids, scale type
─────────────────────────────────────────────────────────── */
.backtest-grid,
.exits-grid,
.gold-grid,
.heatmap-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 0 16px !important;
}
.backtest-card,
.exits-card,
.gold-card,
.heatmap-cell {
padding: 20px 16px !important;
}
.heatmap-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 0 -16px !important;
padding: 0 16px !important;
}
/* Gold tier marketing page */
.gold-hero {
padding: 96px 20px 32px !important;
}
.gold-headline {
font-size: clamp(30px, 8.5vw, 42px) !important;
letter-spacing: -1.4px !important;
}
/* ───────────────────────────────────────────────────────────
20. PAGE — PRIVACY / TOS (long-form legal)
─────────────────────────────────────────────────────────── */
.legal-content,
.privacy-content,
.tos-content {
padding: 96px 20px 60px !important;
max-width: 100% !important;
}
.legal-content h1,
.privacy-content h1,
.tos-content h1 {
font-size: 28px !important;
margin-bottom: 24px !important;
}
.legal-content h2,
.privacy-content h2,
.tos-content h2 {
font-size: 18px !important;
margin-top: 32px !important;
margin-bottom: 12px !important;
}
.legal-content p,
.privacy-content p,
.tos-content p {
font-size: 14.5px !important;
line-height: 1.75 !important;
margin-bottom: 16px !important;
}
/* ───────────────────────────────────────────────────────────
21. ACCESSIBILITY & TOUCH
─────────────────────────────────────────────────────────── */
a, button, [role="button"], input[type="submit"], input[type="button"] {
min-height: var(--m-tap-min);
min-width: var(--m-tap-min);
}
/* Override for inline links inside prose */
p a, .prose a, .legal-content a, .privacy-content a, .tos-content a, .letter a {
min-height: 0 !important;
min-width: 0 !important;
display: inline !important;
}
/* Focus ring */
*:focus-visible {
outline: 2px solid #4fe2ff;
outline-offset: 2px;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* iOS safe area */
.topbar { padding-top: env(safe-area-inset-top); }
#floatingCta { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
/* ═══════════════════════════════════════════════════════════════
22b. DASHBOARD MOBILE REFINEMENTS (audit pass 1)
Fixes from real-device review:
- Island was sticky AND overlapping .archive-title
- .island-filters partially clipped at viewport edges
- .blade-expansion was desktop 2-col on mobile, needs vertical stack
- Trade modal (.tmd-sheet) needed polish
═══════════════════════════════════════════════════════════════ */
/* ── 22b.1 ARCHIVE HEADER — title above sticky island ──────── */
.spatial-core {
padding: 24px 14px 100px !important;
}
.archive-header {
text-align: center !important;
margin: 8px auto 20px !important;
padding: 0 4px !important;
max-width: 100%;
}
.archive-title {
font-family: 'Sora', sans-serif !important;
font-size: clamp(28px, 7.8vw, 36px) !important;
font-weight: 900 !important;
letter-spacing: -1.4px !important;
line-height: 1.05 !important;
margin: 0 0 10px 0 !important;
filter: none !important;
}
.archive-sub {
font-size: 13px !important;
line-height: 1.55 !important;
color: rgba(255, 255, 255, 0.5) !important;
margin: 0 auto !important;
padding: 0 8px !important;
max-width: 320px;
}
/* Strip "Hover" word — meaningless on touch. Visual cue only. */
.archive-sub::after {
content: '';
}
/* ── 22b.2 COMMAND ISLAND — sticky, contained, scrollable ──── */
#commandIsland, .island-bar {
position: sticky !important;
top: 0 !important;
z-index: 700 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 14px 0 !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(79, 226, 255, 0.08) !important;
padding: 8px 12px !important;
background: rgba(5, 8, 16, 0.95) !important;
backdrop-filter: blur(20px) saturate(160%) !important;
-webkit-backdrop-filter: blur(20px) saturate(160%) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
#commandIsland::-webkit-scrollbar, .island-bar::-webkit-scrollbar { display: none !important; }
.island-brand {
flex-shrink: 0 !important;
margin-right: 4px !important;
}
.island-brand img, .island-brand svg {
height: 22px !important;
width: auto !important;
}
.island-search {
display: none !important; /* search lives in dedicated row, not island */
}
.island-status {
display: flex !important;
gap: 6px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
.island-btn-hot, .island-btn-api {
font-size: 9.5px !important;
padding: 6px 10px !important;
min-height: 30px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
border-radius: 14px !important;
}
.island-filters {
display: flex !important;
gap: 4px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
flex-wrap: nowrap !important;
flex-shrink: 0 !important;
max-width: none !important;
overflow: visible !important;
}
.island-pill {
font-size: 10px !important;
font-weight: 800 !important;
padding: 6px 10px !important;
min-height: 30px !important;
border-radius: 14px !important;
letter-spacing: 0.4px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* ── 22b.3 SECONDARY FILTER ROW (Hot Trades / Deep Water / etc.) ── */
/* Catch-all for any horizontal row of filter buttons inside the
dashboard. Targets tab-strip / segment patterns by structure. */
.spatial-core .filter-tabs,
.spatial-core .tab-strip,
.spatial-core [class*="tabs"],
.spatial-core [class*="segments"],
.spatial-core [role="tablist"] {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 8px !important;
padding: 4px 14px 4px 14px !important;
margin: 0 -14px 12px !important;
scroll-snap-type: x mandatory;
/* Edge fade hint — gradient mask shows there's more to scroll */
mask-image: linear-gradient(to right,
transparent 0%, #000 8px, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to right,
transparent 0%, #000 8px, #000 calc(100% - 24px), transparent 100%);
}
.spatial-core .filter-tabs::-webkit-scrollbar,
.spatial-core .tab-strip::-webkit-scrollbar,
.spatial-core [class*="tabs"]::-webkit-scrollbar,
.spatial-core [role="tablist"]::-webkit-scrollbar { display: none !important; }
.spatial-core .filter-tabs > *,
.spatial-core .tab-strip > *,
.spatial-core [role="tablist"] > * {
flex-shrink: 0 !important;
scroll-snap-align: start;
font-size: 10.5px !important;
letter-spacing: 0.5px !important;
white-space: nowrap !important;
padding: 8px 12px !important;
min-height: 36px !important;
}
/* Score slider row */
.score-bar, .min-score-bar, [class*="score-slider"] {
padding: 8px 14px !important;
margin: 0 -14px 14px !important;
font-size: 10.5px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* ── 22b.4 DATA BLADE — collapsed state, tighter & centered ── */
.data-blade {
padding: 14px 14px 14px 22px !important;
margin-bottom: 8px !important;
border-radius: 12px !important;
min-height: 0 !important;
}
.data-blade::before {
width: 3px !important;
border-radius: 0 2px 2px 0 !important;
}
/* Header layout: ticker block | capital block | score block */
.data-blade .pc-header,
.data-blade .blade-header,
.data-blade > .row-top {
display: grid !important;
grid-template-columns: 1fr auto auto !important;
gap: 10px !important;
align-items: center !important;
}
.data-blade .ticker, .data-blade .pc-ticker, .data-blade .cf-bar--ticker {
font-size: 16px !important;
font-weight: 900 !important;
letter-spacing: -0.5px !important;
}
.data-blade .company, .data-blade .pc-company {
font-size: 11px !important;
color: rgba(255, 255, 255, 0.45) !important;
line-height: 1.3 !important;
max-width: 140px;
}
.data-blade .pc-val, .data-blade .pc-capital,
.data-blade [class*="capital"] {
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: -0.4px !important;
}
.data-blade .pc-score, .data-blade .blade-score,
.data-blade [class*="score-val"] {
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.5px !important;
}
.data-blade .pc-time, .data-blade .blade-time,
.data-blade [class*="time-ago"] {
font-size: 10px !important;
color: rgba(255, 255, 255, 0.4) !important;
}
/* Pill tags row: BASIC, HOLDING, NOW % */
.data-blade .pc-tags,
.data-blade .blade-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
margin-top: 8px !important;
}
.data-blade .pc-tag,
.data-blade .blade-holding-tag,
.data-blade .blade-sold-tag,
.data-blade [class*="tag"] {
font-size: 9px !important;
padding: 2px 7px !important;
letter-spacing: 0.5px !important;
border-radius: 14px !important;
}
/* ── Blade header company name — hidden on mobile ────────────────
The long company name (e.g. "Nexpoint Diversified Real Estate
Trust") dominates the header by wrapping over many lines. On
mobile it is hidden here and surfaced instead as a compact line
inside the AI-synthesis expansion text (.exp-company). */
.data-blade .pc-comp { display: none !important; }
/* Company name surfaced inside the synthesis text. */
.data-blade .exp-company {
color: rgba(255, 255, 255, 0.82) !important;
font-weight: 600 !important;
}
/* ── Pill row — even, aligned tags ───────────────────────────────
The real container is .pc-tags-row. Every pill (category, the
HOLDING/SOLD tag, the live P&L / ROI pill) is normalised to the
same height, padding and vertical alignment so the row reads as
one clean line instead of off-set chips. */
.data-blade .pc-tags-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
margin-top: 8px !important;
}
.data-blade .pc-tags-row > span {
display: inline-flex !important;
align-items: center !important;
height: 20px !important;
padding: 0 8px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-radius: 20px !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* The P&L / ROI pill nests two spans — keep its inner bits centred. */
.data-blade .pc-tags-row > span > span {
display: inline-flex !important;
align-items: center !important;
}
/* ── 22b.5 BLADE EXPANSION — vertical stack (per audit brief) ── */
/* Old desktop layout: 2-col flex (text | buttons-and-chart).
New mobile layout: single column, ordered:
1. AI synthesis text (smaller font)
2. View Intelligence + My Portfolio buttons (side-by-side)
3. Broker links block (eToro / IBKR)
4. Price Since Buy chart */
.blade-expansion {
/* container — already animated by existing CSS */
}
.expansion-content {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
padding: 14px 14px 16px !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* Row 1: AI text block */
.expansion-text {
font-size: 12.5px !important;
line-height: 1.6 !important;
flex: none !important;
width: 100% !important;
order: 1;
}
.expansion-ai-label {
font-size: 10px !important;
letter-spacing: 1.5px !important;
margin-bottom: 8px !important;
}
.expansion-text br + br { display: none; } /* collapse double breaks */
.expansion-text a {
font-size: inherit !important;
word-break: break-word;
}
/* The button group (inline-styled div with display:flex inside JS) —
target the *direct child after .expansion-text* inside .expansion-content. */
.expansion-content > div:not(.expansion-text) {
width: 100% !important;
flex-direction: column !important;
gap: 10px !important;
flex-shrink: 1 !important;
order: 2;
}
/* The first wrapper inside that div holds the two main CTA buttons.
Force side-by-side 50/50. */
.expansion-content > div:not(.expansion-text) > div:first-child {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
.expansion-chart-btn {
width: 100% !important;
padding: 11px 8px !important;
font-size: 11px !important;
letter-spacing: 0.6px !important;
white-space: nowrap !important;
border-radius: 10px !important;
min-height: var(--m-tap-min) !important;
margin: 0 !important;
}
/* Broker links block (View or Execute This Trade) */
.expansion-content > div:not(.expansion-text) > div:nth-child(2) {
padding: 12px 14px !important;
border-radius: 12px !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:first-child {
font-size: 10px !important;
letter-spacing: 0.8px !important;
text-transform: uppercase;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:nth-child(2) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
flex-wrap: nowrap !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:nth-child(2) a,
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:nth-child(2) button {
min-height: 38px !important;
font-size: 11.5px !important;
padding: 8px 10px !important;
border-radius: 8px !important;
text-align: center !important;
}
/* Chart wrapper inside expansion */
.expansion-content canvas,
.expansion-content .chart-wrap,
.expansion-content [class*="chart"],
.expansion-content [class*="graph"] {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* Pump-check warning inside expansion-text */
[id^="pumpcheck-"] > div {
padding: 8px 10px !important;
border-radius: 8px !important;
font-size: 10.5px !important;
}
/* Sale row (sold/partial) */
.expansion-sale-row {
font-size: 11px !important;
margin-top: 4px !important;
}
/* ── 22b.6 TRADE INTELLIGENCE MODAL (.tmd-sheet) ────────────── */
/* Polishes the existing mobile branch in script.js (line 391+). */
#tradeModal {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
background: rgba(0, 0, 0, 0.7) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
}
.tmd-sheet {
position: relative;
width: 100vw !important;
max-width: 100vw !important;
max-height: 92vh !important;
border-radius: 24px 24px 0 0 !important;
background: linear-gradient(180deg, #0a0c10 0%, #050810 100%) !important;
border-top: 1px solid rgba(79, 226, 255, 0.12) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
animation: tmdSlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
padding-bottom: env(safe-area-inset-bottom);
}
@keyframes tmdSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.tmd-handle {
width: 40px !important;
height: 4px !important;
border-radius: 2px !important;
background: rgba(255, 255, 255, 0.18) !important;
margin: 8px auto 4px !important;
flex-shrink: 0 !important;
}
.tmd-sheet__header {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 14px 18px 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
flex-shrink: 0 !important;
}
.tmd-sheet__ticker-block {
flex: 1 !important;
min-width: 0;
}
.tmd-sheet__ticker {
font-family: 'Sora', sans-serif !important;
font-size: 26px !important;
font-weight: 900 !important;
letter-spacing: -0.8px !important;
line-height: 1 !important;
margin: 0 0 4px 0 !important;
color: #fff !important;
}
.tmd-sheet__company {
font-size: 11.5px !important;
color: rgba(255, 255, 255, 0.5) !important;
line-height: 1.35 !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tmd-sheet__score-block {
text-align: right !important;
flex-shrink: 0 !important;
}
.tmd-sheet__score-label {
font-family: 'JetBrains Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.4) !important;
margin-bottom: 2px !important;
}
.tmd-sheet__score {
font-family: 'JetBrains Mono', monospace !important;
font-size: 28px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -1px !important;
color: var(--theme, #4fe2ff) !important;
font-variant-numeric: tabular-nums !important;
}
.tmd-sheet__score span {
font-size: 12px !important;
color: rgba(255, 255, 255, 0.35) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.tmd-sheet__close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.7) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 2;
}
.tmd-sheet__close:active {
background: rgba(255, 255, 255, 0.12) !important;
}
.tmd-sheet__body {
flex: 1 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 16px 18px 32px !important;
overscroll-behavior: contain;
}
.tmd-sheet__tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 14px !important;
}
.tmd-sheet__tags:empty { display: none !important; }
/* Hero stat — capital deployed */
.tmd-stat-hero {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 14px !important;
padding: 16px 18px !important;
margin-bottom: 12px !important;
}
.tmd-stat-hero__label {
font-family: 'JetBrains Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.35) !important;
margin-bottom: 6px !important;
}
.tmd-stat-hero__value {
font-family: 'Sora', sans-serif !important;
font-size: 30px !important;
font-weight: 900 !important;
letter-spacing: -1px !important;
line-height: 1 !important;
color: #fff !important;
font-variant-numeric: tabular-nums !important;
}
/* Info stack rows */
.tmd-info-stack {
background: rgba(255, 255, 255, 0.02) !important;
border-radius: 14px !important;
padding: 4px 0 !important;
margin-bottom: 12px !important;
overflow: hidden;
}
.tmd-info-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 12px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
gap: 12px !important;
}
.tmd-info-row:last-child { border-bottom: 0 !important; }
.tmd-info-row__key {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.4) !important;
flex-shrink: 0;
}
.tmd-info-row__val {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.92) !important;
text-align: right !important;
font-weight: 600 !important;
line-height: 1.4;
}
.tmd-mono {
font-family: 'JetBrains Mono', monospace !important;
font-variant-numeric: tabular-nums !important;
}
/* AI synthesis block */
.tmd-ai-block {
background: rgba(79, 226, 255, 0.03) !important;
border: 1px solid rgba(79, 226, 255, 0.1) !important;
border-radius: 14px !important;
padding: 14px 16px !important;
margin-bottom: 12px !important;
}
.tmd-ai-block__header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin-bottom: 10px !important;
}
.tmd-ai-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
}
.tmd-ai-block__text {
font-family: 'Lora', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: rgba(255, 255, 255, 0.82) !important;
}
/* Quant breakdown */
.tmd-quant {
background: rgba(255, 255, 255, 0.02) !important;
border-radius: 14px !important;
padding: 16px !important;
margin-bottom: 12px !important;
}
.tmd-quant__header {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: rgba(255, 255, 255, 0.9) !important;
margin-bottom: 4px !important;
}
.tmd-quant__sub {
font-size: 10.5px !important;
color: rgba(255, 255, 255, 0.35) !important;
margin: 0 0 14px 0 !important;
letter-spacing: 0.3px;
}
.tmd-quant__row { margin-bottom: 14px !important; }
.tmd-quant__row:last-child { margin-bottom: 0 !important; }
.tmd-quant__row-top {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
margin-bottom: 6px !important;
}
.tmd-quant__name {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin-right: 6px !important;
}
.tmd-quant__weight {
font-family: 'JetBrains Mono', monospace !important;
font-size: 9.5px !important;
color: rgba(255, 255, 255, 0.3) !important;
letter-spacing: 0.8px !important;
}
.tmd-quant__val {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
}
.tmd-quant__bar-track {
height: 4px !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.tmd-quant__bar-fill {
height: 100% !important;
border-radius: 2px !important;
transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.tmd-quant__hint {
font-size: 10.5px !important;
color: rgba(255, 255, 255, 0.45) !important;
margin-top: 5px !important;
line-height: 1.4;
}
/* Trade modal CTA bar — always-visible at bottom of sheet */
.tmd-cta-bar,
.tmd-actions {
display: flex !important;
gap: 8px !important;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
background: rgba(5, 8, 16, 0.95) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
position: sticky;
bottom: 0;
}
.tmd-cta-bar > *,
.tmd-actions > * {
flex: 1 !important;
min-height: var(--m-tap-min) !important;
font-size: 13px !important;
font-weight: 800 !important;
border-radius: 12px !important;
padding: 0 16px !important;
}
/* ── 22b.7 ROW-CATEGORY HUE STRIPES (collapsed cards) ───────── */
/* Match existing .row-whale / .row-cluster / etc. classes to the
left-edge hue stripe so screenshots match the design system. */
.data-blade.row-whale::before { background: #3B82F6 !important; }
.data-blade.row-cluster::before { background: #10B981 !important; }
.data-blade.row-penny::before { background: #EF4444 !important; }
.data-blade.row-golden::before { background: #FFD700 !important; }
.data-blade.row-basic::before { background: #ff9f43 !important; }
.data-blade::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
opacity: 0.8;
}
/* ═══════════════════════════════════════════════════════════════
22c. AUDIT PASS 2 — Bowie-esque tightening
Real-device review revealed:
- Horizontal overflow (page scrolling sideways)
- Sticky island still overlapping at scroll positions
- Company names wrapping letter-by-letter (Bain/Capital/Total/Credit/Fund)
- Ambient orb gradients look weird on mobile
- Blades too fat, broker buttons too chunky, chart too tall
- Witness row 2-col layout cramming on mobile
═══════════════════════════════════════════════════════════════ */
/* ── 22c.1 KILL ALL AMBIENT GRADIENTS — pure dark canvas ─────── */
body::before, body::after,
body.dashboard-page::before, body.dashboard-page::after {
display: none !important;
content: none !important;
background: none !important;
}
body, body.dashboard-page, html {
background: #02040a !important;
}
/* ── 22c.2 LOCK HORIZONTAL SCROLL — kill the sideways slide ──── */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
}
main, .spatial-core, .dashboard-content, .feed-grid,
.archive-layout, .firehose-monolith {
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
/* Guard against any child that pushes wider than viewport */
.spatial-core *, .archive-layout * {
max-width: 100%;
}
/* ── 22c.3 ISLAND — flow naturally, no sticky on mobile ──────── */
/* Sticky island kept overlapping the title at scroll-top because
z-index put it above the title. Removing sticky means the title
is always visible at top, island scrolls away naturally. */
#commandIsland, .island-bar {
position: relative !important;
top: auto !important;
z-index: 5 !important;
margin: 0 0 16px 0 !important;
border-radius: 14px !important;
border: 1px solid rgba(79, 226, 255, 0.08) !important;
background: rgba(10, 14, 22, 0.85) !important;
}
/* Tighten contents */
.island-pill {
font-size: 9.5px !important;
padding: 5px 9px !important;
min-height: 28px !important;
letter-spacing: 0.4px !important;
}
.island-btn-hot, .island-btn-api {
font-size: 9px !important;
padding: 5px 9px !important;
min-height: 28px !important;
}
/* ── 22c.4 ARCHIVE HEADER — clean, prominent, no padding battle ── */
.spatial-core {
padding: 20px 14px 100px !important;
}
.archive-header {
margin: 4px 0 18px !important;
padding: 0 4px !important;
}
.archive-title {
font-size: clamp(26px, 7.2vw, 32px) !important;
letter-spacing: -1.2px !important;
line-height: 1.05 !important;
margin: 0 0 8px 0 !important;
text-align: center !important;
}
.archive-sub {
font-size: 12.5px !important;
line-height: 1.5 !important;
padding: 0 10px !important;
max-width: 300px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* ── 22c.5 COLLAPSED BLADE — slim, app-style ─────────────────── */
.data-blade {
padding: 11px 12px 11px 18px !important;
margin-bottom: 7px !important;
border-radius: 11px !important;
min-height: 0 !important;
}
.data-blade::before {
width: 2.5px !important;
opacity: 0.85 !important;
}
.data-blade .ticker, .data-blade .pc-ticker, .data-blade .cf-bar--ticker {
font-size: 15px !important;
letter-spacing: -0.4px !important;
line-height: 1.1 !important;
}
.data-blade .company, .data-blade .pc-company {
font-size: 10.5px !important;
line-height: 1.3 !important;
color: rgba(255, 255, 255, 0.42) !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-top: 2px !important;
}
.data-blade .pc-val, .data-blade .pc-capital, .data-blade [class*="capital"] {
font-size: 14px !important;
letter-spacing: -0.3px !important;
line-height: 1.1 !important;
}
.data-blade .pc-score, .data-blade .blade-score, .data-blade [class*="score-val"] {
font-size: 20px !important;
line-height: 1 !important;
letter-spacing: -0.5px !important;
}
.data-blade .pc-time, .data-blade .blade-time, .data-blade [class*="time-ago"] {
font-size: 9.5px !important;
}
.data-blade .pc-tag, .data-blade .blade-holding-tag,
.data-blade .blade-sold-tag, .data-blade [class*="tag"]:not([class*="tags"]) {
font-size: 8.5px !important;
padding: 2px 6px !important;
letter-spacing: 0.4px !important;
border-radius: 12px !important;
line-height: 1.4 !important;
}
/* ── 22c.6 EXPANSION — tighter text, compact buttons, short chart ── */
.expansion-content {
padding: 12px !important;
gap: 11px !important;
}
.expansion-text {
font-size: 12px !important;
line-height: 1.55 !important;
}
.expansion-ai-label {
font-size: 9.5px !important;
letter-spacing: 1.3px !important;
margin-bottom: 6px !important;
}
.expansion-text a {
word-break: break-word;
hyphens: auto;
}
/* Force any inline-styled spans inside .expansion-text to flow naturally
(script.js injects "Insider's Current Return:" inline — break it onto
its own line for readability) */
.expansion-text > span[style*="margin-top"],
.expansion-text > br + span,
.expansion-text strong[style*="color"] {
font-size: inherit !important;
}
/* Primary CTAs — 50/50 grid, smaller */
.expansion-chart-btn {
font-size: 10.5px !important;
padding: 9px 6px !important;
min-height: 38px !important;
letter-spacing: 0.5px !important;
border-radius: 9px !important;
}
/* Broker linkages block — small label, 2x2 grid, compact pills */
.expansion-content > div:not(.expansion-text) > div:nth-child(2) {
padding: 10px 11px !important;
border-radius: 10px !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:first-child {
font-size: 9px !important;
letter-spacing: 1px !important;
margin-bottom: 7px !important;
text-transform: uppercase !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:nth-child(2) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 5px !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:nth-child(2) > * {
min-height: 32px !important;
font-size: 10.5px !important;
padding: 6px 6px !important;
border-radius: 7px !important;
letter-spacing: 0.2px !important;
font-weight: 700 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-child(2) > div:last-child {
font-size: 8.5px !important;
margin-top: 6px !important;
line-height: 1.4 !important;
}
/* Price-since-buy chart wrapper — short */
.expansion-content canvas {
max-height: 110px !important;
height: 110px !important;
width: 100% !important;
}
.expansion-content [class*="chart"],
.expansion-content [class*="graph"],
.expansion-content [class*="price-since"] {
max-height: 140px !important;
}
.expansion-content > div:not(.expansion-text) > div:nth-last-child(1):not(:first-child),
.expansion-content > div:not(.expansion-text) > div:nth-last-child(2):not(:first-child) {
/* Last 1-2 children of right column likely chart-related */
max-height: 160px;
overflow: hidden;
}
/* ── 22c.7 WITNESS ROW (Today's Witness) — vertical stack ────── */
.witness-row {
padding: 18px 14px !important;
margin: 0 0 12px 0 !important;
border-radius: 14px !important;
}
.witness-inner {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.witness-meta {
flex-wrap: wrap !important;
gap: 4px 10px !important;
margin-bottom: 14px !important;
}
.witness-dateline {
font-size: 9.5px !important;
letter-spacing: 1.4px !important;
flex-wrap: wrap !important;
line-height: 1.4 !important;
}
.witness-hint { display: none !important; } /* "Hover to expand" — N/A on touch */
.witness-headline {
font-size: clamp(22px, 6.5vw, 28px) !important;
letter-spacing: -0.8px !important;
line-height: 1.15 !important;
margin: 0 0 16px 0 !important;
font-weight: 800 !important;
}
.witness-body {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
max-width: 100% !important;
}
.witness-facts {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px 14px !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.witness-facts > * {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
.witness-facts [class*="label"],
.witness-facts dt {
font-size: 9.5px !important;
letter-spacing: 1.2px !important;
line-height: 1.3 !important;
margin-bottom: 3px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.38) !important;
}
.witness-facts [class*="value"],
.witness-facts dd,
.witness-facts strong {
font-size: 12.5px !important;
line-height: 1.35 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.witness-prose-col {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.witness-paragraph {
font-size: 14px !important;
line-height: 1.7 !important;
font-family: 'Lora', Georgia, serif !important;
}
.witness-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.witness-action {
min-height: 42px !important;
font-size: 10.5px !important;
padding: 0 14px !important;
letter-spacing: 0.8px !important;
border-radius: 10px !important;
justify-content: center !important;
}
/* Witness row stripe — make sure it's thin like other blades */
.witness-row::before {
width: 2.5px !important;
}
/* ── 22c.8 CLASSIFIED (locked) BLADE — match the slim look ───── */
.classified-blade {
padding: 9px 12px !important;
min-height: 0 !important;
}
.classified-blade .cf-header {
padding: 0 !important;
gap: 8px !important;
}
.classified-blade .cf-redact { font-size: 10px !important; }
.classified-blade .cf-cta { font-size: 9px !important; }
/* ── 22c.9 SECONDARY FILTER ROW — contain inside parent ──────── */
/* Earlier rule used negative margin to bleed the row edge-to-edge,
which caused horizontal overflow. Replace with contained scroll. */
.spatial-core .filter-tabs,
.spatial-core .tab-strip,
.spatial-core [class*="tabs"]:not(.island-filters),
.spatial-core [class*="segments"],
.spatial-core [role="tablist"] {
margin: 0 0 12px 0 !important;
padding: 4px 0 !important;
width: 100% !important;
max-width: 100% !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.score-bar, .min-score-bar, [class*="score-slider"] {
margin: 0 0 14px 0 !important;
padding: 8px 0 !important;
width: 100% !important;
}
/* ═══════════════════════════════════════════════════════════════
END 22c — audit pass 2
═══════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────
22. SMALLER PHONE OVERRIDES (≤375px)
─────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
:root { --m-wrap-pad: 16px; }
.h1, h1 { font-size: 28px !important; }
.what-title { font-size: 26px !important; }
.floating-pill { font-size: 11px !important; padding: 12px 16px !important; }
.conv-card { padding: 20px 16px !important; }
.heroCard { padding: 20px 14px !important; }
.pricing-card, .tier-card { padding: 24px 18px !important; }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE HERO — full rebuild (≤820px only)
The desktop hero (#overview) is hidden; the dedicated .m-hero
block replaces it. No glass card, no arc — a free-standing whale
over an extremely ambient stepped glow, orbs raining across the
whale area, friendly sentence-case buttons, icon trust row.
═══════════════════════════════════════════════════════════════ */
/* Hide the desktop hero entirely on mobile. */
#overview.hero { display: none !important; }
/* ── Hero shell ─────────────────────────────────────────────────── */
.m-hero {
display: block !important;
position: relative;
padding: 56px 22px 52px;
z-index: 1;
}
.m-hero__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 460px;
margin: 0 auto;
}
/* ── Headline ───────────────────────────────────────────────────── */
.m-hero__title {
font-family: 'Sora', sans-serif;
font-size: clamp(33px, 9.4vw, 46px);
font-weight: 800;
line-height: 1.12;
letter-spacing: -1.4px;
color: #fff;
margin: 8px 0 0;
}
.m-hero__grad {
display: block;
white-space: nowrap;
background: linear-gradient(100deg, #4fe2ff 0%, #4a86ff 48%, #a05cff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Sub-text ───────────────────────────────────────────────────── */
.m-hero__sub {
font-family: 'Inter', sans-serif;
font-size: 15.5px;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
margin: 16px 0 0;
max-width: 340px;
}
/* ── Visual: whale + ambient glow + raining orbs ────────────────── */
/* Tighter top margin per the brief — less space between the title
block and the whale. The visual is the positioning context for
both the glow and the rain. */
.m-hero__visual {
position: relative;
width: 100%;
height: 248px;
margin: 2px 0 0;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
/* Extremely ambient stepped glow — three concentric radial steps,
heavily blurred so it reads as light, not a shape. Slow breath. */
.m-hero__glow {
position: absolute;
left: 50%;
top: 50%;
width: 290px;
height: 290px;
transform: translate(-50%, -50%);
z-index: -2;
pointer-events: none;
background:
radial-gradient(circle, rgba(79,226,255,0.13) 0%, rgba(79,226,255,0.13) 24%, transparent 25%),
radial-gradient(circle, rgba(79,160,255,0.085) 0%, rgba(79,160,255,0.085) 46%, transparent 47%),
radial-gradient(circle, rgba(120,150,255,0.05) 0%, rgba(120,150,255,0.05) 68%, transparent 69%),
radial-gradient(circle, rgba(120,150,255,0.025) 0%, rgba(120,150,255,0.025) 90%, transparent 91%);
filter: blur(34px);
animation: mHeroGlow 6s ease-in-out infinite;
}
@keyframes mHeroGlow {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
}
/* The whale itself — free-standing, centered, no card. */
.m-hero__whale {
position: relative;
z-index: 1;
width: clamp(150px, 44vw, 190px);
height: auto;
filter: drop-shadow(0 0 22px rgba(79, 226, 255, 0.28));
}
/* Raining orbs — span the visual area, falling on loop. */
.m-hero__rain {
position: absolute;
inset: -20px 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.m-hero__rain i {
position: absolute;
top: -14px;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(140,215,255,0.95) 0%, rgba(79,226,255,0.4) 45%, transparent 72%);
box-shadow: 0 0 7px rgba(79, 226, 255, 0.65);
opacity: 0;
animation: mHeroRain linear infinite;
}
@keyframes mHeroRain {
0% { transform: translateY(0) scale(0.6); opacity: 0; }
14% { opacity: 0.9; }
80% { opacity: 0.9; }
100% { transform: translateY(340px) scale(1); opacity: 0; }
}
/* Twelve orbs scattered across the full width, varied speed/size. */
.m-hero__rain i:nth-child(1) { left: 6%; animation-duration: 5.0s; animation-delay: 0s; }
.m-hero__rain i:nth-child(2) { left: 15%; animation-duration: 6.4s; animation-delay: 2.1s; transform: scale(0.6); }
.m-hero__rain i:nth-child(3) { left: 23%; animation-duration: 4.4s; animation-delay: 3.4s; }
.m-hero__rain i:nth-child(4) { left: 32%; animation-duration: 7.0s; animation-delay: 1.0s; transform: scale(1.25);}
.m-hero__rain i:nth-child(5) { left: 41%; animation-duration: 5.4s; animation-delay: 4.2s; }
.m-hero__rain i:nth-child(6) { left: 49%; animation-duration: 6.0s; animation-delay: 0.5s; transform: scale(0.7); }
.m-hero__rain i:nth-child(7) { left: 58%; animation-duration: 4.7s; animation-delay: 2.8s; }
.m-hero__rain i:nth-child(8) { left: 67%; animation-duration: 6.7s; animation-delay: 1.6s; transform: scale(1.15);}
.m-hero__rain i:nth-child(9) { left: 75%; animation-duration: 5.2s; animation-delay: 3.9s; }
.m-hero__rain i:nth-child(10) { left: 83%; animation-duration: 4.9s; animation-delay: 0.9s; transform: scale(0.65);}
.m-hero__rain i:nth-child(11) { left: 90%; animation-duration: 6.2s; animation-delay: 2.5s; }
.m-hero__rain i:nth-child(12) { left: 95%; animation-duration: 5.6s; animation-delay: 4.6s; transform: scale(1.1); }
/* ── Buttons ────────────────────────────────────────────────────── */
.m-hero__actions {
display: flex;
flex-direction: column;
gap: 13px;
width: 100%;
margin-top: 6px;
}
.m-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 56px;
padding: 16px 20px;
border-radius: 15px;
font-family: 'Sora', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.m-btn:active { transform: scale(0.985); }
.m-btn--primary {
border: none;
color: #fff;
background: linear-gradient(100deg, #2f8fff 0%, #4a6bff 52%, #7b3cff 100%);
box-shadow: 0 8px 26px rgba(74, 107, 255, 0.34);
}
.m-btn--ghost {
color: #fff;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.14);
}
/* ── Trust row ──────────────────────────────────────────────────── */
.m-hero__trust {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px 9px;
margin-top: 22px;
}
.m-hero__trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
}
.m-hero__trust-item:nth-child(1) svg { color: #34d399; }
.m-hero__trust-item:nth-child(3) svg { color: #a05cff; }
.m-hero__trust-item:nth-child(5) svg { color: #4fe2ff; }
.m-hero__trust-dot { color: rgba(255, 255, 255, 0.2); font-size: 12px; }
/* Respect reduced-motion — hold the glow, stop the rain. */
@media (prefers-reduced-motion: reduce) {
.m-hero__glow { animation: none; opacity: 0.7; }
.m-hero__rain i { animation: none; opacity: 0; }
}
/* ═══════════════════════════════════════════════════════════════
END mobile.css
═══════════════════════════════════════════════════════════════ */