p {
  margin-bottom:unset !important;
}
      /* ================================================================
   bMobile Route — New Homepage  |  Brand-aligned theme
================================================================ */
      @font-face {
        font-family: "MilligramText-Regular";
        src: url("/assets/fonts/MilligramText-Regular.ttf") format("truetype");
        font-display: swap;
      }
      @font-face {
        font-family: "MilligramText-Medium";
        src: url("/assets/fonts/MilligramText-Medium.ttf") format("truetype");
        font-display: swap;
      }

      :root {
        /* Brand palette */
        --green: #4aa517;
        --green-deep: #3b8f12;
        --green-dark: #266402;
        --blue: #0085cd;
        --blue-deep: #006faa;
        --navy: #021940;
        --navy2: #0d2848;
        --ink: #021940;
        --ink-soft: #2a4a7a;
        --grey: #5a7090;
        --grey-soft: #8a9db5;

        /* Surfaces */
        --paper: #ffffff;
        --cream: #f4f8fc;
        --cream2: #ebf5fb;
        --cream-tint: #eef4fa;
        --hairline: #c8d8ea;
        --hairline-soft: #dce8f2;
        --band-green: #eef7e6;
        --band-blue: #e4f1fa;

        /* Typography */
        --display: "CooperBTLight", Georgia, serif;
        --body: "MilligramText-Regular", -apple-system, "Segoe UI", sans-serif;
        --mono: "MilligramText-Regular", -apple-system, "Segoe UI", sans-serif;

        /* Layout */
        --max: 1280px;
        --max-tight: 1100px;
        --max-narrow: 900px;
      }

      /* ── Reset ── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      em {
        font-style: normal;
      }
      html {
        scroll-behavior: smooth;
      }

      body {
        background: var(--paper);
        color: var(--ink);
        font-family: var(--body);
        font-size: 17px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      /* Override common.css h sizes for this page */
      h1 {
        font-size: clamp(36px, 5.5vw, 72px) !important;
      }
      h2 {
        font-size: clamp(28px, 4vw, 52px) !important;
        line-height: 1.08 !important;
      }
      h3 {
        font-size: clamp(22px, 2.8vw, 36px) !important;
      }
      h4 {
        font-size: 20px !important;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: var(--display) !important;
        letter-spacing: -0.01em;
      }

      a {
        color: inherit;
        text-decoration: none !important;
      }

      .eyebrow {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--green);
        display: inline-block;
      }

      /* Utility wrappers */
      .wrap {
        max-width: var(--max);
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 2;
      }
      .wrap-tight {
        max-width: var(--max-tight);
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 2;
      }
      .wrap-narrow {
        max-width: var(--max-narrow);
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 2;
      }

      .hero-wrapper{
        background: unset;
      }


      /* ================================================================
   HERO WRAPPER & HERO SECTION
================================================================ */
      .hero-wrapper.hero-wrapper-home {
        background: linear-gradient(
          120deg,
          rgb(195, 225, 242) 0%,
          rgb(220, 235, 248) 20%,
          rgb(238, 245, 252) 40%,
          rgb(210, 232, 210) 60%,
          rgb(185, 220, 235) 80%,
          rgb(200, 228, 215) 100%
        );
        background-size: 280% 280%;
        animation: heroBgWave 12s ease-in-out infinite alternate;
      }

      @keyframes heroBgWave {
        0% {
          background-position: 0% 50%;
        }
        25% {
          background-position: 50% 20%;
        }
        50% {
          background-position: 100% 50%;
        }
        75% {
          background-position: 50% 80%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .hero {
        position: relative;
        padding: 80px 0 64px;
        overflow: hidden;
        text-align: center;
      }

      .hero-eyebrow-row {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 28px !important;
      }
      .hero-eyebrow-row::before,
      .hero-eyebrow-row::after {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--green);
      }

      .hero h1 {
        color: var(--navy) !important;
        max-width: 1000px;
        margin: 0 auto 24px !important;
        line-height: 1.06 !important;
      }
      .hero h1 .accent {
        color: var(--green) !important;
        font-size: clamp(36px, 7vw, 52px) !important;
      }

      .hero-sub {
        font-size: 19px;
        line-height: 1.55;
        color: var(--ink-soft);
        max-width: 640px;
        margin: 0 auto 36px !important;
      }

      .hero-ctas {
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px !important;
      }

      /* ── bMobile-style pill CTA buttons ── */
      .btn-primary-bm {
        background: var(--green);
        color: #fff !important;
        padding: 14px 28px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.25s;
        border: 2px solid var(--green-dark);
        box-shadow: 0 4px 14px rgba(74, 165, 23, 0.28);
        cursor: pointer;
      }
      .btn-primary-bm:hover {
        background: var(--green-deep);
        transform: translateY(-1px);
        color: #fff !important;
      }
      .btn-primary-bm svg {
        transition: transform 0.25s;
      }
      .btn-primary-bm:hover svg {
        transform: translateX(3px);
      }

      .btn-secondary-bm {
        color: var(--navy);
        padding: 14px 4px;
        font-size: 15px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-bottom: 2px solid var(--green);
        transition: all 0.2s;
      }
      .btn-secondary-bm:hover {
        color: var(--green-deep);
        border-color: var(--green-deep);
      }

      .hero-trust {
        font-size: 14px;
        color: var(--grey);

        font-family: var(--display);
        margin-bottom: 52px !important;
      }

      /* ── App mockup frame ── */
      .hero-product-wrap {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 16px;
        position: relative;
        overflow: hidden; /* contain glow on narrow viewports */
      }
      .hero-product-wrap::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -40px;
        right: -40px;
        height: 60%;
        transform: translateY(-50%);
        background: radial-gradient(
          ellipse at center,
          rgba(74, 165, 23, 0.14),
          transparent 65%
        );
        pointer-events: none;
        z-index: 0;
      }
      .hero-product {
        position: relative;
        background: var(--paper);
        border-radius: 16px;
        box-shadow:
          0 1px 2px rgba(2, 25, 64, 0.04),
          0 30px 70px -25px rgba(2, 25, 64, 0.2),
          0 60px 120px -40px rgba(74, 165, 23, 0.12);
        overflow: hidden;
        border: 1px solid var(--hairline-soft);
        z-index: 1;
      }
      .browser-bar {
        background: linear-gradient(to bottom, #eef4fa, #e4edf5);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid var(--hairline-soft);
      }
      .browser-dot {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: var(--hairline);
      }
      .browser-url {
        margin-left: 12px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--grey);
        background: var(--paper);
        padding: 4px 12px;
        border-radius: 4px;
        flex: 1;
        max-width: 320px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .app {
        display: grid;
        grid-template-columns: 1fr 320px;
        min-height: 480px;
      }
      /* side-by-side layout kept at all widths — see responsive block below */

      .app-main {
        position: relative;
        background: var(--cream);
      }
      .app-header {
        padding: 14px 22px;
        border-bottom: 1px solid var(--hairline-soft);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--paper);
      }
      .app-title {
        font-family: var(--display);
        font-size: 16px !important;
        color: var(--navy);
        text-align: left;
      }
      .app-title-sub {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--grey);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
      }
      .app-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--green);
        padding: 4px 10px;
        background: var(--band-green);
        border-radius: 999px;
      }
      .pulse {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      .map-area {
        position: relative;
        height: 380px;
        background: var(--cream);
        overflow: hidden;
        display: block;
      }

      .app-side {
        border-left: 1px solid var(--hairline-soft);
        background: var(--paper);
        overflow: hidden;
        text-align: left;
      }
      .side-head {
        padding: 14px 20px;
        border-bottom: 1px solid var(--hairline-soft);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .side-head h4 {
        font-family: var(--display);
        font-size: 13px !important;
        color: var(--navy);
      }
      .side-head span {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--grey);
      }

      .stop {
        padding: 11px 20px;
        border-bottom: 1px solid var(--hairline-soft);
        display: flex;
        gap: 12px;
        align-items: flex-start;
      }
      .stop:last-child {
        border-bottom: 0;
      }
      .stop-mark {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
        background: var(--green);
        color: white;
      }
      .stop-mark.live {
        background: var(--blue);
        animation: pulse 2s infinite;
      }
      .stop-mark.flag {
        background: #e8b23e;
      }
      .stop-mark.pending {
        background: var(--cream2);
        border: 1px solid var(--hairline);
      }
      .stop-content {
        flex: 1;
        min-width: 0;
      }
      .stop-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 2px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .stop-meta {
        font-size: 10px;
        color: var(--grey);
        font-family: var(--mono);
      }

      .settle-strip {
        border-top: 1px solid var(--hairline-soft);
        background: var(--cream);
        padding: 16px 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        text-align: left;
      }
      .settle-cell .label {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--grey);
        margin-bottom: 4px !important;
      }
      .settle-cell .num {
        font-family: var(--display);
        font-size: 20px !important;
        color: var(--navy);
        font-weight: 600;
      }
      .settle-cell .num.green {
        color: var(--green);
      }
      .settle-cell .num.warn {
        color: #c28a1e;
      }

      /* ================================================================
   MOCKUP — RESPONSIVE SCALE
   The card is rendered at full desktop size (900px) and scaled
   proportionally by JS so the desktop layout is always visible.
================================================================ */
      @media (max-width: 920px) {
        .hero-product-wrap {
          padding: 0 8px;
          overflow: hidden;
        }
        /* card width + transform-origin set by JS */
        .hero-product {
          transform-origin: top left;
          will-change: transform;
        }
      }

      /* ================================================================
   EMPATHY BAR
================================================================ */
      .empathy {
        border-top: 1px solid var(--hairline-soft);
        border-bottom: 1px solid var(--hairline-soft);
        padding: 80px 0;
        background: var(--cream-tint);
      }
      .empathy-head {
        text-align: center;
        margin-bottom: 56px !important;
      }
      .empathy-head .eyebrow {
        margin-bottom: 16px !important;
      }
      .empathy-head h2 {
        color: var(--navy);
      }
      .empathy-head h2 em {
        color: var(--green);
      }

      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto 64px;
        padding: 0 16px;
      }
      @media (max-width: 800px) {
        .stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 28px;
        }
      }
      @media (max-width: 460px) {
        .stats {
          grid-template-columns: 1fr;
        }
      }

      .stat {
        text-align: center;
        padding: 0 16px;
      }
      .stat .num {
        font-family: var(--display);
        font-size: clamp(36px, 7vw, 52px) !important;
        line-height: 0.95;
        letter-spacing: -0.02em;
        color: var(--navy);
        display: block;
        margin-bottom: 10px !important;
      }
      .stat .num span {
        color: var(--green);
      }
      .stat .lbl {
        font-size: 14px;
        line-height: 1.45;
        color: var(--ink-soft);
        border-top: 2px solid var(--green);
        padding-top: 12px;
        max-width: 220px;
        margin: 0 auto;
      }

      .logo-strip {
        border-top: 1px solid var(--hairline);
        padding-top: 36px;
      }
      .logo-strip-lbl {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--grey);
        margin-bottom: 24px !important;
        text-align: center;
      }
      .logo-row {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 36px 56px;
      }
      .logo-stub {
        font-family: var(--display);
        font-size: 20px !important;
        color: var(--brand, var(--grey));
        opacity: 1;
        white-space: nowrap;
        cursor: default;
        transition:
          opacity 0.25s ease,
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          letter-spacing 0.3s ease;
      }
      .logo-stub:hover {
        opacity: 1;
        color: var(--brand, var(--navy));
        transform: scale(1.12) translateY(-3px);
        letter-spacing: 0.02em;
      }
      /* Per-brand colors extracted from logo images */
      .logo-row .logo-stub:nth-child(1) {
        --brand: #9e923e;
      } /* Lemate       */
      .logo-row .logo-stub:nth-child(2) {
        --brand: #582a6f;
      } /* Glacier      */
      .logo-row .logo-stub:nth-child(3) {
        --brand: #d4a020;
      } /* Brims        */
      .logo-row .logo-stub:nth-child(4) {
        --brand: #2a2a2a;
      } /* Gabriels     */
      .logo-row .logo-stub:nth-child(5) {
        --brand: #644e48;
      } /* Harmon Sons  */
      .logo-row .logo-stub:nth-child(6) {
        --brand: #947175;
      } /* Harpers      */
      .logo-row .logo-stub:nth-child(7) {
        --brand: #636427;
      } /* Kurz         */
      .logo-row .logo-stub:nth-child(8) {
        --brand: #6b6663;
      } /* Mill Creek   */
      .logo-row .logo-stub:nth-child(9) {
        --brand: #cf2e47;
      } /* Old Vienna   */
      .logo-row .logo-stub:nth-child(10) {
        --brand: #2e2e2e;
      } /* Rodriguez    */
      .logo-row .logo-stub:nth-child(11) {
        --brand: #5f8042;
      } /* Salteez      */
      .logo-row .logo-stub:nth-child(12) {
        --brand: #961f22;
      } /* Sinaloa      */
      .logo-row .logo-stub:nth-child(13) {
        --brand: #7a6e70;
      } /* Steph's      */
      .logo-row .logo-stub:nth-child(14) {
        --brand: #7c9e98;
      } /* Taco Works   */
      .logo-row .logo-stub:nth-child(15) {
        --brand: #2a2a2a;
      } /* Yolo Ice     */

      /* Mobile ticker — JS adds .ticker-mode to .logo-strip on small screens */
      @keyframes logoTick {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      .logo-ticker {
        overflow: hidden;
        width: 100%;
        padding: 4px 0;
        display: none;
      }
      .logo-ticker-track {
        display: flex;
        align-items: center;
        gap: 48px;
        width: max-content;
        animation: logoTick 22s linear infinite;
      }
      .logo-ticker-track .logo-stub {
        flex-shrink: 0;
        font-size: 18px !important;
        white-space: nowrap;
        cursor: default;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .logo-ticker-track .logo-stub:hover {
        transform: scale(1.1) translateY(-2px);
      }
      /* JS sets these when ticker is active */
      .ticker-mode .logo-row {
        display: none;
      }
      .ticker-mode .logo-ticker {
        display: block;
      }

      /* Int-row ticker (same pattern, separate toggle class) */
      .int-ticker-mode .int-row {
        display: none;
      }
      .int-ticker-mode .int-ticker {
        display: block;
      }
      .int-ticker {
        overflow: hidden;
        width: 100%;
        padding: 4px 0;
        display: none;
      }
      .int-ticker-track {
        display: flex;
        align-items: center;
        gap: 48px;
        width: max-content;
        animation: logoTick 18s linear infinite;
      }
      .int-ticker-track .int-stub {
        flex-shrink: 0;
        font-size: 18px !important;
        white-space: nowrap;
        cursor: default;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .int-ticker-track .int-stub:hover {
        transform: scale(1.1) translateY(-2px);
      }

      /* ================================================================
   VERTICALS
================================================================ */
      .verticals {
        padding: 100px 0 90px;
        background: var(--paper);
      }

      .section-head {
        max-width: 760px;
        margin-bottom: 56px !important;
      }
      .section-head.center {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .section-head .eyebrow {
        margin-bottom: 18px !important;
      }
      .section-head h2 {
        color: var(--navy);
        margin-bottom: 20px !important;
      }
      .section-head h2 em {
        color: var(--green);
      }
      .section-head p {
        font-size: 18px;
        line-height: 1.5;
        color: var(--ink-soft);
        max-width: 600px;
      }
      .section-head.center p {
        margin: 0 auto;
      }

      .verticals-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      @media (max-width: 1000px) {
        .verticals-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 560px) {
        .verticals-grid {
          grid-template-columns: 1fr;
        }
      }

      .vert-card {
        background: var(--paper);
        border: 1px solid var(--hairline-soft);
        border-radius: 14px;
        padding: 32px 26px 28px;
        transition: all 0.25s;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .vert-card:hover {
        transform: translateY(-3px);
        border-color: var(--green);
        box-shadow: 0 16px 40px -16px rgba(74, 165, 23, 0.2);
      }
      .vert-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 22px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--band-green);
        border-radius: 10px;
      }
      .vert-card .lbl {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--green);
        margin-bottom: 12px !important;
      }
      .vert-card h4 {
        color: var(--navy);
        margin-bottom: 14px !important;
        line-height: 1.2 !important;
      }
      .vert-card p {
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--ink-soft);
        margin-bottom: 22px !important;
        flex: 1;
      }
      .vert-link {
        font-size: 13px;
        font-weight: 600;
        color: var(--green-deep);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: gap 0.2s;
        position: relative;
        z-index: 1;
      }
      /* Invisible overlay that makes the whole card clickable */
      .vert-link::after {
        content: "";
        position: absolute;
        inset: 0;
      }
      .vert-card:hover .vert-link {
        gap: 10px;
      }

      /* ================================================================
   PAIN CARDS
================================================================ */
      .pain-section {
        padding: 90px 0 80px;
        background: var(--cream-tint);
        border-top: 1px solid var(--hairline-soft);
        border-bottom: 1px solid var(--hairline-soft);
      }
      .pain-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      @media (max-width: 1000px) {
        .pain-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 640px) {
        .pain-grid {
          grid-template-columns: 1fr;
        }
      }

      .pain-card {
        background: var(--paper);
        border: 1px solid var(--hairline-soft);
        border-radius: 14px;
        padding: 28px 28px 24px;
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .pain-card:hover {
        transform: translateY(-3px);
        border-color: var(--green);
        box-shadow: 0 16px 40px -16px rgba(74, 165, 23, 0.16);
      }
      .pain-num {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        color: var(--green);
        margin-bottom: 16px !important;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .pain-num::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--hairline);
      }
      .pain-quote {
        font-family: var(--display);

        font-size: 17px !important;
        line-height: 1.4;
        color: var(--navy);
        margin-bottom: 20px !important;
        border-left: 3px solid var(--green);
        padding-left: 14px;
      }
      .pain-fix-head {
        font-family: var(--display);
        font-size: 17px !important;
        line-height: 1.25 !important;
        color: var(--blue-deep);
        margin-bottom: 10px !important;
        font-weight: 600;
      }
      .pain-fix-body {
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin-bottom: 20px !important;
        flex: 1;
      }
      .pain-screen {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid var(--hairline-soft);
      }
      .mini {
        width: 100%;
        height: 72px;
        display: block;
      }

      /* ================================================================
   PRODUCT FLOW
================================================================ */
      .flow {
        padding: 110px 0;
        background: var(--paper);
        position: relative;
      }
      .flow::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          var(--hairline),
          transparent
        );
      }
      .flow-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
      }
      @media (max-width: 1100px) {
        .flow-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }
      }
      @media (max-width: 560px) {
        .flow-grid {
          grid-template-columns: 1fr;
        }
      }

      .flow-step {
        background: var(--paper);
        border: 1px solid var(--hairline-soft);
        padding: 28px 22px;
        position: relative;
        transition: all 0.25s;
      }
      .flow-step:first-child {
        border-radius: 14px 0 0 14px;
      }
      .flow-step:last-child {
        border-radius: 0 14px 14px 0;
      }
      .flow-step + .flow-step {
        border-left: none;
      }
      .flow-step:hover {
        background: var(--band-green);
        border-color: var(--green);
        z-index: 2;
      }

      @media (max-width: 1100px) {
        .flow-step {
          border-radius: 14px !important;
          border: 1px solid var(--hairline-soft) !important;
        }
      }

      .flow-step:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -7px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 13px;
        height: 13px;
        background: var(--paper);
        border-top: 1px solid var(--hairline-soft);
        border-right: 1px solid var(--hairline-soft);
        z-index: 3;
      }
      @media (max-width: 1100px) {
        .flow-step:not(:last-child)::after {
          display: none;
        }
      }

      .flow-num {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        color: var(--green);
        margin-bottom: 16px !important;
        font-weight: 500;
      }
      .flow-icon {
        width: 40px;
        height: 40px;
        background: var(--band-green);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px !important;
      }
      .flow-step:hover .flow-icon {
        background: white;
      }
      .flow-step h4 {
        color: var(--navy);
        margin-bottom: 6px !important;
        line-height: 1.25 !important;
      }
      .flow-module {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        color: var(--grey);
        text-transform: uppercase;
        margin-bottom: 14px !important;
      }
      .flow-step p {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--ink-soft);
      }

      .flow-tagline {
        margin: 60px auto 0;
        text-align: center;
        font-family: var(--display);

        font-size: clamp(20px, 2.4vw, 28px) !important;
        color: var(--navy);
        max-width: 800px;
        line-height: 1.4;
      }
      .flow-tagline em {
        color: var(--green);
      }

      .integrations {
        margin-top: 64px;
        padding-top: 36px;
        border-top: 1px solid var(--hairline);
        text-align: center;
      }
      .integrations-lbl {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--grey);
        margin-bottom: 24px !important;
      }
      .int-row {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 28px 48px;
      }
      .int-stub {
        font-family: var(--display);
        font-size: 20px !important;
        color: var(--brand, var(--grey));
        opacity: 1;
        white-space: nowrap;
        cursor: default;
        transition:
          opacity 0.25s ease,
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          letter-spacing 0.3s ease;
      }
      .int-stub:hover {
        opacity: 1;
        color: var(--brand, var(--navy));
        transform: scale(1.12) translateY(-3px);
        letter-spacing: 0.02em;
      }
      /* Per-brand colors */
      .int-row .int-stub:nth-child(1) {
        --brand: #2ca01c;
      } /* QuickBooks   */
      .int-row .int-stub:nth-child(2) {
        --brand: #f5841f;
      } /* NetSuite     */
      .int-row .int-stub:nth-child(3) {
        --brand: #003087;
      } /* SYSPRO       */
      .int-row .int-stub:nth-child(4) {
        --brand: #00b050;
      } /* Sage         */
      .int-row .int-stub:nth-child(5) {
        --brand: #0078d4;
      } /* Dynamics 365 */
      .int-row .int-stub:nth-child(6) {
        --brand: #e8650a;
      } /* Acumatica    */
      .int-row .int-stub:nth-child(7) {
        --brand: #c00000;
      } /* Epicor       */
      .int-row .int-stub:nth-child(8) {
        --brand: #dd1b33;
      } /* Infor        */

      /* ================================================================
   YOUR DAY — Dark Navy Band
================================================================ */
      .day {
        background: var(--navy);
        color: var(--cream);
        padding: 100px 0;
        position: relative;
        overflow: hidden;
      }
      .day::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -200px;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(74, 165, 23, 0.14),
          transparent 65%
        );
        pointer-events: none;
      }
      .day .eyebrow {
        color: var(--green);
      }
      .day .section-head h2 {
        color: var(--cream) !important;
      }
      .day .section-head h2 em {
        color: var(--green) !important;
      }
      .day .section-head p {
        color: rgba(244, 248, 252, 0.75);
      }

      .timeline {
        margin-top: 40px;
        border-top: 1px solid rgba(244, 248, 252, 0.12);
      }
      .moment {
        display: grid;
        grid-template-columns: 140px 1.4fr 1.6fr;
        gap: 32px;
        padding: 36px 0;
        border-bottom: 1px solid rgba(244, 248, 252, 0.12);
        align-items: center;
        transition: all 0.3s;
      }
      .moment:hover {
        background: rgba(74, 165, 23, 0.06);
      }
      @media (max-width: 900px) {
        .moment {
          grid-template-columns: 1fr;
          gap: 12px;
          padding: 28px 0;
        }
      }
      .moment-time {
        font-family: var(--display);
        font-size: 48px !important;
        color: var(--green);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .moment-time small {
        font-size: 20px;
        color: rgba(74, 165, 23, 0.65);
        margin-left: 4px;
      }
      .moment-head {
        font-family: var(--display);
        font-size: 22px !important;
        line-height: 1.2 !important;
        color: var(--cream);
      }
      .moment-body {
        font-size: 16px;
        line-height: 1.55;
        color: rgba(244, 248, 252, 0.75);
      }

      /* ================================================================
   PROMISES
================================================================ */
      .promises {
        padding: 100px 0;
        background: var(--paper);
      }
      .promises-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
      @media (max-width: 800px) {
        .promises-grid {
          grid-template-columns: 1fr;
        }
      }

      .promise {
        padding: 48px 44px;
        border-radius: 18px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--hairline-soft);
      }
      .promise.green {
        background: var(--band-green);
        border-color: rgba(74, 165, 23, 0.22);
      }
      .promise.blue {
        background: var(--band-blue);
        border-color: rgba(0, 133, 205, 0.22);
      }

      .promise-objection {
        font-family: var(--display);

        font-size: 17px !important;
        color: var(--grey);
        margin-bottom: 24px !important;
        padding-bottom: 24px;
        border-bottom: 1px dashed var(--hairline);
      }
      .promise h3 {
        color: var(--navy);
        margin-bottom: 16px !important;
      }
      .promise.green h3 em {
        color: var(--green);
      }
      .promise.blue h3 em {
        color: var(--blue-deep);
      }
      .promise p {
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-soft);
      }

      /* ================================================================
   COMPARISON TABLE
================================================================ */
      .comparison {
        padding: 100px 0;
        background: var(--cream-tint);
        border-top: 1px solid var(--hairline-soft);
        border-bottom: 1px solid var(--hairline-soft);
      }
      .comp-table {
        background: var(--paper);
        border: 1px solid var(--hairline-soft);
        border-radius: 14px;
        overflow: hidden;
        margin-top: 40px;
      }
      .comp-row {
        display: grid;
        grid-template-columns: 2.4fr 1fr 1.2fr 1fr;
        border-bottom: 1px solid var(--hairline-soft);
      }
      .comp-row:last-child {
        border-bottom: 0;
      }
      .comp-cell {
        padding: 18px 20px;
        font-size: 14.5px;
        border-right: 1px solid var(--hairline-soft);
        display: flex;
        align-items: center;
      }
      .comp-cell:last-child {
        border-right: 0;
      }
      .comp-row.head .comp-cell {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        background: var(--cream-tint);
        color: var(--navy);
        padding: 16px 20px;
      }
      .comp-row.head .comp-cell:nth-child(2),
      .comp-row.head .comp-cell:nth-child(3) {
        color: var(--grey);
      }
      .comp-row.head .comp-cell:nth-child(4) {
        color: var(--green);
        background: var(--band-green);
        font-weight: 700;
      }
      .comp-row .comp-cell:first-child {
        font-weight: 500;
      }
      .comp-row .comp-cell:nth-child(4) {
        background: rgba(74, 165, 23, 0.04);
        font-weight: 500;
      }
      .yes {
        color: var(--green);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .no {
        color: #b53d3d;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .partial {
        color: var(--grey);
      }
      .comp-foot {
        margin: 28px auto 0;
        text-align: center;
        font-family: var(--display);

        font-size: 19px !important;
        color: var(--ink-soft);
        max-width: 760px;
        line-height: 1.4;
      }
      .comp-foot strong {
        font-style: normal;
        color: var(--navy);
      }
      @media (max-width: 700px) {
        .comp-row {
          grid-template-columns: 1.6fr 1fr 1fr 1fr;
        }
        .comp-cell {
          padding: 12px 10px;
          font-size: 13px;
        }
        .comp-row.head .comp-cell {
          font-size: 9px;
          padding: 10px 8px;
        }
      }
      @media (max-width: 560px) {
        /* Header row: hide the "What actually matters" cell, keep 3 value headers */
        .comp-row.head {
          grid-template-columns: repeat(3, 1fr);
        }
        .comp-row.head .comp-cell:first-child {
          display: none;
        }
        .comp-row.head .comp-cell {
          font-size: 8.5px;
          letter-spacing: 0.08em;
          padding: 10px 10px;
          justify-content: center;
          text-align: center;
        }

        /* Data rows: description full-width on top, 3 value cells below */
        .comp-row:not(.head) {
          grid-template-columns: repeat(3, 1fr);
        }
        .comp-row:not(.head) .comp-cell:first-child {
          grid-column: 1 / -1;
          border-right: 0;
          border-bottom: 1px solid var(--hairline-soft);
          background: var(--cream);
          font-size: 12.5px;
          font-weight: 600;
          padding: 10px 14px;
          color: var(--navy);
        }
        .comp-row:not(.head) .comp-cell:not(:first-child) {
          font-size: 12px;
          padding: 10px 8px;
          justify-content: center;
          text-align: center;
        }
        .yes,
        .no,
        .partial {
          font-size: 11.5px;
          justify-content: center;
        }
      }

      /* ================================================================
   TRUST
================================================================ */
      .trust {
        padding: 110px 0;
        background: var(--paper);
      }
      .trust-grid {
        display: grid;
        grid-template-columns: 1.1fr 1.4fr;
        gap: 80px;
        align-items: center;
      }
      @media (max-width: 900px) {
        .trust-grid {
          grid-template-columns: 1fr;
          gap: 48px;
        }
      }

      .trust-quote {
        font-family: var(--display);

        font-size: clamp(22px, 2.4vw, 30px) !important;
        line-height: 1.35;
        color: var(--navy);
        letter-spacing: -0.01em;
        position: relative;
        padding-left: 42px;
      }
      .trust-quote::before {
        content: "\201C";
        position: absolute;
        left: 0;
        top: -24px;
        font-family: var(--display);
        font-size: 90px;
        color: var(--green);
        line-height: 1;
      }
      .trust-attr {
        margin-top: 24px;
        margin-left: 42px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        color: var(--grey);
        text-transform: uppercase;
      }

      .trust-meta h3 {
        color: var(--navy);
        margin-bottom: 20px !important;
      }
      .trust-meta h3 em {
        color: var(--green);
      }
      .trust-meta p {
        font-size: 16px;
        line-height: 1.6;
        color: var(--ink-soft);
      }

      /* ================================================================
   FINAL CTA — Navy with green accents
================================================================ */
      .final-cta {
        background: var(--navy);
        color: var(--cream);
        padding: 110px 0;
        position: relative;
        overflow: hidden;
      }
      .final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at 20% 30%,
            rgba(74, 165, 23, 0.18),
            transparent 50%
          ),
          radial-gradient(
            circle at 80% 70%,
            rgba(0, 133, 205, 0.12),
            transparent 50%
          );
        pointer-events: none;
      }
      .final-cta-inner {
        position: relative;
        max-width: 820px;
        text-align: center;
        margin: 0 auto;
      }
      .final-cta h2 {
        color: #ffffff !important;
        margin-bottom: 24px !important;
      }
      .final-cta h2 em {
        color: var(--green) !important;
      }
      .final-cta p {
        font-size: 19px;
        line-height: 1.5;
        color: rgba(244, 248, 252, 0.85);
        margin-bottom: 40px !important;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
      }
      .final-ctas {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 28px !important;
      }

      .btn-green-pill {
        background: var(--green);
        color: white !important;
        padding: 18px 30px;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.25s;
        border: 2px solid var(--green-dark);
        box-shadow: 0 4px 16px rgba(74, 165, 23, 0.32);
      }
      .btn-green-pill:hover {
        background: var(--green-deep);
        transform: translateY(-1px);
        color: white !important;
      }

      .btn-outline-white {
        color: white;
        padding: 18px 8px;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 2px solid rgba(255, 255, 255, 0.55);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: opacity 0.2s;
      }
      .btn-outline-white:hover {
        opacity: 0.85;
      }
      .reassure {
        font-family: var(--display);
        font-size: 14px !important;
        color: rgba(244, 248, 252, 0.6);
      }

      /* ================================================================
   STICKY CTA BAR
================================================================ */
      .sticky-cta {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(150%);
        background: var(--navy);
        color: var(--cream);
        padding: 14px 16px 14px 24px;
        border-radius: 999px;
        box-shadow: 0 20px 40px -10px rgba(2, 25, 64, 0.45);
        display: flex;
        align-items: center;
        gap: 16px;
        z-index: 60;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        max-width: calc(100% - 32px);
      }
      .sticky-cta.show {
        transform: translateX(-50%) translateY(0);
      }
      .sticky-cta .msg {
        font-size: 14px;
        font-weight: 500;
      }
      .sticky-cta .btn-mini {
        background: var(--green);
        color: white;
        padding: 9px 18px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        transition: background 0.2s;
      }
      .sticky-cta .btn-mini:hover {
        background: var(--green-deep);
      }
      .sticky-cta .close-btn {
        background: none;
        border: none;
        color: var(--cream);
        cursor: pointer;
        opacity: 0.6;
        padding: 4px;
        transition: opacity 0.2s;
      }
      .sticky-cta .close-btn:hover {
        opacity: 1;
      }
      @media (max-width: 600px) {
        .sticky-cta .msg {
          display: none;
        }
        .sticky-cta {
          padding: 10px 16px;
        }
      }

      /* ================================================================
   MOBILE TYPOGRAPHY SCALE
================================================================ */
      @media (max-width: 640px) {
        /* Hero sub-copy */
        .hero-sub {
          font-size: 16px;
        }

        /* Section body copy */
        .section-head p {
          font-size: 15px;
        }

        /* h4 slightly smaller */
        h4 {
          font-size: 17px !important;
        }

        /* Final CTA copy */
        .final-cta p {
          font-size: 16px;
        }

        /* Pain / promise body */
        .pain-body,
        .promise p {
          font-size: 14px;
        }

        /* Moment timeline body */
        .moment-body {
          font-size: 14px;
        }

        /* Trust quote */
        .trust-quote {
          font-size: 18px !important;
        }

        /* Comparison table cells */
        .comp-cell {
          font-size: 13px;
        }

        /* Eyebrow labels */
        .eyebrow {
          font-size: 10px;
        }
      }

      @media (max-width: 400px) {
        .hero-sub {
          font-size: 15px;
        }
        h4 {
          font-size: 16px !important;
        }
        .section-head p {
          font-size: 14px;
        }
      }

      /* ================================================================
   SCROLL REVEAL
================================================================ */
      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.8s ease,
          transform 0.8s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-stagger > * {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }
      .reveal-stagger.visible > * {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-stagger.visible > *:nth-child(1) {
        transition-delay: 0.05s;
      }
      .reveal-stagger.visible > *:nth-child(2) {
        transition-delay: 0.12s;
      }
      .reveal-stagger.visible > *:nth-child(3) {
        transition-delay: 0.19s;
      }
      .reveal-stagger.visible > *:nth-child(4) {
        transition-delay: 0.26s;
      }
      .reveal-stagger.visible > *:nth-child(5) {
        transition-delay: 0.33s;
      }
      .reveal-stagger.visible > *:nth-child(6) {
        transition-delay: 0.4s;
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal,
        .reveal-stagger > * {
          opacity: 1;
          transform: none;
          transition: none;
        }
        .pulse {
          animation: none;
        }
        * {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* hero padding to clear fixed header */
      .hero {
        padding-top: 90px;
      }