/*
 * EarnBill Enterprise Design System
 * Extracted 2026-07-22 from the customers page so the homepage and any future
 * page can share one visual language instead of duplicating 60KB inline.
 * Loaded AFTER styles.css so its rules win where the two overlap.
 */
/* ============================================================
       CUSTOMERS PAGE, "Enterprise Impact Report" Design
       Split hero · Light editorial story · Country tile grid
       2-column FAQ grid · Green CTA
       All colors via site CSS variables for dark mode support
       ============================================================ */

        .eb-wrap {
            max-width: 1160px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* ── HERO: centered, pill badge, animated dot (green+blue) ─ */
        .eb-hero {
            background: var(--color-bg-primary);
            padding: 7rem 0 5rem;
            border-bottom: 1px solid var(--color-border);
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .eb-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 100%;
            background: radial-gradient(ellipse at center top, rgba(34, 197, 94, 0.06) 0%, transparent 65%);
            pointer-events: none;
        }

        .eb-hero-inner {
            position: relative;
            z-index: 1;
            max-width: 860px;
            margin: 0 auto;
        }

        .eb-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 1rem;
            margin-bottom: 2rem;
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.25);
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-accent);
        }

        .eb-hero-badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-accent);
            animation: eb-hero-dot 2s ease-in-out infinite;
        }

        @keyframes eb-hero-dot {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        .eb-hero-h1 {
            font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.04em;
            color: var(--color-text-primary) !important;
            margin-bottom: 1.25rem;
        }

        .eb-hero-sub {
            font-size: 1.0625rem;
            color: var(--color-text-secondary);
            line-height: 1.72;
            max-width: 680px;
            margin: 0 auto 2.5rem;
        }

        .eb-hero-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
            margin-bottom: 2.5rem;
        }

        .eb-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.875rem;
            background: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-text-secondary);
        }

        .eb-pill-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--color-accent);
            flex-shrink: 0;
        }

        .eb-hero-ctas {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ── SUMMARY STRIP: dark navy / blue gradient ────────────── */
        .eb-summary {
            background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a8a 100%);
            border-bottom: 1px solid var(--color-border);
        }

        .eb-summary-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }

        .eb-sum-item {
            padding: 1.75rem 1.5rem;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }

        .eb-sum-val {
            font-size: 1.375rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            display: block;
            letter-spacing: -0.03em;
            font-variant-numeric: tabular-nums;
        }

        .eb-sum-val.green {
            color: #86efac;
        }

        .eb-sum-key {
            font-size: 0.5625rem;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 600;
            display: block;
            margin-top: 5px;
        }

        /* ── STORY: light editorial (NOT dark) ───────────────────── */
        .eb-story {
            background: var(--color-bg-secondary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-story-grid {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 5rem;
            align-items: start;
        }

        .eb-story-side {
            position: sticky;
            top: 6rem;
        }

        .eb-story-side-lbl {
            font-size: 0.5625rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-text-muted);
        }

        .eb-story-yr {
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: -0.04em;
            color: var(--color-border);
            line-height: 1;
            margin-top: 4px;
        }

        .eb-story-body h2 {
            font-size: clamp(1.375rem, 2.5vw, 1.875rem);
            color: var(--color-primary) !important;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.025em;
            margin-bottom: 1.5rem;
            max-width: 580px;
        }

        .eb-story-p {
            font-size: 0.9375rem;
            color: var(--color-text-secondary);
            line-height: 1.85;
            margin-bottom: 1rem;
            max-width: 600px;
        }

        .eb-story-p strong {
            color: var(--color-text-primary);
            font-weight: 600;
        }

        .eb-story-p a {
            color: var(--color-secondary);
            font-weight: 600;
            text-decoration: none;
        }

        .eb-story-p a:hover {
            text-decoration: underline;
        }

        .eb-callout {
            margin-top: 2rem;
            padding: 1.25rem 1.5rem;
            border-left: 3px solid var(--color-accent);
            background: rgba(34, 197, 94, 0.06);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--color-text-primary);
            line-height: 1.55;
            max-width: 580px;
        }

        .eb-story-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 1.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-secondary);
            text-decoration: none;
            transition: color 0.2s;
        }

        .eb-story-link:hover {
            color: var(--color-primary);
        }

        /* ── PRESENCE: country tile grid ────────────────────────── */
        .eb-presence {
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
            padding: 3rem 0;
        }

        .eb-presence-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.25rem;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .eb-presence-title {
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .eb-presence-title::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--color-accent);
            flex-shrink: 0;
            animation: eb-pulse 2.2s ease-in-out infinite;
        }

        .eb-presence-count {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            font-weight: 500;
        }

        .eb-geo-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .eb-geo-tile {
            padding: 1.375rem 0.5rem;
            text-align: center;
            border-right: 1px solid var(--color-border);
            background: var(--color-bg-primary);
            transition: background 0.2s, transform 0.2s;
            cursor: default;
        }

        .eb-geo-tile:nth-child(5),
        .eb-geo-tile:nth-child(10) {
            border-right: none;
        }

        .eb-geo-tile:nth-child(n+6) {
            border-top: 1px solid var(--color-border);
        }

        .eb-geo-tile:hover {
            background: var(--color-bg-secondary);
        }

        .eb-geo-emoji {
            font-size: 1.625rem;
            display: block;
            line-height: 1;
            margin-bottom: 0.375rem;
        }

        .eb-geo-name {
            font-size: 0.5625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-text-muted);
            display: block;
        }

        .eb-geo-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--color-accent);
            margin: 0.375rem auto 0;
            animation: eb-pulse 2.2s ease-in-out infinite;
        }

        @keyframes eb-pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1)
            }

            50% {
                opacity: 0.45;
                transform: scale(0.8)
            }
        }

        /* ── FEATURED DEPLOYMENTS ─────────────────────────────────── */
        .eb-featured {
            background: var(--color-bg-primary);
            padding: 5.5rem 0;
        }

        .eb-section-eyebrow {
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 2.5rem;
        }

        .eb-section-eyebrow::before {
            content: '';
            width: 20px;
            height: 2px;
            background: var(--gradient-primary);
            border-radius: 1px;
            flex-shrink: 0;
        }

        .eb-spread {
            display: grid;
            grid-template-columns: 240px 1fr;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 1.25rem;
            background: var(--color-bg-primary);
            transition: box-shadow 0.25s, border-color 0.25s;
        }

        .eb-spread:hover {
            box-shadow: 0 8px 40px rgba(30, 64, 175, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
        }

        .eb-spread-left {
            padding: 1.875rem 1.625rem;
            background: var(--color-bg-secondary);
            border-right: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .eb-spread-geo {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-text-secondary);
        }

        .eb-spread-geo .f {
            font-size: 1.375rem;
        }

        .eb-stag {
            display: inline-block;
            margin-top: 10px;
            font-size: 0.5625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 3px 8px;
            border-radius: var(--radius-sm);
        }

        .eb-stag.tel {
            background: rgba(30, 64, 175, 0.1);
            color: var(--color-primary);
        }

        .eb-stag.voi {
            background: rgba(249, 115, 22, 0.1);
            color: #c2410c;
        }

        .eb-stag.gov {
            background: var(--color-bg-secondary);
            color: var(--color-text-secondary);
            border: 1px solid var(--color-border);
        }

        .eb-stag.cld {
            background: rgba(109, 40, 217, 0.1);
            color: #7c3aed;
        }

        .eb-stag.med {
            background: rgba(234, 179, 8, 0.1);
            color: #92400e;
        }

        .eb-spread-since-lbl {
            font-size: 0.5625rem;
            color: var(--color-text-muted);
            margin-top: auto;
            padding-top: 1.25rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
        }

        .eb-spread-since {
            font-size: 1.125rem;
            font-weight: 800;
            color: var(--color-text-primary);
            letter-spacing: -0.02em;
            display: block;
        }

        .eb-spread-right {
            padding: 1.875rem 2rem;
        }

        .eb-spread-right h3 {
            font-size: 1.0625rem;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 0.5rem;
            letter-spacing: -0.01em;
        }

        .eb-spread-right p {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            line-height: 1.75;
            max-width: 520px;
            margin-bottom: 1.25rem;
        }

        .eb-metrics {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.25rem;
            flex-wrap: wrap;
        }

        .eb-m-val {
            font-size: 1.125rem;
            font-weight: 800;
            color: var(--color-text-primary);
            line-height: 1;
            letter-spacing: -0.02em;
        }

        .eb-m-lbl {
            font-size: 0.5rem;
            color: var(--color-text-muted);
            font-weight: 600;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .eb-spread-cta {
            padding-top: 1rem;
            border-top: 1px solid var(--color-border);
        }

        .eb-spread-cta a {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--color-primary);
            text-decoration: none;
        }

        .eb-spread-cta a:hover {
            text-decoration: underline;
        }

        /* ── REGISTRY TABLE ───────────────────────────────────────── */
        .eb-registry {
            background: var(--color-bg-secondary);
            padding: 5.5rem 0;
        }

        .eb-registry-hdr {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 2rem;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .eb-registry-hdr-left p {
            color: var(--color-text-muted);
            font-size: 0.875rem;
            margin-top: 4px;
        }

        .eb-registry-hdr-left h2 {
            font-size: 1.625rem;
            font-weight: 700;
            color: var(--color-primary) !important;
            letter-spacing: -0.025em;
        }

        .eb-registry-hdr-right {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            text-align: right;
            max-width: 300px;
            line-height: 1.55;
        }

        .eb-reg-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
        }

        .eb-reg-table {
            width: 100%;
            min-width: 920px;
            border-collapse: collapse;
            background: var(--color-bg-primary);
            table-layout: fixed;
        }

        /* Column widths: wider Excerpt, tighter End Customer + Deployment Year */
        .eb-reg-table thead th:nth-child(1), .eb-reg-table td:nth-child(1) { width: 12%; }  /* Contracted Customer */
        .eb-reg-table thead th:nth-child(2), .eb-reg-table td:nth-child(2) { width: 11%; }  /* End Customer */
        .eb-reg-table thead th:nth-child(3), .eb-reg-table td:nth-child(3) { width: 11%; }  /* Region */
        .eb-reg-table thead th:nth-child(4), .eb-reg-table td:nth-child(4) { width: 14%; }  /* Vertical */
        .eb-reg-table thead th:nth-child(5), .eb-reg-table td:nth-child(5) { width: 7%; }   /* Deployment Year */
        .eb-reg-table thead th:nth-child(6), .eb-reg-table td:nth-child(6) { width: 32%; }  /* Excerpt */
        .eb-reg-table thead th:nth-child(7), .eb-reg-table td:nth-child(7) { width: 13%; }  /* Case Study */

        .eb-reg-table td { overflow-wrap: break-word; word-wrap: break-word; }

        /* Mobile-only hint that the table scrolls sideways */
        .eb-reg-scrollhint {
            display: none;
            align-items: center;
            gap: 6px;
            margin-top: 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-text-muted);
        }

        .eb-reg-table thead th {
            font-size: 0.5625rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            text-align: left;
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg-secondary);
            white-space: normal;
        }

        .eb-reg-table tbody tr {
            border-bottom: 1px solid var(--color-border);
            transition: background 0.15s;
        }

        .eb-reg-table tbody tr:last-child {
            border-bottom: none;
        }

        .eb-reg-table tbody tr:hover {
            background: var(--color-bg-secondary);
        }

        .eb-reg-table td {
            padding: 0.9375rem 1rem;
            vertical-align: middle;
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
        }

        .eb-reg-geo {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            color: var(--color-text-primary);
            white-space: nowrap;
        }

        .eb-reg-geo .f {
            font-size: 1rem;
        }

        .eb-rtag {
            display: inline-block;
            font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            padding: 4px 8px;
            border-radius: var(--radius-sm, 4px);
            border: 1px solid var(--color-border);
            white-space: nowrap;
            line-height: 1.35;
        }

        .eb-rtag.tel {
            background: rgba(30, 64, 175, 0.1);
            color: var(--color-primary);
        }

        .eb-rtag.isp {
            background: rgba(22, 163, 74, 0.1);
            color: #15803d;
        }

        .eb-rtag.fin {
            background: rgba(16, 185, 129, 0.1);
            color: #065f46;
        }

        .eb-rtag.gov {
            background: rgba(100, 116, 139, 0.1);
            color: var(--color-text-secondary);
        }

        .eb-rtag.cld {
            background: rgba(109, 40, 217, 0.1);
            color: #7c3aed;
        }

        .eb-rtag.voi {
            background: rgba(249, 115, 22, 0.1);
            color: #c2410c;
        }

        .eb-rtag.log {
            background: rgba(244, 63, 94, 0.1);
            color: #be123c;
        }

        .eb-reg-desc {
            color: var(--color-text-muted);
            max-width: 640px;
            line-height: 1.5;

        }

        .eb-reg-yr {
            font-weight: 700;
            color: var(--color-text-primary);
            max-width: 150px;
            font-variant-numeric: tabular-nums;
        }

        /* Contracted customer: secondary emphasis */
        .eb-reg-cust {
            font-weight: 600;
            color: var(--color-text-secondary);
            white-space: normal;
        }

        /* End customer name: primary anchor of each row */
        .eb-reg-name {
            font-weight: 700;
            color: var(--color-text-primary);
            white-space: nowrap;
        }

        /* Placeholder for names still to be supplied */
        .eb-reg-tbd {
            font-style: italic;
            font-weight: 500;
            color: var(--color-text-muted);
            opacity: 0.7;
        }

        .eb-reg-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--color-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-thickness: 1px;
            font-weight: 600;
            font-size: 0.75rem;
            white-space: nowrap;
            transition: color 0.15s;
        }

        .eb-reg-link .eb-reg-arrow {
            font-size: 0.875rem;
            line-height: 1;
        }

        .eb-reg-link:hover {
            color: var(--color-secondary);
        }

        /* Empty case-study cell */
        .eb-reg-na {
            color: var(--color-text-muted);
            opacity: 0.45;
        }

        /* ── CONTRACTED CUSTOMER LOGOS ────────────────────────────── */
        .eb-clients {
            background: var(--color-bg-secondary);
            border-top: 1px solid var(--color-border);
            padding: 4.5rem 0;
        }

        .eb-clients-label {
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-text-muted);
            text-align: center;
            margin-bottom: 2rem;
        }

        .eb-clients-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 1.25rem 1.5rem;
        }

        .eb-clogo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 220px;
            height: 120px;
            padding: 0 2rem;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
        }

        .eb-clogo:hover {
            border-color: var(--color-accent);
            box-shadow: var(--shadow-card-hover);
            transform: translateY(-3px);
        }

        .eb-clogo img {
            max-height: 72px;
            max-width: 180px;
            object-fit: contain;
            filter: grayscale(1);
            opacity: 0.7;
            transition: filter 0.2s, opacity 0.2s;
        }

        .eb-clogo:hover img {
            filter: grayscale(0);
            opacity: 1;
        }

        .eb-clogo-text {
            font-size: 1.625rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        .eb-clogo:hover .eb-clogo-text {
            color: var(--color-primary);
        }

        @media (max-width: 540px) {
            .eb-clogo {
                min-width: 150px;
                height: 92px;
                padding: 0 1.25rem;
            }

            .eb-clogo img {
                max-height: 52px;
                max-width: 130px;
            }

            .eb-clogo-text {
                font-size: 1.25rem;
            }
        }

        /* ── DIRECT CUSTOMERS ─────────────────────────────────────── */
        .eb-direct {
            background: var(--color-bg-primary);
            padding: 5.5rem 0;
        }

        .eb-direct-hdr {
            margin-bottom: 2.5rem;
        }

        .eb-direct-hdr h2 {
            font-size: 1.625rem;
            font-weight: 700;
            color: var(--color-text-primary) !important;
            letter-spacing: -0.025em;
            margin-top: 0.5rem;
        }

        .eb-direct-hdr-sub {
            color: var(--color-text-secondary);
            font-size: 0.9375rem;
            margin-top: 0.5rem;
            max-width: 520px;
        }

        .eb-direct-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }

        .eb-dcard {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 1.875rem;
            background: var(--color-bg-primary);
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
        }

        .eb-dcard:hover {
            box-shadow: 0 10px 36px rgba(30, 64, 175, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-3px);
        }

        .eb-dcard-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem;
        }

        .eb-dcard-badge {
            font-size: 0.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-accent);
            padding: 3px 8px;
            background: rgba(34, 197, 94, 0.1);
            border-radius: var(--radius-sm);
        }

        .eb-dcard-flag {
            font-size: 1.5rem;
        }

        .eb-dcard h3 {
            font-size: 1.0625rem;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 0.5rem;
        }

        .eb-dcard p {
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            line-height: 1.65;
            flex: 1;
        }

        .eb-dcard-metrics {
            display: flex;
            gap: 1.5rem;
            padding-top: 1.125rem;
            border-top: 1px solid var(--color-border);
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        .eb-dm-val {
            font-size: 1rem;
            font-weight: 800;
            color: var(--color-text-primary);
            line-height: 1;
        }

        .eb-dm-lbl {
            font-size: 0.5rem;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-top: 3px;
        }

        /* ── TRUST STRIP ──────────────────────────────────────────── */
        .eb-trust {
            background: var(--color-bg-secondary);
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
            padding: 1.75rem 0;
        }

        .eb-trust-inner {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            flex-wrap: wrap;
        }

        .eb-trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-text-secondary);
        }

        .eb-trust-badge {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.4375rem;
            font-weight: 800;
            color: #fff;
            background: var(--color-primary);
            letter-spacing: 0.02em;
            text-align: center;
            line-height: 1.1;
        }

        /* ── FAQ: centered header + 2-column grid accordion ──────── */
        /* (KEY DIFFERENCE from partners' sidebar layout) */
        .eb-faq {
            background: var(--color-bg-primary);
            padding: 5.5rem 0;
        }

        .eb-faq-hdr {
            text-align: center;
            margin-bottom: 3rem;
        }

        .eb-faq-hdr .eb-section-eyebrow {
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .eb-faq-hdr h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            color: var(--color-primary) !important;
            letter-spacing: -0.03em;
        }

        .eb-faq-hdr p {
            color: var(--color-text-muted);
            font-size: 0.9375rem;
            margin-top: 0.625rem;
            max-width: 460px;
            margin-left: auto;
            margin-right: auto;
        }

        .eb-faq-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 3.5rem;
        }

        .eb-faq-item {
            border-bottom: 1px solid var(--color-border);
        }

        .eb-faq-item summary {
            cursor: pointer;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--color-text-primary);
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.125rem 0;
        }

        .eb-faq-item summary::-webkit-details-marker {
            display: none;
        }

        .eb-faq-item summary::after {
            content: '+';
            font-size: 1.25rem;
            color: var(--color-text-muted);
            flex-shrink: 0;
            margin-left: 1rem;
            font-weight: 400;
        }

        .eb-faq-item[open] summary::after {
            content: '−';
            color: var(--color-accent);
        }

        .eb-faq-item p {
            font-size: 0.875rem;
            color: var(--color-text-secondary);
            line-height: 1.78;
            padding-bottom: 1.25rem;
            margin-bottom: 0;
        }

        /* ── CTA: BLUE gradient ──────────────────────────────────── */
        .eb-cta {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            padding: 5.5rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .eb-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 200%;
            background: radial-gradient(ellipse, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
            pointer-events: none;
        }

        .eb-cta-inner {
            position: relative;
            z-index: 1;
        }

        .eb-cta h2 {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            color: #fff !important;
            font-weight: 700;
            letter-spacing: -0.025em;
            margin-bottom: 0.75rem;
        }

        .eb-cta p {
            /* was rgba(255,255,255,.65) at 0.9375rem, which fell short of WCAG AA
               on the blue gradient. Raised opacity and size for legibility. */
            color: rgba(255, 255, 255, 0.92);
            max-width: 620px;
            margin: 0 auto 2rem;
            font-size: 1.0625rem;
            line-height: 1.7;
        }

        .eb-cta-btns {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .eb-cta-white {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0.9375rem 2rem;
            background: #fff;
            color: var(--color-primary) !important;
            border: none;
            border-radius: var(--radius-button);
            font-weight: 700;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.2s;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .eb-cta-white:hover {
            background: rgba(255, 255, 255, 0.92);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }

        .eb-ghost-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0.9375rem 1.875rem;
            background: transparent;
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: var(--radius-button);
            font-weight: 600;
            font-size: 0.9375rem;
            text-decoration: none;
            transition: all 0.2s;
        }

        .eb-ghost-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.55);
            color: #fff;
        }

        /* ── RESPONSIVE ───────────────────────────────────────────── */
        /* ── TESTIMONIAL ──────────────────────────────────────────── */
        .eb-testimonial {
            background: var(--color-bg-secondary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-test-hdr {
            text-align: center;
            margin-bottom: 3rem;
        }

        .eb-test-hdr .eb-section-eyebrow {
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .eb-test-hdr h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            color: var(--color-primary) !important;
            letter-spacing: -0.03em;
        }

        .eb-test-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2.5rem;
            align-items: start;
        }

        .eb-quote-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .eb-quote-mark {
            position: absolute;
            top: 1.25rem;
            left: 1.75rem;
            font-size: 4rem;
            line-height: 1;
            font-family: Georgia, serif;
            color: var(--color-primary);
            opacity: 0.12;
            font-weight: 700;
            pointer-events: none;
        }

        .eb-quote-text {
            font-size: 1.0625rem;
            line-height: 1.82;
            font-style: italic;
            color: var(--color-text-primary);
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
            padding-top: 1.25rem;
        }

        .eb-quote-attr {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding-top: 1.25rem;
            border-top: 1px solid var(--color-border);
        }

        .eb-quote-photo,
        .eb-quote-photo-fallback {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            flex-shrink: 0;
            object-fit: cover;
            border: 2px solid var(--color-border);
        }

        .eb-quote-photo-fallback {
            display: none;
            align-items: center;
            justify-content: center;
            background: var(--gradient-accent);
            color: #fff;
            font-weight: 800;
            font-size: 1.125rem;
            letter-spacing: 0.02em;
        }

        .eb-quote-meta {
            min-width: 0;
        }

        .eb-quote-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-primary);
            display: block;
            margin-bottom: 0.25rem;
        }

        .eb-quote-role {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            display: block;
        }

        .eb-quote-linkedin {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-secondary);
            text-decoration: none;
            transition: color 0.15s;
        }

        .eb-quote-linkedin:hover {
            color: var(--color-primary);
            text-decoration: underline;
        }

        .eb-video-wrap {
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-card);
        }

        .eb-video-inner {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }

        .eb-video-inner iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .eb-video-lbl {
            padding: 0.875rem 1.25rem;
            background: var(--color-bg-primary);
            border-top: 1px solid var(--color-border);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .eb-video-lbl::before {
            content: '▶';
            font-size: 0.5625rem;
            color: #ef4444;
            font-style: normal;
        }

        .eb-video-attr {
            padding: 1.125rem 1.25rem 1.375rem;
            background: var(--color-bg-primary);
            border-top: 1px solid var(--color-border);
        }

        /* ── CUSTOMER TESTIMONIAL CAROUSEL (Chargebee-style) ───────── */
        .eb-tc {
            background: var(--color-bg-primary);
            border-top: 1px solid var(--color-border);
            padding: 5.5rem 0 6rem;
        }

        .eb-tc-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .eb-tc-head h2 {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--color-primary) !important;
        }

        .eb-tc-head p {
            color: var(--color-text-muted);
            font-size: 0.9375rem;
            margin-top: 0.375rem;
        }

        .eb-tc-nav {
            display: flex;
            align-items: center;
            gap: 0.875rem;
        }

        .eb-tc-arrow {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--color-border);
            background: var(--color-bg-primary);
            color: var(--color-text-secondary);
            font-size: 1rem;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .eb-tc-arrow:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
            transform: translateY(-1px);
        }

        .eb-tc-dots {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .eb-tc-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            padding: 0;
            cursor: pointer;
            background: var(--color-border);
            transition: background 0.2s, transform 0.2s;
        }

        .eb-tc-dot.active {
            background: var(--color-accent);
            transform: scale(1.2);
        }

        .eb-tc-viewport {
            overflow: hidden;
            border-radius: var(--radius-xl);
        }

        .eb-tc-track {
            display: flex;
            transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .eb-tc-slide {
            flex: 0 0 100%;
            min-width: 100%;
        }

        .eb-tc-panel {
            display: grid;
            grid-template-columns: 340px 1fr;
            align-items: stretch;
            min-height: 400px;
            background: linear-gradient(115deg, var(--color-bg-secondary) 0%, rgba(34, 197, 94, 0.07) 60%, rgba(30, 64, 175, 0.06) 100%);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            overflow: hidden;
        }

        .eb-tc-visual {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background: var(--color-bg-secondary);
        }

        .eb-tc-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(1);
        }

        .eb-tc-monogram {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.875rem;
            width: 100%;
            align-self: stretch;
            color: var(--color-text-muted);
        }

        .eb-tc-monogram-circle {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-accent);
            color: #fff;
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: 0.01em;
        }

        .eb-tc-monogram span {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .eb-tc-content {
            padding: 2.75rem 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .eb-tc-mark {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 4.5rem;
            line-height: 0.8;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 1rem;
            display: block;
        }

        .eb-tc-quote {
            font-size: 1.3125rem;
            line-height: 1.55;
            color: var(--color-text-primary);
            font-weight: 500;
            margin-bottom: 1.75rem;
        }

        .eb-tc-quote strong {
            font-weight: 800;
        }

        .eb-tc-placeholder-q {
            color: var(--color-text-muted);
            font-style: italic;
            font-weight: 500;
        }

        .eb-tc-name {
            font-size: 1.0625rem;
            font-weight: 800;
            color: var(--color-accent);
            margin-bottom: 0.25rem;
        }

        .eb-tc-role {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            line-height: 1.45;
        }

        .eb-tc-foot {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
        }

        .eb-tc-logo {
            font-weight: 800;
            font-size: 1.125rem;
            letter-spacing: -0.02em;
            color: var(--color-text-secondary);
            opacity: 0.85;
        }

        .eb-tc-logo-img {
            height: 65px;
            max-width: 350px;
            object-fit: contain;
            background: #fff;
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid var(--color-border);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        }

        .eb-tc-li {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-secondary);
            text-decoration: none;
        }

        .eb-tc-li:hover {
            color: var(--color-primary);
            text-decoration: underline;
        }

        /* Video slide variant */
        .eb-tc-panel.is-video {
            display: block;
            padding: 2.5rem;
        }

        .eb-tc-video {
            position: relative;
            width: 100%;
            max-width: 720px;
            margin: 0 auto;
            aspect-ratio: 16 / 9;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-card);
            background: #000;
        }

        .eb-tc-video iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        .eb-tc-video-cap {
            max-width: 720px;
            margin: 1.5rem auto 0;
            text-align: center;
        }

        @media (max-width: 860px) {
            .eb-tc-panel {
                grid-template-columns: 1fr;
            }

            .eb-tc-visual {
                height: 260px;
            }

            .eb-tc-visual img {
                object-position: center top;
            }

            .eb-tc-content {
                padding: 2rem 1.75rem 2.25rem;
            }

            .eb-tc-quote {
                font-size: 1.125rem;
            }
        }

        /* ── INDUSTRY VERTICALS ───────────────────────────────────── */
        .eb-industries {
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-ind-hdr {
            margin-bottom: 3rem;
        }

        .eb-ind-hdr h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            letter-spacing: -0.03em;
            color: var(--color-primary) !important;
            margin: 0.75rem 0 0.625rem;
        }

        .eb-ind-hdr p {
            font-size: 0.9375rem;
            color: var(--color-text-muted);
            max-width: 580px;
        }

        .eb-ind-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.25rem;
        }

        .eb-ind-card {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--color-bg-primary);
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
        }

        .eb-ind-card:hover {
            box-shadow: 0 8px 32px rgba(30, 64, 175, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-2px);
        }

        .eb-ind-top {
            padding: 1.5rem 1.5rem 1.25rem;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg-secondary);
        }

        .eb-ind-icon {
            font-size: 1.5rem;
            display: block;
            margin-bottom: 0.75rem;
        }

        .eb-ind-top h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 0.25rem;
            line-height: 1.25;
        }

        .eb-ind-sub {
            font-size: 0.6875rem;
            color: var(--color-text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .eb-ind-body {
            padding: 1.25rem 1.5rem;
            flex: 1;
        }

        .eb-ind-proof {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .eb-ind-proof li {
            font-size: 0.8125rem;
            color: var(--color-text-secondary);
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: flex-start;
            gap: 0.625rem;
            line-height: 1.45;
        }

        .eb-ind-proof li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .eb-ind-proof li::before {
            content: '✓';
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            background: rgba(34, 197, 94, 0.12);
            border-radius: 50%;
            font-size: 0.5rem;
            color: var(--color-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
            font-weight: 700;
            line-height: 1;
        }

        .eb-ind-foot {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--color-border);
        }

        .eb-ind-foot a {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--color-secondary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .eb-ind-foot a:hover {
            color: var(--color-primary);
        }

        /* ── COMPETITIVE POSITIONING ──────────────────────────────── */
        .eb-compete {
            background: var(--color-bg-secondary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-compete-hdr {
            max-width: 620px;
            margin-bottom: 3rem;
        }

        .eb-compete-hdr h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            letter-spacing: -0.03em;
            color: var(--color-primary) !important;
            margin: 0.75rem 0 0.625rem;
        }

        .eb-compete-hdr p {
            font-size: 0.9375rem;
            color: var(--color-text-muted);
        }

        .eb-compare-table {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .eb-cmp-head {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        }

        .eb-cmp-head-cell {
            padding: 1rem 1.25rem;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.75);
            border-right: 1px solid rgba(255, 255, 255, 0.15);
        }

        .eb-cmp-head-cell:last-child {
            border-right: none;
            color: #86efac;
        }

        .eb-cmp-row {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            border-bottom: 1px solid var(--color-border);
            background: var(--color-bg-primary);
            transition: background 0.15s;
        }

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

        .eb-cmp-row:hover {
            background: var(--color-bg-secondary);
        }

        .eb-cmp-cell {
            padding: 1rem 1.25rem;
            font-size: 0.9375rem;
            border-right: 1px solid var(--color-border);
            color: var(--color-text-secondary);
            vertical-align: middle;
        }

        .eb-cmp-cell:first-child {
            font-weight: 600;
            color: var(--color-text-primary);
        }

        .eb-cmp-cell:last-child {
            border-right: none;
        }

        .eb-cmp-yes {
            color: var(--color-accent);
            font-weight: 700;
        }

        .eb-cmp-no {
            color: var(--color-text-muted);
        }

        .eb-cmp-partial {
            color: #f59e0b;
            font-weight: 600;
        }

        /* ── ROI / BUSINESS CASE ──────────────────────────────────── */
        .eb-roi {
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-roi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5rem;
            align-items: start;
        }

        .eb-roi-txt .eb-section-eyebrow {
            margin-bottom: 0.875rem;
        }

        .eb-roi-txt h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            letter-spacing: -0.03em;
            color: var(--color-primary) !important;
            margin: 0 0 1rem;
        }

        .eb-roi-txt p {
            font-size: 0.9375rem;
            color: var(--color-text-secondary);
            line-height: 1.78;
            margin-bottom: 0.875rem;
        }

        .eb-roi-txt p strong {
            color: var(--color-text-primary);
            font-weight: 600;
        }

        .eb-roi-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--color-border);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .eb-roi-m {
            background: var(--color-bg-primary);
            padding: 1.75rem 1.5rem;
        }

        .eb-roi-m-val {
            font-size: 2rem;
            font-weight: 800;
            color: var(--color-primary);
            display: block;
            letter-spacing: -0.04em;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .eb-roi-m-lbl {
            font-size: 0.75rem;
            color: var(--color-text-secondary);
            font-weight: 600;
            margin-top: 0.5rem;
            display: block;
            line-height: 1.4;
        }

        .eb-roi-m-note {
            font-size: 0.625rem;
            color: var(--color-text-muted);
            margin-top: 0.375rem;
            display: block;
            line-height: 1.4;
        }

        /* ── ENTERPRISE PROCESS ───────────────────────────────────── */
        .eb-process {
            background: var(--color-bg-secondary);
            border-bottom: 1px solid var(--color-border);
            padding: 5.5rem 0;
        }

        .eb-proc-hdr {
            text-align: center;
            margin-bottom: 3.5rem;
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
        }

        .eb-proc-hdr .eb-section-eyebrow {
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .eb-proc-hdr h2 {
            font-size: clamp(1.625rem, 3vw, 2.125rem);
            letter-spacing: -0.03em;
            color: var(--color-primary) !important;
        }

        .eb-proc-hdr p {
            font-size: 0.9375rem;
            color: var(--color-text-muted);
            margin-top: 0.625rem;
        }

        .eb-proc-steps {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            position: relative;
        }

        .eb-proc-steps::before {
            content: '';
            position: absolute;
            top: 2rem;
            left: calc(10% + 1rem);
            right: calc(10% + 1rem);
            height: 1px;
            background: var(--color-border);
            z-index: 0;
        }

        .eb-proc-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0 0.75rem;
            position: relative;
            z-index: 1;
        }

        .eb-proc-num {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            background: var(--color-bg-primary);
            border: 2px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.0625rem;
            font-weight: 800;
            color: var(--color-primary);
            margin-bottom: 1.25rem;
            flex-shrink: 0;
            transition: border-color 0.2s, background 0.2s;
        }

        .eb-proc-step:hover .eb-proc-num {
            border-color: var(--color-primary);
            background: rgba(30, 64, 175, 0.06);
        }

        .eb-proc-step h3 {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 0.5rem;
        }

        .eb-proc-step p {
            font-size: 0.75rem;
            color: var(--color-text-muted);
            line-height: 1.6;
            margin-bottom: 0.5rem;
        }

        .eb-proc-time {
            font-size: 0.5625rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--color-secondary);
            background: rgba(59, 130, 246, 0.08);
            padding: 2px 8px;
            border-radius: var(--radius-full);
        }

        @media (max-width: 1100px) {
            .eb-story-grid {
                grid-template-columns: 160px 1fr;
                gap: 3rem;
            }

            .eb-faq-2col {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .eb-test-grid {
                grid-template-columns: 1fr;
            }

            .eb-roi-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .eb-ind-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .eb-proc-steps {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }

            .eb-proc-steps::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .eb-spread {
                grid-template-columns: 1fr;
            }

            /* Registry table: keep all columns, tighten + show scroll hint */
            .eb-reg-table {
                min-width: 820px;
            }

            .eb-reg-table thead th,
            .eb-reg-table td {
                padding: 0.75rem 0.75rem;
            }

            .eb-reg-desc {
                max-width: 220px;
            }

            .eb-reg-scrollhint {
                display: flex;
            }

            .eb-registry-hdr-right {
                text-align: left;
            }

            .eb-spread-left {
                border-right: none;
                border-bottom: 1px solid var(--color-border);
            }

            .eb-direct-grid {
                grid-template-columns: 1fr 1fr;
            }

            .eb-story-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .eb-story-side {
                position: relative;
                top: auto;
            }

            .eb-geo-grid {
                grid-template-columns: repeat(5, 1fr);
            }

            .eb-geo-name {
                display: none;
            }

            .eb-geo-emoji {
                font-size: 1.375rem;
                margin-bottom: 0;
            }

            .eb-featured,
            .eb-registry,
            .eb-direct,
            .eb-faq,
            .eb-story,
            .eb-presence,
            .eb-testimonial,
            .eb-industries,
            .eb-compete,
            .eb-roi,
            .eb-process {
                padding: 4rem 0;
            }

            .eb-hero {
                padding: 5rem 0 3.5rem;
            }

            .eb-summary-grid {
                grid-template-columns: 1fr 1fr;
            }

            .eb-sum-item {
                border-right: 1px solid rgba(255, 255, 255, 0.1);
            }

            .eb-sum-item:nth-child(even) {
                border-right: none;
            }

            .eb-sum-item:nth-child(n+3) {
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }

            .eb-cmp-head,
            .eb-cmp-row {
                grid-template-columns: 1fr 1fr 1fr;
            }

            .eb-cmp-head-cell:nth-child(2),
            .eb-cmp-cell:nth-child(2) {
                display: none;
            }

            .eb-ind-grid {
                grid-template-columns: 1fr 1fr;
            }

            .eb-proc-steps {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 540px) {
            .eb-wrap {
                padding: 0 1.25rem;
            }

            .eb-direct-grid {
                grid-template-columns: 1fr;
            }

            .eb-geo-grid {
                grid-template-columns: repeat(5, 1fr);
            }

            .eb-geo-tile {
                padding: 1rem 0.25rem;
            }

            .eb-hero-mini {
                grid-template-columns: repeat(4, 1fr);
            }

            .eb-summary-grid {
                grid-template-columns: 1fr;
            }

            .eb-sum-item {
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
        }

/* ==========================================================================
   DARK MODE CORRECTIONS (2026-07-22)

   The system inherits theme variables correctly, but several accents use
   --color-primary (a deep navy blue) which drops below usable contrast on
   dark surfaces. These override the accent colours only; layout is untouched.
   ========================================================================== */

[data-theme="dark"] .eb-section-eyebrow,
[data-theme="dark"] .eb-ind-foot,
[data-theme="dark"] .eb-story-link,
[data-theme="dark"] .eb-clients-label a,
[data-theme="dark"] .eb-lede a,
[data-theme="dark"] .eb-faq-item p a,
[data-theme="dark"] .eb-ind-icon {
    color: #7DA6FF;
}

[data-theme="dark"] .eb-h2,
[data-theme="dark"] .eb-ind-hdr,
[data-theme="dark"] .eb-roi-m-val {
    color: #9CC0FF;
}

[data-theme="dark"] .eb-clients-label {
    color: rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] .eb-ind-card:hover {
    border-color: #7DA6FF;
}

/* Logo tiles keep a light plate so customer marks stay legible on dark */
[data-theme="dark"] .eb-clogo {
    background: #F4F6FB;
}

[data-theme="dark"] .eb-clogo-text {
    color: #1E293B;
}

/* ==========================================================================
   HOMEPAGE HERO (2026-07-22)

   Deliberately NOT .eb-hero. The customers page opens centred and proof-led
   (badge, big centred headline, stat band, logo wall) because its job is to
   prove the track record. The homepage has a different job: say what the
   product is and who it is for. So it opens asymmetric and product-led, with
   the stack panel carrying the visual weight instead of a stat band.
   Shares the same type scale, colours and buttons as the rest of the system.
   ========================================================================== */

.eb-home-hero {
    padding: 4.5rem 0 3.5rem;
    background:
        radial-gradient(1100px 480px at 78% -8%, rgba(37, 99, 235, 0.10), transparent 62%),
        linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    border-bottom: 1px solid var(--color-border);
}

.eb-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
}

.eb-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 1.25rem;
}

.eb-home-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
}

.eb-home-h1 {
    font-size: clamp(2.1rem, 4.1vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 1.25rem;
}

.eb-home-h1 em {
    font-style: normal;
    color: var(--color-secondary);
}

.eb-home-sub {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    max-width: 40rem;
    margin: 0 0 2rem;
}

.eb-home-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

/* Inline proof line, deliberately typographic rather than a stat band so the
   homepage does not reuse the customers page's full-bleed strip. */
.eb-home-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.15rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.eb-home-proof b {
    color: var(--color-text-primary);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.eb-home-proof span[aria-hidden] {
    color: var(--color-border-strong, #cbd5e1);
}

/* Slim single-row logo strip. The customers page uses full logo cards; here
   the marks sit small and quiet under the hero. */
.eb-home-logos {
    padding: 1.5rem 0;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

.eb-home-logos-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
}

.eb-home-logos-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}

.eb-home-logos img {
    height: 26px;
    width: auto;
    opacity: 0.62;
    filter: grayscale(100%);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.eb-home-logos a:hover img {
    opacity: 1;
    filter: grayscale(0);
}

.eb-home-logos-text {
    font-size: 0.9375rem;
    font-weight: 750;
    color: var(--color-text-muted);
    text-decoration: none;
}

@media (max-width: 980px) {
    .eb-home-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .eb-home-hero {
        padding: 3rem 0 2.5rem;
    }
}

[data-theme="dark"] .eb-home-logos img {
    filter: grayscale(100%) invert(1) brightness(1.6);
    opacity: 0.55;
}

[data-theme="dark"] .eb-home-logos a:hover img {
    filter: grayscale(100%) invert(1) brightness(1.9);
    opacity: 1;
}

/* ==========================================================================
   HERO STACK PANEL (2026-07-22)

   Carries the visual weight of the homepage hero in place of a stat band.
   These rules previously lived in the Gate-2 layer in styles.css and were
   lost when that layer was removed during the design-system extraction.
   ========================================================================== */

.eb-hero-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 18px);
    box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.eb-hero-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.eb-hero-panel-head strong {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.eb-hero-panel-head em {
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #16A34A;
    background: rgba(22, 163, 74, 0.10);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.eb-hero-rows {
    display: flex;
    flex-direction: column;
}

.eb-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.05rem 1.4rem;
    border-bottom: 1px solid var(--color-border);
}

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

.eb-hero-row b {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.35;
}

.eb-hero-row small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.eb-hero-row i {
    font-style: normal;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-secondary);
    background: rgba(37, 99, 235, 0.09);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

[data-theme="dark"] .eb-hero-panel {
    background: var(--color-bg-secondary);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .eb-hero-row i {
    background: rgba(125, 166, 255, 0.14);
    color: #9CC0FF;
}

[data-theme="dark"] .eb-hero-panel-head em {
    background: rgba(34, 197, 94, 0.16);
    color: #4ADE80;
}

@media (max-width: 520px) {
    .eb-hero-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .eb-hero-row i {
        justify-self: start;
    }
}

/* Keep each stat and its label together so the phrase never splits mid-wrap. */
.eb-home-proof .eb-hp-item {
    white-space: nowrap;
}

/* Effects360 has no logo asset, so it renders as a wordmark. Match the weight
   and opacity of the greyscale image logos beside it. */
.eb-home-logos-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-muted);
    opacity: 0.62;
    letter-spacing: -0.01em;
    transition: opacity 0.25s ease;
}

.eb-home-logos a.eb-home-logos-text:hover {
    opacity: 1;
}

/* ==========================================================================
   INTERACTIVE COMPONENTS (2026-07-22)

   Three sections previously reused the same card grid, which read as one
   repeated block and left an orphaned 4+2 row. Each now has its own
   treatment: the platform is an interactive explorer, verticals are a
   compact icon grid, and the FAQ is an accordion.
   ========================================================================== */

/* ---------- Capability explorer (tabs) ---------- */
.eb-explorer {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 2rem;
    align-items: start;
}

.eb-exp-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-left: 2px solid var(--color-border);
    padding-left: 0.75rem;
}

.eb-exp-tab {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-md, 10px);
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 650;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.eb-exp-tab svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.75;
}

.eb-exp-tab:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.eb-exp-tab[aria-selected="true"] {
    background: var(--color-bg-secondary);
    color: var(--color-secondary);
    box-shadow: inset 3px 0 0 var(--color-secondary);
}

.eb-exp-tab[aria-selected="true"] svg {
    opacity: 1;
}

.eb-exp-tab:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.eb-exp-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 14px);
    padding: 2.25rem;
    min-height: 320px;
}

.eb-exp-panel[hidden] {
    display: none;
}

.eb-exp-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.09);
    margin-bottom: 1.15rem;
}

.eb-exp-panel-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-secondary);
}

.eb-exp-panel h3 {
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem;
}

.eb-exp-panel p {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    max-width: 60ch;
    text-align: justify;
}

.eb-exp-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.eb-exp-specs span {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-secondary);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
}

.eb-exp-link {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-secondary);
    text-decoration: none;
}

.eb-exp-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .eb-explorer {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .eb-exp-list {
        flex-direction: row;
        overflow-x: auto;
        border-left: 0;
        border-bottom: 2px solid var(--color-border);
        padding: 0 0 0.5rem;
        gap: 0.35rem;
        scrollbar-width: thin;
    }

    .eb-exp-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .eb-exp-tab[aria-selected="true"] {
        box-shadow: inset 0 -3px 0 var(--color-secondary);
    }

    .eb-exp-panel {
        padding: 1.5rem;
        min-height: 0;
    }
}

/* ---------- Verticals: compact icon grid ---------- */
.eb-verticals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card, 14px);
    overflow: hidden;
}

.eb-vert {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem 1.4rem;
    background: var(--color-bg-primary);
    text-decoration: none;
    transition: background 0.22s ease;
}

.eb-vert:hover {
    background: var(--color-bg-secondary);
}

.eb-vert-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    transition: transform 0.22s ease;
}

.eb-vert:hover .eb-vert-ico {
    transform: translateY(-2px);
}

.eb-vert-ico svg {
    width: 19px;
    height: 19px;
    stroke: var(--color-secondary);
}

.eb-vert b {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.eb-vert span {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

@media (max-width: 860px) {
    .eb-verticals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .eb-verticals {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- FAQ accordion ---------- */
.eb-acc {
    border-top: 1px solid var(--color-border);
    max-width: 900px;
}

.eb-acc-item {
    border-bottom: 1px solid var(--color-border);
}

.eb-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 1.4rem 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}

.eb-acc-btn:hover {
    color: var(--color-secondary);
}

.eb-acc-btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}

.eb-acc-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    position: relative;
}

.eb-acc-icon::before,
.eb-acc-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.eb-acc-icon::before {
    top: 10px;
    left: 3px;
    width: 16px;
    height: 2px;
}

.eb-acc-icon::after {
    top: 3px;
    left: 10px;
    width: 2px;
    height: 16px;
}

.eb-acc-btn[aria-expanded="true"] .eb-acc-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

.eb-acc-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.eb-acc-panel p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin: 0 0 1.4rem;
    max-width: 72ch;
}

/* No JS: never leave answers unreachable. */
.no-eb-js .eb-acc-panel {
    max-height: none;
}

@media (prefers-reduced-motion: reduce) {

    .eb-acc-panel,
    .eb-acc-icon::before,
    .eb-acc-icon::after,
    .eb-vert-ico,
    .eb-exp-tab {
        transition: none;
    }
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] .eb-exp-panel,
[data-theme="dark"] .eb-vert {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .eb-verticals {
    background: var(--color-border);
}

[data-theme="dark"] .eb-exp-specs span,
[data-theme="dark"] .eb-exp-panel-icon,
[data-theme="dark"] .eb-vert-ico {
    background: rgba(125, 166, 255, 0.13);
}

[data-theme="dark"] .eb-exp-specs span,
[data-theme="dark"] .eb-exp-link,
[data-theme="dark"] .eb-exp-tab[aria-selected="true"] {
    color: #9CC0FF;
}

[data-theme="dark"] .eb-exp-panel-icon svg,
[data-theme="dark"] .eb-vert-ico svg {
    stroke: #9CC0FF;
}

/* ==========================================================================
   MOBILE TAB SCROLL AFFORDANCE (2026-07-22)

   On narrow screens the capability tabs become a horizontal scroller. With
   full-width tabs only one was visible and nothing signalled that more
   existed. Tightening the tabs lets the next one peek in, and the fade on
   the trailing edge makes the overflow obvious.
   ========================================================================== */

@media (max-width: 900px) {
    .eb-exp-list {
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
        mask-image: linear-gradient(to right, #000 82%, transparent 100%);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .eb-exp-tab {
        /* base rule sets width:100%, which made a single tab fill the strip
           and hid the fact that the list scrolls */
        width: auto;
        scroll-snap-align: start;
        padding: 0.7rem 0.8rem;
        font-size: 0.875rem;
        gap: 0.55rem;
    }

    .eb-exp-tab svg {
        width: 17px;
        height: 17px;
    }

    /* Thin, unobtrusive scrollbar rather than none, so the affordance is
       present for pointer users too. */
    .eb-exp-list::-webkit-scrollbar {
        height: 3px;
    }

    .eb-exp-list::-webkit-scrollbar-thumb {
        background: var(--color-border-strong, #cbd5e1);
        border-radius: 3px;
    }
}

/* Proof-line separators dangle when items wrap to their own lines on mobile. */
@media (max-width: 620px) {
    .eb-home-proof {
        gap: 0.35rem 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .eb-home-proof span[aria-hidden] {
        display: none;
    }
}

/* ==========================================================================
   ANIMATED HERO (2026-07-22)

   Replaces the static capability list with a live "rating engine" console
   plus a drifting gradient background. All motion is CSS/SVG, so there are
   no external requests and nothing to load. Fully frozen under
   prefers-reduced-motion.
   ========================================================================== */

.eb-home-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4rem;
    background:
        linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    border-bottom: 1px solid var(--color-border);
}

/* --- drifting gradient blobs --- */
.eb-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.eb-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    will-change: transform;
}

.eb-blob-1 {
    width: 460px;
    height: 460px;
    top: -140px;
    right: 6%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.38), transparent 68%);
    animation: eb-drift-1 18s ease-in-out infinite;
}

.eb-blob-2 {
    width: 380px;
    height: 380px;
    top: 40%;
    right: 30%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.30), transparent 68%);
    animation: eb-drift-2 22s ease-in-out infinite;
}

.eb-blob-3 {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: 8%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.26), transparent 68%);
    animation: eb-drift-3 26s ease-in-out infinite;
}

.eb-hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 0);
    background-size: 34px 34px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 60%);
    mask-image: radial-gradient(circle at 70% 30%, #000, transparent 60%);
}

@keyframes eb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-36px, 30px) scale(1.08); }
}

@keyframes eb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -26px) scale(1.12); }
}

@keyframes eb-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.06); }
}

.eb-home-hero .eb-wrap {
    position: relative;
    z-index: 1;
}

/* --- copy entrance --- */
.eb-hero-copy > * {
    opacity: 0;
    transform: translateY(16px);
    animation: eb-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.eb-hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.eb-hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.eb-hero-copy > *:nth-child(3) { animation-delay: 0.23s; }
.eb-hero-copy > *:nth-child(4) { animation-delay: 0.32s; }
.eb-hero-copy > *:nth-child(5) { animation-delay: 0.41s; }

@keyframes eb-rise {
    to { opacity: 1; transform: none; }
}

/* --- live rating console --- */
.eb-console {
    position: relative;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 30px 70px -32px rgba(15, 23, 42, 0.4);
    overflow: hidden;
    opacity: 0;
    /* entrance runs once (forwards holds the end state); float takes over the
       transform after 1.6s. Two comma-separated animations avoid the
       single-property override that would drop the entrance. */
    animation:
        eb-console-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards,
        eb-float 6s ease-in-out infinite 1.6s;
}

@keyframes eb-console-in {
    from { opacity: 0; transform: translateY(26px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes eb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.eb-console-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.15rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.eb-console-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border-strong, #cbd5e1);
    display: inline-block;
}

.eb-console-bar i:nth-child(1) { background: #f87171; }
.eb-console-bar i:nth-child(2) { background: #fbbf24; }
.eb-console-bar i:nth-child(3) { background: #34d399; }

.eb-console-title {
    margin-left: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.eb-console-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #16a34a;
}

.eb-console-live b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    animation: eb-pulse 1.8s ease-out infinite;
}

@keyframes eb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.eb-console-body {
    padding: 1.5rem 1.5rem 1.75rem;
}

.eb-console-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.eb-console-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0.35rem 0 1.1rem;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.eb-console-value small {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #16a34a;
}

/* --- live activity chart --- */
.eb-console-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 78px;
    padding: 0.5rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}

.eb-console-chart span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--color-secondary), rgba(37, 99, 235, 0.35));
    height: 30%;
    transform-origin: bottom;
    animation: eb-bar 2.6s ease-in-out infinite alternate;
}

@keyframes eb-bar {
    from { height: var(--lo, 22%); }
    to { height: var(--hi, 80%); }
}

/* --- event chips streaming --- */
.eb-console-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.eb-console-chips span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

.eb-console-chips span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: eb-chip 3.2s ease-in-out infinite;
}

.eb-console-chips span:nth-child(1)::before { animation-delay: 0s; }
.eb-console-chips span:nth-child(2)::before { animation-delay: 0.4s; }
.eb-console-chips span:nth-child(3)::before { animation-delay: 0.8s; }
.eb-console-chips span:nth-child(4)::before { animation-delay: 1.2s; }

@keyframes eb-chip {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 8px rgba(37, 99, 235, 0.6); }
}

/* --- floating stat tag over the console --- */
.eb-console-tag {
    position: absolute;
    right: -16px;
    bottom: 46px;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.45);
    animation: eb-float 6s ease-in-out infinite 0.4s;
}

.eb-console-tag b {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.eb-console-tag span {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* --- dark mode --- */
[data-theme="dark"] .eb-console,
[data-theme="dark"] .eb-console-tag {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .eb-console-bar,
[data-theme="dark"] .eb-console-chips span {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .eb-hero-dots {
    opacity: 0.35;
}

/* --- reduced motion: freeze everything --- */
@media (prefers-reduced-motion: reduce) {

    .eb-blob,
    .eb-console-float,
    .eb-console-tag,
    .eb-console-live b,
    .eb-console-chart span,
    .eb-console-chips span::before {
        animation: none !important;
    }

    .eb-hero-copy > *,
    .eb-console {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .eb-console-chart span {
        height: 60%;
    }
}

@media (max-width: 980px) {
    .eb-console-tag {
        right: 10px;
        bottom: 12px;
    }
}

/* ==========================================================================
   HERO FLOATING TILES (2026-07-23)

   Replaces the animated "rating engine" console. A revenue chart read as a
   strength for some companies and a weakness for others, so the hero visual
   is now four capability tiles that gently float. Reuses the existing
   .homepage-metric-card glass styling; layout + motion added here.
   ========================================================================== */

.eb-hero-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 1.5rem 1rem;
}

/* Two columns are offset vertically so the group reads as floating, not a
   rigid grid. */
.eb-hero-tiles > .eb-float-tile:nth-child(1) { transform: translateY(-14px); }
.eb-hero-tiles > .eb-float-tile:nth-child(4) { transform: translateY(-14px); }

.eb-float-tile {
    opacity: 0;
    animation:
        eb-tile-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        eb-tile-float 5.5s ease-in-out infinite;
    will-change: transform;
}

/* Staggered entrance + desynchronised float so tiles bob independently. */
.eb-hero-tiles > .eb-float-tile:nth-child(1) { animation-delay: 0.35s, 1.2s; }
.eb-hero-tiles > .eb-float-tile:nth-child(2) { animation-delay: 0.48s, 0.4s; }
.eb-hero-tiles > .eb-float-tile:nth-child(3) { animation-delay: 0.61s, 1.6s; }
.eb-hero-tiles > .eb-float-tile:nth-child(4) { animation-delay: 0.74s, 0.9s; }

/* Opacity only. Transform belongs entirely to eb-tile-float so the two
   animations never contend for the same property. */
@keyframes eb-tile-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Float around each column's resting offset (0 or -14px set above). */
.eb-hero-tiles > .eb-float-tile:nth-child(1) {
    --rest: -14px;
}
.eb-hero-tiles > .eb-float-tile:nth-child(4) {
    --rest: -14px;
}

@keyframes eb-tile-float {
    0%, 100% { transform: translateY(var(--rest, 0)); }
    50% { transform: translateY(calc(var(--rest, 0) - 12px)); }
}

.eb-float-tile:hover {
    animation-play-state: paused;
}

.eb-float-tile .homepage-metric-icon {
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.45);
}

@media (max-width: 980px) {
    .eb-hero-tiles {
        padding: 0.5rem 0;
    }

    .eb-hero-tiles > .eb-float-tile:nth-child(1),
    .eb-hero-tiles > .eb-float-tile:nth-child(4) {
        transform: none;
        --rest: 0px;
    }
}

@media (max-width: 460px) {
    .eb-hero-tiles {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eb-float-tile {
        animation: none !important;
        opacity: 1 !important;
    }

    .eb-hero-tiles > .eb-float-tile:nth-child(1),
    .eb-hero-tiles > .eb-float-tile:nth-child(4) {
        transform: translateY(-14px);
    }
}

/* ==========================================================================
   RESTORED HERO — SMALL FLOATING TILES (2026-07-23)

   Original .hero layout restored from earnbill-before22July. The 4 metric
   tiles are shrunk and set to float (staggered, offset columns). Scoped to
   .eb-tiles-float so the base .homepage-metric-card styling elsewhere is
   untouched.
   ========================================================================== */

.eb-tiles-float {
    max-width: 480px;
    gap: 1rem;
    animation: none;
    /* the original .hero-visual pulls the block up/left; keep tiles in flow */
    margin: 0;
}

.hero-visual:has(.eb-tiles-float) {
    margin: 0;
}

.eb-tiles-float .homepage-metric-card {
    padding: 1.15rem 1.15rem 1.25rem;
}

.eb-tiles-float .homepage-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 0.7rem;
    box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.45);
}

.eb-tiles-float .homepage-metric-value {
    font-size: 0.9375rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    color: var(--color-text-primary);
    font-weight: 700;
}

.eb-tiles-float .homepage-metric-card p {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
}

/* offset columns + desynchronised float */
.eb-tiles-float .eb-float-tile:nth-child(1) { --rest: -12px; animation-delay: 0.30s, 1.2s; }
.eb-tiles-float .eb-float-tile:nth-child(2) { --rest: 0px;   animation-delay: 0.42s, 0.4s; }
.eb-tiles-float .eb-float-tile:nth-child(3) { --rest: 0px;   animation-delay: 0.54s, 1.6s; }
.eb-tiles-float .eb-float-tile:nth-child(4) { --rest: -12px; animation-delay: 0.66s, 0.9s; }

@media (max-width: 980px) {
    .eb-tiles-float {
        margin: 2rem auto 0;
    }

    .eb-tiles-float .eb-float-tile:nth-child(1),
    .eb-tiles-float .eb-float-tile:nth-child(4) {
        --rest: 0px;
    }
}

@media (max-width: 460px) {
    .eb-tiles-float {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eb-tiles-float .eb-float-tile {
        animation: none !important;
        opacity: 1 !important;
    }
    .eb-tiles-float .eb-float-tile:nth-child(1),
    .eb-tiles-float .eb-float-tile:nth-child(4) {
        transform: translateY(-12px);
    }
}

/* ==========================================================================
   EDITORIAL LAYER (2026-07-23) — Pounce-inspired, light theme

   Serif display headlines (Playfair Display), gold eyebrow labels, gold
   underline accents, a centered editorial hero, and a video-ready browser
   frame. Applied to the homepage only.
   ========================================================================== */

:root {
    --eb-gold: #22C55E;          /* decorative: underlines, borders, pill */
    --eb-gold-text: #15803d;     /* AA-readable gold for small eyebrow text */
    --eb-ink: #0f1729;           /* near-black for primary buttons / display */
}

/* --- heavy sans display headlines (customers.html style) --- */
.eb-serif,
.eb-home-editorial .eb-h2,
.eb-ed-h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* --- gold eyebrow labels (uppercase, letterspaced) --- */
.eb-ed-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* section eyebrows stay blue (customers.html style) */
.eb-section-eyebrow {
    color: var(--color-primary) !important;
}

/* section H2s: heavy sans, dark (customers.html style) */
.eb-h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .eb-h2 {
    color: #f1f5fb !important;
}

/* --- gold underline accent on emphasis words --- */
.eb-ul {
    position: relative;
    white-space: nowrap;
}

.eb-ul::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.02em;
    height: 0.14em;
    background: var(--eb-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: eb-underline 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

@keyframes eb-underline {
    to { transform: scaleX(1); }
}

/* ==========================================================================
   EDITORIAL HERO (centered)
   ========================================================================== */

.eb-ed-hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 4rem;
    text-align: center;
    background:
        radial-gradient(900px 380px at 50% -6%, rgba(34, 197, 94, 0.08), transparent 60%),
        linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 42%);
    border-bottom: 1px solid var(--color-border);
}

.eb-ed-hero .eb-hero-dots {
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 62%);
    mask-image: radial-gradient(circle at 50% 0%, #000, transparent 62%);
    opacity: 0.45;
}

.eb-ed-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

.eb-ed-inner > * {
    opacity: 0;
    transform: translateY(14px);
    animation: eb-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.eb-ed-inner > *:nth-child(1) { animation-delay: 0.05s; }
.eb-ed-inner > *:nth-child(2) { animation-delay: 0.14s; }
.eb-ed-inner > *:nth-child(3) { animation-delay: 0.23s; }
.eb-ed-inner > *:nth-child(4) { animation-delay: 0.32s; }
.eb-ed-inner > *:nth-child(5) { animation-delay: 0.41s; }

/* gold pill badge */
.eb-ed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    color: var(--eb-gold-text);
    background: rgba(34, 197, 94, 0.09);
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.5rem;
}

.eb-ed-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--eb-gold);
}

.eb-ed-h1 {
    font-size: clamp(2.3rem, 5.2vw, 4rem);
    line-height: 1.08;
    color: var(--color-text-primary);
    margin: 0 0 1.25rem;
}

.eb-ed-sub {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 40rem;
    margin: 0 auto 2rem;
}

.eb-ed-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* editorial dark primary button */
.btn-ink {
    background: var(--eb-ink);
    color: #fff;
    border: 1px solid var(--eb-ink);
    box-shadow: 0 10px 24px -12px rgba(15, 23, 41, 0.5);
}

.btn-ink:hover {
    background: #1c2942;
    color: #fff;
    transform: translateY(-1px);
}

.eb-ed-textlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-primary);
    text-decoration: none;
}

.eb-ed-textlink:hover {
    color: var(--eb-gold-text);
}

/* --- video-ready browser frame --- */
.eb-videoframe {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin: 3rem auto 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 40px 90px -40px rgba(15, 23, 41, 0.45);
    overflow: hidden;
    opacity: 0;
    animation: eb-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.eb-vf-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

.eb-vf-bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.eb-vf-bar i:nth-child(1) { background: #f87171; }
.eb-vf-bar i:nth-child(2) { background: #fbbf24; }
.eb-vf-bar i:nth-child(3) { background: #34d399; }

.eb-vf-url {
    margin-left: 0.5rem;
    flex: 1;
    max-width: 320px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    text-align: center;
}

.eb-vf-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(600px 300px at 30% 20%, rgba(37, 99, 235, 0.12), transparent 60%),
        radial-gradient(500px 260px at 80% 80%, rgba(34, 197, 94, 0.12), transparent 60%),
        linear-gradient(135deg, #eef2fb, #f7f5ef);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eb-vf-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.eb-vf-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    color: var(--color-text-secondary);
}

.eb-vf-play button {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 0;
    background: var(--eb-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 16px 40px -14px rgba(15, 23, 41, 0.6);
    transition: transform 0.25s ease;
}

.eb-vf-play button::after {
    content: "";
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

.eb-vf-stage:hover .eb-vf-play button {
    transform: scale(1.08);
}

.eb-vf-play span {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

/* --- editorial stat band (Pounce "the numbers") --- */
.eb-ed-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 760px;
    margin: 0 auto;
}

.eb-ed-stat {
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.eb-ed-stat b {
    display: block;
    font-family: inherit;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.eb-ed-stat span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .eb-ed-stats {
        grid-template-columns: 1fr;
    }

    .eb-videoframe {
        margin-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .eb-ed-inner > *,
    .eb-videoframe {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .eb-ul::after {
        animation: none;
        transform: scaleX(1);
    }
}

[data-theme="dark"] .eb-ed-badge {
    background: rgba(34, 197, 94, 0.14);
}

[data-theme="dark"] .eb-vf-stage {
    background:
        radial-gradient(600px 300px at 30% 20%, rgba(37, 99, 235, 0.18), transparent 60%),
        radial-gradient(500px 260px at 80% 80%, rgba(34, 197, 94, 0.14), transparent 60%),
        linear-gradient(135deg, #131a2b, #1b1a15);
}

[data-theme="dark"] .btn-ink {
    background: #fff;
    color: var(--eb-ink);
    border-color: #fff;
}

[data-theme="dark"] .btn-ink:hover {
    background: #e8edf6;
    color: var(--eb-ink);
}

/* Hero antigravity particle field (native, replaces react-three-fiber). */
.eb-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ==========================================================================
   HOMEPAGE TRUST BAND (2026-07-23)

   Larger, dark, and set apart from the light sections around it. Scoped to
   .eb-trust-band so the shared .eb-trust strip on customers.html is untouched.
   Badges use the blue->green gradient so they stay bright against the navy.
   ========================================================================== */

.eb-trust-band {
    background: linear-gradient(135deg, #0b1220 0%, #14233f 100%);
    border-top: 0;
    border-bottom: 0;
    padding: 4rem 0;
}

.eb-trust-band-title {
    text-align: center;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 2.25rem;
}

.eb-trust-band .eb-wrap {
    max-width: 1320px;
}

.eb-trust-band .eb-trust-inner {
    flex-direction: column;
    gap: 1.75rem;
}

.eb-trust-band .eb-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.75rem 3rem;
}

.eb-trust-band .eb-trust-item {
    font-size: 1rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    gap: 14px;
}

.eb-trust-band .eb-trust-badge {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    font-size: 0.875rem;
    line-height: 1.15;
    background: var(--gradient-mesh);
    box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.6);
}

@media (max-width: 640px) {
    .eb-trust-band {
        padding: 3rem 0;
    }

    .eb-trust-band .eb-trust-inner {
        gap: 1.5rem 2rem;
    }
}

/* ==========================================================================
   HOVER EFFECTS (2026-07-23)
   ========================================================================== */

/* Trust / certification badges lift, scale and glow on hover */
.eb-trust-band .eb-trust-badge {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s ease;
}

.eb-trust-band .eb-trust-item {
    cursor: default;
}

.eb-trust-band .eb-trust-item:hover .eb-trust-badge {
    transform: translateY(-6px) scale(1.1) rotate(-3deg);
    box-shadow: 0 22px 44px -12px rgba(37, 99, 235, 0.75),
                0 0 0 4px rgba(34, 197, 94, 0.18);
}

/* Video play button: stronger hover with a pulsing glow ring */
.eb-vf-play button {
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, background 0.25s ease;
}

.eb-vf-play button::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.4);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.eb-vf-stage:hover .eb-vf-play button,
.eb-vf-play button:hover {
    transform: scale(1.14);
    background: var(--gradient-mesh);
    box-shadow: 0 20px 48px -14px rgba(37, 99, 235, 0.7);
}

.eb-vf-stage:hover .eb-vf-play button::before,
.eb-vf-play button:hover::before {
    opacity: 1;
    transform: scale(1);
    animation: eb-play-ring 1.6s ease-out infinite;
}

@keyframes eb-play-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {

    .eb-trust-band .eb-trust-item:hover .eb-trust-badge,
    .eb-vf-play button:hover {
        transform: none;
    }

    .eb-vf-play button::before {
        animation: none !important;
    }
}

/* ==========================================================================
   LOGO MARQUEE (2026-07-23) — infinite right-to-left scroll

   Track holds 2 identical copies of the logo set. Each item carries a
   trailing margin (not flex gap) so translateX(-50%) tiles seamlessly.
   Larger logos, edge fade, pause on hover, static wrap under reduced-motion.
   ========================================================================== */

.eb-home-logos {
    padding: 2.5rem 0;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    overflow: hidden;
}

.eb-home-logos .eb-home-logos-label {
    display: block;
    margin: 0 0 1.75rem;
}

.eb-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.eb-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: eb-marquee 80s linear infinite;
}

.eb-marquee:hover .eb-marquee-track {
    animation-play-state: paused;
}

.eb-mq-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4.5rem;
    flex-shrink: 0;
    text-decoration: none;
}

.eb-mq-item img {
    height: 46px;
    width: auto;
    opacity: 0.58;
    filter: grayscale(100%);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.eb-mq-item:hover img {
    opacity: 1;
    filter: grayscale(0);
}

.eb-mq-text {
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.eb-mq-text:hover {
    color: var(--color-text-primary);
}

@keyframes eb-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Dark mode: real logos have baked-in light backgrounds, so inverting them
   produced dark boxes. Instead, drop the filter and sit each logo on a small
   white chip so it shows in its natural form against the dark band. */
[data-theme="dark"] .eb-mq-item img {
    filter: none;
    opacity: 1;
    background: #fff;
    padding: 7px 14px;
    border-radius: 10px;
    box-sizing: content-box;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .eb-mq-item:hover img {
    filter: none;
    opacity: 1;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .eb-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        gap: 1.25rem 3rem;
    }

    .eb-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .eb-mq-dup {
        display: none;
    }

    .eb-mq-item {
        margin-right: 0;
    }
}

/* Homepage section rhythm: the competitive section shared the light-gray
   background with the industries section directly above it, so the two blurred
   together. Make the homepage competitive section white so the run alternates
   white -> gray -> white before the dark trust band. Scoped to #compare
   (homepage only; customers.html uses #compete). */
#compare.eb-compete {
    background: var(--color-bg-primary);
}

/* Registry: end customers still under NDA are shown as a muted placeholder */
.eb-reg-nda {
    font-style: italic;
    font-weight: 500;
    color: var(--color-text-muted) !important;
    white-space: normal;
}

/* Customers hero: premium enterprise background + particle/dot layer */
.eb-hero {
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(34, 197, 94, 0.08), transparent 60%),
        linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 46%);
}

.eb-hero .eb-wrap {
    position: relative;
    z-index: 1;
}

.eb-hero .eb-hero-dots {
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 62%);
    mask-image: radial-gradient(circle at 50% 0%, #000, transparent 62%);
    opacity: 0.45;
}

/* ── Page title banner: aurora glows + faint dot grid (matches partners) ── */
.eb-page-banner {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.eb-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(560px circle at 6% -12%, rgba(59, 130, 246, 0.22), transparent 60%),
        radial-gradient(540px circle at 96% -8%, rgba(34, 197, 94, 0.20), transparent 60%),
        radial-gradient(560px circle at 38% 118%, rgba(30, 64, 175, 0.10), transparent 62%);
    pointer-events: none;
}

.eb-page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(circle at center, rgba(30, 64, 175, 0.55) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 32%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 32%, #000 0%, transparent 80%);
    opacity: 0.06;
    pointer-events: none;
}

[data-theme="dark"] .eb-page-banner::after {
    background-image: radial-gradient(circle at center, rgba(147, 178, 255, 0.6) 1px, transparent 1px);
    opacity: 0.09;
}

.eb-page-banner > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   COMPARISON PAGES  (prefix: cmp-)  — used by /compare/*
   Built on the site design tokens; loaded after styles.css.
   ============================================================ */
.cmp-section { padding: 5.5rem 0; }
.cmp-section.is-alt { background: var(--color-bg-secondary); }
.cmp-narrow { max-width: 820px; }
.cmp-lede { font-size: 1.1875rem; line-height: 1.7; color: var(--color-text-secondary); }

/* ── verdict / "who each is for" ─────────────────────────── */
.cmp-verdict-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.75rem;
}
.cmp-verdict-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 2rem; background: var(--color-bg-primary);
}
.cmp-verdict-card.is-earnbill {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 14px 46px rgba(34, 197, 94, 0.09);
}
.cmp-verdict-tag {
    display: inline-block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--radius-full);
    background: var(--color-bg-secondary); color: var(--color-text-secondary); margin-bottom: 1rem;
}
.cmp-verdict-card.is-earnbill .cmp-verdict-tag { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.cmp-verdict-card h3 { font-size: 1.375rem; font-weight: 800; margin: 0 0 0.75rem; color: var(--color-text-primary); letter-spacing: -0.02em; }
.cmp-verdict-card p { color: var(--color-text-secondary); line-height: 1.65; margin: 0 0 0.75rem; }
.cmp-verdict-card ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.cmp-verdict-card li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; color: var(--color-text-secondary); line-height: 1.5; }
.cmp-verdict-card li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-accent); font-weight: 800; }

/* ── comparison table (3 columns) ────────────────────────── */
.cmp-table { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 2.5rem; }
.cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1px solid var(--color-border); }
.cmp-row:first-child { border-top: none; }
.cmp-head { background: var(--color-bg-secondary); font-weight: 800; }
.cmp-head .cmp-cell { color: var(--color-text-primary); font-size: 0.9375rem; }
.cmp-head .cmp-cell.is-earnbill { background: var(--gradient-mesh); color: #fff; }
.cmp-cell { padding: 1.05rem 1.25rem; font-size: 0.9375rem; line-height: 1.45; color: var(--color-text-secondary); border-left: 1px solid var(--color-border); }
.cmp-cell:first-child { border-left: none; color: var(--color-text-primary); font-weight: 600; }
.cmp-cell.is-earnbill { background: rgba(34, 197, 94, 0.045); }
.cmp-row:nth-child(even) .cmp-cell { background: color-mix(in srgb, var(--color-bg-secondary) 40%, transparent); }
.cmp-row:nth-child(even) .cmp-cell.is-earnbill { background: rgba(34, 197, 94, 0.07); }
.cmp-yes { color: #15803d; font-weight: 700; }
.cmp-no { color: var(--color-text-muted); }
.cmp-partial { color: #b45309; }

/* ── split "where each wins" ─────────────────────────────── */
.cmp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.cmp-win-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; background: var(--color-bg-primary); }
.cmp-win-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 1.1rem; color: var(--color-text-primary); letter-spacing: -0.02em; }
.cmp-win-card ul { list-style: none; margin: 0; padding: 0; }
.cmp-win-card li { position: relative; padding-left: 1.75rem; margin-bottom: 0.9rem; color: var(--color-text-secondary); line-height: 1.55; }
.cmp-win-card li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-accent); }
.cmp-win-card.is-them li::before { background: var(--color-text-muted); }

/* ── FAQ ─────────────────────────────────────────────────── */
.cmp-faq { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.cmp-faq-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--color-border); }
.cmp-faq-row h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--color-text-primary); line-height: 1.4; }
.cmp-faq-row p { margin: 0; color: var(--color-text-secondary); line-height: 1.65; }

/* ── hub grid ────────────────────────────────────────────── */
.cmp-hub-group { margin-top: 3.5rem; }
.cmp-hub-group-title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 1.5rem; }
.cmp-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.cmp-hub-card { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; background: var(--color-bg-primary); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cmp-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-strong); }
.cmp-hub-card h3 { font-size: 1.1875rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--color-text-primary); letter-spacing: -0.02em; }
.cmp-hub-card p { margin: 0 0 1rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; }
.cmp-hub-card .cmp-hub-link { font-weight: 700; color: var(--color-secondary); font-size: 0.9375rem; }

@media (max-width: 820px) {
    .cmp-verdict-grid, .cmp-split, .cmp-hub-grid { grid-template-columns: 1fr; }
    .cmp-row { grid-template-columns: 1fr; }
    .cmp-cell { border-left: none; border-top: 1px solid var(--color-border); }
    .cmp-cell:first-child { font-weight: 800; background: var(--color-bg-secondary); }
    .cmp-head { display: none; }
    .cmp-faq-row { grid-template-columns: 1fr; gap: 0.5rem; }
}