/* ════════════════════════════════════════════════════════════════
   COLLECTIONS PAGE STYLES
   Extracted from collections/collections_v21.html (lines 11–2925).
   Loaded by base.html when the page declares `pageStyle: collections`.
   ════════════════════════════════════════════════════════════════ */

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

        html {
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        :root {
            --bg: #FFFFFF;
            --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: #0A0A0A;
            --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: #3b5840;
            --card: #ffffff;
            --ink-100: #0A0A0A;
            --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: #1a1a1a;
            --dark-card: #2a2a2a;
            --dark-border: #3a3a3a;
            --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);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-ui);
            color: var(--text-primary);
            background-color: var(--bg);
            line-height: 1.6;
            letter-spacing: -0.01em;
            overflow-x: hidden;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* HERO — Singularity Animation                           */
        /* ═══════════════════════════════════════════════════════ */
        .hero {
            position: relative;
            background: #000000; /* dark backdrop matches card-field */
            color: var(--text-primary);
            overflow: hidden;
            /* Strict full-viewport. The dark animation canvas fills the
               entire hero edge-to-edge; the headline floats on top as an
               absolute overlay so there is no white band at the top. */
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
        }

        .hero-header {
            /* Floats over the dark canvas in the bottom 1/3 of the hero —
               the animation owns the top 2/3, the headline + CTA own the
               bottom strip. Left-aligned; the scene-headline overlay
               (.card-field-headline) sits on the right. */
            position: absolute;
            left: 0;
            right: 0;
            bottom: 7vh;
            z-index: 25;
            text-align: left;
            pointer-events: none; /* let CTA opt back in */
            padding: 0 60px;
        }
        .hero-header > * { pointer-events: auto; }
        .hero-header-inner {
            max-width: 1456px;
            margin: 0 auto;
        }
        .hero .hero-headline {
            color: #ffffff;
            text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
        }
        .hero #typed-text,
        .hero .typing-cursor {
            color: rgba(255, 255, 255, 0.78);
        }
        .hero .hero-cta {
            background: #ffffff;
            color: #0A0A0A;
        }
        .hero .hero-cta:hover {
            background: #D97757;
            color: #ffffff;
        }

        .hero-label {
            font-family: var(--font-ui);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-tertiary);
            letter-spacing: 0.15em;
            margin-bottom: 16px;
        }



        .hero-cta {
            display: inline-block;
            font-family: var(--font-ui);
            font-size: 14px;
            font-weight: 500;
            color: white;
            background: #1a1a1a;
            padding: 14px 28px;
            border-radius: var(--radius-machine);
            text-decoration: none;
            margin-top: 24px;
            transition: opacity 0.3s ease;
        }
        .hero-cta:hover {
            background: #D97757;
            opacity: 1;
        }
        .hero-headline {
            font-family: var(--font-sans);
            font-size: clamp(40px, 5.5vw, 64px);
            font-weight: 500;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

        .hero-typewriter-line {
            display: block;
        }

        #typed-text {
            color: var(--text-secondary);
        }

        .typing-cursor {
            color: var(--text-secondary);
            font-weight: 300;
            animation: cursorBlink 0.8s step-end infinite;
            margin-left: 2px;
        }

        @keyframes cursorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .hero-sub {
            font-size: 18px;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 0;
            letter-spacing: -0.01em;
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* CARD FIELD — Two-Scene Animation                       */
        /* ═══════════════════════════════════════════════════════ */
        .card-field-section {
            position: relative;
            background: #000000; /* Lifted from pure black so shadows can cast */
            overflow: hidden;
            /* Fill the remaining viewport below the hero-header */
            flex: 1 1 auto;
            display: flex;
        }

        .card-field-landscape-wrap {
            /* Edge-to-edge full viewport — no max-width, no gutters */
            max-width: none;
            margin: 0;
            padding: 0;
            flex: 1 1 auto;
            display: flex;
            min-height: 0;
        }

        .card-field-landscape {
            width: 100%;
            /* Fills the entire viewport height below the header.
               No min-height — flex shrinks it to whatever space remains
               so the hero never overflows 100vh. */
            flex: 1 1 0;
            min-height: 0;
            position: relative;
            overflow: hidden;
            border-radius: 0;

            /* Environment light — soft overhead spotlight hitting the center-top
               of the scene, so the cards and Slack modal have a real light source
               to react to rather than floating over flat black. The gradient
               extends to 100% so there is no visible stop edge that could read
               as a horizontal seam in the middle of the canvas. */
            background: radial-gradient(ellipse 120% 110% at 50% 0%, #1a1c22 0%, #121318 35%, #0c0d10 70%, #090909 100%);
        }

        /* ── SCENE 1: Board Glide (3D tilted perspective) ── */
        .scene-board {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 33.33%; /* Animation lives in the top 2/3 of the canvas */
            z-index: 10;
            opacity: 1;
            transition: opacity 1.5s ease-out;
            overflow: visible;
            /* Feather the bottom edge so content melts into the dark
               canvas instead of terminating at a hard horizontal line. */
            -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, rgba(0,0,0,0.6) 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 65%, rgba(0,0,0,0.6) 88%, transparent 100%);
        }

        .scene-board.fade-out {
            opacity: 0;
            pointer-events: none;
        }

        .scene-board-inner {
            width: 100%;
            height: 100%;
            transform-origin: 50% 50%;
            /* Upright tilt (32deg) and scaled to 2.0 (half of the prior 4.0) */
            transform: perspective(1400px) rotateX(32deg) rotateZ(-3deg) scale(2.0) translateX(8%) translateY(22%);
        }

        .scene-board-inner.gliding {
            animation: boardGlide 17s linear forwards;
        }

        @keyframes boardGlide {
            0%   { transform: perspective(1400px) rotateX(32deg) rotateZ(-3deg) scale(2.0) translateX(8%) translateY(22%); }
            100% { transform: perspective(1400px) rotateX(32deg) rotateZ(-3deg) scale(2.0) translateX(-6%) translateY(26%); }
        }

        .board {
            display: flex;
            flex-direction: row;
            gap: 12px;
            padding: 40px 24px;
            align-items: flex-start;
            justify-content: center;
            width: max-content;
            margin: 0 auto;
        }

        .board-column {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
            /* Spacing between cards is owned by .board-card { margin-bottom: 8px }
               instead of `gap`, because flex `gap` is preserved on both sides of a
               collapsing card — when a card folds away, gap stays put and produces
               a doubled empty band where the card used to be. Per-card margin
               collapses cleanly with the card (.card-closing sets margin: 0). */
        }

        .board-column-header {
            font-family: var(--font-ui);
            font-size: 11px;
            font-weight: 600;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0 12px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            /* 4px existing + 8px to compensate for the removed column gap so the
               header-to-first-card distance stays at 12px. */
            margin-bottom: 12px;
        }

        /* ════════ KANBAN CARDS — flat v8 surface ════════
           Reverted from the heavy 5-layer shadow stack back to v8's flat
           treatment: a subtle translucent fill and a 1px border. Heavy
           ambient shadows + a directional gradient created visible depth
           that, under the tilted perspective, read as cards floating at
           different z-axes ("levitation"). Flat surfaces keep every card
           on the same visual plane. */
        /* ════════ LINEAR-GRADE KANBAN CARDS (GHOSTLY) ════════ */
        /* True Linear-dark approach: cards recede into the void rather
           than sitting on a lit stage. Microscopic border opacity, no
           drop shadow, near-invisible surface fill. The headline and
           the colored status dots are what pop; the cards are faint
           blueprints drifting through black space. */
        .board-card {
            position: relative;
            /* NO overflow:hidden — lets the colored halo glow bleed outward */
            /* max-height intentionally NOT set on the base — layout collapse
               is handled exclusively by .card-closing during the fold. */
            padding: 12px 14px;
            border-radius: 8px;

            /* 1. Ghostly glass surface — nearly invisible fill so the
               card barely catches the overhead spotlight. */
            background: rgba(255, 255, 255, 0.015);

            /* 2. Microscopic border — just enough to define the edge
               but not enough to compete with the headline. */
            border: 1px solid rgba(255, 255, 255, 0.03);

            /* 3. No drop shadow — the card should sink into the black
               void rather than float above a lit surface. */
            box-shadow: none;

            /* Owns the spacing between cards in the column. .card-closing
               drives this to 0 so a folding card collapses its own gap
               instead of leaving a phantom 8px band behind. */
            margin-bottom: 8px;

            transform-origin: top center;
            transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        padding 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        margin 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Inner container that clips the lens flare safely */
        .hfc-flare {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            overflow: hidden;
            pointer-events: none;
            z-index: 10;
        }
        .hfc-flare::before {
            content: '';
            position: absolute;
            top: 0; left: -150%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-20deg);
        }
        .board-card.lens-flare .hfc-flare::before {
            animation: glassSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes glassSweep {
            0%   { left: -150%; }
            100% { left: 150%; }
        }

        /* ════════ RESTRAINED HALO GLOWS ════════ */
        /* Pulled way back so the card state reads without blinding the
           layout. Opacity lowered from 0.6/0.08 → 0.3/0.05, outer glow
           from 60px → 24px. Still clearly "active" but no neon sign. */
        .board-card.halo-working {
            border-color: rgba(249, 115, 22, 0.3) !important;
            background: rgba(249, 115, 22, 0.05) !important;
            box-shadow:
                0 0 24px rgba(249, 115, 22, 0.12),
                inset 0 0 12px rgba(249, 115, 22, 0.05) !important;
        }

        .board-card.halo-resolved {
            border-color: rgba(16, 185, 129, 0.3) !important;
            background: rgba(16, 185, 129, 0.05) !important;
            box-shadow:
                0 0 24px rgba(16, 185, 129, 0.12),
                inset 0 0 12px rgba(16, 185, 129, 0.05) !important;
        }

        /* Card content */
        .hfc-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
        .hfc-avatar { width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
        .hfc-avatar-icon { width: 11px; height: 11px; color: rgba(255,255,255,0.25); }
        .hfc-avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0.7; }
        .hfc-avatar-photo-wrap { border-color: rgba(255,255,255,0.10); }
        .hfc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .hfc-avatar-initials {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            background: #2a2a2a; color: #ffffff;
            font-family: var(--font-sans); font-size: 7px; font-weight: 700;
            letter-spacing: 0.04em;
            border-radius: 50%;
        }
        /* Figma-style muted colored initial chips — rotate via JS */
        .hfc-avatar-initials.avc-green  { background: #2E6B52; color: #DCFCE7; }
        .hfc-avatar-initials.avc-purple { background: #5B3E88; color: #EDE9FE; }
        .hfc-avatar-initials.avc-blue   { background: #2F4E88; color: #DBEAFE; }
        .hfc-avatar-initials.avc-pink   { background: #883E56; color: #FCE7F3; }
        .hfc-avatar-initials.avc-amber  { background: #7A4E22; color: #FEF3C7; }
        .hfc-id { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.15); letter-spacing: 0.02em; }
        /* Title: locked to a single line with ellipsis so every card has the
           SAME total height. Without this, longer titles like "Stonebridge —
           reminder sequence #3" wrap to two lines and break row alignment
           across columns — under the tilted perspective the misalignment
           reads as cards floating at different z-depths. */
        .hfc-title {
            font-family: var(--font-ui);
            font-size: 12px;
            font-weight: 400;
            /* Dimmed from 0.92 → 0.45 so the card text recedes into
               the void and the main headline owns all the contrast. */
            color: rgba(255,255,255,0.45);
            line-height: 1.4;
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }
        /* Meta: no wrapping. The amount sits on the right via margin-left:auto;
           if the tag + amount don't fit, the tag truncates rather than the
           row growing to a second line. */
        .hfc-meta {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: nowrap;
            min-width: 0;
            overflow: visible;
        }
        .hfc-meta .hfc-tag { flex: 0 1 auto; min-width: 0; overflow: visible; }
        .hfc-meta .hfc-tag .hfc-tag-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hfc-meta .hfc-amount { flex: 0 0 auto; white-space: nowrap; }
        /* ════════ CINEMATIC STATUS DOTS & TAGS ════════
           The dots are no longer flat pixels — they are tiny LEDs behind
           frosted glass. Three stacked box-shadows build a volumetric
           bloom: a tight core bleed at 2px (the diode itself), a mid
           scatter at 6px (light bouncing inside the glass), and an
           atmospheric wash at 12px (the wide fade into the dark card).
           The core color is fully saturated while the glow uses a
           translucent version of the same hue so the outer bloom never
           overpowers the card surface.
           No pill housing — the LED floats next to the text label,
           unadorned, letting the bloom do all the work. */
        .hfc-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-ui);
            font-size: 9px;
            font-weight: 500;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
        }
        .hfc-tag .hfc-tag-text { color: rgba(255, 255, 255, 0.45); }

        /* The light source. background comes from --dot-color (solid
           core), box-shadow stack uses --glow-color (translucent) so
           the bloom fades physically instead of stamping a cheap halo. */
        .hfc-tag-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--dot-color);
            flex-shrink: 0;
            box-shadow:
                0 0 2px  var(--dot-color),   /* core bleed    */
                0 0 6px  var(--glow-color),  /* mid scatter   */
                0 0 12px var(--glow-color);  /* atmospheric   */
        }

        /* Per-variant: solid core + translucent glow. The glow alpha
           (0.4) is what keeps the effect "subtle but cinematic" —
           higher and it turns into Vegas neon, lower and the bloom
           disappears entirely under the 3D perspective. */
        .hfc-tag-orange  { --dot-color: #fb923c; --glow-color: rgba(251, 146, 60, 0.4); }
        .hfc-tag-green   { --dot-color: #34d399; --glow-color: rgba(52, 211, 153, 0.4); }
        .hfc-tag-blue    { --dot-color: #60a5fa; --glow-color: rgba(96, 165, 250, 0.4); }
        .hfc-tag-red     { --dot-color: #f87171; --glow-color: rgba(248, 113, 113, 0.4); }
        .hfc-tag-neutral { --dot-color: rgba(255, 255, 255, 0.6); --glow-color: rgba(255, 255, 255, 0.1); }

        .hfc-amount {
            font-family: var(--font-ui);
            font-size: 10px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.3);
            margin-left: auto;
            font-variant-numeric: tabular-nums;
        }

        /* ── SCENE 2: Slack Conversation ── */
        .scene-slack {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 33.33%; /* Animation lives in the top 2/3 of the canvas */
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 20%;
            opacity: 0;
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: visible;
            /* Feather the bottom edge so content melts into the dark canvas
               instead of terminating at a hard horizontal line. */
            -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.7) 95%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0.7) 95%, transparent 100%);
        }

        .scene-slack.fade-in {
            opacity: 1;
        }

        /* ════════ TELEPHOTO LENS STAGE (v13) ════════
           The old setup had two fatal flaws for a million-dollar look:

             1. perspective(1400px) = a wide-angle lens. Tilting a card
                backward under a short perspective lets the bottom edge
                fall closer to the lens and balloon outward — the
                "trapezoid / fat-bottom" distortion.
             2. transform: ...scale(2.0) = WebKit rasterizes the element
                at 1x and stretches the bitmap. Text loses vector sharpness.

           The fix (matches the Linear reference):

             • perspective: 4000px → telephoto / near-orthographic lens.
               Vertical edges stay parallel even under extreme tilt.
             • Perspective now lives on the PARENT, not inside the card's
               own transform chain, so child 3D translateZ pushes render
               inside that perspective context cleanly.
             • GPU layer promotion + geometricPrecision + subpixel AA —
               forces the composited card onto its own high-DPI layer
               and prioritizes vector precision over speed. */
        .scene-slack-inner {
            width: 100%;
            height: 100%;
            display: flex;
            /* Centered physically in the viewport */
            align-items: center;
            justify-content: center;
            /* v14.3: pad the bottom so the flex-center of the perspective
               container shifts UPWARD. The card-rotator gets centered in
               (height - padding-bottom), which moves the whole card into
               the upper half of the scene-slack box where the important
               content lives. (The parent .scene-slack's align-items had
               no effect because .scene-slack-inner is height:100%.) */
            padding-bottom: 16vh;
            box-sizing: border-box;

            /* THE TELEPHOTO LENS */
            perspective: 4000px;
            transform-style: preserve-3d;

            /* Hardware acceleration — push text onto the GPU */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: subpixel-antialiased;
        }

        /* Slack scene — stronger top/bottom fade for focus */
        .scene-slack .slack-vignette-top {
            position: absolute; top: 0; left: 0; right: 0; height: 35%;
            background: linear-gradient(180deg, #090909 0%, rgba(9,9,9,0.85) 30%, rgba(9,9,9,0.3) 60%, transparent 100%);
            z-index: 20; pointer-events: none;
        }
        .scene-slack .slack-vignette-bottom {
            position: absolute; bottom: 0; left: 0; right: 0; height: 25%;
            background: linear-gradient(0deg, #090909 0%, rgba(9,9,9,0.7) 35%, transparent 100%);
            z-index: 20; pointer-events: none;
        }

        .slack-scene-logo {
            /* Lives as a direct child of .hero, OUTSIDE .card-field-landscape,
               so it has zero relationship to the 3D scene's transform tree.
               No translate, no scale, no parallax — just a flat 2D badge
               pinned to a fixed corner of the hero box. */
            position: absolute;
            bottom: 180px;
            /* Matches the same page-gutter as the headline + CTA above.
               100vw, not 100% — this element lives in .hero but we want the
               math to be stable regardless of what its containing block is. */
            right: max(60px, calc((100vw - 1456px) / 2));
            z-index: 100;
            opacity: 0;
            /* Opacity-only transition so the logo literally cannot move
               when the Slack scene fades in or out. */
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            display: flex;
            align-items: center;
            /* Tighter relationship between glyph and wordmark at 2× size. */
            gap: 14px;
        }
        .slack-scene-logo .slack-logo-label {
            font-family: var(--font-ui);
            /* Doubled from 13px to match the 2× glyph scale. */
            font-size: 26px;
            font-weight: 600;
            color: rgba(255,255,255,0.5);
            letter-spacing: 0.02em;
        }
        .slack-scene-logo.visible {
            opacity: 0.4;
        }
        /* Logo fades out naturally with parent .scene-slack opacity */

        /* ════════ THE MILLION-DOLLAR MATTE SLAB (v13) ════════
           Pulled from the Linear reference: the Slack-style window is a
           dark, matte, architectural slab — not puffy, not glowing. A
           single top-border rim catches the overhead light; the rest of
           the card is flat and inky so nothing competes with the text.
           overflow: hidden is INTENTIONALLY removed so children (like
           the compose box) can lift off the surface in Z-space without
           getting clipped. */
        .slack-card-3d {
            position: relative;
            /* Slightly wider so it looks perfectly proportioned under
               the new telephoto zoom */
            width: 680px;

            /* Scroll-narrative-grade matte glass — warmer, richer fill with
               the same deep frosted aesthetic. Gradient goes from a slightly
               warm dark-grey top to an inky near-black bottom. */
            background: linear-gradient(
                180deg,
                rgba(26, 29, 34, 0.96) 0%,
                rgba(14, 16, 20, 0.98) 100%
            );
            backdrop-filter: blur(24px) saturate(1.2);
            -webkit-backdrop-filter: blur(24px) saturate(1.2);

            border-radius: 14px;

            /* 1px outline + brighter top rim — catches the overhead light */
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(255, 255, 255, 0.15);

            /* Atmospheric floating shadow — same 2-layer structure as the
               original v14 to stay compatible with preserve-3d. */
            box-shadow:
                0 40px 100px -20px rgba(0, 0, 0, 0.9),
                0 20px 40px -10px rgba(0, 0, 0, 0.7);

            transform-style: preserve-3d;
        }

        /* The old centered ::before rim highlight and the translateY
           .sliding drift are no longer useful — the million-dollar card
           gets its rim light directly from border-top, and the camera
           motion now lives entirely on .slack-card-rotator. Explicitly
           neutralize both so they can't interfere. */
        /* Top rim highlight disabled — .slack-card-3d uses preserve-3d
           so pseudo-elements break the 3D stacking context. The rim light
           is handled by border-top instead. */
        .slack-card-3d::before {
            display: none;
        }
        .slack-card-3d.sliding {
            animation: none;
            transform: none;
        }

        /* Ambient glow lives on the rotator wrapper instead of on the
           card itself, because .slack-card-3d uses preserve-3d and
           pseudo-elements with z-index:-1 break 3D stacking contexts. */

        /* ─────────────────────────────────────────────────────────────
           LINEAR-GRADE CAMERA DOLLY (v13)

           All three scene transforms — angle, zoom, pan — now live in a
           single keyframe on this wrapper. The parent .scene-slack-inner
           only provides the telephoto perspective (4000px), so the card
           is free to use real translateZ pushes inside that perspective
           context without origin drift.

             • translateZ(1600px) mathematically pushes the card toward
               the lens. Unlike scale(), it re-projects the vector text
               at the new resolution so glyphs stay razor-sharp.
             • rotateX(54deg) + rotateZ(-8deg) matches the extreme
               Linear tilt from the reference still — the card looks
               like it's laid on a drafting table at a steep raking
               angle, not merely leaned back.
             • translate3d(±80px, ±50px, 0) is the camera slider. Linear
               easing + infinite alternate = a continuous back-and-forth
               dolly that never stops or eases.

           All four transforms share one composite matrix so the browser
           runs them on one GPU layer — no CPU recomposition per frame. */
        .slack-card-rotator {
            display: inline-block;
            transform-style: preserve-3d;
            will-change: transform;
            /* Single-direction dolly: always top-left → bottom-right.
               No 'alternate' — JS resets the animation each time the
               Slack scene fades in so it always starts from 0%. */
            animation: slackCameraGlide 30s linear forwards;
        }

        /* v14 tuning vs v13:
           • rotateX(54deg) → rotateX(38deg). 54° was the Linear
             reference-still angle, but at that rake under a 4000px
             perspective the bottom edge still balloons and the text
             foreshortens. 38° is a noticeably gentler drafting-table
             angle that keeps every message line honestly legible
             while still reading as "3D stage", not "flat screenshot".
           • rotateZ(-8deg) → rotateZ(-5deg). Same philosophy — small
             yaw reads as a casual angled shot without distorting the
             vertical rhythm of the message rows.
           • translateZ(1600px) → translateZ(1900px). Push the card
             further toward the lens. Under perspective(4000px) the
             scale factor becomes 4000/(4000-1900) ≈ 1.90× — so every
             glyph is rendered closer to the lens, meaning the browser
             re-rasterizes the text at the new projected resolution
             instead of stretching a 1× bitmap. Noticeably sharper.
           • Pan range ±80/50 → ±95/55. The new framing lets the card
             fill more of the vignette, so the camera can travel a
             little further without the card clipping out of frame. */
        @keyframes slackCameraGlide {
            0% {
                transform: translateZ(2600px) rotateX(8deg) rotateZ(-2deg)
                           translate3d(0, 80px, 0);
            }
            100% {
                transform: translateZ(2600px) rotateX(8deg) rotateZ(-2deg)
                           translate3d(0, -80px, 0);
            }
        }

        /* Respect users who prefer reduced motion — pin to a neutral anchor */
        @media (prefers-reduced-motion: reduce) {
            .slack-card-rotator {
                animation: none;
                transform: translate3d(0, 0, 0);
            }
        }

        /* v13: removed the old centered ::before rim highlight, the
           .sliding translateY drift, and the slackSlideDown keyframes.
           The matte slab gets its rim light directly from border-top,
           and all cinematic motion now composes inside the single
           slackCameraGlide transform on .slack-card-rotator. Keeping
           any legacy rule here would collide with the new pipeline. */

        /* Historical / older messages — faded and smaller */
        .slack-msg.history {
            opacity: 0.35;
            max-height: 400px;
            transform: translateY(0);
        }

        .slack-msg.history.visible {
            opacity: 0.35;
        }

        .slack-msg-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 0;
            opacity: 0.3;
            flex-shrink: 0;
        }

        .slack-msg-divider::before,
        .slack-msg-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,0.08);
        }

        .slack-msg-divider span {
            font-family: var(--font-ui);
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.35);
            white-space: nowrap;
        }

        .slack-channel-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .slack-hash {
            font-size: 16px;
            color: rgba(255,255,255,0.35);
            font-weight: 300;
        }

        .slack-channel-name {
            font-family: var(--font-ui);
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.85);
        }

        .slack-messages {
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            /* v14.2: LOCK the messages container to a fixed height and
               stack children from the bottom. Without this, every new
               message expanding from max-height 0 → 200px would push the
               compose box downward and visibly stretch the whole card's
               bottom edge. Now the card has a fixed total height — newest
               messages land at the bottom pinned to the compose box, and
               older messages scroll up and out the top (clipped by
               overflow:hidden). Height matches ~4 message rows: enough
               headroom to see the "important" content (Erik's question
               + the bot's follow-up) while the compose box stays frozen
               in place. */
            height: 380px;
            justify-content: flex-end;
            gap: 16px;
            overflow: hidden;
        }

        /* ════════ LINEAR-GRADE SLACK PHYSICS ════════
           Message entrance: spring layout (max-height/margin make room first),
           then optical focus pull (blur → 0) + translateY settle into place. */
        .slack-msg {
            display: flex;
            flex-shrink: 0;
            gap: 10px;
            opacity: 0;
            transform: translateY(12px);
            filter: blur(4px);
            max-height: 0;
            overflow: hidden;
            margin-bottom: 0;
            /* Calm, near-linear easing — mirrors the bot-reply override so
               every message in the thread (Erik AND Gathers) appears at the
               same deliberate pace. The previous (0.16,1,0.3,1) curve fired
               90% of its motion in the first ~30% of the duration, which made
               every message snap rather than glide. Opacity/transform/filter
               are no longer delayed so the box and its tone arrive in lockstep. */
            transition: max-height 1.2s cubic-bezier(0.45, 0, 0.15, 1),
                        margin 1.2s cubic-bezier(0.45, 0, 0.15, 1),
                        opacity 1.0s cubic-bezier(0.45, 0, 0.15, 1),
                        transform 1.0s cubic-bezier(0.45, 0, 0.15, 1),
                        filter 1.0s cubic-bezier(0.45, 0, 0.15, 1);
        }

        .slack-msg.visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
            max-height: 200px;
            margin-bottom: 16px;
        }

        .slack-msg-avatar {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .slack-msg-avatar.human {
            background: #3a3a3a;
            color: #ffffff;
            overflow: hidden;
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 700;
        }

        .slack-msg-avatar.human img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .slack-msg-avatar.bot {
            background: #ffffff;
            color: #0A0A0A;          /* drives currentColor on the inline Gathers G */
            border-radius: 6px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.45),
                        0 0 0 1px rgba(255,255,255,0.08);
            padding: 4px;
        }
        .slack-msg-avatar.bot svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slack-msg-body {
            flex: 1;
            min-width: 0;
        }

        .slack-msg-header {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 3px;
        }

        .slack-msg-name {
            font-family: var(--font-ui);
            font-size: 13px;
            font-weight: 700;
            color: rgba(255,255,255,0.92);
        }

        .slack-msg-name .app-badge {
            display: inline-block;
            font-size: 9px;
            font-weight: 600;
            background: rgba(255,255,255,0.10);
            color: rgba(255,255,255,0.45);
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: 4px;
            vertical-align: middle;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .slack-msg-time {
            font-family: var(--font-ui);
            font-size: 10px;
            color: rgba(255,255,255,0.30);
        }

        .slack-msg-text {
            font-family: var(--font-ui);
            font-size: 13px;
            line-height: 1.55;
            color: rgba(255,255,255,0.75);
        }

        .slack-msg-text code {
            background: rgba(78, 140, 255, 0.10);
            padding: 1px 5px;
            border-radius: 3px;
            font-family: var(--font-mono);
            font-size: 11px;
            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);
        }

        .slack-msg-text .mention {
            color: #8ab4ff;
            background: rgba(78, 140, 255, 0.14);
            padding: 1px 3px;
            border-radius: 3px;
            font-weight: 500;
        }

        /* Bot reply container — overrides the base .slack-msg transition with
           a calmer, slower easing curve. The base curve (0.16,1,0.3,1) shoots
           90% toward the target in the first ~30% of the duration, which made
           the bigger bot-reply box "pop" open. This curve is closer to linear
           with a gentle finish so the height grows honestly, in step with the
           content reveal. The 0.1s opacity/transform/filter delay is also
           dropped so the box doesn't snap open before fading in.

           max-height is set inline by JS to the measured scrollHeight (so it
           matches the real content height instead of overshooting to 400px). */
        .slack-msg.bot-reply {
            transition: max-height 1.2s cubic-bezier(0.45, 0, 0.15, 1),
                        margin 1.2s cubic-bezier(0.45, 0, 0.15, 1),
                        opacity 1.0s cubic-bezier(0.45, 0, 0.15, 1),
                        transform 1.0s cubic-bezier(0.45, 0, 0.15, 1),
                        filter 1.0s cubic-bezier(0.45, 0, 0.15, 1);
        }

        /* ════════ WORD-CHUNK TYPING — smooth reveal ════════
           Replaces character-by-character typing with word reveal. Each word
           fades + settles into place on a confident, steady cadence. */
        .typed-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(2px);
            animation: smoothType 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            white-space: pre;
        }

        @keyframes smoothType {
            to { opacity: 1; transform: translateY(0); }
        }

        /* Character-by-character smooth typing — each char eases in over
           250ms with a microscopic scale settle (NOT translateY) so the
           baseline never jitters as the line builds. */
        .typed-char {
            display: inline-block;
            opacity: 0;
            transform: scale(0.96);
            animation: smoothCharType 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            white-space: pre;
        }

        @keyframes smoothCharType {
            to { opacity: 1; transform: scale(1); }
        }

        /* ════════ BOT REPLY STAGGER ════════
           Inner text block and attachment panel reveal sequentially with a
           micro focus pull (blur 2px → 0) for cinematic cadence. Timing is
           tuned to overlap with the parent's 1.2s height growth so the
           content fills in WHILE the box opens — not after. */
        .bot-reply-stagger {
            opacity: 0;
            transform: translateY(6px);
            filter: blur(2px);
        }
        .slack-msg.bot-reply.visible .bot-reply-stagger {
            animation: botReveal 0.9s cubic-bezier(0.45, 0, 0.15, 1) forwards;
        }
        .slack-msg.bot-reply.visible .bot-reply-stagger:nth-of-type(1) { animation-delay: 0.05s; }
        .slack-msg.bot-reply.visible .bot-reply-stagger:nth-of-type(2) { animation-delay: 0.25s; }

        @keyframes botReveal {
            to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        .slack-attachment {
            margin-top: 8px;
            border-left: none;
            padding: 0;
            background: none;
            border-radius: 0;
        }

        /* ════════ BOT REPLY BULLET LIST ════════
           Clean • bullets — no orange accent line, no card background.
           Each item indents the wrap so multi-line content lines up
           under the first character of the text, not under the bullet. */
        .bot-bullet-list {
            margin: 8px 0 0;
            padding: 0;
            list-style: none;
        }
        .bot-bullet-list li {
            position: relative;
            padding-left: 16px;
            font-family: var(--font-ui);
            font-size: 13px;
            line-height: 1.55;
            color: rgba(255,255,255,0.75);
            margin-bottom: 4px;
        }
        .bot-bullet-list li:last-child { margin-bottom: 0; }
        .bot-bullet-list li::before {
            content: "•";
            position: absolute;
            left: 4px;
            top: 0;
            color: rgba(255,255,255,0.50);
            font-size: 13px;
            line-height: 1.55;
        }
        .bot-bullet-list li code {
            background: rgba(78, 140, 255, 0.10);
            padding: 1px 5px;
            border-radius: 3px;
            font-family: var(--font-mono);
            font-size: 11px;
            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);
        }

        .slack-attachment-title {
            font-family: var(--font-ui);
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            margin-bottom: 4px;
        }

        .slack-attachment-text {
            font-family: var(--font-ui);
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            line-height: 1.5;
        }

        .slack-compose-box {
            /* Reduced bottom padding from 20px → 6px so the typing bar that
               now sits below the compose wrapper (#typingBar) absorbs most of
               the original breathing room without making the card taller. */
            padding: 0 20px 6px;
            /* v13: keep 3D context alive so the child .slack-compose-wrapper's
               translateZ(15px) parallax lift actually propagates. Without
               preserve-3d here the parent would flatten the child's Z. */
            transform-style: preserve-3d;
        }

        /* Persistent typing bar — sits below the compose wrapper. Has a
           reserved min-height matching the indicator's intrinsic height so
           "Gathers is typing…" can fade in/out without ever pushing the
           composer up or down. */
        .slack-typing-bar {
            min-height: 22px;
            padding: 6px 4px 0;
            font-family: var(--font-ui);
            font-size: 11px;
            color: rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
        }

        .slack-typing-bar.visible {
            opacity: 1;
        }

        /* ════════ THE PARALLAX COMPOSE BOX (v13) ════════
           Because the parent card + rotator both preserve-3d, this
           child is free to lift off the card surface in actual Z-space.
           translateZ(15px) puts 15 physical pixels of air between the
           compose box and the message list behind it, so when the
           camera dolly pans, the box drifts very slightly against the
           text — real optical parallax, not a fake shadow trick.
           A subtle 145deg directional light gradient reinforces the
           sense that an overhead source is raking across it. */
        .slack-compose-wrapper {
            /* Directional light hitting the top-left corner */
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.01) 100%
            );

            border: 1px solid rgba(255, 255, 255, 0.06);
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 10px;

            /* 15px of physical lift off the card surface for real
               optical parallax as the camera dolly pans */
            transform: translateZ(15px);

            box-shadow:
                0 16px 32px -8px rgba(0, 0, 0, 0.5),
                0 4px 12px rgba(0, 0, 0, 0.3);

            overflow: hidden;

            /* Real glass — blurs elements passing behind it */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .slack-input-wrapper {
            padding: 16px 16px 12px;
        }

        .slack-input-placeholder {
            font-family: var(--font-ui);
            font-size: 14px;
            color: rgba(255,255,255,0.3);
            height: 40px;
            display: flex;
            align-items: center;
        }

        .slack-input-text {
            font-family: var(--font-ui);
            font-size: 14px;
            color: #d1d2d3;
            min-height: 40px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 2px;
            line-height: 1.5;
        }

        .slack-input-text .mention {
            color: #8ab4ff;
            background: rgba(78, 140, 255, 0.14);
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: 500;
            font-size: 14px;
        }

        .slack-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
        }

        .slack-toolbar-left {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .slack-toolbar-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.38);
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
            transition: background 0.2s ease;
            border-radius: 4px;
            background: transparent;
            border: none;
            padding: 0;
        }

        .slack-toolbar-icon:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .slack-toolbar-icon.text-icon {
            font-family: var(--font-ui);
            font-size: 15px;
            font-weight: 700;
        }

        .slack-send-btn {
            display: flex;
            align-items: center;
            gap: 0;
            height: 32px;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.3s ease;
        }

        .slack-send-main {
            background: transparent;
            color: rgba(255,255,255,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 10px;
            font-size: 14px;
            transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .slack-send-main svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        .slack-send-dropdown {
            background: transparent;
            color: rgba(255,255,255,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 7px;
            border-left: 1px solid transparent;
            font-size: 10px;
            transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* When typing — green container appears (Slack brand) */
        .slack-send-btn.show .slack-send-main {
            background: #007a5a;
            color: white;
        }

        .slack-send-btn.show .slack-send-main:hover {
            background: #148567;
        }

        .slack-send-btn.show .slack-send-dropdown {
            background: #007a5a;
            color: white;
            border-left-color: rgba(255,255,255,0.25);
        }

        .slack-send-btn.show .slack-send-dropdown:hover {
            background: #148567;
        }

        .slack-send-btn.active {
            transform: scale(1.05);
            box-shadow: 0 0 16px rgba(0, 122, 90, 0.5);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
        }

        .slack-typing {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0 0;
            font-family: var(--font-ui);
            font-size: 11px;
            color: rgba(255,255,255,0.3);
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .slack-typing.visible {
            opacity: 1;
        }

        .typing-dots {
            display: flex;
            gap: 3px;
        }

        .typing-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.35);
            animation: typingBounce 1.2s ease-in-out infinite;
        }

        .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.3s; }

        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-4px); }
        }

        /* Vignette masks — soft fade to background */
        .hero-vignette-top {
            position: absolute; top: 0; left: 0; right: 0; height: 20%;
            background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-bottom {
            position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
            background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.7) 35%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-left {
            position: absolute; top: 0; bottom: 0; left: 0; width: 10%;
            background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-right {
            position: absolute; top: 0; bottom: 0; right: 0; width: 10%;
            background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, transparent 100%);
            z-index: 15; pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .scene-board-inner { animation: none; }
            .scene-slack { transition: none; }
            .slack-msg, .slack-msg.bot-reply, .slack-msg.bot-reply .slack-msg-body, .slack-msg.bot-reply .slack-attachment, .slack-typing { transition: none; }
            .slack-msg { max-height: none; opacity: 1; transform: none; }
        }

        .hero-overlay {
            display: none;
        }

        /* ── Singularity Component ── */
        .singularity-landscape-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 48px 60px;
        }

        .singularity-landscape {
            width: 100%; height: 700px; background: #E8E7E4; position: relative; overflow: hidden;
            border-radius: var(--radius-panel);
            box-shadow: var(--shadow-float);
        }

        .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) {
            .singularity-landscape { height: 500px; }
            .singularity-landscape-wrap { padding: 0 24px 40px; }
            .workflow-row { flex-direction: column; gap: 20px; }
            .hero-header { padding: 60px 24px 24px; }
        }

        /* ════════ BOTTOM-RIGHT SCENE SUBTITLE OVERLAY ════════ */
        .card-field-headline {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 50%;
            z-index: 30;
            pointer-events: none;
            background: none;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
            text-align: right;
            /* Right-edge inset matches the hero-header-inner max-width (1456px)
               so this text lines up with the 'Book a Walkthrough' CTA at the
               same vertical gutter on wide viewports, and falls back to the
               same 60px gutter the rest of the page uses on narrow ones.
               Uses 100vw instead of 100% so the math is predictable regardless
               of which element the calc is applied to (this container is only
               50% wide, which would otherwise halve the reference width). */
            padding: 0 max(60px, calc((100vw - 1456px) / 2)) 80px 0;
        }

        .card-field-headline .headline-label {
            font-family: var(--font-ui);
            font-size: 12px;
            font-weight: 500;
            color: rgba(255,255,255,0.35);
            letter-spacing: 0.08em;
            margin-bottom: 16px;
        }

        .card-field-headline .headline-title {
            font-family: var(--font-sans);
            font-size: clamp(20px, 2.5vw, 32px);
            font-weight: 400;
            color: white;
            line-height: 1.15;
            letter-spacing: -0.03em;
            max-width: 360px;
        }


        .card-field-headline .headline-scene1 {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-field-headline .headline-scene2 {
            position: absolute;
            bottom: 80px;
            /* Matches .card-field-headline right inset so scene 2 sits at the
               exact same x as scene 1. 100vw here (not 100%) because this
               element is position:absolute inside a 50%-wide parent, so a
               percentage would resolve against 50vw and collapse to 60px. */
            right: max(60px, calc((100vw - 1456px) / 2));
            text-align: right;
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-field-headline.scene-slack-active .headline-scene1 {
            opacity: 0;
            transform: translateY(-12px);
        }

        .card-field-headline.scene-slack-active .headline-scene2 {
            opacity: 1;
            transform: translateY(0);
        }

        /* ════════ CINEMATIC CAMERA PHYSICS ════════ */

        /* ─────────────────────────────────────────────────────────────
           The True Macro Lens Stack — replaces the flat .optical-dof.

           A single `backdrop-filter: blur(8px)` with a gradient mask is
           a cheap "double-vision" effect — CSS just fades the opacity
           of a flat 8px blur over the sharp image, which isn't how a
           physical lens behaves. A real macro lens has a focal curve:
           the blur radius grows smoothly with distance from the focal
           plane.

           To approximate that, we stack THREE layers of backdrop blur,
           each progressively stronger, each masked to only reveal its
           strength near the extreme edges. Where the masks overlap, the
           CSS compositor naturally blends them into a mathematically
           smooth focal gradient:

             middle (focal plane) → sharp
             ¼ from edge          → 3px soft focus
             ⅛ from edge          → 3 + 6 = 9px out of focus
             extreme edge         → 3 + 6 + 12 = 21px heavy bokeh

           All three layers share the same boundary as .scene-board
           (top 2/3 of the hero) so they only affect the Kanban area.
           ───────────────────────────────────────────────────────────── */
        .dof-stack {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 33.33%;
            z-index: 12;
            pointer-events: none;
        }

        /* Tier 1: light 3px blur — the transition zone between sharp
           focus and the soft background. Revealed across the widest
           band (top 25% and bottom 30%), so it's the first layer the
           eye reads as "softening". */
        .dof-layer-1 {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(1.5px);
            -webkit-backdrop-filter: blur(1.5px);
            mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 25%,
                rgba(0,0,0,0) 70%,
                rgba(0,0,0,1) 100%);
            -webkit-mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 25%,
                rgba(0,0,0,0) 70%,
                rgba(0,0,0,1) 100%);
        }

        /* Tier 2: medium 6px blur — the out-of-focus zone. Pulled in
           to the top 15% and bottom 20% so it adds density on top of
           tier 1 without invading the focal plane. */
        .dof-layer-2 {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(3.5px);
            -webkit-backdrop-filter: blur(3.5px);
            mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 15%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,1) 100%);
            -webkit-mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 15%,
                rgba(0,0,0,0) 80%,
                rgba(0,0,0,1) 100%);
        }

        /* Tier 3: heavy 12px bokeh — only the extreme top 6% and
           bottom 10%. This is what reads as "deep background" / "too
           close to the lens", and stacks with the earlier tiers to
           deliver the full 21px equivalent blur at the edges. */
        .dof-layer-3 {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 6%,
                rgba(0,0,0,0) 90%,
                rgba(0,0,0,1) 100%);
            -webkit-mask-image: linear-gradient(180deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 6%,
                rgba(0,0,0,0) 90%,
                rgba(0,0,0,1) 100%);
        }

        .cinematic-grain {
            position: absolute;
            inset: 0;
            z-index: 999;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04;
            mix-blend-mode: overlay;
        }

        .volumetric-flare {
            display: none; /* replaced by v9 volumetric sweeps */
        }

        /* ═══════════════════════════════════════════════════════ */
        /* AMBIENT SCENE WASH — Linear-style soft backlight        */
        /* Two very low-opacity radial gradients, no blend mode,   */
        /* so edges stay pure black (respects "keep black black"). */
        /* ═══════════════════════════════════════════════════════ */
        .card-field-ambient {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                radial-gradient(ellipse 55% 45% at 48% 30%,
                    rgba(255, 255, 255, 0.055) 0%,
                    rgba(255, 255, 255, 0.032) 28%,
                    rgba(255, 255, 255, 0.012) 55%,
                    transparent 78%),
                radial-gradient(ellipse 42% 32% at 68% 78%,
                    rgba(255, 255, 255, 0.024) 0%,
                    rgba(255, 255, 255, 0.011) 45%,
                    transparent 72%);
        }

        /* ═══════════════════════════════════════════════════════ */
        /* V9 EFFECT 1: VOLUMETRIC LIGHT SWEEPS — disabled         */
        /* (was lifting the blacks; user wants pure black)         */
        /* Caustic light leaks were trialled here and rolled back  */
        /* — hero stays atmospherically dark.                      */
        /* ═══════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════ */
        /* V9 EFFECT 4: Z-DEPTH BLUR (legacy helpers, still used) */
        /* Per-column blur classes for Kanban depth cues          */
        /* ═══════════════════════════════════════════════════════ */
        .board-col-dof-near  { filter: blur(0px);   transition: filter 0.4s ease; }
        .board-col-dof-mid   { filter: blur(0.5px); transition: filter 0.4s ease; }
        .board-col-dof-far   { filter: blur(1.5px); transition: filter 0.4s ease; }

        /* ═══════════════════════════════════════════════════════ */
        /* V9 EFFECT 5: ANIMATED DITHERED FILM GRAIN              */
        /* SVG feTurbulence animated to shimmer / shift           */
        /* ═══════════════════════════════════════════════════════ */
        .cinematic-grain-v9 {
            position: absolute;
            inset: 0;
            z-index: 998;
            pointer-events: none;
            opacity: 0.045;
            mix-blend-mode: overlay;
            overflow: hidden;
        }
        .cinematic-grain-v9 svg {
            width: 100%;
            height: 100%;
        }

        /* ── Enhanced column headers ── */
        .board-column-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .board-column-header-left { display: flex; align-items: center; gap: 6px; }
        .board-col-status-icon { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; }
        .board-col-count { font-weight: 500; color: rgba(255,255,255,0.25); font-size: 10px; margin-left: 2px; }
        .board-column-header-right { display: flex; align-items: center; gap: 2px; }
        .board-col-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 13px; font-weight: 400; border-radius: 3px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; font-family: var(--font-ui); line-height: 1; }
        .board-col-icon:hover { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
        .board-col-icon.dots { font-size: 11px; letter-spacing: 1px; }
        .board-new-case { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-top: 4px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.2); cursor: pointer; border-radius: 6px; transition: color 0.2s ease, background 0.2s ease; }
        .board-new-case:hover { color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.04); }
        .board-new-case-plus { font-size: 14px; font-weight: 300; line-height: 1; }

        /* ── Card origami fold (Phase 1: rotate away — pure transform/opacity) ──
           Decoupled from layout collapse to avoid flexbox calculation conflicts.
           Transform/opacity only — no max-height, no padding/margin/border. */
        .board-card.card-folding {
            transform: perspective(800px) rotateX(90deg) scale(0.94) translateZ(-30px) !important;
            opacity: 0 !important;
            transition:
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
            pointer-events: none;
        }

        /* ── Card layout collapse (Phase 2: close the gap) ──
           Applied AFTER the rotation completes. JS locks the card's current
           pixel height inline first, then this class drives it to 0 so flexbox
           can't snap-collapse mid-animation. */
        .board-card.card-closing {
            height: 0 !important;
            min-height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border-width: 0 !important;
            overflow: hidden !important;
            transition:
                height 0.55s cubic-bezier(0.7, 0, 0.3, 1),
                min-height 0.55s cubic-bezier(0.7, 0, 0.3, 1),
                padding 0.55s cubic-bezier(0.7, 0, 0.3, 1),
                margin 0.55s cubic-bezier(0.7, 0, 0.3, 1),
                border-width 0.55s cubic-bezier(0.7, 0, 0.3, 1) !important;
        }

        /* ── Card appearing animation (into Resolved) ── */
        .board-card.card-appearing {
            max-height: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            border-width: 0 !important;
            /* Collapsed margin so the unborn card occupies zero vertical space —
               no gap to compensate for now that .board-column dropped flex `gap`. */
            margin-bottom: 0 !important;
            overflow: hidden !important;
            opacity: 0;
            transform: perspective(800px) rotateX(-60deg) scale(0.9);
        }

        .board-card.card-appearing.card-landed {
            max-height: 150px !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
            border-width: 1px !important;
            /* Restore the standard inter-card spacing once the card lands. */
            margin-bottom: 8px !important;
            opacity: 1;
            transform: perspective(800px) rotateX(0deg) scale(1);
            /* Restrained green landing glow — matches .halo-resolved
               opacity so the arrival reads as "resolved" without the
               old 40px neon bloom. */
            border-color: rgba(16, 185, 129, 0.3);
            background: rgba(16, 185, 129, 0.05);
            box-shadow: 0 0 24px rgba(16, 185, 129, 0.12),
                        inset 0 0 12px rgba(16, 185, 129, 0.05);
        }

        /* After landing, fade back to the ghostly surface so the card
           sinks into the black void with its neighbors. */
        .board-card.card-appearing.card-settled {
            border-color: rgba(255, 255, 255, 0.03);
            background: rgba(255, 255, 255, 0.015);
            box-shadow: none;
        }

        /* ── AI typing glow ── */
        .slack-input-text.ai-typing {
            text-shadow: 0 0 8px rgba(78, 140, 255, 0.4), 0 0 20px rgba(78, 140, 255, 0.15);
        }


        

        /* ════════ TEXT GLOW — on the letters themselves ════════ */

        /* Soft glow on all text when AI is typing */
        .slack-input-text.ai-typing {
            text-shadow: 0 0 8px rgba(78, 140, 255, 0.4), 0 0 20px rgba(78, 140, 255, 0.15);
        }

        /* Mention gets a slightly stronger glow */
        .slack-input-text.ai-typing .mention {
            text-shadow: 0 0 10px rgba(78, 140, 255, 0.5), 0 0 24px rgba(78, 140, 255, 0.2);
        }

        /* Premium text caret — a real DOM element (.slack-caret) injected by
           JS so it can be moved, paused, and removed with full fidelity.
           Smooth ease-in-out blink (NOT harsh CSS steps()) when at rest.
           When the .is-typing modifier is on the caret, it stays solid —
           the way a real text cursor stops blinking the instant a key is
           pressed and only resumes after a beat of inactivity. */
        .slack-caret {
            display: inline-block;
            width: 1px;
            height: 16px;
            background-color: #d1d2d3;       /* Native Slack caret color */
            border-radius: 0.5px;
            margin-left: 2px;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.12);
            animation: premiumCaretBlink 1s ease-in-out infinite;
            flex-shrink: 0;
            align-self: center;
        }

        .slack-caret.is-typing {
            animation: none;
            opacity: 1;
        }

        @keyframes premiumCaretBlink {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0; }
        }

        .slack-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
        }

        .slack-toolbar-left {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .slack-toolbar-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.38);
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
            transition: background 0.2s ease;
            border-radius: 4px;
            background: transparent;
            border: none;
            padding: 0;
        }

        .slack-toolbar-icon:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .slack-toolbar-icon.text-icon {
            font-family: var(--font-ui);
            font-size: 15px;
            font-weight: 700;
        }

        .slack-send-btn {
            display: flex;
            align-items: center;
            gap: 0;
            height: 32px;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.3s ease;
        }

        .slack-send-main {
            background: transparent;
            color: rgba(255,255,255,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 10px;
            font-size: 14px;
            transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .slack-send-main svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        .slack-send-dropdown {
            background: transparent;
            color: rgba(255,255,255,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 0 7px;
            border-left: 1px solid transparent;
            font-size: 10px;
            transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                        border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* When typing — green container appears (Slack brand) */
        .slack-send-btn.show .slack-send-main {
            background: #007a5a;
            color: white;
        }

        .slack-send-btn.show .slack-send-main:hover {
            background: #148567;
        }

        .slack-send-btn.show .slack-send-dropdown {
            background: #007a5a;
            color: white;
            border-left-color: rgba(255,255,255,0.25);
        }

        .slack-send-btn.show .slack-send-dropdown:hover {
            background: #148567;
        }

        .slack-send-btn.active {
            transform: scale(1.05);
            box-shadow: 0 0 16px rgba(0, 122, 90, 0.5);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
        }

        .slack-typing {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0 0;
            font-family: var(--font-ui);
            font-size: 11px;
            color: rgba(255,255,255,0.3);
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .slack-typing.visible {
            opacity: 1;
        }

        .typing-dots {
            display: flex;
            gap: 3px;
        }

        .typing-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.35);
            animation: typingBounce 1.2s ease-in-out infinite;
        }

        .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.3s; }

        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-4px); }
        }

        /* Vignette masks — soft fade to background */
        .hero-vignette-top {
            position: absolute; top: 0; left: 0; right: 0; height: 20%;
            background: linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.5) 40%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-bottom {
            position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
            background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.7) 35%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-left {
            position: absolute; top: 0; bottom: 0; left: 0; width: 10%;
            background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, transparent 100%);
            z-index: 15; pointer-events: none;
        }
        .hero-vignette-right {
            position: absolute; top: 0; bottom: 0; right: 0; width: 10%;
            background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, transparent 100%);
            z-index: 15; pointer-events: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .scene-board-inner { animation: none; }
            .scene-slack { transition: none; }
            .slack-msg, .slack-msg.bot-reply, .slack-msg.bot-reply .slack-msg-body, .slack-msg.bot-reply .slack-attachment, .slack-typing { transition: none; }
            .slack-msg { max-height: none; opacity: 1; transform: none; }
        }

        .hero-overlay {
            display: none;
        }

        /* ── Singularity Component ── */
        .singularity-landscape-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 48px 60px;
        }

        .singularity-landscape {
            width: 100%; height: 700px; background: #E8E7E4; position: relative; overflow: hidden;
            border-radius: var(--radius-panel);
            box-shadow: var(--shadow-float);
        }

        .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) {
            .singularity-landscape { height: 500px; }
            .singularity-landscape-wrap { padding: 0 24px 40px; }
            .workflow-row { flex-direction: column; gap: 20px; }
            .hero-header { padding: 60px 24px 24px; }
        }


        /* ═══════════════════════════════════════════════════════ */
        /* INTRO BRIDGE                                           */
        /* ═══════════════════════════════════════════════════════ */
        .intro-section {
            padding: 160px 48px;
            /* Shared warm surface with HiW — one continuous canvas
               after the dark hero instead of two separate bands. */
            background: #F0EDE8;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* HOW IT WORKS — 3 Steps                                 */
        /* ═══════════════════════════════════════════════════════ */
        .hiw-section {
            padding: 0 48px 160px;
            background: #F0EDE8;
        }

        .hiw-timeline {
            max-width: 1360px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
        }

        /* Vertical spine running down the left edge of the number column */
        .hiw-timeline::before {
            content: '';
            position: absolute;
            left: 23px;
            top: 48px;
            bottom: 48px;
            width: 1px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.04));
        }

        .hiw-step {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 40px;
            padding: 48px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            position: relative;
        }
        .hiw-step:last-child { border-bottom: none; }

        .hiw-step-marker {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 2px;
        }

        .hiw-step-number {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.04em;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 2;
        }

        .hiw-step-content {
            padding-top: 10px;
        }

        .hiw-step-title {
            font-family: var(--font-sans);
            font-size: 22px;
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: -0.02em;
            margin-bottom: 12px;
        }

        .hiw-step-desc {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.7;
            max-width: 560px;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* FEATURES — Capabilities Grid                           */
        /* ═══════════════════════════════════════════════════════ */
        .features-section {
            padding: 160px 48px;
            background: #ffffff;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            max-width: 1360px;
            margin: 0 auto;
        }

        .feature-card {
            background: #F3F4F6;
            border: none;
            border-radius: 8px;
            overflow: hidden;
            transition: box-shadow 0.5s var(--ease-smooth), transform 0.5s var(--ease-out-expo);
        }

        /* Hero card spans full width — horizontal layout */
        .feature-card-hero {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }
        .feature-card-hero .feature-illustration {
            height: 320px;
            padding: 32px;
        }
        .feature-card-hero .feature-card-body {
            padding: 40px 48px;
        }
        .feature-card-hero .feature-card-title {
            font-size: 22px;
        }
        .feature-card-hero .feature-card-desc {
            font-size: 15px;
        }

        .feature-card:hover {
            box-shadow: 0 8px 40px -8px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        .feature-illustration {
            width: 100%;
            height: 240px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 24px 24px 0;
        }

        .feature-illustration svg {
            width: 100%;
            height: 100%;
            border-radius: 4px;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04));
        }

        .feature-card-body {
            padding: 24px 24px 28px;
        }

        .feature-card-title {
            font-family: var(--font-sans);
            font-size: 17px;
            font-weight: 600;
            color: #111827;
            letter-spacing: -0.02em;
            margin-bottom: 8px;
        }

        .feature-card-desc {
            font-family: var(--font-ui);
            font-size: 14px;
            color: #6B7280;
            line-height: 1.7;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* LIVE PIPELINE — Placeholder for animated CRM board     */
        /* ═══════════════════════════════════════════════════════ */
        .pipeline-section {
            padding: 160px 48px 0;
            background: #ffffff;
            overflow: hidden;
        }

        .pipeline-placeholder {
            max-width: 1360px;
            margin: 0 auto;
            height: 400px;
            background: white;
            border: 1px solid var(--border-premium);
            border-radius: var(--radius-machine);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: 13px;
            letter-spacing: 0.05em;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* CTA — Final call                                       */
        /* ═══════════════════════════════════════════════════════ */
        .cta-section {
            padding: 200px 48px;
            text-align: center;
            background: #111111;
            color: white;
        }

        .cta-headline {
            font-family: var(--font-sans);
            font-size: clamp(40px, 5vw, 64px);
            font-weight: 400;
            letter-spacing: -0.04em;
            color: white;
            margin-bottom: 24px;
            line-height: 1.1;
        }

        .cta-sub {
            font-size: 22px;
            color: rgba(255,255,255,0.6);
            max-width: 640px;
            margin: 0 auto 48px;
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* FOOTER                                                 */
        /* ═══════════════════════════════════════════════════════ */
/* footer styling inherited from v111-homepage.css (shared, light) */


        /* ═══════════════════════════════════════════════════════ */
        /* BOTTOM WORDMARK                                        */
        /* ═══════════════════════════════════════════════════════ */
        /* Light-mode ghost on this page: the homepage band is #111 with a
           black-on-black wordmark; on the light product page that reads as
           a blank black slab, so the band continues the footer surface. */
        .bottom-wordmark-wrap {
            background: #FAFAF8;
            padding: 80px 0 0;
            overflow: hidden;
            position: relative;
            height: clamp(80px, 12vw, 160px);
        }
        .bottom-wordmark {
            font-family: var(--font-sans);
            font-size: clamp(140px, 20vw, 320px);
            font-weight: 700;
            letter-spacing: -0.04em;
            text-transform: uppercase;
            color: #F1F1EF;
            text-align: center;
            line-height: 0.85;
            user-select: none;
            -webkit-text-stroke: 1px rgba(0,0,0,0.04);
            transform: translateY(20%);
        }

        /* ═══════════════════════════════════════════════════════ */
        /* PAGE CONTENT WRAPPER                                   */
        /* ═══════════════════════════════════════════════════════ */
        .page-content {
            position: relative;
            z-index: 2;
            background: var(--bg);
        }
        /* The cinematic hero→intro bridge now lives on .intro-section itself
           as a background gradient, so we no longer need the legacy
           ::before shadow that added a hard edge on top of the page. */

        /* ═══════════════════════════════════════════════════════ */
        /* GLASS REVEAL SYSTEM                                    */
        /* ═══════════════════════════════════════════════════════ */
        .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);
        }

        /* ═══════════════════════════════════════════════════════ */
        /* SECTION SYSTEM                                         */
        /* ═══════════════════════════════════════════════════════ */
        .section-container {
            max-width: 1360px;
            margin: 0 auto;
        }

        .section-meta {
            display: flex;
            gap: 32px;
            margin-bottom: 32px;
            align-items: flex-end;
        }

        .section-number {
            font-family: var(--font-ui);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--text-tertiary);
        }

        /* .section-label removed — collections now uses the canonical
           .section-eyebrow rule from v111-homepage.css (v112 additions
           block). The numbered .section-meta wrapper + .section-number
           are kept as collections-specific composition.

           The canonical rule sets margin: 0 0 var(--space-6) to space
           the eyebrow above a headline. Inside .section-meta (a flex
           row with align-items: flex-end) that bottom margin would lift
           the eyebrow above the number — strip it here. */
        .section-meta .section-eyebrow { margin: 0; }

        .section-headline {
            font-family: var(--font-sans);
            font-size: clamp(40px, 5vw, 64px);
            font-weight: 400;
            letter-spacing: -0.04em;
            margin-bottom: 24px;
            line-height: 1.08;
            max-width: 900px;
            color: var(--text-primary);
        }

        .section-subtext {
            font-family: var(--font-ui);
            font-size: 22px;
            font-weight: 400;
            letter-spacing: -0.02em;
            color: var(--text-secondary);
            margin-bottom: 60px;
            max-width: 640px;
            line-height: 1.6;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-ui);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            background: var(--accent);
            color: white;
            padding: 18px 36px;
            border-radius: 40px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(249, 115, 22, 0.25);
        }

        /* ═══════════════════════════════════════════════════════ */
        /* FEATURE CARD MICRO-ANIMATIONS                          */
        /* ═══════════════════════════════════════════════════════ */

        /* Shimmer sweep on email body skeleton lines */
        @keyframes shimmerLine {
            0% { opacity: 0.4; }
            50% { opacity: 1; }
            100% { opacity: 0.4; }
        }
        .feature-card .dunning-line1 { animation: shimmerLine 3s ease-in-out infinite; }
        .feature-card .dunning-line2 { animation: shimmerLine 3s ease-in-out 0.4s infinite; }
        .feature-card .dunning-line3 { animation: shimmerLine 3s ease-in-out 0.8s infinite; }
        .feature-card .dunning-line4 { animation: shimmerLine 3s ease-in-out 1.2s infinite; }

        /* Context engine: progress bars fill */
        @keyframes barFill {
            0% { width: 0; }
            60% { width: var(--target-w); }
            100% { width: var(--target-w); }
        }
        .feature-card .ctx-bar {
            animation: barFill 4s var(--ease-out-expo) infinite;
        }

        /* Summary skeleton typing */
        @keyframes typeReveal {
            0% { clip-path: inset(0 100% 0 0); }
            50% { clip-path: inset(0 0% 0 0); }
            100% { clip-path: inset(0 0% 0 0); }
        }
        .feature-card .ctx-summary-1 { animation: typeReveal 4s ease-out infinite; }
        .feature-card .ctx-summary-2 { animation: typeReveal 4s ease-out 0.3s infinite; }
        .feature-card .ctx-summary-3 { animation: typeReveal 4s ease-out 0.6s infinite; }

        /* Workspace row highlight sweep */
        @keyframes rowHighlight {
            0%, 100% { opacity: 0; }
            20%, 40% { opacity: 1; }
        }
        .feature-card .ws-highlight {
            animation: rowHighlight 6s ease-in-out infinite;
        }

        /* Reconciliation: match connector dash animation */
        @keyframes dashDraw {
            0% { stroke-dashoffset: 80; }
            50% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 0; }
        }
        .feature-card .recon-dash {
            animation: dashDraw 3s ease-out infinite;
            stroke-dasharray: 80;
        }

        /* ═══════════════════════════════════════════════════════ */
        /* RESPONSIVE                                             */
        /* ═══════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .hero-content { padding: 0 20px; }
            .intro-section, .features-section { padding: 80px 24px; }
            .hiw-section, .pipeline-section { padding: 80px 24px; }
            .cta-section { padding: 100px 24px; }
            .hiw-timeline { gap: 0; }
            .hiw-step { grid-template-columns: 36px 1fr; gap: 20px; }
            .hiw-step-number { width: 36px; height: 36px; font-size: 11px; }
            .hiw-timeline::before { left: 17px; }
            .hiw-step-title { font-size: 18px; }
            .features-grid { grid-template-columns: 1fr; }
            .feature-card-hero { grid-column: 1; grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 32px; }
            .section-headline { font-size: clamp(28px, 7vw, 40px); }
            .section-meta { gap: 16px; }
        }

/* ════════════════════════════════════════════════════════════════════════
   V22 — LIGHT HERO (Mercury / Pylon-inspired)
   Replaces the dark singularity hero as the page's opening surface.
   The dark animation moves later into the Smart Collection block.
   ════════════════════════════════════════════════════════════════════════ */

.page-hero {
    position: relative;
    background: #ffffff;
    padding: 160px 24px 96px;   /* top clears nav, generous breathing room */
    overflow: hidden;
    text-align: center;
}

/* Decorative corner geometry — subtle accent blocks à la Pylon.
   Two filled w/ a low-opacity Gathers blue, two outlined / hatched. */
.page-hero-decor {
    position: absolute;
    pointer-events: none;
}
.page-hero-decor.decor-tl {
    top: 112px;
    left: 80px;
    width: 128px;
    height: 128px;
    background: rgba(91, 124, 255, 0.08);
}
.page-hero-decor.decor-tr {
    top: 152px;
    right: 80px;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 7px,
            rgba(0, 0, 0, 0.035) 7px,
            rgba(0, 0, 0, 0.035) 8px
        );
}
.page-hero-decor.decor-bl {
    bottom: 80px;
    left: 64px;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(0, 0, 0, 0.07);
}
.page-hero-decor.decor-br {
    bottom: 104px;
    right: 80px;
    width: 96px;
    height: 96px;
    background: rgba(91, 124, 255, 0.08);
}

.page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.page-hero-eyebrow {
    /* Inherits font-size / weight / spacing from canonical .section-eyebrow.
       Just enforce the bottom margin in this hero context. */
    margin-bottom: 20px;
}

.page-hero-headline {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--text-primary);
    margin: 0 0 24px;
}

.page-hero-subhead {
    font-family: var(--font-ui);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 36px;
}

.page-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    background: #0A0A0A;
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.page-hero-cta:hover { background: #1a1a1a; }
.page-hero-cta svg { margin-top: 1px; }

/* Product UI preview card — single invoice with AI-drafted action.
   Sits below the typography as the hero's visual centerpiece. */
.page-hero-preview {
    margin-top: 88px;
    display: flex;
    justify-content: center;
}

.hero-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.04);
    text-align: left;
}

.hero-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.hero-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B7CFF 0%, #4A6BEE 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.hero-card-id { flex: 1; min-width: 0; }
.hero-card-customer {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.hero-card-invoice {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.hero-card-status {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(249, 115, 22, 0.10);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.hero-card-ai {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #F8F8FA;
    border: 1px solid rgba(91, 124, 255, 0.14);
    border-radius: 10px;
    margin-bottom: 12px;
}
.hero-card-ai-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #5B7CFF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-card-ai-body { flex: 1; min-width: 0; }
.hero-card-ai-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: #5B7CFF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.hero-card-ai-preview {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hero-card-actions {
    display: flex;
    gap: 8px;
}
.hero-card-btn {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}
.hero-card-btn:hover { background: #F8F8FA; }
.hero-card-btn-primary {
    background: #0A0A0A;
    color: #ffffff;
    border-color: #0A0A0A;
}
.hero-card-btn-primary:hover { background: #1a1a1a; }

@media (max-width: 768px) {
    .page-hero { padding: 112px 16px 64px; }
    .page-hero-decor { display: none; }
    .page-hero-preview { margin-top: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   v22 — Legacy dark hero, contained into a rounded card.
   The dark animation lives inside the page flow as a large,
   self-contained surface (Mercury / Pylon style) instead of
   being full-bleed 100vh. The duplicated headline + CTA inside
   the legacy hero are hidden because the v22 light hero above
   already carries that copy.
   ═══════════════════════════════════════════════════════════ */
.hero.cf-hero {
    /* Override the full-viewport defaults at the top of this file */
    height: auto;
    min-height: 0;
    max-width: 1456px;
    margin: 24px auto 96px;
    padding: 0;
    width: calc(100% - 48px);
    /* Slightly rounded — softer than --radius-machine (2px) but well within
       the homepage's mid-radius range (flow-cards 10px, hero-card 16px) */
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 30px 80px -30px rgba(10, 10, 12, 0.45),
        0 8px 24px -12px rgba(10, 10, 12, 0.25);
    /* Lock a generous aspect ratio so the animation has room to breathe */
    aspect-ratio: 16 / 10;
    max-height: 760px;
}

/* ── Bottom hero REPLAY: break out of the contained card → full-screen,
   edge-to-edge, dark-mode cinematic section just above the footer. ── */
.hero.cf-hero.hero-bottom {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    max-height: none;
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    box-shadow: none;
    background: #000000;
}

/* Hide the duplicated headline + CTA that sat inside the legacy hero —
   the v22 page-hero above is now the single source of truth for that copy. */
.hero.cf-hero .hero-header { display: none; }

/* Make the cinematic canvas fill the contained card */
.hero.cf-hero .card-field-landscape-wrap,
.hero.cf-hero .card-field-landscape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ─── Surface mark slot — Slack ↔ Teams swap.
   The container is a fixed-height slot pinned to the top-left of the
   contained dark card. Both marks (logo + wordmark) stack inside via
   absolute positioning and crossfade on a 7-second cycle. Scene-tied
   visibility (hidden during Kanban, faded in during Slack scene) is
   preserved at the parent level. */
.hero.cf-hero .slack-scene-logo {
    top: 22px;
    left: max(48px, calc((100vw - 1440px) / 2 + 48px));
    right: auto;
    bottom: auto;
    z-index: 120;
    /* Slot wide enough for the longer "Microsoft Teams" wordmark */
    width: 180px;
    height: 30px;
    /* Override the inherited flex layout (was side-by-side with gap) */
    display: block;
    gap: 0;
}
.hero.cf-hero .slack-scene-logo.visible {
    opacity: 0.85;
}

/* Each mark = logo + label, sitting in the same slot, one visible at a time. */
.hero.cf-hero .slack-scene-logo .surface-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    will-change: opacity, transform, filter;
    /* Apple-style easing — ease-out-expo */
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.hero.cf-hero .slack-scene-logo .surface-mark-slack {
    animation-name: surfaceLogoSwapSlack;
}
.hero.cf-hero .slack-scene-logo .surface-mark-teams {
    animation-name: surfaceLogoSwapTeams;
}

/* The IMG converts source-black SVG → white via filter; sizing only.
   The Apple-style blur lives on the parent mark so it blurs the whole
   unit (logo + label) together during transitions. */
.hero.cf-hero .slack-scene-logo .surface-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    /* Inline SVGs use explicit fills — no filter needed */
}

.hero.cf-hero .slack-scene-logo .surface-label {
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    /* The label's effective brightness is governed by the .surface-mark's
       animation opacity (peaks at 0.82) multiplied by the parent's .visible
       0.85 — lands at the same brand-grey luminance as the logo IMG. */
}

/* ─── Crossfade choreography:
   Cycle = 7s. Each mark has ~2.5s visible, ~0.5s exit, ~3.5s hidden, ~0.5s entry.
   - Exit: opacity 1→0, scale 1→0.9, translateY 0→-6px, blur 0→6px (rises up + away)
   - Entry: opacity 0→1, scale 0.9→1, translateY 6px→0, blur 6px→0 (rises up from below)
   - Brief gap between exit and entry so the swap reads as deliberate. */

@keyframes surfaceLogoSwapSlack {
    0%      { opacity: 0.82; transform: scale(1) translateY(0);     filter: blur(0); }
    36%     { opacity: 0.82; transform: scale(1) translateY(0);     filter: blur(0); }
    46%     { opacity: 0;    transform: scale(0.9) translateY(-6px); filter: blur(6px); }
    92%     { opacity: 0;    transform: scale(0.9) translateY(6px);  filter: blur(6px); }
    100%    { opacity: 0.82; transform: scale(1) translateY(0);     filter: blur(0); }
}

@keyframes surfaceLogoSwapTeams {
    0%      { opacity: 0;    transform: scale(0.9) translateY(6px);  filter: blur(6px); }
    36%     { opacity: 0;    transform: scale(0.9) translateY(6px);  filter: blur(6px); }
    46%     { opacity: 0.82; transform: scale(1) translateY(0);     filter: blur(0); }
    88%     { opacity: 0.82; transform: scale(1) translateY(0);     filter: blur(0); }
    96%     { opacity: 0;    transform: scale(0.9) translateY(-6px); filter: blur(6px); }
    100%    { opacity: 0;    transform: scale(0.9) translateY(6px);  filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero.cf-hero .slack-scene-logo .surface-mark {
        animation: none;
    }
    .hero.cf-hero .slack-scene-logo .surface-mark-slack { opacity: 0.82; }
    .hero.cf-hero .slack-scene-logo .surface-mark-teams { opacity: 0; }
}

/* ─── Bottom vignettes — both the global card vignette AND the Slack-scene
   bottom vignette stack on the Slack frame. Shrink both so the animation
   gets the maximum amount of card height. */
.hero.cf-hero .hero-vignette-bottom {
    height: 8%;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}
.hero.cf-hero .scene-slack .slack-vignette-bottom {
    height: 10%;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

/* The scene headline ("Your team stays in Slack…") still anchors bottom-right
   of the container — but the legacy padding was viewport-math (max(60px, …))
   tuned for a full-bleed hero, which over-insets inside a contained card.
   Tighten to a card-relative gutter. */
.hero.cf-hero .card-field-headline {
    padding: 0 32px 28px 0;
}

/* Scene 2 headline (Slack) had its own absolute positioning with viewport-math
   right inset and 80px bottom — pulled it into the bottom-right corner of the
   contained card so it lands in the same spot as scene 1's headline. */
.hero.cf-hero .card-field-headline .headline-scene2 {
    bottom: 28px;
    right: 32px;
}

/* ─── Reclaim the bottom third of the canvas.
   Both scene containers ship with `bottom: 33.33%` so the animation only
   lives in the top 2/3 of the canvas — the bottom third was reserved for
   the legacy hero headline + CTA in the full-viewport layout. Inside the
   contained card the headline is just a small label tucked into the
   bottom-right corner, so we let the scene fill (almost) the whole card.
   8% bottom inset preserves a thin landing zone for the headline + the
   bottom vignette fade. */
.hero.cf-hero .scene-board,
.hero.cf-hero .scene-slack {
    bottom: 8%;
}

/* The Slack scene's inner container also pushed its content up by 16vh of
   padding-bottom (so the conversation card sits in the upper half of the
   already-truncated scene box). With the box now reclaiming the bottom
   third, that big padding leaves a second wedge of dead space. Cut it. */
.hero.cf-hero .scene-slack-inner {
    padding-bottom: 4vh;
}

/* The depth-of-field blur stack was also pinned to `bottom: 33.33%` so the
   blur fade boundary lived where the scene's bottom edge used to be. Now
   that the scenes extend down to 8%, the DOF stack needs to follow or you
   get a hard blur-cutoff line at the 2/3 mark. */
.hero.cf-hero .dof-stack {
    bottom: 8%;
}

/* ─── Slack card zoom — push it back a touch so the right edge of the
   conversation stops getting cropped. The base keyframe sat at
   translateZ(1900px) → scale ≈ 1.90×. Pulling to 1500px → scale ≈ 1.60×
   shrinks the projected card ~16% so the whole message column fits
   inside the contained frame. */
@keyframes slackCameraGlideContained {
    0% {
        transform: translateZ(500px) rotateX(8deg) rotateZ(-2deg)
                   translate3d(0, 80px, 0);
    }
    100% {
        transform: translateZ(500px) rotateX(8deg) rotateZ(-2deg)
                   translate3d(0, -80px, 0);
    }
}
.hero.cf-hero .slack-card-rotator {
    animation-name: slackCameraGlideContained;
}

@media (max-width: 1024px) {
    .hero.cf-hero {
        margin: 16px auto 64px;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 768px) {
    .hero.cf-hero {
        margin: 12px auto 48px;
        width: calc(100% - 24px);
        aspect-ratio: 3 / 4;
        max-height: 560px;
    }
}

/* ════════════════════════════════════════════════════════════════
   FEATURE SECTIONS — Collections page (Mercury architecture)
   ════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.feat-wrap {
    padding: 0;
}

/* ── Section shell — each section is its own breathing room ── */
.feat-section { padding: 64px 0; background: none; overflow: visible; border: none; }

/* ── feat-block: animation target only, not a visual card ── */
.feat-block {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 60px;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s cubic-bezier(0.16,1,0.3,1),
        transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.feat-block.in-view { opacity: 1; transform: translateY(0); }

/* ── Asymmetric two-column grid: copy narrower, visual wider ── */
.feat-inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: flex-end;
    min-height: 560px;
    gap: 80px;
}

/* ── Copy pane — floats on white page, bottom-aligned ── */
.feat-copy {
    padding: 0 0 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Visual pane — monolith stone container ── */
.feat-visual {
    background: #E3E0DC;
    border-radius: 20px;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px 20px 0;
    min-height: 520px;
    position: relative;
}

/* ── Window chrome — top bar of the floating inner card ── */
.feat-chrome-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 44px;
    background: #F5F4F1;
    border: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.feat-chrome-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 44px;
}
.feat-chrome-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
}
.feat-chrome-dots span:nth-child(1) { background: rgba(239, 68, 68, 0.55); }
.feat-chrome-dots span:nth-child(2) { background: rgba(245, 158, 11, 0.55); }
.feat-chrome-dots span:nth-child(3) { background: rgba(16, 185, 129, 0.45); }

.feat-chrome-title {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: rgba(10, 10, 10, 0.35);
    text-align: center;
    user-select: none;
}

.feat-chrome-right {
    width: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.fcr-pill {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    color: #5B7CFF;
    background: rgba(91,124,255,0.1);
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Window body: optional rail + white content area ── */
.feat-window {
    display: flex;
    flex: 1;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.feat-win-rail {
    width: 140px;
    flex-shrink: 0;
    background: #FAFAF8;
    border-right: 1px solid rgba(0, 0, 0, 0.055);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.fwr-section-label {
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: rgba(10, 10, 10, 0.26);
    padding: 8px 8px 3px;
}

.fwr-item {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    color: rgba(10, 10, 10, 0.48);
    padding: 6px 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fwr-item.fwr-active {
    background: rgba(91, 124, 255, 0.09);
    color: #5B7CFF;
    font-weight: 500;
}

.feat-win-body {
    flex: 1;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Reversed layout ── */
.feat-inner-reverse { direction: rtl; }
.feat-inner-reverse > * { direction: ltr; }

/* ── UI container inside the tinted visual pane (legacy, kept for compat) ── */
.feat-ui {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.07);
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.06),
        0 8px 32px rgba(0,0,0,0.08);
}

/* ── Typography ── */
.feat-eyebrow {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #C0C0C8;
    margin-bottom: 16px;
    display: block;
}

.feat-title {
    font-family: var(--font-sans);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #0A0A0A;
    margin: 0;
}

/* Body copy hidden — Mercury style: title → rule → bullets only */
.feat-body { display: none; }

/* ── Separator rule between title and bullets ── */
.feat-bullets {
    list-style: none;
    padding: 24px 0 0;
    margin: 24px 0 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.feat-bullets li {
    font-family: var(--font-ui);
    font-size: 14px;
    color: #52525B;
    display: flex;
    align-items: baseline;
    gap: 12px;
    line-height: 1.45;
}
.feat-bullets li::before {
    content: '→';
    color: #A1A1AA;
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   DUNNING CARD
   ══════════════════════════════════════════════════════════════ */
.dcard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.dcard-customer {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 3px;
}

.dcard-meta {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #A1A1AA;
}

.dcard-badge {
    position: relative;
    height: 24px;
    flex-shrink: 0;
}

.badge-text {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

.badge-overdue {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}

.badge-paid {
    background: rgba(16,185,129,0.1);
    color: #10b981;
    opacity: 0;
    transform: translateY(4px);
}

.feat-visual.dunning-paid .badge-overdue { opacity: 0; transform: translateY(-4px); }
.feat-visual.dunning-paid .badge-paid    { opacity: 1; transform: translateY(0); }

/* Timeline */
.dcard-timeline {
    padding: 0 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.dcard-step {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.5s cubic-bezier(0.16,1,0.3,1) calc(var(--step) * 0.55s + 0.4s),
        transform 0.5s cubic-bezier(0.16,1,0.3,1) calc(var(--step) * 0.55s + 0.4s);
}
.dcard-step:last-child { border-bottom: none; }

.feat-visual.in-view .dcard-step {
    opacity: 1;
    transform: translateY(0);
}

.dstep-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3px;
    gap: 0;
}

.dstep-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5B7CFF;
    box-shadow: 0 0 6px rgba(91,124,255,0.35);
    flex-shrink: 0;
}

.dstep-line {
    flex: 1;
    width: 1px;
    background: rgba(0,0,0,0.08);
    margin-top: 6px;
    min-height: 20px;
}

.dstep-day {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #A1A1AA;
    margin-bottom: 4px;
}

.dstep-action {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 6px;
}

.dstep-preview {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.55;
    color: #A1A1AA;
}

.dstep-check {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 2px;
    color: #10b981;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1) calc(var(--step) * 0.55s + 0.8s);
}
.feat-visual.in-view .dstep-check { opacity: 1; }

/* ── Dunning v2: stats + table layout ── */
.dunn-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Stats bar */
.dunn-stats {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 54px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 0;
}

.dunn-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.dunn-stat-n {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    color: #0A0A0A;
    letter-spacing: -0.02em;
}

.dunn-stat-l {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 400;
    color: rgba(10,10,10,0.38);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dunn-stat-sep {
    width: 1px;
    height: 28px;
    background: rgba(0,0,0,0.07);
    flex-shrink: 0;
    margin: 0 16px;
}

/* Table header */
.dunn-thead {
    display: grid;
    grid-template-columns: minmax(0,1fr) 74px 108px 80px;
    column-gap: 8px;
    padding: 0 20px;
    height: 28px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.dunn-thead span {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(10,10,10,0.3);
}

.dunn-th-amt,
.dunn-th-tag { text-align: right; }

/* Rows */
.dunn-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dunn-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 74px 108px 80px;
    column-gap: 8px;
    padding: 0 20px;
    align-items: center;
    height: 52px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.4s cubic-bezier(0.16,1,0.3,1) calc(var(--r) * 0.1s + 0.3s),
        transform 0.4s cubic-bezier(0.16,1,0.3,1) calc(var(--r) * 0.1s + 0.3s);
}

.dunn-row:last-child { border-bottom: none; }

.feat-visual.in-view .dunn-row {
    opacity: 1;
    transform: translateY(0);
}

/* Customer cell */
.dunn-cell-cust {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dunn-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: hsl(var(--av-h), 55%, 88%);
    color: hsl(var(--av-h), 55%, 38%);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.dunn-cust-info { min-width: 0; }

.dunn-cust-name {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: #0A0A0A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dunn-cust-sub {
    font-family: var(--font-ui);
    font-size: 11px;
    color: rgba(10,10,10,0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amount cell */
.dunn-cell-amt {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    color: #0A0A0A;
    text-align: right;
    white-space: nowrap;
}

/* Progress cell */
.dunn-cell-prog {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dunn-pips {
    display: flex;
    align-items: center;
    gap: 0;
}

.dpip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dpip-seg {
    width: 10px;
    height: 1.5px;
    background: rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.dpip-seg.seg-on { background: #5B7CFF; }

.dpip.pip-done { background: #5B7CFF; }
.dpip.pip-now  { background: #5B7CFF; box-shadow: 0 0 0 2.5px rgba(91,124,255,0.22); }
.dpip.pip-off  { background: rgba(0,0,0,0.12); }
.dpip.pip-legal { background: #ef4444; box-shadow: 0 0 0 2.5px rgba(239,68,68,0.2); }

.dunn-prog-label {
    font-family: var(--font-ui);
    font-size: 10px;
    color: rgba(10,10,10,0.38);
    white-space: nowrap;
}

/* Status tags */
.dunn-cell-tag {
    display: flex;
    justify-content: flex-end;
}

.dtag {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.dtag-esc     { background: rgba(239,68,68,0.08);    color: #dc2626; }
.dtag-pending { background: rgba(245,158,11,0.08);   color: #b45309; }
.dtag-sent    { background: rgba(91,124,255,0.08);   color: #5B7CFF; }
.dtag-legal   { background: rgba(239,68,68,0.08);    color: #dc2626; }
.dtag-opened  { background: rgba(16,185,129,0.08);   color: #059669; }

/* Footer row */
.dunn-footer {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.dunn-footer-more {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: rgba(10,10,10,0.38);
}

.dunn-footer-link {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 500;
    color: #5B7CFF;
}

/* ══════════════════════════════════════════════════════════════
   INTELLIGENT INBOX CARD
   ══════════════════════════════════════════════════════════════ */
.inbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.inbox-bar-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
}

.inbox-bar-new {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: #5B7CFF;
    background: rgba(91,124,255,0.08);
    padding: 3px 8px;
    border-radius: 4px;
}

.inbox-list { padding: 8px 0; }

.inbox-row {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
}
.inbox-row:last-child { border-bottom: none; }

.inbox-row-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}
.inbox-dot-dispute { background: #ef4444; }
.inbox-dot-promise { background: #f59e0b; }
.inbox-dot-routine { background: #5B7CFF; }

.inbox-row-body { min-width: 0; }

.inbox-sender {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #0A0A0A;
    margin-bottom: 3px;
}

.inbox-preview {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #A1A1AA;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-tag {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.75) translateY(3px);
    transition:
        opacity 0.3s cubic-bezier(0.16,1,0.3,1),
        transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.inbox-tag.tag-visible { opacity: 1; transform: scale(1) translateY(0); }

.inbox-tag-dispute { background: rgba(239,68,68,0.08);  color: #ef4444; }
.inbox-tag-promise { background: rgba(245,158,11,0.08); color: #b45309; }
.inbox-tag-routine { background: rgba(91,124,255,0.08); color: #5B7CFF; }

/* Expanded row with AI draft — keep same 3-column grid as sibling rows */
.inbox-row-open {
    grid-template-columns: 10px 1fr auto;
    grid-template-rows: auto auto;
}
.inbox-row-open .inbox-tag {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    margin-top: 2px;
}
.inbox-row-open .inbox-row-body {
    grid-column: 2;
    grid-row: 1;
}

.inbox-draft-panel {
    grid-column: 1 / -1;
    background: #F2F1EE;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 10px;
    overflow: hidden;
    /* collapsed state */
    max-height: 0;
    padding: 0 16px;
    margin-top: 0;
    opacity: 0;
    transition:
        max-height 0.55s cubic-bezier(0.16,1,0.3,1),
        padding    0.45s cubic-bezier(0.16,1,0.3,1),
        margin-top 0.45s cubic-bezier(0.16,1,0.3,1),
        opacity    0.35s cubic-bezier(0.16,1,0.3,1);
}
.inbox-draft-panel.draft-open {
    max-height: 160px;
    padding: 14px 16px;
    margin-top: 10px;
    opacity: 1;
}

/* Typing indicator (three bouncing dots) */
.inbox-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
    margin-bottom: 8px;
}
.inbox-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #A1A1AA;
    animation: inbox-dot-bounce 1.1s ease-in-out infinite;
}
.inbox-typing span:nth-child(2) { animation-delay: 0.18s; }
.inbox-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes inbox-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%           { transform: translateY(-5px); opacity: 1; }
}
.inbox-typing.hidden { display: none; }

/* Draft body: hidden until typing finishes */
.inbox-draft-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.inbox-draft-body.body-visible {
    max-height: 120px;
    opacity: 1;
}

/* Approve button pulse */
@keyframes inbox-approve-pulse {
    0%   { transform: scale(1);    box-shadow: none; }
    45%  { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(91,124,255,0.25); }
    100% { transform: scale(1);    box-shadow: none; }
}
.inbox-btn-approve.approve-pulse {
    animation: inbox-approve-pulse 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
}

.inbox-draft-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5B7CFF;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.inbox-draft-text {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #71717A;
    line-height: 1.55;
    margin-bottom: 12px;
    font-style: italic;
}

.inbox-draft-btns { display: flex; gap: 8px; }

.inbox-btn-approve {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    border: none;
    background: #5B7CFF;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.inbox-btn-approve:hover { opacity: 0.85; }

.inbox-btn-edit {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
    background: transparent;
    color: #A1A1AA;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   RECONCILIATION SECTION
   ══════════════════════════════════════════════════════════════ */
.recon-ui { padding: 18px 22px 16px; }

.recon-cols-header {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    margin-bottom: 20px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #A1A1AA;
}
.recon-cols-header span:last-child { text-align: right; }

.recon-match-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.recon-match-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.recon-bank-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.recon-amount {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: #0A0A0A;
    letter-spacing: -0.02em;
}

.recon-bank-from {
    font-family: var(--font-ui);
    font-size: 11px;
    color: #A1A1AA;
}

.recon-line-cell {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.recon-svg {
    width: 100%;
    height: 2px;
    display: block;
    overflow: visible;
}

.recon-line {
    transition: stroke-dashoffset 0.7s cubic-bezier(0.16,1,0.3,1) calc(var(--rrow) * 0.5s + 0.4s);
}
.feat-visual.in-view .recon-line { stroke-dashoffset: 0; }

.recon-inv-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.recon-inv-id {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: #0A0A0A;
}

.recon-status {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1) calc(var(--rrow) * 0.5s + 1.0s);
}
.feat-visual.in-view .recon-status { opacity: 1; }
.recon-matched { background: rgba(16,185,129,0.08);  color: #059669; }
.recon-partial  { background: rgba(245,158,11,0.08); color: #b45309; }
.recon-pending  { background: rgba(161,161,170,0.10); color: #71717A; }

/* DSO bar */
.recon-dso-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.recon-dso-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: #A1A1AA;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.recon-dso-track {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recon-dso-old {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: #A1A1AA;
    text-decoration: line-through;
    letter-spacing: -0.02em;
}

.recon-dso-new {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: #059669;
    letter-spacing: -0.02em;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1) 2.2s;
}
.feat-visual.in-view .recon-dso-new { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   PAYMENT PORTAL
   ══════════════════════════════════════════════════════════════ */
.portal-flip-outer { width: 100%; padding: 0; }

.portal-scene {
    position: relative;
    width: 100%;
    flex: 1;
    align-self: stretch;
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    border: none;
}

.portal-face {
    position: absolute;
    inset: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.portal-face-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

.portal-face-a { opacity: 1; transform: translateY(0); }
.portal-face-b {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.portal-scene.portal-showing-b .portal-face-a {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}
.portal-scene.portal-showing-b .portal-face-b {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.portal-face-chip {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #A1A1AA;
    margin-bottom: 4px;
}

.portal-inv-table {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    overflow: hidden;
}

.portal-inv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: #ffffff;
}
.portal-inv-row:last-child { border-bottom: none; }
.portal-inv-overdue { background: #fff8f8; }

.portal-inv-details { display: flex; flex-direction: column; gap: 2px; }
.portal-inv-right   { text-align: right; display: flex; flex-direction: column; gap: 2px; }

.portal-inv-id      { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #0A0A0A; }
.portal-inv-company { font-family: var(--font-ui); font-size: 11px; color: #A1A1AA; }
.portal-inv-amount  { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #0A0A0A; letter-spacing: -0.01em; }
.portal-inv-age     { font-family: var(--font-ui); font-size: 11px; color: #ef4444; font-weight: 500; }

.portal-link-hint {
    font-family: var(--font-ui);
    font-size: 12px;
    color: #A1A1AA;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* Customer portal face */
.portal-brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.portal-brand-name { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #0A0A0A; letter-spacing: -0.02em; }
.portal-brand-tag  { font-family: var(--font-ui); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #A1A1AA; }

.portal-pay-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 0 8px;
    text-align: center;
    transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.portal-pay-block.portal-paying-out { opacity: 0; transform: scale(0.95); }

.portal-pay-inv  { font-family: var(--font-ui); font-size: 12px; color: #A1A1AA; font-weight: 500; }
.portal-pay-amount { font-family: var(--font-sans); font-size: 28px; font-weight: 600; color: #0A0A0A; letter-spacing: -0.03em; line-height: 1; }
.portal-pay-due  { font-family: var(--font-ui); font-size: 12px; color: #ef4444; font-weight: 500; margin-bottom: 4px; }

.portal-pay-cta {
    margin-top: 8px;
    background: #0A0A0A;
    color: white;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.portal-pay-cta:hover { opacity: 0.8; }
.portal-pay-cta.portal-cta-pulsing { animation: ctaPulse 0.6s ease; }

@keyframes ctaPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.portal-confirmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    opacity: 0;
    transform: scale(0.9) translateY(8px);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
    position: absolute;
    inset: 80px 24px 24px;
    pointer-events: none;
}
.portal-confirmed.portal-confirmed-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.portal-confirmed-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(16,185,129,0.25);
}

.portal-confirmed-title { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: #0A0A0A; letter-spacing: -0.02em; }
.portal-confirmed-sub   { font-family: var(--font-ui); font-size: 12px; color: #A1A1AA; }

/* ══════════════════════════════════════════════════════════════
   PROOF + CTA
   ══════════════════════════════════════════════════════════════ */
.feat-proof-cta { padding: 120px 0; background: none; border: none; }

.feat-proof-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

/* Proof section reveal animations */
.proof-metrics,
.proof-quote,
.feat-cta-block {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.65s cubic-bezier(0.16,1,0.3,1),
        transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.proof-metrics.in-view,
.proof-quote.in-view,
.feat-cta-block.in-view {
    opacity: 1;
    transform: translateY(0);
}

.proof-metrics {
    display: flex;
    align-items: center;
    width: 100%;
}

.proof-metric {
    flex: 1;
    text-align: center;
    padding: 0 24px;
}

.proof-metric-divider {
    width: 1px;
    height: 48px;
    background: rgba(0,0,0,0.08);
}

.proof-val {
    font-family: var(--font-sans);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #0A0A0A;
    line-height: 1;
    margin-bottom: 10px;
}

.proof-lbl {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #71717A;
    line-height: 1.4;
}

.proof-quote {
    max-width: 640px;
    text-align: center;
    border: none;
    padding: 0;
    margin: 0;
}

.proof-quote p {
    font-family: var(--font-sans);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 400;
    font-style: italic;
    color: #71717A;
    line-height: 1.55;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}

.proof-attribution {
    display: block;
    font-style: normal;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #A1A1AA;
}

.feat-cta-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.feat-cta-block .cta-headline {
    font-family: var(--font-sans);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #0A0A0A;
    margin: 0;
}

.feat-cta-block .cta-sub {
    font-family: var(--font-ui);
    font-size: 15px;
    color: #71717A;
    margin: 0;
}

.feat-cta-block .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: #0A0A0A;
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.feat-cta-block .btn-primary:hover { opacity: 0.8; transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .feat-block { padding: 0 40px; }
    .feat-inner { gap: 56px; }
    .feat-proof-inner { padding: 0 40px; }
}

@media (max-width: 768px) {
    .feat-wrap { padding: 48px 0 0; }
    .feat-section { padding: 40px 0; }
    .feat-block { padding: 0 24px; }

    .feat-inner,
    .feat-inner-reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        min-height: auto;
        gap: 24px;
        align-items: flex-start;
    }
    .feat-inner-reverse > * { direction: ltr; }

    .feat-copy { padding: 0 0 8px; }
    .feat-visual { min-height: 360px; }

    .feat-proof-inner { padding: 0 24px; gap: 48px; }
    .proof-metrics       { flex-direction: column; gap: 32px; }
    .proof-metric-divider { width: 48px; height: 1px; }

    .recon-cols-header,
    .recon-match-row { grid-template-columns: 1fr 80px 1fr; }
    .recon-line-cell { padding: 0 8px; }
}



/* ══════════════════════════════════════════════════════════════
   DECK ILLUSTRATIONS — Outpost24 deck mockups ported into the
   feature sections (Workspace, Inbox, Ask Gathers, Slack/Teams).
   Tokens scoped to .feat-deck; component classes are unique
   (qz/gs/gk/gi/ga/tm/w-*) and namespaced under .feat-deck.
   ══════════════════════════════════════════════════════════════ */
.feat-deck{
  --paper:#FCFCFA;--ink:#111316;--ink-2:#43464B;--ink-3:#84878C;
  --accent:#5B7CFF;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;
  --app-base:#ECEDEF;--app-card:#ffffff;--app-line:#E5E6E9;--app-line2:#EEEFF1;
  --app-t1:#17191D;--app-t2:#585C63;--app-t3:#8A8E96;
  --green:#2F9E68;--amber:#C68A33;--rose:#C0463F;
}
/* layout: narrow copy + large cropped app "stage" (mirrors the deck) */
.feat-deck .feat-block{max-width:1320px;padding:0 60px;}
.feat-deck .feat-inner{grid-template-columns:340px 804px;gap:56px;min-height:0;align-items:center;}
.feat-deck.feat-deck-rev .feat-inner{grid-template-columns:804px 340px;}
.feat-deck.feat-deck-rev .feat-copy{grid-column:2;grid-row:1;}
.feat-deck.feat-deck-rev .feat-visual{grid-column:1;grid-row:1;}
.feat-deck .feat-copy{padding:0;}
/* grey "stone" container — ported from the Outpost24 memo .qz-frame.
   The app sits on a lit stone gradient and peeks/bleeds off the outer
   edge (bottom + the side away from the copy), matted by a white ring. */
.feat-deck .feat-visual{
  background:
    radial-gradient(135% 95% at 50% -18%,rgba(255,255,255,.60),rgba(255,255,255,0) 54%),
    radial-gradient(120% 90% at 112% 128%,rgba(110,122,145,.20),rgba(110,122,145,0) 55%),
    linear-gradient(155deg,#DBDDE2 0%,#C6C9CF 100%);
  border-radius:14px;overflow:hidden;padding:0;min-height:0;position:relative;display:block;height:540px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(15,18,30,.06);}
.feat-deck .feat-visual .qz{position:absolute;width:1180px;max-width:none;transform-origin:top left;
  box-shadow:0 0 0 1px rgba(255,255,255,.65),0 0 0 11px rgba(255,255,255,.30),0 0 0 12px rgba(255,255,255,.14),0 30px 60px -22px rgba(8,9,10,.40);}
/* App anchored top-left, peeking off the right + bottom — uniform across
   sections. Keeps the Gathers sidebar visible and crops only the trailing
   panel, matching the component's native bleed (radius/borders top-left). */
.feat-deck .stage-work .qz{top:34px;left:36px;transform:scale(.76);}
.feat-deck .stage-inbox .qz{top:34px;left:36px;transform:scale(.76);}
.feat-deck .stage-ask{height:470px;}
.feat-deck .stage-ask .qz{top:28px;left:36px;transform:scale(.76);}
.feat-deck .stage-teams{height:600px;}
.feat-deck .stage-teams .tm{position:absolute;top:34px;left:36px;width:934px;height:700px;flex:none;transform:scale(.80);transform-origin:top left;}
@media (max-width:1180px){
  .feat-deck .feat-block{max-width:780px;padding:0 32px;}
  .feat-deck .feat-inner,.feat-deck.feat-deck-rev .feat-inner{grid-template-columns:1fr;gap:28px;}
  .feat-deck.feat-deck-rev .feat-copy,.feat-deck.feat-deck-rev .feat-visual{grid-column:auto;}
  .feat-deck .feat-copy{padding:0 0 8px;}
}
  .feat-deck .ic{display:inline-flex;align-items:center;justify-content:center;flex:none;}
  .feat-deck .ic svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .tm{flex:1;display:flex;flex-direction:column;min-width:0;background:#EBEBEB;border:1px solid #DCDCDC;border-radius:12px;overflow:hidden;font-family:var(--sans);color:#242424;box-shadow:0 26px 56px -24px rgba(20,20,45,.42),0 2px 8px rgba(0,0,0,.05);}
  .feat-deck .tm-titlebar{height:40px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #E0E0E0;}
  .feat-deck .tm-logo{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#3a3a44;}
  .feat-deck .tm-logo svg{width:18px;height:18px;}
  .feat-deck .tm-search{flex:1;max-width:300px;margin:0 auto;background:#fff;border:1px solid #E2E0EC;border-radius:6px;padding:5px 11px;font-size:10.5px;color:#9a9aa3;display:flex;align-items:center;gap:7px;}
  .feat-deck .tm-search svg{width:12px;height:12px;stroke:#9a9aa3;fill:none;stroke-width:2;}
  .feat-deck .tm-body{flex:1;display:flex;min-height:0;}
  .feat-deck .tm-rail{width:52px;flex:none;background:#EBEBEB;display:flex;flex-direction:column;align-items:center;padding:9px 0;gap:3px;}
  .feat-deck .tm-ri{width:40px;height:42px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#4d4d57;font-size:7px;font-weight:500;}
  .feat-deck .tm-ri svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .tm-ri.on{color:#5B5FC7;}
  .feat-deck .tm-ri svg.tm-chaticon{stroke:none;fill-rule:evenodd;filter:drop-shadow(0 1px 1.5px rgba(70,74,170,.35));}
  .feat-deck .tm-ri.spacer{flex:1;height:auto;}
  .feat-deck .tm-list{width:230px;flex:none;display:flex;flex-direction:column;padding:12px 9px 10px;}
  .feat-deck .tm-list-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 11px;}
  .feat-deck .tm-list-top .t{font-size:13.5px;font-weight:700;color:#242424;}
  .feat-deck .tm-list-top .ic{display:flex;gap:12px;color:#5b5b66;}
  .feat-deck .tm-list-top .ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .tm-pills{display:flex;gap:5px;padding:0 4px 11px;flex-wrap:wrap;}
  .feat-deck .tm-pill{font-size:9.5px;color:#5b5b66;background:transparent;border:1px solid #D2D2D9;border-radius:12px;padding:3px 10px;}
  .feat-deck .tm-pill.on{background:#E7E7F8;color:#33339a;font-weight:600;border-color:#D6D6F0;}
  .feat-deck .tm-ci{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;border:1px solid transparent;margin-bottom:1px;}
  .feat-deck .tm-ci.on{background:#fff;border-color:#E3E3E3;}
  .feat-deck .tm-ci .av{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:8.5px;font-weight:700;}
  .feat-deck .tm-ci .av.app{background:#111316;border-radius:6px;padding:4px;}
  .feat-deck .tm-ci .av.app svg{width:100%;height:100%;}
  .feat-deck .tm-ci .nm{font-size:10.5px;color:#3a3a44;font-weight:500;line-height:1.3;overflow:hidden;}
  .feat-deck .tm-ci.on .nm{font-weight:700;color:#242424;}
  .feat-deck .tm-ci .nm .sub{display:block;font-size:9.5px;color:#9a9aa3;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .feat-deck .tm-main{flex:1;margin:8px 8px 8px 0;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 10px 24px -12px rgba(0,0,0,.18);display:flex;flex-direction:column;min-width:0;overflow:hidden;}
  .feat-deck .tm-top{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:1px solid #EFEEF4;}
  .feat-deck .tm-top .hav{width:24px;height:24px;border-radius:6px;background:#111316;padding:4px;flex:none;}
  .feat-deck .tm-top .hav svg{width:100%;height:100%;}
  .feat-deck .tm-top .htitle{font-size:12px;font-weight:700;color:#242424;line-height:1.2;}
  .feat-deck .tm-top .htitle .sub{display:block;font-size:9.5px;color:#9a9aa3;font-weight:400;margin-top:2px;}
  .feat-deck .tm-top .hmem{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10px;color:#5b5b66;}
  .feat-deck .tm-top .hmem svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
  .feat-deck .tm-msgs{flex:1;padding:15px 20px 6px;display:flex;flex-direction:column;gap:13px;overflow:hidden;}
  .feat-deck .tm-day{align-self:center;font-size:9.5px;color:#9a9aa3;background:#F2F1F7;border-radius:11px;padding:2px 12px;}
  .feat-deck .tm-msg{display:flex;gap:10px;align-items:flex-start;}
  .feat-deck .tm-av{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:600;border-radius:50%;}
  .feat-deck .tm-av.bot{background:#111316;border-radius:6px;padding:4px;}
  .feat-deck .tm-av.bot svg{width:100%;height:100%;display:block;}
  .feat-deck .tm-av.kam{background:#237B4B;}
  .feat-deck .tm-b{flex:1;min-width:0;}
  .feat-deck .tm-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;}
  .feat-deck .tm-nm{font-size:11px;font-weight:700;color:#242424;}
  .feat-deck .tm-badge{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5B5FC7;background:#E8EAFB;border-radius:3px;padding:1px 5px;}
  .feat-deck .tm-tm{font-size:9.5px;color:#9a9aa3;}
  .feat-deck .tm-bubble{background:#F5F4F8;border-radius:8px;padding:10px 13px;font-size:11px;color:#3b3b3b;line-height:1.5;max-width:560px;}
  .feat-deck .tm-bubble strong{color:#242424;font-weight:600;}
  .feat-deck .tm-mention{color:#5B5FC7;font-weight:600;}
  .feat-deck .tm-code{font-family:var(--mono);font-size:10px;background:#EAE9F2;border-radius:3px;padding:0 5px;color:#444;}
  .feat-deck .tm-chip{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:7px 11px;background:#fff;border:1px solid #E6E4ED;border-left:2px solid var(--rose);border-radius:5px;font-family:var(--mono);font-size:9.5px;color:#555;}
  .feat-deck .tm-chip .sep{width:1px;height:10px;background:#E0DEE8;}
  .feat-deck .tm-chip .meta{color:#9a9aa3;}
  .feat-deck .tm-check{color:var(--green);font-weight:700;}
  .feat-deck .tm-sent-meta{color:#9a9aa3;}
  .feat-deck .tm-compose-wrap{padding:6px 18px 14px;}
  .feat-deck .tm-compose{border:1px solid #E2E0EA;border-radius:10px;padding:10px 13px;display:flex;align-items:center;gap:11px;}
  .feat-deck .tm-compose .ph{flex:1;font-size:11px;color:#9a9aa3;}
  .feat-deck .tm-compose .ic{display:flex;gap:14px;align-items:center;color:#6b6b76;}
  .feat-deck .tm-compose .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .tm-compose .send{color:#5B5FC7;}
  /* ============ APP ILLUSTRATIONS (verbatim from one-pager) ============ */
  .feat-deck .qz{background:var(--app-base);border:1px solid rgba(255,255,255,.75);border-right:none;border-bottom:none;border-radius:5px 0 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.65),0 0 0 11px rgba(255,255,255,.3),0 0 0 12px rgba(255,255,255,.14),0 30px 60px -22px rgba(8,9,10,.40);font-family:var(--sans);color:var(--app-t1);position:relative;width:1180px;max-width:none;transform:scale(.8);transform-origin:top left;}
  .feat-deck .qz-grid{display:grid;grid-template-columns:172px 1fr;min-height:580px;}
  .feat-deck .qz-grid.fold{grid-template-columns:56px 1fr;}
  .feat-deck .qz-card{display:flex;min-width:0;background:var(--app-card);border:1px solid var(--app-line);border-radius:11px 0 0 0;box-shadow:0 1px 2px rgba(15,18,24,.05),0 2px 10px rgba(15,18,24,.05);margin:8px 0 0 8px;overflow:hidden;}
  .feat-deck .gs{padding:14px 10px 12px;display:flex;flex-direction:column;min-width:0;}
  .feat-deck .gs-logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--ink);margin:2px 6px 14px;}
  .feat-deck .gs-logo svg{width:20px;height:20px;flex:none;}
  .feat-deck .gs-nav{display:flex;flex-direction:column;gap:1px;}
  .feat-deck .gs-nav a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;font-size:11px;color:var(--app-t2);text-decoration:none;white-space:nowrap;overflow:hidden;}
  .feat-deck .gs-nav a .ic{color:var(--app-t3);}
  .feat-deck .gs-nav a .ic svg{width:15px;height:15px;stroke-width:1.8;}
  .feat-deck .gs-nav a .badge{margin-left:auto;font-size:10px;font-weight:600;color:var(--app-t3);background:rgba(0,0,0,.05);border-radius:999px;padding:1px 7px;}
  .feat-deck .gs-nav a.on{background:#EEEFF1;color:var(--ink);font-weight:600;}
  .feat-deck .gs-nav a.on .ic{color:var(--app-t1);}
  .feat-deck .gs-sec{display:flex;align-items:center;justify-content:space-between;padding:11px 8px 4px;font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#9ca3af;}
  .feat-deck .gs-sec .ic{color:#bcc0c6;}.gs-sec .ic svg{width:11px;height:11px;}
  .feat-deck .gs-foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 6px 2px;border-top:1px solid var(--app-line2);}
  .feat-deck .gs-av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;}
  .feat-deck .gs-foot .nm{font-size:10.5px;font-weight:600;color:var(--app-t1);line-height:1.2;}
  .feat-deck .gs-foot .ro{font-size:10.5px;color:var(--app-t3);}
  .feat-deck .gs.fold{align-items:center;padding:14px 0 12px;}
  .feat-deck .gs.fold .gs-logo{margin:2px 0 16px;}
  .feat-deck .gs.fold .gs-fnav{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .feat-deck .gs.fold .gs-fnav a{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--app-t3);}
  .feat-deck .gs.fold .gs-fnav a .ic svg{width:16px;height:16px;stroke-width:1.9;}
  .feat-deck .gs.fold .gs-fnav a.on{background:#E9EAED;color:var(--app-t1);}
  .feat-deck .gs.fold .gs-foot{border:none;margin-top:auto;padding:0;justify-content:center;}
  .feat-deck .gk{display:flex;flex-direction:column;min-width:0;flex:1;}
  .feat-deck .gk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 10px;}
  .feat-deck .gk-title{font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--app-t1);}
  .feat-deck .gk-sub{font-size:9.5px;color:var(--app-t3);margin-left:8px;}
  .feat-deck .gk-h-r{display:flex;align-items:center;gap:8px;}
  .feat-deck .gk-pill{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;color:var(--app-t2);background:#F4F5F7;border:1px solid var(--app-line);border-radius:7px;padding:4px 9px;white-space:nowrap;}
  .feat-deck .gk-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(38,181,116,.14);flex:none;}
  .feat-deck .gk-btn{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:500;color:#fff;background:#1F2329;border-radius:7px;padding:5px 11px;white-space:nowrap;box-shadow:0 1px 2px rgba(16,18,22,.18);}
  .feat-deck .gk-btn .ic svg{width:12px;height:12px;}
  .feat-deck .gk-ic{width:26px;height:26px;border-radius:7px;border:1px solid var(--app-line);display:flex;align-items:center;justify-content:center;color:var(--app-t2);}
  .feat-deck .gk-ic .ic svg{width:13px;height:13px;}
  .feat-deck .gk-filters{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--app-line2);border-bottom:1px solid var(--app-line2);flex-wrap:wrap;}
  .feat-deck .gk-fchip{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:var(--app-t3);background:#EAEBEE;border:1px solid #E4E5E9;border-radius:7px;padding:4px 8px;white-space:nowrap;}
  .feat-deck .gk-fchip .fic{display:inline-flex;color:var(--app-t3);}
  .feat-deck .gk-fchip .fic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .gk-fchip .fv{color:var(--app-t1);font-weight:600;padding-left:6px;margin-left:4px;border-left:1px solid rgba(0,0,0,.1);}
  .feat-deck .gk-fchip .fch{display:inline-flex;color:var(--app-t3);margin-left:1px;}
  .feat-deck .gk-fchip .fch svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .gk-fchip.active{color:var(--app-t2);background:#EFEFEB;border-color:var(--app-line);font-weight:500;}
  .feat-deck .gk-fchip.active .x{font-size:13px;line-height:1;color:var(--app-t3);opacity:.7;margin-left:1px;}
  .feat-deck .gk-fdiv{width:1px;height:16px;background:rgba(0,0,0,.05);margin:0 3px;}
  .feat-deck .gk-fadd{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--app-t3);background:transparent;border:1px dashed #D6D8DD;border-radius:7px;padding:4px 9px;white-space:nowrap;}
  .feat-deck .gk-fadd svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
  .feat-deck .gk-board{display:flex;gap:12px;padding:14px 16px;overflow:hidden;}
  .feat-deck .gk-col{position:relative;flex:none;width:236px;padding:10px 8px 40px;}
  .feat-deck .gk-col::before{content:'';position:absolute;inset:0;background:rgba(15,18,24,0.012);border-radius:8px 8px 0 0;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 120px),transparent 100%);z-index:0;pointer-events:none;}
  .feat-deck .gk-col>*{position:relative;z-index:1;}
  .feat-deck .gk-col-head{display:flex;align-items:center;gap:8px;padding:2px 6px 9px;font-size:10.5px;}
  .feat-deck .gk-dot{width:9px;height:9px;border-radius:50%;border:1.5px dotted currentColor;background:transparent;flex:none;}
  .feat-deck .gk-col-name{color:var(--app-t1);font-weight:600;}
  .feat-deck .gk-col-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(0,0,0,.045);color:var(--app-t3);font-size:11px;font-weight:500;}
  .feat-deck .gk-col-total{margin-left:auto;color:var(--app-t3);font-size:12px;font-weight:500;white-space:nowrap;}
  .feat-deck .gk-cards{display:flex;flex-direction:column;gap:8px;}
  .feat-deck .w-case{background:#fff;border:0;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(8,9,10,.05),0 1px 3px rgba(8,9,10,.04);}
  .feat-deck .w-r1{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .feat-deck .w-r1-l{display:inline-flex;align-items:center;gap:6px;min-width:0;}
  .feat-deck .w-r1-r{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
  .feat-deck .w-id{font-size:10.5px;letter-spacing:.04em;color:var(--app-t3);font-weight:500;text-transform:uppercase;}
  .feat-deck .w-agent{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);}
  .feat-deck .w-agent .ic svg{width:13px;height:13px;}
  .feat-deck .w-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:600;color:#5b6068;letter-spacing:.02em;flex-shrink:0;background:#E6E7EB;}
  .feat-deck .w-r2{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:2px;}
  .feat-deck .w-cust{color:var(--app-t1);font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .feat-deck .w-amt{color:var(--app-t1);font-size:13px;font-weight:600;flex-shrink:0;}
  .feat-deck .w-desc{color:var(--app-t3);font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .feat-deck .w-desc.warn{color:var(--rose);}
  .feat-deck .w-r4{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
  .feat-deck .w-prio{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(0,0,0,.045);border:1px solid rgba(0,0,0,.08);flex-shrink:0;}
  .feat-deck .w-prio svg{display:block;}
  .feat-deck .w-prio rect{fill:#d4d6da;}
  .feat-deck .w-prio-low rect:nth-child(1){fill:#5b6068;}
  .feat-deck .w-prio-medium rect:nth-child(1), .feat-deck .w-prio-medium rect:nth-child(2){fill:#5b6068;}
  .feat-deck .w-prio-high rect{fill:#5b6068;}
  .feat-deck .w-prio-none rect{fill:#d4d6da;opacity:.55;}
  .feat-deck .w-aging{color:var(--app-t3);font-size:11.5px;font-weight:500;}
  .feat-deck .gi{display:flex;min-width:0;flex:1;}
  .feat-deck .gi-msg{flex:1;display:flex;flex-direction:column;min-width:0;}
  .feat-deck .gi-msg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--app-line2);}
  .feat-deck .gi-bc{font-size:11px;color:var(--app-t3);}
  .feat-deck .gi-bc b{color:var(--app-t1);font-weight:600;}
  .feat-deck .gi-acts{display:flex;gap:14px;color:var(--app-t3);}
  .feat-deck .gi-acts .ic svg{width:15px;height:15px;}
  .feat-deck .gi-msg-body{padding:18px 22px;flex:1;overflow:hidden;}
  .feat-deck .gi-subj{font-size:16px;font-weight:600;color:var(--app-t1);margin:0 0 5px;}
  .feat-deck .gi-from{font-size:11.5px;color:var(--app-t3);margin-bottom:14px;}
  .feat-deck .gi-text{font-size:13px;color:var(--app-t2);line-height:1.65;margin-bottom:12px;max-width:none;}
  .feat-deck .gi-act-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--app-t3);border-top:1px solid var(--app-line2);padding-top:16px;margin-bottom:13px;}
  .feat-deck .gi-act{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:12.5px;color:var(--app-t2);line-height:1.5;}
  .feat-deck .gi-act .ico{width:20px;height:20px;border-radius:5px;background:#F1F2F5;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;color:var(--app-t2);}
  .feat-deck .gi-act .ico.g{background:rgba(38,181,116,.12);color:var(--green);}
  .feat-deck .gi-act .ico .ic svg{width:11px;height:11px;}
  .feat-deck .gi-act b{color:var(--app-t1);font-weight:600;}
  .feat-deck .gi-draft{margin-top:6px;background:#F4F5FC;border:1px solid rgba(91,124,255,.24);border-radius:9px;padding:14px 16px;max-width:none;}
  .feat-deck .gi-draft .dl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
  .feat-deck .gi-draft .dl .ic svg{width:11px;height:11px;}
  .feat-deck .gi-draft .dt{font-size:12.5px;color:var(--app-t2);line-height:1.6;margin-bottom:11px;}
  .feat-deck .gi-attach{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--app-t2);background:#fff;border:1px solid var(--app-line);border-radius:6px;padding:5px 9px;margin-bottom:13px;}
  .feat-deck .gi-attach .ic{color:var(--app-t3);}
  .feat-deck .gi-attach .ic svg{width:12px;height:12px;}
  .feat-deck .gi-reply{margin-top:18px;border:1px solid var(--app-line);border-radius:10px;background:#fff;padding:12px 14px 9px;}
  .feat-deck .gi-reply .ph{font-size:12.5px;color:var(--app-t3);}
  .feat-deck .gi-reply .rrow{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
  .feat-deck .gi-reply .rtools{display:flex;align-items:center;gap:14px;color:var(--app-t3);}
  .feat-deck .gi-reply .rtools .ic svg{width:15px;height:15px;}
  .feat-deck .gi-reply .ask-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--accent);background:#EAF0FF;border:1px solid rgba(91,124,255,.22);border-radius:999px;padding:3px 9px;}
  .feat-deck .gi-reply .ask-pill svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .feat-deck .gi-reply .rsend{width:28px;height:28px;border-radius:50%;background:#EAEBEE;color:var(--app-t3);display:flex;align-items:center;justify-content:center;}
  .feat-deck .gi-reply .rsend .ic svg{width:13px;height:13px;}
  .feat-deck .gi-send{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:7px 13px;border-radius:7px;}
  .feat-deck .gi-send .ic svg{width:12px;height:12px;}
  .feat-deck .gi-draft .df{display:flex;justify-content:flex-end;align-items:center;gap:14px;}
  .feat-deck .gi-draft .edit{font-size:11.5px;color:var(--app-t3);}
  .feat-deck .gi-props{width:188px;flex:none;border-left:1px solid var(--app-line2);background:#FAFBFC;padding:16px 16px;}
  .feat-deck .gi-pr{margin-bottom:14px;}
  .feat-deck .gi-pk{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-t3);margin-bottom:4px;}
  .feat-deck .gi-pv{font-size:12.5px;color:var(--app-t1);font-weight:500;display:flex;align-items:center;gap:6px;}
  .feat-deck .gi-pv .d{width:6px;height:6px;border-radius:50%;flex:none;}
  .feat-deck .ga{display:flex;flex-direction:column;min-width:0;flex:1;}
  .feat-deck .ga-stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0;}
  .feat-deck .ga-wrap{width:560px;max-width:82%;margin:0 auto;}
  .feat-deck .ga-h{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--app-t1);margin:0 0 18px;}
  .feat-deck .ga-box{position:relative;border:1px solid #E6E7EA;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(8,9,10,.04);padding:16px 16px 11px;}
  .feat-deck .ga-input{font-size:14px;color:var(--app-t2);line-height:1.55;}
  .feat-deck .ga-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
  .feat-deck .ga-tools{display:flex;align-items:center;gap:14px;color:var(--app-t3);}
  .feat-deck .ga-tools .ic svg{width:16px;height:16px;}
  .feat-deck .ga-send{width:30px;height:30px;border-radius:50%;background:#2a2c30;color:#fff;display:flex;align-items:center;justify-content:center;}
  .feat-deck .ga-send .ic svg{width:14px;height:14px;}
  .feat-deck .ga-menu{position:absolute;left:18px;top:calc(100% + 8px);width:260px;background:#fff;border:1px solid var(--app-line);border-radius:11px;box-shadow:0 18px 44px rgba(8,9,10,.17);padding:8px;z-index:5;}
  .feat-deck .ga-menu-lbl{font-size:10.5px;color:var(--app-t3);padding:4px 8px 6px;}
  .feat-deck .ga-mi{padding:7px 9px;border-radius:8px;font-size:13px;color:var(--app-t1);font-weight:450;}
  .feat-deck .ga-mi.on{background:#F5F6FB;}
  .feat-deck .ga-mi b{font-weight:700;}
  .feat-deck .ga-typing{color:var(--accent);font-weight:600;}
  .feat-deck .ga-caret{display:inline-block;width:1.5px;height:15px;background:var(--app-t1);vertical-align:-2px;margin-left:1px;animation:gacaret 1.1s steps(1) infinite;}
  @keyframes gacaret{50%{opacity:0;}}


/* ══════════════════════════════════════════════════════════════
   REVENUE AGENTS — bright hero (Quartr/Mercury bar). Warm-white,
   product-as-hero (light Workspace), soft shadow + blue ambient,
   quiet motion. Replaces the dark contained-card hero up top.
   ══════════════════════════════════════════════════════════════ */
.rah{--blue:#5B7CFF;position:relative;min-height:auto;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:150px 24px 96px;font-family:var(--font-sans);
  background:#FFFFFF;isolation:isolate;}
.rah::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(79,140,130,0.30),rgba(79,140,130,0.30)),#FFFFFF url('/assets/images/Generated%20Image%20June%2007,%202026%20-%205_40PM.jpg') center top / cover no-repeat;}
.rah::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) calc(30% + 50px),rgba(255,255,255,0.06) calc(40% + 50px),rgba(255,255,255,0.18) calc(50% + 50px),rgba(255,255,255,0.40) calc(60% + 50px),rgba(255,255,255,0.68) calc(70% + 50px),rgba(255,255,255,0.90) calc(77% + 50px),rgba(255,255,255,1) calc(83% + 50px),rgba(255,255,255,1) 100%);}
.rah-eyebrow,.rah-title,.rah-sub,.rah-cta,.rah-proof,.rah-stage{z-index:2;}
.rah .btn-primary{position:relative;z-index:2;margin-top:34px;background:#FFFFFF;color:#0A0A0A;text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:600;padding:15px 34px;border-radius:999px;box-shadow:none;}
.rah .btn-primary:hover{transform:translateY(-1px);background:#FFFFFF;box-shadow:0 14px 30px -12px rgba(10,10,12,.22);}
.rah-ambient{display:none;position:absolute;left:50%;top:60%;width:1100px;height:760px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(91,124,255,0.20), rgba(91,124,255,0) 70%);filter:blur(20px);
  pointer-events:none;animation:rahBreathe 7s ease-in-out infinite;}
@keyframes rahBreathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}}
.rah-eyebrow{position:relative;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:22px;}
.rah-title{position:relative;font-size:clamp(36px,4.6vw,58px);font-weight:600;line-height:1.05;letter-spacing:-.038em;color:#FFFFFF;text-align:left;margin:0;padding:0;}
.rah-sub{position:relative;font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:rgba(255,255,255,0.86);text-align:left;max-width:50ch;margin:28px 0 0;}
.rah-cta{position:relative;margin-top:34px;display:inline-flex;align-items:center;gap:9px;background:#0A0A0A;color:#fff;
  font-size:15px;font-weight:560;padding:14px 24px;border-radius:11px;text-decoration:none;transition:transform .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 28px -10px rgba(10,10,12,.45);}
.rah-cta:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.2),0 16px 36px -10px rgba(10,10,12,.5);}
.rah-cta svg{width:15px;height:15px;}
.rah-proof{position:relative;margin-top:30px;font-size:12.5px;letter-spacing:.04em;color:#9b9aa3;}
.rah-proof b{color:#6b6a73;font-weight:600;}
.rah-stage{position:relative;margin:22px auto 0;width:100%;max-width:1440px;height:834px;overflow:visible;background:none;}
.rah-stage::before{display:none;}
.rah-stage .qz{position:absolute;top:18px;left:50%;width:1180px;max-width:none;
  transform:translateX(-50%) scale(0.965);transform-origin:top center;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 2px 6px rgba(20,22,40,.06),
    0 40px 90px -30px rgba(30,40,90,.30),0 18px 40px -20px rgba(20,22,40,.18) !important;
  border-radius:14px !important;border:1px solid rgba(255,255,255,.8) !important;z-index:1;}
/* frosted glass frame around the hero app */
.rah-stage .rah-frame{position:absolute;top:0;left:48px;transform:scale(1.139);transform-origin:top left;z-index:1;padding:0;border-radius:14px;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;box-shadow:none;}
.rah-stage .rah-frame .qz{position:relative !important;top:auto !important;left:auto !important;transform:none !important;width:1180px;max-width:none;
  border-radius:14px !important;border:1px solid rgba(15,18,30,.08) !important;box-shadow:0 2px 6px rgba(15,18,30,.05),0 40px 80px -34px rgba(20,25,50,.30) !important;display:block;}

/* ── MOBILE — the 1180px-wide hero app frame can't shrink gracefully to
   sub-500px viewports without looking cramped or clipping. Hide it on
   phones; the hero text and tabs alone carry the section. The full app
   preview is still visible on tablet+ and desktop. */
@media (max-width:768px){
  .rah{padding:96px 18px 64px !important;}
  .rah-stage{display:none !important;}
  .rah-tabs{display:none !important;}
}

/* ── Capabilities grid (Planhat-style) ── */
/* Capabilities is the one off-white band on an otherwise white page */
.feat-section.cap-section { background: #FAFAF8; padding: 96px 0; }
.cap-block { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.cap-head { font-family: var(--sans, 'Inter', sans-serif); font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: #0A0A0A; line-height: 1.1; margin: 0 0 40px; max-width: 18ch; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 28px 26px; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.04); }
.cap-card h3 { font-family: var(--sans, 'Inter', sans-serif); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #0A0A0A; margin: 0 0 10px; }
.cap-card p { font-family: var(--font-ui, 'Inter', sans-serif); font-size: 14.5px; line-height: 1.55; color: #5b6068; margin: 0; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } }
/* ── Hero product-view tabs (Billing / Collection / Insights) ── */
.rah-tabs{position:relative;z-index:2;display:flex;gap:22px;justify-content:flex-start;width:100%;max-width:1440px;padding:0 48px;box-sizing:border-box;margin:64px auto 0;}
.rah-tab{position:relative;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.6);background:none;border:0;padding:6px 2px 4px;border-radius:0;cursor:pointer;transition:color .25s ease;}
.rah-tab:hover{color:#FFFFFF;}
.rah-tab.is-active{color:#FFFFFF;}
.rah-tab-bar{display:block;width:100%;height:2px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;opacity:0;transition:opacity .25s ease;}
.rah-tab.is-active .rah-tab-bar{opacity:1;}
.rah-tab-bar span{display:block;height:100%;width:0;background:#FFFFFF;border-radius:2px;}
@keyframes rah-timer{from{width:0;}to{width:100%;}}
.qz-view{display:none;}
.qz-view.is-active{display:block;}
/* Billing table */
.bz{padding:6px 4px 4px;}
.bz-row{display:grid;grid-template-columns:96px 1.6fr 70px 70px 112px 92px;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(0,0,0,.05);font-size:12.5px;color:#111316;}
.bz-row:last-child{border-bottom:0;}
.bz-head{font-family:var(--mono,'Space Mono',monospace);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9a9aa3;padding-top:6px;padding-bottom:10px;}
.bz-id{font-family:var(--mono,'Space Mono',monospace);font-size:11.5px;color:#5b6068;}
.bz-cust{font-weight:500;color:#111316;}
.bz-dim{color:#9a9aa3;}
.bz-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;}
.bz-st{text-align:right;}
.bz-badge{display:inline-block;font-size:10.5px;font-weight:500;padding:3px 9px;border-radius:999px;}
.bz-badge.paid{background:rgba(47,158,104,.12);color:#1f8a55;}
.bz-badge.sent{background:rgba(91,101,115,.10);color:#5B6573;}
.bz-badge.over{background:rgba(229,72,77,.12);color:#c2453f;}
.bz-badge.draft{background:rgba(0,0,0,.06);color:#6b6b73;}
/* Insights dashboard */
.iz-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 6px 8px;}
.iz-kpi{display:flex;flex-direction:column;gap:7px;padding:16px 16px 18px;border:1px solid rgba(0,0,0,.07);border-radius:12px;background:#fff;}
.iz-l{font-size:11px;color:#84878C;}
.iz-v{font-size:26px;font-weight:600;letter-spacing:-.02em;color:#0A0A0A;line-height:1;}
.iz-u{font-size:12px;font-weight:500;color:#9a9aa3;margin-left:4px;}
.iz-d{font-size:11px;font-weight:600;}
.iz-d.up{color:#1d8a55;}
.iz-d.down{color:#3F3DDB;}
.iz-chart{margin:12px 10px 8px;padding:18px 18px 14px;border:1px solid rgba(0,0,0,.07);border-radius:14px;background:#fff;}
.iz-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.iz-ct{font-size:13px;font-weight:600;color:#0A0A0A;}
.iz-legend{font-size:11px;color:#9a9aa3;}
.iz-bars{display:flex;align-items:flex-end;gap:12px;height:150px;}
.iz-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.iz-bar i{display:block;width:100%;max-width:34px;height:var(--h);background:rgba(10,10,10,.10);border-radius:5px 5px 0 0;}
.iz-bar.on i{background:#3F3DDB;}
.iz-bar em{font-style:normal;font-size:10px;color:#9a9aa3;}

/* Hero kanban: view fills the card so columns span the full width */
.rah-frame .qz-card{display:block;}
.rah-frame .qz-view.is-active{display:block;width:100%;}
.rah-frame .gk{width:100%;box-sizing:border-box;}
.rah-frame .gk-board{width:100%;box-sizing:border-box;}
.rah-frame .gk-col{flex:1 1 0;min-width:0;width:auto;}

/* Round the hero app card: clip inner panes to the frame's radius */
.rah-frame .qz{overflow:hidden;}
.rah-frame .qz-card{border-radius:0;}

/* Workspace as a floating, rounded card inside the app (grey base, gap on all sides incl. right) */
.rah-frame .qz-card{background:transparent;border:none;border-radius:0;padding:8px;box-shadow:none;margin:0;display:flex;flex-direction:column;min-height:0;}
.rah-frame .qz-view.is-active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;}
.rah-frame .gk{background:#ffffff;border:none;border-radius:12px;box-shadow:0 1px 2px rgba(16,18,40,.04),0 6px 16px -8px rgba(16,18,40,.10);overflow:hidden;flex:1 1 auto;}
.rah-frame .gk-board{flex:1 1 auto;}
.rah-frame .bz{flex:1 1 auto;}

/* ═══════════ BILLING WORKSPACE — enterprise rebuild ═══════════ */
.qz-view-billing svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.qz-view-billing .gk-head{padding:12px 16px 10px;}
/* KPI strip */
.bzx-kpis{display:grid;grid-template-columns:repeat(4,1fr);padding:11px 16px 13px;}
.bzx-kpi{display:flex;flex-direction:column;gap:5px;padding:0 16px;border-left:1px solid var(--app-line2);}
.bzx-kpi:first-child{border-left:0;padding-left:0;}
.bzx-kl{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--app-t3);}
.bzx-kv{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--app-t1);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;}
.bzx-kv.warn{color:#c2453f;}
.bzx-ku{font-size:10.5px;font-weight:500;color:var(--app-t3);}
.bzx-kd{font-size:9.5px;font-weight:600;}
.bzx-kd.up{color:#1d8a55;}.bzx-kd.down{color:#c2453f;}
/* Tabs + tools row */
.bzx-tabs{display:flex;align-items:center;gap:2px;padding:0 12px;border-bottom:1px solid var(--app-line2);}
.bzx-tab{font-family:var(--sans);font-size:9.5px;font-weight:500;color:var(--app-t3);background:transparent;border:0;border-bottom:1.5px solid transparent;padding:9px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px;}
.bzx-tab .bzx-tc{font-size:8px;font-weight:600;color:var(--app-t3);background:rgba(0,0,0,.05);border-radius:999px;padding:1px 6px;}
.bzx-tab .bzx-tc.warn{color:#c2453f;background:rgba(248,113,113,.14);}
.bzx-tab.is-on{color:var(--app-t1);font-weight:600;border-bottom-color:var(--app-t1);}
.bzx-tab.is-on .bzx-tc{color:var(--app-t2);background:rgba(0,0,0,.05);}
.bzx-tabs-r{margin-left:auto;display:flex;align-items:center;gap:8px;}
.bzx-search{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;color:var(--app-t3);background:#F4F5F7;border:1px solid var(--app-line);border-radius:7px;padding:4px 8px;}
.bzx-search svg{width:12px;height:12px;}
.bzx-search .kbd{margin-left:16px;font-family:var(--mono);font-size:8.5px;color:var(--app-t3);background:#fff;border:1px solid var(--app-line);border-radius:4px;padding:1px 4px;}
.bzx-toolbar{border-top:0;border-bottom:0;}
/* Split */
.bzx-split{display:flex;flex:1 1 auto;min-height:0;position:relative;}
.bzx-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.bzx-thead,.bzx-row{display:grid;grid-template-columns:20px 78px minmax(0,1fr) 96px 70px 78px;align-items:center;gap:10px;padding:0 16px;}
.bzx-thead{padding-top:9px;padding-bottom:8px;border-bottom:1px solid var(--app-line2);}
.bzx-thead span{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--app-t3);}
.bzx-thead .bzx-rt{text-align:right;}.bzx-thead .ctr{text-align:center;}
.bzx-ck{width:13px;height:13px;border:1.5px solid #c9ccd2;border-radius:4px;box-sizing:border-box;}
.bzx-ck.on{background:var(--accent);border-color:var(--accent);position:relative;}
.bzx-ck.on::after{content:'';position:absolute;left:3px;top:1px;width:3.5px;height:6.5px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.bzx-ghead{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#F3F4F6;border-top:1px solid #EAEBEE;border-bottom:1px solid #EAEBEE;font-size:9.5px;}
.bzx-gchev{width:11px;height:11px;color:var(--app-t3);flex:none;}
.bzx-gdot{width:8px;height:8px;border-radius:50%;flex:none;}
.bzx-gdot.over{background:var(--rose);}.bzx-gdot.draft{background:#9aa0a8;}.bzx-gdot.sent{background:var(--accent);}.bzx-gdot.paid{background:var(--green);}
.bzx-gname{font-weight:600;color:var(--app-t1);}
.bzx-gc{font-size:8px;font-weight:600;color:var(--app-t3);background:rgba(0,0,0,.05);border-radius:999px;padding:1px 6px;}
.bzx-gtot{margin-left:auto;font-size:9.5px;font-weight:500;color:var(--app-t2);font-variant-numeric:tabular-nums;}
.bzx-row{height:29px;font-size:9.5px;color:var(--app-t1);}
.bzx-row.is-sel{background:#F4F5F7;box-shadow:inset 2px 0 0 #c9ccd2;}
.bzx-inv{font-family:var(--mono);font-size:9px;color:var(--app-t3);display:inline-flex;align-items:center;gap:5px;}
.bzx-ai{color:var(--accent);display:inline-flex;}.bzx-ai svg{width:11px;height:11px;}
.bzx-cust{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:500;color:var(--app-t1);}
.bzx-group:first-child .bzx-ghead{border-top:0;}
.bzx-cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bzx-amt{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;}
.bzx-coll{display:flex;justify-content:center;}
.bzx-bar{width:46px;height:4px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;}
.bzx-bar i{display:block;height:100%;border-radius:999px;background:var(--green);}
.bzx-dash{color:#c9ccd2;}
.bzx-due{text-align:right;font-size:9px;color:var(--app-t2);line-height:1.18;font-variant-numeric:tabular-nums;}
.bzx-due em{display:block;font-style:normal;font-size:7.5px;color:var(--app-t3);}
.bzx-due em.late{color:#c2453f;}
/* Footer */
.bzx-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--app-line2);font-size:9px;color:var(--app-t3);}
.bzx-pg{display:inline-flex;align-items:center;gap:2px;}
.bzx-pg b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;font-weight:500;color:var(--app-t2);}
.bzx-pg b.on{background:var(--accent);color:#fff;}
/* Peek panel */
.bzx-peek{width:316px;flex:none;border-left:1px solid var(--app-line);background:#FCFCFD;padding:12px 16px 10px;display:flex;flex-direction:column;overflow:hidden;}
.bzx-bc{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--app-t3);}
.bzx-bc svg{width:11px;height:11px;}
.bzx-bc b{color:var(--app-t1);font-weight:600;font-family:var(--mono);font-size:10.5px;}
.bzx-pk-amt{display:flex;align-items:center;gap:9px;margin:8px 0 3px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--app-t1);font-variant-numeric:tabular-nums;}
.bzx-pk-meta{font-size:11px;color:var(--app-t3);}
.bzx-sec{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--app-t3);margin:13px 0 6px;}
.bzx-f{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:11px;}
.bzx-fl{color:var(--app-t3);}
.bzx-fv{color:var(--app-t1);font-weight:500;display:inline-flex;align-items:center;gap:6px;}
.bzx-fav{width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.bzx-time{position:relative;margin-left:3px;padding-left:15px;}
.bzx-time::before{content:'';position:absolute;left:3px;top:6px;bottom:12px;width:1.5px;background:var(--app-line);}
.bzx-step{position:relative;display:flex;align-items:baseline;justify-content:space-between;padding:3px 0;}
.bzx-step .dot{position:absolute;left:-15px;top:3px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #c9ccd2;box-sizing:border-box;}
.bzx-step.done .dot{background:var(--green);border-color:var(--green);}
.bzx-step .sl{font-size:11px;color:var(--app-t1);font-weight:500;}
.bzx-step.todo .sl{color:var(--app-t3);font-weight:400;}
.bzx-step .sd{font-size:10px;color:var(--app-t3);font-variant-numeric:tabular-nums;}
/* AI context menu (Planhat-style) */
.bzx-menu{position:absolute;top:150px;right:40px;width:206px;background:#fff;border:1px solid var(--app-line);border-radius:11px;box-shadow:0 10px 30px -6px rgba(15,18,24,.24),0 2px 6px rgba(15,18,24,.06);padding:5px;z-index:5;}
.bzx-mi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;font-size:11.5px;color:var(--app-t1);}
.bzx-mi svg{width:13px;height:13px;color:var(--app-t2);flex:none;}
.bzx-mi.ai svg{color:var(--accent);}
.bzx-mi .tag{margin-left:auto;font-size:8px;font-weight:500;letter-spacing:.02em;color:var(--accent);background:rgba(91,124,255,.10);border-radius:999px;padding:2px 6px;display:inline-flex;align-items:center;gap:3px;}
.bzx-mi .tag svg{color:var(--accent);}
.bzx-msep{height:1px;background:var(--app-line2);margin:4px 6px;}

/* ══════════════════════════════════════════════════════════════
   ILLUSTRATION SYSTEM — monoline figures in the stone containers.
   Replaces the literal app mockups in the body feature rows.
   Scoped under .feat-visual.illus so the bare class names are safe.
   ══════════════════════════════════════════════════════════════ */
.feat-deck .feat-visual.illus{display:flex;align-items:center;justify-content:center;padding:0;height:520px;}
.feat-deck .feat-visual.illus > svg{width:76%;height:auto;overflow:visible;}
.feat-visual.illus .surf{fill:#fff;stroke:#E4E6EA;stroke-width:1.5;}
.feat-visual.illus .bar{fill:#D8DBE0;}
.feat-visual.illus .bar-d{fill:#BCC0C7;}
.feat-visual.illus .acc{fill:none;stroke:#5B7CFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat-visual.illus .acc-f{fill:#5B7CFF;}
.feat-visual.illus .ln{fill:none;stroke:#1A1C1E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat-visual.illus .ln-2{fill:none;stroke:#A4A9B0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat-visual.illus .soft{filter:drop-shadow(0 18px 30px rgba(22,30,60,.16));}
@keyframes il-draw{to{stroke-dashoffset:0;}}
@keyframes il-blink{50%{opacity:0;}}
@keyframes il-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.feat-visual.illus .caret{animation:il-blink 1.15s steps(1) infinite;}
.feat-visual.illus .check{stroke-dasharray:26;stroke-dashoffset:26;animation:il-draw 1.1s .5s ease forwards;}
.feat-visual.illus .reply{opacity:0;animation:il-rise 1s .35s ease forwards;}
.feat-visual.illus .connect{stroke-dasharray:200;stroke-dashoffset:200;animation:il-draw 1.8s .2s ease forwards;}
@media (prefers-reduced-motion: reduce){
  .feat-visual.illus .caret,.feat-visual.illus .check,.feat-visual.illus .reply,.feat-visual.illus .connect,
  .feat-visual.illus [style*="il-rise"]{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important;transform:none !important;}
}
/* one-sentence body under the feature headline */
.feat-deck .feat-copy .feat-sub{font-size:14px;line-height:1.62;color:#43464B;margin:0 0 18px;max-width:38ch;}

/* ══════════════════════════════════════════════════════════════
   AFTER THE HERO — The shift + How it works (benefit-led intro)
   ══════════════════════════════════════════════════════════════ */
/* one spine: 1200px max-width, 32px gutters, matching .ra-part-inner */
.ra-shift{padding:100px 0 80px;}
.ra-shift-in{max-width:1440px;margin:0 auto;padding:0 48px;}
.ra-shift-h{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:14px 0 18px;max-width:26ch;color:#16181B;}
.ra-shift-p{font-size:16px;line-height:1.7;color:#43464B;max-width:64ch;margin:0 0 52px;}
.ra-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #E3E5E9;}
.ra-stat{padding:30px 32px 6px 0;border-right:1px solid #E3E5E9;}
.ra-stat:last-child{border-right:none;padding-right:0;}
.ra-stat-v{display:block;font-size:clamp(32px,3.4vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1;color:#16181B;font-variant-numeric:tabular-nums;}
.ra-stat-l{display:block;font-size:13.5px;line-height:1.45;color:#84878C;margin-top:14px;max-width:24ch;}
.ra-how{padding:80px 0 80px;}
.ra-how-in{max-width:1440px;margin:0 auto;padding:0 48px;}
.ra-how-h{font-size:clamp(24px,2.8vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.14;margin:14px 0 40px;max-width:24ch;color:#16181B;}
.ra-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:start;}
.ra-step{border-top:2px solid #16181B;padding-top:16px;}
.ra-step-n{font-family:'Space Mono',monospace;font-size:12px;color:#5B7CFF;font-weight:600;}
.ra-step p{font-size:15px;line-height:1.5;color:#43464B;margin:10px 0 0;}
.ra-how-foot{font-size:13px;color:#84878C;margin:36px 0 0;}
@media (max-width:780px){
  .ra-shift{padding:64px 0 48px;}.ra-how{padding:48px 0 56px;}
  .ra-shift-in,.ra-how-in{padding:0 24px;}
  .ra-stats,.ra-steps{grid-template-columns:1fr;}
  .ra-stat{border-right:none;border-bottom:1px solid #E3E5E9;padding:20px 0 16px;}
  .ra-stat:last-child{border-bottom:none;}
}

/* Left-aligned hero header with CTA at right (Quartr-style) */
.rah .rah-head{position:relative;z-index:2;width:100%!important;max-width:1440px;margin:0 auto;padding:0 48px;box-sizing:border-box;display:flex!important;flex-direction:row!important;align-items:flex-end;justify-content:space-between;gap:48px;}
.rah .rah-head-l{flex:1 1 auto;min-width:0;}
.rah .rah-cta-btn{flex:none;margin-top:0 !important;white-space:nowrap;align-self:flex-end;}
@media (max-width:820px){.rah .rah-head{flex-direction:column!important;align-items:flex-start;gap:20px;}.rah .rah-head-l{max-width:100%;}.rah .rah-cta-btn{align-self:flex-start;}}

/* ══════════════════════════════════════════════════════════════
   DETAILED ILLUSTRATION VIGNETTES (.gv) — labeled mini-UI cards in
   the stone containers (Mimo/Planhat reference). Page-scoped, gv- prefix.
   ══════════════════════════════════════════════════════════════ */
.feat-visual.illus .gv{width:84%;max-width:438px;font-family:'Inter',-apple-system,sans-serif;}
.feat-visual.illus .gv svg{display:block;}
.gv-card{background:#fff;border:1px solid #ECEEF1;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 20px 44px -20px rgba(16,24,40,.30);overflow:hidden;}
.gv-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid #F2F3F5;}
.gv-ic{width:32px;height:32px;border-radius:9px;background:#EAF0FF;color:#5B7CFF;display:flex;align-items:center;justify-content:center;flex:none;}
.gv-ic svg{width:17px;height:17px;}
.gv-ht{min-width:0;}
.gv-t{font-size:13.5px;font-weight:600;line-height:1.2;color:#16181B;}
.gv-s{font-size:11.5px;color:#80858C;margin-top:2px;}
.gv-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#5B7CFF;background:#EAF0FF;border-radius:999px;padding:4px 10px;}
.gv-badge svg{width:11px;height:11px;}
.gv-tag{margin-left:auto;font-size:11px;font-weight:600;color:#A86A12;background:#FBF0DB;border-radius:7px;padding:3px 9px;}
.gv-rows{padding:6px;}
.gv-row{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:10px;}
.gv-row + .gv-row{border-top:1px solid #F3F4F6;}
.gv-row.matched{background:#F4FAF7;border:1px solid #DCEFE5;margin:4px;}
.gv-mic{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid #E4E6EA;color:#80858C;display:flex;align-items:center;justify-content:center;flex:none;}
.gv-mic svg{width:14px;height:14px;}
.gv-rl{font-size:12.5px;font-weight:500;color:#16181B;display:flex;flex-direction:column;}
.gv-sub{font-size:11px;color:#80858C;font-weight:400;margin-top:1px;}
.gv-rc{display:flex;flex-direction:column;min-width:0;}
.gv-rt{font-size:12.5px;font-weight:500;color:#16181B;}
.gv-amt{margin-left:auto;font-size:12.5px;font-weight:600;color:#16181B;font-variant-numeric:tabular-nums;}
.gv-amt.pos{color:#16A36B;}
.gv-pill{margin-left:auto;font-size:11px;font-weight:600;color:#5B7CFF;background:#EAF0FF;border-radius:999px;padding:3px 10px;}
.gv-chk{width:19px;height:19px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
.gv-chk.done{background:#16A36B;color:#fff;}
.gv-chk.done svg{width:11px;height:11px;}
.gv-chk.pend{border:1.5px solid #CDD1D7;}
.gv-list{padding:8px 10px 4px;}
.gv-li{display:flex;align-items:center;gap:11px;padding:9px 6px;}
.gv-li + .gv-li{border-top:1px solid #F3F4F6;}
.gv-ai{width:22px;height:22px;border-radius:6px;background:#EAF0FF;color:#5B7CFF;display:flex;align-items:center;justify-content:center;flex:none;}
.gv-ai svg{width:12px;height:12px;}
.gv-lt{font-size:12.5px;color:#43464B;flex:1;}
.gv-av{width:22px;height:22px;border-radius:50%;background:#E7E9ED;color:#5b6068;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;}
.gv-foot{padding:6px 12px 14px;}
.gv-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;background:#5B7CFF;border:none;border-radius:9px;padding:9px 14px;}
.gv-btn svg{width:12px;height:12px;}
.gv-btn.xs{margin-left:10px;padding:5px 11px;font-size:11px;border-radius:7px;}
.gv-btn.ghost{background:#fff;color:#43464B;border:1px solid #E2E4E8;}

/* extra vignette bits for revrec/portal */
.gv-pay{padding:10px 12px 14px;}
.gv-method{display:flex;align-items:center;gap:8px;font-size:12px;color:#43464B;padding:8px 10px;border:1px solid #E6E8EC;border-radius:9px;margin-bottom:10px;}
.gv-mdot{width:9px;height:9px;border-radius:50%;background:#5B7CFF;box-shadow:0 0 0 3px rgba(91,124,255,.14);flex:none;}
.gv-btn-wide{width:100%;justify-content:center;}

/* ══════════════════════════════════════════════════════════════
   TWO-PART ACCORDION (Product page) — Billing + Collection CRM.
   Planhat-style: folds on one side, swapping illustration on the other.
   ══════════════════════════════════════════════════════════════ */
.ra-part{padding:96px 0;background:#F9FAFB;}
.ra-part-inner{max-width:1440px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.ra-part.rev .ra-folds{order:2;}
.ra-folds .feat-eyebrow{display:block;margin-bottom:12px;}
.ra-part-h{font-size:clamp(24px,2.5vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.14;color:#16181B;margin:0 0 26px;max-width:18ch;}
.fold{border-top:1px solid #E7E9ED;}
.fold:last-child{border-bottom:1px solid #E7E9ED;}
.fold-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;padding:17px 2px;cursor:pointer;text-align:left;font-family:inherit;}
.fold-t{font-size:17px;font-weight:600;letter-spacing:-.01em;color:#9aa0a8;transition:color .2s ease;}
.fold.is-open .fold-t{color:#16181B;}
.fold-ic{width:20px;height:20px;flex:none;position:relative;color:#bcc0c6;transition:color .2s ease;}
.fold.is-open .fold-ic{color:#5B7CFF;}
.fold-ic::before,.fold-ic::after{content:'';position:absolute;background:currentColor;border-radius:2px;}
.fold-ic::before{top:9px;left:3px;width:14px;height:2px;}
.fold-ic::after{top:3px;left:9px;width:2px;height:14px;transition:transform .25s ease,opacity .2s ease;}
.fold.is-open .fold-ic::after{transform:scaleY(0);opacity:0;}
.fold-body{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.fold.is-open .fold-body{max-height:220px;}
.fold-body p{font-size:14px;line-height:1.62;color:#5b6068;margin:0;padding:0 2px 20px;max-width:44ch;}
/* the swapping stone stage */
.ra-stage{position:relative;height:480px;border-radius:14px;overflow:visible;
  background:transparent;
  box-shadow:none;
  display:flex;align-items:center;justify-content:center;}
.ra-stage .illus-slot{display:none;width:100%;align-items:center;justify-content:center;}
.ra-stage .illus-slot.is-active{display:flex;animation:il-rise .5s ease;}
@media (max-width:880px){
  .ra-part-inner{grid-template-columns:1fr;gap:30px;}
  .ra-part.rev .ra-folds{order:0;}
  .ra-stage{height:400px;order:-1;}
}
.ra-stage .gv{width:84%;max-width:438px;font-family:'Inter',-apple-system,sans-serif;}
.ra-stage .gv svg{display:block;}
/* Lock hero app to a fixed height so Billing & Collection are identical size */
.rah-frame .qz-grid{height:716px;min-height:716px;}
.rah-frame .qz{overflow:hidden;}

/* Smart dunning — stacked deck of reminders and replies */
.gv-dun{width:84%;max-width:420px;}
.dun-stack{display:flex;flex-direction:column;align-items:center;}
.dun-row{display:flex;align-items:center;gap:11px;width:84%;background:#fff;border:1px solid #ECEEF1;border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(16,24,40,.05);position:relative;}
.dun-row + .dun-row{margin-top:-7px;}
.dun-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none;}
.dun-ic svg{width:14px;height:14px;}
.dun-ic.ag{background:#EAF0FF;color:#5B7CFF;}
.dun-ic.re{background:#EFF0F2;color:#6b7280;}
.dun-ic.dn{background:#E7F5EE;color:#16A36B;}
.dun-t{font-size:12.5px;font-weight:500;color:#16181B;display:flex;flex-direction:column;min-width:0;}
.dun-s{font-size:10.5px;color:#9aa0a8;font-weight:400;margin-top:1px;}
.dun-badge{margin-left:auto;font-size:10px;font-weight:600;color:#5B7CFF;background:#EAF0FF;border-radius:999px;padding:2px 8px;flex:none;}
.dun-row.d1{opacity:.62;transform:scale(.955);z-index:1;}
.dun-row.d2{opacity:.34;transform:scale(.91);z-index:0;}
.dun-row.active{width:96%;box-shadow:0 16px 34px -14px rgba(20,30,60,.30),0 2px 6px rgba(20,30,60,.06);border-color:rgba(91,124,255,.35);z-index:3;}

/* ═══════════ SCANDINAVIAN BILLING OVERVIEW (Mimo-style) ═══════════ */
.qz-view-billing .bzx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 18px 11px;border-bottom:1px solid rgba(17,19,23,.045);}
.bzx-titlerow{display:flex;align-items:center;gap:10px;}
.bzx-title{font-size:14px;font-weight:600;letter-spacing:-.022em;color:var(--app-t1);}
.bzx-chip-status{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:500;color:var(--app-t2);background:#F2F2EE;border:1px solid var(--app-line);border-radius:999px;padding:3px 10px;}
.bzx-chip-status .dot{width:6px;height:6px;border-radius:50%;background:var(--app-t3);}
.bzx-meta{font-size:9.5px;color:var(--app-t3);margin-top:6px;}
.bzx-head-r{display:flex;align-items:center;gap:8px;flex:none;}
.bzx-btn-ghost{font-size:10px;font-weight:500;color:var(--app-t2);background:#fff;border:1px solid var(--app-line);border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap;}
.bzx-btn-primary{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;color:#fff;background:#1F2329;border:none;border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(16,18,22,.22);}
.bzx-btn-primary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
/* overview cards */
.bzo-cards{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;padding:12px 18px 10px;}
.bzo-card{border:1px solid var(--app-line);border-radius:12px;padding:11px 14px;background:#fff;}
.bzo-h{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:600;color:var(--app-t1);margin-bottom:7px;}
.bzo-period{font-size:9px;font-weight:500;color:var(--app-t3);}
.bzo-ai-pill{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:600;letter-spacing:.02em;color:var(--accent);background:rgba(91,124,255,.10);border-radius:999px;padding:2px 7px;}
.bzo-ai-pill svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:1.8;}
.bzo-p{font-size:10px;line-height:1.5;color:var(--app-t2);margin:0 0 6px;}
.bzo-p:last-child{margin-bottom:0;}
.bzo-p b{color:var(--app-t1);font-weight:600;}
.bzo-metric{display:flex;align-items:center;padding:4.5px 0;border-bottom:1px solid var(--app-line2);}
.bzo-metric:last-child{border-bottom:0;}
.bzo-ml{font-size:10px;color:var(--app-t2);flex:1;}
.bzo-mv{font-size:11px;font-weight:600;color:var(--app-t1);font-variant-numeric:tabular-nums;margin-right:10px;}
.bzo-md{font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;min-width:58px;text-align:right;}
.bzo-md.up{color:var(--green);}
.bzo-md.down{color:var(--rose);}
/* AI banner */
.bzo-ai-banner{display:flex;align-items:center;gap:11px;margin:0 18px 10px;padding:7px 13px;border:1px solid var(--app-line);border-radius:10px;background:linear-gradient(90deg,rgba(91,124,255,.05),rgba(91,124,255,0) 55%),#FCFCFD;}
.bzo-ai-banner .ic{display:inline-flex;color:var(--accent);flex:none;}
.bzo-ai-banner .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.bzo-ai-txt{flex:1;font-size:10px;color:var(--app-t2);}
.bzo-ai-txt b{color:var(--app-t1);font-weight:600;}
/* sidebar workspace switcher */
.gs-ws{display:flex;align-items:center;gap:8px;margin:0 6px 12px;padding:7px 9px;border:1px solid var(--app-line);border-radius:9px;background:#fff;font-size:11px;font-weight:500;color:var(--app-t1);cursor:pointer;}
.gs-ws .ws-mk{width:18px;height:18px;border-radius:5px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.gs-ws .ws-ch{margin-left:auto;color:var(--app-t3);display:inline-flex;}
.gs-ws .ws-ch svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat-deck .gs-nav a.on .ic{color:var(--app-t1);}

/* Export icon pill */
.bzx-icon-btn{width:28px;height:28px;border:1px solid var(--app-line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--app-t2);background:#fff;cursor:pointer;}
.bzx-icon-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ═══════════ COLLECTION PORTFOLIO (Planhat-style account table) ═══════════ */
.qz-view-collection svg{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.pf-split{display:flex;flex:1 1 auto;min-height:0;position:relative;}
.pf-list{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.pf-thead,.pf-row{display:grid;grid-template-columns:16px 30px minmax(0,1fr) 84px 74px 40px 40px 96px 24px;align-items:center;gap:9px;padding:0 14px;}
.pf-thead{padding-top:8px;padding-bottom:7px;border-bottom:1px solid var(--app-line2);}
.pf-thead span{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--app-t3);}
.pf-thead .rt{text-align:right;}.pf-thead .ct{text-align:center;}
.pf-group{display:flex;flex-direction:column;}
.pf-ghead{display:flex;align-items:center;gap:8px;padding:6px 14px;background:#F3F4F6;border-top:1px solid #EAEBEE;border-bottom:1px solid #EAEBEE;font-size:9.5px;}
.pf-gchev{width:10px;height:10px;color:var(--app-t3);flex:none;}
.pf-gdot{width:7px;height:7px;border-radius:2px;flex:none;}
.pf-gname{font-weight:600;color:var(--app-t1);}
.pf-gc{font-size:8.5px;font-weight:600;color:var(--app-t3);background:rgba(0,0,0,.05);border-radius:999px;padding:1px 6px;}
.pf-gsum{margin-left:auto;font-size:9.5px;color:var(--app-t2);font-variant-numeric:tabular-nums;}
.pf-gsum b{color:var(--app-t1);font-weight:600;}
.pf-row{height:31px;border-bottom:1px solid var(--app-line2);font-size:9.5px;color:var(--app-t1);}
.pf-row.is-sel{background:#F4F5F7;box-shadow:inset 2px 0 0 #c9ccd2;}
.pf-ck{width:12px;height:12px;border:1.5px solid #c9ccd2;border-radius:4px;box-sizing:border-box;}
.pf-ck.on{background:var(--accent);border-color:var(--accent);position:relative;}
.pf-ck.on::after{content:'';position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.pf-health{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid;box-sizing:border-box;}
.pf-health.g{color:#1f8a55;border-color:rgba(47,158,104,.55);background:rgba(47,158,104,.07);}
.pf-health.a{color:#b3791f;border-color:rgba(198,138,51,.55);background:rgba(198,138,51,.07);}
.pf-health.r{color:#bf4039;border-color:rgba(192,70,63,.55);background:rgba(192,70,63,.07);}
.pf-acct{font-weight:500;color:var(--app-t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;}
.pf-over{text-align:right;font-variant-numeric:tabular-nums;color:#bf4039;}
.pf-over.zero{color:var(--app-t3);}
.pf-dso{text-align:right;font-variant-numeric:tabular-nums;color:var(--app-t2);}
.pf-cases{display:flex;justify-content:center;}
.pf-cases .b{min-width:15px;height:15px;border-radius:5px;background:rgba(0,0,0,.05);color:var(--app-t2);font-size:8.5px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;font-variant-numeric:tabular-nums;}
.pf-cases .b.zero{background:transparent;color:#cfd2d6;}
.pf-stage{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:500;color:var(--app-t2);white-space:nowrap;}
.pf-stage .d{width:6px;height:6px;border-radius:50%;flex:none;}
.pf-av{width:19px;height:19px;border-radius:50%;background:#E7E9ED;color:#5b6068;font-size:7.5px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.pf-foot{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-top:1px solid var(--app-line2);font-size:9px;color:var(--app-t3);}
/* detail panel */
.pf-detail{width:300px;flex:none;border-left:1px solid var(--app-line);background:#FCFCFD;padding:12px 14px;display:flex;flex-direction:column;overflow:hidden;}
.pfd-bc{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--app-t3);}
.pfd-bc svg{width:9px;height:9px;}
.pfd-bc b{color:var(--app-t1);font-weight:600;}
.pfd-acct{display:flex;align-items:center;gap:9px;margin:9px 0 2px;}
.pfd-acct .pf-health{width:28px;height:28px;font-size:11px;}
.pfd-nm{font-size:14px;font-weight:600;letter-spacing:-.012em;color:var(--app-t1);line-height:1.1;}
.pfd-seg{font-size:9px;color:var(--app-t3);margin-top:2px;}
.pfd-sec{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--app-t3);margin:13px 0 5px;display:flex;align-items:center;justify-content:space-between;}
.pfd-f{display:flex;align-items:center;justify-content:space-between;padding:3.5px 0;font-size:10px;}
.pfd-fl{color:var(--app-t3);}.pfd-fv{color:var(--app-t1);font-weight:500;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:5px;}
.pfd-ai{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:600;color:var(--accent);background:rgba(91,124,255,.10);border-radius:999px;padding:1px 6px;}
.pfd-ai svg{width:8px;height:8px;}
.pfd-case{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--app-line2);}
.pfd-cid{font-family:var(--mono);font-size:8.5px;color:var(--app-t3);min-width:54px;}
.pfd-cm{font-size:10px;font-weight:600;color:var(--app-t1);font-variant-numeric:tabular-nums;}
.pfd-ct{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;color:var(--app-t2);}
.pfd-ct .d{width:5px;height:5px;border-radius:50%;}
/* AR chart */
.pfd-rng{display:flex;gap:2px;}
.pfd-rng span{font-size:8px;font-weight:500;color:var(--app-t3);padding:2px 6px;border-radius:5px;cursor:pointer;}
.pfd-rng span.on{color:var(--app-t1);background:rgba(0,0,0,.05);}
.pfd-chart svg{width:100%;height:auto;display:block;}
.pfd-legend{display:flex;gap:14px;margin-top:7px;font-size:8.5px;color:var(--app-t3);}
.pfd-legend i{width:9px;height:2px;display:inline-block;margin-right:5px;vertical-align:middle;border-radius:2px;}

/* ── Billing: cursor dragging contracts onto a frosted drop zone ── */
.qz-view-billing .gk{position:relative;}
.bzx-dropzone{position:absolute;inset:0;z-index:8;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.bzx-dz-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px 46px;border:1.5px dashed #C4C9D6;border-radius:16px;background:rgba(255,255,255,.45);}
.bzx-dz-ic{width:36px;height:36px;border-radius:11px;background:rgba(91,124,255,.10);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.bzx-dz-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.bzx-dz-h{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--app-t1);}
.bzx-dz-s{font-size:10px;color:var(--app-t3);}
.bzx-drag{position:absolute;top:30%;left:50%;transform:translateX(-60%);z-index:6;pointer-events:none;}
.bzx-pdfs{position:relative;width:46px;height:64px;}
.bzx-pdf{position:absolute;left:0;top:0;width:46px;height:64px;box-sizing:border-box;background:#fff;border:1px solid #E3E5E9;border-radius:4px;box-shadow:0 7px 20px -6px rgba(16,18,40,.26);padding:7px 6px;overflow:hidden;}
.bzx-pdf-tag{display:inline-block;font-size:5px;font-weight:700;color:#fff;background:#C0463F;border-radius:2px;padding:1px 3px;letter-spacing:.05em;}
.bzx-pdf-lines{margin-top:5px;display:flex;flex-direction:column;gap:3px;}
.bzx-pdf-lines i{height:2px;border-radius:1px;background:#E4E6EA;display:block;}
.bzx-pdf-lines i:nth-child(1){width:78%;height:2.5px;background:#CFD2D8;}
.bzx-pdf-lines i:nth-child(2){width:100%;}.bzx-pdf-lines i:nth-child(3){width:90%;}
.bzx-pdf-lines i:nth-child(4){width:96%;}.bzx-pdf-lines i:nth-child(5){width:55%;}
.bzx-pdf.b1{transform:rotate(3deg);z-index:3;}
.bzx-pdf.b2{transform:translate(-7px,-5px) rotate(-4deg);z-index:2;}
.bzx-pdf.b3{transform:translate(-13px,-11px) rotate(-9deg);z-index:1;}
.bzx-pdf-badge{position:absolute;top:-8px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -1px rgba(91,124,255,.5);z-index:4;}
.bzx-cursor{position:absolute;left:30px;top:54px;width:20px;height:20px;z-index:5;}
.bzx-cursor path{fill:#1a1c1e;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;}


/* collection polish */
.pf-tabs{border-bottom:none !important;}
.pfd-x{display:flex;justify-content:space-between;margin-top:3px;padding:0 2px;font-size:7.5px;color:var(--app-t3);}

/* ── Billing drop-state: frosty overlay + A4 contract PDFs ── */
.qz-view-billing .gk{position:relative;}
.bzx-dropzone{position:absolute;inset:0;z-index:8;background:rgba(253,253,254,.58);display:flex;align-items:center;justify-content:center;}
.bzx-dz-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:24px 48px 20px;border:1.5px dashed rgba(91,124,255,.5);border-radius:16px;background:#F2F4FD;box-shadow:0 6px 24px -10px rgba(16,18,40,.12);transform:translateY(10px);}
.bzx-dz-ic{width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid #E5E6E9;display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:0 2px 8px -2px rgba(16,18,40,.14);}
.bzx-dz-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.bzx-dz-t{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--app-t1);}
.bzx-dz-s{font-size:10px;color:var(--app-t2);}
.bzx-drag{position:absolute;top:-54px;right:-30px;z-index:9;pointer-events:none;}
.bzx-pdfs{position:relative;width:74px;height:100px;}
.bzx-pdf{position:absolute;left:0;top:0;width:74px;height:100px;box-sizing:border-box;background:#fff;border:1px solid #E2E3E6;border-radius:6px;box-shadow:0 8px 16px -8px rgba(16,18,40,.16);padding:9px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.bzx-pdf .pdf-tag{font-size:5px;font-weight:700;color:#fff;background:#C0463F;border-radius:2px;padding:1px 3px;letter-spacing:.05em;margin-bottom:3px;}
.bzx-pdf .pl{height:2.4px;border-radius:2px;background:#E9EAED;width:100%;}
.bzx-pdf .pl.t{height:4px;width:58%;background:#CFD1D6;margin-bottom:1px;}
.bzx-pdf .pl.w1{width:92%;}.bzx-pdf .pl.w2{width:78%;}.bzx-pdf .pl.w3{width:50%;}
.bzx-pdf.b1{transform:rotate(3deg);z-index:3;}
.bzx-pdf.b2{transform:translate(-9px,-6px) rotate(-4deg);z-index:2;}
.bzx-pdf.b3{transform:translate(-17px,-11px) rotate(-9deg);z-index:1;}
.bzx-pdf-badge{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -1px rgba(91,124,255,.5);z-index:5;}
.bzx-cursor{position:absolute;left:24px;top:2px;width:20px;height:20px;z-index:7;}
.bzx-cursor path{fill:#1a1c1e;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;}
.bzx-blurwrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}

/* ── Billing drop animation (drop contracts → agents draft) ── */
/* state-driven: JS toggles classes/inline styles; rows reveal + counts tick */
.qz-view-billing .bzx-row.bzx-new{height:0;opacity:0;overflow:hidden;transform:translateY(6px);}
.qz-view-billing [data-tick-to]{display:inline-block;}
@keyframes numTick{from{opacity:0;transform:translateY(.34em);}to{opacity:1;transform:translateY(0);}}
.qz-view-billing .tick-anim{animation:numTick .36s cubic-bezier(.2,.7,.2,1);}
.bzo-ai-banner{transition:background .42s ease,box-shadow .42s ease;}
.bzo-ai-banner.is-drafting{background:linear-gradient(90deg,rgba(91,124,255,.16),rgba(91,124,255,.03) 70%),#F4F7FF;box-shadow:0 0 0 1px rgba(91,124,255,.16);}


/* ── Hero text — vaporIn entrance (matches The Map page) ── */
@keyframes vaporIn{0%{opacity:0;filter:blur(16px);transform:translateY(14px) scale(1.06);}55%{opacity:1;}100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}}
.rah-title .vword{display:inline-block;opacity:0;animation:vaporIn 1.5s cubic-bezier(.2,.7,.2,1) var(--w,0s) both;will-change:filter,transform,opacity;}
.rah .rah-sub{opacity:0;animation:vaporIn 1.3s cubic-bezier(.2,.7,.2,1) .9s both;will-change:filter,transform,opacity;}
.rah .rah-cta-btn{opacity:0;animation:vaporIn 1.3s cubic-bezier(.2,.7,.2,1) 1.05s both;will-change:filter,transform,opacity;}
@media (prefers-reduced-motion:reduce){.rah-title .vword,.rah .rah-sub,.rah .rah-cta-btn{animation:none!important;opacity:1!important;filter:none!important;}}

/* #1: 6px frosted-glass frame around the hero app (no backdrop-filter — avoids the scaled-layer blur bug) */
.rah-stage .rah-frame{box-sizing:border-box;padding:6px;background:rgba(255,255,255,0.5);border-radius:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 26px 64px -28px rgba(16,18,40,.24);}

/* #2: ontora-style capability grid in the opportunity section (Inter, ontora register) */
.ra-shift{padding-top:120px;padding-bottom:120px;}
.ra-shift .feat-eyebrow{font-size:11px;letter-spacing:.14em;color:#A7A9B0;}
.ra-shift-h{max-width:38ch;font-size:clamp(38px,4vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.08;}
.ra-shift-h-dim{color:#A8AAB2;font-weight:500;}
.ra-shift-p{font-size:17px;line-height:1.6;color:#52555B;max-width:60ch;margin:0 0 64px;}
.ra-shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px 112px;max-width:none;margin-top:8px;}
.rsg-ic{display:inline-flex;color:#71747C;margin-bottom:18px;}
.rsg-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.rsg-label{display:block;font-family:var(--font-ui);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#AEB0B7;margin-bottom:12px;}
.rsg-h{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.28;color:#23252A;margin:0 0 10px;}
.rsg-body{font-size:16px;line-height:1.68;color:#6C6F77;margin:0;max-width:none;}
.ra-shift-cta{margin-top:76px;text-align:center;}
.ra-shift-cta .btn-primary{display:inline-flex;align-items:center;gap:8px;background:#0A0A0A;color:#fff;font-family:var(--font-ui);font-size:17px;font-weight:600;text-transform:none;letter-spacing:0;padding:17px 38px;border-radius:999px;text-decoration:none;box-shadow:none;transition:opacity .2s ease,transform .2s ease;}
.ra-shift-cta .btn-primary:hover{opacity:.8;transform:translateY(-1px);background:#0A0A0A;}
@media (max-width:820px){.ra-shift-grid{grid-template-columns:1fr;gap:36px;}.ra-shift-cta{margin-top:48px;}}

/* ════════ THE MODEL — alternating timeline (ontora register) ════════ */
.ms-tl{max-width:1440px;margin:0 auto;padding:120px 48px 120px;position:relative;}
.ms-tl .ms-head{margin-bottom:104px;}
.ms-title{font-size:clamp(36px,3.8vw,54px);font-weight:500;letter-spacing:-.03em;line-height:1.04;color:#16181B;margin:12px 0 0;max-width:20ch;}
.ms-title-dim{color:#A8AAB2;}

/* track + central spine */
.ms-track{position:relative;}
.ms-spine{position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:rgba(22,24,27,.08);border-radius:2px;overflow:hidden;z-index:0;}
.ms-spine-fill{position:absolute;top:0;left:0;width:100%;height:var(--ms-progress,0%);background:#16181B;}

/* rows alternate across the spine */
.ms-row{position:relative;display:flex;align-items:center;gap:120px;padding:84px 0;}
.ms-row-rev{flex-direction:row-reverse;}
.ms-col{width:50%;box-sizing:border-box;position:relative;z-index:1;}
.ms-row:not(.ms-row-rev) .ms-col-text{padding-right:40px;}
.ms-row.ms-row-rev  .ms-col-text{padding-left:40px;}
.ms-col-visual{display:flex;justify-content:center;}

/* giant number watermark (hidden: clashed with the frosted cards) */
.ms-watermark{display:none!important;}
.ms-watermark{position:absolute;top:50%;font-size:clamp(7rem,11vw,12rem);font-weight:600;line-height:1;letter-spacing:-.04em;color:rgba(22,24,27,.045);z-index:0;pointer-events:none;font-variant-numeric:tabular-nums;
  opacity:0;filter:blur(12px);transform:translateY(calc(-50% + 26px));transition:opacity .85s cubic-bezier(.2,.7,.2,1),filter .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);}
.ms-row:not(.ms-row-rev) .ms-watermark{right:0;}
.ms-row.ms-row-rev  .ms-watermark{left:0;}
.ms-row.is-in .ms-watermark{opacity:1;filter:blur(0);transform:translateY(-50%);transition-delay:.04s;}

/* node on the spine */
.ms-node{display:none;}

/* text column */
.ms-step-meta{margin:0;}
.ms-step-n{font-family:var(--font-ui);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--blue,#5B7CFF);}
.ms-step-label{margin-left:12px;font-family:var(--font-ui);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#9A9CA4;}
.ms-step-h{font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.028em;line-height:1.08;color:#16181B;margin:20px 0 20px;max-width:14ch;}
.ms-step-b{font-size:19px;line-height:1.6;color:#5A5D63;margin:0;max-width:34ch;}
.ms-step-stat{margin-top:28px;display:flex;align-items:baseline;gap:10px;}
.ms-step-stat b{font-size:23px;font-weight:600;color:#16181B;font-variant-numeric:tabular-nums;}
.ms-step-stat span{font-size:14px;color:#8A8D94;}
.ms-vis{width:100%;display:flex;justify-content:center;}

/* scroll reveal — blur to crisp */
.ms-row .ms-col{opacity:0;filter:blur(12px);transform:translateY(24px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),filter .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);}
.ms-row:not(.ms-row-rev) .ms-col-visual{transform:translateY(24px) translateX(18px);}
.ms-row.ms-row-rev  .ms-col-visual{transform:translateY(24px) translateX(-18px);}
.ms-row.is-in .ms-col{opacity:1;filter:blur(0);transform:none;}
.ms-row.is-in .ms-col-visual{transition-delay:.1s;}
.msv-card{position:relative;overflow:hidden;width:min(600px,100%);aspect-ratio:1/1;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(255,255,255,.75);border-radius:8px;box-shadow:none;padding:26px;font-family:var(--font-ui);box-sizing:border-box;}
.msv-card::before{content:'';position:absolute;inset:-26px;background:url('/assets/images/Generated%20Image%20June%2007,%202026%20-%205_40PM.jpg') center/cover;filter:blur(22px) saturate(1.05);z-index:0;}
.msv-card::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.74);z-index:0;}
.msv-card>*{position:relative;z-index:1;}
.msv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.msv-title{font-size:13px;font-weight:600;color:#16181B;}
.msv-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--blue,#5B7CFF);background:rgba(91,124,255,.10);border-radius:999px;padding:3px 9px;}
.msv-rows{display:flex;flex-direction:column;gap:8px;}
.msv-row{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:10px;font-size:12.5px;padding:9px 12px;border:1px solid #F0F1F3;border-radius:9px;}
.msv-inv{font-size:11px;color:#9A9CA4;}
.msv-cust{color:#16181B;font-weight:500;}
.msv-tag{font-size:10px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.t-over{color:#C0463F;background:rgba(192,70,63,.10);}
.t-prom{color:#9A6A1F;background:rgba(198,138,51,.14);}
.t-disp{color:#5B7CFF;background:rgba(91,124,255,.12);}
.t-paid{color:#2F9E68;background:rgba(47,158,104,.12);}
.msv-draft{background:#FAFAFB;border:1px solid #F0F1F3;border-radius:10px;padding:14px;}
.msv-dl1{font-size:13px;color:#16181B;margin:0 0 6px;}
.msv-dl2{font-size:13px;line-height:1.55;color:#43464B;margin:0;}
.msv-reason{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;}
.msv-rlabel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#9A9CA4;margin-right:2px;}
.msv-chip2{font-size:10.5px;color:#52555B;background:#F4F5F7;border:1px solid #EAEBEE;border-radius:6px;padding:3px 8px;}
.msv-slk-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.msv-slk-av{width:22px;height:22px;border-radius:6px;background:#16181B;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.msv-slk-name{font-size:13px;font-weight:600;color:#16181B;}
.msv-slk-app{font-size:9px;font-weight:600;color:#8A8D94;background:#F0F1F3;border-radius:4px;padding:2px 5px;text-transform:uppercase;letter-spacing:.06em;}
.msv-slk-msg{font-size:13px;line-height:1.55;color:#16181B;margin:0 0 14px;}
.msv-slk-actions{display:flex;gap:8px;margin-bottom:14px;}
.msv-btn-go{font-size:12px;font-weight:600;color:#fff;background:#16181B;border-radius:8px;padding:8px 14px;}
.msv-btn-edit{font-size:12px;font-weight:500;color:#43464B;background:#fff;border:1px solid #E5E6E9;border-radius:8px;padding:8px 14px;}
.msv-sent{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#2F9E68;background:rgba(47,158,104,.10);border-radius:8px;padding:7px 11px;margin-top:2px;}
.msv-sent-ic{font-weight:700;}
.msv-card.msv-slk{justify-content:center;}
@media (max-width:860px){
  .ms-tl{padding:64px 22px 76px;}
  .ms-tl .ms-head{margin-bottom:44px;}
  .ms-spine,.ms-node{display:none;}
  .ms-row,.ms-row.ms-row-rev{flex-direction:column;align-items:flex-start;gap:26px;padding:34px 0;}
  .ms-col{width:100%;}
  .ms-row:not(.ms-row-rev) .ms-col-text,.ms-row.ms-row-rev .ms-col-text{padding:0;}
  .ms-col-visual{justify-content:flex-start;}
  .ms-watermark,.ms-row.ms-row-rev .ms-watermark{top:-8px;right:0;left:auto;font-size:6rem;transform:translateY(20px);}
  .ms-row.is-in .ms-watermark{transform:none;}
  .ms-row:not(.ms-row-rev) .ms-col-visual,.ms-row.ms-row-rev .ms-col-visual{transform:translateY(24px);}
  .ms-row.is-in .ms-col-visual{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .ms-row .ms-col,.ms-watermark{transition:opacity .2s linear;filter:none;transform:none;opacity:1;}
}

/* -- timeline visual scenes (JS-driven, pause offscreen) -- */
.msv-chip.msv-live{animation:msv-pulse 2.2s ease-in-out infinite;}
@keyframes msv-pulse{50%{opacity:.55;}}
.msv-type{border-right:1.5px solid rgba(22,24,27,.5);padding-right:1px;animation:msv-caret 1s step-end infinite;}
@keyframes msv-caret{0%,55%{border-right-color:rgba(22,24,27,.5);}56%,100%{border-right-color:transparent;}}
.msv-btn-go{transition:transform .18s cubic-bezier(.2,.7,.2,1);}
.msv-btn-go.is-press{transform:scale(.95);}

/* scene: case network (Reads) */
.msn-card{width:min(540px,100%);}
.msn{position:relative;flex:1 1 auto;height:auto;min-height:260px;margin-top:6px;font-family:var(--font-ui);}
.msn-svg{position:absolute;inset:0;width:100%;height:100%;}
.msn-ln{stroke:#E7E8EC;stroke-width:1.5;stroke-dasharray:4 4;transition:stroke .4s;}
.msn-ln.is-live{stroke:#5B7CFF;animation:msn-flow 1.4s linear infinite;}
@keyframes msn-flow{to{stroke-dashoffset:-16;}}
.msn-hub{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);background:#16181B;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px -8px rgba(16,18,40,.5);z-index:2;}
.msn-ping{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:13px;border:1.5px solid rgba(91,124,255,.45);transform:translate(-50%,-50%) scale(1);opacity:0;z-index:1;pointer-events:none;animation:msn-ping 2.6s cubic-bezier(0,0,.2,1) infinite;}
.msn-ping.d{animation-delay:1.3s;}
@keyframes msn-ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.5;}70%,100%{transform:translate(-50%,-50%) scale(2);opacity:0;}}
.msn-tile{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #ECEDEF;border-radius:11px;padding:6px 13px 6px 6px;box-shadow:0 1px 2px rgba(16,18,40,.05);transition:border-color .4s,box-shadow .4s;z-index:1;white-space:nowrap;}
.msn-av{position:relative;width:27px;height:27px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.02em;color:#41465A;background:var(--a,#EEF0F4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);overflow:hidden;}
.msn-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.msn-id{display:flex;flex-direction:column;line-height:1.18;}
.msn-id b{font-size:11px;font-weight:600;color:#16181B;letter-spacing:-.01em;}
.msn-id i{font-style:normal;font-size:9.5px;color:#8A8D94;}
.msn-tile.is-live{border-color:rgba(91,124,255,.55);box-shadow:0 0 0 3px rgba(91,124,255,.10),0 1px 2px rgba(16,18,40,.05);animation:msn-speak .9s ease-in-out;}
.msn-tile.is-live .msn-av{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 0 0 2px rgba(91,124,255,.45);}
@keyframes msn-speak{25%{transform:translate(-50%,-50%) scale(1.045);}60%{transform:translate(-50%,-50%) scale(.995);}}

/* scene: synthesis flow (Drafts) */
.mss-card{width:min(540px,100%);}
.mss{position:relative;flex:1 1 auto;height:auto;min-height:220px;margin-top:6px;font-family:var(--font-ui);}
.mss-svg{position:absolute;inset:0;width:100%;height:100%;}
.mss-ln{stroke:#E7E8EC;stroke-width:1.5;fill:none;stroke-dasharray:4 4;transition:stroke .4s;}
.mss-ln.is-live{stroke:#5B7CFF;animation:msn-flow 1.4s linear infinite;}
.mss-src{position:absolute;left:3%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #ECEDEF;border-radius:8px;padding:6px 10px;font-size:10.5px;color:#55585E;transition:border-color .4s,color .4s,box-shadow .4s;z-index:1;white-space:nowrap;}
.mss-src svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.mss-src.is-live{border-color:rgba(91,124,255,.55);color:#16181B;box-shadow:0 0 0 3px rgba(91,124,255,.10);}
.mss-hub{position:absolute;left:52.5%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);background:#16181B;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px -8px rgba(16,18,40,.5);z-index:2;}
.mss-out{position:absolute;right:0;top:50%;transform:translateY(-50%);width:31%;background:#FAFAFB;border:1px solid #F0F1F3;border-radius:10px;padding:10px 11px;transition:border-color .4s,box-shadow .4s,background .4s;z-index:1;box-sizing:border-box;}
.mss-out.is-live{border-color:rgba(91,124,255,.45);box-shadow:0 0 0 3px rgba(91,124,255,.08);background:#fff;}
.mss-out-t{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#9A9CA4;margin-bottom:6px;}
.mss-out-b{font-size:10.5px;line-height:1.5;color:#43464B;margin:0;min-height:100px;}

/* scene: approve workflow (Acts) */
.msw{margin-top:2px;border-top:1px solid #F0F1F3;padding-top:11px;display:flex;flex-direction:column;gap:7px;}
.msw-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#9A9CA4;opacity:.55;transition:opacity .45s,color .45s;}
.msw-t{font-weight:500;}
.msw-s{margin-left:auto;font-size:10px;color:#B6B8BF;font-variant-numeric:tabular-nums;}
.msw-ic{width:15px;height:15px;border-radius:50%;border:1.5px solid #DADCE2;display:inline-flex;align-items:center;justify-content:center;transition:border-color .35s,background .35s;flex:none;box-sizing:border-box;}
.msw-ic svg{width:8px;height:8px;display:block;}
.msw-ic svg path{stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;}
.msw-row.is-done{opacity:1;color:#16181B;}
.msw-row.is-done .msw-ic{background:#2F9E68;border-color:#2F9E68;}
.msw-row.is-done .msw-ic svg path{animation:msv-check .4s cubic-bezier(.2,.7,.2,1) .1s forwards;}
@keyframes msv-check{100%{stroke-dashoffset:0;}}
@media (max-width:860px){
  .msn-tile{font-size:9px;padding:4px 7px 4px 4px;gap:4px;}
  .msn-tile b{width:15px;height:15px;font-size:7px;}
  .mss-src{font-size:9px;padding:5px 7px;}
  .mss-out-b{font-size:9.5px;min-height:90px;}
}
@media (prefers-reduced-motion:reduce){
  .msv-chip.msv-live,.msn-ping{animation:none;}
}

/* -- THE CYCLE: dark order-to-cash orbit -- */
.o2c{background:#0A0B0C;color:#fff;padding:136px 24px 136px;}
.o2c-in{max-width:1180px;margin:0 auto;text-align:center;}
.o2c-eyebrow{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.38);}
.o2c-title{font-size:clamp(34px,3.6vw,50px);font-weight:500;letter-spacing:-.028em;line-height:1.06;margin:16px 0 0;color:#fff;}
.o2c-dim{color:rgba(255,255,255,.42);}
.o2c-sub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:52ch;margin:22px auto 0;}
.o2c-wheel{position:relative;width:min(560px,86vw);aspect-ratio:1/1;margin:76px auto 0;}
.o2c-ring{position:absolute;inset:0;width:100%;height:100%;}
.o2c-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#2B2D30;}
.o2c-node{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%);background:none;border:0;cursor:pointer;padding:0;font-family:inherit;}
.o2c-node::after{content:'';position:absolute;inset:-14px;}
.o2c-node i{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:#0A0B0C;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;box-sizing:border-box;}
.o2c-node em{position:absolute;font-style:normal;font-size:13px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.45);transition:color .35s ease;white-space:nowrap;}
.o2c-node:hover em{color:rgba(255,255,255,.8);}
.o2c-node.is-on i{background:#fff;border-color:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.08);}
.o2c-node.is-on em{color:#fff;font-weight:600;}
.o2c-node.n-top em{bottom:calc(100% + 11px);left:50%;transform:translateX(-50%);}
.o2c-node.n-bottom em{top:calc(100% + 11px);left:50%;transform:translateX(-50%);}
.o2c-node.n-right em{left:calc(100% + 13px);top:50%;transform:translateY(-50%);}
.o2c-node.n-left em{right:calc(100% + 13px);top:50%;transform:translateY(-50%);}
.o2c-card{margin:68px auto 0;max-width:430px;background:#101113;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:22px 26px;text-align:left;min-height:118px;box-sizing:border-box;}
.o2c-card-k{display:block;font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:10px;transition:opacity .22s ease;}
.o2c-card-b{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);margin:0;transition:opacity .22s ease;}
.o2c-card.is-swap .o2c-card-k,.o2c-card.is-swap .o2c-card-b{opacity:0;}
@media (max-width:680px){
  .o2c{padding:88px 18px 96px;}
  .o2c-wheel{margin-top:56px;}
  .o2c-node em{font-size:11px;}
  .o2c-hub svg{width:64px!important;height:48px!important;}
  .o2c-card{margin-top:48px;}
}

/* -- outcomes band -- */
.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:60px;}
.out-item b{display:block;font-size:clamp(44px,4.6vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1;color:#16181B;font-variant-numeric:tabular-nums;}
.out-item span{display:block;margin-top:12px;font-size:15px;line-height:1.55;color:#6C6F77;max-width:26ch;}
@media (max-width:820px){.out-grid{grid-template-columns:1fr;gap:40px;}}

/* hero app entrance: one quiet rise after the headline settles */
.rah-stage{opacity:0;animation:rahStageIn .9s cubic-bezier(.2,.7,.2,1) 1.05s both;}
@keyframes rahStageIn{from{opacity:0;transform:translateY(26px) scale(.988);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.rah-stage{animation:none;opacity:1;}}

/* sticky fix: body overflow-x:hidden (mobile.css) makes body a scroll container; higher specificity restores it without horizontal scroll */
html body{overflow-x:clip;}

/* ===== HERO APP (HockeyStack-clean redesign, namespaced .hsapp) ===== */
.hsapp{--bg:#FFFFFF; --rail:#FCFCFD; --line:#ECEDEF; --line-soft:#F2F3F5;
    --t1:#191B1F; --t2:#6B7076; --t3:#9DA0A8; --active:#F4F5F7;
    --blue:#5B7CFF; --over:#C0463F; --prom:#9A6A1F; --disp:#5B7CFF; --paid:#2F9E68; --ok:#2F9E68;
    --radius:11px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.hsapp *{box-sizing:border-box;}
.hsapp{width:1320px;height:840px;background:var(--bg);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(16,18,40,.06),0 40px 90px -40px rgba(16,18,40,.30);display:grid;grid-template-columns:230px 1fr;border:1px solid var(--line);}
.hsapp .rail{background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;}
.hsapp .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;}
.hsapp .brand .mark{width:30px;height:30px;border-radius:8px;background:#16181B;color:#fff;display:flex;align-items:center;justify-content:center;}
.hsapp .brand .mark svg{width:17px;height:13px;}
.hsapp .brand b{font-size:13px;font-weight:600;letter-spacing:-.01em;}
.hsapp .brand .chev{margin-left:auto;color:var(--t3);display:flex;}
.hsapp .nav{display:flex;flex-direction:column;gap:1px;}
.hsapp .nav-sec{margin-top:14px;}
.hsapp .nav-sec .lbl{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:6px 10px 6px;}
.hsapp .nav-i{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:11px;font-weight:500;color:var(--t2);cursor:pointer;text-decoration:none;transition:background .15s,color .15s;}
.hsapp .nav-i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--t3);}
.hsapp .nav-i:hover{background:#F4F5F7;color:var(--t1);}
.hsapp .nav-i.on{background:var(--active);color:var(--t1);font-weight:600;}
.hsapp .nav-i.on svg{color:var(--t1);}
.hsapp .nav-i .ct{margin-left:auto;font-size:9.5px;font-weight:600;color:var(--t3);background:#EEEFF2;border-radius:999px;padding:1px 7px;}
.hsapp .rail-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:10px;}
.hsapp .rail-foot .av{position:relative;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.hsapp .rail-foot .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hsapp .rail-foot .who{line-height:1.2;}
.hsapp .rail-foot .who b{display:block;font-size:10.5px;font-weight:600;}
.hsapp .rail-foot .who span{font-size:9.5px;color:var(--t3);}
.hsapp .rail-foot .cog{margin-left:auto;color:var(--t3);display:flex;}
.hsapp .main{display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.hsapp .page{display:flex;flex-direction:column;flex:1;min-height:0;}
.hsapp .page[hidden]{display:none;}
.hsapp .hdot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;font-size:9px;font-weight:700;font-variant-numeric:tabular-nums;}
.hsapp .h-hot{color:var(--over);background:rgba(192,70,63,.10);}
.hsapp .h-warm{color:var(--prom);background:rgba(198,138,51,.14);}
.hsapp .h-ok{color:var(--paid);background:rgba(47,158,104,.12);}
.hsapp .acct{display:flex;align-items:center;gap:9px;}
.hsapp .acct .lg{width:22px;height:22px;border-radius:6px;background:#EEF0F3;color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;flex:none;}
.hsapp .acct b{font-weight:500;color:var(--t1);}
.hsapp .ovd{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--over);}
.hsapp .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--t2);}
.hsapp .sig{display:inline-flex;gap:5px;}
.hsapp .sig span{font-size:8.5px;font-weight:600;border-radius:6px;padding:3px 8px;background:#F4F5F7;color:#52555B;white-space:nowrap;}
.hsapp .sig span.warn{color:var(--over);background:rgba(192,70,63,.09);}
.hsapp .sig span.ai{color:var(--blue);background:rgba(91,124,255,.10);}
.hsapp .topbar{display:flex;align-items:center;gap:12px;height:53px;padding:0 26px;border-bottom:1px solid var(--line);}
.hsapp .topbar .pg{display:flex;align-items:center;gap:9px;}
.hsapp .topbar .pg svg{width:16px;height:16px;stroke:var(--t1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hsapp .topbar .pg b{font-size:12px;font-weight:600;letter-spacing:-.01em;}
.hsapp .pill{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;color:var(--t2);background:#F4F5F7;border:1px solid var(--line);border-radius:999px;padding:4px 11px;}
.hsapp .pill .dot{width:6px;height:6px;border-radius:50%;background:#A8AAB2;}
.hsapp .topbar .sp{flex:1;}
.hsapp .tb-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t2);background:#fff;}
.hsapp .tb-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hsapp .tb-ico{display:flex;align-items:center;color:var(--t2);cursor:pointer;}
.hsapp .tb-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hsapp .scroll{padding:22px 26px;overflow:auto;flex:1;}
.hsapp .cards{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;}
.hsapp .card{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;}
.hsapp .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.hsapp .card-h b{font-size:11.5px;font-weight:600;}
.hsapp .card-h .sub{font-size:10px;color:var(--t3);}
.hsapp .ai-chip{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:600;color:var(--blue);background:rgba(91,124,255,.10);border-radius:999px;padding:3px 9px;}
.hsapp .summary p{font-size:11px;line-height:1.6;color:var(--t2);margin:0 0 10px;}
.hsapp .summary p b{color:var(--t1);font-weight:600;}
.hsapp .summary p:last-child{margin:0;}
.hsapp .qr{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.hsapp .qr:last-child{border:none;}
.hsapp .qr .k{font-size:10.5px;color:var(--t2);}
.hsapp .qr .v{display:flex;align-items:baseline;gap:9px;}
.hsapp .qr .v b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;}
.hsapp .qr .v .d{font-size:9.5px;font-weight:600;}
.hsapp .qr .v .d.up{color:var(--ok);}
.hsapp .qr .v .d.dn{color:var(--ok);}
.hsapp .qr .v .d.mut{color:var(--t3);font-weight:500;}
.hsapp .banner{margin-top:16px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(90deg,rgba(91,124,255,.05),rgba(91,124,255,0) 60%);padding:13px 18px;}
.hsapp .banner .bi{width:26px;height:26px;border-radius:7px;background:rgba(91,124,255,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;}
.hsapp .banner .bi svg{width:15px;height:15px;}
.hsapp .banner p{margin:0;font-size:11px;color:var(--t2);}
.hsapp .banner p b{color:var(--t1);font-weight:600;}
.hsapp .banner .vd{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--t1);border:1px solid var(--line);border-radius:8px;padding:7px 14px;background:#fff;white-space:nowrap;}
.hsapp .tabsrow{display:flex;align-items:center;gap:4px;margin-top:22px;border-bottom:1px solid var(--line);}
.hsapp .tab{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--t2);padding:10px 12px;cursor:pointer;position:relative;}
.hsapp .tab .n{font-size:9.5px;color:var(--t3);background:#F0F1F3;border-radius:999px;padding:1px 7px;font-weight:600;}
.hsapp .tab.on{color:var(--t1);font-weight:600;}
.hsapp .tab.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:#16181B;border-radius:2px;}
.hsapp .tabsrow .sp{flex:1;}
.hsapp .srch{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--t3);border:1px solid var(--line);border-radius:8px;padding:6px 11px;min-width:200px;}
.hsapp .srch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
.hsapp .srch .kbd{margin-left:auto;font-size:8.5px;color:var(--t3);background:#F4F5F7;border-radius:4px;padding:1px 5px;}
.hsapp .filters{display:flex;align-items:center;gap:8px;margin:16px 0 6px;}
.hsapp .chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;color:var(--t2);background:#F7F8FA;border:1px solid var(--line);border-radius:8px;padding:6px 11px;}
.hsapp .chip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--t3);}
.hsapp .chip b{color:var(--t1);font-weight:600;}
.hsapp .chip .x{color:var(--t3);font-size:11px;margin-left:2px;}
.hsapp .chip.add{border-style:dashed;color:var(--t3);}
.hsapp table{width:100%;border-collapse:collapse;margin-top:8px;}
.hsapp thead th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);padding:10px 12px;border-bottom:1px solid var(--line);}
.hsapp thead th.r{text-align:right;}
.hsapp .grp td{padding:9px 12px;background:#FAFBFC;border-bottom:1px solid var(--line);}
.hsapp .grp .gh{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;color:var(--t1);}
.hsapp .grp .gh .gd{width:7px;height:7px;border-radius:50%;}
.hsapp .grp .gh .gc{font-size:9.5px;color:var(--t3);background:#EEEFF2;border-radius:999px;padding:1px 7px;font-weight:600;}
.hsapp .grp .gsum{float:right;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t2);}
.hsapp tbody td{padding:12px;border-bottom:1px solid var(--line-soft);font-size:11px;vertical-align:middle;}
.hsapp .inv{display:flex;align-items:center;gap:9px;}
.hsapp .inv .cb{width:15px;height:15px;border:1.5px solid #D3D5DB;border-radius:4px;flex:none;}
.hsapp .inv .cb.on{background:var(--blue);border-color:var(--blue);position:relative;}
.hsapp .inv .cb.on::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.hsapp .inv .id{font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums;}
.hsapp .inv .ai{width:13px;height:13px;}
.hsapp .cust{font-weight:500;color:var(--t1);}
.hsapp .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;}
.hsapp .coll{display:flex;justify-content:flex-end;}
.hsapp .bar{width:78px;height:6px;border-radius:999px;background:#EEEFF2;overflow:hidden;}
.hsapp .bar i{display:block;height:100%;background:var(--paid);border-radius:999px;}
.hsapp .due{text-align:right;font-size:10px;color:var(--t2);}
.hsapp .due .x{font-size:9.5px;color:var(--t3);}
.hsapp .due.warn{color:var(--over);}
.hsapp .tag{display:inline-flex;font-size:9px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.hsapp .t-over{color:var(--over);background:rgba(192,70,63,.10);}
.hsapp .t-prom{color:var(--prom);background:rgba(198,138,51,.14);}
.hsapp .t-rev{color:#52555B;background:#EEF0F2;}
.hsapp .tfoot{display:flex;align-items:center;justify-content:space-between;padding:14px 4px 6px;}
.hsapp .tfoot .cnt{font-size:10px;color:var(--t3);}
.hsapp .pages{display:flex;align-items:center;gap:4px;}
.hsapp .pages a{font-size:10px;color:var(--t2);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;}
.hsapp .pages a.on{background:var(--blue);color:#fff;font-weight:600;}
.hsapp .pages a.nav{color:var(--t3);}
.hsapp .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.hsapp .seg a{font-size:10px;font-weight:500;color:var(--t2);padding:6px 13px;cursor:pointer;}
.hsapp .seg a.on{background:#16181B;color:#fff;font-weight:600;}
.hsapp .csplit2{display:flex;flex:1;min-height:0;}
.hsapp .cleft{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.hsapp .cleft > .topbar{flex:none;}
.hsapp .cscroll{flex:1;overflow:auto;padding:4px 26px 22px;}
.hsapp .cleft .tabsrow{margin-top:0;}
.hsapp .ctable{width:100%;border-collapse:collapse;}
.hsapp .ctable thead th{text-align:left;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:9px 8px;border-bottom:1px solid var(--line);}
.hsapp .ctable thead th.r{text-align:right;}
.hsapp .ctable .grp td{padding:8px;background:#FAFBFC;border-bottom:1px solid var(--line);}
.hsapp .ctable .grp .gh{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;}
.hsapp .ctable .grp .gh .gd{width:6px;height:6px;border-radius:50%;}
.hsapp .ctable .grp .gh .gc{font-size:8.5px;color:var(--t3);background:#EEEFF2;border-radius:999px;padding:1px 6px;font-weight:600;}
.hsapp .ctable .grp .gsum{float:right;font-size:10px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;}
.hsapp .ctable tbody td{padding:10px 8px;border-bottom:1px solid var(--line-soft);font-size:10.5px;vertical-align:middle;font-variant-numeric:tabular-nums;}
.hsapp .ctable tbody tr{cursor:pointer;}
.hsapp .ctable tbody tr.sel{background:#F6F8FF;box-shadow:inset 2px 0 0 var(--blue);}
.hsapp .ca{display:flex;align-items:center;gap:9px;}
.hsapp .ca .lg{width:22px;height:22px;border-radius:6px;background:#EEF0F3;color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;flex:none;}
.hsapp .ca .nm{line-height:1.25;}
.hsapp .ca .nm b{font-size:10.5px;font-weight:500;color:var(--t1);}
.hsapp .ca .nm span{display:block;font-size:9px;color:var(--t3);}
.hsapp .r{text-align:right;}
.hsapp .od{color:var(--over);font-weight:600;}
.hsapp .cstg{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:500;padding:4px 11px 4px 9px;white-space:nowrap;color:#52555B;background:#F1F2F4;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%);}
.hsapp .cstg::before{content:"";width:5px;height:5px;border-radius:50%;background:#9AA0A8;flex:none;}
.hsapp .cstg.s-disputed::before{background:#C77B6B;}
.hsapp .cstg.s-negotiation::before{background:#E0A23B;}
.hsapp .cstg.s-outreach::before{background:#9AA0A8;}
.hsapp .cstg.s-promised::before{background:#5B7CFF;}
.hsapp .cstg.s-current::before{background:#5FB98A;}
.hsapp .hled{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid;background:transparent;box-sizing:border-box;vertical-align:middle;}
.hsapp .l-hot{border-color:#C0463F;}
.hsapp .l-warm{border-color:#E0A23B;}
.hsapp .l-ok{border-color:#3FA56C;}
.hsapp .ctable td.hc{text-align:center;width:34px;}
.hsapp .ctable .nm{line-height:1.25;}
.hsapp .ctable .nm b{display:block;font-size:10.5px;font-weight:500;color:var(--t1);}
.hsapp .ctable .nm span{display:block;font-size:9px;color:var(--t3);margin-top:1px;}
.hsapp .cpanel{width:452px;flex:none;border-left:1px solid var(--line);overflow:auto;background:#fff;}
.hsapp .cph{display:flex;align-items:center;gap:10px;height:53px;padding:0 20px;border-bottom:1px solid var(--line);}
.hsapp .cph .hd{display:flex;align-items:center;gap:9px;}
.hsapp .cph b{font-size:12px;font-weight:600;}
.hsapp .cph .goto{font-size:10px;color:var(--blue);font-weight:500;display:inline-flex;align-items:center;gap:3px;}
.hsapp .cph .x{margin-left:auto;color:var(--t3);cursor:pointer;display:flex;}
.hsapp .ptabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--line);}
.hsapp .ptabs a{font-size:10.5px;font-weight:500;color:var(--t2);padding:11px 12px;position:relative;cursor:pointer;}
.hsapp .ptabs a.on{color:var(--t1);font-weight:600;}
.hsapp .ptabs a.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:#16181B;border-radius:2px;}
.hsapp .psec{padding:16px 20px;border-bottom:1px solid var(--line);}
.hsapp .psec:last-child{border-bottom:none;}
.hsapp .psec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.hsapp .psec-h .l{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);}
.hsapp .psec-h .r{font-size:9.5px;color:var(--t3);}
.hsapp .ptrend svg{width:100%;height:128px;display:block;}
.hsapp .pdate{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--line);}
.hsapp .pdate b{font-size:11px;font-weight:600;}
.hsapp .pdate .sc{margin-left:auto;font-size:9.5px;font-weight:600;background:#F4F5F7;border:1px solid var(--line);border-radius:6px;padding:2px 8px;}
.hsapp .pdate .dl{font-size:9.5px;font-weight:600;color:var(--over);}
.hsapp .psum p{font-size:10.5px;line-height:1.6;color:var(--t2);margin:0;}
.hsapp .page-age .agebar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:2px 0 14px;background:#F1F2F4;}
.hsapp .page-age .agebar span{display:block;height:100%;}
.hsapp .ageleg{display:flex;flex-direction:column;gap:7px;}
.hsapp .ageleg .row{display:flex;align-items:center;gap:8px;font-size:10.5px;}
.hsapp .ageleg .dot{width:8px;height:8px;border-radius:2px;flex:none;}
.hsapp .ageleg .lb{color:var(--t2);}
.hsapp .ageleg .amt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--t1);}
.hsapp .pstat{display:flex;border-bottom:1px solid var(--line);}
.hsapp .pstat .c{flex:1;padding:12px 20px;border-right:1px solid var(--line-soft);}
.hsapp .pstat .c:last-child{border-right:none;}
.hsapp .pstat .c span{display:block;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:4px;}
.hsapp .pstat .c b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.hsapp .psig-c{display:flex;gap:11px;padding:12px 14px;background:#FAFAFB;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;}
.hsapp .psig-c:last-child{margin-bottom:0;}
.hsapp .psig-c .si{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--t2);}
.hsapp .psig-c .si svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hsapp .si-red,.hsapp .si-amber,.hsapp .si-blue{color:var(--t2);background:none;}
.hsapp .psig-c .sb b{font-size:10.5px;font-weight:600;}
.hsapp .psig-c .sb p{font-size:10px;color:var(--t2);line-height:1.5;margin:4px 0 0;}
.hsapp .psig-c .sb .src{display:block;font-size:9.5px;color:var(--t3);margin-top:7px;}
.hsapp .cpanel-x{margin-left:auto;color:var(--t3);cursor:pointer;display:flex;}
.hsapp .cpanel-h{padding:14px 16px;border-bottom:1px solid var(--line);}
.hsapp .cpanel-h .crumb{font-size:9px;color:var(--t3);}
.hsapp .cpanel-h .nm{display:flex;align-items:center;gap:9px;margin-top:7px;}
.hsapp .cpanel-h .nm b{font-size:13px;font-weight:600;letter-spacing:-.01em;}
.hsapp .cpanel-h .nm .meta{display:block;font-size:9.5px;color:var(--t3);margin-top:1px;}
.hsapp .cpanel-sec{padding:13px 16px;border-bottom:1px solid var(--line);}
.hsapp .cpanel-sec:last-child{border-bottom:none;}
.hsapp .cpanel-sec .st{font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:9px;display:flex;justify-content:space-between;}
.hsapp .drow{display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:4px 0;}
.hsapp .drow .dk{color:var(--t2);}
.hsapp .drow .dv{font-weight:500;font-variant-numeric:tabular-nums;color:var(--t1);}
.hsapp .drow .dv.bad{color:var(--over);}
.hsapp .nextc{display:inline-flex;font-size:9px;font-weight:600;color:var(--blue);background:rgba(91,124,255,.10);border-radius:7px;padding:4px 9px;}
.hsapp .case{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-soft);}
.hsapp .case:last-child{border-bottom:none;}
.hsapp .case .cdot{width:6px;height:6px;border-radius:50%;flex:none;}
.hsapp .case .cmid{flex:1;min-width:0;line-height:1.3;}
.hsapp .case .cmid b{font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;}
.hsapp .case .cmid span{display:block;font-size:9px;color:var(--t3);}
.hsapp .case .cv{font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.hsapp .arc{display:flex;flex-direction:column;gap:8px;}
.hsapp .arc-top{display:flex;align-items:center;gap:6px;}
.hsapp .arc-top .seg2{margin-left:auto;display:inline-flex;gap:2px;}
.hsapp .arc-top .seg2 b{font-size:8px;font-weight:600;color:var(--t3);padding:2px 6px;border-radius:5px;}
.hsapp .arc-top .seg2 b.on{background:#16181B;color:#fff;}
.hsapp .arc svg{width:100%;height:64px;}
.hsapp .arc-leg{display:flex;gap:14px;font-size:8.5px;color:var(--t3);}
.hsapp .arc-leg i{font-style:normal;display:inline-flex;align-items:center;gap:5px;}
.hsapp .arc-leg i::before{content:'';width:9px;height:2px;border-radius:2px;background:currentColor;}
.hsapp .scroll > table{margin-left:-26px;width:calc(100% + 52px);}
.hsapp .cscroll > .ctable{margin-left:-26px;width:calc(100% + 52px);}
.hsapp .scroll > table thead th:first-child,.hsapp .scroll > table tbody td:first-child,.hsapp .cscroll > .ctable thead th:first-child,.hsapp .cscroll > .ctable tbody td:first-child{padding-left:26px;}
.hsapp .scroll > table thead th:last-child,.hsapp .scroll > table tbody td:last-child,.hsapp .cscroll > .ctable thead th:last-child,.hsapp .cscroll > .ctable tbody td:last-child{padding-right:26px;}
.hsapp .scroll > table .grp td,.hsapp .cscroll > .ctable .grp td{padding-left:26px;padding-right:26px;}
.hsapp .cbar{display:flex;align-items:center;gap:9px;padding:14px 0 14px;}
.hsapp .cbtn{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:500;color:var(--t1);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap;}
.hsapp .cbtn:hover{background:#FAFBFC;}
.hsapp .cbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--t2);}
.hsapp .cbtn .cv{color:var(--t2);}
.hsapp .cbtn .chev{width:13px;height:13px;color:var(--t3);margin-left:-1px;}
.hsapp .cbtn.io{padding:0;width:34px;height:34px;justify-content:center;}
.hsapp .cbar .sp{flex:1;}
.hsapp .ckpis{display:flex;justify-content:space-between;gap:24px;margin:2px 0 20px;}
.hsapp .ckpi{padding:0;}
.hsapp .ckpi span{display:block;font-size:9.5px;color:var(--t2);margin-bottom:3px;}
.hsapp .ckpi b{font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.hsapp .ckpi i{font-style:normal;font-size:9px;color:var(--t3);margin-left:6px;font-weight:500;}
.hsapp .ckpi i.bad{color:var(--over);font-weight:600;}
.hsapp .ckpi i.good{color:var(--ok);font-weight:600;}
.hsapp .ctable td.asgc{text-align:center;width:54px;}
.hsapp .asg{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;overflow:hidden;position:relative;background:#EAECEF;color:var(--t2);font-size:6.5px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
.hsapp .asg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ===== hero app sizing (overrides .device mapping) ===== */
.hsapp{width:1180px;height:720px;display:grid;grid-template-columns:230px 1fr;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;font-family:var(--font-ui),'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--t1);-webkit-font-smoothing:antialiased;box-shadow:none;}
.hsapp .page{position:relative;}
.hsapp .page[hidden]{display:none;}
/* billing invoice list as animatable div-grid (matches preview table look) */
.hsapp .htbl{margin:8px -26px 0;}
.hsapp .hhead,.hsapp .hrow{display:grid;grid-template-columns:150px minmax(0,1fr) 96px 104px 96px;gap:10px;align-items:center;padding:0 26px;}
.hsapp .hhead{height:34px;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--line);}
.hsapp .hhead .r,.hsapp .hrow .r{text-align:right;justify-self:end;}
.hsapp .hrow{height:42px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--t1);}
.hsapp .hrow.sel{background:#F6F8FF;box-shadow:inset 2px 0 0 var(--blue);}
.hsapp .hgrp{display:flex;align-items:center;justify-content:space-between;padding:9px 26px;background:#FAFBFC;border-bottom:1px solid var(--line);}
.hsapp .hgrp .gh{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;color:var(--t1);}
.hsapp .hgrp .gd{width:7px;height:7px;border-radius:50%;}
.hsapp .hgrp .gc{font-size:9.5px;color:var(--t3);background:#EEEFF2;border-radius:999px;padding:1px 7px;font-weight:600;}
.hsapp .hgrp .gsum{font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t2);}
.hsapp .hrow.hnew{height:0;opacity:0;overflow:hidden;}
.hsapp .hrow.hnew{border-left:2px solid #5FB98A;padding-left:24px;}
.hsapp .hrow .amt{justify-self:end;}
.hsapp .hrow .coll{justify-self:end;}
/* PDF drop overlay (carried over from the old billing preview) */
.hsapp .bzx-dropzone{position:absolute;inset:0;z-index:8;background:rgba(252,252,254,.9);display:flex;align-items:center;justify-content:center;}
.hsapp .bzx-dz-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:24px 48px 20px;border:1.5px dashed rgba(91,124,255,.5);border-radius:16px;background:rgba(91,124,255,.045);}
.hsapp .bzx-dz-ic{width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid #E5E6E9;display:flex;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 2px 8px -2px rgba(16,18,40,.14);}
.hsapp .bzx-dz-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.hsapp .bzx-dz-t{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--t1);}
.hsapp .bzx-dz-s{font-size:10px;color:var(--t2);}
.hsapp .bzx-drag{position:absolute;top:-148px;left:50%;right:auto;z-index:9;pointer-events:none;}
.hsapp .bzx-pdfs{position:relative;width:74px;height:100px;}
.hsapp .bzx-pdf{position:absolute;left:0;top:0;width:74px;height:100px;box-sizing:border-box;background:#fff;border:1px solid #E2E3E6;border-radius:6px;box-shadow:0 12px 28px -8px rgba(16,18,40,.28);padding:9px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.hsapp .bzx-pdf .pdf-tag{font-size:5px;font-weight:700;color:#fff;background:#C0463F;border-radius:2px;padding:1px 3px;letter-spacing:.05em;margin-bottom:3px;}
.hsapp .bzx-pdf .pl{height:2.4px;border-radius:2px;background:#E9EAED;width:100%;}
.hsapp .bzx-pdf .pl.t{height:4px;width:58%;background:#CFD1D6;margin-bottom:1px;}
.hsapp .bzx-pdf .pl.w1{width:92%;}.hsapp .bzx-pdf .pl.w2{width:78%;}.hsapp .bzx-pdf .pl.w3{width:50%;}
.hsapp .bzx-pdf.b1{transform:rotate(3deg);z-index:3;}
.hsapp .bzx-pdf.b2{transform:translate(-9px,-6px) rotate(-4deg);z-index:2;}
.hsapp .bzx-pdf.b3{transform:translate(-17px,-11px) rotate(-9deg);z-index:1;}
.hsapp .bzx-pdf-badge{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px -1px rgba(91,124,255,.5);z-index:5;}
.hsapp .bzx-cursor{position:absolute;left:24px;top:2px;width:20px;height:20px;z-index:7;}
.hsapp .bzx-cursor path{fill:#1a1c1e;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;}
.hsapp .banner{transition:background .42s ease,box-shadow .42s ease;}
.hsapp .banner.is-drafting{background:linear-gradient(90deg,rgba(91,124,255,.16),rgba(91,124,255,.03) 70%),#F4F7FF;box-shadow:0 0 0 1px rgba(91,124,255,.16);}
@keyframes hnumTick{from{opacity:0;transform:translateY(.34em);}to{opacity:1;transform:translateY(0);}}
.hsapp .tick-anim{animation:hnumTick .36s cubic-bezier(.2,.7,.2,1);}
.hsapp [data-tick-to]{display:inline-block;}
.hsapp .bwrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;}
.hsapp .bwrap > .scroll{flex:1;}
/* folded icon-only rail */
.hsapp{grid-template-columns:62px 1fr;}
.hsapp .rail{padding:14px 8px;}
.hsapp .brand{justify-content:center;padding:8px 0 14px;}
.hsapp .brand .lab,.hsapp .brand .chev{display:none;}
.hsapp .nav-sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);}
.hsapp .nav-sec .lbl{display:none;}
.hsapp .nav-i{justify-content:center;gap:0;padding:9px 0;}
.hsapp .nav-i .lab,.hsapp .nav-i .ct{display:none;}
.hsapp .rail-foot{justify-content:center;padding-top:12px;}
.hsapp .rail-foot .who,.hsapp .rail-foot .cog{display:none;}
.hsapp .rail-foot .av{margin:0;}
/* preview: no scrollbars — static frame */
.hsapp .scroll,.hsapp .cscroll,.hsapp .cpanel,.hsapp .main,.hsapp .rail,.hsapp .bwrap{overflow:hidden;}
/* realistic shrink: author larger, scales down in frame */
.hsapp{width:1560px;height:940px;}
.hsapp .htblz{position:relative;}
/* tweaks: new-row highlight + collections selection color */
.hsapp .ctable tbody tr.sel{background:#F4F5F7;box-shadow:inset 2px 0 0 #16181B;}
/* calmer collections palette (less red) */
.hsapp .od{color:var(--t1);font-weight:600;}
.hsapp .l-hot{border-color:#C77B6B;}
/* collections agent-action animation */
.hsapp .ctable tbody tr.lit{background:rgba(91,124,255,.06);box-shadow:inset 2px 0 0 var(--blue);transition:background .5s ease,box-shadow .5s ease;}
.hsapp .cstg{transition:opacity .3s ease;}
.hsapp .cstg.hide{opacity:0;}
.hsapp .ckpi b.ck-tick{animation:hnumTick .42s cubic-bezier(.2,.7,.2,1);}
/* pronounced section headers */
.hsapp .hgrp .gh, .hsapp .ctable .grp .gh{font-size:10px;font-weight:600;color:#15171B;text-transform:uppercase;letter-spacing:.06em;}
.hsapp .hgrp .gh .gc, .hsapp .ctable .grp .gh .gc{letter-spacing:0;text-transform:none;}
.hsapp .ctable .grp .gh{position:relative;padding-left:21px;}
.hsapp .ctable .grp .gh .gd{position:absolute;left:0;top:50%;transform:translateY(-50%);}

/* o2c ring laser */
.o2c-hand{transform-box:view-box;transform-origin:280px 280px;will-change:transform;}
.o2c-hand .hand-arm{stroke-width:1;stroke-linecap:round;}
.o2c-hand .hand-tip{fill:#F6F8FC;opacity:.9;filter:drop-shadow(0 0 1.5px rgba(235,238,244,.85)) drop-shadow(0 0 5px rgba(235,238,244,.45));}
.o2c-trail{stroke:rgba(235,238,244,1);stroke-width:1.5;stroke-linecap:round;fill:none;filter:blur(0.5px);opacity:0;transition:opacity .3s ease;}
@media (prefers-reduced-motion:reduce){.o2c-hand{transition:none;}}
/* mobile hero app: readable left crop */
@media (max-width:768px){.rah-stage{overflow:hidden;}}

/* smooth crossfade between hero views */
.hsapp .main{position:relative;}
.hsapp .page{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;}
.hsapp .page.is-shown{opacity:1;visibility:visible;transition:opacity .45s ease;}
.hsapp .page[hidden]{display:flex;}