/* ════════════════════════════════════════════════════════════════
V111 HOMEPAGE — full inline CSS extracted from main_page_v111.html
────────────────────────────────────────────────────────────────
This is the v111 stylesheet pulled out as-is. Future passes will
split it into per-component files (components/*.css). For now,
keep it as one big import to preserve cascade order and avoid
regression while we get the Eleventy build working end-to-end.
════════════════════════════════════════════════════════════════ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* v100 polish: tells the browser scrollbars, form controls,
and any UA-rendered chrome to use the matching palette
for the section they sit in. Without this, scrollbars
stay light-themed even in the dark zone. */
color-scheme: dark light;
/* v100 polish: Inter stylistic sets — cv11 (single-storey
'a'), ss01 (open '4'), ss03 (curved 'l'). These are the
same letterform choices Linear and Stripe use; toggling
them flips Inter from its academic defaults to the modern
geometric look people associate with quality SaaS. */
font-feature-settings:
'kern' 1,
'liga' 1,
'calt' 1,
'ss01' 1,
'ss03' 1,
'cv11' 1;
font-optical-sizing: auto;
-webkit-tap-highlight-color: transparent;
}
:root {
--bg: #ffffff; /* v25 (2026-05-29): was #FAFAF8 warm off-white. Flattened to pure white so the whole light site is one tone (white + black). This :root overrides tokens.css, so the change must live here too. */
--bg-pure: #ffffff;
--bg-warm: #F8F6F3;
--bg-monolith: #F4F4F5;
--bg-card: #f4f4f5;
--bg-hover: #E8E8E8;
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-ui: 'Inter', sans-serif;
--font-mono: 'Space Mono', monospace;
--text-primary: #000000;
--text-black: #000000;
--text-secondary: #52525B;
--text-tertiary: #A1A1AA;
--text-muted: #999999;
--border-premium: rgba(0, 0, 0, 0.08);
--border-soft: #F0F0F0;
--border: rgb(219, 218, 215);
--border-subtle: #F0F0F0;
--radius-sharp: 0px;
--radius-machine: 2px;
--radius-panel: 12px;
--radius-sm: 2px;
--shadow-card: 0 1px 2px rgba(0,0,0,0.04);
--shadow-float: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
--accent: #F97316;
--accent-soft: #FFF7ED;
--accent-glow: rgba(249, 115, 22, 0.4);
--accent-btn: #FEE8D6;
--success: #10B981;
--success-soft: #ECFDF5;
--alert: #ef4444;
--alert-soft: #FEF2F2;
--gold: #D4A017;
--canvas: #34322e;
--card: #ffffff;
--ink-100: #000000;
--ink-80: #27272A;
--ink-60: #52525B;
--ink-40: #71717A;
--ink-20: #A1A1AA;
--ink-10: #D4D4D8;
--ink-05: #E4E4E7;
--ink-02: #F4F4F5;
--green: #10B981;
--green-soft: rgba(16, 185, 129, 0.12);
--amber: #F59E0B;
--amber-soft: rgba(245, 158, 11, 0.12);
--orange: #F97316;
--orange-soft: rgba(249, 115, 22, 0.12);
--red: #EF4444;
--red-soft: rgba(239, 68, 68, 0.12);
--spring: cubic-bezier(0.16, 1, 0.3, 1);
--warning: #f59e0b;
--dark-bg: #000000;
--dark-card: #2A2826;
--dark-border: #3A3735;
--ease-monolith: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
/* v111: SPACING SCALE — 8pt grid with 4pt half-steps.
Replaces the ad-hoc magic numbers (14px, 22px, 26px,
36px, 40px, 56px) that previously lived inline across
the file. Token meaning is by *purpose*, not size:
reach for the one that matches the hierarchy of the
break you're creating, not the px number you guessed.
TIGHT — inside a card / form / row
--space-1 4px hairline gaps (icon ↔ label)
--space-2 8px tight inline pairs
--space-3 12px dense list rows
--space-4 16px default component padding
--space-5 20px comfortable list row
--space-6 24px comfortable component padding
MEDIUM — inside a section
--space-8 32px between related elements
--space-10 40px between block + its supporting copy
--space-12 48px between unrelated elements in a section
LARGE — section structure
--space-16 64px between sub-sections
--space-20 80px between major beats of a section
--space-24 96px section interludes
--space-32 128px hard section breaks
--space-40 160px outer section padding (top/bottom) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
}
html {
scroll-behavior: smooth;
}
/* ── Lenis smooth-scroll integration ── */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: clip;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
body {
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--bg);
line-height: 1.6;
letter-spacing: -0.01em;
position: relative;
}
/* ── Site-wide film-grain noise overlay ────────────────────────────
Breaks up gradient banding on dark sections and adds tactile
texture. Sits above all content but below modals; non-interactive.
mix-blend-mode: overlay so it brightens dark areas and softly
darkens light ones — works on both canvas colors without tuning. */
.noise-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2147483000;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 300px 300px;
background-repeat: repeat;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.noise-overlay { opacity: 0.03; }
}
/* NAVIGATION — styles live in /styles/components/nav.css (loaded globally) */
@media (max-width: 768px) {
.hero-content { padding: 0 var(--space-6); top: 42%; left: 0; transform: translateY(-50%); max-width: 100%; }
.hero-headline { font-size: 40px; line-height: 1.05; }
.hero-scroll-hint { right: 24px; bottom: 24px; }
.hero-subtext { font-size: 14px; margin-bottom: var(--space-8); } /* 28 → 32 */
.hero-trusted { font-size: 11px; }
.hero-transition-inner { flex-direction: column; gap: var(--space-8); }
.hero-intro-text { max-width: 100%; }
}
/* HERO — v76 structure with v87 dark fade */
.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 0;
}
/* v106: interactive dot field overlaid on the murmuration.
Sits ABOVE the hero image / overlay / fade layers but BELOW
the hero content (text/CTA). pointer-events: none so it
never intercepts clicks — mouse position is tracked via
the hero's own mousemove handler in JS. */
.hero-dots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(1);
object-fit: cover;
object-position: 22% 50%;
will-change: transform;
}
/* v23 (2026-05-24): murmuration as a separate layer over the landscape
plate. Sits above .hero-video (DOM order, no explicit z-index) and
below .hero-overlay (z-index: 1) so the overlay still darkens the
flock for headline contrast.
The source PNG is light-on-dark (birds slightly lighter than a
near-black sky), authored for a screen-blend onto a dark scene.
This hero sits over a bright daytime sky, so we want the birds to
read as dark silhouettes. We invert the PNG (birds → dark, sky →
light) and then multiply so the now-light sky drops out and the
dark birds remain.
Tuning knobs:
--murmur-scale: scale factor (1 = native, >1 zooms flock in)
--murmur-x: horizontal offset in % of viewport width
--murmur-y: vertical offset in % of viewport height
--murmur-opacity: 0–1 visibility
--murmur-darkness: 0–1, lower = darker birds (post-invert) */
.hero-murmuration {
/* v23b (2026-05-25): swapped to the May 25 JPG murmuration as a
quick test. JPG can't carry transparency, so the source has a
mid-grey checkerboard baked behind the birds. We push contrast
hard before blending so the birds drop toward black and the
checker pushes toward white; multiply then drops the (now
near-white) checker and keeps the dark birds visible.
Known compromise: the checker is mid-grey so it still tints
the sky slightly darker. Replace this JPG with a true alpha
PNG when ready — see the v23 comment above on tuning knobs. */
--murmur-scale: 1;
--murmur-x: 0%;
--murmur-y: 0%;
--murmur-opacity: 0.9;
--murmur-contrast: 1.8;
--murmur-brightness: 1.1;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(var(--murmur-scale))
translate(var(--murmur-x), var(--murmur-y));
transform-origin: center;
object-fit: cover;
object-position: 22% 50%;
filter: contrast(var(--murmur-contrast)) brightness(var(--murmur-brightness)) saturate(0);
mix-blend-mode: multiply;
opacity: var(--murmur-opacity);
pointer-events: none;
will-change: transform;
}
.hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* v22 (2026-05-21): overall hero-image filter lightened. Each
stop dropped by ~15 percentage points so the murmuration
photo reads with more clarity. Headline contrast is still
preserved by the residual 20% top scrim. */
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.20) 0%,
rgba(0, 0, 0, 0.10) 50%,
rgba(0, 0, 0, 0.30) 100%
);
z-index: 1;
}
/* Dark fade into dark zone below.
v22 (2026-05-21): softened to remove the abrupt seam where the
hero photo met pure-black. Fade band lengthened 40% → 60% of
hero height and the ramp re-shaped with more stops so the eye
reads a smooth dissolve instead of a hard step. Full-black
anchor pushed from 75% → 92% so most of the band is genuinely
transitioning, with only a thin solid strip at the very bottom. */
.hero-dark-fade {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60%;
/* v22 (2026-05-21): solid-black plateau removed. Previously the
last 8% of the band was a flat #000000 fill, which read as a
distinct strip at the bottom of the hero. Now the gradient
keeps deepening all the way to alpha 1.0 at the very bottom
edge, so there's no transition discontinuity — the hero
dissolves smoothly into the dark zone immediately below. */
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.06) 20%,
rgba(0,0,0,0.18) 40%,
rgba(0,0,0,0.40) 60%,
rgba(0,0,0,0.68) 78%,
rgba(0,0,0,0.90) 92%,
rgba(0,0,0,1) 100%
);
z-index: 2;
pointer-events: none;
}
.hero-content-scrim {
display: none;
}
.hero-content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1440px;
z-index: 3;
padding: 0 48px;
box-sizing: border-box;
/* v24: centered hero. The outer block is centered on the
viewport via the 1440px container + translate, and content
is centered within that container. */
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
will-change: transform, opacity;
}
.hero-headline {
font-family: 'Instrument Serif', Georgia, serif;
/* Editorial scale — sized so the block sits inside the lit
architectural plane below the diagonal shadow */
font-size: clamp(44px, 6.1vw, 94px);
font-weight: 400;
font-style: normal;
/* Tighter tracking reads intentional at display sizes */
letter-spacing: -0.022em;
color: white;
/* v103: margin tightened — the new subhead sits below at
~22px so the three-line block reads as one composition
rather than three stacked elements. */
margin-bottom: 22px;
/* Tighter leading at display scale */
line-height: 1.04;
/* v24: prevent the centered headline from shifting left/right
as the slot-width animates. The headline takes the width of
its "Teams" layout (widest word) and never reflows. */
white-space: nowrap;
}
/* ════════════ v101: rolling words (Filed.com pattern) ════════════
A vertical slot-machine: the track translateY's through four
stacked spans (Data, Teams, Cash, Data — the trailing duplicate
lets the animation snap from -3em back to 0 invisibly because
the visible word at the snap moment is identical at both
positions). Each word holds for ~2.6s, rolls for ~0.7s. */
.hero-roll {
display: inline-block;
position: relative;
vertical-align: bottom;
overflow: hidden;
line-height: 1.04;
/* v102.9: height reverted to 1.04em to restore baseline
alignment with surrounding "Gathers your" text. The
mask gradient stays — words still pass through the fade
region as they roll, so the soft top/bottom edge effect
is preserved without shifting the layout. */
height: 1.04em;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%,
black 10%,
black 90%,
transparent 100%);
/* v102.4: the slot's WIDTH now animates to match the
currently-visible word, in sync with the translateY of
the track. Because the dot sits OUTSIDE the slot, the
dot's horizontal position is automatically driven by
this width change — it slides right when "Teams"
(longest) appears and slides back left for "Cash"/"Data".
Same cubic-bezier as the track keeps the two motions
perfectly synced; the slight overshoot lets the dot
settle like a ball coming to rest. */
width: 3.7ch; /* starting width: Data */
animation: hero-roll-width 6s cubic-bezier(0.68, -0.04, 0.36, 1.04) infinite;
will-change: width;
}
.hero-roll-track {
display: flex;
flex-direction: column;
animation: hero-roll-cycle 6s cubic-bezier(0.68, -0.04, 0.36, 1.04) infinite;
will-change: transform;
}
/* v102.5/.6: ch values tuned for Instrument Serif's actual
glyph widths (m, D, C are wider than 1ch). Teams pulled
back from 5.0 → 4.6ch so the trailing 's' fits but the
dot stays flush against it. Data/Cash trimmed similarly. */
@keyframes hero-roll-width {
0%, 27% { width: 3.7ch; } /* Data */
33%, 60% { width: 4.6ch; } /* Teams */
66%, 93% { width: 3.1ch; } /* Cash — tighter, dot was floating */
99%, 100% { width: 3.7ch; } /* duplicate Data — invisible snap */
}
/* The detached dot. Sits as the next inline element after the
rolling slot and inherits the headline's color/font so it
reads as natural punctuation. As the slot's width animates,
this dot moves horizontally with it — the "rolling ball". */
.hero-roll-dot {
display: inline-block;
vertical-align: bottom;
line-height: 1.04;
}
.hero-roll-word {
display: block;
height: 1.04em;
line-height: 1.04;
color: white;
white-space: nowrap;
/* v102.1: force left-align — without this, words inherit
text-align: center from the headline and float in the
middle of the slot's width (which is sized to fit the
widest word, Teams.). That created a half-character gap
on both sides of shorter words. With left-align, every
word starts flush against "your " and the leftover slot
width pads invisibly to the right where nothing follows. */
text-align: left;
}
@keyframes hero-roll-cycle {
0%, 27% { transform: translateY(0em); } /* Data hold */
33%, 60% { transform: translateY(-1.04em); } /* Teams hold */
66%, 93% { transform: translateY(-2.08em); } /* Cash hold */
99%, 100% { transform: translateY(-3.12em); } /* duplicate Data — snap */
}
@media (prefers-reduced-motion: reduce) {
.hero-roll-track {
animation: hero-roll-cycle 6s ease infinite;
}
.hero-roll {
animation: hero-roll-width 6s ease infinite;
}
}
/* v103: hero-label is now an EYEBROW above the headline (Tabs /
Planhat hierarchy). With a real subhead carrying the
explanatory weight below, the label drops back to its proper
role: quiet category tag. Smaller font, more tracking, lower
opacity. Margins flip — gap is now BELOW (to the headline)
not above. */
.hero-label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #ffffff;
margin-top: 0;
margin-bottom: var(--space-8); /* v111.1: tokenized — was 28 → 32 */
}
/* v103: new subhead — the third line that does the actual
function-naming work. Sized like Tabs/Planhat body subheads:
~18px, 1.5 line-height, capped width so it wraps to two
lines and the hero stays visually centered. Opacity nudged
up to 0.88 + soft shadow because the murmuration backdrop
varies from dark sky (left) to bright bird cloud (right),
and the text needs to survive both zones. */
.hero-subhead {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.88);
max-width: 580px;
/* v24: centered to match centered hero layout. */
margin: 0 auto var(--space-10);
text-align: center;
}
/* v112: duna-style hero load reveal — each line rises + focuses into
view in sequence on page load. Per-line delay set inline via --rl.
Button fades only (no transform) so its :hover lift still works. */
@keyframes heroRiseIn {
0% { opacity: 0; transform: translateY(28px); filter: blur(5px); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroFadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.hero-content .reveal-up {
opacity: 0;
animation: heroRiseIn 1s cubic-bezier(0.16,1,0.3,1) var(--rl, 0s) both;
will-change: transform, opacity, filter;
}
.hero-content .reveal-fade {
opacity: 0;
animation: heroFadeIn 0.9s ease var(--rl, 0s) both;
}
@media (prefers-reduced-motion: reduce) {
.hero-content .reveal-up,
.hero-content .reveal-fade { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
.hero-scroll-hint {
position: absolute;
bottom: 40px;
right: 110px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.35);
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.05em;
will-change: opacity;
}
/* ════════════ HERO LOGO MARQUEE ════════════
Sits pinned to the bottom of the hero. Label + edge-to-edge
horizontal marquee of customer logos. Track is duplicated so
a 0% → -50% translateX produces a seamless infinite loop.
Edge mask fades the logos in/out so they don't pop at the
viewport boundaries. */
.hero-trusted-row {
position: absolute;
bottom: 64px;
left: 0;
right: 0;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6); /* v111.1: tokenized — was 22 → 24 */
pointer-events: none;
}
.hero-trusted-label {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.hero-marquee {
/* Mirrors giga.ai's pattern: a fixed-width constrained
container, centered horizontally, with a symmetric mask
gradient that fades the track in/out at the edges. */
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgb(0,0,0) 25%,
rgb(0,0,0) 75%,
rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgb(0,0,0) 25%,
rgb(0,0,0) 75%,
rgba(0,0,0,0) 100%);
}
.hero-marquee-track {
display: flex;
align-items: center;
gap: 120px;
width: max-content;
/* v22 (2026-05-21): cut from 32s → 20s. Linear easing stays so
the logo strip drifts smoothly, but the cadence is brisker
so the eye doesn't lose track of the loop. */
animation: hero-marquee-scroll 20s linear infinite;
}
.hero-marquee-logo {
flex-shrink: 0;
height: 28px;
width: auto;
opacity: 0.62;
transition: opacity 0.4s ease;
}
.hero-marquee-logo-text {
flex-shrink: 0;
font-family: var(--font-sans);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.62);
line-height: 1;
display: inline-flex;
align-items: center;
height: 28px;
transition: color 0.4s ease;
}
@keyframes hero-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-marquee-track { animation: none; }
}
@media (max-width: 768px) {
.hero-trusted-row { bottom: 40px; gap: 14px; }
.hero-trusted-label { font-size: 10px; }
.hero-marquee-track { gap: 56px; animation-duration: 24s; }
.hero-marquee-logo { height: 22px; }
.hero-marquee-logo-text { font-size: 20px; height: 22px; }
}
.hero-scroll-arrow {
width: 20px;
height: 20px;
animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(6px); opacity: 0.8; }
}
/* Dark zone wrapper — seamless dark background behind all dark
sections. v99.13: unified to v88's #000000 so the entire
dark top of the page reads as ONE colour, not the patchwork
of #000000 + #000 v99 had been using. */
.dark-zone {
background: #000000;
position: relative;
z-index: 1;
}
/* Bridge strip — content at the hero/dark seam */
/* v111.1: bottom padding tokenized to --space-20 (80px).
Top 72px is intentionally off-scale to land just under the
hero seam — leaving as-is. */
.hero-bridge {
padding: 72px var(--space-12) var(--space-20);
}
.hero-bridge-inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-20);
}
.hero-bridge-statement {
font-family: var(--font-ui);
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.65;
max-width: 480px;
margin: 0;
}
.hero-bridge-metrics {
display: flex;
align-items: flex-start;
gap: var(--space-10);
flex-shrink: 0;
}
.hero-bridge-divider {
width: 1px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
}
.hero-bridge-metric {
display: flex;
flex-direction: column;
gap: 6px;
}
.hero-bridge-value {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.03em;
line-height: 1;
}
.hero-bridge-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 400;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.08em;
text-transform: lowercase;
}
@media (max-width: 768px) {
.hero-bridge { padding: var(--space-12) var(--space-6) 56px; } /* v111.1: 56 retained off-scale */
.hero-bridge-inner { flex-direction: column; gap: var(--space-10); }
.hero-bridge-value { font-size: 28px; }
}
.hub-paths-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
display: none;
}
.hub-nodes-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
display: none;
}
.flow-cards-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; display: none; }
.flow-card { position: absolute; background: white; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 10px 15px; box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03); pointer-events: none; will-change: transform, opacity; transform-origin: center bottom; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.flow-card-title { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; }
.flow-card-sub { font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; }
.flow-card.flow-card-success .flow-card-title { color: var(--success); }
.flow-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: white; pointer-events: none; z-index: 10; transform: translate(-50%, -50%) scale(0); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; }
.flow-stage-labels { position: absolute; top: 0; left: 0; right: 0; height: 56px; pointer-events: none; z-index: 2; }
.flow-stage-label { position: absolute; top: 20px; transform: translateX(-50%); font-family: var(--font-ui); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-tertiary); opacity: 0.55; white-space: nowrap; }
.hub-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: #000000;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 13px 28px;
/* v100: round pill — back to the earlier hero CTA shape. */
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: opacity 0.3s ease, transform 0.3s var(--spring), background 0.3s ease;
}
.hub-btn:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.hub-trust-row {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
z-index: 4;
opacity: 0.45;
pointer-events: none;
}
.hub-trust-text {
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.04em;
white-space: nowrap;
}
.hub-trust-divider {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, 0.3);
}
/* 4 structural column lines — hero only (right portion) */
.hub-vlines {
position: absolute;
top: 0;
left: 40%;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
display: none;
}
.hub-vline {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(0, 0, 0, 0.06);
}
.hub-vline:nth-child(1) { left: 20%; }
.hub-vline:nth-child(2) { left: 40%; }
.hub-vline:nth-child(3) { left: 62%; }
.hub-vline:nth-child(4) { left: 84%; }
/* ── Page-wide vlines: fixed overlay, same 4 right-side positions ── */
.page-vlines {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.page-vline {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.08);
}
/* Same positions as hub-vlines: right 60% of page, lines at 20/40/62/84% within */
.page-vline:nth-child(1) { left: calc(40% + 60% * 0.20); }
.page-vline:nth-child(2) { left: calc(40% + 60% * 0.40); }
.page-vline:nth-child(3) { left: calc(40% + 60% * 0.62); }
.page-vline:nth-child(4) { left: calc(40% + 60% * 0.84); }
@media (max-width: 768px) {
.page-vlines { display: none; }
}
/* Mobile — adjust hero layout */
@media (max-width: 768px) {
.hero-content {
top: 40%;
padding: 0 var(--space-6);
}
.hero-headline { font-size: 44px; line-height: 1.05; }
/* v103: eyebrow + subhead scale down on mobile */
.hero-label { font-size: 11px; letter-spacing: 0.18em; margin-bottom: var(--space-5); }
.hero-subhead { font-size: 15px; line-height: 1.5; max-width: 100%; margin-bottom: var(--space-8); } /* 28 → 32 */
.hero-scroll-hint { display: none; }
}
.page-content {
position: relative;
z-index: 2;
background: var(--bg);
}
.page-content-wave {
position: relative;
margin-top: -50px;
height: 50px;
pointer-events: none;
z-index: 2;
overflow: hidden;
}
.page-content-wave svg {
display: block;
width: 100%;
height: 100%;
z-index: 3;
}
/* v111.1: tokenized section padding + inner gap (60 → 64). */
.hero-transition {
background: var(--bg);
padding: var(--space-40) var(--space-12) var(--space-20);
position: relative;
}
.hero-transition-inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-16);
}
.hero-intro-text {
font-family: var(--font-ui);
font-size: 26px;
font-weight: 400;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.5;
max-width: 640px;
}
.hero-intro-right {
display: flex;
flex-direction: column;
gap: var(--space-5);
align-items: flex-start;
padding-top: 4px;
}
.hero-trust-line {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-tertiary);
}
.hero-trust-line a {
color: var(--text-primary);
font-weight: 700;
text-decoration: none;
transition: opacity 0.2s;
}
.hero-trust-line a:hover { opacity: 0.7; }
/* v109.72: btn-primary now lives on a LIGHT section (the CTA).
Inverted to a solid dark capsule pill: black background,
white text, fully-rounded ends. High-contrast CTA on the
light surface. */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
background: #000000;
color: #FFFFFF;
padding: 15px 34px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.3s var(--spring), background 0.3s ease;
}
.btn-primary:hover {
opacity: 1;
transform: translateY(-1px);
background: #2a2932;
}
/* Inverted pill for light backgrounds */
.btn-primary.is-dark {
background: rgba(12, 11, 9, 0.06);
color: var(--text-primary);
border-color: rgba(12, 11, 9, 0.15);
}
.btn-primary.is-dark:hover {
background: rgba(12, 11, 9, 0.1);
border-color: rgba(12, 11, 9, 0.25);
}
/* THE PRODUCT — cinematic showcase with lens entrance */
/* v111.1: outer padding tokenized; 120 retained off-scale —
lighter than full --space-40 between mockup-heavy sections. */
.product-showcase {
background: var(--bg);
padding: 120px var(--space-12);
position: relative;
overflow: visible;
}
.product-sticky-wrapper {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-showcase-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-tertiary);
margin-bottom: 20px;
}
.product-showcase-headline {
font-family: var(--font-sans);
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 400;
letter-spacing: -0.03em;
color: var(--text-primary);
line-height: 1.15;
max-width: 700px;
margin: 0 0 64px;
}
.product-monitor {
position: relative;
max-width: 1440px;
width: 100%;
margin: 0 auto;
}
.product-monitor-frame {
background: #000000;
border-radius: 16px;
padding: 8px;
box-shadow:
0 60px 120px -30px rgba(0, 0, 0, 0.35),
0 30px 60px -15px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
}
.product-monitor-screen {
width: 100%;
border-radius: 10px;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
background: #f5f5f5;
}
.product-monitor-chin {
height: 20px;
background: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.product-monitor-chin::after {
content: '';
width: 60px;
height: 4px;
background: #000000;
border-radius: 2px;
}
.product-monitor-stand {
width: 80px;
height: 60px;
background: linear-gradient(180deg, #000000 0%, #000000 100%);
margin: 0 auto;
border-radius: 0;
}
.product-monitor-base {
width: 220px;
height: 12px;
background: linear-gradient(180deg, #000000 0%, #000000 100%);
margin: 0 auto;
border-radius: 0 0 12px 12px;
}
.product-monitor-reflection {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
border-radius: 10px 10px 0 0;
pointer-events: none;
z-index: 2;
}
@media (max-width: 768px) {
.product-showcase { padding: 0 24px; height: auto; }
.product-showcase { padding: var(--space-20) var(--space-6); }
.product-sticky-wrapper { padding: 0; }
.product-showcase-label,
.product-showcase-headline { opacity: 1; transform: none; }
.product-showcase-headline { margin-bottom: 40px; }
.product-monitor { opacity: 1; transform: none; filter: none; }
.product-monitor-frame { border-radius: 8px; padding: 6px 6px 0 6px; }
.product-monitor-stand { width: 80px; height: 32px; }
.product-monitor-base { width: 140px; height: 6px; }
.glass-reveal { opacity: 1; transform: none; filter: none; }
}
/* INTEGRATED SECTION */
/* v111.1: section padding + header margins tokenized. 72px between
header and content kept off-scale — deliberate breathing room. */
.section-integrated {
background: var(--bg);
padding: var(--space-40) var(--space-12);
position: relative;
}
.section-integrated-inner {
max-width: 1440px;
margin: 0 auto;
}
.section-integrated-header {
text-align: left;
margin-bottom: 72px; /* off-scale 72 retained */
max-width: 640px;
}
.section-integrated-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-tertiary);
margin-bottom: var(--space-5);
}
.section-integrated-headline {
font-family: var(--font-sans);
font-size: clamp(30px, 3.5vw, 50px);
font-weight: 400;
letter-spacing: -0.03em;
color: var(--text-primary);
line-height: 1.1;
margin: 0 0 var(--space-5);
}
.section-integrated-subtext {
font-family: var(--font-body);
font-size: clamp(16px, 1.2vw, 18px);
color: var(--text-secondary);
line-height: 1.6;
max-width: 520px;
}
/* ── Wix-style horizontal tab strip ── */
/* ── Flex expand accordion — Wix-column style ── */
.usecase-accordion {
display: flex;
height: 680px;
gap: 0;
border-radius: 0;
overflow: hidden;
}
.usecase-panel {
position: relative;
/* Dotted canvas texture */
background-color: var(--canvas);
background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 22px 22px;
border-right: 1px solid rgba(255,255,255,0.07);
border-radius: 0;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
transition: flex 0.9s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
will-change: flex;
}
.usecase-panel:last-child { border-right: none; }
.usecase-panel.expanded {
flex: 7;
cursor: default;
}
.usecase-panel.collapsed {
flex: 1.2;
}
.usecase-panel.collapsed:hover {
flex: 1.5;
}
/* Pillar label — horizontal at top, always visible */
.usecase-panel-pillar {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 9px;
padding: 18px 22px;
z-index: 3;
pointer-events: none;
}
.usecase-pillar-dot {
width: 8px;
height: 8px;
flex-shrink: 0;
background: rgba(255,255,255,0.18);
transition: background 0.35s ease;
}
.usecase-panel.expanded .usecase-pillar-dot { background: var(--accent); }
.usecase-pillar-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.32);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.35s ease;
writing-mode: horizontal-tb;
transform: none;
}
.usecase-panel.expanded .usecase-pillar-label { color: rgba(255,255,255,0.88); }
.usecase-panel.collapsed:hover .usecase-pillar-label { color: rgba(255,255,255,0.55); }
/* Collapsed panel pseudo-elements removed */
/* Expanded content area */
.usecase-panel-inner {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 52px; /* space for the horizontal pillar label above */
opacity: 0;
filter: blur(8px);
transition: opacity 0.6s ease 0s, filter 0.6s ease 0s;
will-change: opacity, filter;
overflow: hidden;
}
.usecase-panel.expanded .usecase-panel-inner {
opacity: 1;
filter: blur(0px);
transition: opacity 0.5s ease 0.35s, filter 0.5s ease 0.35s;
}
.usecase-animation {
flex: 1;
background: #34322e;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-bottom: none;
}
.usecase-content {
padding: 28px 36px 32px;
flex-shrink: 0;
background: #EEEDEA;
}
.usecase-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
color: #000000;
margin-bottom: 10px;
letter-spacing: -0.02em;
white-space: nowrap;
}
.usecase-description {
font-family: var(--font-body);
font-size: 15px;
color: rgba(0, 0, 0, 0.5);
line-height: 1.55;
max-width: 520px;
}
/* Panel indicator dots */
.usecase-nav {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 28px;
}
.usecase-nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: background 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.usecase-nav-dot.active {
background: var(--text-primary);
transform: scale(1.25);
}
/* ── PROGRESS BAR — auto-advance indicator ── */
.usecase-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--accent, #f97316);
width: 0%;
opacity: 0;
border-radius: 0 1px 0 0;
z-index: 5;
}
.usecase-panel.expanded .usecase-progress-bar.running {
opacity: 1;
animation: usecaseProgressFill 8s linear forwards;
}
@keyframes usecaseProgressFill {
from { width: 0%; }
to { width: 100%; }
}
/* ---- Inline task-list animation inside panels ---- */
.panel-anim-wrap {
width: 100%;
max-width: 420px;
padding: 20px;
}
/* Override for rich animation panels 0 and 2 */
#panelAnim0,
#panelAnim1,
#panelAnim2 {
max-width: none;
width: 100%;
height: 100%;
padding: 0;
position: absolute;
inset: 0;
}
.panel-task-header {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.4);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.panel-task-header-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.3); }
}
.panel-task-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-task-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 3px;
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255,255,255,0.7);
transform: translateY(12px);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.5s ease,
background 0.4s ease,
border-color 0.4s ease;
}
.panel-task-item.visible {
transform: translateY(0);
opacity: 1;
}
.panel-task-item.active {
background: rgba(249, 115, 22, 0.15);
border-color: rgba(249, 115, 22, 0.3);
color: rgba(255,255,255,0.95);
}
.panel-task-item.done {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.2);
color: rgba(255,255,255,0.5);
}
.panel-task-check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.3);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.panel-task-item.active .panel-task-check {
border-color: var(--accent);
box-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
}
.panel-task-item.done .panel-task-check {
border-color: var(--success);
background: var(--success);
}
.panel-task-check-icon {
width: 10px;
height: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}
.panel-task-item.done .panel-task-check-icon {
opacity: 1;
}
.panel-task-spinner {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: var(--accent);
flex-shrink: 0;
animation: spinTask 0.8s linear infinite;
display: none;
}
.panel-task-item.active .panel-task-spinner {
display: block;
}
.panel-task-item.active .panel-task-check {
display: none;
}
@keyframes spinTask {
to { transform: rotate(360deg); }
}
/* Mobile: stack vertically */
@media (max-width: 768px) {
.section-integrated { padding: var(--space-20) var(--space-6); }
.section-integrated-header { margin-bottom: var(--space-12); }
.usecase-accordion {
flex-direction: column;
height: auto;
}
.usecase-panel.expanded {
flex: none;
height: 520px;
}
.usecase-panel.collapsed {
flex: none;
height: 64px;
}
.usecase-pillar-label {
writing-mode: horizontal-tb;
transform: none;
}
.usecase-nav { display: none; }
}
/* Screen overlay — positions dashboard on the monitor in the photo */
.screen-overlay {
position: absolute;
top: 19.1%;
left: 25.73%;
width: 48.02%;
height: 40.55%;
overflow: hidden;
border-radius: 2px;
}
@media (max-width: 768px) {
.screen-overlay {
display: none;
}
}
/* Gathers Live Automation Dashboard */
.gathers-dash {
display: flex;
height: 100%;
background: #FFFFFF;
text-align: left;
}
.gathers-dash-sidebar {
width: 220px;
background: #FAFAFA;
border-right: 1px solid #E5E5E5;
padding: 24px 0;
flex-shrink: 0;
}
.gathers-dash-main {
flex: 1;
padding: 32px 40px;
display: flex;
flex-direction: column;
}
.dash-header {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 24px;
letter-spacing: -0.02em;
}
.dash-table-head {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
padding-bottom: 12px;
border-bottom: 1px solid #E5E5E5;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dash-row {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
padding: 16px 0;
border-bottom: 1px solid #F0F0F0;
align-items: center;
font-family: var(--font-ui);
font-size: 12px;
color: var(--text-primary);
position: relative;
border-radius: 4px;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
animation: rowFlash 8s infinite;
}
.dash-row.delay-1 { animation-delay: 2s; }
.dash-row.delay-2 { animation-delay: 4s; }
.status-cell {
position: relative;
height: 20px;
display: flex;
align-items: center;
}
.badge-anim {
position: absolute;
left: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 4px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-pending {
background: rgba(245, 158, 11, 0.1);
color: #D97706;
animation: fadeOutUp 8s infinite;
}
.badge-complete {
background: rgba(16, 185, 129, 0.1);
color: #059669;
opacity: 0;
transform: translateY(6px);
animation: fadeInBottom 8s infinite;
}
.dash-row.delay-1 .badge-pending, .dash-row.delay-1 .badge-complete { animation-delay: 2s; }
.dash-row.delay-2 .badge-pending, .dash-row.delay-2 .badge-complete { animation-delay: 4s; }
@keyframes fadeOutUp {
0%, 20% { opacity: 1; transform: translateY(0); }
25%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes fadeInBottom {
0%, 20% { opacity: 0; transform: translateY(6px); }
25%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes rowFlash {
0%, 20% { background: transparent; }
23% { background: rgba(16, 185, 129, 0.04); }
35%, 100% { background: transparent; }
}
/* SECTION 01: THE PROBLEM */
/* v111.1: tokenized — outer 140 → 160 (--space-40). */
.section-01 {
background: var(--bg);
padding: var(--space-40) var(--space-12);
}
.section-container {
max-width: 1440px;
margin: 0 auto;
}
.section-meta {
display: flex;
gap: var(--space-8);
margin-bottom: var(--space-8);
align-items: flex-end;
}
.section-number {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
.section-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-tertiary);
}
.section-headline {
font-family: var(--font-sans);
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
letter-spacing: -0.04em;
color: var(--text-primary);
margin-bottom: var(--space-6);
line-height: 1.1;
max-width: 900px;
}
.section-subtext {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 400;
color: var(--text-secondary);
margin-bottom: var(--space-16); /* v111.1: 60 → 64 */
max-width: 640px;
line-height: 1.6;
}
/* =========================================
THE SINGULARITY COMPONENT
========================================= */
.singularity-landscape {
width: 100%; height: 700px; background: #E8E7E4; position: relative; overflow: hidden; margin-top: 60px;
}
.workflow-view {
position: absolute; inset: 0; z-index: 20;
transform-origin: center center;
will-change: transform, opacity, filter;
opacity: 0; transform: scale(0.9); filter: blur(8px); pointer-events: none;
}
.center-timeline {
position: absolute; left: 50%; top: 0; height: 0%; width: 1px;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 15%, rgba(0,0,0,0.1) 85%, transparent 100%);
transform: translateX(-50%); z-index: 10;
}
.playhead-dot {
position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
background: #ffffff; border: 2px solid var(--accent); border-radius: 50%;
transform: translate(-50%, -50%) scale(0); z-index: 100; opacity: 0;
will-change: transform, opacity, box-shadow;
}
.playhead-dot.ignite {
animation: laserIgnite 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, laserPulse 2s ease-in-out 0.8s infinite;
}
@keyframes laserIgnite {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
40% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; box-shadow: 0 0 24px 8px rgba(249, 115, 22, 0.6), inset 0 0 4px rgba(249, 115, 22, 1); }
100%{ transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 16px 4px rgba(249, 115, 22, 0.4); }
}
@keyframes laserPulse {
0%, 100% { box-shadow: 0 0 16px 4px rgba(249, 115, 22, 0.4); }
50% { box-shadow: 0 0 28px 8px rgba(249, 115, 22, 0.6); }
}
.belt-track-orange {
position: absolute; left: 50%; width: 2px;
background: linear-gradient(to bottom, transparent 0%, var(--accent) 30%, var(--accent) 100%);
transform: translateX(-50%); z-index: 15; height: 0px; top: 0px;
box-shadow: 0 0 12px 1px rgba(249, 115, 22, 0.5);
}
.scroll-belt {
position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column;
padding-top: 250px; padding-bottom: 250px; will-change: transform; z-index: 20;
}
.workflow-row {
position: relative; width: 100%; max-width: 900px; margin: 0 auto;
display: grid; grid-template-columns: 360px 380px; gap: 60px; justify-content: center; align-items: center;
opacity: 0; transform: translateY(80px) scale(0.9); filter: blur(8px); margin-bottom: 0px; pointer-events: none;
transition: all 1.2s var(--ease-monolith);
}
#row0 { z-index: 10; } #row1 { z-index: 20; } #row2 { z-index: 30; }
.workflow-row.active {
opacity: 1; transform: translateY(0) scale(1); filter: blur(0px);
margin-bottom: 60px; margin-top: 20px; pointer-events: auto;
}
.workflow-row.passed {
opacity: 0.35; transform: translateY(15px) scale(0.95); filter: blur(3px); margin-bottom: -30px; margin-top: 0px; pointer-events: none;
}
.logic-pane { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.email-pane { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.email-bubble, .logic-card {
background: #ffffff; border: none; border-radius: 0px; padding: 24px; width: 100%; box-shadow: none; transition: all 0.8s var(--ease-monolith);
}
.workflow-row.active .logic-card { box-shadow: none; }
.workflow-row.active .email-bubble { box-shadow: none; }
.logic-card.resolved { box-shadow: none !important; }
.email-header { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 10px; font-family: var(--font-sans); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.sender-name { color: var(--text-primary); }
.email-body-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.email-body-wrapper.open { grid-template-rows: 1fr; }
.email-body-inner { overflow: hidden; }
.modern-text { font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--text-primary); padding-top: 0; }
.ai-word { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(4px); }
.ai-word.revealed { animation: aiReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes aiReveal { 0% { opacity: 0; filter: blur(4px); transform: translateY(4px); } 100% { opacity: 1; filter: blur(0px); transform: translateY(0px); } }
.logic-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--text-primary); letter-spacing: -0.01em; }
.status-badge { font-family: var(--font-sans); font-weight: 700; font-size: 9px; padding: 4px 8px; background: #F4F4F5; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.4s ease; }
.status-badge.active { background: rgba(249, 115, 22, 0.1); color: var(--accent); }
.status-badge.alert { background: rgba(239, 68, 68, 0.1); color: var(--alert); }
.status-badge.success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.logic-body-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1s var(--ease-monolith); }
.logic-card.expanded .logic-body-wrapper { grid-template-rows: 1fr; }
.logic-body-inner { overflow: hidden; padding-top: 0px; opacity: 0; transition: opacity 0.4s ease, padding 0.4s ease; }
.logic-card.expanded .logic-body-inner { opacity: 1; padding-top: 16px; transition-delay: 0.2s; }
.logic-body-content { margin-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 16px; }
.setting-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.checkbox { width: 14px; height: 14px; background: #E8E7E4; display: flex; align-items: center; justify-content: center; }
.checkbox.checked { background: var(--text-primary); }
.editorial-tag { display: inline-block; font-family: var(--font-sans); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.ai-turbine { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.turbine-spin { animation: spinTurbine 1.5s linear infinite; }
@keyframes spinTurbine { 100% { transform: rotate(360deg); } }
.turbine-grid { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.8s var(--ease-monolith); }
.turbine-grid.resolved { grid-template-rows: 0fr; }
.turbine-grid-inner { overflow: hidden; transition: opacity 0.4s ease, transform 0.6s var(--ease-monolith); }
.turbine-grid.resolved .turbine-grid-inner { opacity: 0; transform: translateY(-8px); }
.result-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s var(--ease-monolith); }
.result-grid.resolved { grid-template-rows: 1fr; }
.result-grid-inner { overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.8s var(--ease-monolith); }
.result-grid.resolved .result-grid-inner { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.mercury-toast { position: absolute; bottom: 120px; right: 48px; background: white; color: var(--text-primary); border: none; padding: 16px 20px; display: flex; align-items: center; gap: 12px; z-index: 60; transform: translateY(20px) scale(0.9); opacity: 0; transition: all 0.6s var(--ease-out-expo); }
.mercury-toast.show { transform: translateY(0) scale(1); opacity: 1; }
.kanban-view { position: absolute; inset: 0; z-index: 30; padding: 24px 28px; display: flex; flex-direction: column; overflow-y: auto; opacity: 1; transform: scale(1); filter: blur(0px); pointer-events: auto; transition: opacity 2.8s cubic-bezier(0.05, 0.95, 0.2, 1), transform 3.2s cubic-bezier(0.05, 0.95, 0.2, 1), filter 2.4s cubic-bezier(0.05, 0.95, 0.2, 1); }
.fake-cursor { position: absolute; top: 0; left: 0; z-index: 200; width: 24px; height: 24px; pointer-events: none; opacity: 1; transform: translate(1500px, 1000px); will-change: transform, opacity; }
.fake-cursor svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
.cursor-ripple { position: absolute; top: 0; left: 0; z-index: 199; width: 40px; height: 40px; border-radius: 50%; background: rgba(249, 115, 22, 0.35); pointer-events: none; opacity: 0; transform: translate(0px, 0px) scale(0); will-change: transform, opacity; }
.workspace-header { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 20px; letter-spacing: -0.01em; }
.kanban-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; flex-grow: 1; align-items: start; }
.kanban-col { background: transparent; border: none; position: relative; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.col-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); font-size: 10px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 2px; }
.col-count { font-family: var(--font-sans); font-size: 9px; color: var(--text-secondary); font-weight: 500; }
.kb-card { background: #ffffff; padding: 12px 14px; border-radius: 0px; display: flex; flex-direction: column; gap: 6px; box-shadow: none; }
.kb-card-top { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 9px; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.01em; }
.kb-card-title { font-size: 11px; font-weight: 600; font-family: var(--font-sans); color: var(--text-primary); letter-spacing: -0.01em; }
.kb-card-amount { font-size: 10px; font-family: var(--font-sans); color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; }
.kanban-live-card { background: white; padding: 12px 14px; border-radius: 0px; display: flex; flex-direction: column; gap: 6px; box-shadow: none; border-left: none; position: relative; width: 100%; z-index: 100; opacity: 1; will-change: transform; cursor: pointer; }
@media (max-width: 768px) {
.section-01 { padding: var(--space-24) var(--space-6); } /* v111.1: 100 → 96 */
.section-headline { font-size: 32px; }
.section-meta { gap: var(--space-5); }
.singularity-landscape { height: 500px; }
.workflow-row { flex-direction: column; gap: 20px; }
}
/* SECTION 02: THE PLATFORM */
.section-02 { background: var(--bg-monolith); padding: var(--space-40) var(--space-12); overflow: visible; } /* v111.1: tokenized */
/* Scroll-driven content grid */
.platform-content-grid {
display: flex; gap: var(--space-20); align-items: flex-start;
position: relative; overflow: visible;
}
.platform-feature-list { flex: 1; display: flex; flex-direction: column; gap: 0; }
.platform-feature-item {
position: relative; padding: calc(40vh - 60px) 0; cursor: pointer;
min-height: 100px; transition: opacity 0.5s ease; opacity: 0; transform: translateX(-30px);
}
.platform-feature-item.pf-revealed {
opacity: 1; transform: translateX(0);
transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.platform-feature-item.pf-revealed:not(.pf-active) { opacity: 0.35; }
.platform-feature-item.pf-revealed:not(.pf-active):hover { opacity: 0.55; }
.platform-feature-item:first-child { margin-top: 120px; padding-top: 0; }
.platform-feature-item:last-child { margin-bottom: calc(50vh - 150px); padding-bottom: 0; padding-top: 140px; }
.platform-feature-title {
font-family: var(--font-sans); font-size: 28px; font-weight: 400;
color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1.3;
}
.platform-feature-item.pf-active .platform-feature-title { color: var(--text-primary); }
.platform-feature-desc {
font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px;
color: var(--text-secondary); line-height: 1.7; max-width: 420px;
}
/* Sticky illustration panel */
.platform-illustration-panel {
position: -webkit-sticky; position: sticky;
top: calc(50vh - 290px); width: 564px; height: 580px;
flex-shrink: 0; align-self: flex-start; z-index: 5;
}
.platform-illustration-container { position: relative; width: 100%; height: 100%; }
.platform-illustration {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
opacity: 0; transform: translateY(24px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none; will-change: opacity, transform;
}
.platform-illustration.pi-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.platform-illustration.pi-exit-up { opacity: 0; transform: translateY(-24px); }
.platform-illustration.pi-exit-down { opacity: 0; transform: translateY(24px); }
/* Step indicator — hidden */
.platform-step-dots { display: none; }
.platform-illustration-static {
background: linear-gradient(180deg, #E8E7E4 0%, #E2E1DE 30%, #DEDDD9 60%, #D8D7D3 100%);
border-radius: 0; width: 100%; height: 100%; overflow: hidden;
display: flex; flex-direction: column;
}
.monolith-screen { width: calc(100% - 48px); height: calc(100% - 80px); margin: 24px 24px 0; background: white; border-radius: 2px 2px 0 0; display: flex; flex-direction: column; position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.monolith-label { display: none; }
.pv-titlebar { background: #FAFAFA; border-bottom: 1px solid #E5E5E5; padding: 0 14px; height: 34px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.pv-dots { display: flex; gap: 6px; }
.pv-dots span { width: 9px; height: 9px; border-radius: 50%; }
.pv-dots span:nth-child(1) { background: #FF5F57; }
.pv-dots span:nth-child(2) { background: #FEBC2E; }
.pv-dots span:nth-child(3) { background: #28C840; }
.pv-tab-bar { display: flex; gap: 0; align-items: center; height: 100%; }
.pv-tab { font-family: 'Inter', sans-serif; font-size: 10px; color: #999; font-weight: 500; padding: 0 12px; height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.pv-tab.active { font-weight: 600; color: var(--text-primary); border-bottom-color: var(--accent); }
.pv-badge { display: flex; align-items: center; gap: 4px; background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.2); padding: 3px 8px; border-radius: 4px; }
.pv-badge-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.pv-badge-text { font-family: var(--font-mono); font-size: 8px; font-weight: 600; color: var(--accent); }
.pv-body { flex: 1; background: #FFFFFF; overflow: hidden; position: relative; }
.pv-sidebar { width: 200px; background: #FAFAFA; border-right: 1px solid #E5E5E5; padding: 16px 0; flex-shrink: 0; overflow: hidden; }
.pv-sidebar-item { padding: 7px 16px; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 11px; color: #888; cursor: default; }
.pv-sidebar-item.active { background: rgba(249, 115, 22, 0.06); color: var(--text-primary); }
.pv-sidebar-dot { width: 6px; height: 6px; border-radius: 50%; }
.pv-metric { background: #FAFAFA; border: 1px solid #E5E5E5; border-radius: 6px; padding: 14px 16px; }
.pv-metric-label { font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.pv-metric-value { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.5px; }
.pv-table-header { display: grid; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #E5E5E5; }
.pv-table-row { display: grid; padding: 9px 16px; border-bottom: 1px solid #F0F0F0; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-secondary); align-items: center; }
.pv-table-row:hover { background: #FAFAFA; }
.pv-pill { display: inline-block; padding: 2px 7px; border-radius: 3px; font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-pill-paid { background: rgba(16,185,129,0.1); color: #059669; }
.pv-pill-pending { background: rgba(249,115,22,0.1); color: #EA580C; }
.pv-pill-overdue { background: rgba(239,68,68,0.1); color: #DC2626; }
.pv-pill-draft { background: rgba(0,0,0,0.05); color: #999; }
@media (max-width: 1000px) {
.platform-content-grid { flex-direction: column; gap: var(--space-12); }
.platform-illustration-panel { position: relative; top: 0; width: 100%; height: auto; min-height: 480px; }
.platform-feature-item { padding: var(--space-12) 0; }
.platform-feature-item:first-child { margin-top: 0; padding-top: 0; }
.platform-feature-item:last-child { margin-bottom: 0; }
.platform-feature-item.pf-revealed:not(.pf-active) { opacity: 1; }
.platform-step-dots { display: none; }
}
@media (max-width: 768px) {
.section-02 { padding: var(--space-24) var(--space-6); }
}
/* PROBLEM STATEMENT SECTION — v92 (revised): kept dark after all.
Pairs with the scroll-narrative beat immediately after it to form
one cohesive "here's the pain → here's the fix" chapter. The
transition to light happens AFTER the narrative, at the pillars. */
.section-problem { background: #000000; color: white; padding: var(--space-40) var(--space-12); } /* v111.1: tokenized */
.problem-container { max-width: 1440px; margin: 0 auto; }
/* Headline size 64px, weight 400 — editorial, not marketing. */
.problem-headline { font-family: var(--font-sans); font-size: clamp(40px, 5vw, 64px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; color: white; max-width: 900px; margin-bottom: 64px; }
.problem-headline em { font-style: italic; color: rgba(255, 255, 255, 0.5); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.problem-item {
opacity: 0;
transform: translateY(30px);
filter: blur(4px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.problem-item.problem-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.problem-item-number { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-bottom: 16px; letter-spacing: 0.05em; }
.problem-item-title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: white; margin-bottom: 10px; }
.problem-item-desc { font-family: var(--font-ui); font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.7; }
.problem-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); margin-bottom: 32px; }
/* Product monitor Z-recede as it scrolls away */
.product-monitor {
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.6s ease,
filter 0.6s ease;
}
.product-monitor.monitor-receding {
transform: scale(0.95) translateZ(-60px);
opacity: 0.7;
filter: blur(2px);
}
@media (max-width: 768px) {
.section-problem { padding: var(--space-24) var(--space-6); }
.problem-headline { font-size: 32px; }
.problem-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* ════════════ DIAGNOSTIC SECTION (dark register, replaces problem) ════════════
Reuses .section-problem base classes so the existing monitor-recede
and .problem-item fade-in observers still fire. Layered overrides
here style it as a quantified findings block, not a generic "3 pains" grid. */
/* v111.1: diagnostic block — eyebrow + headline margins tokenized.
72px below headline retained off-scale as deliberate breathing room. */
.section-diagnostic .diagnostic-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: var(--space-8); /* 28 → 32 */
display: block;
}
.section-diagnostic .diagnostic-headline {
font-family: var(--font-sans);
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.1;
color: white;
max-width: 900px;
margin-bottom: 72px; /* off-scale 72 retained */
}
.section-diagnostic .diagnostic-headline em {
font-style: italic;
color: rgba(255, 255, 255, 0.5);
}
.section-diagnostic .diagnostic-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.section-diagnostic .diagnostic-finding {
display: grid;
grid-template-columns: 80px 1fr 280px;
gap: var(--space-12);
padding: var(--space-12) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
align-items: start;
/* Override .problem-item's hidden initial state — v94 does not depend
on the productMonitor observer (which was absent in v93 and earlier),
so findings must be visible by default. */
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.section-diagnostic .diagnostic-index {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.08em;
padding-top: 8px;
}
.section-diagnostic .diagnostic-body {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
}
.section-diagnostic .diagnostic-body strong {
font-weight: 600;
color: white;
}
.section-diagnostic .diagnostic-body .diagnostic-accent {
color: var(--accent);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.section-diagnostic .diagnostic-source {
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.4);
padding-top: 10px;
letter-spacing: 0.01em;
}
.section-diagnostic .diagnostic-source-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 6px;
}
@media (max-width: 900px) {
.section-diagnostic .diagnostic-finding {
grid-template-columns: 1fr;
gap: var(--space-5);
padding: var(--space-8) 0; /* 36 → 32 */
}
.section-diagnostic .diagnostic-body { font-size: 18px; }
.section-diagnostic .diagnostic-headline { font-size: 30px; margin-bottom: var(--space-12); }
}
/* ════════════ ASK GATHERS — chat showcase (v99) ════════════
v99 reorients the showcase: a Gemini-painted landscape sits
as the BACKGROUND of an outer canvas, and a frosty WHITE
glass panel (the chat interface) floats on top with an
asymmetric inset so the painting peeks out at the lower-
left corner. All interior chrome flips from dark theme to
light: dark text on translucent white, soft pearl-gray
sidebar, soft-charcoal source thumbs. The contrast between
the dark section ground and the white glass card is the
"break from the dark theme" Didier called out. */
.section-pro-chat {
/* v99.13: single dark — drops the gradient and uses
v88's #000000 so the whole dark top of the page reads
as one continuous ground rather than darkening between
sections.
v111.1: padding tokenized; bottom 140 → 128 (--space-32). */
background: #000000;
color: white;
padding: var(--space-16) var(--space-12) var(--space-32);
position: relative;
overflow: hidden;
}
.pro-chat-container {
max-width: 1440px;
margin: 0 auto;
}
.pro-chat-eyebrow {
display: block;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.45);
margin-bottom: var(--space-8);
}
.pro-chat-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-12);
margin-bottom: var(--space-16);
}
.pro-chat-headline-block { max-width: 680px; }
.pro-chat-headline {
font-family: var(--font-sans);
font-size: clamp(32px, 4vw, 56px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: #fff;
margin: 0 0 18px;
}
.pro-chat-subhead {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 400;
line-height: 1.55;
color: rgba(255, 255, 255, 0.6);
max-width: 560px;
margin: 0;
}
.pro-chat-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 12px 22px;
background: #fff;
color: #000;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: transform 0.2s ease, opacity 0.2s ease;
margin-top: 6px;
}
.pro-chat-cta:hover { transform: translateY(-1px); opacity: 0.92; }
/* v100.2: headline now sits centered BELOW the card, with the
caption underneath it. Reads like a plaque + line of body
copy beneath a lead photograph. */
.pro-chat-headline-below {
display: block;
font-family: var(--font-sans);
font-size: clamp(32px, 4vw, 56px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: #fff;
text-align: center;
margin: 56px auto 0;
max-width: 900px;
}
.pro-chat-caption {
display: block;
max-width: 720px;
margin: 18px auto 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.55);
text-align: center;
}
/* ── Outer canvas: holds the painting + the glass card ──
v99.2: smaller, left-aligned frame. Canvas is 1100px wide
with a fixed 580px height so the dashboard card inside can
be taller than the canvas and "peek" up from the bottom
edge with overflow clipping. Aligned to the left of the
pro-chat-container (no auto margin) so the composition is
biased toward the leading edge of the page. */
.pro-chat-canvas {
position: relative;
/* v100 polish: a real 3D context so the painting + frame +
card composite as one stack instead of being rasterised
flat per child. Kills the 1px subpixel jitter on heavily
transformed children during transitions. */
transform-style: preserve-3d;
backface-visibility: hidden;
/* v99.7: sharper corners — dropped from 24px to 6px so the
canvas reads as a crisper frame, more architectural than
soft. Matches the rest of the page's tighter radius
vocabulary. */
border-radius: 6px;
overflow: hidden;
background-image: url('/assets/images/Gemini_Generated_Image_7wd6np7wd6np7wd6.jpg');
background-size: cover;
background-position: 30% 55%;
/* v99.8: whispered frame matching the v97 ls-card recipe —
a 6%-white hairline border, a crisp 1px shadow that
makes the edge "click" against the black ground, and a
2.5%-white inset highlight on the top edge so the
container reads as a real physical surface, not a
flat-cut image. The atmospheric drop shadow stays. */
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 60px 120px -20px rgba(0, 0, 0, 0.75),
0 30px 60px -10px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.025);
/* v102.16: expanded to match the page's 1440px content
grid + 1.7:1 aspect to give the new 3-panel product UI
room to breathe like Quartr Pro's reference. */
max-width: 1440px;
width: 100%;
height: 820px;
margin: 0 auto;
padding: 0;
isolation: isolate;
}
/* Soft directional gradient over the painting — keeps the
foreground (lower-left) punchy and quiets the area under
the dashboard card. */
.pro-chat-canvas::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
linear-gradient(135deg,
rgba(0, 0, 0, 0.0) 0%,
rgba(0, 0, 0, 0.04) 35%,
rgba(0, 0, 0, 0.16) 65%,
rgba(0, 0, 0, 0.30) 100%);
}
/* ── Frosted glass FRAME — the halo around the dashboard ──
v99.3: an outer frosted glass surface that wraps the
dashboard with ~18px breathing room on top/sides. Lighter
and more translucent than the card, so the painting reads
through it as a soft wash before the brighter card sits on
top. This is the "frosty glass around the dashboard" the
Quartr Pro reference shows. */
.pro-chat-frame {
position: absolute;
z-index: 1;
/* v102.16: now centered inside the canvas with equal
36px margin on all four sides (no more peek-from-below
clip). The Quartr Pro reference frames the product UI
cleanly inside the painting backdrop. */
top: 36px;
left: 36px;
right: 36px;
bottom: 36px;
width: auto;
height: auto;
border-radius: 16px;
/* Thinner frosted glass — opacity dropped 0.26 → 0.14 and
blur dialed back 32px → 18px so more painting reads
through. Reads as glass, not as a milky pane. */
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.36);
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.38),
0 12px 32px -8px rgba(0, 0, 0, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
padding: 14px;
overflow: hidden;
isolation: isolate;
}
/* ── The frosty glass dashboard card itself ────────────
Sits inside the frame as relative-positioned content. The
card is BRIGHTER and slightly more opaque than the frame
so it reads as the focal element with the frame as the
halo around it. Card extends past the frame bottom so the
composition still has the "peek up from below" the brief
calls for. */
.pro-chat-card {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
/* v102.16: card is now the actual product UI surface —
nearly opaque white with a hairline of translucency, so
the chrome reads as a real product window rather than a
glass card. */
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(255, 255, 255, 0.70);
box-shadow:
0 12px 32px -10px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* Soft warm/cool wash at the top edge — gives the glass that
"lit-from-above" sense the reference uses. Subtle, since the
painting already supplies most of the colour. */
.pro-chat-glow {
position: absolute;
inset: 0 0 auto 0;
height: 220px;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 60% 80% at 30% 0%, rgba(150, 180, 230, 0.30) 0%, transparent 60%),
radial-gradient(ellipse 55% 80% at 80% 0%, rgba(255, 196, 150, 0.22) 0%, transparent 62%);
mix-blend-mode: screen;
opacity: 0.85;
}
.pro-chat-body {
position: relative;
z-index: 1;
display: grid;
/* v102.16: 3-panel — left nav rail (200), middle activity
feed (320), right chat pane (1fr). Matches Quartr Pro's
geometry and gives the product UI room to breathe. */
grid-template-columns: 200px 320px 1fr;
height: 100%;
min-height: 0;
overflow: hidden;
}
/* ════════════ LEFT NAV RAIL ════════════ */
.pcn-rail {
display: flex;
flex-direction: column;
gap: 4px;
padding: 18px 12px 14px;
background: rgba(248, 248, 246, 0.96);
border-right: 1px solid rgba(20, 25, 40, 0.06);
font-family: var(--font-sans);
}
.pcn-brand {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px 14px;
}
.pcn-brand-mark {
width: 22px; height: 22px;
border-radius: 5px;
background: #000000;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.pcn-brand-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(20, 25, 40, 0.92);
}
.pcn-quick {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid rgba(20, 25, 40, 0.10);
background: rgba(255, 255, 255, 0.65);
border-radius: 7px;
color: rgba(20, 25, 40, 0.55);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
margin-bottom: 12px;
text-align: left;
width: 100%;
}
.pcn-quick svg { width: 13px; height: 13px; flex-shrink: 0; }
.pcn-quick kbd {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(20, 25, 40, 0.35);
font-weight: 500;
background: transparent;
}
.pcn-links {
display: flex;
flex-direction: column;
gap: 1px;
}
.pcn-link {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 9px;
border-radius: 6px;
color: rgba(20, 25, 40, 0.66);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.pcn-link svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
.pcn-link:hover { background: rgba(20, 25, 40, 0.04); color: rgba(20, 25, 40, 0.88); }
.pcn-link.is-active {
background: rgba(20, 25, 40, 0.06);
color: rgba(20, 25, 40, 0.96);
font-weight: 600;
}
.pcn-link.is-active svg { opacity: 1; }
.pcn-badge {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: rgba(20, 25, 40, 0.55);
background: rgba(20, 25, 40, 0.08);
padding: 1px 6px;
border-radius: 999px;
}
/* Folder-style "Workspaces" section with sub-items */
.pcn-section {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 1px;
}
.pcn-section-head {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 9px;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(20, 25, 40, 0.42);
text-align: left;
}
.pcn-section-head svg {
width: 8px; height: 5px;
color: rgba(20, 25, 40, 0.42);
transform: rotate(0deg);
}
.pcn-section-list {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 8px;
}
.pcn-workspace {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 9px;
border-radius: 6px;
color: rgba(20, 25, 40, 0.66);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease;
}
.pcn-workspace:hover { background: rgba(20, 25, 40, 0.04); }
.pcn-workspace-mark {
width: 18px; height: 18px;
border-radius: 4px;
background: rgba(20, 25, 40, 0.08);
color: rgba(20, 25, 40, 0.62);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9.5px;
font-weight: 700;
flex-shrink: 0;
}
.pcn-footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 14px;
border-top: 1px solid rgba(20, 25, 40, 0.06);
}
.pcn-link-sm { font-size: 12px; padding: 6px 9px; color: rgba(20, 25, 40, 0.50); }
.pcn-profile {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 9px;
}
.pcn-profile-avatar {
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(78, 140, 255, 0.18);
color: rgba(46, 92, 184, 1);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11.5px;
font-weight: 600;
}
.pcn-profile-name {
font-size: 12.5px;
font-weight: 500;
color: rgba(20, 25, 40, 0.78);
}
/* ════════════ MIDDLE ACTIVITY FEED ════════════ */
.pcf-feed {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.92);
border-right: 1px solid rgba(20, 25, 40, 0.06);
overflow: hidden;
}
.pcf-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid rgba(20, 25, 40, 0.06);
}
.pcf-title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: rgba(20, 25, 40, 0.92);
margin: 0;
}
.pcf-filter {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 0;
font-family: var(--font-sans);
font-size: 12px;
color: rgba(20, 25, 40, 0.55);
cursor: pointer;
padding: 0;
}
.pcf-filter svg { width: 9px; height: 5px; }
.pcf-section-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
color: rgba(20, 25, 40, 0.42);
padding: 14px 18px 6px;
}
.pcf-list {
list-style: none;
margin: 0;
padding: 0 8px;
}
.pcf-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.pcf-item:hover { background: rgba(20, 25, 40, 0.03); }
.pcf-item.is-active { background: rgba(20, 25, 40, 0.05); }
.pcf-logo {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
}
/* v102.17: drop the rainbow palette. All logo chips are now
a uniform dark squircle, like Notion database icons. The
old colored variants are kept as no-ops so the markup
doesn't have to change. */
.pcf-logo-amber,
.pcf-logo-blue,
.pcf-logo-grey,
.pcf-logo-violet,
.pcf-logo-emerald,
.pcf-logo-rose {
background: rgba(20, 25, 40, 0.86);
color: #fff;
}
.pcf-body { flex: 1; min-width: 0; }
.pcf-row1 {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 12.5px;
color: rgba(20, 25, 40, 0.92);
margin-bottom: 3px;
}
.pcf-row1 strong {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcf-status {
margin-left: auto;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* v102.17: status pills now monochrome. Quartr's reference
uses no status pills at all — just text. We keep the pill
shape for at-a-glance scan but strip all colour. */
.pcf-status-cleared,
.pcf-status-risk,
.pcf-status-pending,
.pcf-status-pattern {
background: rgba(20, 25, 40, 0.05);
color: rgba(20, 25, 40, 0.55);
}
.pcf-row2 {
font-family: var(--font-sans);
font-size: 11.5px;
color: rgba(20, 25, 40, 0.50);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ════════════ RIGHT CHAT PANE ════════════ */
.pcp-pane {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.96);
overflow: hidden;
min-width: 0;
}
/* v107: scenes track + crossfade for the Ask Gathers carousel.
Three .pro-chat-scene articles stack absolutely; only the
.is-active one is at opacity 1. JS rotates between them on
a 6s beat with a 0.7s crossfade. */
.pcp-scenes {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
}
.pro-chat-scene {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.pro-chat-scene.is-active {
opacity: 1;
pointer-events: auto;
}
.pcp-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px 12px;
border-bottom: 1px solid rgba(20, 25, 40, 0.06);
}
.pcp-head-left { display: flex; align-items: center; gap: 8px; }
.pcp-context-icon { display: inline-flex; color: rgba(20, 25, 40, 0.42); }
.pcp-context-icon svg { width: 14px; height: 14px; }
.pcp-title {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
color: rgba(20, 25, 40, 0.92);
margin: 0;
}
.pcp-context-meta {
font-family: var(--font-sans);
font-size: 11.5px;
color: rgba(20, 25, 40, 0.50);
}
.pcp-scroll {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.pcp-question { display: flex; justify-content: flex-end; }
.pcp-question-bubble {
font-family: var(--font-sans);
font-size: 13px;
color: rgba(20, 25, 40, 0.62);
background: rgba(20, 25, 40, 0.04);
border-radius: 10px;
padding: 10px 14px;
max-width: 80%;
line-height: 1.45;
}
.pcp-answer {
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.6;
color: rgba(20, 25, 40, 0.85);
}
.pcp-line { margin: 0 0 10px; }
.pcp-line:last-child { margin-bottom: 0; }
.pcp-actions {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.pcp-action {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: rgba(20, 25, 40, 0.78);
}
/* v102.17: drop the green. Checks become subtle dark dots,
projection box becomes a quiet line of text — same as
Quartr's monochrome restraint. */
.pcp-check {
color: rgba(20, 25, 40, 0.40);
font-weight: 600;
font-size: 12px;
margin-top: 2px;
}
.pcp-projection {
margin-top: 16px;
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 0;
background: transparent;
border: 0;
align-self: flex-start;
}
.pcp-projection-label {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(20, 25, 40, 0.42);
}
.pcp-projection-value {
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
color: rgba(20, 25, 40, 0.92);
}
.pcp-sources {
margin-top: 6px;
padding-top: 18px;
border-top: 1px solid rgba(20, 25, 40, 0.06);
}
.pcp-sources-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(20, 25, 40, 0.55);
margin-bottom: 12px;
}
.pcp-sources-label svg { width: 11px; height: 11px; }
.pcp-sources-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.pcp-source {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(20, 25, 40, 0.08);
border-radius: 8px;
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pcp-source-tag {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
color: rgba(20, 25, 40, 0.45);
}
.pcp-source-title {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
color: rgba(20, 25, 40, 0.82);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcp-source-lines {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 6px;
}
.pcp-source-lines span {
height: 3px;
background: rgba(20, 25, 40, 0.10);
border-radius: 2px;
width: 100%;
}
.pcp-source-lines .is-mid { width: 78%; }
.pcp-source-lines .is-short { width: 56%; }
/* v102.17: input pill restructured — input takes the left,
icons row on the right with a vertical divider before the
send button. Matches Quartr's compose pattern. */
.pcp-input {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 24px 18px;
padding: 6px 6px 6px 16px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(20, 25, 40, 0.10);
border-radius: 12px;
}
.pcp-input input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: rgba(20, 25, 40, 0.85);
font-family: var(--font-sans);
font-size: 13px;
padding: 10px 0;
}
.pcp-input input::placeholder { color: rgba(20, 25, 40, 0.36); }
.pcp-input-actions {
display: inline-flex;
align-items: center;
gap: 2px;
}
.pcp-input-icon {
background: transparent;
border: 0;
color: rgba(20, 25, 40, 0.42);
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.pcp-input-icon:hover {
background: rgba(20, 25, 40, 0.05);
color: rgba(20, 25, 40, 0.78);
}
.pcp-input-icon svg { width: 13px; height: 13px; }
.pcp-input-divider {
width: 1px;
height: 18px;
background: rgba(20, 25, 40, 0.12);
margin: 0 4px;
}
.pcp-send {
width: 28px;
height: 28px;
border-radius: 7px;
border: 0;
background: rgba(20, 25, 40, 0.10);
color: rgba(20, 25, 40, 0.45);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.pcp-send:hover {
background: rgba(20, 25, 40, 0.85);
color: #fff;
}
.pcp-send svg { width: 12px; height: 12px; }
/* ── Sidebar (light) ────────────────────────────────── */
.pro-chat-sidebar {
padding: 18px 14px 22px;
border-right: 1px solid rgba(20, 25, 40, 0.06);
background: rgba(255, 255, 255, 0.32);
display: flex;
flex-direction: column;
gap: 2px;
}
.pro-chat-newchat {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border: 1px solid rgba(20, 25, 40, 0.10);
border-radius: 10px;
color: rgba(20, 25, 40, 0.85);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
margin-bottom: 14px;
text-align: left;
width: 100%;
transition: background 0.15s ease;
}
.pro-chat-newchat:hover { background: rgba(255, 255, 255, 0.78); }
.pro-chat-newchat .nc-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(20, 25, 40, 0.08);
color: rgba(20, 25, 40, 0.7);
font-size: 12px;
line-height: 1;
flex-shrink: 0;
}
.pro-chat-newchat .nc-arrow {
margin-left: auto;
color: rgba(20, 25, 40, 0.32);
font-size: 16px;
line-height: 1;
}
.pro-chat-day {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
color: rgba(20, 25, 40, 0.42);
padding: 16px 14px 6px;
}
.pro-chat-history-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
background: transparent;
border: 0;
color: rgba(20, 25, 40, 0.66);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
text-align: left;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.pro-chat-history-item:hover {
background: rgba(255, 255, 255, 0.45);
color: rgba(20, 25, 40, 0.92);
}
.pro-chat-history-item.is-active {
background: rgba(255, 255, 255, 0.78);
color: rgba(20, 25, 40, 0.96);
box-shadow: 0 1px 2px rgba(20, 30, 50, 0.06);
}
.pro-chat-history-item .hi-text {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.pro-chat-history-item .hi-arrow {
color: rgba(20, 25, 40, 0.28);
font-size: 16px;
line-height: 1;
}
/* ── Main pane (light) ──────────────────────────────── */
.pro-chat-main {
display: flex;
flex-direction: column;
padding: 30px 36px 22px;
min-height: 540px;
}
.pro-chat-scene-track {
flex: 1 1 auto;
position: relative;
min-height: 320px;
}
.pro-chat-scene {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
/* v99.9: tightened crossfade — outgoing scene fades quickly
(240ms ease-out) and visibility flips to hidden once it
reaches opacity 0, so no inactive scene can ever bleed
through the active one. The previous 0.9s ease-out left
a long overlap window where Scene B's prose was visible
behind Scene C's bars. */
transition: opacity 0.24s ease-out, visibility 0s linear 0.24s;
}
.pro-chat-scene.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.24s ease-out, visibility 0s linear 0s;
}
/* Scene A: table answer (light) */
.pro-chat-answer-table { display: flex; flex-direction: column; }
.pro-chat-answer-table .row {
display: grid;
grid-template-columns: 2.4fr 1fr 0.8fr;
gap: 24px;
padding: 14px 4px;
font-family: var(--font-sans);
font-size: 14px;
color: rgba(20, 25, 40, 0.85);
border-bottom: 1px solid rgba(20, 25, 40, 0.07);
}
.pro-chat-answer-table .row.is-head {
color: rgba(20, 25, 40, 0.46);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 500;
padding: 9px 4px;
border-bottom: 1px solid rgba(20, 25, 40, 0.10);
}
.pro-chat-answer-table .row.is-highlight {
color: rgba(20, 25, 40, 0.96);
}
.pro-chat-answer-table .row.is-highlight .clear-val {
color: #1f8a5a;
font-weight: 600;
}
/* Scene B: prose + bullets (light) */
.pro-chat-answer-prose {
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.65;
color: rgba(20, 25, 40, 0.84);
max-width: 600px;
}
.pro-chat-answer-prose p { margin: 0 0 12px; }
.pro-chat-answer-prose strong { color: rgba(20, 25, 40, 0.98); font-weight: 600; }
.pro-chat-answer-prose ul {
list-style: none;
padding: 0;
margin: 14px 0 0;
}
.pro-chat-answer-prose ul li {
position: relative;
padding: 6px 0 6px 22px;
font-size: 14px;
color: rgba(20, 25, 40, 0.78);
}
.pro-chat-answer-prose ul li::before {
content: '';
position: absolute;
left: 4px;
top: 14px;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(20, 25, 40, 0.40);
}
/* Scene C: mini bar chart (light) */
.pro-chat-answer-bars {
display: flex;
align-items: flex-end;
gap: 18px;
height: 220px;
padding: 0 4px;
border-bottom: 1px solid rgba(20, 25, 40, 0.07);
}
.pro-chat-bar-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
}
.pro-chat-bar-fill-wrap {
flex: 1 1 auto;
width: 36px;
display: flex;
align-items: flex-end;
border-bottom: 1px solid rgba(20, 25, 40, 0.10);
}
.pro-chat-bar-fill {
width: 100%;
background: linear-gradient(180deg,
rgba(35, 70, 140, 0.95) 0%,
rgba(78, 140, 255, 0.55) 100%);
border-radius: 3px 3px 0 0;
height: 0;
/* v99.10: no transition by default, so when Scene C leaves
the active state the bars snap to 0 immediately rather
than animating down for 900ms after the scene's already
faded out. The animated rise-from-floor still happens
via the .is-active rule below. */
transition: none;
}
.pro-chat-scene.is-active .pro-chat-bar-fill {
height: var(--bar-h, 50%);
transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pro-chat-bar-label {
font-family: var(--font-mono);
font-size: 10px;
color: rgba(20, 25, 40, 0.46);
letter-spacing: 0.10em;
text-transform: uppercase;
}
.pro-chat-bar-value {
font-family: var(--font-sans);
font-size: 12.5px;
color: rgba(20, 25, 40, 0.88);
font-weight: 500;
}
/* ── Sources row (light) ─────────────────────────── */
.pro-chat-sources {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(20, 25, 40, 0.07);
}
.pro-chat-sources-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: rgba(20, 25, 40, 0.62);
margin-bottom: 12px;
padding: 6px 11px;
background: rgba(20, 25, 40, 0.06);
border-radius: 7px;
}
.pro-chat-sources-label svg {
width: 12px; height: 12px;
stroke: currentColor;
}
.pro-chat-source-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.pro-chat-source-thumb {
position: relative;
aspect-ratio: 16 / 10;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(20, 25, 40, 0.08);
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
}
.pro-chat-source-thumb .thumb-tag {
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(20, 25, 40, 0.50);
letter-spacing: 0.06em;
}
.pro-chat-source-thumb .thumb-title {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
color: rgba(20, 25, 40, 0.78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pro-chat-source-thumb .thumb-lines {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
}
.pro-chat-source-thumb .thumb-line {
height: 3px;
background: rgba(20, 25, 40, 0.12);
border-radius: 1.5px;
}
.pro-chat-source-thumb .thumb-line.is-short { width: 56%; }
.pro-chat-source-thumb .thumb-line.is-mid { width: 78%; }
.pro-chat-source-thumb .thumb-line.is-full { width: 100%; }
/* ── Input (light) ───────────────────────────────── */
.pro-chat-input {
margin-top: 22px;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 18px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(20, 25, 40, 0.08);
border-radius: 999px;
}
.pro-chat-input input {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
color: rgba(20, 25, 40, 0.88);
font-family: var(--font-sans);
font-size: 14px;
padding: 10px 0;
}
.pro-chat-input input::placeholder {
color: rgba(20, 25, 40, 0.38);
}
.pro-chat-send {
width: 32px;
height: 32px;
border-radius: 50%;
border: 0;
background: rgba(20, 25, 40, 0.85);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pro-chat-send svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
.section-pro-chat { padding: var(--space-16) var(--space-6) var(--space-24); } /* v111.1: 100 → 96 */
.pro-chat-header { flex-direction: column; gap: 24px; margin-bottom: 40px; }
.pro-chat-canvas {
height: auto;
min-height: 460px;
max-width: 100%;
}
.pro-chat-card {
position: relative;
top: 0; left: 0;
width: 92%;
height: auto;
margin: 24px auto 0 16px;
border-radius: 12px 12px 0 0;
}
.pro-chat-body { grid-template-columns: 1fr; min-height: auto; }
.pro-chat-sidebar { display: none; }
.pro-chat-main { padding: 24px 20px 18px; min-height: auto; }
.pro-chat-source-row { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════ LEDGER SECTION — "What we do" (dark register) ════════════
Sits inside dark-zone right after hero-bridge. Editorial slab:
manifesto statement + visible artifact (invoice journey as the Ledger
records it). */
.section-ledger {
/* v99.17: actual fix — the CSS rule was still #000000 even
though I'd flipped the dark-zone wrapper to #000000. The
inline padding override didn't include background, so this
rule was winning and rendering the manifesto at rgb(23,23,23).
Now matches every other dark section. */
background: #000000;
color: white;
padding: var(--space-40) var(--space-12); /* v111.1: 140 → 160 top */
position: relative;
overflow: hidden;
}
.ledger-container {
max-width: 1440px;
margin: 0 auto;
}
.ledger-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
display: block;
margin-bottom: 28px;
}
/* Editorial flow: manifesto takes the full measure as a big hero
statement; the transition paragraph sits *below* it, pushed to the
right so it reads as a follow-on beat rather than a second column. */
.ledger-copy {
margin-bottom: var(--space-24);
}
.ledger-manifesto {
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 40px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.2;
color: white;
max-width: 1100px;
margin: 0 0 56px;
}
.ledger-manifesto em {
font-style: normal;
color: rgba(255, 255, 255, 0.38);
display: inline;
}
.ledger-transition {
font-family: var(--font-ui);
font-size: 18px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.65);
max-width: 380px;
margin: 0 0 0 auto;
}
.ledger-transition strong {
color: white;
font-weight: 600;
}
/* "The Map" — clickable link wrapping , leads to /the-map/.
Inherits the white headline color and serif emphasis; adds a
subtle hover underline so the affordance is felt without
breaking the editorial flow of the slab. */
.ledger-map-link {
color: inherit;
text-decoration: none;
/* Visible underline by default so the link affordance is obvious;
brightens on hover/focus. */
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger-map-link:hover,
.ledger-map-link:focus {
color: inherit;
text-decoration: none;
border-bottom-color: rgba(255, 255, 255, 0.85);
}
/* Soft blueish backlight behind important slabs — pulls the eye
toward the eyebrow and the "We call it The Map" line so they
don't get skimmed. Uses an absolutely-positioned ::before
that hugs the text bounds, slightly extended via inset, with
a heavy filter blur so the result reads as ambient light, not
a shape. Sits BELOW text via z-index, behind everything else
in the slab. */
.ledger-glow {
position: relative;
isolation: isolate;
}
.ledger-glow::before {
content: '';
position: absolute;
inset: -22px -56px;
background: radial-gradient(ellipse 70% 70% at 50% 50%,
rgba(150, 190, 255, 0.32) 0%,
rgba(130, 170, 240, 0.16) 35%,
rgba(120, 160, 230, 0.05) 65%,
transparent 80%);
filter: blur(14px);
z-index: -1;
pointer-events: none;
border-radius: 999px;
}
/* Eyebrow glow sits tighter and a touch warmer because the
type is small — needs to read as a soft accent, not a halo. */
.ledger-eyebrow.ledger-glow::before {
inset: -14px -28px;
background: radial-gradient(ellipse 70% 70% at 50% 50%,
rgba(150, 190, 255, 0.28) 0%,
rgba(130, 170, 240, 0.12) 45%,
transparent 78%);
filter: blur(10px);
}
/* The visible artifact — horizontal invoice journey (dark card) */
.ledger-artifact {
margin: 0;
padding: 44px 32px 36px;
background: #000000;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3),
0 20px 48px -16px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.03);
overflow: hidden;
}
.ledger-artifact-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 28px;
}
.ledger-artifact-track {
display: flex;
align-items: center;
gap: 0;
padding: 28px 0 16px;
position: relative;
}
.ledger-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
z-index: 2;
flex: 0 0 auto;
min-width: 88px;
padding: 0 4px;
}
.ledger-node-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
position: relative;
}
.ledger-node-dot::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.ledger-node.ledger-node-end .ledger-node-dot {
background: var(--accent);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}
.ledger-node.ledger-node-end .ledger-node-dot::before {
border-color: rgba(249, 115, 22, 0.35);
}
.ledger-node-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
color: white;
white-space: nowrap;
}
.ledger-node-meta {
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 0.05em;
white-space: nowrap;
}
.ledger-edge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
padding: 0 10px;
min-height: 60px;
flex: 1 1 0;
min-width: 0;
}
.ledger-edge::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: rgba(255, 255, 255, 0.08);
transform: translateY(-0.5px);
z-index: 0;
}
.ledger-chip {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
padding: 6px 12px;
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
letter-spacing: 0.005em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ledger-chip-accent {
background: rgba(249, 115, 22, 0.12);
border-color: rgba(249, 115, 22, 0.32);
color: #FDB57A;
}
.ledger-chip-green {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.28);
color: #6EE7B7;
}
.ledger-artifact-footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.ledger-artifact-caption {
font-family: var(--font-ui);
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
max-width: 560px;
}
.ledger-artifact-caption em {
font-style: normal;
color: white;
font-weight: 500;
}
.ledger-artifact-timestamp {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
@media (max-width: 1100px) {
.ledger-transition { margin-left: 0; max-width: 640px; }
.ledger-artifact-track {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 8px 0;
}
.ledger-node { width: auto; flex-direction: row; gap: 14px; justify-content: flex-start; padding: 12px 0; min-width: 0; }
.ledger-edge { min-height: auto; padding: 12px 0 12px 28px; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ledger-edge::before { top: 0; bottom: 0; left: 4px; width: 1px; height: auto; right: auto; background: rgba(255, 255, 255, 0.12); }
}
@media (max-width: 768px) {
.section-ledger { padding: var(--space-24) var(--space-6) 120px; } /* off-scale 120 retained */
.ledger-artifact { padding: 28px 20px; }
}
/* ════════════ LEDGER STACK — Linear-style overlapping cards ════════════
Two dark product cards stacked with offset, sitting in the dark
Ledger section. Editorial, content-driven, minimal chrome —
inspired by linear.app's product showcases. Replaces the
dashboard-heavy app mockup with a quieter "inside the Ledger"
feel: a weekly case list (back card) and a live activity feed
(front card). */
.ledger-stack {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
aspect-ratio: 16 / 9;
isolation: isolate;
min-height: 520px;
}
.ledger-stack-fig {
position: absolute;
top: 18px;
left: 22px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.32);
z-index: 5;
}
.ls-card {
position: absolute;
background: linear-gradient(180deg,
rgba(36, 33, 31, 0.98) 0%,
rgba(28, 26, 25, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 28px 60px -20px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.025);
overflow: hidden;
color: rgba(255, 255, 255, 0.92);
font-family: var(--font-ui);
}
.ls-card-back {
top: 8%;
left: 0;
width: 58%;
height: 80%;
z-index: 1;
animation: ls-float-back 9s ease-in-out infinite;
}
.ls-card-front {
top: 18%;
right: 0;
width: 58%;
height: 82%;
z-index: 2;
animation: ls-float-front 9s ease-in-out infinite;
animation-delay: -4.5s;
}
@keyframes ls-float-back { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ls-float-front { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* Back card — case list */
.ls-back-title {
padding: 22px 28px 8px;
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.012em;
color: rgba(255, 255, 255, 0.92);
}
.ls-back-section {
padding: 18px 28px 6px;
font-family: var(--font-ui);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.42);
}
.ls-back-list {
list-style: none;
margin: 0;
padding: 0 28px 24px;
}
.ls-back-item {
padding: 14px 0 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ls-back-item:last-child { border-bottom: 0; }
.ls-back-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
}
.ls-back-head strong {
color: rgba(255, 255, 255, 0.94);
font-weight: 600;
}
.ls-back-by {
color: rgba(255, 255, 255, 0.36);
font-weight: 400;
font-size: 12px;
}
.ls-back-icon {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 10px;
}
.ls-back-icon.is-disputed { background: rgba(249, 115, 22, 0.18); color: #FB923C; }
.ls-back-icon.is-overdue { background: rgba(239, 68, 68, 0.16); color: #F87171; }
.ls-back-icon.is-paid { background: rgba(16, 185, 129, 0.16); color: #34D399; }
.ls-back-icon.is-pattern { background: rgba(139, 92, 246, 0.18); color: #A78BFA; }
.ls-back-bullets {
list-style: none;
margin: 0;
padding: 0 0 0 22px;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
}
.ls-back-bullets li {
position: relative;
padding-left: 12px;
margin-bottom: 2px;
}
.ls-back-bullets li::before {
content: '·';
position: absolute;
left: 0;
color: rgba(255, 255, 255, 0.3);
}
/* Front card — feed */
.ls-front-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 16px 24px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ls-front-tab {
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
padding: 6px 10px;
border-radius: 5px;
cursor: default;
transition: color 0.2s ease;
}
.ls-front-tab.is-active {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.94);
}
.ls-front-tab-spacer { flex: 1; }
.ls-front-tab-icon {
width: 28px;
height: 28px;
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
}
.ls-front-tab-icon svg { width: 14px; height: 14px; }
.ls-front-feed {
padding: 4px 24px 24px;
overflow: hidden;
}
.ls-front-day {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.4);
padding: 14px 0 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
margin-bottom: 16px;
}
.ls-feed-item {
margin-bottom: 22px;
}
.ls-feed-title {
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.012em;
color: rgba(255, 255, 255, 0.94);
margin: 0 0 6px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ls-feed-more {
color: rgba(255, 255, 255, 0.32);
font-size: 14px;
letter-spacing: 0.05em;
cursor: default;
}
.ls-feed-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 10px;
}
.ls-feed-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 500;
}
.ls-feed-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
}
.ls-feed-status.is-on-track::before { background: #34D399; }
.ls-feed-status.is-on-track { color: #34D399; }
.ls-feed-status.is-on-track { animation: ls-pulse 2s ease-in-out infinite; }
.ls-feed-status.is-at-risk::before { background: #F59E0B; }
.ls-feed-status.is-at-risk { color: #F59E0B; }
.ls-feed-status.is-cleared::before { background: #34D399; }
.ls-feed-status.is-cleared { color: #34D399; }
@keyframes ls-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.ls-feed-body {
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 12px;
}
.ls-feed-reactions {
display: flex;
gap: 14px;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
.ls-feed-reactions span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.ls-feed-reactions svg { width: 12px; height: 12px; opacity: 0.7; }
/* Responsive: collapse the stack on narrow viewports */
@media (max-width: 900px) {
.ledger-stack { aspect-ratio: auto; min-height: 0; }
.ls-card-back, .ls-card-front {
position: relative;
top: auto; left: auto; right: auto; bottom: auto;
width: 100%;
height: auto;
margin-bottom: 16px;
animation: none;
}
}
/* Old app-mockup CSS below — superseded but left for fallback. */
.ledger-app {
position: relative;
margin: 0;
border-radius: 14px;
overflow: hidden;
background: #FAFAF8;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 30px 80px -20px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.04);
isolation: isolate;
}
/* Window chrome — three-dot top bar */
.ledger-app-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #F1EEE8;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ledger-app-chrome span {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.12);
}
.ledger-app-chrome span:nth-child(1) { background: #E76F51; }
.ledger-app-chrome span:nth-child(2) { background: #E9C46A; }
.ledger-app-chrome span:nth-child(3) { background: #2A9D8F; }
.ledger-app-chrome-url {
margin-left: 14px;
padding: 3px 10px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0;
}
/* Body — sidebar + main grid */
.ledger-app-body {
display: grid;
grid-template-columns: 56px 1fr;
min-height: 460px;
position: relative;
}
/* Sidebar */
.ledger-app-sidebar {
background: #000000;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 0;
gap: 4px;
}
.ledger-app-sidebar-logo {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
margin-bottom: 12px;
}
.ledger-app-nav-item {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
transition: background 0.2s ease, color 0.2s ease;
cursor: default;
}
.ledger-app-nav-item svg { width: 16px; height: 16px; stroke-width: 1.6; }
.ledger-app-nav-item.is-active {
background: rgba(255, 255, 255, 0.08);
color: white;
}
/* Main column */
.ledger-app-main {
padding: 22px 28px 28px;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.ledger-app-main-head {
display: flex;
align-items: baseline;
gap: 12px;
}
.ledger-app-main-title {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.012em;
color: #000000;
}
.ledger-app-main-crumb {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
/* Stat cards */
.ledger-app-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.ledger-app-stat {
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 12px 14px 14px;
}
.ledger-app-stat-label {
font-family: var(--font-ui);
font-size: 10.5px;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 6px;
letter-spacing: 0;
}
.ledger-app-stat-value {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.022em;
color: #000000;
line-height: 1;
}
.ledger-app-stat-delta {
display: inline-block;
margin-top: 6px;
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(16, 185, 129, 0.85);
letter-spacing: 0.04em;
}
.ledger-app-stat-delta.is-down { color: rgba(239, 68, 68, 0.85); }
/* Table */
.ledger-app-table {
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px;
overflow: hidden;
flex: 1;
}
.ledger-app-table-head,
.ledger-app-table-row {
display: grid;
grid-template-columns: 1.4fr 0.9fr 0.9fr 0.7fr 0.6fr;
gap: 12px;
padding: 11px 16px;
font-family: var(--font-ui);
font-size: 11.5px;
align-items: center;
}
.ledger-app-table-head {
background: #F8F6F2;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(0, 0, 0, 0.45);
font-weight: 600;
padding: 9px 16px;
}
.ledger-app-table-row {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.78);
transition: background 0.3s ease;
}
.ledger-app-table-row:last-child { border-bottom: 0; }
.ledger-app-table-row.is-active {
background: rgba(249, 115, 22, 0.06);
}
.ledger-app-table-row.is-active::before {
content: '';
position: absolute;
left: 0;
width: 3px;
top: 0;
bottom: 0;
background: var(--accent);
}
.ledger-app-table-row strong { font-weight: 600; color: #000000; }
.ledger-app-status {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 100px;
}
.ledger-app-status.is-disputed { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.ledger-app-status.is-overdue { background: rgba(239, 68, 68, 0.12); color: #B91C1C; }
.ledger-app-status.is-pending { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); }
.ledger-app-status.is-paid { background: rgba(16, 185, 129, 0.12); color: #047857; }
/* Floating detail card — overlaps the main on the right */
.ledger-app-detail {
position: absolute;
right: -18px;
bottom: 60px;
width: 320px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 10px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 24px 48px -16px rgba(0, 0, 0, 0.18);
padding: 16px 18px;
z-index: 5;
animation: ledger-app-float 6s ease-in-out infinite;
}
@keyframes ledger-app-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.ledger-app-detail-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ledger-app-detail-tag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.ledger-app-detail-customer {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.012em;
color: #000000;
margin-bottom: 2px;
}
.ledger-app-detail-meta {
font-family: var(--font-ui);
font-size: 11.5px;
color: rgba(0, 0, 0, 0.55);
margin-bottom: 12px;
}
.ledger-app-detail-section {
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(0, 0, 0, 0.35);
margin: 12px 0 6px;
}
.ledger-app-detail-evidence {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.ledger-app-detail-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 10px;
color: rgba(0, 0, 0, 0.65);
}
.ledger-app-detail-thread {
background: #F8F6F2;
border-radius: 6px;
padding: 10px 12px;
font-family: var(--font-ui);
font-size: 11.5px;
color: rgba(0, 0, 0, 0.7);
line-height: 1.5;
}
.ledger-app-detail-thread strong {
color: #000000;
font-weight: 600;
}
/* Toast — cycling notifications across the top-center of the app */
.ledger-app-toast-track {
position: absolute;
top: 56px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
pointer-events: none;
display: flex;
justify-content: center;
min-width: 240px;
}
.ledger-app-toast {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 10px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 100px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 16px 32px -10px rgba(0, 0, 0, 0.16);
font-family: var(--font-ui);
font-size: 12px;
color: rgba(0, 0, 0, 0.78);
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -8px);
left: 50%;
animation: ledger-app-toast 32s ease-in-out infinite;
}
.ledger-app-toast .check {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.16);
color: #047857;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ledger-app-toast .check svg { width: 10px; height: 10px; }
.ledger-app-toast strong { color: #000000; font-weight: 600; }
@keyframes ledger-app-toast {
0%, 22% { opacity: 0; transform: translate(-50%, -8px); }
2%, 6% { opacity: 1; transform: translate(-50%, 0); }
12%, 18% { opacity: 1; transform: translate(-50%, 0); }
21%, 100% { opacity: 0; transform: translate(-50%, -8px); }
}
/* Stagger four toasts so each gets ~8s of stage time on a 32s loop */
.ledger-app-toast:nth-child(1) { animation-delay: 0s; }
.ledger-app-toast:nth-child(2) { animation-delay: 8s; }
.ledger-app-toast:nth-child(3) { animation-delay: 16s; }
.ledger-app-toast:nth-child(4) { animation-delay: 24s; }
/* Subtle continuous "live" pulse on the active row */
@keyframes ledger-app-row-pulse {
0%, 100% { background: rgba(249, 115, 22, 0.05); }
50% { background: rgba(249, 115, 22, 0.10); }
}
.ledger-app-table-row.is-active {
animation: ledger-app-row-pulse 4s ease-in-out infinite;
position: relative;
}
@media (max-width: 1100px) {
.ledger-app-detail { right: 16px; bottom: 16px; width: 280px; }
.ledger-app-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.ledger-app-body { grid-template-columns: 44px 1fr; }
.ledger-app-main { padding: 16px 14px 18px; }
.ledger-app-detail { display: none; }
.ledger-app-table-head,
.ledger-app-table-row { grid-template-columns: 1.4fr 0.7fr 0.7fr; }
.ledger-app-table-head > :nth-child(4),
.ledger-app-table-head > :nth-child(5),
.ledger-app-table-row > :nth-child(4),
.ledger-app-table-row > :nth-child(5) { display: none; }
}
/* CASE STUDIES SECTION */
/* v111.1: tokenized section + header — 60 gap → 64. */
.case-studies-section { background: var(--bg-pure); padding: var(--space-40) var(--space-12); overflow: visible; }
/* v29 (2026-05-29): header left-aligned in a single column (was a
two-column split that pushed the headline to the right). */
.case-studies-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: 1440px; margin: 0 auto var(--space-12); }
.case-studies-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 8px; }
.case-studies-right { display: flex; flex-direction: column; gap: var(--space-6); }
.case-studies-headline { font-family: var(--font-sans); font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; color: var(--text-primary); }
.case-studies-headline em { font-style: italic; font-weight: 400; }
.case-studies-desc { font-family: var(--font-ui); font-size: 16px; color: var(--text-secondary); line-height: 1.6; max-width: 480px; }
.case-studies-cta { display: inline-flex; align-items: center; gap: 8px; background: rgba(12, 11, 9, 0.06); color: var(--text-primary); font-family: var(--font-ui); font-size: 13px; font-weight: 600; padding: 13px 28px; border-radius: 100px; border: 1px solid rgba(12, 11, 9, 0.15); cursor: pointer; transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--spring); width: fit-content; text-decoration: none; letter-spacing: 0.02em; }
.case-studies-cta:hover { opacity: 0.9; transform: translateY(-1px); background: rgba(12, 11, 9, 0.1); border-color: rgba(12, 11, 9, 0.25); }
/* v24 (2026-05-29): testimonial reformatted to a Duna-style split
card — light quote panel on the left, the Truecaller image on
the right. Replaced the prior two-card grid (hover-reveal
Truecaller card + black Gathers metric card). */
/* v28 (2026-05-29): single unified frame around both the quote
and the image (was two separate bordered cards with a gap). */
.testimonial-card { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; max-width: 1440px; margin: 0 auto; border: 1px solid rgba(12, 11, 9, 0.08); border-radius: 20px; overflow: hidden; }
.testimonial-body { background: var(--bg-pure); padding: var(--space-16) var(--space-16); display: flex; flex-direction: column; justify-content: center; }
.testimonial-quote { font-family: var(--font-sans); font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.4; color: var(--text-primary); margin: 0 0 var(--space-10); text-wrap: balance; }
.testimonial-name { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 4px; }
.testimonial-role { font-family: var(--font-ui); font-size: 15px; font-weight: 400; color: var(--text-secondary); margin: 0; }
/* v27 (2026-05-29): avatar next to the attribution */
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; }
.testimonial-media { position: relative; overflow: hidden; min-height: 480px; background: var(--bg-pure); }
.testimonial-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* v26 (2026-05-29): Truecaller brand overlay on the photo — white
wordmark top-left, rolling user-count bottom-left, with a scrim
for legibility (carried over from the prior case-study card). */
.testimonial-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.08) 70%, rgba(0, 0, 0, 0.2) 100%); }
.testimonial-media-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 40px; pointer-events: none; }
.testimonial-tc-logo { width: 180px; height: auto; }
.testimonial-metric { font-family: var(--font-sans); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #ffffff; }
.testimonial-metric-label { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin-top: 8px; }
@media (max-width: 768px) {
.case-studies-section { padding: var(--space-20) var(--space-6); }
.case-studies-header { grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-10); }
.case-studies-headline { font-size: 32px; }
.testimonial-card { grid-template-columns: 1fr; gap: var(--space-4); }
.testimonial-body { padding: var(--space-10); }
.testimonial-media { min-height: 300px; order: -1; }
}
/* FAQ SECTION — v111.1: tokenized; gap 60 → 64. */
.faq-section { background: var(--bg); padding: var(--space-40) var(--space-12); }
.faq-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-16); }
.faq-intro { display: flex; flex-direction: column; gap: var(--space-5); }
.faq-contact-box { background: var(--bg-card); padding: var(--space-8); border-radius: var(--radius-machine); border: 1px solid var(--border-premium); margin-top: var(--space-10); }
.faq-contact-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); margin-bottom: 8px; }
.faq-contact-text { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-bottom: 16px; }
.faq-items { display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item { border: 1px solid var(--border-premium); border-radius: var(--radius-machine); background: var(--bg-pure); overflow: hidden; }
.faq-item-trigger { padding: 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--bg-pure); border: none; width: 100%; text-align: left; transition: all 0.3s var(--ease-smooth); font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.faq-item-trigger:hover { background: var(--bg-card); }
.faq-item.active .faq-item-trigger { background: var(--bg-card); }
.faq-toggle { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: transform 0.3s var(--ease-smooth); font-weight: 300; }
.faq-item.active .faq-toggle { transform: rotate(180deg); }
.faq-content { background: white; border-top: 1px solid var(--border-subtle); max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-smooth); }
.faq-item.active .faq-content { max-height: 500px; }
.faq-content-text { padding: 24px; font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 768px) {
.faq-section { padding: var(--space-20) var(--space-6); }
.faq-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* TYPOGRAPHIC CLOSER — v111.1: tokenized; 140 → 160. */
.closer-section { background: var(--bg); padding: var(--space-40) var(--space-12); text-align: center; }
.closer-headline { font-family: var(--font-sans); font-size: 64px; font-weight: 400; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: var(--space-4); line-height: 1.2; }
.closer-subtext { font-family: var(--font-ui); font-size: 16px; font-weight: 400; color: var(--text-muted); }
@media (max-width: 768px) {
.closer-section { padding: var(--space-20) var(--space-6); }
.closer-headline { font-size: 36px; }
}
/* CTA SECTION — v109.72: flipped from dark navy to light so it
matches the footer below. Headline + subtext recolored for
proper contrast on the lighter surface. */
/* v111.1: CTA section tokenized. 200px outer kept (above --space-40
by a deliberate ~25%, reads as "page-ending" not "section break"). */
.cta-section { background: var(--bg, #FAFAF8); color: var(--text-primary, #000000); padding: 200px var(--space-12); text-align: center; } /* off-scale 200 retained */
.cta-headline { font-family: var(--font-sans); font-size: clamp(40px, 5vw, 64px); font-weight: 400; letter-spacing: -0.04em; margin-bottom: var(--space-6); line-height: 1.1; color: var(--text-primary, #000000); }
.cta-subtext { font-family: var(--font-ui); font-size: 18px; font-weight: 400; color: rgba(0, 0, 0, 0.55); max-width: 700px; margin: 0 auto var(--space-10); line-height: 1.6; }
@media (max-width: 768px) {
.cta-section { padding: var(--space-20) var(--space-6); }
.cta-headline { font-size: 28px; }
.cta-subtext { font-size: 16px; }
}
/* GET STARTED / LIVE IN WEEKS */
.section-start { background: var(--bg-monolith); padding: var(--space-40) var(--space-12); } /* v111.1: tokenized */
.start-grid, .start-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1440px; margin: 0 auto; counter-reset: step; }
.start-step { position: relative; }
.start-step-number { font-family: var(--font-mono); font-size: 48px; font-weight: 700; color: rgba(0,0,0,0.06); margin-bottom: 20px; line-height: 1; }
.start-step-title { font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 10px; }
.start-step-desc { font-family: var(--font-ui); font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.start-step-time { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 16px; letter-spacing: 0.02em; }
.start-cta-row { text-align: center; margin-top: 64px; }
@media (max-width: 768px) {
.section-start { padding: var(--space-24) var(--space-6); }
.start-grid, .start-steps { grid-template-columns: 1fr; gap: 40px; }
}
/* INTEGRATIONS SECTION */
/* v73 dark register — #2a2a2a background, light text on top */
.integrations-section { background: #000000; padding: var(--space-40) var(--space-12) 0; overflow: hidden; } /* v111.1: tokenized; 0 bottom so orb horizon = section floor */
.integrations-section .section-label { color: rgba(255, 255, 255, 0.5); }
.integrations-section .section-headline { color: #ffffff; }
/* v31 (2026-05-29): center the eyebrow + headline in this section */
.integrations-section .section-meta { justify-content: center; }
.integrations-section .section-headline { text-align: center; margin-left: auto; margin-right: auto; }
.convergence-container {
position: relative;
max-width: 900px;
margin: 80px auto 0;
height: 510px; /* 510 so planet dot (cy=58 in 320px orb) clears the clip floor */
/* clip-path: top/sides open for hover labels, hard clip at container floor for horizon */
clip-path: inset(-60px -20px 0 -20px);
}
/* Blur dissolve at the horizon instead of a dark fade */
.convergence-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 130px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Gradient mask: full blur at floor → none 130px up */
-webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, transparent 100%);
pointer-events: none;
z-index: 3;
}
.convergence-icons {
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
z-index: 2;
}
/* Tiles + connection lines: v73 dark-register palette. Tiles are
white-translucent over the #2a2a2a base so they read as light
glass; lines are white@12% so they're visible against the dark. */
.convergence-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s var(--ease-smooth),
border-color 0.3s var(--ease-smooth),
box-shadow 0.3s var(--ease-smooth),
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
/* v109.75: lift restored. The JS hover-follow loop in
initConvergence keeps the cable line attached to the
icon's actual position throughout the 0.45s lift
transition — see the RAF tick at icon mouseenter/leave. */
.convergence-icon:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(91, 124, 255, 0.50);
transform: translateY(-7px);
box-shadow:
0 0 0 4px rgba(91, 124, 255, 0.08),
0 8px 24px -6px rgba(91, 124, 255, 0.30);
}
.convergence-icon img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
opacity: 0.8;
transition: opacity 0.2s ease;
}
.convergence-icon:hover img {
opacity: 1;
}
/* ── Name label pop-up ── */
.convergence-icon-name {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(10px);
transform-origin: bottom center;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.01em;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.3s ease;
z-index: 20;
}
.convergence-icon:hover .convergence-icon-name {
opacity: 1;
transform: translateX(-50%) translateY(0px);
color: rgba(255, 255, 255, 0.85);
}
.convergence-svg {
position: absolute;
top: 24px;
left: 0;
width: 100%;
height: calc(100% - 24px);
z-index: 1;
}
.convergence-line {
fill: none;
stroke: rgba(255, 255, 255, 0.12);
stroke-width: 1.5;
}
.convergence-pulse {
/* v109.81: pulse lights are a soft light grey slice traveling
along the neutral-grey cables.
v32 (2026-05-29): toned down — dimmer, thinner, softer glow,
and a longer segment with a gentler fade so the current
reads as a calm flow rather than a bright spark. */
fill: none;
stroke: rgba(235, 238, 244, 0.45);
stroke-width: 1.25;
stroke-linecap: round;
opacity: 0;
filter: drop-shadow(0 0 2px rgba(235, 238, 244, 0.1));
}
.convergence-pulse.active {
opacity: 1;
stroke-dasharray: 0.16 9999;
/* Park the dash OFF the path start during the per-cable delay so no
white slice sits "on hold" before it travels. The keyframes drive
the offset (0 -> -1.16) once the animation runs, so the soft laser
is untouched — only the idle/pre-animation frame is hidden. */
stroke-dashoffset: 1;
animation: convergePulse var(--pulse-duration, 3s) var(--pulse-delay, 0s) infinite ease-in-out;
}
@keyframes convergePulse {
/* v48: pathLength-normalized so every cable lights a consistent
fraction (no full-cable flash on the short center lines), and a
gentler/dimmer fade so the start sequence reads smooth, not glitchy. */
0% { stroke-dashoffset: 0; opacity: 0; }
22% { opacity: 0.32; }
58% { opacity: 0.32; }
74% { opacity: 0; }
100% { stroke-dashoffset: -1.16; opacity: 0; }
}
.convergence-center {
/* Zero-size anchor — JS targets its center as the convergence point.
With width/height 0 that point sits exactly at the container floor,
which is also the orb equator (horizon). */
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
overflow: visible;
z-index: 3;
}
.convergence-logo {
/* v109.73: brand-blue pill replaces the invisible #000000
(which matched the dark section bg). White Gathers G
inside is now visible, the pill is the visual climax
of the converging blue lights. */
width: 56px;
height: 56px;
background: linear-gradient(135deg, #5B7CFF 0%, #4A68DF 100%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: white;
letter-spacing: 0.05em;
box-shadow:
0 0 0 4px rgba(91, 124, 255, 0.10),
0 8px 24px -4px rgba(91, 124, 255, 0.45);
}
.convergence-logo-dot { color: var(--accent); }
/* Globe hub — rises from horizon (orb equator = container floor) */
.convergence-hub-globe {
position: absolute;
width: 320px;
height: 320px;
left: -160px; /* center horizontally on the 0-width anchor */
bottom: -20px;
transform: translateY(33.33%); /* show top 2/3 — clip at container floor = horizon */
overflow: visible;
pointer-events: none;
}
.chg-orb {
width: 320px;
height: 320px;
overflow: visible;
/* v47: glow removed — the mark should read as a solid object, not a ghost */
}
/* Mobile: shrink the central globe ~2.5× so it sits in proper proportion to the integration icons */
@media (max-width: 760px) {
.convergence-hub-globe {
width: 128px;
height: 128px;
left: -64px;
}
.chg-orb {
width: 128px;
height: 128px;
}
}
.chg-comet {
fill: none;
stroke: #ffffff;
stroke-linecap: round;
stroke-width: 0.22;
filter: drop-shadow(0 0 0.6px #ffffff);
animation: chg-comet-loop 6.5s cubic-bezier(0.2, 0, 0.4, 1) infinite 0.2s;
}
@keyframes chg-comet-loop {
0% { stroke-dashoffset: 14; opacity: 0; }
2% { opacity: 1; }
18% { opacity: 1; }
23% { stroke-dashoffset: -60; opacity: 0; }
100% { stroke-dashoffset: -60; opacity: 0; }
}
@media (max-width: 768px) {
.integrations-section { padding: var(--space-20) var(--space-6) 0; }
.convergence-container { height: 300px; margin-top: 40px; }
.convergence-icon { width: 36px; height: 36px; border-radius: 8px; }
.convergence-icon img { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
.convergence-container { height: 250px; margin-top: 32px; }
}
/* FOOTER — v109.70: flipped from dark navy to light off-white.
Text colors swapped from white-with-opacity to dark-with-
opacity so contrast stays correct on the lighter surface. */
/* v111.1: footer tokenized; gap 60 → 64 (--space-16). */
/* Footer is a fixed LIGHT footer on every page (it must not inherit a
page's dark --bg, e.g. The Map sets --bg:#000 which made the footer
black-on-black). Text colors below are dark, so the light surface
keeps them readable site-wide. */
footer { background: #FAFAF8; color: #0B0C0E; padding: var(--space-20) var(--space-12); border-top: 1px solid rgba(0,0,0,0.06); }
.footer-container { max-width: 1440px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); margin-bottom: var(--space-10); padding-bottom: var(--space-10); }
.footer-column-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); color: var(--text-primary, #000000); }
.footer-logo { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-bottom: var(--space-3); color: var(--text-primary, #000000); }
.footer-tagline { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: rgba(0, 0, 0, 0.55); line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-link { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: rgba(0, 0, 0, 0.65); text-decoration: none; transition: color 0.3s var(--ease-smooth); }
.footer-link:hover { color: var(--text-primary, #000000); }
.footer-bottom { font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, 0.42); text-align: center; }
/* v109.71: compliance badges in the footer — SOC 2 + ISO 27001
with "In progress" status, signals security maturity without
overclaiming certification. */
.footer-compliance {
display: flex;
gap: var(--space-6);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid rgba(0,0,0,0.06);
}
.compliance-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
.compliance-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1.4px solid rgba(0, 0, 0, 0.28);
border-radius: 50%;
font-family: var(--font-mono);
font-weight: 700;
color: rgba(0, 0, 0, 0.62);
letter-spacing: 0.02em;
text-align: center;
line-height: 1.1;
background: rgba(255, 255, 255, 0.4);
}
.compliance-logo-main {
font-size: 11px;
}
.compliance-logo-sub {
font-size: 7.5px;
font-weight: 600;
color: rgba(0, 0, 0, 0.42);
letter-spacing: 0.06em;
margin-top: 1px;
}
.compliance-status {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
color: rgba(0, 0, 0, 0.42);
letter-spacing: 0.10em;
text-transform: uppercase;
}
@media (max-width: 768px) {
footer { padding: var(--space-16) var(--space-6); } /* 60 → 64 */
.footer-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* BOTTOM WORDMARK — giant "Gathers" peeking from bottom.
v109.70: light treatment to match the new light footer. */
.bottom-wordmark-wrap {
position: relative;
overflow: hidden;
height: clamp(80px, 12vw, 160px);
background: #FAFAF8;
pointer-events: none;
}
.bottom-wordmark {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(140px, 20vw, 320px);
letter-spacing: -0.04em;
line-height: 0.85;
color: rgba(0, 0, 0, 0.06);
text-align: center;
white-space: nowrap;
user-select: none;
}
@media (max-width: 768px) {
.bottom-wordmark-wrap { height: clamp(50px, 10vw, 80px); }
.bottom-wordmark { font-size: clamp(80px, 18vw, 160px); }
}
/* ═══════════════════════════════════════════════════════════════════
UNIFIED ENTRANCE ANIMATION — .glass-reveal
Single system replacing .reveal, .revealed, .section-entrance
═══════════════════════════════════════════════════════════════════ */
.glass-reveal {
opacity: 0;
transform: translateY(40px);
filter: blur(2px);
will-change: opacity, transform, filter;
}
.glass-reveal.revealed {
opacity: 1;
transform: translateY(0);
filter: blur(0);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PANEL 0 — COLLECTIONS AUTOPILOT ANIMATION CSS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p0 {
position: relative;
width: 100%;
height: 100%;
}
.anim-p0 .p0-canvas {
width: 100%;
height: 100%;
min-height: 420px;
position: relative;
overflow: hidden;
background: #34322e;
}
/* ===== Board (peeks from bottom-right) — FROSTED GLASS ===== */
.anim-p0 .p0-board {
position: absolute;
bottom: -30px;
right: -40px;
width: 98%;
max-width: 860px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.02);
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
outline: 1px solid rgba(255, 255, 255, 0.1);
outline-offset: -1px;
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
0 8px 32px -8px rgba(0, 0, 0, 0.18),
0 30px 60px -15px rgba(0, 0, 0, 0.12);
transform: translate3d(0, 20px, 0) scale(0.98);
opacity: 0;
will-change: transform, opacity;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
overflow: hidden;
}
.anim-p0 .p0-board.visible {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
/* ── Dashboard exit animation (slide-out before panel collapse) ── */
.anim-p0 .p0-board.dashboard-exit {
transform: translate3d(0, 60px, 0) scale(0.97);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease;
}
/* ── Glass Power-On: CRT flicker keyframes ── */
/* CRT flicker with phosphor text-shadow glow (Gemini-refined, 0.6s) */
@keyframes glassFlicker {
0% { opacity: 0; text-shadow: none; }
15% { opacity: 0.9; text-shadow: 0 0 14px rgba(255, 255, 255, 0.9); }
30% { opacity: 0.1; text-shadow: none; }
45% { opacity: 0.6; text-shadow: 0 0 6px rgba(255, 255, 255, 0.6); }
60% { opacity: 0.2; text-shadow: none; }
75% { opacity: 1; text-shadow: 0 0 16px rgba(255, 255, 255, 1); }
85% { opacity: 0.5; text-shadow: 0 0 4px rgba(255, 255, 255, 0.3); }
100% { opacity: 1; text-shadow: 0 0 2px rgba(255, 255, 255, 0.15); }
}
.glass-flicker {
animation: glassFlicker 0.6s ease-in-out forwards;
}
/* Card materialize: scale + opacity (no filter blur — perf risk with backdrop-filter parent) */
@keyframes cardMaterialize {
0% { opacity: 0; transform: translateY(10px) scale(0.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Glass container border charge-up glow during power-on */
@keyframes borderChargeUp {
0% {
border-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
50% {
border-color: rgba(255, 255, 255, 0.6);
box-shadow:
0 0 24px rgba(255, 255, 255, 0.2),
inset 0 0 12px rgba(255, 255, 255, 0.15),
0 8px 32px -8px rgba(0, 0, 0, 0.18);
}
100% {
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
0 8px 32px -8px rgba(0, 0, 0, 0.18),
0 30px 60px -15px rgba(0, 0, 0, 0.12);
}
}
.glass-charge {
animation: borderChargeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* ── Power-on: hide board inner content until revealed ── */
.anim-p0 .p0-board-nav.power-hidden,
.anim-p0 .p0-col-head.power-hidden,
.anim-p0 .p0-card.power-hidden {
opacity: 0 !important;
transition: none !important;
}
.anim-p0 .p0-card.power-reveal {
animation: cardMaterialize 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.anim-p0 .p0-card.power-hidden {
transform: translateY(10px) scale(0.96);
}
/* Board header */
.anim-p0 .p0-board-nav {
padding: 16px 20px 0;
display: flex;
align-items: center;
gap: 6px;
}
.anim-p0 .p0-board-crumb {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
letter-spacing: -0.01em;
}
.anim-p0 .p0-board-crumb b {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.anim-p0 .p0-board-sort {
margin-left: auto;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 4px 10px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 5px;
}
.anim-p0 .p0-sort-chevron {
width: 8px; height: 8px;
fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2;
}
/* Columns */
.anim-p0 .p0-columns {
display: flex;
padding: 14px 20px 24px;
gap: 0;
}
.anim-p0 .p0-column {
flex: 1;
padding: 0 12px;
min-width: 0;
position: relative;
min-height: 280px;
}
.anim-p0 .p0-column + .p0-column {
border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.anim-p0 .p0-col-head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
padding: 0 2px;
}
.anim-p0 .p0-col-label {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.01em;
}
.anim-p0 .p0-col-badge {
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: 10px;
min-width: 18px;
text-align: center;
line-height: 1.6;
transition: background 0.5s ease, color 0.5s ease;
}
.anim-p0 .p0-col-badge.overdue { background: var(--alert-soft); color: var(--alert); }
.anim-p0 .p0-col-badge.sent { background: var(--ink-02); color: var(--ink-20); }
.anim-p0 .p0-col-badge.success { background: var(--success-soft); color: var(--success); }
.anim-p0 .p0-col-badge.pending { background: var(--ink-02); color: var(--ink-20); }
.anim-p0 .p0-col-total {
margin-left: auto;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
color: var(--ink-100);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
transition: filter 0.15s ease, color 0.5s ease;
}
.anim-p0 .p0-col-total.rolling {
filter: blur(0.5px);
}
/* Cards */
.anim-p0 .p0-card-list {
position: relative;
min-height: 60px;
}
.anim-p0 .p0-card {
background: #ffffff;
border: 1px solid rgba(26,26,26,0.08);
border-radius: 3px;
padding: 10px 12px;
margin-bottom: 6px;
position: relative;
overflow: hidden;
will-change: transform;
box-shadow:
0 1px 3px rgba(0,0,0,0.06),
0 4px 8px rgba(0,0,0,0.04);
/* NO transition:all here — breaks FLIP animation */
}
/* Haptic Shadow — Lifted state (card being moved) */
.anim-p0 .p0-card.is-animating {
transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease-out;
z-index: 50;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.18),
0 10px 15px -5px rgba(0,0,0,0.1);
transform: scale(1.04);
}
/* Haptic Shadow — Landed state (card at rest) */
.anim-p0 .p0-card:not(.is-animating) {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);
}
.anim-p0 .p0-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent 0%, rgba(249,115,22,0.06) 50%, transparent 100%);
transform: translateX(-100%);
pointer-events: none;
border-radius: inherit;
will-change: transform;
}
.anim-p0 .p0-card.scanning::after {
animation: p0ScanSweep 0.6s ease forwards;
}
@keyframes p0ScanSweep {
to { transform: translateX(100%); }
}
/* FLIP card migration */
.anim-p0 .p0-card.is-animating {
transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 50;
box-shadow: 0 10px 20px -3px rgba(0,0,0,0.12), 0 4px 6px -2px rgba(0,0,0,0.06);
}
.anim-p0 .p0-card.processing {
outline: 1px solid rgba(26,26,26,0.15);
box-shadow:
0 1px 2px rgba(0,0,0,0.03),
0 2px 4px rgba(0,0,0,0.02),
0 0 0 1px rgba(249,115,22,0.08),
0 0 12px rgba(249,115,22,0.06);
}
.anim-p0 .p0-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.anim-p0 .p0-card-inv {
font-size: 10px;
font-weight: 500;
color: var(--ink-10);
letter-spacing: -0.01em;
}
.anim-p0 .p0-card-due {
font-size: 10px;
color: var(--ink-20);
display: flex;
align-items: center;
gap: 3px;
letter-spacing: -0.01em;
}
.anim-p0 .p0-clock-svg {
width: 10px; height: 10px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
.anim-p0 .p0-card-mid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 0;
min-width: 0;
}
.anim-p0 .p0-card-company {
font-size: 12px;
font-weight: 600;
color: var(--ink-100);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.anim-p0 .p0-card-amount {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
color: var(--ink-100);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
transition: color 0.8s ease;
flex-shrink: 0;
}
.anim-p0 .p0-card-amount.gold {
color: var(--gold);
}
.anim-p0 .p0-card-foot {
display: flex;
align-items: center;
gap: 6px;
margin-top: 7px;
flex-wrap: wrap;
}
.anim-p0 .p0-avatar {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 600;
color: #fff;
letter-spacing: 0;
}
.anim-p0 .p0-avatar.a { background: #94a3b8; }
.anim-p0 .p0-avatar.b { background: #78909c; }
.anim-p0 .p0-avatar.c { background: #8a8278; }
.anim-p0 .p0-comment-count {
font-size: 10px;
color: var(--ink-10);
display: flex;
align-items: center;
gap: 3px;
letter-spacing: -0.01em;
}
.anim-p0 .p0-comment-count svg {
width: 10px;
height: 10px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/* Status flags and badges */
.anim-p0 .p0-status-flag {
display: none;
align-items: center;
gap: 3px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
background: var(--accent-soft);
padding: 2px 7px;
border-radius: 4px;
transform: scale(0.8);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.anim-p0 .p0-status-flag.show {
display: inline-flex;
transform: scale(1);
opacity: 1;
}
/* checkmarks removed from In Progress cards */
.anim-p0 .p0-check-mark { display: none;
}
/* Column ripple effect */
.anim-p0 .p0-column.ripple::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 100%;
background: radial-gradient(ellipse at top center, rgba(16,185,129,0.1) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
animation: p0RippleDown 1.2s ease forwards;
}
@keyframes p0RippleDown {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0% 0); }
}
/* ===== Agent Overlay ===== */
.anim-p0 .p0-agent {
position: absolute;
top: 12px;
right: 30px;
width: 320px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 3px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 4px 6px rgba(0,0,0,0.06),
0 16px 48px -8px rgba(0,0,0,0.12);
padding: 16px 18px;
z-index: 60;
transform: translate3d(0, -150px, 0);
opacity: 0;
will-change: transform, opacity;
}
.anim-p0 .p0-agent.drop {
opacity: 1;
animation: p0AgentDrop 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes p0AgentDrop {
0% { transform: translate3d(0, -150px, 0); opacity: 0; }
60% { transform: translate3d(0, 6px, 0); opacity: 1; }
100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
.anim-p0 .p0-agent.exit {
animation: p0AgentExit 0.6s ease forwards;
}
@keyframes p0AgentExit {
to { transform: translate3d(0, -40px, 0); opacity: 0; }
}
.anim-p0 .p0-agent-top {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.anim-p0 .p0-agent-icon {
width: 30px; height: 30px;
background: linear-gradient(135deg, #F97316, #FB923C);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.anim-p0 .p0-agent-icon svg {
width: 14px; height: 14px;
fill: #fff;
}
.anim-p0 .p0-agent-pulse {
position: absolute;
inset: -3px;
border-radius: 10px;
border: 1.5px solid var(--accent);
opacity: 0;
animation: p0Pulse 2s ease-out infinite;
}
@keyframes p0Pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0; transform: scale(1.35); }
}
.anim-p0 .p0-agent-label {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.95);
letter-spacing: -0.01em;
}
.anim-p0 .p0-agent-body {
font-size: 12px;
color: rgba(255,255,255,0.65);
line-height: 1.55;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.anim-p0 .p0-agent-body strong {
color: rgba(255,255,255,0.95);
font-weight: 600;
}
.anim-p0 .p0-agent-btn {
width: 100%;
padding: 9px 14px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 3px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.85);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: transform 0.1s ease, background 0.25s ease;
}
.anim-p0 .p0-agent-btn svg {
width: 13px; height: 13px;
}
.anim-p0 .p0-agent-btn.press {
transform: scale(0.95);
}
.anim-p0 .p0-agent-btn.done {
background: rgba(16,185,129,0.2);
color: #6ee7b7;
}
/* ===== AI Thinking Spinner (matches revenue protection spinner) ===== */
.anim-p0 .p0-agent-thinking {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.anim-p0 .p0-agent-spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: var(--accent);
flex-shrink: 0;
animation: spinTask 0.8s linear infinite;
}
.anim-p0 .p0-agent-thinking span {
font-size: 12px;
color: rgba(255,255,255,0.65);
letter-spacing: -0.01em;
animation: thinkTextFade 0.4s ease forwards;
}
@keyframes thinkTextFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Results reveal animation */
.anim-p0 .p0-agent-body.p0-results-reveal {
display: block !important;
animation: resultsReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes resultsReveal {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== Cursor ===== */
.anim-p0 .p0-cursor {
position: absolute;
width: 18px; height: 18px;
z-index: 100;
pointer-events: none;
opacity: 0;
will-change: transform;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18));
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.anim-p0 .p0-cursor.show {
opacity: 1;
}
/* ===== Toast ===== */
.anim-p0 .p0-toast {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--card);
border: 1px solid var(--ink-05);
border-radius: 10px;
padding: 8px 14px;
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 500;
color: var(--ink-60);
box-shadow: 0 4px 14px -4px rgba(0,0,0,0.06);
z-index: 70;
transform: translate3d(0, 16px, 0);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.anim-p0 .p0-toast.show {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.anim-p0 .p0-toast-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
animation: p0ToastPulse 1.5s ease-in-out infinite;
}
@keyframes p0ToastPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ===== Fade overlay ===== */
.anim-p0 .p0-fade {
position: absolute;
inset: 0;
background: #34322e;
opacity: 0;
z-index: 200;
pointer-events: none;
transition: opacity 0.9s ease;
}
.anim-p0 .p0-fade.on {
opacity: 1;
}
/* ===== Peek column (Scheduled) ===== */
.anim-p0 .p0-col-peek {
flex: 1;
opacity: 0.45;
}
.anim-p0 .p0-col-peek .p0-card {
opacity: 0.6;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PANEL 1 — SUBMISSION INTAKE ANIMATION CSS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.p1-canvas { width: 100%; height: 100%; background: #34322e; position: relative; overflow: hidden; }
.p1-card-stack {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 440px; height: 360px;
perspective: 1000px;
}
.p1-intake-card {
position: absolute; width: 100%; background: #fff; border-radius: 4px;
padding: 32px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
transition: transform 0.8s var(--spring), opacity 0.6s ease;
will-change: transform, opacity;
opacity: 0; transform: translate3d(0, 40px, -80px) scale(0.92);
z-index: 0;
}
/* STATE: ACTIVE — The card being solved */
.p1-intake-card.pos-0 {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1; z-index: 30;
}
/* STATE: QUEUED — Peeking from behind */
.p1-intake-card.pos-1 {
transform: translate3d(0, 15px, -40px) scale(0.96);
opacity: 0.4; z-index: 20;
}
.p1-intake-card.pos-2 {
transform: translate3d(0, 30px, -80px) scale(0.92);
opacity: 0.15; z-index: 10;
}
/* STATE: HIDDEN — Off screen */
.p1-intake-card.pos-3 {
transform: translate3d(0, 40px, -80px) scale(0.92);
opacity: 0; z-index: 0;
}
/* STATE: EXIT — The Shuffle out */
.p1-intake-card.exit {
transform: translate3d(450px, -20px, 50px) rotate(8deg);
opacity: 0; z-index: 40;
transition: transform 0.7s var(--spring), opacity 0.5s ease;
}
.p1-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; position: relative; }
.p1-company-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.p1-status-badge {
position: absolute; top: 0; right: 0;
font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px;
background: rgba(249,115,22,0.1); color: #F97316;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.p1-status-badge.resolved {
background: rgba(16,185,129,0.1); color: #10B981;
}
.p1-card-details { margin-bottom: 16px; }
.p1-invoice-ref { font-family: var(--font-mono); font-size: 11px; color: #71717A; margin-bottom: 6px; }
.p1-amount { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.p1-tag {
display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
padding: 3px 8px; border-radius: 3px; background: rgba(249,115,22,0.1); color: #F97316;
}
.p1-tag.resolved { background: rgba(16,185,129,0.1); color: #10B981; }
.p1-thinking-log {
font-family: var(--font-mono); font-size: 13px; color: rgba(26,26,26,0.8);
letter-spacing: 0.02em; line-height: 1.7; border-top: 1px solid #f0f0f0; padding-top: 14px;
}
.p1-log-line {
opacity: 0; transform: translateY(4px);
margin-bottom: 6px;
}
.p1-log-line.show {
animation: p1LineIn 0.5s ease-out forwards;
}
@keyframes p1LineIn {
to { opacity: 1; transform: translateY(0); }
}
.p1-log-prefix { color: #F97316; }
.p1-log-resolution { color: #10B981; }
.p1-kw { font-weight: 700; color: #1a1a1a; }
.p1-log-line.pulse {
animation: p1LineIn 0.5s ease-out forwards, p1Pulse 0.3s ease-out 0.5s;
}
@keyframes p1Pulse {
0% { transform: scale(1); }
50% { transform: scale(1.04); }
100% { transform: scale(1); }
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* CASH VISIBILITY — LIVE FINANCIAL ENGINE */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Master layout — 3 columns with gaps, all inside the same container */
.cv-layout {
width: 100%; height: 100%; display: flex; gap: 10px; padding: 16px;
position: relative; overflow: hidden;
}
/* Shared card style — frosted glass on light background */
.cv-card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
border: none;
border-radius: 3px;
box-shadow: none;
}
/* LEFT COLUMN */
.cv-left-col { width: 190px; min-width: 190px; display: flex; flex-direction: column; gap: 10px; }
.cv-sidebar-card { padding: 14px 0; flex: 1; display: flex; flex-direction: column; }
.cv-sidebar-header {
font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text-primary);
padding: 0 16px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 4px;
}
.cv-sidebar-item {
font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary);
padding: 7px 16px; cursor: pointer; transition: background 0.2s ease;
}
.cv-sidebar-item:hover { background: rgba(0,0,0,0.03); }
.cv-si-active { background: rgba(0,0,0,0.05) !important; color: var(--text-primary) !important; font-weight: 600; }
.cv-invoice {
padding: 12px 14px;
transition: transform 0.6s var(--spring), opacity 0.4s ease, box-shadow 0.3s ease;
}
.cv-invoice.cv-inv-flash {
border-color: rgba(249,115,22,0.4); box-shadow: 0 0 16px rgba(249,115,22,0.1);
}
.cv-inv-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cv-inv-id { font-family: var(--font-mono); font-size: 10px; color: #999; }
.cv-inv-badge { font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.cv-inv-paid { background: rgba(16,185,129,0.1); color: #10B981; }
.cv-inv-date { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: #bbb; }
.cv-inv-name { font-family: var(--font-ui); font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.cv-inv-amount { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary); }
/* CENTER COLUMN — Chart */
.cv-center-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cv-chart-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cv-dash-top {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px 12px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cv-dash-title { font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--text-primary); }
.cv-toggle { display: flex; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
.cv-toggle-btn {
font-family: var(--font-ui); font-size: 10px; padding: 5px 10px; cursor: pointer;
color: #999; background: rgba(255,255,255,0.4); transition: all 0.2s ease;
}
.cv-toggle-active { background: rgba(255,255,255,0.7) !important; color: var(--text-primary) !important; font-weight: 600; }
.cv-chart-area {
flex: 1; display: flex; padding: 16px 12px 8px 0; position: relative; flex-direction: column;
}
.cv-y-axis {
position: absolute; left: 8px; top: 16px; bottom: 44px; display: flex; flex-direction: column;
justify-content: space-between; font-family: var(--font-mono); font-size: 8px; color: #bbb;
width: 30px; text-align: right;
}
.cv-bars {
flex: 1; display: flex; align-items: flex-end; gap: 8px; margin-left: 42px; padding-bottom: 24px;
position: relative;
}
.cv-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cv-bar {
width: 100%; border-radius: 3px 3px 0 0; position: relative;
background: linear-gradient(180deg, #F97316 0%, #FDBA74 100%);
height: 0; transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: height, transform;
}
.cv-bar.cv-bar-striped {
background: repeating-linear-gradient(
-45deg, #F97316, #F97316 4px, #FB923C 4px, #FB923C 8px
);
}
.cv-bar-val {
position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
font-family: var(--font-mono); font-size: 8px; font-weight: 600; color: var(--text-primary);
white-space: nowrap; opacity: 0; transition: opacity 0.4s ease 0.8s;
}
.cv-bar.cv-bar-grown .cv-bar-val { opacity: 1; }
.cv-bar-label {
font-family: var(--font-ui); font-size: 9px; color: #999;
}
.cv-bar.cv-bar-pulse {
animation: cvBarPulse 0.4s ease-out;
}
@keyframes cvBarPulse {
0% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(249,115,22,0); }
50% { filter: brightness(1.2); box-shadow: 0 0 20px 4px rgba(249,115,22,0.25); }
100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
.cv-legend {
display: flex; align-items: center; gap: 8px; margin-left: 42px; padding-top: 4px;
}
.cv-legend-gradient {
width: 80px; height: 6px; border-radius: 3px;
background: linear-gradient(90deg, #FDBA74, #EA580C);
}
/* RIGHT COLUMN — Cash */
.cv-right-col { width: 170px; min-width: 170px; display: flex; flex-direction: column; }
.cv-cash-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 16px; gap: 16px; }
.cv-cash-divider { height: 1px; background: rgba(0,0,0,0.06); }
.cv-cash-block { }
.cv-cash-label { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cv-cash-amount {
font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text-primary);
transition: all 0.3s ease;
}
.cv-cash-arrow { color: #10B981; font-size: 12px; }
.cv-cash-sub { font-family: var(--font-ui); font-size: 9px; color: #bbb; margin-top: 2px; }
.cv-cash-big {
font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text-primary);
transition: all 0.3s ease;
}
.cv-cash-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cv-cash-pct { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.cv-cash-green { color: #10B981; }
/* Event stream — floating transaction cards */
.cv-event-stream {
position: absolute; left: 210px; bottom: 10px; width: calc(100% - 400px); height: 60px;
pointer-events: none; overflow: visible; z-index: 10;
}
.cv-event-card {
position: absolute; bottom: -60px; left: 0;
background: rgba(255,255,255,0.7); backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.8); border-radius: 3px;
padding: 8px 14px; display: flex; align-items: center; gap: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
font-family: var(--font-mono); font-size: 10px; color: var(--text-primary);
opacity: 0; transform: translateY(20px);
transition: transform 0.6s var(--spring), opacity 0.4s ease;
will-change: transform, opacity;
}
.cv-event-card.cv-ev-visible { opacity: 1; transform: translateY(-70px); }
.cv-event-card.cv-ev-process {
border-color: #F97316; box-shadow: 0 0 20px rgba(249,115,22,0.15);
}
.cv-event-card.cv-ev-absorbed {
opacity: 0; transform: translateY(-120px) scale(0.9);
transition: transform 0.5s ease-in, opacity 0.3s ease;
}
.cv-ev-dot { width: 6px; height: 6px; border-radius: 50%; background: #F97316; flex-shrink: 0; }
.cv-ev-dot.cv-ev-green { background: #10B981; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* PANEL 2 — REVENUE COMMAND CENTER ANIMATION CSS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 {
position: relative;
width: 100%;
height: 100%;
}
.anim-p2 .p2-canvas {
position: relative;
width: 100%;
height: 100%;
background: #34322e;
border-radius: 0;
overflow: hidden;
perspective: 1000px;
backface-visibility: hidden;
}
/* ===== Dashboard — FROSTED GLASS ===== */
.anim-p2 .p2-dashboard {
position: absolute;
bottom: -30px;
right: -40px;
width: 92%;
max-width: 720px;
height: 420px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
0 8px 32px -8px rgba(0, 0, 0, 0.18),
0 30px 60px -15px rgba(0, 0, 0, 0.12);
padding: 20px 24px;
overflow: hidden;
will-change: transform, opacity;
transform: translate3d(0, 20px, 0) scale(0.98);
opacity: 0;
transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-p2 .p2-dashboard.show {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
/* ── Dashboard exit animation (slide-out before panel collapse) ── */
.anim-p2 .p2-dashboard.dashboard-exit {
transform: translate3d(0, 60px, 0) scale(0.97);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease;
}
/* ── Power-on: hide dashboard inner content until revealed ── */
.anim-p2 .p2-dash-header.power-hidden,
.anim-p2 .p2-metric-card.power-hidden,
.anim-p2 .p2-bottom-row .p2-card-aging.power-hidden,
.anim-p2 .p2-bottom-row .p2-card-ai.power-hidden,
.anim-p2 .p2-bottom-row .p2-card-alerts.power-hidden {
opacity: 0 !important;
transition: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DASHBOARD HEADER */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-dash-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
opacity: 0;
transform: translateY(8px);
}
.anim-p2 .p2-dash-header.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-p2 .p2-dash-header-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.anim-p2 .p2-dash-title {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.02em;
}
.anim-p2 .p2-dash-subtitle {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
}
.anim-p2 .p2-dash-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.anim-p2 .p2-live-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
.anim-p2 .p2-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
animation: p2Pulse 2s ease-in-out infinite;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
@keyframes p2Pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.9); }
}
.anim-p2 .p2-sync-time {
font-size: 10px;
color: rgba(255, 255, 255, 0.45);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* METRICS ROW (DSO, CASH, INVOICES) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-metrics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.anim-p2 .p2-metric-card {
background: #ffffff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 3px;
padding: 12px 14px;
opacity: 0;
transform: translateY(12px);
will-change: opacity, transform;
}
.anim-p2 .p2-metric-card.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.04);
}
.anim-p2 .p2-metric-label {
font-size: 10px;
font-weight: 600;
color: var(--ink-40);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.anim-p2 .p2-metric-value {
font-size: 22px;
font-weight: 300;
color: var(--ink-100);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 5px 0 4px 0;
font-family: 'Space Mono', monospace;
filter: blur(0);
transition: filter 0.1s linear;
}
.anim-p2 .p2-metric-value.rolling {
filter: blur(0.8px);
}
.anim-p2 .p2-metric-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.anim-p2 .p2-metric-sub {
font-size: 10px;
color: var(--ink-40);
font-weight: 400;
}
.anim-p2 .p2-metric-delta {
font-size: 9px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 2px;
}
.anim-p2 .p2-metric-delta.positive {
background: rgba(16, 185, 129, 0.12);
color: var(--green);
}
.anim-p2 .p2-metric-delta.warning {
background: rgba(245, 158, 11, 0.12);
color: var(--amber);
}
.anim-p2 .p2-metric-delta.negative {
background: rgba(239, 68, 68, 0.12);
color: var(--red);
}
/* Sparkline in Cash card */
.anim-p2 .p2-metric-sparkline {
width: 100%;
height: 20px;
margin-top: 4px;
stroke-width: 1.5;
stroke: var(--green);
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* AI INTELLIGENCE CARD (THE SHOWPIECE) */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-ai-card {
background: #ffffff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 3px;
padding: 18px 20px;
opacity: 0;
transform: translateY(12px);
will-change: opacity, transform;
position: relative;
margin-bottom: 16px;
overflow: hidden;
}
.anim-p2 .p2-ai-card.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 20px 40px rgba(0,0,0,0.04), 0 10px 20px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
}
.anim-p2 .p2-ai-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, transparent 100%);
pointer-events: none;
}
.anim-p2 .p2-ai-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.anim-p2 .p2-ai-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--green);
flex-shrink: 0;
}
@keyframes p2AiRotate {
from { transform: rotate(0deg); opacity: 0.3; }
to { transform: rotate(360deg); opacity: 0; }
}
.anim-p2 .p2-ai-label {
font-size: 12px;
font-weight: 700;
color: var(--green);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.anim-p2 .p2-ai-confidence {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.anim-p2 .p2-confidence-bar {
width: 60px;
height: 2px;
background: var(--ink-10);
border-radius: 1px;
overflow: hidden;
}
.anim-p2 .p2-confidence-fill {
height: 100%;
background: var(--green);
width: 0%;
border-radius: 1px;
}
.anim-p2 .p2-confidence-text {
font-size: 10px;
font-weight: 700;
color: var(--green);
font-family: 'Space Mono', monospace;
}
.anim-p2 .p2-ai-body {
position: relative;
z-index: 1;
margin-bottom: 12px;
}
.anim-p2 .p2-ai-message {
font-size: 12px;
line-height: 1.5;
color: var(--ink-80);
font-weight: 400;
min-height: 36px;
word-break: break-word;
}
.anim-p2 .p2-ai-cursor {
display: inline-block;
width: 1px;
height: 14px;
background: var(--ink-100);
margin-left: 2px;
animation: p2Blink 0.7s ease-in-out infinite;
vertical-align: -2px;
}
.anim-p2 .p2-ai-cursor.done {
animation: none;
display: none;
}
@keyframes p2Blink {
0%, 49%, 100% { opacity: 1; }
50%, 99% { opacity: 0; }
}
.anim-p2 .p2-ai-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.anim-p2 .p2-ai-action-pill {
font-size: 10px;
font-weight: 600;
padding: 6px 12px;
border-radius: 3px;
background: rgba(16, 185, 129, 0.1);
color: var(--green);
border: 1px solid rgba(16, 185, 129, 0.2);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
transform: scale(0.8);
will-change: transform, opacity;
}
.anim-p2 .p2-ai-action-pill.show {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Clickable link inside AI message */
.anim-p2 .p2-ai-link {
color: var(--green);
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
cursor: pointer;
font-weight: 500;
}
/* Animated demo cursor */
.anim-p2 .p2-demo-cursor {
position: absolute;
width: 18px;
height: 22px;
z-index: 20;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.anim-p2 .p2-demo-cursor.visible {
opacity: 1;
}
/* Detail card that expands below the AI message */
.anim-p2 .p2-detail-card {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -46%) scale(0.92);
width: 88%;
max-width: 380px;
background: #ffffff;
border-radius: 3px;
box-shadow:
0 20px 60px -10px rgba(0, 0, 0, 0.28),
0 8px 24px -6px rgba(0, 0, 0, 0.14),
0 0 0 1px rgba(0, 0, 0, 0.06);
opacity: 0;
z-index: 15;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.anim-p2 .p2-detail-card.open {
opacity: 1;
transform: translate(-50%, -46%) scale(1);
}
.anim-p2 .p2-detail-card-header {
padding: 14px 18px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
gap: 8px;
}
.anim-p2 .p2-detail-card-header svg {
color: #ef4444;
flex-shrink: 0;
}
.anim-p2 .p2-detail-card-title {
font-size: 12px;
font-weight: 700;
color: var(--ink-80);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.anim-p2 .p2-detail-card-inner {
padding: 4px 0;
}
.anim-p2 .p2-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-p2 .p2-detail-row:last-child {
border-bottom: none;
}
.anim-p2 .p2-detail-row.show {
opacity: 1;
transform: translateY(0);
}
.anim-p2 .p2-detail-name {
font-size: 12px;
font-weight: 600;
color: var(--ink-80);
min-width: 0;
}
.anim-p2 .p2-detail-reason {
font-size: 11px;
color: var(--ink-40);
margin-left: 10px;
flex: 1;
min-width: 0;
}
.anim-p2 .p2-detail-action {
font-size: 10px;
font-weight: 600;
padding: 4px 10px;
border-radius: 3px;
background: rgba(16, 185, 129, 0.1);
color: var(--green);
white-space: nowrap;
flex-shrink: 0;
margin-left: 10px;
}
.anim-p2 .p2-detail-row.risk .p2-detail-action {
background: rgba(239, 68, 68, 0.1);
color: var(--red);
}
.anim-p2 .p2-ai-action-pill:hover {
background: rgba(16, 185, 129, 0.15);
transform: translateY(-2px);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* AGING BUCKETS & ALERTS ROW */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-content-row {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 14px;
}
.anim-p2 .p2-aging-card {
background: var(--card-bg);
border: 1px solid rgba(26, 26, 26, 0.06);
border-radius: 3px;
padding: 16px 18px;
opacity: 0;
transform: translateY(12px);
will-change: opacity, transform;
}
.anim-p2 .p2-aging-card.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 10px 20px rgba(0,0,0,0.04);
}
.anim-p2 .p2-card-title {
font-size: 10px;
font-weight: 600;
color: var(--ink-40);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
.anim-p2 .p2-aging-bars {
display: flex;
align-items: flex-end;
gap: 8px;
height: 70px;
}
.anim-p2 .p2-bar-segment {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.anim-p2 .p2-bar-column {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.anim-p2 .p2-bar {
width: 70%;
height: 0%;
border-radius: 2px 2px 0 0;
transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease, transform 0.3s ease;
will-change: height, filter;
}
/* Re-lighting: bars glow as the sweep passes over them */
.anim-p2 .p2-bar.illuminated {
filter: brightness(1.5) saturate(1.2);
transform: scaleX(1.05);
}
.anim-p2 .p2-bar.current { background: var(--green); }
.anim-p2 .p2-bar.d1-30 { background: var(--amber); }
.anim-p2 .p2-bar.d31-60 { background: var(--orange); }
.anim-p2 .p2-bar.d61-90 { background: #F97316; }
.anim-p2 .p2-bar.d90plus { background: var(--red); }
.anim-p2 .p2-bar-label {
font-size: 8px;
font-weight: 500;
color: var(--ink-40);
text-align: center;
}
.anim-p2 .p2-aging-total {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--ink-10);
font-size: 10px;
font-weight: 600;
color: var(--ink-100);
text-align: right;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* RISK ALERTS CARD */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-alerts-card {
background: #ffffff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 3px;
padding: 16px 18px;
opacity: 0;
transform: translateY(12px);
will-change: opacity, transform;
overflow: hidden;
}
.anim-p2 .p2-alerts-card.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.04);
}
.anim-p2 .p2-alert-item {
display: flex;
gap: 10px;
padding: 8px 0;
border-left: 2px solid transparent;
padding-left: 10px;
margin-left: -10px;
opacity: 0;
transform: translateX(16px);
transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
border-bottom: 1px solid var(--ink-10);
}
.anim-p2 .p2-alert-item:last-child {
border-bottom: none;
}
.anim-p2 .p2-alert-item.show {
opacity: 1;
transform: translateX(0);
}
.anim-p2 .p2-alert-item.risk {
border-left-color: var(--red);
}
.anim-p2 .p2-alert-item.warning {
border-left-color: var(--amber);
}
.anim-p2 .p2-alert-item.info {
border-left-color: var(--green);
}
.anim-p2 .p2-alert-text {
font-size: 10px;
line-height: 1.4;
color: var(--ink-60);
}
.anim-p2 .p2-alert-text strong {
color: var(--ink-100);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* REFRESH EFFECTS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.anim-p2 .p2-refresh-shimmer {
position: absolute;
inset: 0;
z-index: 100;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0) 30%,
rgba(255,255,255,0.35) 50%,
rgba(255,255,255,0) 70%,
transparent 100%
);
transform: translateX(-100%);
pointer-events: none;
mix-blend-mode: overlay;
}
.anim-p2 .p2-refresh-shimmer.active {
animation: p2Sweep 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes p2Sweep {
to { transform: translateX(100%); }
}
/* ============================================ */
/* ===== DSO Glass Overlay ===== */
.hc-dso-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 200;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.hc-dso-overlay.hc-dso-visible {
opacity: 1;
transform: scale(1);
}
.hc-dso-overlay.hc-dso-exit {
opacity: 0;
transform: scale(1.04);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.hc-dso-overlay-number {
font-family: var(--font-ui);
font-size: 72px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #EAB308;
text-shadow: 0 0 40px rgba(234, 179, 8, 0.15);
transition: color 0.15s ease, text-shadow 0.3s ease;
}
.hc-dso-overlay-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.7);
margin-top: 8px;
}
.hc-dso-overlay-delta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: #EAB308;
margin-top: 12px;
transition: color 0.15s ease;
}
/* ════════════ PRODUCT PILLARS — Duna-style Accordion ════════════ */
/* v92: section chrome flipped to light. The .pillar-visual cards
retain their painterly atmospheric backdrops — those are
miniature cinematic "windows" inside the light section, which
is a better rhythm (frames on a wall) than a dark room with
dark frames. */
/* v111.1: pillars section tokenized — 88px header bottom and 120px
pillar-block gaps are intentional editorial breathing; left as-is. */
.section-pillars {
padding: var(--space-40) var(--space-12);
background: var(--bg-pure);
color: var(--text-primary);
position: relative;
}
.pillars-container {
max-width: 1440px;
margin: 0 auto;
}
/* v109.29: section header — eyebrow pill + large headline +
the existing subtext, grouped above the modules grid.
Matches the Gilion "Designed for all phases of deal work"
treatment: a distinctive, larger title that anchors the
section instead of leading with a small paragraph alone. */
.pillars-header {
max-width: 880px;
margin: 0 0 88px; /* off-scale 88 retained */
}
.pillars-eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-secondary);
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 6px 14px;
border-radius: 100px;
margin-bottom: var(--space-8);
}
.pillars-headline {
font-family: var(--font-sans);
font-size: 56px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.04;
color: var(--text-primary);
margin: 0 0 var(--space-6);
}
.pillars-subtext {
font-family: var(--font-ui);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.6;
max-width: 640px;
margin: 0;
}
/* ── Pillar block (one per pillar) ──
v111.1: 120px between blocks intentionally off-scale; first-block
top tokenized to --space-20 (80). */
.pillar-block {
padding: 120px 0; /* off-scale 120 retained */
}
.pillar-block:first-of-type {
padding-top: var(--space-20);
}
.pillar-top {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.pillar-tag {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 100px;
padding: 6px 14px;
}
.pillar-explore {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-secondary);
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 100px;
padding: 6px 14px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.pillar-explore:hover {
color: var(--text-primary);
border-color: rgba(0, 0, 0, 0.24);
}
.pillar-title {
font-family: var(--font-sans);
font-size: clamp(36px, 4.2vw, 56px);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 1.1;
color: var(--text-primary);
margin-bottom: 12px;
}
.pillar-subtitle {
font-family: var(--font-ui);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.6;
max-width: 520px;
margin-bottom: var(--space-12);
}
/* ── Content row: visual left, accordion right ── */
.pillar-content-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
/* Alternate rhythm: Collections flips to text-left / visual-right.
Uses grid-column so DOM order stays visual-first (semantic). */
.pillar-collections .pillar-content-row .pillar-visual { grid-column: 2; }
.pillar-collections .pillar-content-row .pillar-accordion { grid-column: 1; grid-row: 1; }
.pillar-visual {
position: relative;
background: #000000;
/* Slightly softened corner — less than product-monitor-frame's 16px */
border-radius: 10px;
aspect-ratio: 4 / 3;
overflow: hidden;
isolation: isolate;
}
/* Painterly cloud backdrop — zoomed into just the sky region of each
painting so the card reads as atmosphere, not figurative scene.
Each pillar gets its own classical painting keyed to its narrative:
Billing → harvest-sky clouds (hero-painting)
Collections → maritime sunset cumulus (trader at rest)
Insights → alpine sun + clouds (foresight)
*/
.pillar-visual::before {
content: '';
position: absolute;
inset: 0;
background: url('/assets/images/hero-painting.jpg') no-repeat;
background-size: auto 230%;
background-position: 50% 2%;
opacity: 0.92;
filter: saturate(0.92) brightness(0.85) contrast(1.05);
z-index: 0;
pointer-events: none;
}
.pillar-collections .pillar-visual::before {
background-image: url('/assets/images/Gemini_Generated_Image_hat70uhat70uhat7.jpg');
background-size: auto 200%;
background-position: 65% 5%;
opacity: 0.94;
}
.pillar-insights .pillar-visual::before {
background-image: url('/assets/images/Gemini_Generated_Image_l266vll266vll266.jpg');
background-size: auto 210%;
background-position: 50% 8%;
opacity: 0.9;
}
/* Dark vignette over the painting — soft edge fade so the
cinematic backdrop shows through clearly in the center,
with gentle darkening at edges for depth. No blur — let
the painting read as landscape, not frosted glass. */
.pillar-visual::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 90% at 50% 50%, rgba(12,11,9,0) 0%, rgba(12,11,9,0.25) 70%, rgba(12,11,9,0.55) 100%);
backdrop-filter: blur(1px) saturate(1.04);
-webkit-backdrop-filter: blur(1px) saturate(1.04);
z-index: 1;
pointer-events: none;
}
.pillar-visual-placeholder {
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ════════════ USE CASES — HockeyStack-style numbered list ════════════
Editorial vertical list with three columns per row: index "(01)",
large serif headline, and a short body paragraph on the right.
Dividers between rows. Sits on a light register, before pillars. */
/* v111.1: usecases tokenized; 120 bottom retained off-scale —
it pairs visually with adjacent .section-pillars top. */
.section-usecases {
background: var(--bg);
color: var(--text-primary);
padding: var(--space-40) var(--space-12) 120px;
position: relative;
}
.usecases-container {
max-width: 1440px;
margin: 0 auto;
}
.usecases-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: 88px; /* off-scale 88 retained */
}
.usecases-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.usecases-list {
display: flex;
flex-direction: column;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.usecase-row {
display: grid;
grid-template-columns: 96px 1fr 360px;
gap: 56px; /* off-scale 56 retained — sets row rhythm */
align-items: start;
padding: var(--space-10) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
color: inherit;
}
.usecase-row:hover {
padding-left: var(--space-3);
}
.usecase-row:hover .usecase-headline {
color: var(--accent);
}
.usecase-num {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 400;
color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
padding-top: 28px;
white-space: nowrap;
}
.usecase-headline {
/* Big editorial serif headline. Instrument Serif is already loaded
on the page; weight 400 keeps it elegant rather than bold. */
font-family: 'Instrument Serif', 'Tiempos Headline', Georgia, serif;
font-size: clamp(40px, 4.6vw, 64px);
font-weight: 400;
letter-spacing: -0.012em;
line-height: 1.05;
color: var(--text-primary);
margin: 0;
transition: color 0.3s ease;
}
.usecase-body {
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
padding-top: 36px;
margin: 0;
}
@media (max-width: 900px) {
.section-usecases { padding: var(--space-24) var(--space-6) var(--space-20); }
.usecases-eyebrow { margin-bottom: 56px; } /* off-scale 56 retained */
.usecase-row {
grid-template-columns: 56px 1fr;
gap: var(--space-4) var(--space-5);
padding: var(--space-8) 0; /* 28 → 32 */
}
.usecase-num { padding-top: var(--space-4); font-size: 12px; } /* 14 → 16 */
.usecase-body {
grid-column: 1 / -1;
padding-top: 0;
margin-top: -8px;
}
.usecase-row:hover { padding-left: 0; }
}
/* ════════════ MOONLIGHT PILLARS — Legora-style atmospheric overview ════════════
Three side-by-side tall cards. Each card: painterly cloud painting
full-bleed in the background, a tag at top, ONE floating UI artifact
with its own subtle animation centered, and the pillar title anchored
at the bottom. Inspired by legora.com's product showcase. */
/* v111.1: moonlight grid tokenized (28 → 32 top margin). */
.moonlight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-6);
align-items: start;
}
/* v109.33: HOLISTIC INTELLIGENCE HERO CARD.
Wide rectangular card above the three modules — represents
the always-on Gathers Agent that powers all of them. Subtle
dotted grid background (data canvas) with a centered live
status widget. The three module cards below sit underneath
as the surfaces this single agent operates through. */
.moonlight-hero {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
margin-top: var(--space-8);
}
/* v109.37: bridge paragraph that sits BETWEEN the hero card
and the three module cards. Acts as a transition,
explaining how the agent shown in the hero powers the
modules below. Center-aligned + narrower max-width so it
reads as a section interlude, not a card label. */
.moonlight-bridge {
/* v111.2: margin collapsed so hero sits flush below grid —
bento group reads as one unit; chat box straddles seam. */
max-width: 720px;
margin: var(--space-6) auto var(--space-6);
text-align: center;
}
.moonlight-bridge-title {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.020em;
line-height: 1.2;
color: var(--text-primary);
margin: 0 0 var(--space-4); /* 14 → 16 */
}
.moonlight-bridge-desc {
font-family: var(--font-ui);
font-size: 15.5px;
font-weight: 400;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
.moonlight-pillar--hero {
/* v109.37: taller hero — 380px gives the agent widget
more room to breathe and lets the dotted-grid
background read as a "data canvas" instead of a
cramped banner. Still well under the height of the
3 square module cards below. */
aspect-ratio: auto;
height: 380px;
}
.moonlight-pillar.moonlight-pillar--hero {
overflow: hidden;
}
.moonlight-pillar.moonlight-pillar--hero .ml-bg {
background:
url('/assets/images/hero-bg-dolomites.jpg') center / cover no-repeat,
#F0EEE8;
}
/* ═══════════════════════════════════════════════════════════
v109.38: MERCURY-STYLE shared treatment for module artifacts.
Each card gets one hyper-real UI fragment centered on a soft
purple ambient glow, with AI sparkle pills floating next to
AI-extracted data. Cleaner, more product-y than the previous
painterly/abstract approach.
═══════════════════════════════════════════════════════════ */
/* v109.39: purple ambient glow removed. The artifacts now sit
flat on the card surface — cleaner, more restrained. The
.ml-artifact-glow elements are still in the HTML in case
we want to restore the lift later. */
.ml-artifact-glow {
display: none;
}
/* AI sparkle pill — a small white chip with a purple sparkle
that floats next to AI-extracted data. The visual marker
of intelligence: "this value was extracted, not entered." */
.ml-ai-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px 4px 8px;
background: #FFFFFF;
border-radius: 100px;
box-shadow:
0 6px 18px -4px rgba(0,0,0,0.10),
0 1px 3px rgba(0,0,0,0.05);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: -0.003em;
color: var(--text-primary);
white-space: nowrap;
}
.ml-ai-pill svg {
width: 10px;
height: 10px;
color: #8B6DFF;
flex-shrink: 0;
}
/* Shared "lifted" card chrome for the inner artifact —
white surface, rounded corners, layered shadow. */
.ml-mercury-card {
position: relative;
z-index: 2;
background: #FFFFFF;
border-radius: 12px;
box-shadow:
0 12px 36px -8px rgba(0,0,0,0.10),
0 2px 6px rgba(0,0,0,0.04);
}
/* Billing card artifact — a Mercury-style invoice schedule
fragment. Replaces the dated drag-and-drop animation (which
misrepresented enterprise reality where contracts arrive via
Salesforce / Ironclad / inbox, not by humans dragging PDFs). */
.ml-billing-schedule {
width: 76%;
padding: 14px 16px 14px;
font-family: var(--font-ui);
}
.ml-bs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ml-bs-source {
font-size: 11.5px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.003em;
}
.ml-bs-source-sub {
font-size: 10px;
font-weight: 400;
color: var(--text-secondary);
margin-top: 2px;
letter-spacing: 0;
}
.ml-bs-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 7px 0;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
.ml-bs-row + .ml-bs-row {
border-top: 1px solid rgba(0,0,0,0.04);
}
.ml-bs-date {
color: var(--text-secondary);
letter-spacing: -0.005em;
}
.ml-bs-amount {
color: var(--text-primary);
font-weight: 500;
letter-spacing: -0.005em;
}
.ml-bs-footer {
padding-top: 10px;
margin-top: 4px;
border-top: 1px solid rgba(0,0,0,0.05);
font-size: 10.5px;
color: rgba(0,0,0,0.42);
letter-spacing: -0.003em;
}
/* AI pills floating OVER the contract document — positioned
to roughly align with the section of contract text each
pill represents (source near the header, amount near the
fees clause, terms near the payment clause).
v109.46: z-index bumped to 5 so the pills sit ABOVE the
blur+tint veil (z-index 4) and stay crisp even when they
overlap the dissolving bottom of the contract. */
.ml-billing-pill-source {
/* v109.48: snapped up to the contract's top-left corner —
hangs over the corner like a tag attached to the document. */
position: absolute;
top: 9%;
left: 8%;
z-index: 5;
}
.ml-billing-pill-amount {
position: absolute;
top: 46%;
right: 2%;
z-index: 5;
}
.ml-billing-pill-terms {
position: absolute;
bottom: 22%;
left: 6%;
z-index: 5;
}
/* v109.47: usage-based / metered billing pill — diagonally
opposite the Net 45 pill, sits over the lower-right of
the contract (in the blurred zone). Communicates that
Gathers extracts complex pricing models too, not just
flat retainers. */
.ml-billing-pill-usage {
position: absolute;
bottom: 8%;
right: 4%;
z-index: 5;
}
/* v111.4: Collections artifact rebuilt as a SIMPLIFIED
Singularity Landscape — borrowed from the v64 prototype.
Two paired beats stacked vertically: each row is a
logic-card on the left, an email-bubble on the right, and
a dot on a central vertical rail connecting them. The
bottom row carries the active "playhead" (a blue dot with
a soft expanding pulse) so the card has a living moment
without needing a scroll-driven sequence. Stage + dissolve
veil are unchanged from v111.3. */
.ml-collections-stage {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.ml-collections-stage::after {
/* v111.12: dissolve veil softened. Height 50→35%, backdrop
blur 6→2px so the upcoming row underneath stays
legible instead of getting double-blurred (own filter
+ the veil's backdrop filter). */
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 35%;
pointer-events: none;
z-index: 4;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background: linear-gradient(180deg,
rgba(230, 230, 230, 0) 0%,
rgba(230, 230, 230, 0.55) 55%,
rgba(230, 230, 230, 0.95) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
}
/* v111.9: two scenes inside .ml-collections-stage — timeline
plays first (the conversation), kanban plays second (the
resolution). Only one scene is visible at a time. JS
toggles .is-current. */
.ml-collections-scene {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ml-collections-scene.is-current {
opacity: 1;
pointer-events: auto;
}
/* v111.8: mini KANBAN — Acme Corp card moves Nudged → Promised
→ Paid as the second scene. Three columns side by side,
each with a header (name + count) and one faded ghost
card. The traveling Acme card slides between slots with
the iOS sheet curve from the FSC kanban. */
.ml-ck-board {
position: absolute;
top: 8%;
left: 4%;
right: 4%;
bottom: 6%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
z-index: 2;
}
.ml-ck-col {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.ml-ck-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2px 4px 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: 2px;
}
.ml-ck-col-name {
font-family: var(--font-ui);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.50);
line-height: 1;
}
.ml-ck-col-count {
font-family: var(--font-ui);
font-size: 8px;
font-weight: 600;
color: rgba(0, 0, 0, 0.40);
padding: 1px 5px;
background: rgba(0, 0, 0, 0.06);
border-radius: 999px;
line-height: 1.4;
}
.ml-ck-col-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Faded ghost cards in each column (other accounts as context) */
.ml-ck-ghost {
background: rgba(255, 255, 255, 0.78);
border-radius: 6px;
padding: 7px 9px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
opacity: 0.55;
}
.ml-ck-ghost-name {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 600;
color: rgba(0, 0, 0, 0.65);
margin-bottom: 2px;
line-height: 1.2;
}
.ml-ck-ghost-meta {
font-family: var(--font-ui);
font-size: 8px;
color: rgba(0, 0, 0, 0.42);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.ml-ck-ghost--paid {
background: rgba(230, 250, 240, 0.85);
}
.ml-ck-ghost--paid .ml-ck-ghost-meta {
color: rgba(40, 130, 80, 0.80);
}
/* The traveling Acme card — sits absolutely positioned over
the board, slides between the three column slots. */
.ml-ck-traveler {
position: absolute;
top: 30px;
left: 0;
width: 30%;
transform: translateX(2%);
transition:
transform 0.95s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.45s ease-out;
z-index: 4;
}
.ml-ck-traveler.is-pos-nudged { transform: translateX(2%); }
.ml-ck-traveler.is-pos-promised { transform: translateX(118%); }
.ml-ck-traveler.is-pos-paid { transform: translateX(234%); }
.ml-ck-traveler.is-resetting { opacity: 0; }
.ml-ck-card {
background: #FFFFFF;
border-radius: 8px;
padding: 10px 12px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 14px 32px -8px rgba(91, 124, 255, 0.28);
border: 1px solid rgba(91, 124, 255, 0.18);
transition:
background 0.5s ease,
border-color 0.5s ease,
box-shadow 0.5s ease;
position: relative;
}
/* When the Acme card lands in Paid, swap accent from blue → green */
.ml-ck-traveler.is-pos-paid .ml-ck-card {
background: linear-gradient(180deg,
rgba(240, 252, 246, 1) 0%,
rgba(228, 248, 238, 1) 100%);
border: 1px solid rgba(80, 180, 110, 0.22);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 14px 32px -8px rgba(80, 180, 110, 0.30);
}
.ml-ck-card-name {
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 700;
color: rgba(0, 0, 0, 0.85);
line-height: 1.2;
margin-bottom: 4px;
}
.ml-ck-card-amount {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: rgba(0, 0, 0, 0.88);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
line-height: 1.2;
margin-bottom: 2px;
}
.ml-ck-card-meta {
font-family: var(--font-ui);
font-size: 8px;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0;
line-height: 1.3;
min-height: 11px;
}
/* Paid badge — hidden by default, fades in once the card
lands in the Paid column. Replaces the "14d · 2 touches"
meta text with a green ✓ Paid chip. */
.ml-ck-card-paid-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: rgba(80, 180, 110, 0.18);
color: rgba(40, 130, 80, 0.98);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
position: absolute;
bottom: 9px;
left: 12px;
opacity: 0;
transform: scale(0.7);
transition:
opacity 0.35s ease-out,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: left center;
}
.ml-ck-card-paid-badge svg {
width: 7px;
height: 7px;
}
.ml-ck-traveler.is-pos-paid .ml-ck-card-paid-badge {
opacity: 1;
transform: scale(1);
transition-delay: 0.4s;
}
.ml-ck-traveler.is-pos-paid .ml-ck-card-meta-text {
opacity: 0;
transition: opacity 0.25s ease-out;
}
.ml-ck-card-meta-text {
transition: opacity 0.4s ease;
}
/* ── TIMELINE CSS (v111.5-7) — plays as the first scene
before the kanban. ── */
.ml-ct-board {
position: absolute;
top: 12%;
left: 4%;
right: 4%;
bottom: 0;
z-index: 2;
}
/* v111.6: rail moved from center to LEFT edge — now that the
logic-card column is gone and the bubble takes the full
remaining width, the timeline runs down the left side
(like a chat / activity feed). */
.ml-ct-rail {
position: absolute;
top: 12%;
bottom: 12%;
left: 14px;
width: 1px;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.10) 25%,
rgba(0, 0, 0, 0.10) 75%,
rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
/* Row = 2-column grid: dot | bubble. Bubble takes the rest
of the row's horizontal space — much larger and more
readable than the previous 50/50 split.
v111.12: reduced blur across all states so the previous
and upcoming rows stay readable instead of fully smudged.
Default (hidden) 6px → 3px. Active 0. Passed/upcoming 3px
→ 1.2px. Opacity on passed/upcoming bumped 0.32 → 0.55
so the messages are visibly legible, just visually quieter
than the active one. */
.ml-ct-row {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 0;
z-index: 2;
/* v111.19: dialed everything back so the transition
reads as a soft glide, not a tumbling roll.
— translateY trimmed: ±80–96px → ±55–65px
— scale change trimmed: 0.88/0.94 → 0.96/0.98
— blur trimmed: 3px/1.2px → 1.4px/0.6px
— transforms slowed slightly: 1.0s → 1.25s
Less amplitude on every axis + slower curve →
conveyor feels like a soft cross-fade with gentle
vertical drift instead of a roll. */
opacity: 0;
transform: translateY(calc(-50% + 65px)) scale(0.96);
filter: blur(1.4px);
transition:
opacity 0.40s ease-in,
transform 1.25s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.40s ease-in;
pointer-events: none;
}
/* Focal row: centered, sharp, in front. Soft glide on
entry — the arrival beat is what the eye should track. */
.ml-ct-row.is-active {
opacity: 1;
transform: translateY(-50%) scale(1);
filter: blur(0);
z-index: 3;
transition:
opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.25s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Just left center: receding upward, just a whisper of
blur + scale-down so it reads as history without
feeling like it's tumbling away. */
.ml-ct-row.is-passed {
opacity: 0.55;
transform: translateY(calc(-50% - 55px)) scale(0.98);
filter: blur(0.6px);
transition:
opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.25s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Logic card (LEFT) — the AI's recorded action */
.ml-ct-logic {
background: #FFFFFF;
border-radius: 8px;
padding: 8px 10px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 16px -6px rgba(0, 0, 0, 0.06);
}
.ml-ct-logic-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ml-ct-logic-title {
font-family: var(--font-ui);
font-size: 8.5px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
letter-spacing: -0.005em;
line-height: 1.2;
}
.ml-ct-status {
font-family: var(--font-ui);
font-size: 6px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.45);
flex-shrink: 0;
line-height: 1;
}
.ml-ct-status--sent {
background: rgba(120, 220, 160, 0.16);
color: rgba(40, 130, 80, 0.95);
}
.ml-ct-status--active {
background: rgba(91, 124, 255, 0.14);
color: rgba(74, 100, 220, 0.98);
}
.ml-ct-check {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 7px;
color: rgba(0, 0, 0, 0.62);
letter-spacing: 0;
line-height: 1.3;
margin-top: 4px;
}
.ml-ct-check:first-of-type {
margin-top: 0;
}
.ml-ct-checkbox {
width: 10px;
height: 10px;
border-radius: 2.5px;
background: rgba(20, 20, 24, 0.92);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ml-ct-checkbox svg {
width: 7px;
height: 7px;
}
/* Spinner: three pulsing dots + label */
.ml-ct-spinner {
display: flex;
align-items: center;
gap: 3px;
margin-top: 2px;
}
.ml-ct-spin-dot {
width: 3.5px;
height: 3.5px;
border-radius: 50%;
background: rgba(91, 124, 255, 0.55);
animation: mlCtBounce 1.2s infinite ease-in-out;
}
.ml-ct-spin-dot:nth-child(2) { animation-delay: 0.18s; }
.ml-ct-spin-dot:nth-child(3) { animation-delay: 0.36s; }
.ml-ct-spin-label {
font-family: var(--font-ui);
font-size: 7px;
font-weight: 500;
color: rgba(0, 0, 0, 0.55);
margin-left: 4px;
letter-spacing: 0;
}
@keyframes mlCtBounce {
0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
40% { opacity: 0.95; transform: translateY(-2px); }
}
/* Dot in the LEFT column. Sits on the rail at left: 14px
(column is 28px → center is at 14px, matching the rail).
Default grey; the active row's dot becomes a glowing
blue playhead with an expanding pulse halo. */
.ml-ct-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.18);
justify-self: center;
align-self: center;
position: relative;
z-index: 3;
transition:
width 0.5s ease,
height 0.5s ease,
background 0.5s ease,
box-shadow 0.5s ease;
}
.ml-ct-row.is-active .ml-ct-dot {
width: 10px;
height: 10px;
background: #5B7CFF;
box-shadow:
0 0 0 4px rgba(91, 124, 255, 0.16),
0 0 14px rgba(91, 124, 255, 0.42);
}
/* v111.13: hide the dots on passed/upcoming rows. They were
floating off the visible portion of the rail (rows
translate ±80px vertically while the rail itself stays
centered) and read as orphan smudges. Only the active
row's dot — the playhead — sits on the rail. */
.ml-ct-row:not(.is-active) .ml-ct-dot {
opacity: 0;
}
/* Pulse halo: only visible on the active row */
.ml-ct-pulse {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(91, 124, 255, 0.55);
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}
.ml-ct-row.is-active .ml-ct-pulse {
animation: mlCtPulse 2.2s infinite ease-out;
}
@keyframes mlCtPulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}
/* v111.7: bubbles differentiate by direction of the message.
.ml-ct-email--gathers (outbound, AI-sent) = subtle blue
tint so the viewer can see at a glance which messages
came from Gathers vs the customer.
.ml-ct-email--customer (inbound, human reply) = plain
white — the same surface as the card's other artifacts.
This communicates the back-and-forth cadence visually,
even before the viewer reads the sender labels. */
.ml-ct-email {
background: #FFFFFF;
border-radius: 10px;
padding: 14px 16px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 10px 24px -8px rgba(0, 0, 0, 0.08);
}
.ml-ct-email--gathers {
background: linear-gradient(180deg,
rgba(238, 243, 255, 1) 0%,
rgba(245, 247, 255, 1) 100%);
border: 1px solid rgba(91, 124, 255, 0.10);
}
.ml-ct-email--customer {
background: #FFFFFF;
}
/* The active row's bubble gets a stronger blue lift on top
of whatever direction tint it already has. */
.ml-ct-row.is-active .ml-ct-email {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 14px 32px -8px rgba(91, 124, 255, 0.22);
}
.ml-ct-row.is-active .ml-ct-email--customer {
border: 1px solid rgba(91, 124, 255, 0.18);
}
.ml-ct-row.is-active .ml-ct-email--gathers {
border-color: rgba(91, 124, 255, 0.25);
}
/* Small directional arrow between sender and recipient */
.ml-ct-email-arrow {
display: inline-block;
margin: 0 4px;
color: rgba(91, 124, 255, 0.65);
font-weight: 600;
}
.ml-ct-email-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.ml-ct-email-from {
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 700;
color: rgba(0, 0, 0, 0.78);
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
}
.ml-ct-email-time {
font-family: var(--font-ui);
font-size: 9px;
color: rgba(0, 0, 0, 0.42);
letter-spacing: 0;
flex-shrink: 0;
}
.ml-ct-email-body {
font-family: var(--font-ui);
font-size: 11px;
line-height: 1.55;
color: rgba(0, 0, 0, 0.62);
letter-spacing: -0.005em;
}
/* AI pills floating over the Insights dashboard fragment.
v109.49: repositioned for the new corner-peek dashboard
layout — trend pill at top-right (over where the DSO
metric sits), target pill at bottom-right (in the area
where the dashboard fades past the bottom-right). */
.ml-insights-pill-trend {
position: absolute;
top: 14%;
right: 6%;
z-index: 5;
}
.ml-insights-pill-vs {
position: absolute;
bottom: 18%;
right: 4%;
z-index: 5;
}
/* The collections bubble already has white backdrop + drop
shadow from its existing styles. Just ensure it sits above
the (now-hidden) glow layer. */
.moonlight-collections .ml-bubble {
position: relative;
z-index: 2;
}
/* v109.52: soft blur veils on the LEFT and BOTTOM edges of
the Insights card. The dashboard fragment fades smoothly
into the card surface on those edges instead of meeting
it with a hard line — same trick used on the Billing
contract's bottom. ::before handles the left fade,
::after handles the bottom fade. */
.moonlight-insights .moonlight-artifact::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 22%;
pointer-events: none;
z-index: 4;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background: linear-gradient(90deg,
rgba(230, 230, 230, 0.55) 0%,
rgba(230, 230, 230, 0) 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}
.moonlight-insights .moonlight-artifact::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 28%;
pointer-events: none;
z-index: 4;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background: linear-gradient(180deg,
rgba(230, 230, 230, 0) 0%,
rgba(230, 230, 230, 0.65) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
}
/* ═══════════════════════════════════════════════════════════
v109.50: INSIGHTS DASHBOARD FRAGMENT — Apple-quality
reporting UI peek. Mercury-style "Credit Card" layout:
big metric + progress + info rows on the left, soft area
chart on the right, summary strip + transaction table
starting at the bottom. Whole thing peeks from top-left,
extends past right + bottom edges with hard clipping.
═══════════════════════════════════════════════════════════ */
.ml-insights-dashboard {
position: absolute;
top: 44px;
left: 44px;
width: 150%;
background: #FFFFFF;
border-radius: 14px;
box-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 16px 40px -8px rgba(0,0,0,0.10);
padding: 22px 26px 26px;
font-family: var(--font-ui);
z-index: 2;
color: rgba(0,0,0,0.92);
}
/* Subtle search bar (UI chrome cue) */
.ml-id-search {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 12px;
background: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.04);
border-radius: 7px;
font-size: 10.5px;
color: rgba(0,0,0,0.40);
letter-spacing: -0.003em;
margin-bottom: 18px;
}
.ml-id-search svg {
width: 11px;
height: 11px;
opacity: 0.50;
flex-shrink: 0;
}
.ml-id-search-cmd {
margin-left: auto;
padding: 2px 5px;
background: rgba(0,0,0,0.05);
border-radius: 3px;
font-family: var(--font-mono);
font-size: 9px;
color: rgba(0,0,0,0.45);
}
/* Section title — "Receivables" */
.ml-id-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.022em;
line-height: 1.1;
color: rgba(0,0,0,0.92);
margin-bottom: 14px;
}
/* Total outstanding block */
.ml-id-total-label {
font-size: 11px;
color: rgba(0,0,0,0.52);
letter-spacing: -0.003em;
margin-bottom: 4px;
}
.ml-id-balance {
font-family: var(--font-sans);
font-size: 30px;
font-weight: 500;
letter-spacing: -0.028em;
color: rgba(0,0,0,0.94);
line-height: 1;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
/* Progress bar — Current / Past due split */
.ml-id-progress-bar {
height: 6px;
background: rgba(0,0,0,0.06);
border-radius: 100px;
overflow: hidden;
display: flex;
margin-bottom: 9px;
}
.ml-id-progress-current {
background: linear-gradient(90deg, #5B7CFF 0%, #8B6DFF 100%);
border-radius: 100px;
}
.ml-id-progress-pending {
background: rgba(91, 124, 255, 0.22);
}
/* Progress labels row */
.ml-id-progress-labels {
display: flex;
align-items: center;
font-size: 10.5px;
color: rgba(0,0,0,0.55);
margin-bottom: 6px;
letter-spacing: -0.003em;
}
.ml-id-progress-labels > span {
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: 14px;
}
.ml-id-progress-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.ml-id-dot-current {
background: linear-gradient(135deg, #5B7CFF, #8B6DFF);
}
.ml-id-dot-pending {
background: rgba(91, 124, 255, 0.35);
}
.ml-id-progress-amount {
margin-left: auto;
color: rgba(0,0,0,0.78);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* Show breakdown link */
.ml-id-expand {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
color: rgba(0,0,0,0.55);
letter-spacing: -0.003em;
margin-bottom: 16px;
}
.ml-id-expand svg {
width: 7px;
height: 7px;
opacity: 0.6;
}
/* Info rows — settings-style chips */
.ml-id-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 13px;
background: rgba(0,0,0,0.025);
border-radius: 8px;
font-size: 11px;
margin-bottom: 7px;
}
.ml-id-info-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(0,0,0,0.78);
font-weight: 500;
letter-spacing: -0.003em;
}
.ml-id-info-label svg {
width: 12px;
height: 12px;
opacity: 0.55;
}
.ml-id-info-value {
color: rgba(0,0,0,0.48);
font-variant-numeric: tabular-nums;
letter-spacing: -0.003em;
}
/* Area chart on the right side — sits in the upper-right of
the dashboard so it doesn't collide with the summary +
table below. */
.ml-id-chart {
position: absolute;
top: 60px;
right: -2%;
width: 52%;
height: 170px;
pointer-events: none;
}
.ml-id-chart-fill {
fill: url(#ml-id-gradient);
}
.ml-id-chart-line {
fill: none;
stroke: rgba(91, 124, 255, 0.70);
stroke-width: 1.6;
stroke-linejoin: round;
stroke-linecap: round;
}
.ml-id-chart-gridline {
stroke: rgba(0,0,0,0.05);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.ml-id-chart-axis-label {
font-family: var(--font-mono);
font-size: 8px;
fill: rgba(0,0,0,0.30);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ml-id-chart-point {
fill: rgb(91, 124, 255);
stroke: #FFFFFF;
stroke-width: 2;
}
.ml-id-chart-point-pulse {
fill: rgba(91, 124, 255, 0.18);
}
.ml-id-chart-tooltip {
fill: #FFFFFF;
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.12));
}
.ml-id-chart-tooltip-text {
font-family: var(--font-ui);
font-size: 9.5px;
fill: rgba(0,0,0,0.88);
font-weight: 500;
letter-spacing: -0.003em;
}
.ml-id-chart-tooltip-sub {
font-family: var(--font-mono);
font-size: 7px;
fill: rgba(0,0,0,0.45);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Bottom summary strip */
.ml-id-summary {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,0.05);
font-size: 11px;
color: rgba(0,0,0,0.55);
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: -0.003em;
}
.ml-id-summary-label {
font-weight: 600;
color: rgba(0,0,0,0.85);
}
.ml-id-summary-green {
color: rgb(6, 120, 80);
font-weight: 500;
}
.ml-id-summary-sep {
color: rgba(0,0,0,0.20);
}
/* Transaction table peek */
.ml-id-table-header,
.ml-id-table-row {
display: grid;
grid-template-columns: 68px 1fr 84px;
gap: 14px;
align-items: center;
}
.ml-id-table-header {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
color: rgba(0,0,0,0.42);
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 14px 0 8px;
}
.ml-id-table-row {
font-size: 11.5px;
padding: 9px 0;
color: rgba(0,0,0,0.78);
font-variant-numeric: tabular-nums;
border-top: 1px solid rgba(0,0,0,0.04);
letter-spacing: -0.003em;
}
.ml-id-table-row-amount {
text-align: right;
font-weight: 500;
color: rgba(0,0,0,0.92);
}
.ml-id-table-row-cust {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ml-id-table-row-cust::before {
content: '';
width: 16px;
height: 16px;
border-radius: 4px;
background: linear-gradient(135deg, rgba(91, 124, 255, 0.18), rgba(140, 109, 255, 0.18));
flex-shrink: 0;
}
/* v109.63: ASK GATHERS — frosted outer frame + white inner
card + status footer (Linear-style structure). Restored
the consumer-style frosted frame and brought back the
blue Gathers pill, now positioned inline with the typed
text on the input row. */
/* v109.67: frosted glass frame restored — wraps the near-white
grey card with a soft glass halo + inset highlight + drop
shadow. The card inside is now nearly white. */
.ml-ag-frame {
display: inline-flex;
flex-direction: column;
align-items: stretch;
padding: 12px;
background: rgba(255, 255, 255, 0.20);
-webkit-backdrop-filter: blur(14px) saturate(1.25);
backdrop-filter: blur(14px) saturate(1.25);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 22px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 2px rgba(0,0,0,0.04),
0 18px 48px -12px rgba(0,0,0,0.12);
width: 72%;
max-width: 720px;
position: relative;
z-index: 2;
}
/* v109.76: outer card lightened further — barely-there grey
that's only just distinguishable from the pure-white
writing box inside. */
.ml-ag-card {
width: 100%;
background: #FCFBF8;
border: 1px solid rgba(0,0,0,0.04);
border-radius: 14px;
font-family: var(--font-ui);
overflow: hidden;
padding: 6px;
}
/* WHITE WRITING BOX — pure white, with a slightly more visible
subtle grey frame so it reads as a distinct field inside the
near-white card.
v109.76: items align to the TOP of the box so the Gathers
pill + typed text both start at the top — gives the field
a "real input area" feel with empty space below for
additional typing. */
.ml-ag-input-box {
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
padding: 16px 18px;
min-height: 92px;
display: flex;
align-items: flex-start;
gap: 12px;
}
/* Input row no longer needed — collapsed into .ml-ag-input-box.
Kept the class for back-compat but it's a no-op now. */
.ml-ag-input-row {
display: contents;
}
/* Blue morphing pill with the Gathers G logo, sized to sit
comfortably next to the input text. */
.ml-ag-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 30px;
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.30),
0 4px 12px rgba(91, 124, 255, 0.32);
isolation: isolate;
}
.ml-ag-icon::before {
content: '';
position: absolute;
inset: -45%;
background: conic-gradient(
from 0deg,
#6BA0FF 0%,
#5B7CFF 25%,
#3D5BDF 50%,
#5B7CFF 75%,
#6BA0FF 100%
);
animation: ml-ag-morph 10s linear infinite;
z-index: 0;
}
@keyframes ml-ag-morph {
to { transform: rotate(360deg); }
}
.ml-ag-logo {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
}
/* Input text area, fills the row next to the pill.
v109.77: padding-top nudges the first line of text down by
~4px so its vertical center aligns with the middle of the
Gathers logo pill (which is taller than the text's natural
line-height). The pill stays at top, the text reads
centered with it. */
.ml-ag-input {
flex: 1;
min-width: 0;
font-family: var(--font-ui);
font-size: 15.5px;
font-weight: 400;
color: rgba(0,0,0,0.88);
letter-spacing: -0.008em;
line-height: 1.4;
min-height: 24px;
padding-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* v109.64: status footer removed — the card is just input +
toolbar, no "Connected to your stack" row. */
.ml-ag-cursor {
display: inline-block;
width: 1.5px;
height: 16px;
background: rgba(0,0,0,0.80);
vertical-align: -2px;
margin-left: 2px;
animation: ml-ag-blink 1s steps(1, end) infinite;
}
@keyframes ml-ag-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* Toolbar — sits BELOW the white writing box, inside the grey
outer card. No background or top border of its own; the
grey card around it carries the color. */
.ml-ag-toolbar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 8px 4px;
background: transparent;
}
/* Scope label — no chip border, just text + chevron, with a
soft hover background. */
.ml-ag-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
color: rgba(0,0,0,0.78);
letter-spacing: -0.003em;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.ml-ag-chip:hover {
background: rgba(0,0,0,0.04);
}
.ml-ag-chip svg {
width: 11px;
height: 11px;
color: rgba(0,0,0,0.45);
flex-shrink: 0;
}
/* Attachment button — bare paperclip icon, no pill. */
.ml-ag-attach {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: transparent;
color: rgba(0,0,0,0.50);
border: none;
cursor: pointer;
flex-shrink: 0;
padding: 0;
margin-left: auto;
transition: color 0.2s ease;
}
.ml-ag-attach:hover {
color: rgba(0,0,0,0.85);
}
.ml-ag-attach svg {
width: 16px;
height: 16px;
}
/* Send button — bordered white circle (kept). */
.ml-ag-send {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFFFFF;
color: rgba(0,0,0,0.60);
border: 1px solid rgba(0,0,0,0.10);
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ml-ag-send:hover {
color: rgba(0,0,0,0.90);
border-color: rgba(0,0,0,0.18);
}
.ml-ag-send svg {
width: 13px;
height: 13px;
}
@media (max-width: 900px) {
.ml-ag-frame { width: 90%; padding: 8px; border-radius: 18px; }
.ml-ag-card { padding: 12px 14px; }
.ml-ag-input { font-size: 13.5px; }
.ml-ag-chip { font-size: 11px; padding: 5px 10px; }
.ml-ag-icon { width: 36px; height: 28px; }
.ml-ag-logo { width: 16px; height: 16px; }
}
/* Centered live agent status widget */
.ml-agent-status {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
background: #FFFFFF;
border-radius: 10px;
box-shadow:
0 8px 28px -8px rgba(0,0,0,0.10),
0 1px 2px rgba(0,0,0,0.04);
}
.ml-agent-iconwrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 7px;
background: linear-gradient(135deg, #5C7BFF 0%, #8B6DFF 100%);
color: white;
flex-shrink: 0;
}
.ml-agent-iconwrap svg {
width: 15px;
height: 15px;
}
.ml-agent-content {
display: flex;
flex-direction: column;
gap: 3px;
}
.ml-agent-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.003em;
}
.ml-agent-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
animation: ml-agent-pulse 1.8s ease-in-out infinite;
}
@keyframes ml-agent-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.92); }
}
.ml-agent-stream {
font-family: var(--font-ui);
font-size: 12.5px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ml-agent-stream strong {
color: var(--text-primary);
font-weight: 600;
}
/* v100: each cell stacks tag → painting card → title vertically.
Tag and title are now SIBLINGS of the painting card rather than
overlaid on top of it. */
.moonlight-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.moonlight-pillar {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 4px;
overflow: hidden;
isolation: isolate;
text-decoration: none;
color: white;
cursor: pointer;
display: block;
/* v109.32: shadows removed — flat cards sit cleanly on the
page background without any drop shadow. */
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: none;
}
/* v102.10: hover lift removed — cards stay still on hover.
Shadow stays static so the card chrome doesn't pop. */
.moonlight-pillar:hover {
transform: none;
}
/* v109.31: painterly backdrops replaced with clean off-white
grey cards. The card surface is now a flat, calm canvas
that lets the artifacts inside (drop zone, chat bubble,
metric card) carry the visual interest on their own.
v22 (2026-05-21): true neutral light grey — clearly reads
as grey against the white section background, no warm or
earthy undertone. */
.moonlight-pillar .ml-bg {
position: absolute;
inset: 0;
background: #E6E6E6;
z-index: 0;
}
/* Title-darkening vignette removed — text now sits BELOW the
card on the section's light background, so the card itself
no longer needs a gradient overlay for legibility. */
/* v100: tag now sits ABOVE the painting card on the section's
light background. Dark text on a soft chip — no longer needs
backdrop blur or white text since it's not on the painting. */
.moonlight-tag {
align-self: center;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-secondary);
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 6px 14px;
border-radius: 100px;
}
/* v100: artifact lives inside the pillar card as an absolutely-
positioned centered element, since the pillar no longer has
the moonlight-content flex column wrapper around it. */
.moonlight-artifact {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
/* v109.29: title + description sit BELOW the card, LEFT-
aligned (matches Gilion's "Sourcing / Surface companies..."
treatment). Title is the short category name; description
is the punchy elaboration. The old eyebrow pill above the
card is gone — its content (Billing / Collections /
Insights & Reporting) moved here as the title.
v109.30: width 100% + align-self: stretch so they snap to
the card's full width (cell uses align-items: center which
would otherwise center them as inline blocks). */
.moonlight-title {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1.25;
color: var(--text-primary);
text-align: left;
text-shadow: none;
margin: 24px 0 8px;
align-self: stretch;
width: 100%;
}
/* Clickable title + up-right arrow — links each pillar's name
through to the dedicated product page (Billing, Collections,
Insights & Reporting). Arrow nudges up + right on hover for a
subtle "go there" affordance. */
.moonlight-title-link {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.moonlight-title-link:hover,
.moonlight-title-link:focus {
color: inherit;
text-decoration: none;
}
.moonlight-title-arrow {
color: var(--text-primary);
transform: translate(0, 0);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}
.moonlight-title-link:hover .moonlight-title-arrow,
.moonlight-title-link:focus .moonlight-title-arrow {
transform: translate(2px, -2px);
}
.moonlight-desc {
font-family: var(--font-ui);
font-size: 14.5px;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.55;
color: var(--text-secondary);
text-align: left;
margin: 0;
align-self: stretch;
width: 100%;
}
/* v100: floaty bob removed — cards inside the pillars now sit
still rather than drifting up and down. Keyframes kept as a
no-op so any element still referencing the animation is
harmless. */
@keyframes ml-float {
0%, 100% { transform: translateY(0); }
}
/* Container for the v92 invoicing animation embedded in the
Billing moonlight pillar. Provides a relatively-positioned,
fixed-aspect canvas for the absolutely-positioned pv-stage. */
.ml-billing-stage {
/* v109.40: Billing artifact reimagined as a contract
document peeking from the top, extending past the
bottom of the container with a soft mask-fade. The
AI sparkle pills float OVER the contract, pointing
at the terms Gathers extracted.
v109.43: extra blur veil added at the bottom via
::after with backdrop-filter, on top of the mask
gradient, for a softer dissipation effect. */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.ml-billing-stage::after {
/* v109.44: blur + fade-to-card-color veil. Sits over the
bottom half of the stage, progressively blurring the
contract underneath and tinting it toward the card's
own off-white grey. By the bottom of the container,
the contract has dissolved into the card surface
itself — no visible gap. */
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%;
pointer-events: none;
z-index: 4;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: linear-gradient(180deg,
rgba(230, 230, 230, 0) 0%,
rgba(230, 230, 230, 0.55) 55%,
rgba(230, 230, 230, 0.95) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
/* v109.44: contract stays SOLID all the way down — no mask.
It extends right to (and past) the container's bottom
edge. The blur+tint veil on .ml-billing-stage::after is
what creates the soft dissolve, applied OVER the solid
contract. Result: no visible gap between the contract
and the container bottom. */
.ml-billing-contract {
position: absolute;
top: 60px;
left: 12%;
right: 12%;
bottom: -30px;
background: #FFFFFF;
border-radius: 10px 10px 4px 4px;
box-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 14px 36px -8px rgba(0,0,0,0.10);
padding: 26px 28px;
overflow: hidden;
z-index: 2;
}
/* v109.45: Mercury-style proportions — TITLE is dominant,
everything else is tiny "decorative texture" suggesting
a real document at distance. The body text is just there
for visual weight; the title carries the meaning. Same
treatment as Mercury's "Bill" hero card. */
.ml-bc-header {
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ml-bc-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 500;
color: rgba(0,0,0,0.92);
letter-spacing: -0.020em;
line-height: 1.1;
margin-bottom: 6px;
}
.ml-bc-sub {
font-family: var(--font-ui);
font-size: 7px;
color: rgba(0,0,0,0.42);
line-height: 1.5;
letter-spacing: 0;
}
.ml-bc-section {
font-family: var(--font-ui);
font-size: 7.5px;
font-weight: 600;
color: rgba(0,0,0,0.65);
letter-spacing: 0.01em;
margin: 10px 0 3px;
}
.ml-bc-section:first-of-type {
margin-top: 0;
}
.ml-bc-para {
font-family: var(--font-ui);
font-size: 6.5px;
color: rgba(0,0,0,0.38);
line-height: 1.5;
letter-spacing: 0;
margin: 0;
}
@keyframes ml-draw {
0% { stroke-dashoffset: 240; }
70% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.moonlight-artifact > * { animation: none !important; }
}
/* Billing — invoice line-item card */
.ml-invoice-card {
width: 200px;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-radius: 12px;
padding: 20px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 14px 36px -8px rgba(0, 0, 0, 0.22);
animation: ml-float 5.5s ease-in-out infinite;
}
.ml-invoice-row {
height: 8px;
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
margin-bottom: 9px;
}
.ml-invoice-row.ml-row-head {
width: 60%;
height: 11px;
background: rgba(0, 0, 0, 0.18);
margin-bottom: 14px;
}
.ml-invoice-row.ml-row-short { width: 40%; }
.ml-invoice-row.ml-row-paid {
width: 50%;
background: rgba(16, 185, 129, 0.42);
margin-top: 14px;
margin-bottom: 0;
}
/* Collections — chat bubble with sequenced reveal:
typing dots → message text → PAID chip lands.
v102.13: bubble size is reserved by the final content so the
card doesn't reflow; the elements just opacity-stagger in. */
.ml-bubble {
position: relative;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-radius: 16px;
padding: 14px 16px 14px 18px;
width: 220px;
min-height: 96px; /* reserves bubble height so layout doesn't jump */
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 14px 36px -8px rgba(0,0,0,0.22);
}
/* Typing dots: visible at start of cycle, pulsing, then fade. */
.ml-bubble-typing {
display: flex;
gap: 5px;
position: absolute;
top: 16px;
left: 18px;
opacity: 0;
animation: ml-typing-show 6s steps(1, end) infinite;
}
.ml-bubble-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.32);
animation: ml-typing-bounce 1.2s ease-in-out infinite;
}
.ml-bubble-typing span:nth-child(2) { animation-delay: 0.16s; }
.ml-bubble-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ml-typing-bounce {
0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes ml-typing-show {
0%, 14% { opacity: 1; }
18%, 100% { opacity: 0; }
}
/* Message text: fades in once typing finishes. */
.ml-bubble-text {
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.78);
opacity: 0;
transform: translateY(2px);
animation: ml-msg-reveal 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ml-msg-reveal {
0%, 16% { opacity: 0; transform: translateY(2px); }
24%, 100% { opacity: 1; transform: translateY(0); }
}
.ml-bubble-mention {
color: rgb(46, 92, 184);
font-weight: 500;
}
/* PAID chip: lands after the message, with a small scale pop
for a satisfying "cha-ching" beat. */
.ml-bubble-chip {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 4px 9px;
background: rgba(16, 185, 129, 0.16);
color: rgb(6, 95, 70);
font-size: 9.5px;
font-family: var(--font-mono);
font-weight: 700;
border-radius: 4px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transform: scale(0.86);
transform-origin: left center;
animation: ml-chip-pop 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.ml-bubble-chip::before { content: '✓'; font-size: 11px; }
@keyframes ml-chip-pop {
0%, 32% { opacity: 0; transform: scale(0.86); }
42% { opacity: 1; transform: scale(1.05); }
48%, 100% { opacity: 1; transform: scale(1); }
}
/* Insights — DSO metric card with drawing sparkline */
.ml-metric-card {
width: 200px;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-radius: 12px;
padding: 18px 20px 16px;
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 14px 36px -8px rgba(0,0,0,0.22);
animation: ml-float 5.5s ease-in-out infinite;
animation-delay: -2.4s;
}
.ml-metric-label {
font-family: var(--font-mono);
font-size: 9.5px;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ml-metric-value {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.025em;
color: rgba(0, 0, 0, 0.92);
margin-bottom: 12px;
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
/* v102.12: count-down DSO number. Uses @property so the
integer counter interpolates smoothly; counter() renders
the live value as text. The number sweeps 42 → 38 over
~1.5s of the cycle and holds at 38 for the remainder. */
@property --dso-num {
syntax: '';
initial-value: 42;
inherits: false;
}
.ml-metric-num {
counter-reset: dso var(--dso-num);
--dso-num: 42;
animation: ml-dso-countdown 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.ml-metric-num::before {
content: counter(dso);
}
@keyframes ml-dso-countdown {
0% { --dso-num: 42; }
28%, 100% { --dso-num: 38; }
}
.ml-metric-value-unit {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
}
/* Green "−4 d QoQ" pill that lands after the number settles.
Stays hidden until the countdown reaches 38, then fades + rises
into place. */
.ml-metric-delta {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgb(6, 95, 70);
background: rgba(16, 185, 129, 0.16);
padding: 3px 7px;
border-radius: 4px;
margin-left: 6px;
opacity: 0;
transform: translateY(4px);
animation: ml-delta-land 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes ml-delta-land {
0%, 28% { opacity: 0; transform: translateY(4px); }
38%, 92% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(4px); }
}
.ml-metric-spark {
width: 100%;
height: 28px;
display: block;
}
.ml-spark-path {
stroke: rgb(16, 185, 129);
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 240;
stroke-dashoffset: 240;
/* v102.12: sparkline now draws in lockstep with the
countdown — same duration + easing so the line and the
number land together. */
animation: ml-draw 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
/* Hide the legacy detailed pillar-blocks (kept in markup for now,
presentation now belongs to the moonlight grid). */
.section-pillars .pillar-block {
display: none;
}
/* Mobile — stack pillars */
@media (max-width: 900px) {
.moonlight-grid { grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.moonlight-pillar { aspect-ratio: 4 / 3; }
.moonlight-pillar--hero { aspect-ratio: auto; height: 280px; }
.moonlight-title { font-size: 19px; }
.moonlight-desc { font-size: 14px; }
.moonlight-content { padding: 22px 22px 26px; } /* tight optical card padding — left as-is */
.pillars-header { margin-bottom: var(--space-16); }
.pillars-headline { font-size: 36px; line-height: 1.08; }
.moonlight-hero { margin-top: 56px; } /* off-scale 56 retained */
.ml-agent-status { padding: 14px 18px; }
.ml-agent-stream { font-size: 11.5px; }
}
/* ═══════════════════════════════════════════════════════════
PILLAR ILLUSTRATIONS — Duna-style tilted card stack
One stack per accordion item. Only the item matching the
active accordion row is visible at a time.
═══════════════════════════════════════════════════════════ */
.pv-stage {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.pv-stage.is-active {
opacity: 1;
}
/* Perspective wrapper — tilts the whole stack back into z-space */
.pv-tilt {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%)
perspective(1400px)
rotateX(22deg)
rotateZ(-2.5deg)
scale(1.02);
transform-origin: 50% 50%;
width: 118%;
/* Fade into the canvas at top + bottom */
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.4) 8%,
#000 26%,
#000 74%,
rgba(0,0,0,0.4) 92%,
transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.4) 8%,
#000 26%,
#000 74%,
rgba(0,0,0,0.4) 92%,
transparent 100%);
}
.pv-stack {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 8%;
}
/* Individual row card — dark glass */
.pv-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 12px;
background: rgba(12, 11, 9, 0.65);
border: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-ui);
color: rgba(255, 255, 255, 0.5);
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.pv-row.is-dim {
opacity: 0.55;
}
.pv-row.is-featured {
background: rgba(12, 11, 9, 0.82);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 18px 40px -20px rgba(0, 0, 0, 0.5),
0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
/* Row parts */
.pv-avatar {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 0;
color: rgba(255,255,255,0.9);
}
.pv-av-blue { background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); }
.pv-av-amber { background: linear-gradient(135deg, #92400E 0%, #D97706 100%); }
.pv-av-emerald{ background: linear-gradient(135deg, #065F46 0%, #10B981 100%); }
.pv-av-violet { background: linear-gradient(135deg, #5B21B6 0%, #8B5CF6 100%); }
.pv-av-rose { background: linear-gradient(135deg, #9F1239 0%, #F43F5E 100%); }
.pv-av-slate { background: linear-gradient(135deg, #334155 0%, #64748B 100%); }
.pv-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pv-label {
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pv-sub {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.01em;
font-family: var(--font-mono);
}
.pv-meta {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.pv-amount {
font-size: 12px;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.pv-row.is-featured .pv-amount { color: rgba(255, 255, 255, 0.9); }
.pv-pill {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}
.pv-pill.is-live {
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.25);
color: #34D399;
}
.pv-pill.is-warn {
background: rgba(251, 146, 60, 0.12);
border-color: rgba(251, 146, 60, 0.25);
color: #FB923C;
}
.pv-pill.is-danger {
background: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.25);
color: #F87171;
}
/* Status dot */
.pv-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}
.pv-dot.is-live { background: #34D399; box-shadow: 0 0 10px rgba(52,211,153,0.35); }
.pv-dot.is-warn { background: #FB923C; }
.pv-dot.is-danger { background: #F87171; }
/* Context chip — floats near the featured row */
.pv-context {
position: absolute;
top: 14%;
right: 6%;
font-family: var(--font-mono);
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 6px;
background: rgba(12, 11, 9, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
transform: perspective(1400px) rotateX(22deg) rotateZ(-2.5deg);
transform-origin: center;
}
.pv-context .pv-context-dot {
display: inline-block;
width: 5px; height: 5px; border-radius: 50%;
background: #34D399;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 8px rgba(52,211,153,0.35);
animation: pvPulse 2s ease-in-out infinite;
}
@keyframes pvPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@media (max-width: 960px) {
.pv-tilt { transform: translate(-50%, -50%) perspective(1200px) rotateX(18deg) rotateZ(-2deg) scale(0.95); }
.pv-row { padding: 10px 14px; }
.pv-label { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════
ASK GATHERS — AI input scene
Refined OpenAI/Apple-style prompt bar. A contract file is
dropped in by a premium cursor; Gathers responds with
extracted billing terms. 8s loop.
═══════════════════════════════════════════════════════════ */
.pv-iz-scene {
position: absolute;
inset: 0;
font-family: var(--font-ui);
color: rgba(255, 255, 255, 0.85);
--iz-dur: 8s;
--iz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Drop zone (top area) — dark glass box with dashed border ── */
.pv-ag-dropzone {
position: absolute;
top: 6%;
left: 7%;
right: 7%;
height: 30%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(12, 11, 9, 0.72);
border: 1.5px dashed rgba(255, 255, 255, 0.14);
border-radius: 12px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
opacity: 0;
transform: translateY(-4px);
}
.pv-stage.is-active .pv-ag-dropzone {
animation: izDropzoneIn var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izDropzoneIn {
0%, 2% { opacity: 0; transform: translateY(-4px); border-color: rgba(255,255,255,0.14); }
10%, 16% { opacity: 1; transform: translateY(0); border-color: rgba(255,255,255,0.14); }
20%, 26% { opacity: 1; transform: translateY(0); border-color: rgba(255,255,255,0.32); }
30%, 90% { opacity: 1; transform: translateY(0); border-color: rgba(255,255,255,0.14); }
96%, 100% { opacity: 0; transform: translateY(-2px); }
}
/* File-type icons row */
.pv-ag-drop-icons {
display: flex;
align-items: center;
gap: 14px;
}
.pv-ag-drop-icons svg {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, 0.3);
}
/* Drop zone label */
.pv-ag-drop-label {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.32);
letter-spacing: -0.008em;
}
/* File pill that appears after drop */
.pv-ag-drop-file {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
transform: scale(0.88);
}
.pv-ag-drop-file svg {
width: 12px;
height: 14px;
color: rgba(255, 255, 255, 0.45);
flex-shrink: 0;
}
.pv-stage.is-active .pv-ag-drop-file {
animation: izDropFileIn var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izDropFileIn {
0%, 24% { opacity: 0; transform: scale(0.88); }
30%, 90% { opacity: 1; transform: scale(1); }
96%, 100% { opacity: 0; transform: scale(0.95); }
}
/* Hide the label + icons after file lands, show the file pill */
.pv-stage.is-active .pv-ag-drop-icons,
.pv-stage.is-active .pv-ag-drop-label {
animation: izDropLabelOut var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izDropLabelOut {
0%, 10% { opacity: 1; }
22%, 24% { opacity: 0; }
26%, 90% { opacity: 0; }
96%, 100% { opacity: 1; }
}
/* ── Draggable file card (starts bottom-left, drops into drop zone) ── */
.pv-ag-drag {
position: absolute;
top: 62%;
left: 8%;
width: 72px;
}
.pv-stage.is-active .pv-ag-drag {
animation: izDragPath var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izDragPath {
0%, 6% { transform: translate(0, 0) scale(1); opacity: 1; }
18% { transform: translate(100px, -220px) scale(0.92); opacity: 1; }
24% { transform: translate(100px, -220px) scale(0.6); opacity: 0.2; }
28%, 100% { transform: translate(100px, -220px) scale(0.5); opacity: 0; }
}
.pv-ag-file-card {
position: relative;
width: 72px;
padding: 10px 10px 9px 10px;
background: rgba(12, 11, 9, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 9px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 10px 22px -12px rgba(0, 0, 0, 0.4);
}
.pv-ag-file-icon {
width: 22px;
height: 26px;
color: rgba(255, 255, 255, 0.6);
}
.pv-ag-file-label {
font-size: 10.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
letter-spacing: -0.01em;
}
/* Premium macOS-style pointer */
.pv-ag-cursor {
position: absolute;
top: 30px;
left: 48px;
width: 18px;
height: 22px;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.3));
}
/* ── Contract document (bottom) — dark glass with highlight swipes + callouts ── */
.pv-ag-doc {
position: absolute;
top: 40%;
left: 7%;
right: 7%;
height: 48%;
padding: 14px 18px 14px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 14px 32px -18px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
overflow: hidden;
opacity: 0;
transform: translateY(6px);
}
.pv-stage.is-active .pv-ag-doc {
animation: izDocIn var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izDocIn {
0%, 34% { opacity: 0; transform: translateY(6px); }
42%, 92% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(3px); }
}
.pv-ag-doc-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
letter-spacing: -0.005em;
margin-bottom: 10px;
}
.pv-ag-doc-title::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
/* Skeleton text layout — left column only, callouts float on the right */
.pv-ag-doc-body {
width: 52%;
display: flex;
flex-direction: column;
gap: 7px;
}
.pv-ag-doc-line {
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 1px;
}
/* Highlighted lines — partial swipe over a "phrase" in the line */
.pv-ag-doc-line.is-hl::before {
content: '';
position: absolute;
top: -3px;
bottom: -3px;
/* left + width set per-instance so each highlight covers a different phrase */
background: rgba(255, 255, 255, 0.18);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
z-index: 0;
}
.pv-ag-doc-line.is-hl {
z-index: 1;
}
/* Per-highlight position & length — simulate different phrases */
.pv-ag-hl-1::before { left: 18%; width: 52%; }
.pv-ag-hl-2::before { left: 8%; width: 45%; }
.pv-ag-hl-3::before { left: 24%; width: 50%; }
.pv-stage.is-active .pv-ag-hl-1::before {
animation: izHlSwipe var(--iz-dur) var(--iz-ease) infinite;
animation-delay: 0s;
}
.pv-stage.is-active .pv-ag-hl-2::before {
animation: izHlSwipe var(--iz-dur) var(--iz-ease) infinite;
animation-delay: 0.12s;
}
.pv-stage.is-active .pv-ag-hl-3::before {
animation: izHlSwipe var(--iz-dur) var(--iz-ease) infinite;
animation-delay: 0.24s;
}
@keyframes izHlSwipe {
0%, 48% { transform: scaleX(0); }
56%, 88% { transform: scaleX(1); }
94%, 100% { transform: scaleX(0); }
}
/* Floating callouts — pill-only (no label), right side of doc */
.pv-ag-callout {
position: absolute;
right: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 5px;
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.008em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: 0;
transform: translateX(-4px);
}
.pv-ag-co-icon {
width: 10px;
height: 10px;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
}
/* Vertical position per callout — aligned to its highlighted line */
.pv-ag-co-1 { top: 50px; }
.pv-ag-co-2 { top: 94px; }
.pv-ag-co-3 { top: 138px; }
.pv-stage.is-active .pv-ag-co-1 { animation: izCalloutIn var(--iz-dur) var(--iz-ease) infinite; animation-delay: 0s; }
.pv-stage.is-active .pv-ag-co-2 { animation: izCalloutIn var(--iz-dur) var(--iz-ease) infinite; animation-delay: 0.12s; }
.pv-stage.is-active .pv-ag-co-3 { animation: izCalloutIn var(--iz-dur) var(--iz-ease) infinite; animation-delay: 0.24s; }
@keyframes izCalloutIn {
0%, 52% { opacity: 0; transform: translateX(-4px); }
62%, 92% { opacity: 1; transform: translateX(0); }
96%, 100% { opacity: 0; transform: translateX(0); }
}
/* ── Status pill (same dark-glass language as the input bar) ── */
.pv-ag-status-card {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 8px 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
}
.pv-ag-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #34D399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
flex-shrink: 0;
}
.pv-stage.is-active .pv-ag-status-card {
animation: izStatusCardIn var(--iz-dur) var(--iz-ease) infinite;
}
@keyframes izStatusCardIn {
0%, 78% { opacity: 0; transform: translateX(-50%) translateY(4px); }
86%, 92% { opacity: 1; transform: translateX(-50%) translateY(0); }
96%, 100% { opacity: 0; transform: translateX(-50%) translateY(2px); }
}
/* ═══════════════════════════════════════════════════════════
COLLECTIONS — AI follow-up compose scene
Same frosted-glass language as Billing. Gathers drafts and
sends a follow-up message to an overdue account. 8s loop.
═══════════════════════════════════════════════════════════ */
.pv-co-scene {
position: absolute;
inset: 0;
font-family: var(--font-ui);
color: rgba(255, 255, 255, 0.85);
--co-dur: 8s;
--co-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Account bar (top, dark glass pill) ── */
.pv-co-account {
position: absolute;
top: 10%;
left: 7%;
right: 7%;
height: 50px;
padding: 0 6px 0 12px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
opacity: 0;
transform: translateY(-4px);
}
.pv-stage.is-active .pv-co-account {
animation: coAccountIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coAccountIn {
0%, 2% { opacity: 0; transform: translateY(-4px); }
10%, 90% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(-2px); }
}
.pv-co-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.pv-co-account-name {
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.012em;
flex: 1;
}
.pv-co-overdue {
font-size: 10.5px;
font-weight: 500;
color: rgba(251, 146, 60, 0.9);
letter-spacing: -0.005em;
margin-right: 4px;
}
.pv-co-send {
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pv-co-send svg {
width: 13px;
height: 13px;
color: rgba(255, 255, 255, 0.85);
}
.pv-stage.is-active .pv-co-send {
animation: coSendPulse var(--co-dur) var(--co-ease) infinite;
}
@keyframes coSendPulse {
0%, 62% { background: rgba(255, 255, 255, 0.08); }
66%, 70% { background: rgba(255, 255, 255, 0.18); transform: scale(1.04); }
74%, 100% { background: rgba(255, 255, 255, 0.08); transform: scale(1); }
}
/* ── Message compose card (center, dark glass rect) ── */
.pv-co-message {
position: absolute;
top: 26%;
left: 7%;
right: 7%;
height: 56%;
padding: 16px 18px 14px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 14px 32px -18px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
overflow: hidden;
opacity: 0;
transform: translateY(6px);
}
.pv-stage.is-active .pv-co-message {
animation: coMsgIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coMsgIn {
0%, 10% { opacity: 0; transform: translateY(6px); }
18%, 90% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(3px); }
}
/* Subject line */
.pv-co-subject {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
letter-spacing: -0.008em;
margin-bottom: 12px;
opacity: 0;
}
.pv-co-subject-label {
color: rgba(255, 255, 255, 0.35);
font-weight: 400;
}
.pv-stage.is-active .pv-co-subject {
animation: coSubjectIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coSubjectIn {
0%, 18% { opacity: 0; }
26%, 88% { opacity: 1; }
94%, 100% { opacity: 0; }
}
/* Divider inside message */
.pv-co-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 14px;
transform: scaleX(0);
transform-origin: left center;
}
.pv-stage.is-active .pv-co-divider {
animation: coDividerIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coDividerIn {
0%, 16% { transform: scaleX(0); transform-origin: left center; }
24%, 90% { transform: scaleX(1); transform-origin: left center; }
96%, 100% { transform: scaleX(0); transform-origin: right center; }
}
/* Body lines — skeleton text that fills in */
.pv-co-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.pv-co-line {
height: 4px;
background: rgba(255, 255, 255, 0.06);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.pv-co-line::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.12);
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
}
.pv-stage.is-active .pv-co-line-1::after { animation: coLineFill var(--co-dur) var(--co-ease) infinite; animation-delay: 0s; }
.pv-stage.is-active .pv-co-line-2::after { animation: coLineFill var(--co-dur) var(--co-ease) infinite; animation-delay: 0.1s; }
.pv-stage.is-active .pv-co-line-3::after { animation: coLineFill var(--co-dur) var(--co-ease) infinite; animation-delay: 0.2s; }
.pv-stage.is-active .pv-co-line-4::after { animation: coLineFill var(--co-dur) var(--co-ease) infinite; animation-delay: 0.3s; }
.pv-stage.is-active .pv-co-line-5::after { animation: coLineFill var(--co-dur) var(--co-ease) infinite; animation-delay: 0.4s; }
@keyframes coLineFill {
0%, 28% { transform: scaleX(0); }
40%, 88% { transform: scaleX(1); }
94%, 100% { transform: scaleX(0); }
}
/* Greeting line — visible text, not skeleton */
.pv-co-greeting {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.45);
letter-spacing: -0.008em;
line-height: 1.55;
margin-bottom: 6px;
opacity: 0;
}
.pv-stage.is-active .pv-co-greeting {
animation: coGreetIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coGreetIn {
0%, 24% { opacity: 0; }
32%, 88% { opacity: 1; }
94%, 100% { opacity: 0; }
}
/* Tone tag (bottom-right of message card) */
.pv-co-tone {
position: absolute;
bottom: 14px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 999px;
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
letter-spacing: -0.005em;
opacity: 0;
transform: scale(0.9);
}
.pv-co-tone-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.pv-stage.is-active .pv-co-tone {
animation: coToneIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coToneIn {
0%, 48% { opacity: 0; transform: scale(0.9); }
56%, 88% { opacity: 1; transform: scale(1); }
94%, 100% { opacity: 0; transform: scale(0.95); }
}
/* ── Status pill (bottom, dark glass pill) ── */
.pv-co-status {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 8px 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
}
.pv-co-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #34D399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
flex-shrink: 0;
}
.pv-stage.is-active .pv-co-status {
animation: coStatusIn var(--co-dur) var(--co-ease) infinite;
}
@keyframes coStatusIn {
0%, 72% { opacity: 0; transform: translateX(-50%) translateY(4px); }
80%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
96%, 100% { opacity: 0; transform: translateX(-50%) translateY(2px); }
}
/* ═══════════════════════════════════════════════════════════
INTELLIGENT INBOX — small inbox illustration
Four email rows float in the painterly frame. One row is
highlighted ("Needs you"). Same dark-glass language.
Staggered fade-in loop, 9s.
═══════════════════════════════════════════════════════════ */
.pv-ii-scene {
position: absolute;
inset: 0;
font-family: var(--font-ui);
--ii-dur: 9s;
--ii-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.pv-ii-window {
position: absolute;
top: 11%;
left: 8%;
right: 8%;
bottom: 11%;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 20px 48px -24px rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(6px);
}
.pv-stage.is-active .pv-ii-window {
animation: iiWindowIn var(--ii-dur) var(--ii-ease) infinite;
}
@keyframes iiWindowIn {
0%, 4% { opacity: 0; transform: translateY(6px); }
10%, 92% { opacity: 1; transform: translateY(0); }
97%, 100% { opacity: 0; transform: translateY(3px); }
}
/* ── Titlebar ── */
.pv-ii-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 10.5px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.005em;
flex-shrink: 0;
}
.pv-ii-dots {
display: flex;
gap: 4px;
}
.pv-ii-dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
}
.pv-ii-bar-title {
font-weight: 500;
color: rgba(255, 255, 255, 0.72);
letter-spacing: -0.005em;
}
.pv-ii-bar-count {
margin-left: auto;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(251, 146, 60, 0.9);
}
/* ── Rows ── */
.pv-ii-rows {
flex: 1;
display: flex;
flex-direction: column;
padding: 6px 0;
min-height: 0;
}
.pv-ii-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: 11px;
color: rgba(255, 255, 255, 0.62);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
opacity: 0;
transform: translateY(4px);
flex: 1;
min-height: 0;
}
.pv-ii-row:last-child {
border-bottom: none;
}
.pv-ii-row.is-selected {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
box-shadow: inset 2px 0 0 rgba(251, 146, 60, 0.9);
}
.pv-stage.is-active .pv-ii-row {
animation: iiRowIn var(--ii-dur) var(--ii-ease) infinite;
}
.pv-stage.is-active .pv-ii-row:nth-child(1) { animation-delay: calc(var(--ii-dur) * 0.02); }
.pv-stage.is-active .pv-ii-row:nth-child(2) { animation-delay: calc(var(--ii-dur) * 0.05); }
.pv-stage.is-active .pv-ii-row:nth-child(3) { animation-delay: calc(var(--ii-dur) * 0.08); }
.pv-stage.is-active .pv-ii-row:nth-child(4) { animation-delay: calc(var(--ii-dur) * 0.11); }
@keyframes iiRowIn {
0%, 10% { opacity: 0; transform: translateY(4px); }
18%, 90% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(2px); }
}
.pv-ii-av {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.pv-ii-av-1 { background: linear-gradient(135deg, #334155 0%, #1E293B 100%); }
.pv-ii-av-2 { background: linear-gradient(135deg, #B45309 0%, #78350F 100%); }
.pv-ii-av-3 { background: linear-gradient(135deg, #065F46 0%, #064E3B 100%); }
.pv-ii-av-4 { background: linear-gradient(135deg, #4B5563 0%, #1F2937 100%); }
.pv-ii-row-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.pv-ii-from {
font-weight: 500;
color: inherit;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
}
.pv-ii-subj {
font-size: 9.5px;
color: rgba(255, 255, 255, 0.42);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.005em;
}
.pv-ii-row.is-selected .pv-ii-subj {
color: rgba(255, 255, 255, 0.6);
}
.pv-ii-tag {
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.pv-ii-tag-ai {
color: rgba(52, 211, 153, 0.9);
background: rgba(52, 211, 153, 0.08);
border: 1px solid rgba(52, 211, 153, 0.18);
}
.pv-ii-tag-match {
color: rgba(148, 163, 184, 0.9);
background: rgba(148, 163, 184, 0.08);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.pv-ii-tag-needs {
color: rgba(251, 146, 60, 0.95);
background: rgba(251, 146, 60, 0.1);
border: 1px solid rgba(251, 146, 60, 0.24);
}
/* ═══════════════════════════════════════════════════════════
INSIGHTS — Live metrics dashboard scene
Same frosted-glass language. Three key metrics animate in
with values and trend indicators. 8s loop.
═══════════════════════════════════════════════════════════ */
.pv-in-scene {
position: absolute;
inset: 0;
font-family: var(--font-ui);
color: rgba(255, 255, 255, 0.85);
--in-dur: 8s;
--in-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Header pill (top, dark glass) ── */
.pv-in-header {
position: absolute;
top: 10%;
left: 7%;
right: 7%;
height: 50px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
opacity: 0;
transform: translateY(-4px);
}
.pv-stage.is-active .pv-in-header {
animation: inHeaderIn var(--in-dur) var(--in-ease) infinite;
}
@keyframes inHeaderIn {
0%, 2% { opacity: 0; transform: translateY(-4px); }
10%, 90% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(-2px); }
}
.pv-in-header-icon {
width: 14px;
height: 14px;
color: rgba(255, 255, 255, 0.45);
flex-shrink: 0;
}
.pv-in-header-title {
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
letter-spacing: -0.012em;
flex: 1;
}
.pv-in-live {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 500;
color: rgba(52, 211, 153, 0.9);
letter-spacing: 0.01em;
}
.pv-in-live-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #34D399;
animation: inLivePulse 2s ease-in-out infinite;
}
@keyframes inLivePulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ── Metrics card (center, dark glass rect) ── */
.pv-in-card {
position: absolute;
top: 26%;
left: 7%;
right: 7%;
height: 56%;
padding: 18px 20px 16px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 14px 32px -18px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
overflow: hidden;
opacity: 0;
transform: translateY(6px);
}
.pv-stage.is-active .pv-in-card {
animation: inCardIn var(--in-dur) var(--in-ease) infinite;
}
@keyframes inCardIn {
0%, 8% { opacity: 0; transform: translateY(6px); }
16%, 90% { opacity: 1; transform: translateY(0); }
96%, 100% { opacity: 0; transform: translateY(3px); }
}
.pv-in-card-label {
font-size: 10px;
font-weight: 500;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 16px;
}
/* Metric rows */
.pv-in-metrics {
display: flex;
flex-direction: column;
gap: 0;
height: calc(100% - 32px);
}
.pv-in-metric {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
padding: 0 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
transform: translateY(4px);
}
.pv-in-metric:last-child { border-bottom: none; }
.pv-stage.is-active .pv-in-m1 { animation: inMetricIn var(--in-dur) var(--in-ease) infinite; animation-delay: 0s; }
.pv-stage.is-active .pv-in-m2 { animation: inMetricIn var(--in-dur) var(--in-ease) infinite; animation-delay: 0.15s; }
.pv-stage.is-active .pv-in-m3 { animation: inMetricIn var(--in-dur) var(--in-ease) infinite; animation-delay: 0.3s; }
@keyframes inMetricIn {
0%, 18% { opacity: 0; transform: translateY(4px); }
26%, 88% { opacity: 1; transform: translateY(0); }
94%, 100% { opacity: 0; }
}
.pv-in-metric-info {
flex: 1;
min-width: 0;
}
.pv-in-metric-name {
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.42);
letter-spacing: -0.005em;
margin-bottom: 3px;
}
.pv-in-metric-value {
font-size: 20px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Delta badge */
.pv-in-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
.pv-in-delta.is-good { color: rgba(52, 211, 153, 0.9); }
.pv-in-delta.is-warn { color: rgba(251, 146, 60, 0.9); }
.pv-in-delta svg {
width: 8px;
height: 8px;
}
/* Sparkline — pure CSS bar chart */
.pv-in-spark {
display: flex;
align-items: flex-end;
gap: 2px;
height: 24px;
flex-shrink: 0;
}
.pv-in-spark-bar {
width: 3px;
border-radius: 1px;
background: rgba(255, 255, 255, 0.15);
transform: scaleY(0);
transform-origin: bottom center;
}
.pv-stage.is-active .pv-in-m1 .pv-in-spark-bar { animation: inSparkGrow var(--in-dur) var(--in-ease) infinite; }
.pv-stage.is-active .pv-in-m2 .pv-in-spark-bar { animation: inSparkGrow var(--in-dur) var(--in-ease) infinite; animation-delay: 0.15s; }
.pv-stage.is-active .pv-in-m3 .pv-in-spark-bar { animation: inSparkGrow var(--in-dur) var(--in-ease) infinite; animation-delay: 0.3s; }
@keyframes inSparkGrow {
0%, 30% { transform: scaleY(0); }
42%, 86% { transform: scaleY(1); }
94%, 100% { transform: scaleY(0); }
}
/* ── Status pill (bottom, dark glass) ── */
.pv-in-status {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 8px 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(12, 11, 9, 0.82);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 24px -14px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
}
.pv-in-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #34D399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
flex-shrink: 0;
}
.pv-stage.is-active .pv-in-status {
animation: inStatusIn var(--in-dur) var(--in-ease) infinite;
}
@keyframes inStatusIn {
0%, 72% { opacity: 0; transform: translateX(-50%) translateY(4px); }
80%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
96%, 100% { opacity: 0; transform: translateX(-50%) translateY(2px); }
}
/* ── Accordion ── */
.pillar-accordion {
display: flex;
flex-direction: column;
}
.pillar-acc-item {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pillar-acc-item:last-child {
border-bottom: none;
}
.pillar-acc-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0;
cursor: pointer;
user-select: none;
transition: opacity 0.15s ease;
}
.pillar-acc-header:hover { opacity: 0.8; }
.pillar-acc-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease, background 0.3s ease;
}
.pillar-acc-icon svg {
width: 12px;
height: 12px;
stroke: var(--text-secondary);
stroke-width: 2;
fill: none;
transition: transform 0.3s ease;
}
.pillar-acc-item.active .pillar-acc-icon {
background: rgba(0, 0, 0, 0.06);
}
.pillar-acc-item.active .pillar-acc-icon svg {
transform: rotate(45deg);
stroke: var(--text-primary);
}
.pillar-acc-title {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: -0.01em;
transition: color 0.2s ease;
}
.pillar-acc-item.active .pillar-acc-title {
color: var(--text-primary);
}
.pillar-acc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-acc-item.active .pillar-acc-body {
max-height: 200px;
}
.pillar-acc-desc {
font-family: var(--font-ui);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
padding: 0 0 20px 44px;
}
@media (max-width: 960px) {
.pillar-content-row {
grid-template-columns: 1fr;
gap: var(--space-10);
}
.pillar-visual { aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
.section-pillars { padding: var(--space-24) var(--space-6); }
.pillar-block { padding: var(--space-20) 0; }
.pillar-title { font-size: 32px; }
}
/* ════════════ SCROLL NARRATIVE CSS ════════════ */
.narrative-section {
position: relative;
/* No parallax entry/exit — already in dark mode. Just the narrative scroll. */
height: 500vh;
z-index: 1;
/* v99.13: unified to v88's #000000. Matches dark-zone, ledger
and pro-chat above so the whole dark top of the page is ONE
colour. */
background: #000000;
}
.narrative-sticky {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
}
/* The dark card — always fullscreen in v87 (no parallax entry/exit) */
.narrative-card {
width: 100vw;
max-width: none;
height: 100vh;
border-radius: 0;
background: #000000;
position: relative;
overflow: hidden;
box-shadow: none;
}
/* Ambient glow inside the card — v99.13: cool blue hue restored
from v88 so the scroll animation backdrop carries a subtle
cobalt cast that ties to the Slack card's blue-tinted gradient. */
.narrative-card::before {
content: '';
position: absolute;
left: 50%;
top: 58%;
width: 120%;
height: 80%;
background: radial-gradient(
ellipse at center,
rgba(78, 140, 255, 0.06) 0%,
rgba(78, 140, 255, 0.02) 30%,
transparent 60%
);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
/* Intro layer — centered title that morphs into Kanban on scroll */
.narrative-intro {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 20;
opacity: var(--ni-opacity, 1);
transform: scale(var(--ni-scale, 1));
will-change: opacity, transform;
pointer-events: none;
}
.ni-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 20px;
}
.ni-headline {
font-family: var(--font-sans);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 20px;
max-width: 780px;
}
.ni-sub {
font-family: var(--font-ui);
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
line-height: 1.6;
max-width: 480px;
margin: 0 0 48px;
}
.ni-mouse {
width: 20px;
height: 32px;
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
position: relative;
animation: niMousePulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ni-mouse::after {
content: '';
position: absolute;
left: 50%;
top: 7px;
width: 2px;
height: 6px;
background: rgba(255, 255, 255, 0.35);
border-radius: 2px;
transform: translateX(-50%);
animation: niMouseDot 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes niMousePulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes niMouseDot {
0% { transform: translate(-50%, 0); opacity: 1; }
60% { transform: translate(-50%, 10px); opacity: 0; }
100% { transform: translate(-50%, 0); opacity: 0; }
}
/* Content inside the card — starts hidden, JS fades in on scroll */
.narrative-inner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
/* ── Narrative shared variables ── */
.narrative-card {
--sn-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--sn-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--sn-font-mono: 'Space Mono', monospace;
--sn-text-primary: rgba(255, 255, 255, 0.92);
--sn-text-secondary: rgba(255, 255, 255, 0.6);
--sn-text-tertiary: rgba(255, 255, 255, 0.38);
--sn-text-dim: rgba(255, 255, 255, 0.22);
--sn-border: rgba(255, 255, 255, 0.06);
--sn-accent: #4e8cff;
--sn-green: #3fb950;
}
/* ── Clock + Beat indicator ── */
.sn-clock {
position: absolute;
top: 32px;
left: 32px;
font-family: var(--sn-font-mono);
font-size: 12px;
color: var(--sn-text-secondary);
letter-spacing: 0.04em;
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
}
.sn-clock-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sn-green);
box-shadow: 0 0 8px rgba(63, 185, 80, 0.3);
animation: snPulseDot 2.4s ease-in-out infinite;
}
@keyframes snPulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.sn-clock-label {
color: var(--sn-text-tertiary);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.14em;
}
.sn-clock-time {
color: var(--sn-text-primary);
font-weight: 500;
}
.sn-beat-indicator {
position: absolute;
top: 32px;
right: 32px;
font-family: var(--sn-font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sn-text-tertiary);
z-index: 10;
display: flex;
gap: 8px;
align-items: center;
}
.sn-pip {
width: 18px;
height: 2px;
background: var(--sn-text-dim);
border-radius: 1px;
transition: background 0.4s ease;
}
.sn-pip.active { background: var(--sn-text-primary); }
/* ── PHASE 1: Kanban zoomed-in ── */
.sn-kanban-phase {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
z-index: 2;
opacity: var(--sn-kanban-opacity, 1);
padding: 0 60px;
}
.sn-narrative-title {
font-family: var(--sn-font-sans);
font-size: clamp(22px, 2.8vw, 36px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--sn-text-primary);
opacity: var(--sn-nt-opacity, 0);
transform: translateY(var(--sn-nt-ty, 12px));
will-change: opacity, transform;
max-width: 320px;
}
.sn-narrative-title em {
font-style: normal;
color: var(--sn-text-tertiary);
font-weight: 400;
font-size: 0.55em;
display: block;
margin-top: 8px;
letter-spacing: 0;
line-height: 1.5;
}
.sn-kanban-wrapper {
display: flex;
gap: 16px;
align-items: flex-start;
flex-shrink: 0;
}
/* Blurred adjacent columns */
.sn-col-blur {
width: 220px;
display: flex;
flex-direction: column;
gap: 8px;
filter: blur(6px);
opacity: 0.3;
}
.sn-col-blur .sn-col-hdr {
font-family: var(--sn-font-sans);
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 4px;
display: flex;
justify-content: space-between;
}
.sn-col-blur .sn-col-cnt {
font-size: 9px;
font-weight: 500;
color: rgba(255, 255, 255, 0.25);
}
.sn-blur-card {
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.03);
margin-bottom: 8px;
}
.sn-blur-line {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
margin-bottom: 6px;
}
.sn-blur-line:last-child { margin-bottom: 0; }
.sn-blur-line.s { width: 60%; }
.sn-blur-line.m { width: 80%; }
.sn-blur-line.t { width: 40%; }
/* Focused column */
.sn-col-focus {
width: 280px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 5;
}
.sn-col-focus-hdr {
display: flex;
justify-content: space-between;
font-family: var(--sn-font-sans);
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 4px;
}
.sn-col-focus-cnt {
font-size: 9px;
font-weight: 500;
color: rgba(255, 255, 255, 0.25);
}
/* Kanban cards */
.sn-kb-card {
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.03);
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.sn-kb-hdr { display: flex; align-items: center; gap: 8px; }
.sn-kb-avatar {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--sn-font-sans); font-size: 8px;
font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0;
}
.sn-kb-avatar.purple { background: #5B3E88; color: #EDE9FE; }
.sn-kb-avatar.amber { background: #7A4E22; color: #FEF3C7; }
.sn-kb-avatar.blue { background: #2F4E88; color: #DBEAFE; }
.sn-kb-id {
font-family: var(--sn-font-mono); font-size: 10px;
color: rgba(255, 255, 255, 0.15); letter-spacing: 0.02em;
}
.sn-kb-title {
font-family: var(--sn-font-ui); font-size: 12px; font-weight: 400;
color: rgba(255, 255, 255, 0.45); line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-kb-meta { display: flex; align-items: center; gap: 5px; }
.sn-kb-tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--sn-font-ui); font-size: 9px; font-weight: 500;
}
.sn-kb-dot {
width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
}
.sn-kb-dot.red {
background: #f87171;
box-shadow: 0 0 2px #f87171, 0 0 6px rgba(248, 113, 113, 0.4), 0 0 12px rgba(248, 113, 113, 0.4);
}
.sn-kb-dot.orange {
background: #fb923c;
box-shadow: 0 0 2px #fb923c, 0 0 6px rgba(251, 146, 60, 0.4), 0 0 12px rgba(251, 146, 60, 0.4);
}
.sn-kb-tag-text { color: rgba(255, 255, 255, 0.45); }
.sn-kb-amount {
font-family: var(--sn-font-ui); font-size: 10px; font-weight: 500;
color: rgba(255, 255, 255, 0.3); margin-left: auto;
font-variant-numeric: tabular-nums;
}
/* New card */
.sn-new-card {
padding: 12px 14px; border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.03);
display: flex; flex-direction: column; gap: 6px;
opacity: var(--sn-nc-opacity, 0);
transform: translateY(var(--sn-nc-ty, 12px));
will-change: opacity, transform;
transition: border-color 0.6s ease, background 0.6s ease, box-shadow 0.6s ease;
position: relative;
}
.sn-new-card.glow {
border-color: rgba(248, 113, 113, 0.3);
background: rgba(248, 113, 113, 0.04);
box-shadow: 0 0 24px rgba(248, 113, 113, 0.1), inset 0 0 12px rgba(248, 113, 113, 0.04);
}
.sn-new-card.settled {
border-color: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.015);
box-shadow: none;
}
.sn-flare {
position: absolute; inset: 0; border-radius: inherit;
overflow: hidden; pointer-events: none; z-index: 10;
}
.sn-flare::before {
content: ''; position: absolute; top: 0; left: -150%;
width: 60%; height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 30%,
rgba(255, 255, 255, 0.42) 50%,
rgba(255, 255, 255, 0.04) 70%,
transparent 100%
);
transform: skewX(-20deg); opacity: 0;
filter: blur(0.5px);
}
.sn-flare.sweep::before {
animation: snGlassSweep 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 1;
}
@keyframes snGlassSweep {
0% { left: -80%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 180%; opacity: 0; }
}
/* ── Bridge title ── */
.sn-bridge {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 4; pointer-events: none;
opacity: var(--sn-bridge-opacity, 0);
}
.sn-bridge-inner {
font-family: var(--sn-font-sans);
font-size: clamp(24px, 3vw, 40px);
font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
color: var(--sn-text-primary); text-align: center;
}
.sn-bridge-inner em {
font-style: normal; color: var(--sn-text-tertiary);
font-weight: 400; font-size: 0.5em; display: block;
margin-top: 10px; letter-spacing: 0; line-height: 1.5;
}
/* ── PHASE 2: Slack ── */
.sn-slack-phase {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 3;
opacity: var(--sn-slack-opacity, 0);
transform: scale(var(--sn-slack-scale, 0.96));
will-change: opacity, transform;
}
.sn-stage {
display: grid;
grid-template-columns: 320px minmax(0, 580px);
gap: 60px;
align-items: center;
max-width: 1080px;
padding: 0 40px;
z-index: 2;
}
.sn-slack-titles {
display: flex; flex-direction: column; position: relative;
}
.sn-slack-title {
font-family: var(--sn-font-sans);
font-size: clamp(20px, 2.4vw, 32px);
font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
color: var(--sn-text-primary);
opacity: var(--sn-st-opacity, 0);
position: absolute; top: 50%; left: 0;
transform: translateY(calc(-50% + var(--sn-st-ty, 10px)));
will-change: opacity, transform;
}
.sn-slack-title em {
font-style: normal; color: var(--sn-text-tertiary);
font-weight: 400; font-size: 0.55em; display: block;
margin-top: 8px; letter-spacing: 0; line-height: 1.5;
}
/* Slack card */
.sn-slack-card-wrap { position: relative; }
.sn-slack-logo {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px; opacity: 0.4;
}
.sn-slack-logo svg { width: 22px; height: 22px; flex-shrink: 0; }
.sn-slack-logo span {
font-family: var(--sn-font-ui); font-size: 15px;
font-weight: 600; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em;
}
.sn-slack-card {
width: 100%;
/* v99.13: blue-tinted dark gradient pulled from v88. Each rgb
triplet has its blue channel highest (R26 G29 B34 → R14 G16 B20)
so the card carries a faint cool cast against the surrounding
#000000 neutral, the way Slack cards in real Slack do. */
background: linear-gradient(180deg, rgba(26, 29, 34, 0.96) 0%, rgba(14, 16, 20, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px; overflow: hidden; position: relative;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.8),
0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sn-slack-card::before {
content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
pointer-events: none;
}
.sn-channel-bar {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px; border-bottom: 1px solid var(--sn-border);
font-size: 14px; font-weight: 600; color: var(--sn-text-primary);
}
.sn-channel-bar .sn-hash { color: var(--sn-text-tertiary); font-weight: 500; }
.sn-channel-bar .sn-members {
margin-left: auto; font-family: var(--sn-font-mono); font-size: 11px;
color: var(--sn-text-tertiary); font-weight: 400;
display: flex; align-items: center; gap: 6px;
}
.sn-channel-bar .sn-members::before {
content: ''; width: 10px; height: 10px; border-radius: 50%;
border: 1.5px solid var(--sn-text-tertiary);
}
.sn-msgs {
min-height: 420px; padding: 20px 0 12px;
position: relative; display: flex; flex-direction: column;
}
.sn-quiet {
position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; flex-direction: column; gap: 8px;
color: var(--sn-text-dim); font-family: var(--sn-font-mono);
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
pointer-events: none; opacity: var(--sn-quiet-opacity, 1);
}
.sn-quiet-bar { width: 40px; height: 1px; background: var(--sn-text-dim); margin-bottom: 12px; }
/* Messages */
.sn-msg {
padding: 10px 20px; display: flex; gap: 12px;
align-items: flex-start; flex-shrink: 0;
}
.sn-msg[data-sn-range] {
opacity: var(--sn-msg-opacity, 0);
transform: translateY(var(--sn-msg-ty, 16px));
}
.sn-msg-avatar {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.sn-msg-avatar.bot {
background: #ffffff; color: #000000; padding: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sn-msg-avatar.bot svg { width: 100%; height: 100%; display: block; }
.sn-msg-avatar.human {
background: #3a3a3a; color: #ffffff;
font-family: var(--sn-font-ui); font-size: 11px;
font-weight: 700; letter-spacing: 0.02em;
}
.sn-msg-avatar.human.kam { background: #2E6B52; color: #DCFCE7; }
.sn-msg-body { flex: 1; min-width: 0; }
.sn-msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.sn-msg-name { font-size: 14px; font-weight: 600; color: var(--sn-text-primary); }
.sn-app-badge {
font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--sn-text-tertiary);
background: #000000; padding: 1px 5px; border-radius: 3px;
border: 1px solid var(--sn-border); margin-left: 2px;
}
.sn-msg-time { font-size: 11px; color: var(--sn-text-tertiary); font-family: var(--sn-font-mono); }
.sn-msg-text {
font-size: 14px; color: var(--sn-text-secondary); line-height: 1.55; max-width: 560px;
}
.sn-msg-text strong { color: var(--sn-text-primary); font-weight: 600; }
.sn-code {
font-family: var(--sn-font-mono); font-size: 12.5px;
background: rgba(78, 140, 255, 0.10); padding: 1px 5px; border-radius: 3px;
color: rgba(160, 200, 255, 0.85); text-shadow: 0 0 6px rgba(78, 140, 255, 0.3);
border: 1px solid rgba(78, 140, 255, 0.08);
}
.sn-mention {
display: inline-flex; align-items: center; padding: 1px 6px 2px;
background: rgba(78, 140, 255, 0.14); color: #8ab4ff;
border-radius: 3px; font-weight: 500; cursor: default;
}
.sn-mention::before { content: '@'; opacity: 0.75; margin-right: 1px; }
.sn-chip {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 8px; padding: 7px 12px;
background: rgba(255, 255, 255, 0.025); border: 1px solid var(--sn-border);
border-left: 2px solid rgba(248, 113, 113, 0.5); border-radius: 4px;
font-family: var(--sn-font-mono); font-size: 11px;
}
.sn-chip-val { color: var(--sn-text-secondary); }
.sn-chip-meta { color: var(--sn-text-dim); }
.sn-chip-sep { width: 1px; height: 10px; background: var(--sn-border); display: inline-block; }
.sn-check { display: inline-block; color: var(--sn-green); font-weight: 600; margin-left: 2px; }
.sn-sent-meta { color: var(--sn-text-dim); font-size: 12px; margin-left: 2px; }
.sn-compose {
margin: 4px 16px 16px; padding: 12px 14px;
border: 1px solid var(--sn-border); border-radius: 8px;
background: rgba(255, 255, 255, 0.015); font-size: 12.5px;
color: var(--sn-text-dim); display: flex; align-items: center; gap: 10px;
}
.sn-compose-icons { display: flex; gap: 14px; color: var(--sn-text-dim); font-size: 13px; }
/* Skip arrow */
.sn-skip {
position: absolute;
bottom: 32px;
right: 32px;
z-index: 20;
display: flex;
align-items: center;
gap: 6px;
padding: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.3);
font-family: 'Inter', -apple-system, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.25s ease;
opacity: 0;
pointer-events: none;
}
.sn-skip.visible {
opacity: 1;
pointer-events: auto;
}
.sn-skip:hover {
color: rgba(255, 255, 255, 0.6);
}
.sn-skip svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
/* Continues hint */
.sn-continues {
position: absolute; bottom: 24px; left: 50%;
transform: translateX(-50%); font-family: var(--sn-font-mono);
font-size: 9.5px; letter-spacing: 0.14em; color: var(--sn-text-dim);
text-transform: uppercase; opacity: var(--sn-cont-opacity, 0);
display: flex; align-items: center; gap: 10px; z-index: 10;
}
.sn-continues::before, .sn-continues::after {
content: ''; width: 24px; height: 1px; background: var(--sn-text-dim);
}
@media (max-width: 920px) {
.sn-stage { grid-template-columns: 1fr; gap: 24px; }
.sn-slack-titles { display: none; }
.sn-col-blur { display: none; }
.sn-kanban-phase { gap: 24px; padding: 0 20px; }
.sn-narrative-title { display: none; }
}
/* ════════════ FEATURE STACK — v103 (Mercury-style click-driven reveal) ════════════
Four feature TITLES stacked compact on the left so all four fit
in a single viewport. The active one expands with its description
and triggers the matching right-side mockup. Click a different
title to switch. Right column is position: sticky so the mockup
stays in view while the user reads the left column.
Features (order-to-cash):
01 Contracts — agreements + amendments
02 Invoicing — invoices + timeline
03 Collections — activity feed + applied cash
04 Intelligent Inbox — email + AI suggested reply with citations
When a mockup becomes .is-active, its inner .anim-step children
stagger-reveal via CSS transitions with per-element --d delays.
Switching active mockups re-plays the staggered reveal. */
.section-features {
/* v104.16: Mercury background — confirmed from DevTools. Near-black
with a faint cool-violet cast (RGB 23,22,32). Flat fill, no
gradient — atmospheric variation comes from the stage and blur.
v106.5: changed overflow from hidden → clip. `overflow: hidden`
creates a scrolling context that kills `position: sticky` on
descendants (it captures the scroll the sticky element is
trying to listen to). `overflow: clip` clips overflowing
content without creating a scrolling context, so the .fsc-right
sticky can pin against the viewport while the left column
scrolls past. */
background: #000000;
padding: var(--space-40) 0 var(--space-40) var(--space-12); /* v111.1: 140 → 160 top */
position: relative;
z-index: 2;
overflow: clip;
}
.fsc-inner {
max-width: 1440px;
margin: 0 auto;
}
.fsc-grid {
display: grid;
grid-template-columns: minmax(320px, 40%) 1fr;
gap: var(--space-24);
align-items: start;
}
/* ──── LEFT: title + 4 compact items + CTA ──── */
.fsc-left { display: block; }
.fsc-eyebrow {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--space-8); /* v111.1: 28 → 32 */
}
.fsc-title {
/* v106.2: match the "What we do" ledger manifesto typography —
Plus Jakarta Sans, weight 500, tighter tracking, same size
clamp(28-40px). Section now reads in the same editorial voice
as the ledger manifesto above. */
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2;
letter-spacing: -0.025em;
color: white;
margin: 0;
font-weight: 500;
}
.fsc-title-line2 {
/* Inherits the parent's font-family. Stays italic + 0.62 opacity
so the secondary phrase still has its own visual register. */
color: rgba(255, 255, 255, 0.62);
font-style: italic;
}
.fsc-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 56px 0 0; /* off-scale 56 retained — divider sits inside scroll narrative */
}
.fsc-list {
display: flex;
flex-direction: column;
}
/* v106.3: scroll-driven feature stack. Each item occupies ~1
viewport of vertical scroll so the user advances through topics
by scrolling. Big top/bottom padding creates the negative space
between topics; the right-side sticky stage swaps animations
based on which item is closest to the viewport center. */
/* v22 (2026-05-21): feature stack is click-driven with an auto-advance
timer (in index.js). Items have no card chrome — only opacity
differentiates active vs inactive, with a thin progress bar at the
bottom of the active item showing when the next switch will fire. */
.fsc-item {
padding: 22px 0;
cursor: pointer;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0.45;
user-select: none;
}
.fsc-item:hover { opacity: 0.78; }
.fsc-item.is-active,
.fsc-item.is-active:hover {
opacity: 1;
cursor: default;
}
/* ── Auto-advance progress bar ──────────────────────────────────
Sits at the bottom of the card. Hidden when the item is inactive;
when it becomes active, the inner bar fills 0→100% over the
duration set by --fsc-auto-ms (written by initFeatureStack so JS
timer and CSS animation stay in lockstep). */
.fsc-item-progress {
height: 2px;
background: rgba(255, 255, 255, 0.06);
margin-top: 18px;
border-radius: 2px;
overflow: hidden;
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fsc-item.is-active .fsc-item-progress {
opacity: 1;
}
.fsc-item-progress-bar {
height: 100%;
width: 0%;
background: rgba(255, 255, 255, 0.55);
border-radius: inherit;
}
.fsc-item.is-active .fsc-item-progress-bar {
animation: fscAutoProgress var(--fsc-auto-ms, 5500ms) linear forwards;
}
@keyframes fscAutoProgress {
from { width: 0%; }
to { width: 100%; }
}
.fsc-item-row {
display: flex;
align-items: center;
gap: var(--space-4); /* 14 → 16 */
}
.fsc-item-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
transition: background 0.3s ease, box-shadow 0.3s ease;
flex-shrink: 0;
}
.fsc-item.is-active .fsc-item-dot {
background: #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.fsc-item-title {
/* v108f: bumped to 26px so the pillar names carry more weight
below the section title. Same family + weight as the .fsc-title
and ledger manifesto, just smaller — keeps the editorial voice
coherent without competing for hierarchy. */
font-family: var(--font-sans);
font-size: 26px;
font-weight: 500;
color: white;
letter-spacing: -0.02em;
line-height: 1.25;
}
/* v106.3: descriptions are always visible (no expand/collapse).
The fade between active / inactive items happens at the row level
via .fsc-item's opacity transition.
v106.6: dropped the 21px left margin (it was clearing the dot
that's now removed) so the description aligns flush with the
title above it. */
.fsc-item-desc {
font-family: var(--font-ui);
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
max-width: 440px;
margin: var(--space-4) 0 0 0; /* 14 → 16 */
}
.fsc-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: white;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.4);
text-underline-offset: 6px;
margin-top: var(--space-12);
transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}
.fsc-cta:hover {
opacity: 0.85;
text-decoration-color: rgba(255, 255, 255, 0.9);
}
.fsc-cta-arrow { transition: transform 0.3s var(--spring); }
.fsc-cta:hover .fsc-cta-arrow { transform: translateX(3px); }
/* ──── RIGHT: sticky stage ──── */
.fsc-right {
position: sticky;
/* v106.4: stage sticks VERTICALLY CENTERED in the viewport so it
stays anchored mid-screen while the left column scrolls past
it. Formula picks max(40px, 50vh − halfHeight) so on tall
viewports the stage centers, and on short ones it still
leaves 40px breathing room at the top. */
top: max(40px, calc(50vh - 336px));
/* v106: bumped height ~5% (640 → 672px and the viewport fallback
offset from 140 → 80 so the stage gets more vertical room). */
height: min(672px, calc(100vh - 80px));
/* v104.4: fixed 360px extension past grid track. Covers viewports
from 1280 to ~2200 with the card reaching the page edge. Using
a fixed pixel value (not 50vw) so the blur mask calculations
below can predictably anchor to viewport edge. */
width: calc(100% + 360px);
margin-right: -360px;
/* v106: shift the stage right ~40px so its left edge aligns with
the "+" symbol next to PRICING in the top nav. */
margin-left: 40px;
}
/* v104.12: SECTION-WIDE right-column blur. Runs the full height of
the section so the haze reads as part of the page's atmosphere,
not just an effect that ends at the card. Sits above all section
content on its right portion via z-index. The mask fades from
transparent on the left → fully black on the right, so blur ramps
up smoothly toward the viewport edge. Combined with the existing
.fsc-stage::before/::after blurs INSIDE the card, this stacks to
a much heavier, atmospheric blur — the right side of the page
feels truly out of focus. */
.section-features::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 460px;
pointer-events: none;
z-index: 6;
/* v104.16: Mercury background is near-neutral (#000000), so the
blur shouldn't artificially saturate it. Held at 1.0. */
backdrop-filter: blur(28px) saturate(1.0);
-webkit-backdrop-filter: blur(28px) saturate(1.0);
-webkit-mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 0.45) 35%,
rgba(0, 0, 0, 0.85) 70%,
black 100%);
mask-image: linear-gradient(to right,
transparent 0%,
rgba(0, 0, 0, 0.45) 35%,
rgba(0, 0, 0, 0.85) 70%,
black 100%);
}
.fsc-stage {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
border-radius: 10px 0 0 10px;
overflow: hidden;
/* v105.4: perspective gives children that participate in 3D
(the .cine-camera-rig) actual depth. 2000px is a long focal
length — subtle parallax, not a fisheye. */
perspective: 2000px;
/* v104.16: tuned to sit on Mercury's #000000 section background.
Slightly lifted (R+G+B all raised) with the same faint cool
cast so the card reads as the same material as the page. */
background: linear-gradient(180deg, rgba(36, 34, 46, 0.7) 0%, rgba(28, 27, 38, 0.7) 100%);
border: 1px solid rgba(255, 255, 255, 0.07);
border-right: none;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* v104.9: vertical fade on the right portion so the top-right
and bottom-right corners bleed into the page padding above
and below. Composite of two masks (add): horizontal fade-right
UNION vertical fade-top-bottom — net effect: left side fully
solid, right side fades horizontally AND vertically at corners. */
-webkit-mask-image:
linear-gradient(to right, black 60%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image:
linear-gradient(to right, black 60%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
/* v104.4: BLUR anchored to viewport right edge via fixed-pixel math.
The stage extends 360px past the visible viewport (its right edge
sits at "100% in stage local" = 360px past viewport). So the
viewport's right edge is at "calc(100% - 360px)" in stage coords.
We ramp blur from a point left of viewport edge UP TO viewport edge,
placing the blur visibly within the actual on-screen card. */
.fsc-stage::before,
.fsc-stage::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.fsc-stage::before {
z-index: 50;
/* v104.12: bumped to 16px so the in-card blur reads heavier even
before the section-wide blur layer kicks in on top. */
backdrop-filter: blur(16px) saturate(0.85);
-webkit-backdrop-filter: blur(16px) saturate(0.85);
/* Light blur: starts 280px before viewport edge, fully visible
at viewport edge. Wider, softer ramp. */
-webkit-mask-image: linear-gradient(to right,
transparent calc(100% - 640px),
black calc(100% - 360px));
mask-image: linear-gradient(to right,
transparent calc(100% - 640px),
black calc(100% - 360px));
}
.fsc-stage::after {
z-index: 51;
/* v104.12: bumped to 36px — the inner right edge gets a really
atmospheric blur. Combined with the section-wide blur strip
on top, the right portion of the page is heavily defocused. */
backdrop-filter: blur(36px) saturate(0.82);
-webkit-backdrop-filter: blur(36px) saturate(0.82);
/* Heavy blur: starts 140px before viewport edge, fully visible
at viewport edge. Concentrates intensity at the right edge. */
-webkit-mask-image: linear-gradient(to right,
transparent calc(100% - 500px),
black calc(100% - 360px));
mask-image: linear-gradient(to right,
transparent calc(100% - 500px),
black calc(100% - 360px));
}
.fsc-mockup {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.55s var(--spring);
overflow: hidden;
pointer-events: none;
}
.fsc-mockup.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ═══ ANIMATION SCAFFOLDING ═══
Children with .anim-step start hidden and reveal in sequence
when their parent .fsc-mockup becomes .is-active. Delays are
set per-element via inline style="--d: 0.6s". On deactivation
they snap back to hidden so re-activation replays the sequence. */
.anim-step {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.55s ease, transform 0.55s var(--spring);
transition-delay: var(--d, 0s);
}
.fsc-mockup.is-active .anim-step {
opacity: 1;
transform: translateY(0);
}
/* Mockup shared chrome — header bar at top */
.fsc-mk-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.015);
}
.fsc-mk-crumb {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.01em;
}
.fsc-mk-crumb strong {
color: rgba(255, 255, 255, 0.92);
font-weight: 600;
}
.fsc-mk-crumb-sep {
color: rgba(255, 255, 255, 0.25);
margin: 0 8px;
}
.fsc-mk-body {
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* ──── MOCKUP 1: CONTRACTS ──── */
.fsc-mk-contract-card {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 20px;
}
.fsc-mk-c-title {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-bottom: 4px;
}
.fsc-mk-c-sub {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.42);
margin-bottom: 18px;
}
.fsc-mk-c-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fsc-mk-c-cell-label {
font-family: var(--font-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.38);
margin-bottom: 6px;
}
.fsc-mk-c-cell-value {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
}
.fsc-mk-amend-list {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 4px 0;
}
.fsc-mk-amend-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fsc-mk-amend-row:last-child { border-bottom: none; }
.fsc-mk-amend-text {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
}
.fsc-mk-amend-icon {
width: 22px;
height: 22px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
.fsc-mk-amend-date {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.36);
}
.fsc-mk-list-head {
font-family: var(--font-ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.4);
margin: 6px 2px 4px;
}
/* ──── MOCKUP 2: INVOICING ──── */
.fsc-mk-inv-row {
display: grid;
grid-template-columns: 1fr 110px 90px 80px;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
.fsc-mk-inv-row.is-focus {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
}
.fsc-mk-inv-id {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
}
.fsc-mk-inv-cust {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.42);
margin-top: 2px;
}
.fsc-mk-inv-amount {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.84);
text-align: right;
}
.fsc-mk-inv-date {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.42);
}
.fsc-mk-inv-pill {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 8px;
border-radius: 999px;
text-align: center;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.fsc-mk-inv-pill.is-paid {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.55);
}
.fsc-mk-inv-pill.is-due { color: rgba(255, 255, 255, 0.88); }
.fsc-mk-inv-pill.is-disputed {
color: rgba(255, 200, 130, 0.95);
border-color: rgba(255, 180, 100, 0.25);
}
.fsc-mk-inv-detail {
margin-top: 6px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px 18px;
}
.fsc-mk-inv-timeline {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.fsc-mk-inv-event {
display: flex;
align-items: flex-start;
gap: 12px;
}
.fsc-mk-inv-event-time {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.38);
width: 50px;
flex-shrink: 0;
margin-top: 1px;
}
.fsc-mk-inv-event-text {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.5;
}
.fsc-mk-inv-event-text strong {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
}
/* ──── MOCKUP 3: COLLECTIONS ──── */
.fsc-mk-cust-head {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 14px;
}
.fsc-mk-cust-avatar {
width: 32px;
height: 32px;
border-radius: 7px;
background: linear-gradient(135deg, #2a2d34, #1d1f23);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.02em;
}
.fsc-mk-cust-name {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.fsc-mk-cust-meta {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
}
.fsc-mk-cust-balance {
margin-left: auto;
text-align: right;
}
.fsc-mk-cust-bal-amt {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.fsc-mk-cust-bal-label {
font-family: var(--font-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
}
.fsc-mk-coll-feed {
display: flex;
flex-direction: column;
gap: 10px;
}
.fsc-mk-coll-event {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.022);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 9px;
}
.fsc-mk-coll-event.is-highlight {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.12);
}
.fsc-mk-coll-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
margin-top: 2px;
}
.fsc-mk-coll-event-body { flex: 1; min-width: 0; }
.fsc-mk-coll-event-line {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
line-height: 1.45;
}
.fsc-mk-coll-event-line strong { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
.fsc-mk-coll-event-meta {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.38);
margin-top: 3px;
}
/* Apply-cash sub-panel inside collections (the "applied cash" fold-in) */
.fsc-mk-apply-cash {
margin-top: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
padding: 14px 16px;
}
.fsc-mk-ac-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.fsc-mk-ac-label {
font-family: var(--font-ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.5);
}
.fsc-mk-ac-payment {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
}
.fsc-mk-ac-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.fsc-mk-ac-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.72);
}
.fsc-mk-ac-check {
color: rgba(255, 255, 255, 0.92);
font-weight: 700;
}
/* ──── MOCKUP 2 NEW: INVOICING (Docupath — contract ingestion → schedule) ──── */
.fsc-mk-doc-card {
position: relative;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
}
.fsc-mk-doc-icon {
width: 32px;
height: 32px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
flex-shrink: 0;
}
.fsc-mk-doc-meta {
flex: 1;
min-width: 0;
}
.fsc-mk-doc-name {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
margin-bottom: 2px;
}
.fsc-mk-doc-sub {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
}
.fsc-mk-doc-status {
font-family: var(--font-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.5);
padding: 4px 8px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Sweep overlay — a soft horizontal scan that runs across the doc */
.fsc-mk-doc-sweep {
position: absolute;
top: 0;
bottom: 0;
width: 60%;
left: -60%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 40%,
rgba(255, 255, 255, 0.18) 50%,
rgba(255, 255, 255, 0.08) 60%,
transparent 100%);
pointer-events: none;
transition: left 1.6s cubic-bezier(0.65, 0.05, 0.36, 1);
transition-delay: var(--d, 0s);
}
.fsc-mockup.is-active .fsc-mk-doc-sweep { left: 100%; }
.fsc-mk-extract-list {
margin-top: 4px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
}
.fsc-mk-extract-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-family: var(--font-ui);
font-size: 12px;
}
.fsc-mk-extract-row:last-child { border-bottom: none; }
.fsc-mk-extract-label {
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.fsc-mk-extract-val {
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.fsc-mk-extract-check {
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
font-size: 11px;
}
.fsc-mk-schedule-head {
font-family: var(--font-ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.45);
margin: 12px 0 8px;
display: flex;
align-items: center;
gap: 8px;
}
.fsc-mk-schedule-head-line {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.fsc-mk-mini-inv-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.fsc-mk-mini-inv {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 8px 6px;
text-align: center;
font-family: var(--font-ui);
font-size: 10px;
color: rgba(255, 255, 255, 0.72);
}
.fsc-mk-mini-inv-month {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2px;
}
.fsc-mk-mini-inv-amt {
font-size: 9px;
color: rgba(255, 255, 255, 0.5);
}
.fsc-mk-schedule-more {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
margin-top: 10px;
padding: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
/* ──── MOCKUP 3 NEW BIT: AI-handled event for Collection CRM ──── */
.fsc-mk-coll-event.is-ai {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
border-color: rgba(255, 255, 255, 0.12);
}
.fsc-mk-coll-event-cite {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 7px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-ui);
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
}
.fsc-mk-coll-event-cite-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
}
/* ──── MOCKUP 4 NEW: INSIGHTS & REPORTING (global enterprise rollup) ──── */
.fsc-mk-entity-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.fsc-mk-entity-chip {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-weight: 500;
letter-spacing: 0.02em;
}
.fsc-mk-entity-chip.is-active {
background: rgba(255, 255, 255, 0.92);
color: #0e0e10;
border-color: rgba(255, 255, 255, 0.92);
}
.fsc-mk-entity-summary {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
margin-top: 8px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fsc-mk-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
}
.fsc-mk-kpi {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
padding: 12px 14px;
}
.fsc-mk-kpi-label {
font-family: var(--font-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 6px;
}
.fsc-mk-kpi-value {
font-family: var(--font-ui);
font-size: 19px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.015em;
line-height: 1.1;
}
.fsc-mk-kpi-trend {
font-family: var(--font-ui);
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.fsc-mk-kpi-trend.is-good { color: rgba(190, 220, 200, 0.85); }
.fsc-mk-bars-head {
font-family: var(--font-ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.45);
margin: 14px 0 6px;
}
.fsc-mk-bar-row {
display: grid;
grid-template-columns: 90px 1fr 110px;
align-items: center;
gap: 12px;
padding: 6px 0;
font-family: var(--font-ui);
}
.fsc-mk-bar-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.75);
font-weight: 500;
}
.fsc-mk-bar-track {
height: 6px;
background: rgba(255, 255, 255, 0.04);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.fsc-mk-bar-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.92));
border-radius: 999px;
width: 0;
transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: var(--d, 0s);
}
.fsc-mockup.is-active .fsc-mk-bar-fill { width: var(--w, 50%); }
.fsc-mk-bar-amt {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
text-align: right;
font-feature-settings: "tnum";
}
.fsc-mk-bar-amt strong {
color: rgba(255, 255, 255, 0.92);
font-weight: 600;
}
.fsc-mk-forecast {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fsc-mk-forecast-head {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 8px;
}
.fsc-mk-forecast-head strong {
color: rgba(255, 255, 255, 0.92);
font-weight: 600;
font-size: 12px;
}
.fsc-mk-sparkline {
width: 100%;
height: 50px;
display: block;
}
.fsc-mk-spark-path {
fill: none;
stroke: rgba(255, 255, 255, 0.85);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: var(--d, 0s);
}
.fsc-mockup.is-active .fsc-mk-spark-path { stroke-dashoffset: 0; }
.fsc-mk-spark-fill {
fill: rgba(255, 255, 255, 0.06);
opacity: 0;
transition: opacity 0.6s ease;
transition-delay: calc(var(--d, 0s) + 0.6s);
}
.fsc-mockup.is-active .fsc-mk-spark-fill { opacity: 1; }
/* ──── MOCKUP 4 OLD: INTELLIGENT INBOX (kept for reference, no longer used) ──── */
.fsc-mk-inbox-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.fsc-mk-email {
background: rgba(255, 255, 255, 0.022);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 13px 16px;
}
.fsc-mk-email.is-active {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.12);
}
.fsc-mk-email-from {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.fsc-mk-email-sender {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.fsc-mk-email-time {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
}
.fsc-mk-email-subj {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255, 255, 255, 0.62);
line-height: 1.45;
margin-bottom: 4px;
}
.fsc-mk-email-snippet {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.42);
line-height: 1.45;
}
.fsc-mk-email-snippet strong {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.fsc-mk-ai-reply {
margin-top: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 11px;
padding: 14px 16px;
position: relative;
}
.fsc-mk-ai-reply::before {
content: '';
position: absolute;
top: -1px;
left: 16px;
right: 16px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
opacity: 0.5;
}
.fsc-mk-ai-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.fsc-mk-ai-badge {
font-family: var(--font-ui);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.fsc-mk-ai-label {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
}
.fsc-mk-ai-draft {
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 12px;
}
.fsc-mk-ai-draft strong {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
}
.fsc-mk-citation-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.fsc-mk-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px 4px 6px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-ui);
font-size: 10px;
color: rgba(255, 255, 255, 0.72);
font-weight: 500;
}
.fsc-mk-chip-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
}
.fsc-mk-ai-actions {
display: flex;
align-items: center;
gap: 8px;
}
.fsc-mk-btn-primary {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
color: #0e0e10;
background: #f7f7f7;
border: none;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
transition: transform 0.2s var(--spring), box-shadow 0.3s ease;
}
.fsc-mk-btn-primary.is-pulsing {
animation: btn-pulse 1.4s ease;
}
@keyframes btn-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12); }
}
.fsc-mk-btn-secondary {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
}
/* "Logged against" tag that appears after approve */
.fsc-mk-logged-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 12px;
padding: 4px 9px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-ui);
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.45s ease, transform 0.45s var(--spring);
transition-delay: var(--d, 0s);
}
.fsc-mockup.is-active .fsc-mk-logged-tag {
opacity: 1;
transform: translateY(0);
}
.fsc-mk-logged-tag-check {
color: rgba(255, 255, 255, 0.9);
font-weight: 700;
}
/* ──── Reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
.anim-step, .fsc-mockup, .fsc-mk-logged-tag {
transition: none !important;
transform: none !important;
}
.fsc-mockup.is-active .anim-step,
.fsc-mockup.is-active .fsc-mk-logged-tag { opacity: 1 !important; }
}
/* ──── Responsive ──── */
@media (max-width: 1100px) {
.fsc-grid { gap: 56px; }
}
@media (max-width: 900px) {
.section-features { padding: 80px 24px 100px; }
.fsc-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.fsc-right {
position: relative;
top: 0;
height: 460px;
}
}
/* ════════════════════════════════════════════════════════════════════
CINEMATIC INVOICING FILM (v14 integration → v104)
────────────────────────────────────────────────────────────────────
Scoped to .fsc-mockup[data-mockup="invoicing"] so all selectors are
prefixed `cine-` AND nested under the Invoicing mockup. Other mockups
and v103 styles are unaffected.
The film is a 3-scene narrative:
1. Process — drop zone → contract OCR scan
2. Review — Mercury-style structured schedule card
3. Posted — schedule live in NetSuite + toast
Auto-plays on load and loops forever.
════════════════════════════════════════════════════════════════════ */
/* v105.8: easing tokens are shared across all cinematic mockups
(invoicing, collections, insights). Declared on .fsc-mockup so any
descendant scene can reference --cine-ease etc. */
.fsc-mockup {
--cine-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
--cine-easeOut: cubic-bezier(0.32, 0.06, 0.32, 1);
--cine-heavy-ease: cubic-bezier(0.8, 0, 0.1, 1);
/* v111.22: easing rebuilt. Was cubic-bezier(0.25, 1, 0.4, 1) — first
control y=1 = explosive start + slow crawl, which combined with
the 1.5s duration made the cursor look like it was "missing" its
target and then snapping. New curve is a symmetric easeInOut-cubic:
gentle acceleration from rest, brief mid-flight constant velocity,
gentle deceleration to target. This is the Apple pointer cadence. */
--cine-cursor-glide: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ──── v105.4: CAMERA RIG (shared across cinematic mockups) ────
A 3D-aware wrapper around all scenes + cursor. It does two things:
1. transform-style: preserve-3d lets child translateZ values
register as actual depth against the stage's perspective.
2. The infinite ambient dolly keyframe slowly drifts the rig
between rotateY(±1.6°) and translateZ(±8px). Effect: the
whole "set" subtly breathes — even when nothing is happening
in the scene, the camera is alive. Long 22s cycle keeps it
from registering as motion, just as atmosphere.
v105.8: dropped the [data-mockup="invoicing"] prefix so this is
reusable by collections, insights, etc. Any .fsc-mockup descendant
with this class gets the rig behavior. */
.fsc-mockup .cine-camera-rig {
position: absolute;
inset: 0;
transform-style: preserve-3d;
animation: cineAmbientDolly 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes cineAmbientDolly {
0% { transform: rotateY(1.6deg) translateZ(-8px); }
100% { transform: rotateY(-1.6deg) translateZ(8px); }
}
/* ──── SCENES: punch-in entrance, Z-recession exit ──── */
[data-mockup="invoicing"] .cine-scene {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding: 36px 40px;
opacity: 0;
/* v104.15: entrance starts slightly back in Z — small scale, soft
blur — then snaps forward. No more lateral translateX (carousel
physics). Tight 0.9s transform + 0.6s opacity = Apple snap. */
transform: scale(0.97) translateY(-6px);
filter: blur(6px);
pointer-events: none;
/* v109.22: scene CONTAINER entrance reverts to the deliberate
0.9s/0.6s/0.7s timing — part of the smooth cross-fade between
scenes. The cinematic's internal beats remain Mercury-paced. */
transition:
opacity 0.60s ease,
transform 0.90s var(--cine-ease),
filter 0.70s var(--cine-ease);
}
[data-mockup="invoicing"] .cine-scene.is-current {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
pointer-events: auto;
}
[data-mockup="invoicing"] .cine-scene.is-exiting {
/* v105.1: CLEAN CUT. Scene 1 collapses fast into the dark void
(opacity 0 in 250ms) while still gently dropping in Z-space.
By the time Scene 2's typography is cascading in, Scene 1 is
already invisible — no muddy double-exposure, no two-slides-
jammed-in-a-projector feel. */
opacity: 0;
transform: scale(0.85) translateY(20px);
filter: blur(0);
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.75s var(--cine-ease),
filter 0.6s var(--cine-ease);
}
/* v104.15: Per-element EXIT — workflow physics, NOT carousel physics.
The next scene slides FORWARD over the current one. The current
scene cannot fly back the way the next is arriving — that reads
as a carousel reset. Instead, it FALLS into Z-space: scales down,
nudges slightly down/forward, and defocuses. Reads as "this layer
recedes; the new layer comes in over the top." */
/* v105.20: .cine-scene.is-exiting .cine-cascade override removed.
Exit physics now live on the BASE .cine-cascade rule (asymmetric):
- entrance (base → is-current) uses the slow viscous ease declared
on .is-current
- exit (is-current → base / is-exiting) uses the fast accelerating
ease-in declared on the base
The .cine-scene-review.is-exiting override further down stays —
that's the special slide-right exit for Scene 2's end-of-cycle. */
/* Non-cascade key elements use the same Z-recession on exit. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-scan-status,
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-posted-toast {
opacity: 0;
transform: scale(0.85) translateY(20px);
filter: blur(12px);
transition:
opacity 0.55s ease,
transform 0.75s var(--cine-ease),
filter 0.65s var(--cine-ease);
transition-delay: 0.1s;
}
/* ──────────────────────────────────────────────────────────────
v109.15: SMOKE CASCADE on contract → schedule transition.
Each row of the contract dissolves to the right with blur +
rotateY + translateX, with --d stagger per row. Mirrors the
"cloud of smoke evaporating" feel of the kanban → inbox
transition. Scene container stays visible long enough for
the cascade to play; rows allowed to drift past the doc's
normal overflow:hidden bounds during exit.
────────────────────────────────────────────────────────── */
[data-mockup="invoicing"] .cine-scene.cine-scene-process.is-exiting {
/* v109.27: smooth exit window — container holds opacity 1 for
1.5s (while cascade + highlight decay play out), then fades
over 0.4s. Fully invisible by t≈1.9s. */
opacity: 0;
transform: none;
filter: none;
transition: opacity 0.4s ease 1.50s;
}
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-doc,
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text {
overflow: visible;
}
/* v109.27: smooth, unrushed exit — back to the previous smoke-
cascade speed, with the smoother in-out curve from v109.24. No
dramatic vapor (extreme blur + scale), but also no harsh
accelerating ease-in. Just clean, deliberate transitions. */
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-scan-status {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
transform-origin: center right;
filter: blur(8px);
transition:
opacity 0.95s cubic-bezier(0.45, 0, 0.25, 1),
transform 1.10s cubic-bezier(0.45, 0, 0.25, 1),
filter 0.95s cubic-bezier(0.45, 0, 0.25, 1);
transition-delay: 0s;
}
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > * {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
transform-origin: center right;
filter: blur(8px);
transition:
opacity 0.95s cubic-bezier(0.45, 0, 0.25, 1),
transform 1.10s cubic-bezier(0.45, 0, 0.25, 1),
filter 0.95s cubic-bezier(0.45, 0, 0.25, 1);
transition-delay: var(--d, 0s);
}
/* Highlights hold a beat then bleed out — matches the v109.24
smoothness: 0.20s delay + 1.20s decay. */
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-highlight {
transition:
background 1.20s cubic-bezier(0.45, 0, 0.25, 1) 0.20s,
border-color 1.20s cubic-bezier(0.45, 0, 0.25, 1) 0.20s,
color 1.20s cubic-bezier(0.45, 0, 0.25, 1) 0.20s,
box-shadow 1.20s cubic-bezier(0.45, 0, 0.25, 1) 0.20s;
background: transparent;
border-color: transparent;
box-shadow: none;
}
/* Per-row --d stagger via :nth-child so we don't have to touch
HTML. Same stagger applied to both .cine-legal-text-blurred and
.cine-legal-text-sharp layers — they share the same row order.
v109.19: extended from 13 → 15 rows after adding §6 Variable
charges. 15 rows × 0.05s = 0.7s total cascade window. */
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(1) { --d: 0s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(2) { --d: 0.05s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(3) { --d: 0.10s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(4) { --d: 0.15s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(5) { --d: 0.20s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(6) { --d: 0.25s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(7) { --d: 0.30s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(8) { --d: 0.35s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(9) { --d: 0.40s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(10) { --d: 0.45s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(11) { --d: 0.50s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(12) { --d: 0.55s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(13) { --d: 0.60s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(14) { --d: 0.65s; }
[data-mockup="invoicing"] .cine-scene-process.is-exiting .cine-legal-text > *:nth-child(15) { --d: 0.70s; }
/* v105.1: NATIVE DATA FOCUS — no JS clones, no DOM manipulation.
When .cine-legal-doc.is-done is set, surrounding paragraph text
dims sharply while .cine-legal-highlight spans keep their bright
color + background. The highlights "pop" off the page without
moving a single pixel. */
[data-mockup="invoicing"] .cine-legal-doc.is-done .cine-legal-text-sharp .cine-legal-para {
color: rgba(255, 255, 255, 0.15);
transition: color 0.6s ease;
}
/* v109.27: card fades together with its content so it doesn't sit
visibly during the schedule entrance. Same smooth curve, same
pace — no dramatic vapor, just a clean unified dissolve. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-legal-doc {
opacity: 0;
filter: blur(8px);
transition:
opacity 0.95s cubic-bezier(0.45, 0, 0.25, 1),
filter 0.95s cubic-bezier(0.45, 0, 0.25, 1);
}
/* Scanner line: silent exit so it doesn't streak during the cut */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-scanner-line {
opacity: 0;
transition: opacity 0.2s ease;
}
/* ── v105.21: DIRECTIONAL cascade — sweep in from left, sweep out
to right. Three states, all with the same hinge (center left)
so the rotation feels like the same physical object pivoting
on the same axis.
- Base = initial hidden state on the LEFT. Pivoted forward
(rotateY 15deg, right edge toward viewer), pushed 20px back
in Z, 40px off to the left, blurred. This is also the
fallback target when is-current is removed without
is-exiting, but the .is-exiting rule below overrides for the
actual scene transition.
- .is-current = settled. Snaps to flat (0,0,0), blur:0, with
slow heavy entrance physics.
- .is-exiting = sweep out to the RIGHT. Pivoted opposite way
(rotateY -15deg), pushed back, 40px past the right edge.
Inherits the base's fast accelerating ease-in for the actual
transition. */
[data-mockup="invoicing"] .cine-cascade {
opacity: 0;
transform: translateX(-40px) translateZ(-20px) rotateY(15deg);
transform-origin: center left;
filter: blur(8px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
}
[data-mockup="invoicing"] .cine-scene.is-current .cine-cascade {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0deg);
filter: blur(0);
/* v109.22: cascade ENTRANCE reverts to the slower, more
deliberate timing (0.85s transform, 0.60s opacity/filter).
This governs the smoke cross-fade between contract and
schedule — it should feel like one scene dissolves into
the next, not flash through. The rest of the cinematic
(dwells, fills, footer, CTA, camera pan) stays Mercury-paced. */
transition:
opacity 0.60s ease-out,
transform 0.85s var(--cine-ease),
filter 0.60s ease-out;
transition-delay: var(--d, 0s);
}
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-cascade {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
/* No transition declared here — inherits the base's fast
accelerating ease-in. */
transition-delay: var(--d, 0s);
}
/* v109.16: footer + CTA exit at the same beat as the top rows.
v109.21: tightened to new last-row position. Row 5 now at 0.54s.
Footer and CTA exit in step with the bottom of the wave. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-mc-footer.cine-cascade {
transition-delay: 0.54s;
}
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-cascade:has(.cine-review-cta) {
transition-delay: 0.60s;
}
/* v108m: AUTO-FILL — used for the dropdown VALUES in the Mercury-
style schedule. Row chrome cascades in first via .cine-cascade
(date, amount, empty dropdown box), then the dropdown values pop
in one-by-one with a spring. Delay set per-element via inline
--fill-delay style. */
/* v109.18: dropdown values now ROLL IN from the top instead of
popping with a scale + blur. Combined with overflow:hidden on
the dropdown chrome below, the text reads as slot-machine
value clicking into place from above. */
[data-mockup="invoicing"] .cine-auto-fill {
opacity: 0;
transform: translateY(-120%);
transition:
opacity 0.2s ease-in,
transform 0.25s ease-in;
}
[data-mockup="invoicing"] .cine-scene.is-current .cine-auto-fill {
opacity: 1;
transform: translateY(0);
/* v109.27: smooth slot-roll-in — 0.55s settling motion. */
transition:
opacity 0.30s ease-out,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--fill-delay, 0s);
}
/* v109.21: posting-account values leave with the SAME cascade-smoke
vocabulary as the rows, not the roll-up they used on entrance.
On the way IN the slot vocabulary makes sense (text clicking
into a filled slot). On the way OUT we want every element of
the schedule to dissipate as one unified smoke wave, so the
dropdown values, meter pill, and meter sub-line all translate
right + rotateY + blur, matching .cine-cascade exit. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-auto-fill {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transform-origin: center right;
transition:
opacity 0.30s ease-in,
transform 0.40s cubic-bezier(0.4, 0, 1, 1),
filter 0.30s ease-in;
transition-delay: 0s;
}
/* Lift the overflow clip during exit so the smoke can drift out
past the dropdown / meter slot bounds. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-mc-dropdown,
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-meter-slot {
overflow: visible;
}
/* v109.77: EMPHASIS POP — used for the DRAFT status pill and the
METERED overage row. Both stay hidden through the full row
cascade + dropdown auto-fill sequence (last value settles at
~1.48s), then pop in with a back-out spring after everything
else has loaded. Reads as "schedule is done loading → here are
the special signals to notice." Per-element --pop-delay
staggers the DRAFT, the +€1,820 pill, and its sub-line. */
[data-mockup="invoicing"] .cine-emphasis-pop {
opacity: 0;
transform: scale(0.6);
transform-origin: center;
transition:
opacity 0.22s ease-in,
transform 0.30s ease-in;
}
[data-mockup="invoicing"] .cine-scene.is-current .cine-emphasis-pop {
opacity: 1;
transform: scale(1);
transition:
opacity 0.28s ease-out,
transform 0.50s cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: var(--pop-delay, 1.65s);
}
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-emphasis-pop {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transform-origin: center right;
transition:
opacity 0.30s ease-in,
transform 0.40s cubic-bezier(0.4, 0, 1, 1),
filter 0.30s ease-in;
transition-delay: 0s;
}
/* ════════════════════════════════════════════════════════════════
MERCURY-STYLE SCHEDULE COMPONENTS (v108m)
────────────────────────────────────────────────────────────────
Search chrome, title, filter chips, column header, table rows,
dropdown cells, footer. Same visual vocabulary as Mercury's
Accounting page. All scoped to [data-mockup="invoicing"] so they
don't leak into other cinematics.
════════════════════════════════════════════════════════════════ */
/* Override .cine-review-card width for the Mercury schedule — the
previous 900px is too wide for the 3-column table. */
[data-mockup="invoicing"] .cine-scene-review .cine-review-card {
width: 760px;
}
/* Search chrome (Mercury hallmark — sits above the title) */
[data-mockup="invoicing"] .cine-mc-search {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
color: rgba(255, 255, 255, 0.42);
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 400;
letter-spacing: -0.005em;
margin-bottom: 24px;
}
[data-mockup="invoicing"] .cine-mc-search svg {
width: 13px;
height: 13px;
opacity: 0.6;
flex-shrink: 0;
}
/* Title */
[data-mockup="invoicing"] .cine-mc-title {
font-family: var(--font-ui);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
color: rgba(255, 255, 255, 0.96);
margin: 0 0 18px;
}
/* Filter chip row */
[data-mockup="invoicing"] .cine-mc-filters {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 28px;
flex-wrap: wrap;
}
[data-mockup="invoicing"] .cine-mc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.002em;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.78);
line-height: 1;
cursor: default;
}
[data-mockup="invoicing"] .cine-mc-chip svg {
width: 11px;
height: 11px;
opacity: 0.75;
flex-shrink: 0;
}
/* Sync — Mercury's primary action chip, blue-tinted */
[data-mockup="invoicing"] .cine-mc-chip.is-primary {
background: rgba(124, 124, 255, 0.22);
border-color: rgba(124, 124, 255, 0.35);
color: rgba(220, 220, 255, 0.96);
}
/* Active filter (the X-able pill) — slightly stronger contrast */
[data-mockup="invoicing"] .cine-mc-chip.is-active {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
}
/* 3-column grid for both header and rows. Tunables here so we can
adjust the column widths in one place.
v111.15: align-items: center → start so the date / amount /
dropdown text all baseline at the top of their cells. Every
row now carries a 2-line date-cell (date + status pill), so
center-alignment would have pushed the amount text down to
the middle of the cell, breaking the horizontal baseline. */
[data-mockup="invoicing"] .cine-mc-cols,
[data-mockup="invoicing"] .cine-mc-row {
display: grid;
grid-template-columns: 140px 130px 1fr;
align-items: start;
gap: 18px;
padding: 0 4px;
}
/* Column header — small, muted */
[data-mockup="invoicing"] .cine-mc-cols {
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 400;
color: rgba(255, 255, 255, 0.48);
letter-spacing: 0.01em;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 6px;
}
/* Row */
[data-mockup="invoicing"] .cine-mc-row {
padding: 9px 4px;
}
[data-mockup="invoicing"] .cine-mc-date {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.86);
letter-spacing: -0.003em;
font-variant-numeric: tabular-nums;
}
/* v109.28: date cell wrapper for the metered row — stacks the
date and the frosty-green DRAFT pill so the pill sits directly
under the date, visually balanced with the multi-line amount cell.
v109.79: gap zeroed. The vertical separation between the date
and the DRAFT pill is now driven by margin-top on the pill itself
so the pill (and its margin) can collapse to zero while the
schedule is loading. */
[data-mockup="invoicing"] .cine-mc-date-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
/* v111.15: status pill is now permanently visible on EVERY
schedule row. Default style is a GREY frosted "DRAFT" pill —
the steady state of a future invoice that hasn't gone out yet.
The first row (1 May 2026, already sent) carries the
.cine-mc-status-pill--sent modifier for the green frosted
"SENT" look. Previous behavior (collapse → emphasis-pop only
on the metered row) was removed since the pill is no longer
the dramatic standout; it's a status indicator carried by every
row in the schedule. */
[data-mockup="invoicing"] .cine-mc-status-pill {
display: inline-flex;
align-items: center;
padding: 2px 9px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.05em;
text-transform: uppercase;
backdrop-filter: blur(8px) saturate(1.3);
-webkit-backdrop-filter: blur(8px) saturate(1.3);
line-height: 1.55;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
flex-shrink: 0;
margin-top: 5px;
}
[data-mockup="invoicing"] .cine-mc-status-pill--sent {
background: rgba(120, 220, 160, 0.10);
border-color: rgba(120, 220, 160, 0.26);
color: rgba(170, 235, 195, 0.95);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
[data-mockup="invoicing"] .cine-mc-amount {
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.94);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
/* v109.19: USAGE-BASED ROW — proves the schedule carries both
fixed-fee and metered/variable line items on the same timeline.
v109.80: dropped the `align-items: start` override + the 1px
padding-top on the date. Those used to compensate for the
multi-line amount-cell, but now that the meter-slots and DRAFT
pill collapse to zero in the initial state, the row's cells
all sit at single-line height — same as every other schedule
row. Letting it inherit the default `align-items: center` from
.cine-mc-row means the metered row visually matches every
other row exactly while the schedule is loading. */
[data-mockup="invoicing"] .cine-mc-row-metered {
/* fall back to the default align-items: center on .cine-mc-row */
}
/* v109.79: amount-cell gap zeroed; vertical spacing between the
€42,500 base amount and each meter-slot now lives on the slot's
own margin-top, so collapsing the slot also collapses its
contribution to row height (a flex `gap` would still apply
even when the slot is max-height 0). */
[data-mockup="invoicing"] .cine-mc-amount-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
[data-mockup="invoicing"] .cine-meter-slot {
display: block;
overflow: hidden;
line-height: 1.4;
/* v109.79: slot collapsed to zero height AND zero top-margin
initially so the 1 May row matches the visual height of the
other schedule rows exactly while the schedule is loading.
Both expand smoothly together just before each emphasis-pop
fires — reads as "the row is opening up to make room for
this new line." */
max-height: 0;
margin-top: 0;
transition:
max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* :nth-child(2) = the first .cine-meter-slot (the 2nd child of
.cine-mc-amount-cell; the 1st is the €42,500 .cine-mc-amount).
:nth-child(3) = the second .cine-meter-slot. Switched from
:nth-of-type — which counts span tags regardless of class and
was matching the wrong elements (or nothing). */
[data-mockup="invoicing"] .cine-scene.is-current .cine-mc-amount-cell > .cine-meter-slot:nth-child(2) {
max-height: 30px;
margin-top: 3px;
transition-delay: 1.75s;
}
[data-mockup="invoicing"] .cine-scene.is-current .cine-mc-amount-cell > .cine-meter-slot:nth-child(3) {
/* v109.82: increased margin-top 3px → 8px so the grey
"API calls reconciled" sub-line sits with more breathing
room below the "+ €1,820 METERED" pill — centered in the
visual gap rather than hugging the line above. */
max-height: 24px;
margin-top: 8px;
transition-delay: 1.90s;
}
/* On exit the slots collapse back to 0 along with the row cascade
— quick decay so the row doesn't visibly resize mid-smoke. */
[data-mockup="invoicing"] .cine-scene.is-exiting .cine-meter-slot {
max-height: 0;
margin-top: 0;
transition:
max-height 0.25s ease-in,
margin-top 0.25s ease-in;
transition-delay: 0s;
}
[data-mockup="invoicing"] .cine-mc-meter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
color: rgba(140, 185, 255, 0.95);
letter-spacing: -0.003em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
[data-mockup="invoicing"] .cine-meter-chip {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 3px;
background: rgba(120, 170, 255, 0.14);
color: rgba(140, 185, 255, 0.80);
}
[data-mockup="invoicing"] .cine-mc-meter-sub {
display: inline-block;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 400;
color: rgba(255, 255, 255, 0.42);
letter-spacing: 0;
white-space: nowrap;
}
/* Dropdown cell — empty state shows chrome (border + arrow) but no
value text. Value lives inside .cine-mc-dropdown-value with
.cine-auto-fill which pops in later. */
[data-mockup="invoicing"] .cine-mc-dropdown {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 7px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
letter-spacing: -0.003em;
min-height: 30px;
box-sizing: border-box;
/* v109.18: clip the value as it rolls in from above. */
overflow: hidden;
}
[data-mockup="invoicing"] .cine-mc-dropdown-value {
flex: 1;
}
[data-mockup="invoicing"] .cine-mc-dropdown-arrow {
width: 11px;
height: 11px;
opacity: 0.4;
flex-shrink: 0;
margin-left: 8px;
}
/* Footer (totals strip) */
[data-mockup="invoicing"] .cine-mc-footer {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.48);
letter-spacing: 0;
padding-top: 14px;
margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 22px;
}
/* ──── SCENE 1: PROCESS ──── */
[data-mockup="invoicing"] .cine-scene-process {
display: flex;
flex-direction: column;
}
[data-mockup="invoicing"] .cine-process-drop {
/* v105.9: position absolute by default — was relative, switched to
absolute on is-scanning, which caused a one-frame layout glitch
(drop card jumped left) when the position model changed. Now the
card is always absolute, so only opacity/transform animate when
the scanning state fires. No layout reflow at the transition.
v105.24: BASE state is hidden / off-stage left, so the drop card
slides in from the left (matching the 3D pivot pattern used on
the cascade utility and the contract entrance). */
position: absolute;
inset: 0 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 28px;
/* v105.3: centering biased LEFT. The stage extends 360px past the
grid track into the blurred zone on the right, and the heavy
blur strip occupies roughly the rightmost ~460px. We shift the
centering inward so the drop card sits in the middle of the
visible (non-blurred) area, not the geometric middle of the
stage. Padding-right of 38% lands the center roughly at 31% of
the stage width — between the left edge and the blur start. */
padding-right: 38%;
/* Hidden / pivoted-left starting state */
opacity: 0;
transform: translateX(-80px) translateZ(-20px) rotateY(12deg);
transform-origin: center left;
filter: blur(4px);
}
/* Settle = the drop card pivots in from the left and lands centered
when the scene becomes current. Slow viscous ease for the entrance. */
[data-mockup="invoicing"] .cine-scene-process.is-current .cine-process-drop {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0deg);
filter: blur(0);
transition:
opacity 0.7s ease-out,
transform 0.95s var(--cine-ease),
filter 0.7s ease-out;
}
/* When the scanner phase begins, the drop card fades out upward.
Specificity matches the .is-current rule above; placed after so
it wins when both classes are present. */
[data-mockup="invoicing"] .cine-scene-process.is-scanning .cine-process-drop,
[data-mockup="invoicing"] .cine-scene-process.is-done .cine-process-drop {
opacity: 0;
transform: translateY(-24px);
filter: blur(0);
pointer-events: none;
transition:
opacity 0.5s ease-in,
transform 0.55s cubic-bezier(0.4, 0, 1, 1);
}
[data-mockup="invoicing"] .cine-drop-headline {
/* v105.12: Mercury direction — 28/400 instead of 26/600 */
font-family: var(--font-ui);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
[data-mockup="invoicing"] .cine-drop-zone {
position: relative;
width: 380px;
height: 200px;
border-radius: 8px;
border: 1.5px dashed rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.012);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
transition: border-color 0.4s ease, background 0.4s ease;
}
[data-mockup="invoicing"] .cine-drop-zone.is-hover {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.04);
}
[data-mockup="invoicing"] .cine-drop-zone.is-dropped {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.025);
}
[data-mockup="invoicing"] .cine-drop-zone-icon {
width: 50px; height: 50px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
color: rgba(255, 255, 255, 0.55);
transition: transform 0.4s var(--cine-spring), background 0.4s ease;
}
[data-mockup="invoicing"] .cine-drop-zone.is-dropped .cine-drop-zone-icon {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.05);
}
[data-mockup="invoicing"] .cine-drop-zone-label {
/* v105.12: weight 500 → 400 */
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
}
[data-mockup="invoicing"] .cine-drop-zone-hint {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.32);
}
[data-mockup="invoicing"] .cine-flying-file {
/* v105.24: reverted to top-right swoop (the original trajectory).
The misread was mine — the user wanted the DROP CARD to come
from the left, not the PDF. PDF arc stays as-is. */
position: absolute;
top: 0; left: 0;
width: 40px; height: 50px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(225, 225, 225, 0.85));
border-radius: 3px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
transform: translate(440px, -120px) rotate(20deg);
opacity: 0;
transition: transform 1.0s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700;
color: rgba(0, 0, 0, 0.65);
letter-spacing: 0.05em;
}
[data-mockup="invoicing"] .cine-flying-file.is-flying {
opacity: 1;
transform: translate(170px, 75px) rotate(-3deg);
}
/* 1B: OCR contract scanner */
[data-mockup="invoicing"] .cine-process-scan {
/* v105.22: contract now sweeps in from the LEFT with the same
3D pivot physics used on .cine-cascade elements (translateX
+ translateZ + rotateY). Was a flat upward slide — now reads
as a physical document hinging into the stage from the left,
matching the rest of the cinematic's left-to-right flow. */
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(-60px) translateZ(-20px) rotateY(10deg);
transform-origin: center left;
pointer-events: none;
/* v105.2: transition declared ONLY on the active state below, NOT
on this base. Reason: when the loop restarts, sceneProcess loses
is-done and this layer should snap invisible INSTANTLY — not
fade over 1.1s while Scene 1's drop UI is fading in underneath,
which caused the contract to briefly reappear. With the
transition scoped to the entering state, the entrance still
fades in smoothly when is-scanning is added, but removal is
a hard cut. */
}
[data-mockup="invoicing"] .cine-scene-process.is-scanning .cine-process-scan,
[data-mockup="invoicing"] .cine-scene-process.is-done .cine-process-scan {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0deg);
pointer-events: auto;
/* v109.27: paper sweep restored to smooth pace — 0.8s/0.9s with 0.3s delay. */
transition: opacity 0.8s var(--cine-ease) 0.3s, transform 0.9s var(--cine-ease) 0.3s;
}
[data-mockup="invoicing"] .cine-legal-doc {
/* v105.11: contract scaled up ~40% (580→812 wide, 760→1064 tall)
so it feels like a real document, not a thumbnail. Right edge
runs into the stage blur on most viewports, which is exactly
the Mercury bleed treatment we want.
v106: subtle cool-tinted translucent surface, no frame, so
the card reads as a faint sheet of paper sitting on the stage
instead of a bordered tile. Tint shifted from neutral white
toward a cool blue (rgb 170/200/240) and alpha lowered to
0.045 — more translucent, slightly blueish. */
position: absolute;
top: 64px;
left: 40px;
width: 812px;
height: 1064px;
background: rgba(170, 200, 240, 0.045);
border: none;
border-radius: 10px;
opacity: 0.88;
overflow: hidden;
color: rgba(255, 255, 255, 0.92);
font-family: var(--font-ui);
}
[data-mockup="invoicing"] .cine-legal-text {
/* v105.11: deeper internal padding + larger gap so the text
breathes the way a real letter-sized contract does. */
position: absolute;
inset: 52px 56px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
line-height: 1.6;
}
/* v104.7: SELECTIVE blur — title, meta, and section heads stay sharp
always. Only paragraph content gets the cinematic blur. The sharp
layer covers paragraphs above the scanner; below the scanner, the
blurred paragraphs in the back layer show through. */
[data-mockup="invoicing"] .cine-legal-text-blurred {
z-index: 1;
/* v105.23: hidden initially. Text "ink" fades onto the paper
AFTER the card has had time to settle. Transition lives on
the active state below so the reset snaps cleanly. */
opacity: 0;
}
/* CINEMATIC BLUR — chained filter for depth, not just gaussian.
blur() + saturate() + brightness() + contrast() creates the
"frosted glass at depth" feel Mercury uses. */
[data-mockup="invoicing"] .cine-legal-text-blurred .cine-legal-para {
/* v105.11: blur amount bumped proportionally to the 1.4x text scale */
filter: blur(5px) saturate(0.6) brightness(0.92) contrast(0.92);
opacity: 0.5;
}
/* Structural elements in the back layer stay perfectly sharp */
[data-mockup="invoicing"] .cine-legal-text-blurred .cine-legal-title,
[data-mockup="invoicing"] .cine-legal-text-blurred .cine-legal-meta,
[data-mockup="invoicing"] .cine-legal-text-blurred .cine-legal-section-head,
[data-mockup="invoicing"] .cine-legal-text-blurred .cine-legal-sig-line {
filter: none;
opacity: 1;
}
[data-mockup="invoicing"] .cine-legal-text-sharp {
z-index: 2;
clip-path: inset(0 0 100% 0);
/* v105.23: hidden initially (same as the blurred layer) so both
text layers fade in together AFTER the card has settled. */
opacity: 0;
/* v105.2: clip-path transition declared on the active state only.
Reason: on loop reset, is-done is removed and we want the
reveal to snap back to hidden instantly, not slowly unmask
over 3.8s. */
}
/* Structural elements in the front layer are visibility:hidden so
the back layer's always-sharp versions show through. */
[data-mockup="invoicing"] .cine-legal-text-sharp .cine-legal-title,
[data-mockup="invoicing"] .cine-legal-text-sharp .cine-legal-meta,
[data-mockup="invoicing"] .cine-legal-text-sharp .cine-legal-section-head,
[data-mockup="invoicing"] .cine-legal-text-sharp .cine-legal-sig-line {
visibility: hidden;
}
/* v105.23: INK FADES IN. When the scene enters the scanning phase
(after the paper has had time to sweep in from the left and
settle), both text layers transition from invisible to opaque
over 0.8s with a 0.6s delay. The delay is the gap that gives the
card time to land before the text starts materializing — same
"paper lands, ink populates" two-beat entrance Mercury uses. */
[data-mockup="invoicing"] .cine-scene-process.is-scanning .cine-legal-text-blurred,
[data-mockup="invoicing"] .cine-scene-process.is-scanning .cine-legal-text-sharp,
[data-mockup="invoicing"] .cine-scene-process.is-done .cine-legal-text-blurred,
[data-mockup="invoicing"] .cine-scene-process.is-done .cine-legal-text-sharp {
opacity: 1;
/* v109.27: ink-onto-paper restored to smooth pace — 0.8s with 0.6s delay. */
transition: opacity 0.8s ease 0.6s;
}
[data-mockup="invoicing"] .cine-legal-doc.is-scanning .cine-legal-text-sharp {
clip-path: inset(0 0 0 0);
/* v109.28: scanner sweep tightened to 2.5s — fast enough to
feel like active scanning, slow enough to still read as
deliberate reveal (not a flicker). */
transition: clip-path 2.5s var(--cine-heavy-ease);
}
[data-mockup="invoicing"] .cine-legal-doc.is-done .cine-legal-text-sharp {
clip-path: inset(0 0 0 0);
/* No transition — by the time is-done is set, the sweep has
completed and we just hold the revealed state. */
}
[data-mockup="invoicing"] .cine-legal-title {
/* v105.12: Mercury direction — bigger, lighter, hierarchy from
size not weight. Was 22/600, now 28/400. */
font-family: var(--font-ui);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
color: rgba(255, 255, 255, 0.96);
margin-bottom: 8px;
}
[data-mockup="invoicing"] .cine-legal-meta {
/* v105.12: dropped italic, weight to 400, size to 14 */
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
letter-spacing: 0;
margin-bottom: 22px;
}
[data-mockup="invoicing"] .cine-legal-section-head {
/* v105.12: was 15/600 UPPERCASE +0.14em — three shout-treatments
stacked. Now 13/500 sentence case, no tracking, slightly muted.
The "1 · " number prefix carries the section feel. */
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.72);
margin-top: 18px;
margin-bottom: 6px;
}
[data-mockup="invoicing"] .cine-legal-para {
/* v105.12: slightly smaller, kept at 400. Mercury body sits ~14. */
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.66);
line-height: 1.6;
letter-spacing: 0;
}
[data-mockup="invoicing"] .cine-legal-highlight {
color: rgba(255, 255, 255, 1);
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
padding: 2px 7px;
border-radius: 3px;
font-weight: 500;
}
[data-mockup="invoicing"] .cine-legal-sig-line {
/* v105.11: signature block scaled 1.4x */
display: flex;
gap: 26px;
margin-top: 24px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
[data-mockup="invoicing"] .cine-legal-sig-line > div {
flex: 1;
border-top: 0.5px solid rgba(255, 255, 255, 0.18);
padding-top: 8px;
}
/* v104.15: VOLUMETRIC LASER. Not a CSS line — a beam of light.
Hot white 2px core + screen-blended blue bloom in a 3-stop stack
(8px close glow, 24px mid bloom, 60px far halo). Reads as an
intense, near-physical scanner burning data into existence.
mix-blend-mode: screen means the line ADDS light to whatever's
beneath it — exactly how real volumetric lighting behaves.
v105.8: base styles unscoped so collections can reuse the same
laser. State triggers (.is-scanning/.is-done) stay scoped per
mockup so each owns its own scanner binding. */
.fsc-mockup .cine-scanner-line {
position: absolute;
left: 0; right: 0;
/* v109.17: laser presence dialed back another 10× from v108i.
Core alpha 0.65 → 0.08, shadows softened proportionally and
the outer glow dropped entirely. Reads as a faint trace
passing across the page rather than a visible cursor. */
height: 1px;
background: rgba(255, 255, 255, 0.08);
box-shadow:
0 0 1px rgba(255, 255, 255, 0.05),
0 0 3px rgba(120, 170, 255, 0.03);
mix-blend-mode: screen;
top: 0;
opacity: 0;
z-index: 3;
/* v109.28: laser sweep duration matches clip-path (2.5s). */
transition: top 2.5s var(--cine-heavy-ease), opacity 0.5s ease;
pointer-events: none;
}
[data-mockup="invoicing"] .cine-legal-doc.is-scanning .cine-scanner-line {
top: 100%;
opacity: 1;
}
[data-mockup="invoicing"] .cine-legal-doc.is-done .cine-scanner-line { opacity: 0; }
/* Scan status pill (top-right floater) — shared across mockups */
.fsc-mockup .cine-scan-status {
position: absolute;
top: 18px; right: 18px;
z-index: 5;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
gap: 9px;
padding: 7px 13px;
background: rgba(20, 22, 26, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
letter-spacing: 0.02em;
}
.fsc-mockup .cine-scan-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
animation: cine-pulse-white 1.4s infinite ease-in-out;
}
[data-mockup="invoicing"] .cine-scene-process.is-done .cine-scan-status .cine-scan-status-dot,
[data-mockup="collections"] .cine-scene-inbox.is-done .cine-scan-status .cine-scan-status-dot {
animation: none;
background: rgba(255, 255, 255, 0.92);
}
@keyframes cine-pulse-white {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ──── SCENE 2: REVIEW (Mercury-style structured card) ──── */
[data-mockup="invoicing"] .cine-scene-review {
display: block;
}
/* v105.21: Scene 2 keeps its container at opacity:1 during exit so
the cascade has time to sweep out. The CASCADE EXIT direction
itself is now driven by the global directional pattern (sweep
right with 3D pivot, fast accelerating ease-in). No per-scene
cascade override needed anymore. */
[data-mockup="invoicing"] .cine-scene.cine-scene-review.is-exiting {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
pointer-events: none;
transition: none;
}
[data-mockup="invoicing"] .cine-review-card {
/* v104.11: card chrome removed — content sits directly on the
.fsc-stage background. No nested-card feel; the stage IS the
surface. Natural flow inside the scene's 36px/40px padding,
so spacing matches the Posted scene exactly.
v105.5: MERCURY CAMERA SCROLL, refined.
Card starts at translateY(0) — "Review schedule" title sits
at the top of the stage on entrance. The CTA lives WAY below
the fold (via the .cine-review-cta-wrap spacing rule). When
.is-scrolled fires, the card translates UP by 220px — title
and top sections scroll OUT through the top blur band, and
the CTA rises into focus from below. */
position: static;
margin: 0;
width: 900px;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
transform: translateY(0);
/* v109.27: camera pan restored to smooth 1.3s. */
transition: transform 1.3s var(--cine-heavy-ease);
}
[data-mockup="invoicing"] .cine-scene-review.is-scrolled .cine-review-card {
/* v108m: retuned -220 → -180 for the new Mercury schedule. The
new content (search + title + filters + 5 rows + footer +
approve) is ~530px tall; pushing it up 180px keeps the rows
partially visible up top and brings the approve button into
the lower-middle of the stage where the cursor lands. */
transform: translateY(-180px);
}
/* v105.6: Extra spacing above the CTA — was 180px which felt
disconnected. 100px keeps the CTA below the fold initially so
the camera scroll still has travel, but visually the button
reads as connected to the form above it, not floating in a
void. */
[data-mockup="invoicing"] .cine-review-card > .cine-cascade:last-child {
margin-top: 100px;
}
/* v105.5: TOP-EDGE BLUR BAND. As content scrolls UP past the top of
the stage, it passes through this band — a soft frosted-glass
"near plane" of the camera. Content fades into the blur, then
gets clipped at the stage's top edge. Reads as a real camera
with a shallow depth of field, not as content jumping off-screen.
Only appears once the scene is scrolled — when the scene is
parked at the top with the title in clear view, no need for it. */
[data-mockup="invoicing"] .cine-scene-review::before {
content: '';
position: absolute;
top: -36px; /* extend above scene padding so the band starts at the very top of the stage */
left: -40px;
right: -40px;
height: 110px;
z-index: 5;
pointer-events: none;
opacity: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.55) 55%,
rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
transition: opacity 0.5s ease;
}
[data-mockup="invoicing"] .cine-scene-review.is-scrolled::before {
opacity: 1;
}
[data-mockup="invoicing"] .cine-review-title {
/* v105.12: Mercury direction — 28/400 */
font-family: var(--font-ui);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
color: rgba(255, 255, 255, 0.96);
margin-bottom: 28px;
}
[data-mockup="invoicing"] .cine-review-section-label {
/* v105.12: weight 500 → 400, slightly bigger, muted color */
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 16px;
letter-spacing: 0;
}
[data-mockup="invoicing"] .cine-review-amount-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 6px;
}
[data-mockup="invoicing"] .cine-review-amount-block {
display: flex;
flex-direction: column;
gap: 4px;
}
[data-mockup="invoicing"] .cine-review-amount-label {
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
[data-mockup="invoicing"] .cine-review-amount {
font-family: var(--font-ui);
font-size: 56px;
font-weight: 400;
letter-spacing: -0.032em;
line-height: 1;
color: rgba(255, 255, 255, 0.98);
font-variant-numeric: tabular-nums;
}
[data-mockup="invoicing"] .cine-review-amount-currency {
font-size: 38px;
font-weight: 400;
vertical-align: baseline;
color: rgba(255, 255, 255, 0.6);
margin-right: 3px;
}
[data-mockup="invoicing"] .cine-review-due-badge {
/* v105.12: weight 500 → 400 */
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.72);
padding: 7px 13px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
white-space: nowrap;
margin-top: 30px;
}
[data-mockup="invoicing"] .cine-review-amount-sub {
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
margin-top: 6px;
margin-bottom: 24px;
}
[data-mockup="invoicing"] .cine-review-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 0 0 18px 0;
}
[data-mockup="invoicing"] .cine-review-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-mockup="invoicing"] .cine-review-field:last-child { border-bottom: none; }
[data-mockup="invoicing"] .cine-review-field-label {
/* v105.12: explicit weight 400
v110.1: label opacity dropped 0.55 → 0.4 so the contrast
between whisper-quiet labels and pristine data values is
sharper — matches Mercury's actual data/label hierarchy. */
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
}
[data-mockup="invoicing"] .cine-review-field-value {
/* v105.12: weight 500 → 400 (Mercury direction). Brightness
carries emphasis instead of weight.
v110.1: re-bumped to weight 500 + pure white. With labels
now at 0.4 opacity, the data values need to feel heavy and
pristine against them. This is Mercury's actual ratio. */
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
[data-mockup="invoicing"] .cine-review-field-pill {
/* v105.12: weight 500 → 400 */
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
padding: 6px 13px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
}
[data-mockup="invoicing"] .cine-btn-primary {
padding: 12px 24px;
background: #f7f7f7;
color: #0e0e10;
border: none;
border-radius: 999px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease, transform 0.12s ease;
}
[data-mockup="invoicing"] .cine-btn-primary.is-pressed {
transform: scale(0.96);
filter: brightness(0.92);
}
[data-mockup="invoicing"] .cine-review-cta {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 7px;
/* v105.7: frosted glass CTA. Translucent white with backdrop
blur reads as a glass pill against the dark navy. White text
so it stands cleanly against any background it sits over.
Hover (real user or the cinematic cursor via .is-fake-hovered)
fills it with a saturated blue — the "action" color. */
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.20);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
/* v105.10: drop shadow toned WAY down — the frosted pill should
feel surface-flush, not floating. Keep a tiny inset highlight
for the top-edge bevel; lose the heavy drop shadow. */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
background 0.28s ease,
border-color 0.28s ease,
color 0.28s ease,
box-shadow 0.28s ease,
filter 0.15s ease,
transform 0.12s ease;
}
[data-mockup="invoicing"] .cine-review-cta:hover,
[data-mockup="invoicing"] .cine-review-cta.is-fake-hovered {
background: #3b82f6;
border-color: #3b82f6;
color: #ffffff;
/* v105.10: subtle blue lift on hover, no big glow halo */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 2px 6px rgba(59, 130, 246, 0.22);
}
[data-mockup="invoicing"] .cine-review-cta-arrow {
transition: transform 0.3s var(--cine-spring);
}
[data-mockup="invoicing"] .cine-review-cta:hover .cine-review-cta-arrow,
[data-mockup="invoicing"] .cine-review-cta.is-fake-hovered .cine-review-cta-arrow {
transform: translateX(3px);
}
/* ──── SCENE 3: POSTED ──── */
[data-mockup="invoicing"] .cine-scene-posted {
display: flex;
flex-direction: column;
gap: 22px;
/* v104.2: widened to 900px to accommodate larger zoomed-in cards
while still staying in the un-faded portion of the bled stage. */
max-width: 900px;
}
[data-mockup="invoicing"] .cine-posted-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
[data-mockup="invoicing"] .cine-posted-title {
font-family: var(--font-ui);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.012em;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
[data-mockup="invoicing"] .cine-posted-badge {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
padding: 5px 12px;
border-radius: 4px;
background: #f7f7f7;
color: #0e0e10;
}
[data-mockup="invoicing"] .cine-posted-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 8px;
font-family: var(--font-ui);
}
[data-mockup="invoicing"] .cine-posted-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
[data-mockup="invoicing"] .cine-posted-card {
position: relative;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 16px 14px;
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
}
[data-mockup="invoicing"] .cine-posted-card-date {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
}
[data-mockup="invoicing"] .cine-posted-card-amt {
font-family: var(--font-ui);
font-size: 17px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.008em;
font-variant-numeric: tabular-nums;
}
[data-mockup="invoicing"] .cine-posted-card-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
}
[data-mockup="invoicing"] .cine-posted-card-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}
[data-mockup="invoicing"] .cine-posted-footer {
font-family: var(--font-ui);
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 14px 0 4px;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-mockup="invoicing"] .cine-posted-toast {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(36px);
background: #f7f7f7;
color: #0e0e10;
font-size: 12px; font-weight: 600;
padding: 9px 18px;
border-radius: 999px;
box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
opacity: 0;
transition: opacity 0.5s ease 1.6s, transform 0.7s var(--cine-spring) 1.6s;
display: flex; align-items: center; gap: 7px;
}
[data-mockup="invoicing"] .cine-scene-posted.is-current .cine-posted-toast {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-mockup="invoicing"] .cine-posted-toast-check { font-weight: 800; }
/* ──── GHOST CURSOR (shared across cinematic mockups) ──── */
.fsc-mockup .cine-ghost-cursor {
/* v105.13: 2x bigger — was 18px, now 36px. moveCursorTo /
clickButton offsets bumped from -9 to -18 to keep the cursor
centered on its target.
v105.16: dropped invoicing scope so collections can reuse. */
position: absolute;
top: 0; left: 0;
width: 36px; height: 36px;
z-index: 20;
pointer-events: none;
opacity: 0;
transform: translate(140%, 200%);
/* v110.2: cursor shadow refined from a single heavy drop-shadow
(which reads as a CSS effect) to a two-layer stack: a tight
physical shadow + a 1px white halo around the edge. This is
the macOS pointer treatment — sharp silhouette against any
background, not a soft blob behind it. */
filter:
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
drop-shadow(0 0 1px rgba(255, 255, 255, 0.1));
/* v111.22: 1.5s → 0.75s. The JS waits ~700ms between moveCursorTo
and the click, then clickButton swaps the transition to 0.12s
and snaps the cursor the rest of the way to the target. With a
1.5s glide the cursor was only ~47% of the way there when the
click fired, so it visibly drifted slowly then snapped — that's
the "strange trajectory." A 0.75s glide arrives just before the
click, hovers a beat, then presses. */
transition: transform 0.75s var(--cine-cursor-glide), opacity 0.45s ease;
}
.fsc-mockup .cine-ghost-cursor.is-visible { opacity: 1; }
.fsc-mockup .cine-ghost-cursor.is-clicking { transition: transform 0.12s ease !important; }
/* ════════════════════════════════════════════════════════════════
COLLECTIONS CINEMATIC — v105.8
────────────────────────────────────────────────────────────────
Scene 1: Signal in. An email lands. The volumetric laser scans
the body. After the sweep, body paragraphs dim while two
highlight spans (amount + due date) stay bright — same data
focus pattern as invoicing's legal doc. Then a structured
signal card materializes below the email: "Signal posted to
INV-4471 / Promise to pay / €25,700 / Fri 22 May". The viewer
sees messy unstructured email become a clean structured
action item against the right case.
════════════════════════════════════════════════════════════════ */
/* v105.25: MASTER-DETAIL LATERAL SLIDE physics.
Scene 1 (Inbox triage) is the "list" view. Scene 2 (CRM detail) is
the "deeper" view. The transition mimics iOS/Mercury master-detail
navigation: Scene 1 slides LEFT (recedes), Scene 2 slides in from
the RIGHT (forward into focus). Reset comes back to Scene 1
directly via a clean fade rather than a reverse-slide. */
[data-mockup="collections"] .cine-scene {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
padding: 36px 40px;
opacity: 0;
pointer-events: none;
transition:
opacity 0.4s var(--cine-ease),
transform 0.6s var(--cine-heavy-ease);
}
/* v105.39: scene is-current uses transform: none (not translateX(0)
scale(1)) so the scene doesn't sit on a GPU layer at rest. The
filter property has been removed from this rule entirely, so the
scene has no filter context wrapping its children. The transitions
on opacity/transform still play correctly because base has explicit
transform values that interpolate to none. */
[data-mockup="collections"] .cine-scene.is-current {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* Scene 1's exit pushes LEFT (recede), Scene 2's exit (on loop reset)
fades + scales without slide. */
[data-mockup="collections"] .cine-scene[data-cine-scene="1"].is-exiting {
opacity: 0;
transform: translateX(-120px) scale(0.98);
filter: blur(4px);
}
/* v105.37: Scene 2's base sits at identity now. Previously this had
transform: translateX(120px) scale(0.98) to slide in from the right
for a master-detail effect — but that parent slide composed with
the row cascade's translateX(-40 → 0) and made the elements read
as coming from the RIGHT instead of cleanly from the left. By
keeping Scene 2 at identity, the cascade is the only horizontal
motion on entry — matching the inbox cascade behavior. The
master-detail directionality is still carried by Scene 1's slide-
out-to-left exit. */
[data-mockup="collections"] .cine-scene[data-cine-scene="2"] {
transform: scale(0.98);
}
/* Scene 2's exit (loop reset) — just fades, no slide. */
[data-mockup="collections"] .cine-scene[data-cine-scene="2"].is-exiting {
opacity: 0;
transform: scale(0.98);
filter: blur(4px);
}
/* ════════════════════════════════════════════════════════════════
v105.25: COLLECTIONS — SCENE 1: TRIAGE INBOX
Clean list, three rows, top one has Dispute badge + cursor click.
════════════════════════════════════════════════════════════════ */
/* v105.26: Inbox content sits DIRECTLY on the stage — no card chrome.
v105.30: CAMERA SCROLL — the dispute row is row 4 in the list, so
initially it's mid-list. When .is-scrolled fires, the whole inbox
card translates UP, scrolling the search/title/tabs/upper rows
past the top blur band, bringing the dispute row into the focal
zone. Same Mercury camera-pan pattern as the invoicing Review.
v105.32: TRANSITION lives on the active state, not the base.
Reason: on loop restart, the card was at translateY(-200) from
the previous cycle and would visibly slide back DOWN as Scene 1
was also sliding in from the left — two motions at once read as
a glitch. With the transition on .is-scrolled only, removing the
class on reset snaps the card to translateY(0) instantly, so
Scene 1's entrance is purely lateral. The camera-scroll motion
still plays smoothly when .is-scrolled is added later. */
/* v105.44: camera scroll now transitions BOTH WAYS (down and back
up) smoothly, instead of only on the way down. The cinematic
plays: scroll down to "browse", then scroll back up before the
new email arrives. Reset (loop restart) still needs to snap-
reset cleanly — handled in JS resetCinematic() via
`transition: none` for one frame. */
[data-mockup="collections"] .cine-inbox-card {
position: relative;
width: 100%;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
font-family: var(--font-ui);
overflow: visible;
transform: translateY(0);
transition: transform 0.85s var(--cine-heavy-ease);
}
[data-mockup="collections"] .cine-scene-inbox.is-scrolled .cine-inbox-card {
transform: translateY(-140px);
}
/* v105.48 / v105.49: DEPTH-OF-FIELD LENS via direct filter: blur.
backdrop-filter + radial mask was being killed by the 3D
camera-rig (transform-style: preserve-3d breaks backdrop-filter
on descendants in most browsers). Direct filter is bulletproof.
v105.49 fix: transitions live ONLY on the .is-focusing-new state
rules, NOT on a generic base rule — earlier the base rule's
`transition: filter, opacity` declaration was overriding the
cascade-inbox rule's transform-included transition (4-class
specificity vs 3-class), which made the cascade rows snap into
place instead of animating from translateX(-40px). With the
transition declarations only on the focus state, the cascade
entrance keeps its own translateX animation. */
/* Chrome — search, title head, tabs, toolbar. Heavy blur. */
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-search,
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-head,
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-tabs,
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-toolbar {
filter: blur(10px) saturate(0.55);
opacity: 0.40;
transition:
filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Existing rows — progressively heavier blur further from Acme.
nth-child(1) is Acme itself and is NOT selected. */
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-list .cine-inbox-row.cine-cascade-inbox:nth-child(2) {
filter: blur(4px) saturate(0.70);
opacity: 0.62;
transition:
filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-list .cine-inbox-row.cine-cascade-inbox:nth-child(3) {
filter: blur(7px) saturate(0.65);
opacity: 0.50;
transition:
filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-list .cine-inbox-row.cine-cascade-inbox:nth-child(4) {
filter: blur(10px) saturate(0.60);
opacity: 0.40;
transition:
filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-scene-inbox.is-focusing-new .cine-inbox-list .cine-inbox-row.cine-cascade-inbox:nth-child(n+5) {
filter: blur(13px) saturate(0.55);
opacity: 0.32;
transition:
filter 0.85s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.85s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Top-edge blur band — fades in with the camera scroll and out
when the scroll reverses. Reset (loop) snaps it via JS. */
[data-mockup="collections"] .cine-scene-inbox::before {
content: '';
position: absolute;
top: -36px;
left: -40px;
right: -40px;
height: 110px;
z-index: 5;
pointer-events: none;
opacity: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.55) 55%,
rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
transition: opacity 0.5s ease;
}
[data-mockup="collections"] .cine-scene-inbox.is-scrolled::before {
opacity: 1;
}
/* v105.33: CASCADE FROM LEFT — IDENTICAL physics to the invoicing
"Approve & schedule" cascade (same translateX/translateZ/rotateY
distances, same blur, same easings, same durations). Search bar,
title, tabs, and each row slide in from the left with a 3D pivot,
staggered via --d. On exit (when Scene 1 becomes .is-exiting),
they sweep out to the right.
v105.34: SPECIFICITY BUMP. The base .cine-inbox-row rule (lower
in source) declares `transition: background 0.25s ease` at equal
specificity, which would otherwise override the cascade's base
transition declaration and break the exit fade for rows. We use
.cine-scene-inbox .cine-cascade-inbox (descendant chain) so the
base rule outranks the row's own transition declaration. */
[data-mockup="collections"] .cine-scene-inbox .cine-cascade-inbox {
opacity: 0;
transform: translateX(-40px) translateZ(-20px) rotateY(15deg);
transform-origin: center left;
filter: blur(8px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
}
[data-mockup="collections"] .cine-scene-inbox.is-current .cine-cascade-inbox {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0deg);
filter: blur(0);
transition:
opacity 0.6s ease-out,
transform 0.85s var(--cine-ease),
filter 0.6s ease-out;
transition-delay: var(--d, 0s);
}
[data-mockup="collections"] .cine-scene-inbox.is-exiting .cine-cascade-inbox {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
transition-delay: var(--d, 0s);
}
/* v106.7: NEW-EMAIL rows (Acme) sweep-right with the cascade when
the scene exits — same invoicing physics. The morph's max-height
stays at its arrived value during the sweep; the lateral motion
carries the row off-stage. Higher specificity (4 classes vs the
.is-new-arriving rule's 3) so this exit rule wins. */
[data-mockup="collections"] .cine-scene-inbox.is-exiting .cine-inbox-row[data-cine-new-email].is-new-arriving {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transform-origin: center left;
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
transition-delay: var(--d, 0s);
}
/* v105.27: Search bar — frosted pill at the top of the inbox.
Matches Mercury's "Search or jump to" pattern. */
[data-mockup="collections"] .cine-inbox-search {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 14px;
margin-bottom: 22px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: rgba(255, 255, 255, 0.42);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
}
[data-mockup="collections"] .cine-inbox-search svg {
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
[data-mockup="collections"] .cine-inbox-search-placeholder {
font-weight: 400;
}
[data-mockup="collections"] .cine-inbox-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 0 18px;
border-bottom: none;
}
[data-mockup="collections"] .cine-inbox-title {
font-family: var(--font-ui);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.15;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
[data-mockup="collections"] .cine-inbox-meta {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.45);
}
/* v105.27: Category tabs row — sits below the title. Active tab has
the same underline-accent treatment Mercury uses. */
[data-mockup="collections"] .cine-inbox-tabs {
display: flex;
align-items: center;
/* v106: bumped gap 22 → 28px so the count badges (Disputes "1",
Promises "2") don't crowd the next tab label. */
gap: 28px;
padding: 6px 0 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 4px;
}
[data-mockup="collections"] .cine-inbox-tab {
/* v106: inline-flex with align-items: center so any child
(text + count badge) aligns by vertical center instead of
the text baseline.
v109.75: dropped the 6px gap. Spacing between tab text and
its count badge is now driven by a margin on the badge
itself, so tabs without a visible badge collapse cleanly
and the parent's 28px gap stays uniform across all tabs. */
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0;
padding: 6px 0;
cursor: default;
}
[data-mockup="collections"] .cine-inbox-tab.is-active {
color: rgba(255, 255, 255, 0.94);
}
[data-mockup="collections"] .cine-inbox-tab.is-active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -15px;
height: 1.5px;
background: rgba(255, 255, 255, 0.92);
border-radius: 1px;
}
/* v109.75: count badge next to a tab. Previously the badge
reserved its 16px min-width + 6px gap even when invisible —
which left the Disputes tab sitting ~22px wider than its
neighbours and made the parent's 28px gap look uneven. Now
the badge starts at width 0 with no left margin, then
smoothly expands to its natural width when .has-count
appears. No layout shift on adjacent tabs, no spring
glitch when the "2" pops in. */
[data-mockup="collections"] .cine-inbox-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0;
min-width: 0;
height: 16px;
padding: 0;
margin-left: 0;
background: rgba(120, 170, 255, 0.18);
border: 1px solid rgba(120, 170, 255, 0.32);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
color: rgba(170, 200, 255, 0.98);
letter-spacing: 0;
line-height: 1;
opacity: 0;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 0 8px rgba(120, 170, 255, 0.20);
transition:
width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
min-width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
padding 0.42s cubic-bezier(0.32, 0.72, 0, 1),
margin-left 0.42s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.26s ease 0.08s;
}
[data-mockup="collections"] .cine-inbox-tab.has-count .cine-inbox-tab-count {
width: auto;
min-width: 18px;
padding: 0 5px;
margin-left: 6px;
opacity: 1;
}
/* v105.40: Checkbox primitive used for the select-all toolbar AND
each email row. Empty square, Gmail-style. Always rendered
unchecked — purely decorative for the cinematic.
v105.41: 20% smaller (13px), frosted-glass fill with very low
opacity so it reads as a delicate inset surface, plus a subtle
inset highlight on the top edge to suggest glass depth. */
[data-mockup="collections"] .cine-inbox-checkbox {
flex-shrink: 0;
width: 13px;
height: 13px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 3px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px) saturate(1.3);
-webkit-backdrop-filter: blur(10px) saturate(1.3);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.10);
display: inline-block;
}
/* v105.40: Select-all toolbar — thin row above the list, holding
only the select-all checkbox at the leftmost column. Aligns
horizontally with the per-row checkboxes so the column reads
cleanly. */
[data-mockup="collections"] .cine-inbox-toolbar {
display: flex;
align-items: center;
padding: 12px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-mockup="collections"] .cine-inbox-list {
display: flex;
flex-direction: column;
padding-top: 0;
}
[data-mockup="collections"] .cine-inbox-row {
/* v105.28: tighter rows so 7+ cases fit comfortably */
/* v105.40: row is now [checkbox] [left content] [amount].
The checkbox + 14px gap line up with the toolbar's select-all
checkbox so the leftmost column reads as a vertical stack.
v105.42: position: relative for the unread accent box-shadow
to render correctly; overflow: hidden so the slide-in morph
(max-height 0 → natural) clips cleanly. */
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 13px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.25s ease;
border-radius: 6px;
}
/* v105.42: NEW-EMAIL MORPH IN.
Rows marked [data-cine-new-email] start collapsed (max-height 0,
opacity 0, no padding, translated up). When .is-new-arriving is
added by JS, the row morphs open and settles down from above.
This pushes the rows below it down by natural flex layout.
v105.43: smoother Apple-style ease. The transition uses the iOS
sheet curve cubic-bezier(0.32, 0.72, 0, 1) — heavy late
deceleration, no overshoot, feels weighted and natural. Duration
bumped to 700ms so the morph reads as a deliberate materialization
rather than a snap. */
[data-mockup="collections"] .cine-inbox-row[data-cine-new-email] {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
border-bottom-width: 0;
overflow: hidden;
transform: translateY(-12px);
}
[data-mockup="collections"] .cine-inbox-row[data-cine-new-email].is-new-arriving {
max-height: 130px;
opacity: 1;
padding-top: 13px;
padding-bottom: 13px;
border-bottom-width: 1px;
transform: translateY(0);
transition:
max-height 0.7s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.55s cubic-bezier(0.32, 0.72, 0, 1),
padding-top 0.7s cubic-bezier(0.32, 0.72, 0, 1),
padding-bottom 0.7s cubic-bezier(0.32, 0.72, 0, 1),
border-bottom-width 0.4s ease,
transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
/* AI tag pop — tag hidden on new-email rows until classification fires */
[data-mockup="collections"] .cine-inbox-row[data-cine-new-email] .cine-inbox-tag {
opacity: 0;
transform: scale(0.6);
transform-origin: center left;
}
[data-mockup="collections"] .cine-inbox-row[data-cine-new-email].is-ai-tagged .cine-inbox-tag {
opacity: 1;
transform: scale(1);
transition:
opacity 0.3s ease,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* v105.43: Unread visual — bold name + a slightly frosted glass
row background. No left-edge accent (cleaner). The background uses
a low-opacity neutral white tint with a saturated backdrop-filter
so light from the stage behind reads through, giving the row a
subtle "fresh / just arrived" frosted-glass feel without colored
chrome. */
[data-mockup="collections"] .cine-inbox-row.is-unread {
background: rgba(255, 255, 255, 0.035);
backdrop-filter: blur(6px) saturate(1.2);
-webkit-backdrop-filter: blur(6px) saturate(1.2);
}
[data-mockup="collections"] .cine-inbox-row.is-unread .cine-inbox-row-name {
font-weight: 600;
color: rgba(255, 255, 255, 1);
}
/* v106: "NEW" pill — frosty light-green chip that sits between the
company name and the AI tag on every new-arrival row. Visually
reinforces that the row just landed, separate from the AI tag
(which conveys classification). */
[data-mockup="collections"] .cine-inbox-new-pill {
display: inline-flex;
align-items: center;
padding: 2px 9px;
background: rgba(120, 220, 160, 0.10);
border: 1px solid rgba(120, 220, 160, 0.26);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
color: rgba(170, 235, 195, 0.95);
letter-spacing: 0.05em;
text-transform: uppercase;
backdrop-filter: blur(8px) saturate(1.3);
-webkit-backdrop-filter: blur(8px) saturate(1.3);
line-height: 1.55;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
/* v106: AUTO-REPLY INDICATOR.
Slides in below the subject line when the AI auto-replies to a
simple question (e.g. invoice copy request). Uses the AI blue
accent so it visually ties to the AI moments in the cinematic.
Hidden by default (max-height 0 + opacity 0). Adding the row's
.is-auto-replied class slides it in with the iOS sheet curve. */
[data-mockup="collections"] .cine-inbox-row-autoreply {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
transform: translateY(-4px);
display: flex;
/* v111.31: was align-items: center, which centered the ↳ glyph and
the text by their visual midpoints. The "↳" character is
asymmetric — its tip sits near the bottom of the glyph box, not
the middle — so center-alignment made the text float ABOVE the
arrow's tip instead of starting at it. Baseline alignment puts
the text baseline at the arrow's baseline, which is right where
the tip points. */
align-items: baseline;
gap: 7px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: rgba(150, 185, 255, 0.85);
letter-spacing: 0;
}
[data-mockup="collections"] .cine-inbox-row.is-auto-replied .cine-inbox-row-autoreply {
max-height: 26px;
opacity: 1;
margin-top: 4px;
transform: translateY(0);
transition:
max-height 0.55s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1),
margin-top 0.55s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-inbox-autoreply-icon {
color: rgba(120, 170, 255, 0.65);
font-size: 13px;
line-height: 1;
font-weight: 500;
/* v111.31: small upward nudge. The "↳" glyph still has a tiny
descender below its baseline, so when align-items: baseline
lines up the text baseline with the arrow baseline, the tip
sits a hair LOWER than the cap-height of the text. A 1px lift
puts the tip exactly at the start of "Auto-replied". */
position: relative;
top: -1px;
}
/* v106: DISMISS — when .is-dismissed is added to a new-email row,
it collapses out (the AI handled it autonomously). Uses the same
smooth iOS sheet curve as the morph-in, in reverse. Comes AFTER
the .is-new-arriving rule in source order so it wins specificity. */
[data-mockup="collections"] .cine-inbox-row[data-cine-new-email].is-dismissed {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
border-bottom-width: 0;
transform: translateY(-10px);
transition:
max-height 0.6s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1),
padding-top 0.6s cubic-bezier(0.32, 0.72, 0, 1),
padding-bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1),
border-bottom-width 0.4s ease,
transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-inbox-row:last-child { border-bottom: none; }
[data-mockup="collections"] .cine-inbox-row.is-hovered {
background: rgba(255, 255, 255, 0.04);
}
[data-mockup="collections"] .cine-inbox-row-left {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
/* v105.29: tag + name on the same row, with tag on the LEFT so it
stays in the visible (non-blurred) zone of the stage. */
[data-mockup="collections"] .cine-inbox-row-top {
display: flex;
align-items: center;
gap: 10px;
}
[data-mockup="collections"] .cine-inbox-row-name {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.94);
letter-spacing: -0.005em;
}
[data-mockup="collections"] .cine-inbox-row-sub {
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
}
[data-mockup="collections"] .cine-inbox-row-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
/* v105.31: TAG-SHAPE badges. Pointed-left silhouette (price-tag /
luggage-tag style) with a small circular "hole" near the point.
Path drawn in SVG so the slant edge stays crisp; main element is
inline-flex for predictable layout. Color encodes urgency: red
for dispute / overdue, neutral white for everything else. */
[data-mockup="collections"] .cine-inbox-tag {
position: relative;
display: inline-flex;
align-items: center;
padding: 4px 10px 4px 16px;
height: 22px;
box-sizing: border-box;
}
[data-mockup="collections"] .cine-inbox-tag-bg {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
pointer-events: none;
}
[data-mockup="collections"] .cine-inbox-tag-bg path {
fill: rgba(255, 255, 255, 0.05);
stroke: rgba(255, 255, 255, 0.14);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
[data-mockup="collections"] .cine-inbox-tag-hole {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
[data-mockup="collections"] .cine-inbox-tag-hole circle {
fill: none;
stroke: rgba(255, 255, 255, 0.4);
stroke-width: 0.8;
}
[data-mockup="collections"] .cine-inbox-tag-text {
position: relative;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
}
/* v109.74: Dispute tag re-tinted from frosted blue → frosted tan
orange. Warm muted orange (around #D99A66) keeps the "AI just
classified" intent but distinguishes Dispute from the cooler
blues used for promises and metadata. Same translucent values
as before so the pill stays frosty against the dark inbox. */
[data-mockup="collections"] .cine-inbox-tag.is-dispute .cine-inbox-tag-bg path {
fill: rgba(217, 154, 102, 0.14);
stroke: rgba(217, 154, 102, 0.42);
}
[data-mockup="collections"] .cine-inbox-tag.is-dispute .cine-inbox-tag-hole circle {
stroke: rgba(232, 180, 132, 0.70);
}
[data-mockup="collections"] .cine-inbox-tag.is-dispute .cine-inbox-tag-text {
color: rgba(245, 210, 175, 0.98);
}
[data-mockup="collections"] .cine-inbox-amount {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.005em;
min-width: 80px;
text-align: right;
}
/* ════════════════════════════════════════════════════════════════
v106: COLLECTIONS — SCENE 2: SLACK APPROVAL FLOW
Gathers DMs the right person on Slack with the dispute context +
an Approve button. Approver clicks, "✓ Approved" reaction lands,
toast confirms the revised invoice was automatically sent.
════════════════════════════════════════════════════════════════ */
/* Slack card sits directly on the stage — same flat-on-stage
treatment as the inbox. */
[data-mockup="collections"] .cine-slack-card {
position: static;
width: 100%;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
font-family: var(--font-ui);
overflow: visible;
}
/* Slack logo strip — same lockup as the scroll Phase 2 Slack card.
Sets the SCENE as a Slack scene before anything else.
v106: bumped logo + wordmark sizes so the Slack lockup reads
confidently rather than as a small footnote. */
[data-mockup="collections"] .cine-slack-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
opacity: 0.55;
}
[data-mockup="collections"] .cine-slack-logo svg {
width: 30px; height: 30px;
flex-shrink: 0;
}
[data-mockup="collections"] .cine-slack-logo span {
font-family: var(--font-ui);
font-size: 20px;
font-weight: 600;
color: rgba(255, 255, 255, 0.72);
letter-spacing: -0.005em;
}
/* Channel header — # channel-name + member count, Slack-style. The
channel name IS the scene title (replaces the old DM avatar header). */
[data-mockup="collections"] .cine-slack-head {
display: flex;
align-items: baseline;
gap: 10px;
padding: 0 0 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 22px;
}
[data-mockup="collections"] .cine-slack-head-hash {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
line-height: 1;
}
[data-mockup="collections"] .cine-slack-channel-name {
margin: 0;
font-family: var(--font-ui);
font-size: 22px;
font-weight: 500;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.005em;
line-height: 1;
}
[data-mockup="collections"] .cine-slack-channel-members {
margin-left: auto;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
[data-mockup="collections"] .cine-slack-channel-members::before {
content: '';
width: 10px; height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.30);
}
/* Thread — vertical stack of messages with consistent gap. */
[data-mockup="collections"] .cine-slack-thread {
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
/* CASCADE for Scene 2 elements — sharp-text variant (no Z, no
rotateY, no filter rack-focus blur, so multi-line text renders
natively without GPU compositing softness). */
[data-mockup="collections"] .cine-scene-slack .cine-cascade-crm {
opacity: 0;
transform: translateX(-40px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1);
}
[data-mockup="collections"] .cine-scene-slack.is-current .cine-cascade-crm {
opacity: 1;
transform: none;
transition:
opacity 0.6s ease-out,
transform 0.85s var(--cine-ease);
transition-delay: var(--d, 0s);
}
/* v106: APPLE-STYLE MATERIALIZATION for the Gathers app message.
Instead of the lateral cascade, the message rises into focus:
subtle upward translate + scale + opacity fade, with the iOS
sheet curve (cubic-bezier(0.32, 0.72, 0, 1)) and a long 1.1s
transform / 1.0s opacity — the weighted, deliberate feel of an
Apple notification or sheet presentation. The longer duration
gives the viewer time to read the message as it lands.
v106: also bumped the --d delay on this element (set inline in
the markup) so it appears noticeably after the channel header
settles, leaving a beat of "empty channel" before Gathers
posts. */
[data-mockup="collections"] .cine-scene-slack [data-cine-slack-msg="gathers"].cine-cascade-crm {
opacity: 0;
transform: translateY(16px) scale(0.97);
transform-origin: top left;
transition:
opacity 0.45s ease-in,
transform 0.55s cubic-bezier(0.4, 0, 1, 1);
}
[data-mockup="collections"] .cine-scene-slack.is-current [data-cine-slack-msg="gathers"].cine-cascade-crm {
opacity: 1;
/* v111.28: was `translateY(0) scale(1)` — an identity transform
that still kept the element on a GPU compositing layer, so
the multi-line message body text was rasterized at layer
resolution and composited onto the screen, losing the OS's
subpixel antialiasing. Result: soft/blurry text that didn't
match the rest of the cinematic. Switching to `transform: none`
releases the GPU layer once the cascade settles, letting the
browser draw the text natively at pixel-perfect quality —
same trick the generic .cine-cascade-crm rule (3 lines up)
already uses and explicitly comments as the "sharp-text variant". */
transform: none;
transition:
opacity 1.0s cubic-bezier(0.32, 0.72, 0, 1),
transform 1.1s cubic-bezier(0.32, 0.72, 0, 1);
transition-delay: var(--d, 0s);
}
/* v106.7: Slack scene exits use the EXACT invoicing cascade exit
physics — translateX(40) + translateZ(-20) + rotateY(-15) + blur(8),
same easing, same durations. Sequential right-sweep driven by the
per-element --d delay. Both rules (the generic cascade-crm exit
and the Gathers message override) point to the same target. */
[data-mockup="collections"] .cine-scene-slack.is-exiting [data-cine-slack-msg="gathers"].cine-cascade-crm,
[data-mockup="collections"] .cine-scene-slack.is-exiting .cine-cascade-crm {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transform-origin: center left;
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
transition-delay: var(--d, 0s);
}
/* Each message: avatar + body laid out horizontally. */
[data-mockup="collections"] .cine-slack-msg {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 6px 0;
}
[data-mockup="collections"] .cine-slack-msg-avatar {
width: 32px; height: 32px;
border-radius: 7px;
color: rgba(255, 255, 255, 0.96);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Gathers app avatar — frosted blue (matches AI accent).
v106: now hosts the actual Gathers logo SVG instead of a "G"
glyph. The logo strokes use currentColor so they inherit the
avatar's light-blue tint.
v109.76: flattened — single fill, no gradient and no inset
highlight/shadow. Reads as a Slack-style flat avatar tile. */
[data-mockup="collections"] .cine-slack-msg-avatar.gathers {
background: rgba(95, 145, 235, 0.32);
box-shadow: none;
color: rgba(220, 235, 255, 0.96);
}
[data-mockup="collections"] .cine-slack-msg-avatar.gathers svg {
width: 70%;
height: 70%;
display: block;
}
/* Elena's avatar — muted neutral (a "real person").
v109.76: flattened to a single muted purple fill. */
[data-mockup="collections"] .cine-slack-msg-avatar.elena {
background: #4a3d68;
}
[data-mockup="collections"] .cine-slack-msg-body {
flex: 1;
min-width: 0;
padding-top: 1px;
}
[data-mockup="collections"] .cine-slack-msg-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
[data-mockup="collections"] .cine-slack-msg-from {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.005em;
}
[data-mockup="collections"] .cine-slack-msg-bot-tag {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 1px 5px;
border-radius: 3px;
line-height: 1.4;
}
[data-mockup="collections"] .cine-slack-msg-time {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.45);
}
[data-mockup="collections"] .cine-slack-msg-text {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 400;
color: rgba(255, 255, 255, 0.92);
line-height: 1.55;
letter-spacing: -0.005em;
margin-bottom: 12px;
}
[data-mockup="collections"] .cine-slack-msg-text strong {
font-weight: 500;
color: rgba(255, 255, 255, 0.98);
}
/* Action card embedded in the Gathers message — subtle blue tint,
matches the AI accent in the inbox. */
[data-mockup="collections"] .cine-slack-msg-action {
background: rgba(120, 170, 255, 0.04);
border: 1px solid rgba(120, 170, 255, 0.18);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: inset 0 1px 0 rgba(120, 170, 255, 0.08);
}
[data-mockup="collections"] .cine-slack-action-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 400;
color: rgba(180, 200, 245, 0.78);
letter-spacing: 0;
}
[data-mockup="collections"] .cine-slack-action-text {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.94);
line-height: 1.45;
letter-spacing: -0.005em;
margin-bottom: 8px;
}
/* Approve button — frosted CTA, blue on hover/fake-hover. */
[data-mockup="collections"] .cine-slack-approve {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
cursor: pointer;
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
background 0.28s ease,
border-color 0.28s ease,
color 0.28s ease,
box-shadow 0.28s ease,
transform 0.12s ease;
}
[data-mockup="collections"] .cine-slack-approve:hover,
[data-mockup="collections"] .cine-slack-approve.is-fake-hovered {
background: #3b82f6;
border-color: #3b82f6;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 2px 6px rgba(59, 130, 246, 0.22);
}
[data-mockup="collections"] .cine-slack-approve.is-pressed {
transform: scale(0.96);
}
/* Approval reaction — Elena's confirmation. Starts hidden (no
max-height, opacity 0). Adding .is-visible drops it in from
above and fades it in, same Apple curve as the inbox arrival. */
[data-mockup="collections"] .cine-slack-msg.cine-slack-approval {
max-height: 0;
opacity: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
transform: translateY(-10px);
}
[data-mockup="collections"] .cine-slack-msg.cine-slack-approval.is-visible {
max-height: 80px;
opacity: 1;
padding-top: 6px;
padding-bottom: 6px;
transform: translateY(0);
transition:
max-height 0.6s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
padding-top 0.6s cubic-bezier(0.32, 0.72, 0, 1),
padding-bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-mockup="collections"] .cine-slack-approval-text {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.005em;
}
[data-mockup="collections"] .cine-slack-approval-check {
width: 18px; height: 18px;
border-radius: 4px;
background: rgba(80, 200, 130, 0.18);
color: #6ed29a;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Success toast — slides up from the bottom of the scene. */
[data-mockup="collections"] .cine-slack-toast {
position: absolute;
left: 0;
bottom: -8px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(40, 50, 70, 0.92);
border: 1px solid rgba(120, 170, 255, 0.24);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
}
[data-mockup="collections"] .cine-slack-toast.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.6s var(--cine-ease);
}
[data-mockup="collections"] .cine-slack-toast-check {
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(120, 170, 255, 0.22);
color: #93b8ff;
font-size: 11px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════
SMART COLLECTIONS CINEMATIC — v108n (Kanban)
────────────────────────────────────────────────────────────────
Dynamic kanban board: cards move between columns (Overdue →
Nudged → Promised → Resolved) via FLIP animation, driven by
the AI. Each beat surfaces a toast naming the action and the
evidence. A new card spawns in Overdue at the end of the loop.
════════════════════════════════════════════════════════════════ */
[data-mockup="insights"] .cine-kb-scene {
position: absolute;
inset: 0;
padding: 32px 36px;
display: flex;
flex-direction: column;
gap: 22px;
/* v109.13: scene-level transition matched to the contract → review
transition in the invoicing cinematic. The kanban recedes into
z-space via .is-pushed (matching .cine-scene.is-exiting physics)
and returns via this base transition (matching .cine-scene base). */
transition:
opacity 0.6s ease,
transform 0.9s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1)),
filter 0.7s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Header */
[data-mockup="insights"] .cine-kb-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
/* v109.10: header pans with the board during the slow camera
drift, so the title tracks across with the rest of the shot. */
will-change: transform;
transform: translateX(0);
}
[data-mockup="insights"] .cine-kb-title {
/* v109.4: matched to .cine-mc-title (Invoice schedule) so both
slot 1 and slot 2 cinematics share the same title scale. */
font-family: var(--font-ui);
font-size: 26px;
font-weight: 400;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
[data-mockup="insights"] .cine-kb-meta {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-ui);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.48);
font-weight: 500;
letter-spacing: 0.005em;
flex-shrink: 0;
}
[data-mockup="insights"] .cine-kb-meta-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(140, 220, 170, 0.95);
box-shadow: 0 0 6px rgba(140, 220, 170, 0.5);
animation: cineKbPulse 2.2s ease-in-out infinite;
}
@keyframes cineKbPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Board grid */
[data-mockup="insights"] .cine-kb-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
align-items: flex-start;
min-height: 0;
/* v109.9: slow camera-pan baseline. JS sets the transition + drift
target after the cascade settles, then freezes the value before
exit so the board doesn't snap back during the cards' is-exiting
wave. Reset to translateX(0) happens in resetCinematic. */
will-change: transform;
transform: translateX(0);
}
/* Column */
[data-mockup="insights"] .cine-kb-column {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
[data-mockup="insights"] .cine-kb-column-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 4px;
}
[data-mockup="insights"] .cine-kb-column-name {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.62);
}
[data-mockup="insights"] .cine-kb-column-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.78);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
transition: background 0.4s ease, color 0.4s ease, transform 0.3s var(--cine-spring, cubic-bezier(0.34, 1.4, 0.64, 1));
}
[data-mockup="insights"] .cine-kb-column-count.is-bumped {
background: rgba(150, 190, 255, 0.20);
color: rgba(210, 225, 255, 1);
transform: scale(1.18);
}
/* Column body — flex column of cards */
[data-mockup="insights"] .cine-kb-column-body {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
/* Card */
[data-mockup="insights"] .cine-kb-card {
padding: 11px 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: transform 0.75s cubic-bezier(0.2, 0.85, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.4s ease;
will-change: transform;
position: relative;
}
[data-mockup="insights"] .cine-kb-card.is-active {
/* v109.3: Apple drag-to-reorder lift. Stronger drop shadow,
slight background tint, and z-index elevation so the card
visibly hovers above its row during transit. */
border-color: rgba(150, 190, 255, 0.42);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.035) 100%);
box-shadow:
0 0 0 1px rgba(150, 190, 255, 0.28),
0 16px 40px rgba(0, 0, 0, 0.52),
0 4px 10px rgba(0, 0, 0, 0.30);
z-index: 10;
}
/* v111.20: scope the resolved-card dimming to the SETTLED state only,
so the Orion card stays fully hidden during the entrance cascade
instead of leaking through as a ghost card in the blurry background.
v111.21: dimming dropped (opacity 0.65 → 1).
v111.33: also require :not(.is-exiting). When openCaseDetail fires,
it adds `is-exiting` to scene but DOES NOT remove `is-current`, so
scene briefly has both classes. The .is-current selector has higher
specificity than the .is-exiting .cine-kb-card exit rule (5 vs 4
classes), so without the :not, this rule pinned Orion at opacity 1
while every other card exited normally — leaving Orion visible as
a ghost on the inbox detail view. */
[data-mockup="insights"] .cine-kb-scene.is-current:not(.is-exiting) .cine-kb-card.is-resolved {
opacity: 1;
}
[data-mockup="insights"] .cine-kb-card-name {
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.94);
letter-spacing: -0.005em;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-mockup="insights"] .cine-kb-card-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
[data-mockup="insights"] .cine-kb-card-amount {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.88);
font-variant-numeric: tabular-nums;
letter-spacing: -0.003em;
}
[data-mockup="insights"] .cine-kb-card-meta {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 450;
color: rgba(255, 255, 255, 0.48);
letter-spacing: 0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* v109.7: ASSIGNEE PILL — single frosty blue for all assignees.
Cuts the color noise on the board; the only colors now in play
are the channel-icon active states (blue for info, green for
payment) which carry real meaning. */
[data-mockup="insights"] .cine-kb-card-name {
padding-right: 28px;
}
[data-mockup="insights"] .cine-kb-card-assignee {
position: absolute;
top: 10px;
right: 11px;
width: 19px;
height: 19px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 700;
color: rgba(220, 235, 255, 0.96);
letter-spacing: 0;
line-height: 1;
background: linear-gradient(135deg, rgba(170, 205, 255, 0.20), rgba(130, 170, 230, 0.14));
border: 1px solid rgba(170, 205, 255, 0.26);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 2;
}
/* CHANNEL ICON ROW — third line at the bottom-left of each card.
Each icon represents an active channel for that account (email,
bell, phone, check). Default state is muted gray. When activity
fires, an icon shifts to blue (email/notification) or green
(payment) and shows a small count badge in the iOS app-icon style.
Badges accumulate through the loop and reset at the next entrance. */
[data-mockup="insights"] .cine-kb-card-channels {
display: flex;
gap: 11px;
align-items: center;
margin-top: 9px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
[data-mockup="insights"] .cine-kb-channel {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
[data-mockup="insights"] .cine-kb-channel.is-bumped {
transform: scale(1.18);
}
[data-mockup="insights"] .cine-kb-icon {
width: 12px;
height: 12px;
color: rgba(255, 255, 255, 0.42);
flex-shrink: 0;
transition: color 0.35s ease;
}
/* v109.8: per-channel active colors — email = blue (Mail.app),
bell = amber (iOS notification), phone = same blue (it's still
inbound info). Payment overrides everything with green via a
separate .is-payment class that comes later in the cascade. */
[data-mockup="insights"] .cine-kb-channel[data-channel="email"].is-active .cine-kb-icon,
[data-mockup="insights"] .cine-kb-channel[data-channel="phone"].is-active .cine-kb-icon {
color: rgba(150, 190, 255, 1);
}
[data-mockup="insights"] .cine-kb-channel[data-channel="bell"].is-active .cine-kb-icon {
color: rgba(250, 180, 110, 1);
}
[data-mockup="insights"] .cine-kb-channel.is-payment .cine-kb-icon {
color: rgba(140, 220, 170, 1);
}
/* Resolved check — always-on green */
[data-mockup="insights"] .cine-kb-icon.is-resolved-check {
color: rgba(160, 235, 185, 0.95);
}
/* Number badge — tucked into the top-right of the icon, iOS app
icon style. Hidden by default, pops in with spring entrance when
the channel becomes active.
v111.2: rescaled to be proportional to its 12px icon. Previous
badge (13×13 + 1.5px border ≈ 16px) was larger than the icon
and floated 6px above / 8px outside it, so it read as a separate
floating chip rather than a notification on the icon. New badge
is 10×10 with a 1px border (~12px outer) and hugs the icon's
corner at -3/-4. Font dropped 8.5px → 7.5px to match. */
[data-mockup="insights"] .cine-kb-channel-badge {
position: absolute;
top: -3px;
right: -4px;
min-width: 10px;
height: 10px;
padding: 0 2.5px;
background: rgba(150, 190, 255, 0.96);
color: rgba(15, 20, 45, 0.98);
border: 1px solid #000000;
border-radius: 999px;
font-family: var(--font-ui);
font-size: 7.5px;
font-weight: 700;
line-height: 8px;
text-align: center;
box-sizing: content-box;
opacity: 0;
transform: scale(0.4);
transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.35s ease;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
/* Badge visibility — any active state shows the badge */
[data-mockup="insights"] .cine-kb-channel.is-active .cine-kb-channel-badge,
[data-mockup="insights"] .cine-kb-channel.is-payment .cine-kb-channel-badge {
opacity: 1;
transform: scale(1);
}
/* Per-channel badge colors — match the icon's active color */
[data-mockup="insights"] .cine-kb-channel[data-channel="bell"].is-active .cine-kb-channel-badge {
background: rgba(250, 180, 110, 0.96);
color: rgba(45, 25, 5, 0.98);
}
/* Payment override — green, takes precedence over per-channel colors */
[data-mockup="insights"] .cine-kb-channel.is-payment .cine-kb-channel-badge {
background: rgba(140, 220, 170, 0.96);
color: rgba(15, 45, 25, 0.98);
}
/* Card spawn animation — used when a new "overdue" account appears */
[data-mockup="insights"] .cine-kb-card.is-spawning {
animation: cineKbSpawn 0.7s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
@keyframes cineKbSpawn {
0% {
opacity: 0;
transform: scale(0.82) translateY(-10px);
filter: blur(5px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
}
}
/* Toast — floats at the bottom of the board, surfaces each AI action */
[data-mockup="insights"] .cine-kb-toast {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(10px);
padding: 9px 16px 9px 12px;
background: rgba(28, 32, 40, 0.92);
border: 1px solid rgba(150, 190, 255, 0.28);
border-radius: 999px;
color: rgba(220, 232, 255, 0.96);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.002em;
display: inline-flex;
align-items: center;
gap: 9px;
opacity: 0;
transition: opacity 0.4s ease, transform 0.55s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
pointer-events: none;
white-space: nowrap;
}
[data-mockup="insights"] .cine-kb-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-mockup="insights"] .cine-kb-toast-icon {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(150, 190, 255, 1);
box-shadow: 0 0 8px rgba(150, 190, 255, 0.7);
flex-shrink: 0;
}
/* v109.14: SCENE TRANSITIONS — per-element cascade exactly like the
contract → review-schedule transition. Each line in the outgoing
scene cascades to the right; each line in the incoming scene
cascades in from the left. Same --d stagger pattern, same timing.
Reads as "this scene's content slides off while the next scene's
content slides on" — synchronized, line by line.
Scene containers themselves carry no transition; only the items
inside do (header, messages, footer). The scene becomes pointer-
reactive when its items are settled. */
[data-mockup="insights"] .cine-kb-inbox-scene {
position: absolute;
inset: 0;
padding: 28px 36px;
display: flex;
flex-direction: column;
gap: 16px;
pointer-events: none;
}
[data-mockup="insights"] .cine-kb-inbox-scene.is-current {
pointer-events: auto;
}
/* Inbox cascade items — header, messages, footer all slide in from
the left with their own --d stagger, exit to the right on close. */
[data-mockup="insights"] .cine-kb-inbox-head,
[data-mockup="insights"] .cine-kb-inbox-msg,
[data-mockup="insights"] .cine-kb-inbox-footer {
opacity: 0;
transform: translateX(-40px) translateZ(-20px) rotateY(15deg);
transform-origin: center left;
filter: blur(8px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
}
[data-mockup="insights"] .cine-kb-inbox-scene.is-current .cine-kb-inbox-head,
[data-mockup="insights"] .cine-kb-inbox-scene.is-current .cine-kb-inbox-msg,
[data-mockup="insights"] .cine-kb-inbox-scene.is-current .cine-kb-inbox-footer {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0);
filter: blur(0);
transition:
opacity 0.6s ease-out,
transform 0.85s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1)),
filter 0.6s ease-out;
transition-delay: var(--d, 0s);
}
/* v111.38: payment card joins the exit cascade. Previously it
only had its own vertical-fade reveal/un-reveal pair, so when
the inbox exited it stayed put or faded vertically while head/
msg/footer cascaded out laterally — visibly out of step with the
rest. Now all four element types exit with the same lateral
sweep + blur, sequenced by their per-element --d. */
[data-mockup="insights"] .cine-kb-inbox-scene.is-exiting .cine-kb-inbox-head,
[data-mockup="insights"] .cine-kb-inbox-scene.is-exiting .cine-kb-inbox-msg,
[data-mockup="insights"] .cine-kb-inbox-scene.is-exiting .cine-kb-inbox-payment,
[data-mockup="insights"] .cine-kb-inbox-scene.is-exiting .cine-kb-inbox-footer {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
transition:
opacity 0.55s ease-in,
transform 0.70s cubic-bezier(0.4, 0, 1, 1),
filter 0.55s ease-in;
transition-delay: var(--d, 0s);
}
/* Inbox header — back chip + title block + stage pill */
[data-mockup="insights"] .cine-kb-inbox-head {
display: flex;
align-items: center;
gap: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-mockup="insights"] .cine-kb-inbox-back {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px 5px 7px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 550;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.005em;
}
[data-mockup="insights"] .cine-kb-inbox-back svg {
width: 11px;
height: 11px;
color: rgba(255, 255, 255, 0.55);
}
[data-mockup="insights"] .cine-kb-inbox-title-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
[data-mockup="insights"] .cine-kb-inbox-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.008em;
}
[data-mockup="insights"] .cine-kb-inbox-sub {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 450;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.005em;
font-variant-numeric: tabular-nums;
}
[data-mockup="insights"] .cine-kb-inbox-stage {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(250, 180, 110, 0.96);
background: rgba(250, 180, 110, 0.10);
border: 1px solid rgba(250, 180, 110, 0.22);
border-radius: 999px;
padding: 4px 10px;
flex-shrink: 0;
white-space: nowrap;
}
/* Thread — full-page email-style messages stacked */
[data-mockup="insights"] .cine-kb-inbox-thread {
flex: 1;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
[data-mockup="insights"] .cine-kb-inbox-msg {
padding: 14px 16px 15px;
border-radius: 10px;
}
[data-mockup="insights"] .cine-kb-inbox-incoming {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}
[data-mockup="insights"] .cine-kb-inbox-outgoing {
background: linear-gradient(180deg, rgba(150, 190, 255, 0.10), rgba(120, 165, 235, 0.05));
border: 1px solid rgba(150, 190, 255, 0.22);
}
[data-mockup="insights"] .cine-kb-inbox-msg-meta {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.52);
}
[data-mockup="insights"] .cine-kb-inbox-avatar {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
color: rgba(220, 235, 255, 0.96);
background: linear-gradient(135deg, rgba(170, 205, 255, 0.22), rgba(130, 170, 230, 0.14));
border: 1px solid rgba(170, 205, 255, 0.26);
flex-shrink: 0;
}
[data-mockup="insights"] .cine-kb-inbox-msg-from-block {
display: flex;
flex-direction: column;
gap: 1px;
}
[data-mockup="insights"] .cine-kb-inbox-msg-from {
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.94);
letter-spacing: -0.003em;
}
[data-mockup="insights"] .cine-kb-inbox-msg-addr {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 450;
color: rgba(255, 255, 255, 0.40);
}
[data-mockup="insights"] .cine-kb-inbox-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
background: rgba(150, 190, 255, 0.18);
border: 1px solid rgba(150, 190, 255, 0.30);
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
color: rgba(210, 225, 255, 1);
letter-spacing: 0.04em;
text-transform: uppercase;
transition:
background 0.4s ease,
border-color 0.4s ease,
color 0.4s ease;
}
[data-mockup="insights"] .cine-kb-inbox-tag svg {
width: 10px;
height: 10px;
color: rgba(210, 225, 255, 1);
transition: color 0.4s ease;
}
/* v111.16: SENT state — fires after the cursor clicks Send. Tag
morphs from the blue AI DRAFTED look to a green SENT chip; the
sparkle icon hides and the checkmark icon appears in its place. */
[data-mockup="insights"] .cine-kb-tag-sent-icon {
display: none;
}
[data-mockup="insights"] .cine-kb-inbox-tag.is-sent {
background: rgba(80, 200, 130, 0.18);
border-color: rgba(80, 200, 130, 0.34);
color: rgba(180, 240, 200, 1);
}
[data-mockup="insights"] .cine-kb-inbox-tag.is-sent svg {
color: rgba(180, 240, 200, 1);
}
[data-mockup="insights"] .cine-kb-inbox-tag.is-sent .cine-kb-tag-ai-icon {
display: none;
}
[data-mockup="insights"] .cine-kb-inbox-tag.is-sent .cine-kb-tag-sent-icon {
display: inline-block;
}
/* v111.16: payment-received notification — slots into the email
thread ~2s after the AI reply is sent, showing that the customer's
wire landed on the exact date the AI logged. Soft green card with
a check icon. Hidden by default, springs into view when JS adds
.is-revealed. */
[data-mockup="insights"] .cine-kb-inbox-payment {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 14px 16px;
background: linear-gradient(180deg,
rgba(80, 200, 130, 0.10) 0%,
rgba(80, 200, 130, 0.05) 100%);
border: 1px solid rgba(80, 200, 130, 0.22);
border-radius: 10px;
opacity: 0;
transform: translateY(18px) scale(0.96);
filter: blur(6px);
transition:
opacity 0.55s ease-out,
transform 0.70s cubic-bezier(0.19, 1, 0.22, 1),
filter 0.55s ease-out;
pointer-events: none;
}
[data-mockup="insights"] .cine-kb-inbox-payment.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
[data-mockup="insights"] .cine-kb-inbox-payment-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(80, 200, 130, 0.22);
color: rgba(180, 240, 200, 1);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(80, 200, 130, 0.08);
}
[data-mockup="insights"] .cine-kb-inbox-payment-icon svg {
width: 12px;
height: 12px;
}
[data-mockup="insights"] .cine-kb-inbox-payment-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
[data-mockup="insights"] .cine-kb-inbox-payment-title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.94);
letter-spacing: -0.005em;
line-height: 1.25;
}
[data-mockup="insights"] .cine-kb-inbox-payment-meta {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 450;
color: rgba(255, 255, 255, 0.52);
letter-spacing: 0;
line-height: 1.3;
}
[data-mockup="insights"] .cine-kb-inbox-msg-time {
margin-left: auto;
color: rgba(255, 255, 255, 0.40);
font-weight: 450;
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
[data-mockup="insights"] .cine-kb-inbox-msg-subject {
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.86);
letter-spacing: -0.003em;
margin-bottom: 7px;
}
[data-mockup="insights"] .cine-kb-inbox-msg-body {
font-family: var(--font-ui);
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
letter-spacing: 0.002em;
}
[data-mockup="insights"] .cine-kb-inbox-msg-body strong {
color: rgba(255, 255, 255, 0.98);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Footer — summary block + send button */
[data-mockup="insights"] .cine-kb-inbox-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
gap: 14px;
}
[data-mockup="insights"] .cine-kb-inbox-summary {
display: flex;
align-items: baseline;
gap: 7px;
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.005em;
}
[data-mockup="insights"] .cine-kb-inbox-summary-label {
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
}
[data-mockup="insights"] .cine-kb-inbox-summary-value {
color: rgba(255, 255, 255, 0.82);
font-weight: 550;
font-variant-numeric: tabular-nums;
}
[data-mockup="insights"] .cine-kb-inbox-send {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px 9px 18px;
background: rgba(255, 255, 255, 0.95);
color: rgba(20, 18, 30, 0.96);
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: background 0.25s ease, transform 0.12s ease, box-shadow 0.25s ease;
}
[data-mockup="insights"] .cine-kb-inbox-send svg {
width: 13px; height: 13px;
}
[data-mockup="insights"] .cine-kb-inbox-send.is-fake-hovered {
background: rgba(255, 255, 255, 1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-mockup="insights"] .cine-kb-inbox-send.is-pressed {
transform: scale(0.97);
background: rgba(235, 235, 235, 0.95);
}
/* v109: SYSTEM — all cinematic entrances follow the same cascade-
from-LEFT pattern. Each animatable element starts off-stage left
(translateX -40 + translateZ recession + rotateY pivot + blur),
transitions to settled when scene.is-current, then exits to the
right (translateX +40) on scene.is-exiting. Per-element stagger
via inline --d. Same physics as .cine-cascade in invoicing and
.cine-cascade-inbox in collections — one unified vocabulary. */
[data-mockup="insights"] .cine-kb-title,
[data-mockup="insights"] .cine-kb-meta,
[data-mockup="insights"] .cine-kb-column-head,
[data-mockup="insights"] .cine-kb-card {
opacity: 0;
transform: translateX(-40px) translateZ(-20px) rotateY(15deg);
transform-origin: center left;
filter: blur(8px);
transition:
opacity 0.35s ease-in,
transform 0.45s cubic-bezier(0.4, 0, 1, 1),
filter 0.35s ease-in;
}
[data-mockup="insights"] .cine-kb-scene.is-current .cine-kb-title,
[data-mockup="insights"] .cine-kb-scene.is-current .cine-kb-meta,
[data-mockup="insights"] .cine-kb-scene.is-current .cine-kb-column-head,
[data-mockup="insights"] .cine-kb-scene.is-current .cine-kb-card {
opacity: 1;
transform: translateX(0) translateZ(0) rotateY(0);
filter: blur(0);
transition:
opacity 0.6s ease-out,
transform 0.85s var(--cine-ease, cubic-bezier(0.16, 1, 0.3, 1)),
filter 0.6s ease-out;
transition-delay: var(--d, 0s);
}
[data-mockup="insights"] .cine-kb-scene.is-exiting .cine-kb-title,
[data-mockup="insights"] .cine-kb-scene.is-exiting .cine-kb-meta,
[data-mockup="insights"] .cine-kb-scene.is-exiting .cine-kb-column-head,
[data-mockup="insights"] .cine-kb-scene.is-exiting .cine-kb-card {
opacity: 0;
transform: translateX(40px) translateZ(-20px) rotateY(-15deg);
filter: blur(8px);
/* v109.2: explicit exit timing — slower than the default fallback
so the EXIT WAVE plays out clearly. Same --d order as entrance,
so title leaves first, then column heads, then card row 1,
row 2, row 3 — top-to-bottom wave sweeping out to the right. */
transition:
opacity 0.55s ease-in,
transform 0.70s cubic-bezier(0.4, 0, 1, 1),
filter 0.55s ease-in;
transition-delay: var(--d, 0s);
}
/* ══════ v112 ADDITIONS (transferred from main_page_v112.html) ══════ */
/* CANONICAL SECTION EYEBROW
Single style used by every section's eyebrow text. Replaces
.ledger-eyebrow, .pillars-eyebrow (with pill — dropped),
.case-studies-label, and .section-label. Plain uppercase
letterspaced text, no pill, in font-ui for consistency. Color
shifts based on parent section (dark vs light). */
.section-eyebrow {
display: inline-block;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-tertiary);
margin: 0 0 var(--space-6);
padding: 0;
background: transparent;
border: none;
}
.section-ledger .section-eyebrow,
.integrations-section .section-eyebrow {
color: rgba(255, 255, 255, 0.5);
}
/* ══════ FSC VIDEO MOCKUPS ══════
The repo serves pre-recorded videos instead of the live cinematic
JS. Each