.elementor-921 .elementor-element.elementor-element-29419cd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS */@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Outfit:wght@300;400;500;600;700&display=swap");

/* HorseBills — Elementor compatibility layer
   The original HorseBills DOM is rendered inside native Elementor Text Editor widgets.
   This prevents Elementor/theme wrappers from changing the original layout.
*/
#horsebills-elementor,
#horsebills-elementor.e-con,
#horsebills-elementor > .e-con,
#horsebills-elementor > .elementor-element {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#horsebills-elementor .elementor-widget,
#horsebills-elementor .elementor-widget-container,
#horsebills-elementor .elementor-text-editor {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#horsebills-elementor .elementor-widget-text-editor {
  margin: 0 !important;
  padding: 0 !important;
}
#horsebills-elementor img { max-width: none; }
#horsebills-elementor nav,
#horsebills-elementor .hero,
#horsebills-elementor .trust,
#horsebills-elementor section,
#horsebills-elementor footer { box-sizing: border-box; }

html, body { margin: 0 !important; padding: 0 !important; }
body { overflow-x: hidden; }

/* Elementor editor/preview safety */
#horsebills-elementor .elementor-widget-text-editor > .elementor-widget-container > p:first-child:empty,
#horsebills-elementor .elementor-widget-text-editor > .elementor-widget-container > p:last-child:empty {
  display: none;
}

/* Keep the original viewport-based hero truly full width */
#horsebills-elementor .hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Keep fixed nav independent of Elementor wrappers */
#horsebills-elementor nav {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}

/* Avoid WordPress/Elementor image defaults affecting source layout */
#horsebills-elementor img {
  border: 0;
  vertical-align: middle;
}

/* The source uses SVG icons inline */
#horsebills-elementor svg { overflow: visible; }

/* Mobile Elementor editor controls should not affect the front-end */
@media (max-width: 960px) {
  #horsebills-elementor .hero {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}


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

                :root {
                    --g: #316E17;
                    --gm: #3D8A1E;
                    --gl: #4CAF26;
                    --gp: #EBF5E6;
                    --gd: #0F2208;
                    --or: #C84B15;
                    --wh: #fff;
                    --of: #F4F8F1;
                    --lt: #E6F0DF;
                    --bd: rgba(49,110,23,.13);
                    --tx: #1C2B18;
                    --mu: #52714A;
                    --sf: "Fraunces",Georgia,serif;
                    --ss: "Outfit",sans-serif;
                }

                html {
                    scroll-behavior: smooth
                }

                body {
                    font-family: var(--ss);
                    color: var(--tx);
                    background: var(--wh);
                    overflow-x: hidden
                }

                /* ── SHARED COMPONENTS (same as Option 2) ── */
                nav {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 200;
                    height: 66px;
                    display: flex;
                    align-items: center;
                    background: rgba(255,255,255,.96);
                    backdrop-filter: blur(14px);
                    border-bottom: 1px solid var(--bd)
                }

                .ni {
                    max-width: 1280px;
                    margin: 0 auto;
                    padding: 0 48px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between
                }

                .nl img {
                    height: 40px;
                    display: block
                }

                .nls {
                    display: flex;
                    gap: 30px;
                    list-style: none
                }

                    .nls a {
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--tx);
                        text-decoration: none;
                        transition: color .2s
                    }

                        .nls a:hover {
                            color: var(--g)
                        }

                .nr {
                    display: flex;
                    gap: 10px;
                    align-items: center
                }

                .bsi {
                    padding: 8px 18px;
                    border: 1.5px solid var(--bd);
                    border-radius: 5px;
                    font-size: 13px;
                    font-weight: 600;
                    color: var(--tx);
                    text-decoration: none;
                    transition: all .2s
                }

                    .bsi:hover {
                        border-color: var(--g);
                        color: var(--g)
                    }

                .btr {
                    padding: 9px 20px;
                    background: var(--or);
                    color: #fff;
                    font-size: 13px;
                    font-weight: 700;
                    border-radius: 5px;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    transition: all .2s
                }

                    .btr:hover {
                        background: #D4541A;
                        transform: translateY(-1px)
                    }

                .tbg {
                    font-size: 10px;
                    background: rgba(255,255,255,.22);
                    padding: 2px 7px;
                    border-radius: 20px;
                    font-weight: 700
                }

                /* ═══════════════════════════════
                   HERO  —  Finzo-exact pattern
                   Full-bleed photo · huge headline
                   single CTA · numbered tab bar
                   ═══════════════════════════════ */
                .hero {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                    min-height: 640px;
                    overflow: hidden;
                    padding-top: 66px
                }

                /* ── slides stack + crossfade ── */
                .h-slide {
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    transition: opacity .9s ease;
                    pointer-events: none
                }
                .h-slide.active {
                    opacity: 1;
                    pointer-events: auto
                }
                /* full-bleed photo per slide */
                .h-bg {
                    position: absolute;
                    inset: 0;
                    z-index: 0
                }
                .h-bg img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center 30%;
                    display: block;
                    transform: scale(1.04);
                    transition: transform 7s ease
                }
                .h-slide.active .h-bg img { transform: scale(1) }
                .h-bg::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background:
                        linear-gradient(95deg,
                            rgba(5,14,3,.84) 0%,
                            rgba(5,14,3,.58) 42%,
                            rgba(5,14,3,.18) 68%,
                            transparent 100%),
                        linear-gradient(180deg,
                            rgba(5,14,3,.2) 0%,
                            transparent 28%,
                            transparent 55%,
                            rgba(5,14,3,.82) 100%)
                }
                /* main content per slide */
                .h-content {
                    position: absolute;
                    inset: 0;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 0 80px 110px;
                    max-width: 820px
                }
                /* giant stacked headline with entrance animation */
                .h-title {
                    font-family: var(--sf);
                    font-variation-settings: "opsz" 144;
                    font-size: clamp(52px, 7vw, 104px);
                    font-weight: 700;
                    line-height: 0.97;
                    color: #fff;
                    letter-spacing: -1.5px;
                    margin-bottom: 40px;
                    opacity: 0;
                    transform: translateY(22px);
                    transition: opacity .7s ease .3s, transform .7s ease .3s
                }
                .h-slide.active .h-title { opacity: 1; transform: translateY(0) }
                .h-title em { font-style: italic; color: #7ED44E }
                /* pill CTA with entrance animation */
                .h-cta-btn {
                    display: inline-flex;
                    align-items: center;
                    width: fit-content;
                    background: var(--gl);
                    color: #fff;
                    font-size: 15px;
                    font-weight: 700;
                    border-radius: 50px;
                    text-decoration: none;
                    overflow: hidden;
                    opacity: 0;
                    transform: translateY(16px);
                    transition: opacity .6s ease .55s, transform .6s ease .55s, background .22s, box-shadow .22s
                }
                .h-slide.active .h-cta-btn { opacity: 1; transform: translateY(0) }
                .h-cta-btn:hover {
                    background: var(--g);
                    transform: translateY(-2px) !important;
                    box-shadow: 0 12px 32px rgba(49,110,23,.45)
                }
                .h-cta-label { padding: 16px 28px }
                .h-cta-arrow {
                    width: 52px; height: 52px;
                    background: rgba(0,0,0,.18);
                    display: flex; align-items: center; justify-content: center;
                    flex-shrink: 0
                }
                .h-cta-arrow svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.5 }
                /* bottom-left caption */
                .h-bl {
                    position: absolute;
                    bottom: 52px; left: 80px;
                    z-index: 4
                }
                .h-bl-rule { width: 32px; height: 2px; background: rgba(255,255,255,.38); margin-bottom: 10px }
                .h-bl-text {
                    font-size: 11px; font-weight: 700;
                    letter-spacing: .12em; text-transform: uppercase;
                    color: rgba(255,255,255,.4); line-height: 1.65
                }
                /* tab bar — the slider controls */
                .h-tabs {
                    position: absolute;
                    bottom: 0; right: 0;
                    z-index: 4;
                    display: flex
                }
                .h-tab {
                    padding: 18px 38px 20px;
                    display: flex; flex-direction: column; gap: 5px;
                    cursor: pointer; position: relative
                }
                .h-tab-num {
                    font-size: 10px; font-weight: 700;
                    letter-spacing: .1em; text-transform: uppercase;
                    color: rgba(255,255,255,.32)
                }
                .h-tab-label {
                    font-size: 11.5px; font-weight: 700;
                    letter-spacing: .1em; text-transform: uppercase;
                    color: rgba(255,255,255,.48);
                    transition: color .25s
                }
                .h-tab.active .h-tab-num  { color: rgba(255,255,255,.55) }
                .h-tab.active .h-tab-label,
                .h-tab:hover  .h-tab-label { color: #fff }
                /* progress bar at bottom of each tab */
                .h-tab-prog {
                    position: absolute;
                    bottom: 0; left: 0; right: 0;
                    height: 3px;
                    background: rgba(255,255,255,.08)
                }
                .h-tab-prog-fill {
                    display: block; height: 100%; width: 0%;
                    background: var(--gl);
                    transition: width linear
                }
                @media(max-width:960px) {
                    .h-content  { padding: 0 28px 110px; max-width: 100% }
                    .h-title    { font-size: clamp(44px,10vw,72px) }
                    .h-bl       { left: 28px; bottom: 62px }
                    .h-tabs     { left: 0; right: 0 }
                    .h-tab      { flex: 1; padding: 14px 12px 18px }
                }

                .trust {
                    background: var(--lt);
                    padding: 18px 48px;
                    border-bottom: 1px solid var(--bd)
                }

                .tri {
                    max-width: 1280px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 16px
                }

                .trl {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: .08em;
                    text-transform: uppercase;
                    color: var(--mu)
                }

                .tris {
                    display: flex;
                    gap: 32px;
                    flex-wrap: wrap
                }

                .trit {
                    font-size: 13px;
                    font-weight: 600;
                    color: var(--tx);
                    display: flex;
                    align-items: center;
                    gap: 6px
                }

                    .trit svg {
                        width: 14px;
                        height: 14px;
                        stroke: var(--g);
                        fill: none;
                        stroke-width: 2.5
                    }

                section {
                    padding: 96px 48px
                }

                .wr {
                    max-width: 1280px;
                    margin: 0 auto
                }

                .ey {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: .13em;
                    text-transform: uppercase;
                    color: var(--g);
                    margin-bottom: 12px;
                    display: flex;
                    align-items: center;
                    gap: 9px
                }

                    .ey::before {
                        content: "";
                        width: 22px;
                        height: 2px;
                        background: var(--g);
                        border-radius: 2px;
                        display: block
                    }

                .sht {
                    font-family: var(--sf);
                    font-variation-settings: "opsz" 144;
                    font-size: clamp(26px,3vw,46px);
                    font-weight: 700;
                    color: var(--gd);
                    line-height: 1.16;
                    letter-spacing: -.3px
                }

                    .sht em {
                        font-style: italic;
                        color: var(--g)
                    }

                .sub {
                    font-size: 16px;
                    line-height: 1.8;
                    color: var(--mu);
                    max-width: 520px;
                    margin-top: 12px
                }

                /* ── ABOUT ── */
                .about-sec {
                    background: var(--wh)
                }

                .abg {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 72px;
                    align-items: center
                }

                .avis {
                    position: relative;
                    padding-bottom: 28px
                }

                .ami {
                    border-radius: 18px;
                    overflow: hidden;
                    box-shadow: 0 20px 56px rgba(49,110,23,.14);
                    aspect-ratio: 4/3;
                    background: var(--gp);
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                    .ami img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        display: block;
                        padding: 20px
                    }

                .asi {
                    position: absolute;
                    bottom: 0;
                    right: -18px;
                    width: 50%;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 4px solid var(--wh);
                    box-shadow: 0 10px 36px rgba(49,110,23,.18);
                    aspect-ratio: 16/10;
                    background: var(--wh)
                }

                    .asi img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        display: block;
                        padding: 8px
                    }

                .abadge {
                    position: absolute;
                    top: 20px;
                    left: -14px;
                    background: var(--g);
                    color: #fff;
                    padding: 13px 16px;
                    border-radius: 12px;
                    text-align: center;
                    box-shadow: 0 6px 20px rgba(49,110,23,.4);
                    z-index: 2
                }

                    .abadge strong {
                        font-family: var(--sf);
                        font-size: 28px;
                        font-weight: 700;
                        display: block
                    }

                    .abadge span {
                        font-size: 10px;
                        opacity: .85;
                        letter-spacing: .04em
                    }

                .atx p {
                    font-size: 15.5px;
                    line-height: 1.85;
                    color: var(--mu);
                    margin-bottom: 16px
                }

                .pls {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 9px;
                    margin-top: 22px
                }

                .pill {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    background: var(--gp);
                    border-radius: 30px;
                    padding: 7px 14px;
                    font-size: 13px;
                    font-weight: 600;
                    color: var(--g);
                    border: 1px solid rgba(49,110,23,.14)
                }

                    .pill svg {
                        width: 12px;
                        height: 12px;
                        stroke: currentColor;
                        fill: none;
                        stroke-width: 2.5
                    }

                .la {
                    display: inline-flex;
                    align-items: center;
                    gap: 7px;
                    margin-top: 24px;
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--g);
                    text-decoration: none;
                    transition: gap .2s
                }

                    .la:hover {
                        gap: 11px
                    }

                    .la svg {
                        width: 15px;
                        height: 15px;
                        stroke: currentColor;
                        fill: none;
                        stroke-width: 2.5
                    }

                /* ════════════════════════════════════════
           SCROLLYTELLING PINNED DEMO
           Left text scrolls through steps;
           right app frame stays pinned and updates
        ════════════════════════════════════════ */
                .story-sec {
                    background: var(--of);
                    padding: 0
                }

                .story-header {
                    padding: 80px 48px 0;
                    text-align: center;
                    max-width: 620px;
                    margin: 0 auto
                }

                    .story-header .sub {
                        margin: 12px auto 0;
                        text-align: center
                    }

                .story-body {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    max-width: 1280px;
                    margin: 56px auto 0;
                    padding: 0 48px;
                    gap: 0;
                    position: relative;
                }

                /* Left: scrolling step cards */
                .story-steps {
                    padding: 0 40px 0 0
                }

                .story-step {
                    padding: 40px 0;
                    border-bottom: 1px solid var(--bd);
                    opacity: .35;
                    transition: opacity .4s;
                }

                    .story-step:last-child {
                        border-bottom: none
                    }

                    .story-step.active {
                        opacity: 1
                    }

                .step-num {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background: var(--gp);
                    border: 2px solid var(--bd);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 13px;
                    font-weight: 800;
                    color: var(--g);
                    margin-bottom: 16px;
                    transition: all .3s;
                }

                .story-step.active .step-num {
                    background: var(--g);
                    color: #fff;
                    border-color: var(--g)
                }

                .story-step h3 {
                    font-family: var(--sf);
                    font-size: 22px;
                    font-weight: 700;
                    color: var(--gd);
                    margin-bottom: 10px;
                    line-height: 1.2
                }

                .story-step p {
                    font-size: 15px;
                    line-height: 1.8;
                    color: var(--mu)
                }

                .step-tag {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    margin-top: 14px;
                    background: var(--gp);
                    border-radius: 20px;
                    padding: 5px 12px;
                    font-size: 12px;
                    font-weight: 700;
                    color: var(--g);
                    opacity: 0;
                    transition: opacity .3s
                }

                .story-step.active .step-tag {
                    opacity: 1
                }

                .step-tag svg {
                    width: 12px;
                    height: 12px;
                    stroke: currentColor;
                    fill: none;
                    stroke-width: 2.5
                }

                /* Final padding to allow last step to activate */
                .story-spacer {
                    height: 30vh
                }

                /* Right: sticky app window */
                .story-sticky {
                    position: sticky;
                    top: 96px;
                    height: fit-content;
                    padding-bottom: 32px
                }

                .story-frame {
                    background: #111;
                    border-radius: 16px;
                    overflow: hidden;
                    box-shadow: 0 24px 64px rgba(15,34,8,.28),0 0 0 1px rgba(0,0,0,.1);
                }

                .story-chrome {
                    background: #1C1C1C;
                    padding: 12px 16px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border-bottom: 1px solid rgba(255,255,255,.06)
                }

                .chrome-dots {
                    display: flex;
                    gap: 6px
                }

                .cd {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%
                }

                .cd1 {
                    background: #FF5F57
                }

                .cd2 {
                    background: #FEBC2E
                }

                .cd3 {
                    background: #28C840
                }

                .chrome-url {
                    flex: 1;
                    background: #2A2A2A;
                    border-radius: 4px;
                    height: 22px;
                    margin: 0 8px;
                    display: flex;
                    align-items: center;
                    padding: 0 10px
                }

                    .chrome-url span {
                        font-size: 11px;
                        color: rgba(255,255,255,.38);
                        font-family: var(--ss)
                    }

                .story-screens {
                    position: relative;
                    overflow: hidden
                }

                .story-screen {
                    display: none;
                    background: #fff;
                    animation: ssFadeIn .5s ease
                }

                    .story-screen.active {
                        display: block
                    }

                @keyframes ssFadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(10px)
                    }

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

                /* The shared mock chrome */
                .mock-topbar {
                    background: var(--g);
                    padding: 10px 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between
                }

                .mock-topbar-logo {
                    font-size: 13px;
                    font-weight: 800;
                    color: #fff
                }

                .mock-topbar-nav {
                    display: flex;
                    gap: 18px
                }

                    .mock-topbar-nav span {
                        font-size: 11px;
                        color: rgba(255,255,255,.72)
                    }

                .mock-topbar-btns {
                    display: flex;
                    gap: 8px
                }

                .mock-btn-sm {
                    padding: 4px 10px;
                    border-radius: 3px;
                    font-size: 10px;
                    font-weight: 700;
                    background: rgba(255,255,255,.2);
                    color: #fff
                }

                .mock-body {
                    padding: 18px 22px
                }

                .mock-page-title {
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--gd);
                    margin-bottom: 14px;
                    display: flex;
                    align-items: center;
                    gap: 7px
                }

                    .mock-page-title svg {
                        width: 15px;
                        height: 15px;
                        stroke: var(--g);
                        fill: none;
                        stroke-width: 2
                    }

                /* Shared form/table mocks */
                .mock-form-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 10px;
                    margin-bottom: 10px
                }

                .mock-field {
                    background: var(--of);
                    border-radius: 5px;
                    padding: 9px 11px;
                    border: 1px solid var(--bd)
                }

                    .mock-field label {
                        font-size: 9px;
                        color: var(--mu);
                        display: block;
                        margin-bottom: 2px;
                        letter-spacing: .05em;
                        text-transform: uppercase
                    }

                .mock-field-val {
                    font-size: 11px;
                    font-weight: 600;
                    color: var(--gd)
                }

                .mock-table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 10px
                }

                    .mock-table th {
                        background: var(--gp);
                        color: var(--g);
                        font-weight: 700;
                        padding: 6px 9px;
                        text-align: left;
                        letter-spacing: .04em;
                        font-size: 9px;
                        text-transform: uppercase
                    }

                    .mock-table td {
                        padding: 7px 9px;
                        border-bottom: 1px solid var(--lt);
                        color: var(--tx)
                    }

                .mock-total-row {
                    background: var(--gp);
                    font-weight: 700;
                    color: var(--g)
                }

                .mock-actions {
                    display: flex;
                    gap: 7px;
                    margin-top: 12px;
                    justify-content: flex-end
                }

                .mock-act-btn {
                    padding: 7px 14px;
                    border-radius: 4px;
                    font-size: 11px;
                    font-weight: 700;
                    cursor: pointer;
                    border: none
                }

                .mock-act-primary {
                    background: var(--g);
                    color: #fff
                }

                .mock-act-secondary {
                    background: var(--lt);
                    color: var(--g)
                }

                .mock-stats-row {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 8px;
                    margin-bottom: 12px
                }

                .mock-stat-card {
                    background: var(--gp);
                    border-radius: 7px;
                    padding: 10px;
                    border: 1px solid var(--bd)
                }

                    .mock-stat-card .val {
                        font-family: var(--sf);
                        font-size: 18px;
                        font-weight: 700;
                        color: var(--g)
                    }

                    .mock-stat-card .lbl {
                        font-size: 9px;
                        color: var(--mu);
                        margin-top: 2px
                    }

                .mock-invoices-list {
                    display: flex;
                    flex-direction: column;
                    gap: 5px
                }

                .mock-inv-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 8px 10px;
                    background: var(--of);
                    border-radius: 5px;
                    border: 1px solid var(--bd)
                }

                .mock-inv-info {
                    font-size: 11px;
                    font-weight: 600;
                    color: var(--gd)
                }

                .mock-inv-sub {
                    font-size: 9px;
                    color: var(--mu)
                }

                .mock-badge {
                    padding: 2px 8px;
                    border-radius: 20px;
                    font-size: 9px;
                    font-weight: 700
                }

                .badge-paid {
                    background: #DCFCE7;
                    color: #166534
                }

                .badge-pending {
                    background: #FEF9C3;
                    color: #854D0E
                }

                .badge-sent {
                    background: var(--gp);
                    color: var(--g)
                }

                .mock-horse-row {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 8px 0;
                    border-bottom: 1px solid var(--lt)
                }

                .mock-horse-name {
                    font-size: 11px;
                    font-weight: 700;
                    color: var(--gd);
                    flex: 1
                }

                .mock-pct-bar {
                    flex: 2;
                    height: 7px;
                    background: var(--lt);
                    border-radius: 3px;
                    overflow: hidden
                }

                .mock-pct-fill {
                    height: 100%;
                    border-radius: 3px
                }

                .mock-pct-val {
                    font-size: 11px;
                    font-weight: 700;
                    color: var(--g);
                    width: 36px;
                    text-align: right
                }

                .mock-partner-row {
                    display: grid;
                    grid-template-columns: 1fr auto auto;
                    gap: 7px;
                    align-items: center;
                    padding: 8px 10px;
                    border-bottom: 1px solid var(--lt);
                    font-size: 11px
                }

                .mock-partner-name {
                    font-weight: 600;
                    color: var(--gd)
                }

                .mock-partner-pct {
                    font-weight: 700;
                    color: var(--g);
                    font-family: var(--sf);
                    font-size: 13px
                }

                .mock-partner-amt {
                    font-weight: 700;
                    color: var(--tx)
                }

                /* Progress indicator */
                .story-progress {
                    position: absolute;
                    left: -20px;
                    top: 0;
                    bottom: 0;
                    width: 3px;
                    background: var(--bd);
                    border-radius: 2px;
                }

                .story-progress-fill {
                    width: 3px;
                    background: var(--g);
                    border-radius: 2px;
                    transition: height .2s;
                    height: 0%;
                }

                .story-step-indicator {
                    position: absolute;
                    left: -26px;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background: var(--wh);
                    border: 2px solid var(--bd);
                    transition: all .3s;
                }

                .story-step.active .story-step-indicator {
                    background: var(--g);
                    border-color: var(--g)
                }

                /* Screen 5: QuickBooks integration */
                .qb-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 12px;
                    background: var(--gp);
                    border-radius: 8px;
                    margin-bottom: 8px;
                    border: 1px solid var(--bd)
                }

                .qb-status {
                    display: flex;
                    align-items: center;
                    gap: 6px
                }

                .qb-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%
                }

                .qb-connected {
                    background: #166534
                }

                .qb-item {
                    font-size: 11px;
                    font-weight: 600;
                    color: var(--gd)
                }

                .qb-sync {
                    font-size: 10px;
                    color: var(--mu);
                    margin-top: 1px
                }

                .qb-arrow {
                    font-size: 16px;
                    color: var(--g)
                }

                /* WHO */
                .who-sec {
                    background: var(--of)
                }

                .who-grid {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 22px;
                    margin-top: 52px
                }

                .wc {
                    background: var(--wh);
                    border: 1.5px solid var(--bd);
                    border-radius: 20px;
                    padding: 38px 30px;
                    transition: all .28s;
                    position: relative;
                    overflow: hidden
                }

                    .wc::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 4px;
                        background: var(--gp);
                        transition: background .25s
                    }

                    .wc:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 16px 48px rgba(49,110,23,.1);
                        border-color: rgba(49,110,23,.3)
                    }

                        .wc:hover::before, .wc.ft::before {
                            background: linear-gradient(90deg,var(--g),var(--gl))
                        }

                    .wc.ft {
                        background: var(--g);
                        border-color: var(--g)
                    }

                .wi {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    border: 1.5px solid var(--bd);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                    background: var(--gp)
                }

                .wc.ft .wi {
                    background: rgba(255,255,255,.15);
                    border-color: rgba(255,255,255,.3)
                }

                .wi svg {
                    width: 22px;
                    height: 22px;
                    stroke: var(--g);
                    fill: none;
                    stroke-width: 1.75
                }

                .wc.ft .wi svg {
                    stroke: #fff
                }

                .wc h3 {
                    font-family: var(--sf);
                    font-size: 22px;
                    font-weight: 700;
                    color: var(--gd);
                    margin-bottom: 16px
                }

                .wc.ft h3 {
                    color: #fff
                }

                .wl {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 8px
                }

                    .wl li {
                        font-size: 13.5px;
                        color: var(--mu);
                        padding-left: 17px;
                        position: relative;
                        line-height: 1.55
                    }

                .wc.ft .wl li {
                    color: rgba(255,255,255,.78)
                }

                .wl li::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 8px;
                    width: 6px;
                    height: 6px;
                    background: var(--gl);
                    border-radius: 50%
                }

                .wc.ft .wl li::before {
                    background: rgba(255,255,255,.65)
                }

                .wct {
                    display: inline-block;
                    margin-top: 26px;
                    padding: 10px 22px;
                    border: 1.5px solid rgba(49,110,23,.32);
                    border-radius: 5px;
                    font-size: 13px;
                    font-weight: 700;
                    color: var(--g);
                    text-decoration: none;
                    transition: all .2s
                }

                .wc.ft .wct {
                    border-color: rgba(255,255,255,.38);
                    color: #fff
                }

                .wct:hover {
                    background: var(--g);
                    border-color: var(--g);
                    color: #fff
                }

                .wc.ft .wct:hover {
                    background: rgba(255,255,255,.12);
                    border-color: rgba(255,255,255,.6)
                }

                /* PRICING */
                .price-sec {
                    background: var(--wh)
                }

                .pgd {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 20px;
                    margin-top: 52px
                }

                .pc {
                    background: var(--wh);
                    border: 1px solid var(--bd);
                    border-radius: 20px;
                    padding: 34px 26px;
                    position: relative;
                    transition: all .25s
                }

                    .pc:hover {
                        transform: translateY(-4px);
                        box-shadow: 0 14px 44px rgba(49,110,23,.1)
                    }

                    .pc.pf {
                        background: #0F2208;
                        border-color: #0F2208
                    }

                .pp {
                    position: absolute;
                    top: -12px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: var(--or);
                    color: #fff;
                    font-size: 10px;
                    font-weight: 700;
                    padding: 4px 16px;
                    border-radius: 30px;
                    white-space: nowrap;
                    letter-spacing: .06em
                }

                .pt2 {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: .1em;
                    text-transform: uppercase;
                    color: var(--mu);
                    margin-bottom: 7px
                }

                .pc.pf .pt2 {
                    color: rgba(255,255,255,.42)
                }

                .pn {
                    font-family: var(--sf);
                    font-size: 24px;
                    font-weight: 700;
                    color: var(--gd)
                }

                .pc.pf .pn {
                    color: #fff
                }

                .pv {
                    font-family: var(--sf);
                    font-size: 42px;
                    font-weight: 700;
                    color: var(--g);
                    margin: 16px 0;
                    line-height: 1
                }

                .pc.pf .pv {
                    color: #7ED44E
                }

                .pv span {
                    font-size: 15px;
                    font-weight: 400;
                    color: var(--mu)
                }

                .pc.pf .pv span {
                    color: rgba(255,255,255,.38)
                }

                .phr {
                    height: 1px;
                    background: var(--lt);
                    margin: 18px 0
                }

                .pc.pf .phr {
                    background: rgba(255,255,255,.1)
                }

                .pli {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 9px
                }

                    .pli li {
                        font-size: 13px;
                        color: var(--tx);
                        padding-left: 20px;
                        position: relative;
                        line-height: 1.5
                    }

                .pc.pf .pli li {
                    color: rgba(255,255,255,.72)
                }

                .pli li::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 5px;
                    width: 8px;
                    height: 5px;
                    border-left: 2px solid var(--g);
                    border-bottom: 2px solid var(--g);
                    transform: rotate(-45deg)
                }

                .pc.pf .pli li::before {
                    border-color: #7ED44E
                }

                .pcta {
                    display: block;
                    width: 100%;
                    text-align: center;
                    padding: 13px;
                    margin-top: 24px;
                    border-radius: 5px;
                    font-size: 13.5px;
                    font-weight: 700;
                    text-decoration: none;
                    transition: all .2s
                }

                .pco {
                    border: 1.5px solid var(--g);
                    color: var(--g)
                }

                    .pco:hover {
                        background: var(--g);
                        color: #fff
                    }

                .pcs {
                    background: var(--g);
                    color: #fff;
                    border: 1.5px solid var(--g)
                }

                    .pcs:hover {
                        background: var(--gl);
                        border-color: var(--gl)
                    }

                /* TESTIMONIALS */
                .testi-sec {
                    background: var(--of);
                    overflow: hidden;
                    padding: 80px 0
                }

                .testi-hdr {
                    text-align: center;
                    padding: 0 48px;
                    margin-bottom: 52px
                }

                .marquee-wrap {
                    display: flex;
                    gap: 20px;
                    overflow: hidden;
                    padding: 4px 0
                }

                .marquee-track {
                    display: flex;
                    gap: 20px;
                    animation: marqueeScroll 40s linear infinite;
                    flex-shrink: 0
                }

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

                @keyframes marqueeScroll {
                    0% {
                        transform: translateX(0)
                    }

                    100% {
                        transform: translateX(-50%)
                    }
                }

                .tc {
                    background: var(--wh);
                    border: 1px solid var(--bd);
                    border-radius: 14px;
                    padding: 24px 22px;
                    min-width: 300px;
                    max-width: 300px;
                    flex-shrink: 0
                }

                    .tc:hover {
                        transform: translateY(-2px)
                    }

                .tst {
                    color: var(--or);
                    font-size: 13px;
                    letter-spacing: 2px;
                    margin-bottom: 10px
                }

                .tq {
                    font-family: var(--sf);
                    font-size: 44px;
                    line-height: .75;
                    color: var(--g);
                    opacity: .16;
                    margin-bottom: 6px
                }

                .tt {
                    font-size: 13.5px;
                    line-height: 1.78;
                    color: var(--tx);
                    font-style: italic
                }

                .tw {
                    margin-top: 16px;
                    padding-top: 13px;
                    border-top: 1px solid var(--lt)
                }

                .tn {
                    font-weight: 700;
                    font-size: 13px;
                    color: var(--gd)
                }

                .tr2 {
                    font-size: 12px;
                    color: var(--mu);
                    margin-top: 2px
                }

                /* VIDEOS */
                .vid-sec {
                    background: var(--wh)
                }

                .vid-layout {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 60px;
                    align-items: start
                }

                .vmain {
                    border-radius: 16px;
                    overflow: hidden;
                    box-shadow: 0 18px 56px rgba(49,110,23,.12);
                    border: 1px solid var(--bd)
                }

                    .vmain iframe {
                        width: 100%;
                        aspect-ratio: 16/9;
                        display: block;
                        border: none
                    }

                .vmg {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 14px;
                    margin-top: 26px
                }

                .vmc {
                    border: 1px solid var(--bd);
                    border-radius: 12px;
                    overflow: hidden;
                    transition: all .25s;
                    cursor: pointer
                }

                    .vmc:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 6px 24px rgba(49,110,23,.1)
                    }

                .vt {
                    position: relative;
                    overflow: hidden
                }

                    .vt img {
                        width: 100%;
                        aspect-ratio: 16/9;
                        object-fit: cover;
                        display: block
                    }

                .vpo {
                    position: absolute;
                    inset: 0;
                    background: rgba(15,34,8,.3);
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                .vpb {
                    width: 36px;
                    height: 36px;
                    background: var(--g);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                    .vpb svg {
                        width: 13px;
                        height: 13px;
                        fill: #fff;
                        margin-left: 2px
                    }

                .vmb {
                    padding: 12px;
                    background: var(--wh)
                }

                    .vmb h4 {
                        font-size: 13px;
                        font-weight: 700;
                        color: var(--gd);
                        line-height: 1.4;
                        margin-bottom: 3px
                    }

                    .vmb p {
                        font-size: 11.5px;
                        color: var(--mu);
                        line-height: 1.5
                    }

                /* BLOG */
                .blog-sec {
                    background: var(--of)
                }

                .bhd {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    margin-bottom: 44px
                }

                .va {
                    padding: 9px 20px;
                    border: 1.5px solid var(--gd);
                    border-radius: 5px;
                    font-size: 13px;
                    font-weight: 700;
                    color: var(--gd);
                    text-decoration: none;
                    transition: all .2s
                }

                    .va:hover {
                        background: var(--gd);
                        color: #fff
                    }

                .bgd {
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 22px
                }

                .bc {
                    border: 1px solid var(--bd);
                    border-radius: 18px;
                    overflow: hidden;
                    transition: all .25s;
                    background: var(--wh)
                }

                    .bc:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 10px 36px rgba(49,110,23,.09)
                    }

                .bi {
                    overflow: hidden;
                    aspect-ratio: 16/9
                }

                    .bi img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform .5s;
                        display: block
                    }

                .bc:hover .bi img {
                    transform: scale(1.04)
                }

                .bb {
                    padding: 22px
                }

                .bd2 {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: .07em;
                    text-transform: uppercase;
                    color: var(--g);
                    margin-bottom: 9px;
                    display: block
                }

                .bb h3 {
                    font-size: 16px;
                    font-weight: 700;
                    color: var(--gd);
                    line-height: 1.35;
                    margin-bottom: 9px
                }

                .bb p {
                    font-size: 13px;
                    line-height: 1.7;
                    color: var(--mu)
                }

                .br {
                    display: inline-flex;
                    align-items: center;
                    gap: 5px;
                    margin-top: 13px;
                    font-size: 13px;
                    font-weight: 700;
                    color: var(--g);
                    text-decoration: none;
                    transition: gap .2s
                }

                    .br:hover {
                        gap: 9px
                    }

                    .br svg {
                        width: 13px;
                        height: 13px;
                        stroke: currentColor;
                        fill: none;
                        stroke-width: 2.5
                    }

                /* CTA */
                .cta-sec {
                    background: var(--g);
                    padding: 88px 48px;
                    text-align: center;
                    position: relative;
                    overflow: hidden
                }

                    .cta-sec::before {
                        content: "";
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(135deg,rgba(0,0,0,.12) 0%,transparent 60%)
                    }

                .cin {
                    position: relative;
                    max-width: 660px;
                    margin: 0 auto
                }

                    .cin h2 {
                        font-family: var(--sf);
                        font-size: clamp(28px,4vw,50px);
                        font-weight: 700;
                        color: #fff;
                        margin-bottom: 14px;
                        line-height: 1.15
                    }

                        .cin h2 em {
                            font-style: italic;
                            color: #B8F08A
                        }

                    .cin p {
                        font-size: 16px;
                        color: rgba(255,255,255,.7);
                        margin-bottom: 36px
                    }

                .cbs {
                    display: flex;
                    gap: 12px;
                    justify-content: center;
                    flex-wrap: wrap
                }

                .cbw {
                    padding: 15px 34px;
                    background: #fff;
                    color: var(--g);
                    font-size: 14px;
                    font-weight: 700;
                    border-radius: 5px;
                    text-decoration: none;
                    transition: all .2s;
                    border: 2px solid #fff
                }

                    .cbw:hover {
                        background: transparent;
                        color: #fff
                    }

                .cbg {
                    padding: 15px 30px;
                    border: 2px solid rgba(255,255,255,.38);
                    color: rgba(255,255,255,.88);
                    font-size: 14px;
                    font-weight: 600;
                    border-radius: 5px;
                    text-decoration: none;
                    transition: all .2s
                }

                    .cbg:hover {
                        border-color: rgba(255,255,255,.85);
                        color: #fff
                    }

                /* FOOTER */
                footer {
                    background: #081404;
                    padding: 64px 48px 30px
                }

                .fgd {
                    display: grid;
                    grid-template-columns: 2fr 1fr 1fr 1fr;
                    gap: 48px;
                    max-width: 1280px;
                    margin: 0 auto;
                    padding-bottom: 44px;
                    border-bottom: 1px solid rgba(255,255,255,.07)
                }

                .fli {
                    height: 34px;
                    display: block;
                    margin-bottom: 14px
                }

                .ftag {
                    font-size: 13px;
                    line-height: 1.75;
                    color: rgba(255,255,255,.38);
                    max-width: 240px;
                    margin-bottom: 18px
                }

                .fcon a {
                    color: #7ED44E;
                    text-decoration: none;
                    font-size: 13px;
                    display: block;
                    margin-bottom: 5px;
                    transition: color .2s
                }

                    .fcon a:hover {
                        color: #fff
                    }

                .fcol h4 {
                    font-size: 11px;
                    font-weight: 700;
                    letter-spacing: .1em;
                    text-transform: uppercase;
                    color: #fff;
                    margin-bottom: 16px
                }

                .fcol ul {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 9px
                }

                .fcol a {
                    font-size: 13px;
                    color: rgba(255,255,255,.42);
                    text-decoration: none;
                    transition: color .2s
                }

                    .fcol a:hover {
                        color: #7ED44E
                    }

                .fbt {
                    max-width: 1280px;
                    margin: 24px auto 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center
                }

                .fcp {
                    font-size: 12px;
                    color: rgba(255,255,255,.26)
                }

                .fso {
                    display: flex;
                    gap: 9px
                }

                    .fso a {
                        width: 32px;
                        height: 32px;
                        border: 1px solid rgba(255,255,255,.1);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        color: rgba(255,255,255,.42);
                        text-decoration: none;
                        transition: all .2s
                    }

                        .fso a:hover {
                            border-color: #7ED44E;
                            color: #7ED44E
                        }

                @media(max-width:960px) {
                    .ni {
                        padding: 0 20px
                    }

                    .nls {
                        display: none
                    }

                    section {
                        padding: 64px 24px
                    }

                    .story-sec .story-header {
                        padding: 60px 24px 0
                    }

                    .story-body {
                        grid-template-columns: 1fr;
                        padding: 0 24px;
                        gap: 0
                    }
                    /* On mobile: sticky panel moves BELOW steps, shown as a pinned bottom card */
                    .story-sticky {
                        display: block;
                        position: relative;
                        top: 0;
                        padding-bottom: 0;
                        margin-bottom: 32px;
                    }
                    /* On mobile show the sticky panel FIRST (above the steps) */
                    .story-body {
                        display: flex;
                        flex-direction: column-reverse
                    }

                    .story-sticky {
                        order: 1;
                        margin-bottom: 24px
                    }

                    .story-steps {
                        order: 2
                    }
                    /* Smaller frame on mobile */
                    .story-frame {
                        border-radius: 10px
                    }

                    .story-screen {
                        font-size: 11px
                    }

                    .mock-topbar-nav, .mock-topbar-btns {
                        display: none
                    }

                    .mock-body {
                        padding: 12px 14px
                    }

                    .mock-page-title {
                        font-size: 12px
                    }

                    .mock-form-row {
                        grid-template-columns: 1fr 1fr;
                        gap: 7px
                    }

                    .mock-field {
                        padding: 7px 9px
                    }

                        .mock-field label {
                            font-size: 8px
                        }

                    .mock-field-val {
                        font-size: 10px
                    }

                    .mock-table {
                        font-size: 9px
                    }

                        .mock-table th, .mock-table td {
                            padding: 5px 7px
                        }

                    .mock-stats-row {
                        gap: 6px
                    }

                    .mock-stat-card .val {
                        font-size: 16px
                    }
                    /* Step cards: always full opacity on mobile */
                    .story-step {
                        opacity: 1 !important
                    }
                    /* Hide progress bar on mobile */
                    .story-progress {
                        display: none
                    }

                    .story-step-indicator {
                        display: none
                    }

                    .story-step {
                        opacity: 1
                    }

                    .abg, .vid-layout, .who-grid, .pgd, .bgd, .fgd {
                        grid-template-columns: 1fr
                    }

                    .asi {
                        display: none
                    }

                    .trust {
                        padding: 16px 24px
                    }

                    footer {
                        padding: 44px 24px 26px
                    }
                }

                /* Mobile: make steps tappable to switch the screen above */
                @media(max-width:960px) {
                    .story-step {
                        cursor: pointer;
                        border: 1px solid var(--bd);
                        border-radius: 10px;
                        margin-bottom: 10px;
                        padding: 20px 20px;
                        background: var(--wh);
                        transition: border-color .25s,background .25s;
                    }

                        .story-step.active {
                            border-color: rgba(49,110,23,.35);
                            background: var(--gp);
                        }

                    .step-num {
                        margin-bottom: 10px
                    }

                    .story-step h3 {
                        font-size: 17px;
                        margin-bottom: 8px
                    }

                    .story-step p {
                        font-size: 14px
                    }

                    .story-spacer {
                        height: 10px
                    }

                    .step-tag {
                        opacity: 1 !important
                    }
                }

                /* ── FOUNDER STORY SECTION ───────────────────────────────── */
                .founder-sec {
                    background: var(--wh);
                    border-top: 1px solid var(--bd);
                    padding: 96px 52px;
                }

                .founder-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 72px;
                    align-items: start;
                    max-width: 1280px;
                    margin: 0 auto;
                }

                /* Left text */
                .founder-text .ey {
                    color: var(--g)
                }

                .founder-quote {
                    margin: 24px 0 28px;
                    padding: 24px 28px;
                    background: var(--gp);
                    border-left: 4px solid var(--g);
                    border-radius: 0 8px 8px 0;
                }

                .fq-mark {
                    font-family: var(--sf);
                    font-size: 60px;
                    line-height: .7;
                    color: var(--g);
                    opacity: .3;
                    display: block;
                    margin-bottom: 8px;
                }

                .founder-quote p {
                    font-size: 16px;
                    line-height: 1.8;
                    color: var(--tx);
                    font-style: italic;
                    font-family: var(--sf);
                }

                .founder-sig {
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    margin-bottom: 28px;
                }

                .founder-avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    background: var(--g);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    font-weight: 700;
                    letter-spacing: .04em;
                    flex-shrink: 0;
                }

                .founder-name {
                    font-size: 15px;
                    font-weight: 700;
                    color: var(--nv)
                }

                .founder-title {
                    font-size: 13px;
                    color: var(--mu);
                    margin-top: 2px
                }

                .founder-facts {
                    display: flex;
                    flex-direction: column;
                    gap: 12px
                }

                .founder-fact {
                    display: flex;
                    align-items: flex-start;
                    gap: 12px;
                    font-size: 14px;
                    line-height: 1.6;
                    color: var(--mu);
                }

                    .founder-fact svg {
                        width: 18px;
                        height: 18px;
                        stroke: var(--g);
                        flex-shrink: 0;
                        margin-top: 2px;
                    }

                /* Right: video */
                .founder-video-col {
                    display: flex;
                    flex-direction: column;
                    gap: 24px
                }

                .founder-video-wrap {
                }

                .founder-vid-frame {
                    background: #111;
                    border-radius: 14px;
                    overflow: hidden;
                    box-shadow: 0 20px 56px rgba(49,110,23,.18),0 0 0 1px rgba(0,0,0,.1);
                }

                .founder-vid-chrome {
                    background: #1C1C1C;
                    padding: 10px 14px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border-bottom: 1px solid rgba(255,255,255,.06);
                }

                .founder-thumb {
                    position: relative;
                    cursor: pointer;
                    overflow: hidden
                }

                    .founder-thumb img {
                        width: 100%;
                        aspect-ratio: 16/9;
                        object-fit: cover;
                        display: block;
                        transition: transform .4s;
                        filter: brightness(.85);
                    }

                    .founder-thumb:hover img {
                        transform: scale(1.03);
                        filter: brightness(.95)
                    }

                .founder-play-ov {
                    position: absolute;
                    inset: 0;
                    background: rgba(15,34,8,.4);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 14px;
                    transition: background .25s;
                }

                .founder-thumb:hover .founder-play-ov {
                    background: rgba(15,34,8,.25)
                }

                .founder-play-btn {
                    width: 68px;
                    height: 68px;
                    background: var(--g);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 8px 28px rgba(49,110,23,.55);
                    transition: transform .2s;
                }

                .founder-thumb:hover .founder-play-btn {
                    transform: scale(1.1)
                }

                .founder-play-label {
                    font-size: 13px;
                    font-weight: 700;
                    color: #fff;
                    background: rgba(0,0,0,.5);
                    padding: 6px 16px;
                    border-radius: 20px;
                    letter-spacing: .04em;
                }

                .founder-vid-caption {
                    margin-top: 12px;
                    font-size: 13px;
                    color: var(--mu);
                    line-height: 1.6;
                    font-style: italic;
                }

                /* Stats row */
                .founder-stats-row {
                    display: flex;
                    align-items: center;
                    gap: 0;
                    background: var(--gp);
                    border-radius: 10px;
                    border: 1px solid var(--bd);
                    overflow: hidden;
                }

                .founder-stat {
                    flex: 1;
                    padding: 18px 20px;
                    text-align: center
                }

                .founder-stat-div {
                    width: 1px;
                    background: var(--bd);
                    align-self: stretch
                }

                .fstat-n {
                    font-family: var(--sf);
                    font-size: 28px;
                    font-weight: 700;
                    color: var(--g);
                    display: block;
                    line-height: 1;
                    font-variation-settings: "opsz" 144;
                }

                .fstat-l {
                    font-size: 11px;
                    color: var(--mu);
                    letter-spacing: .06em;
                    text-transform: uppercase;
                    margin-top: 5px;
                    display: block;
                }

                @media(max-width:960px) {
                    .founder-sec {
                        padding: 64px 24px
                    }

                    .founder-grid {
                        grid-template-columns: 1fr;
                        gap: 40px
                    }
                }/* End custom CSS */