/* =========================================================
   RESPONSIVE STYLES — CLEAN CONSOLIDATED VERSION
   Replace the full contents of assets/css/responsive.css
========================================================= */

@media (max-width: 1180px) {
  .primary-nav { gap: 16px; }

  .primary-nav > a,
  .nav-dropdown-toggle { font-size: 13px; }

  .nav-demo-btn {
    min-width: auto;
    padding-inline: 14px;
  }

  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 18px;
  }

  .timeline::before { display: none; }

  .hero-grid {
    grid-template-columns: minmax(500px, .98fr) minmax(430px, 1.02fr);
    gap: 48px;
  }

  .hero-title {
    font-size: clamp(56px, 5.2vw, 72px);
  }
}

@media (max-width: 991px) {
  .section { padding: 82px 0; }

  .site-header.transparent-header,
  .site-header.scrolled {
    background: rgba(255, 255, 255, .98);
  }

  .nav-wrap { min-height: 76px; }

  .brand img { width: 150px; }

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  .nav-actions { display: none; }

  .primary-nav {
    position: fixed;
    top: 76px;
    left: 20px;
    right: 20px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    display: none;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-md);
  }

  .primary-nav.open { display: block; }

  .primary-nav > a,
  .nav-dropdown-toggle {
    width: 100%;
    display: block;
    padding: 12px 10px;
    text-align: left;
  }

  .primary-nav > a::after,
  .nav-dropdown-toggle::before {
    display: none;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    padding: 0 0 5px 10px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-dropdown.open .nav-dropdown-menu { display: block; }

  .mega-menu {
    width: auto;
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .split-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .hero-copy {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .hero-lead {
    max-width: 600px;
    margin-inline: auto;
  }

  .hero-actions,
  .trust-strip {
    justify-content: center;
  }

  .hero .hero-visual {
    display: flex !important;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    justify-content: center;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .metrics-grid > div:nth-child(2) {
    border-right: 0;
  }

  .metrics-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  .problem-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-cta-actions { justify-content: center; }

  .footer-grid {
    grid-template-columns: 1.7fr 1fr 1fr;
  }

  .footer-grid > div:last-child {
    grid-column: 2 / 4;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 26px, var(--container));
  }


  .section { padding: 68px 0; }

  .brand img { width: 144px; }

  .nav-wrap { min-height: 72px; }

  .primary-nav { top: 72px; }

  .hero {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .hero .hero-visual {
    display: none !important;
  }

  .hero-title,
  .hero h1 {
    font-size: clamp(38px, 11vw, 50px);
    line-height: .98;
    letter-spacing: -.035em;
  }

  .hero-line { white-space: normal; }

  .hero-lead {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .hero-actions {
    width: 100%;
    gap: 12px;
  }

  .hero-actions .btn { width: 100%; }

  .trust-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 14px 12px;
    text-align: left;
    font-size: 13px;
  }

  .floating-card { display: none; }

  .metrics { padding: 18px 0; }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }

  .metrics-grid > div {
    padding: 18px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
  }

  .metrics-grid > div:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .metrics-grid > div:nth-child(3),
  .metrics-grid > div:nth-child(4) {
    border-bottom: 0;
  }

  .metrics-grid strong { font-size: 28px; }

  .metrics-grid > div:nth-child(3) strong,
  .metrics-grid > div:nth-child(4) strong {
    font-size: 24px;
  }

  .problem-grid,
  .module-grid,
  .industry-grid,
  .timeline,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .modules-page .module-card p { min-height: auto; }

  .orbit-card {
    width: 360px;
    max-width: 100%;
  }

  .orbit-item {
    min-width: 84px;
    padding: 9px 10px;
    font-size: 10px;
  }

  .industry-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .industry-cta .btn { width: 100%; }

  .saving-list > div {
    grid-template-columns: 1fr;
  }

  .saving-list strong { margin-top: 4px; }

  .pricing-panel { padding: 30px 22px; }

  .pricing-orb {
    width: 180px;
    height: 180px;
  }

  .pricing-orb span { font-size: 50px; }

  .timeline { gap: 24px; }

  .timeline-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 14px;
    text-align: left;
  }

  .timeline-item > span {
    width: 44px;
    height: 44px;
    margin: 0;
    grid-row: 1 / 3;
  }

  .timeline-item h3 { margin-top: 2px; }

  .timeline-item p { margin-bottom: 0; }

  .footer-grid > div:last-child { grid-column: auto; }

  .footer-bottom { flex-direction: column; }

  .dashboard-shell { transform: none; }
}

/* =========================================================
   INTERACTIVE ERP ECOSYSTEM — RESPONSIVE
========================================================= */
@media (max-width: 991px) {
  .erp-ecosystem {
    width: min(620px, 100%);
    margin-bottom: 18px;
  }
}

@media (max-width: 640px) {
  .erp-ecosystem {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 154px;
  }

  .erp-ecosystem::before,
  .ecosystem-connectors,
  .hub-pulse {
    display: none;
  }

  .ecosystem-hub {
    top: 0;
    width: 132px;
    height: 132px;
    border-radius: 36px;
    transform: translateX(-50%);
  }

  .ecosystem-hub:hover,
  .ecosystem-hub:focus-visible {
    transform: translateX(-50%) scale(1.03);
  }

  .hub-brand {
    font-size: 31px;
  }

  .ecosystem-node {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 88px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
    transform: none !important;
  }

  .node-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .node-icon svg {
    width: 21px;
    height: 21px;
  }

  .node-arrow {
    display: none;
  }

  .node-content strong {
    font-size: 12px;
  }

  .node-content small {
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .erp-ecosystem {
    grid-template-columns: 1fr;
  }

  .ecosystem-node {
    min-height: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-connector,
  .hub-pulse {
    animation: none;
  }
}

/* =========================================================
   PREMIUM FOOTER — RESPONSIVE FINAL
========================================================= */
@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(145px, 1fr));
  }

  .footer-contact-column {
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: start;
    gap: 12px 22px;
    padding-top: 8px;
  }

  .footer-contact-column h3,
  .footer-demo-link {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .site-footer {
    padding-top: 60px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .footer-brand-block {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .footer-contact-column {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .footer-contact-column h3,
  .footer-demo-link {
    grid-column: auto;
  }

  .footer-network {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 50px 0 24px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand-block,
  .footer-column,
  .footer-contact-column {
    grid-column: auto;
  }

  .footer-logo img {
    width: 176px;
  }

  .footer-description {
    font-size: 13px;
  }

  .footer-network {
    margin-top: 36px;
    padding: 18px 0;
  }

  .footer-network-links {
    flex-direction: column;
    gap: 10px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-legal {
    justify-content: flex-start;
    gap: 14px 18px;
  }
}






/* =========================================================
   FINAL CTA — RESPONSIVE
========================================================= */
@media (max-width: 991px) {
  .final-cta-section {
    padding-top: 52px;
  }

  .final-cta-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 42px;
    padding-bottom: 42px;
    text-align: center;
  }

  .final-cta-copy {
    margin-inline: auto;
  }

  .final-cta-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .final-cta-section {
    padding-top: 40px;
  }

  .final-cta-layout {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .final-cta-section h2 {
    font-size: 34px;
  }

  .final-cta-actions {
    width: 100%;
  }

  .final-cta-actions .btn {
    width: 100%;
  }
}

@media (max-width:1180px){.hero-command-centre{max-width:610px}.command-dashboard{padding:18px 14px 15px}.branch-row{grid-template-columns:78px minmax(0,1fr) 58px;gap:8px}.intelligence-card{right:-8px}}


/* Compact animated hero dashboard */
@media (max-width: 1180px) {
  .hero { padding-top: 18px; padding-bottom: 38px; }
  .hero-command-centre { max-width: 590px; }
}


@media (max-width:1180px){
  .hero-command-centre{margin-top:18px;padding-bottom:26px;}
  .hero-ai-card{right:-6px;width:205px;}
}
@media (max-width:991px){
  .hero-ai-card{display:none;}
}

/* =========================================================
   HOME PAGE — FINAL MOBILE/TABLET FIXES
   Added 2026-08-11
========================================================= */

/* ---------------------------------------------------------
   1) FOUR LIVE BUSINESS WORKSPACES
   Base styles.css fixes .erp-screen to 560/520px and uses
   overflow:hidden. On smaller screens the content becomes
   taller, so let the workspace grow naturally.
--------------------------------------------------------- */
@media (max-width: 991px) {

  .erp-demo-section .erp-screen {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .erp-demo-section .erp-page,
  .erp-demo-section .erp-page.active {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Only the active workspace should take up layout space */
  .erp-demo-section .erp-page:not(.active) {
    display: none !important;
  }

  .erp-demo-section .erp-page.active {
    display: block !important;
  }
}


/* ---------------------------------------------------------
   2) IMPLEMENTATION — VERTICAL PATH ON MOBILE
--------------------------------------------------------- */
@media (max-width: 640px) {

  .implementation-section .timeline {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-left: 0;
    overflow: visible;
  }

  /* Restore the neutral path line — responsive.css previously
     hides .timeline::before at <=1180px */
  .implementation-section .timeline::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 21px !important;
    right: auto !important;
    top: 22px !important;
    bottom: 22px !important;

    width: 2px !important;
    height: auto !important;

    background: #d9e5f3 !important;
    z-index: 0 !important;
  }

  /* Animated blue vertical progress */
  .implementation-section .timeline::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 21px !important;
    right: auto !important;
    top: 22px !important;

    width: 2px !important;
    height: 0 !important;

    background: linear-gradient(
      180deg,
      #246fdf,
      #4b91f5
    ) !important;

    z-index: 1 !important;

    transition:
      height 1.8s cubic-bezier(.22,1,.36,1) !important;
  }

  .implementation-section
  .timeline.timeline-active::after {
    height: calc(100% - 44px) !important;
  }

  .implementation-section .timeline-item {
    position: relative;
    z-index: 2;

    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;

    width: 100% !important;
    min-width: 0 !important;

    text-align: left !important;
  }

  .implementation-section .timeline-item > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
  }

  .implementation-section .timeline-item h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    margin: 1px 0 5px !important;
  }

  .implementation-section .timeline-item p {
    grid-column: 2 !important;
    grid-row: 2 !important;

    margin: 0 !important;
  }
}


/* ---------------------------------------------------------
   3) FINAL CTA BUTTONS — TRUE CENTRED TEXT
--------------------------------------------------------- */
@media (max-width: 640px) {

  .final-cta-actions {
    width: 100% !important;
  }

  .final-cta-actions .btn {
    position: relative !important;

    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  /* If the desktop button adds an arrow through ::after,
     keep it on the right without moving the label off-centre */
  .final-cta-actions .btn::after {
    position: absolute !important;
    right: 18px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   HOME — MOBILE HERO DASHBOARD + FINAL CTA ALIGNMENT
========================================================= */
@media (max-width: 640px) {

  /* Keep the Home hero dashboard visible on mobile.
     This overrides the earlier mobile rule that hides it. */
  .hero .hero-visual {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    justify-content: center !important;
  }

  .hero-command-centre {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-bottom: 18px !important;
  }

  /* Keep the small floating AI card hidden on mobile so the
     main dashboard has enough room. */
  .hero-ai-card {
    display: none !important;
  }

  /* Final CTA — keep the label mathematically centred even
     when the primary button contains an arrow/icon. */
  .final-cta-actions .btn-primary {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    gap: 0 !important;
  }

  .final-cta-actions .btn-primary svg,
  .final-cta-actions .btn-primary i {
    position: absolute !important;
    right: 20px !important;
    margin: 0 !important;
  }

  .final-cta-actions .btn-primary::after {
    position: absolute !important;
    right: 20px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   THE SOLUTION / PLATFORM SECTION
   MOBILE FINAL DESIGN
========================================================= */

@media (max-width: 640px) {

  /* Section */
  .platform-section {
    padding: 64px 0 70px !important;
    overflow: hidden;
  }

  /* Change desktop grid into ordered mobile layout */
  .platform-section .split-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 42px !important;
  }

  /* =====================================================
     1. CONTENT FIRST
  ====================================================== */

  .platform-section .platform-copy {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .platform-section .platform-copy .eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: .16em;
  }

  .platform-section .platform-copy h2 {
    margin: 0 0 20px !important;

    font-size: clamp(35px, 9.6vw, 43px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }

  /* Keep blue line clearly separated */
  .platform-section .platform-copy h2 span {
    display: block !important;
    margin-top: 4px;
  }

  .platform-section .platform-copy > p {
    margin: 0 0 30px !important;
    max-width: 100% !important;

    font-size: 14px !important;
    line-height: 1.7 !important;
  }


  /* =====================================================
     BENEFITS
  ====================================================== */

  .platform-section .feature-list {
    display: grid !important;
    gap: 20px !important;
    margin-top: 0 !important;
  }

  .platform-section .feature-list > div {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .platform-section .feature-list > div > span {
    width: 28px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    flex: none !important;
  }

  .platform-section .feature-list p {
    margin: 0 !important;
    min-width: 0 !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .platform-section .feature-list strong {
    display: inline-block;
    margin-bottom: 4px;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }


  /* =====================================================
     EXPLORE MODULES BUTTON
  ====================================================== */

.platform-section .platform-copy .hero-actions {
    display: flex !important;
    width: 100% !important;
    margin-top: 30px !important;
}

.platform-section .platform-copy .hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


  /* =====================================================
     2. ERP VISUAL SECOND
  ====================================================== */

  .platform-section .platform-visual {
    order: 2 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 2px auto 0 !important;
  }


  /* =====================================================
     MOBILE ERP ECOSYSTEM

     Instead of the desktop circular diagram, mobile uses:
     
               [ 24x7 ]
            ERP Platform
             One database

       [ POS ]       [ Inventory ]
       [ Purchase ]  [ CRM       ]
       [ Analytics ] [ Finance   ]

  ====================================================== */

  .platform-section .erp-ecosystem {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    padding: 160px 0 0 !important;

    margin: 0 !important;

    aspect-ratio: auto !important;

    position: relative !important;
  }


  /* Remove desktop orbit */
  .platform-section .erp-ecosystem::before,
  .platform-section .ecosystem-connectors,
  .platform-section .hub-pulse {
    display: none !important;
  }


  /* =====================================================
     CENTRE ERP HUB
  ====================================================== */

  .platform-section .ecosystem-hub {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 136px !important;
    height: 136px !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    border-radius: 32px !important;
  }

  .platform-section .ecosystem-hub:hover,
  .platform-section .ecosystem-hub:focus-visible {
    transform: translateX(-50%) scale(1.02) !important;
  }

  .platform-section .hub-brand {
    font-size: 30px !important;
  }

  .platform-section .hub-title {
    font-size: 13px !important;
  }

  .platform-section .hub-subtitle {
    font-size: 11px !important;
  }


  /* =====================================================
     MODULE CARDS
  ====================================================== */

  .platform-section .ecosystem-node {
    position: relative !important;

    inset: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 86px !important;

    margin: 0 !important;

    transform: none !important;

    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;

    gap: 10px !important;

    align-items: center !important;

    padding: 13px !important;

    border-radius: 16px !important;
  }


  .platform-section .node-icon {
    width: 40px !important;
    height: 40px !important;

    border-radius: 11px !important;
  }

  .platform-section .node-icon svg {
    width: 21px !important;
    height: 21px !important;
  }


  .platform-section .node-content {
    min-width: 0 !important;
  }

  .platform-section .node-content strong {
    display: block !important;

    font-size: 12px !important;
    line-height: 1.25 !important;

    margin-bottom: 3px !important;
  }

  .platform-section .node-content small {
    display: block !important;

    font-size: 9px !important;
    line-height: 1.35 !important;
  }


  /* Arrow unnecessary on mobile */
  .platform-section .node-arrow {
    display: none !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

  .platform-section .platform-copy h2 {
    font-size: 34px !important;
  }

  .platform-section .erp-ecosystem {
    gap: 10px !important;
  }

  .platform-section .ecosystem-node {
    min-height: 82px !important;
    padding: 11px !important;

    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  .platform-section .node-icon {
    width: 36px !important;
    height: 36px !important;
  }

}


@media (max-width: 640px) {

  .about-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .about-platform-card {
    min-height: 150px !important;
    padding: 20px 16px !important;
  }

  .about-platform-card h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .about-platform-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* =========================================================
   ABOUT PAGE — OUR STORY CARDS
   MOBILE ONLY
========================================================= */

@media (max-width: 640px) {

    .about-story-grid {
        gap: 14px !important;
    }

    .about-story-card {
        height: auto !important;
        min-height: 0 !important;

        padding: 24px 24px 26px !important;
    }

    .about-story-icon {
        margin-bottom: 18px !important;
    }

    .about-story-card > span {
        top: 22px !important;
        right: 22px !important;
    }

    .about-story-card h3 {
        margin: 0 0 8px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .about-story-card p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================================
   ABOUT PAGE — VISION
   MOBILE ONLY
========================================================= */

@media (max-width: 640px) {

    .about-purpose-grid {
        gap: 14px !important;
    }

    .about-purpose-card {
        height: auto !important;
        min-height: 0 !important;

        padding: 24px 24px 26px !important;
    }

    .about-purpose-icon {
        margin-bottom: 18px !important;
    }

    .about-purpose-card > span {
        top: 22px !important;
        right: 22px !important;
    }

    .about-purpose-card h3 {
        margin: 0 0 8px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .about-purpose-card p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================================
   ABOUT PAGE — WHAT WE BELIEVE CARDS
   MOBILE ONLY
========================================================= */

@media (max-width: 640px) {

    .about-belief-grid {
        gap: 14px !important;
    }

    .about-belief-grid > article {
        height: auto !important;
        min-height: 0 !important;

        padding: 24px 22px !important;
    }

    .about-belief-grid > article > i,
    .about-belief-grid > article svg {
        margin-bottom: 18px !important;
    }

    .about-belief-grid > article h3 {
        margin: 0 0 8px !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .about-belief-grid > article p {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================================
   INDUSTRY CTA — FULL WIDTH MOBILE ONLY
========================================================= */

@media (max-width: 640px) {

    .section-action {
        width: 100% !important;
    }

    .section-action .btn {
        width: 100% !important;
        max-width: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }
}

/* =========================================================
   MOBILE NAVIGATION — CLEAN COMPACT VERSION
========================================================= */

@media (max-width: 991px) {

  .primary-nav {
    position: fixed !important;

    top: 76px !important;
    left: 14px !important;
    right: 14px !important;

    display: none;

    max-height: calc(100vh - 96px) !important;
    overflow-y: auto;

    padding: 10px !important;

    border: 1px solid #dce6f2 !important;
    border-radius: 18px !important;

    background: rgba(255,255,255,.98) !important;

    box-shadow:
      0 20px 50px rgba(24, 52, 88, .16) !important;
  }

  .primary-nav.open {
    display: block !important;
  }


  /* -----------------------------------------
     MAIN MENU ITEMS
  ----------------------------------------- */

  .primary-nav > a,
  .nav-dropdown-trigger {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 48px !important;

    padding: 11px 14px !important;

    margin: 0 !important;

    border-radius: 11px !important;

    color: #173354 !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-align: left !important;

    text-decoration: none !important;
  }


  .primary-nav > a:hover,
  .nav-dropdown-trigger:hover {
    background: #f3f7fc !important;
  }


  /* Active page */
  .primary-nav > a.active {
    background: #edf4ff !important;
    color: #2878e8 !important;
  }


  /* Remove desktop underline */
  .primary-nav > a::after,
  .nav-dropdown-trigger::before {
    display: none !important;
  }


  /* -----------------------------------------
     DROPDOWN WRAPPER
  ----------------------------------------- */

  .nav-dropdown {
    width: 100% !important;
  }


  /* chevron */
  .nav-dropdown-trigger svg {
    width: 16px !important;
    height: 16px !important;

    margin-left: auto !important;

    transition: transform .2s ease;
  }


  .nav-dropdown.open .nav-dropdown-trigger svg {
    transform: rotate(180deg);
  }


  /* -----------------------------------------
     DROPDOWN MENU
  ----------------------------------------- */

  .nav-dropdown-menu {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;

    display: none;

    margin: 3px 0 6px !important;
    padding: 5px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #f7f9fc !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }


  .nav-dropdown.open .nav-dropdown-menu {
    display: block !important;
  }


  .nav-dropdown-menu > a {
    display: block !important;

    padding: 10px 11px !important;

    border-radius: 9px !important;

    text-decoration: none !important;
  }


  .nav-dropdown-menu > a:hover {
    background: #ffffff !important;
  }


  .nav-dropdown-menu strong {
    display: block;

    margin-bottom: 2px;

    color: #173354;

    font-size: 13px !important;
    font-weight: 700 !important;
  }


  .nav-dropdown-menu span {
    display: block;

    color: #7e8da4;

    font-size: 11px !important;
    line-height: 1.4 !important;
  }


  /* -----------------------------------------
     CUSTOM SOLUTION SEPARATOR
  ----------------------------------------- */

  .nav-dropdown-custom {
    margin-top: 5px !important;
    padding-top: 10px !important;

    border-top: 1px solid #dce6f0 !important;
  }


  /* -----------------------------------------
     MENU BUTTON
  ----------------------------------------- */

  .menu-toggle {
    width: 48px !important;
    height: 48px !important;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0 !important;

    border: 1px solid #dce6f2 !important;
    border-radius: 14px !important;

    background: #fff !important;

    box-shadow: 0 6px 18px rgba(30, 70, 120, .06);
  }


  .menu-toggle span:not(.sr-only) {
    width: 21px !important;
    height: 2px !important;

    margin: 0 !important;

    background: #163456 !important;

    border-radius: 10px;
  }

}

/* =========================================================
   ERP PLATFORM PAGE — COMPACT MOBILE VIEW
   ========================================================= */

@media (max-width: 640px) {

  /* ---------------------------------------------------------
     GLOBAL PAGE WIDTH
  --------------------------------------------------------- */

  .erp-platform-page .erp-platform-container {
    width: calc(100% - 28px) !important;
  }


  /* ---------------------------------------------------------
     REDUCE VERTICAL SPACE BETWEEN ALL MAIN SECTIONS
  --------------------------------------------------------- */

  .erp-platform-hero,
  .erp-architecture-section,
  .erp-transaction-section,
  .erp-enterprise-section,
  .erp-integration-section,
  .erp-transaction-flow,
  .erp-intelligence-section,
  .erp-adapt-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .erp-custom-cta {
    padding-top: 60px !important;
    padding-bottom: 65px !important;
  }


  /* =========================================================
     HERO
  ========================================================= */

  .erp-platform-hero-layout {
    gap: 38px !important;
  }

  .erp-platform-hero-content h1 {
    font-size: clamp(38px, 11vw, 46px) !important;
    line-height: 1.02 !important;
  }

  .erp-platform-hero-lead {
    margin-top: 20px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .erp-platform-hero-actions {
    margin-top: 26px !important;
    gap: 10px !important;
  }

  .erp-platform-hero-points {
    margin-top: 26px !important;
    gap: 12px 18px !important;
  }


  /* HERO DASHBOARD */

  .erp-hero-dashboard {
    padding: 14px !important;
  }

  .erp-hero-kpis {
    gap: 8px !important;
  }

  .erp-hero-kpis article {
    padding: 14px !important;
    min-height: 0 !important;
  }

  .erp-hero-kpis strong {
    margin-top: 5px !important;
  }

  .erp-hero-operations {
    margin-top: 10px !important;
    padding: 16px !important;
    border-radius: 15px !important;
  }

  .erp-operation-row {
    padding: 10px 0 !important;
  }

  .erp-hero-bottom {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .erp-hero-bottom article {
    min-height: 0 !important;
    padding: 12px 14px !important;
  }


  /* =========================================================
     SECTION HEADINGS
  ========================================================= */

  .erp-architecture-heading,
  .erp-transaction-heading,
  .erp-enterprise-heading,
  .erp-integration-heading,
  .erp-adapt-heading {
    margin-bottom: 34px !important;
  }

  .erp-architecture-heading h2,
  .erp-transaction-heading h2,
  .erp-enterprise-heading h2,
  .erp-integration-heading h2,
  .erp-adapt-heading h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }


  /* =========================================================
     CONNECTED ERP ARCHITECTURE
  ========================================================= */

  .erp-layered-architecture {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .erp-layer-row {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .erp-layer-label {
    margin-bottom: 16px !important;
  }

  .erp-layer-modules {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .erp-layer-modules > * {
    min-height: 78px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .erp-layer-modules svg {
    width: 20px !important;
    height: 20px !important;
  }

  .erp-layer-modules span {
    font-size: 10px !important;
  }


  /* Connector between architecture layers */

  .erp-layer-connector {
    min-height: 54px !important;
    padding: 8px 0 !important;
  }

  .erp-layer-connector span {
    font-size: 8px !important;
  }


  /* ERP core */

  .erp-layer-core {
    margin-top: 12px !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .erp-layer-core-main {
    gap: 12px !important;
  }

  .erp-layer-core-features {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  .erp-layer-core-features span {
    min-height: 44px !important;
    padding: 8px !important;
  }


  /* =========================================================
     TRANSACTION / ENTERPRISE / INTEGRATION BOARDS
  ========================================================= */

  .erp-transaction-workspace,
  .erp-enterprise-workspace,
  .erp-integration-board,
  .erp-transaction-board,
  .erp-intelligence-board,
  .erp-foundation-board {
    border-radius: 16px !important;
  }


  /* =========================================================
     INTELLIGENCE
  ========================================================= */

  .erp-intelligence-layout {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .erp-intelligence-points {
    gap: 14px !important;
  }

  .erp-intelligence-kpis {
    gap: 8px !important;
  }


  /* =========================================================
     ADAPT / CAPABILITY CARDS
  ========================================================= */

  .erp-adapt-layout {
    gap: 32px !important;
  }

  .erp-adapt-capabilities {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .erp-adapt-capabilities article {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .erp-adapt-icon {
    margin-bottom: 12px !important;
  }


  /* =========================================================
     CUSTOM CTA
  ========================================================= */

  .erp-custom-cta-panel {
    border-radius: 18px !important;
  }

}

/* =========================================================
   ERP PLATFORM — COMPACT DARK PANELS ON MOBILE
   ========================================================= */

@media (max-width: 640px) {

  /* =======================================================
     1. TRANSACTION FOOTER
     One Connected Data Layer / Real-Time Updates / etc.
  ======================================================= */

  .erp-transaction-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 0 !important;

    padding: 14px 16px !important;

    border-radius: 16px !important;
  }

  .erp-transaction-footer > div {
    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 10px 8px !important;
  }

  .erp-transaction-footer svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  .erp-transaction-footer span {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }


  /* =======================================================
     2. CONNECTED ERP CORE
  ======================================================= */

  .erp-layer-core {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .erp-layer-core-main {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 14px !important;

    padding-bottom: 18px !important;
  }

  .erp-layer-core-icon {
    width: 52px !important;
    height: 52px !important;
  }

  .erp-layer-core-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  .erp-layer-core-main small {
    font-size: 8px !important;
  }

  .erp-layer-core-main strong {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .erp-layer-core-main span {
    margin-top: 4px !important;
    font-size: 9px !important;
  }


  /* 2 columns instead of 1 */
  .erp-layer-core-features {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    padding-top: 8px !important;
  }

  .erp-layer-core-features span {
    min-height: 48px !important;

    justify-content: flex-start !important;

    padding: 8px 10px !important;

    font-size: 9px !important;
  }

  .erp-layer-core-features svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* =========================================================
   ERP PLATFORM — FINAL MOBILE COMPACTION
   Remaining cards / workflows / dashboards
========================================================= */

@media (max-width: 640px) {

  /* =======================================================
     BUILT TO ADAPT — CAPABILITY CARDS
  ======================================================= */

  .erp-adapt-capabilities {
    gap: 10px !important;
  }

  .erp-adapt-capabilities article {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }

  .erp-adapt-capabilities article > span {
    top: 15px !important;
    right: 16px !important;
  }

  .erp-adapt-icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 12px !important;
  }

  .erp-adapt-capabilities h3 {
    font-size: 14px !important;
  }

  .erp-adapt-capabilities p {
    margin: 7px 0 11px !important;
    line-height: 1.55 !important;
  }

  .erp-adapt-capabilities ul {
    gap: 4px !important;
  }


  /* =======================================================
     SCALABILITY STRIP
     1 → Multiple → Flexible → Scalable
  ======================================================= */

  .erp-adapt-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;

    gap: 0 !important;

    padding: 12px !important;
  }

  .erp-adapt-strip > div {
    min-height: 65px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }

  .erp-adapt-strip > svg {
    display: none !important;
  }

  .erp-adapt-strip strong {
    font-size: 18px !important;
  }

  .erp-adapt-strip span {
    font-size: 8px !important;
  }


  /* =======================================================
     INTELLIGENCE — OPERATIONAL SIGNALS
  ======================================================= */

  .erp-intelligence-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .erp-intelligence-kpis > div,
  .erp-intelligence-kpis article {
    min-height: 0 !important;
    padding: 14px 12px !important;
  }

  .erp-intelligence-kpis strong {
    font-size: 19px !important;
  }

  .erp-intelligence-kpis small {
    font-size: 7px !important;
  }


  /* =======================================================
     CONNECTED TRANSACTION ENGINE
     Transaction → Inventory → Finance → etc.
  ======================================================= */

  .erp-transaction-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;

    gap: 10px !important;

    margin-bottom: 18px !important;
  }

  .erp-transaction-step {
    min-height: 115px !important;

    padding: 16px 12px !important;

    border-radius: 14px !important;
  }

  .erp-transaction-icon {
    width: 38px !important;
    height: 38px !important;

    margin-bottom: 8px !important;
  }

  .erp-transaction-step strong {
    font-size: 10px !important;
  }

  .erp-transaction-step small {
    margin-top: 3px !important;
  }

  /* Desktop arrows are unnecessary once cards use 2 columns */
  .erp-transaction-arrow {
    display: none !important;
  }


  /* =======================================================
     INTEGRATION PRINCIPLES
     Connected Data / Automated Workflows / etc.
  ======================================================= */

  .erp-integration-principles {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  .erp-integration-principles > div {
    min-height: 105px !important;

    padding: 14px !important;

    border-radius: 12px !important;
  }

  .erp-integration-principles svg {
    width: 17px !important;
    height: 17px !important;

    margin-bottom: 8px !important;
  }

  .erp-integration-principles strong {
    font-size: 10px !important;
  }

  .erp-integration-principles span {
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }


  /* =======================================================
     ENTERPRISE — HEAD OFFICE
  ======================================================= */

  .erp-enterprise-hq-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .erp-enterprise-hq-grid article {
    min-height: 110px !important;

    padding: 14px !important;
  }


  /* Head Office summary:
     Locations / Users / Active SKUs
  */

  .erp-enterprise-hq-summary {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;

    gap: 7px !important;
  }

  .erp-enterprise-hq-summary > div {
    min-width: 0 !important;

    padding: 10px !important;
  }

  .erp-enterprise-hq-summary strong {
    font-size: 13px !important;
  }


  /* =======================================================
     ENTERPRISE LOCATION CARDS
  ======================================================= */

  .erp-enterprise-locations {
    gap: 8px !important;
  }

  .erp-location-card {
    grid-template-columns:
      38px minmax(0,1fr) auto !important;

    gap: 10px !important;

    min-height: 0 !important;

    padding: 11px 12px !important;

    border-radius: 12px !important;
  }

  .erp-location-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .erp-location-card > b {
    grid-column: auto !important;

    justify-self: end !important;
  }


  /* =======================================================
     ENTERPRISE CAPABILITIES DARK STRIP
  ======================================================= */

  .erp-enterprise-capabilities {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 0 !important;
  }

  .erp-enterprise-capabilities div {
    min-height: 52px !important;

    padding: 9px !important;

    justify-content: flex-start !important;
  }

}


/* =========================================================
   INTELLIGENCE PAGE — FINAL MOBILE DESIGN
   ========================================================= */

@media (max-width: 640px) {

  /* =======================================================
     GENERAL
  ======================================================= */

  .intelligence-page {
    overflow-x: hidden;
  }

  .intelligence-container {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }

  .intelligence-hero,
  .intelligence-dashboard-section,
  .intelligence-decision-section,
  .intelligence-report-section,
  .intelligence-forecast-section,
  .intelligence-final {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }


  /* =======================================================
     SHARED HEADINGS
  ======================================================= */

  .intelligence-eyebrow {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  .intelligence-section-heading {
    margin-bottom: 32px !important;
  }

  .intelligence-section-heading h2,
  .intelligence-decision-content h2,
  .intelligence-forecast-content h2 {
    font-size: 34px !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em !important;
  }

  .intelligence-section-heading p,
  .intelligence-decision-content > p,
  .intelligence-forecast-content > p {
    margin-top: 16px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }


  /* =======================================================
     HERO
  ======================================================= */

  .intelligence-hero-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  .intelligence-hero-content {
    width: 100% !important;
  }

  .intelligence-hero-content h1 {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }

  .intelligence-hero-content > p {
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }


  /* HERO BUTTONS */

  .intelligence-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 9px !important;

    width: 100% !important;

    margin-top: 24px !important;
  }

  .intelligence-hero-actions .btn {
    width: 100% !important;
    min-height: 50px !important;

    justify-content: center !important;
  }


  /* HERO TAGS */

  .intelligence-hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 6px !important;

    margin-top: 22px !important;
  }

  .intelligence-hero-tags span {
    padding: 6px 8px !important;
    font-size: 7px !important;
  }


  /* =======================================================
     HERO MINI DASHBOARD
  ======================================================= */

  .intelligence-mini-dashboard {
    padding: 16px !important;

    border-radius: 17px !important;
  }

  .intelligence-mini-top {
    padding-bottom: 13px !important;
  }


  /* KEEP ALL THREE KPIs IN ONE ROW */

  .intelligence-mini-kpis {
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 7px !important;

    margin-top: 13px !important;
  }

  .intelligence-mini-kpis > div {
    min-width: 0 !important;

    padding: 11px 8px !important;

    border-radius: 9px !important;
  }

  .intelligence-mini-kpis small {
    margin-bottom: 4px !important;
    font-size: 6px !important;
  }

  .intelligence-mini-kpis strong {
    font-size: 14px !important;
  }

  .intelligence-mini-kpis span {
    margin-top: 3px !important;
    font-size: 6px !important;
  }


  /* HERO CHART */

  .intelligence-mini-chart {
    margin-top: 10px !important;

    padding: 12px !important;
  }

  .intelligence-mini-chart svg {
    height: 110px !important;
  }


  /* =======================================================
     EXECUTIVE DASHBOARD
  ======================================================= */

  .executive-dashboard {
    padding: 14px !important;

    border-radius: 17px !important;
  }

  .executive-dashboard-header {
    align-items: flex-start !important;
    flex-direction: column !important;

    gap: 12px !important;

    padding-bottom: 14px !important;
  }


  /* FILTER BUTTONS */

  .executive-dashboard-filters {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0,1fr)) !important;

    gap: 5px !important;
  }

  .executive-dashboard-filters span {
    min-width: 0 !important;

    padding: 6px 3px !important;

    text-align: center !important;

    font-size: 6px !important;
  }


  /* =======================================================
     EXECUTIVE KPI CARDS
     2 x 2 instead of 4 vertical cards
  ======================================================= */

  .executive-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .executive-kpi-card {
    min-height: 0 !important;

    padding: 13px !important;
  }

  .executive-kpi-card strong {
    font-size: 16px !important;
  }

  .executive-kpi-card p {
    margin-top: 6px !important;

    font-size: 7px !important;

    line-height: 1.4 !important;
  }


  /* =======================================================
     DASHBOARD PANELS
  ======================================================= */

  .executive-dashboard-grid {
    grid-template-columns: 1fr !important;

    gap: 9px !important;

    margin-top: 9px !important;
  }

  .dashboard-panel {
    min-height: 0 !important;

    padding: 14px !important;

    border-radius: 13px !important;
  }

  .dashboard-panel-heading {
    margin-bottom: 12px !important;
  }


  /* SALES CHART */

  .dashboard-chart-area {
    grid-template-columns: 1fr !important;
  }

  .dashboard-chart-y {
    display: none !important;
  }

  .dashboard-chart-main svg {
    height: 150px !important;
  }


  /* LOCATION BARS */

  .dashboard-location-bars > div {
    grid-template-columns:
      65px minmax(0,1fr) auto !important;

    gap: 8px !important;
  }

  .dashboard-location-bars strong {
    grid-column: auto !important;
    text-align: right !important;
  }


  /* =======================================================
     CATEGORY DONUT
  ======================================================= */

  .dashboard-donut-wrap {
    flex-direction: row !important;
    align-items: center !important;

    gap: 16px !important;
  }

  .dashboard-donut {
    flex: 0 0 120px !important;

    width: 120px !important;
    height: 120px !important;
  }

  .dashboard-donut-legend {
    flex: 1 !important;
    min-width: 0 !important;
  }


  /* =======================================================
     ALERTS
  ======================================================= */

  .dashboard-alert-list {
    gap: 7px !important;
  }

  .dashboard-alert-list article {
    min-height: 0 !important;

    padding: 10px !important;
  }


  /* =======================================================
     DECISION INTELLIGENCE
  ======================================================= */

  .intelligence-decision-layout {
    grid-template-columns: 1fr !important;

    gap: 32px !important;
  }


  /* FEATURE LIST — 2 COLUMNS */

  .intelligence-feature-list {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px 12px !important;
  }

  .intelligence-feature-list li {
    font-size: 10px !important;
  }


  /* DECISION BOARD */

  .decision-intelligence-board {
    padding: 14px !important;

    border-radius: 16px !important;
  }

  .decision-intelligence-heading {
    gap: 10px !important;

    padding-bottom: 13px !important;
  }


  /* 4 INSIGHTS = 2 x 2 */

  .decision-insight-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .decision-insight {
    min-height: 0 !important;

    padding: 13px !important;

    border-radius: 11px !important;
  }

  .decision-insight-icon {
    width: 34px !important;
    height: 34px !important;

    margin-bottom: 10px !important;
  }

  .decision-insight > strong {
    font-size: 10px !important;
  }

  .decision-insight p {
    margin: 6px 0 8px !important;

    font-size: 8px !important;

    line-height: 1.45 !important;
  }

  .decision-insight b {
    font-size: 7px !important;
  }


  /* =======================================================
     SALES REPORT
  ======================================================= */

  .sales-report-window {
    border-radius: 16px !important;
  }

  .sales-report-header {
    align-items: flex-start !important;
    flex-direction: column !important;

    gap: 12px !important;

    padding: 15px !important;
  }

  .sales-report-actions {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;

    gap: 6px !important;
  }


  /* REPORT SUMMARY — 2 x 2 */

  .sales-report-summary {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 0 !important;
  }

  .sales-report-summary > div {
    min-height: 64px !important;

    padding: 11px !important;
  }


  /* REPORT TABLE */

  .sales-report-row {
    grid-template-columns:
      minmax(0,1.4fr)
      .55fr
      .9fr !important;

    gap: 6px !important;
  }

  /* Show Department / Qty / Sales */

  .sales-report-row > *:nth-child(4),
  .sales-report-row > *:nth-child(5),
  .sales-report-row > *:nth-child(6) {
    display: none !important;
  }


  /* =======================================================
     FORECASTING
  ======================================================= */

  .intelligence-forecast-layout {
    grid-template-columns: 1fr !important;

    gap: 30px !important;
  }

  .forecast-board {
    padding: 14px !important;

    border-radius: 16px !important;
  }

  .forecast-board-heading {
    align-items: flex-start !important;
    flex-direction: column !important;

    gap: 8px !important;
  }

  .forecast-chart {
    height: 190px !important;
  }


  /* FORECAST SUMMARY — 3 ACROSS */

  .forecast-summary {
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 6px !important;
  }

  .forecast-summary > div {
    min-width: 0 !important;

    padding: 9px 7px !important;
  }

  .forecast-summary strong {
    font-size: 8px !important;
  }


  /* =======================================================
     FINAL CTA
  ======================================================= */

  .intelligence-final-card {
    padding: 34px 18px !important;

    border-radius: 18px !important;
  }

  .intelligence-final-card h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  .intelligence-final-card p {
    margin-top: 14px !important;

    font-size: 12px !important;
  }

  .intelligence-final-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 9px !important;

    width: 100% !important;

    margin-top: 22px !important;
  }

  .intelligence-final-actions .btn {
    width: 100% !important;

    justify-content: center !important;
  }

}

/* =========================================================
   RESTAURANT & HOSPITALITY PAGE — FINAL MOBILE DESIGN
   ========================================================= */

@media (max-width: 640px) {

  /* =======================================================
     GENERAL
  ======================================================= */

  .restaurant-page {
    overflow-x: hidden;
  }

  .restaurant-container {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }

  .restaurant-hero,
  .restaurant-workflow,
  .restaurant-ingredient,
  .restaurant-kitchen,
  .restaurant-ordering,
  .restaurant-capabilities,
  .restaurant-multisite,
  .restaurant-final {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }


  /* =======================================================
     SHARED HEADINGS
  ======================================================= */

  .restaurant-eyebrow {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  .restaurant-section-heading,
  .restaurant-ingredient-heading {
    margin-bottom: 32px !important;
  }

  .restaurant-section-heading h2,
  .restaurant-ingredient-heading h2,
  .restaurant-kitchen-content h2,
  .restaurant-multisite-content h2 {
    font-size: 34px !important;
    line-height: 1.07 !important;
    letter-spacing: -.04em !important;
  }

  .restaurant-section-heading p,
  .restaurant-ingredient-heading p,
  .restaurant-kitchen-content > p,
  .restaurant-multisite-content > p {
    margin-top: 16px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }


  /* =======================================================
     HERO
  ======================================================= */

  .restaurant-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .restaurant-hero-content h1 {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }

  .restaurant-hero-content > p {
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .restaurant-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .restaurant-hero-actions .btn {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }


  /* MODULE TAGS */

  .restaurant-hero-strip {
    gap: 6px !important;
    margin-top: 22px !important;
  }

  .restaurant-hero-strip span {
    padding: 6px 8px !important;
    font-size: 8px !important;
  }


  /* =======================================================
     HERO RESTAURANT DASHBOARD
  ======================================================= */

  .restaurant-dashboard-card {
    padding: 15px !important;
    border-radius: 17px !important;
  }

  .restaurant-dashboard-top {
    padding-bottom: 13px !important;
  }

  /* Sales / Orders / Prep — KEEP 3 ACROSS */

  .restaurant-dashboard-stats {
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 7px !important;
  }

  .restaurant-dashboard-stats > div {
    min-width: 0 !important;
    padding: 11px 8px !important;
  }

  .restaurant-dashboard-stats small {
    font-size: 6px !important;
  }

  .restaurant-dashboard-stats strong {
    font-size: 14px !important;
  }


  /* POS → KDS → KITCHEN → READY */

  .restaurant-dashboard-flow {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 5px !important;

    padding: 12px 7px !important;
  }

  .restaurant-dashboard-flow > div {
    min-width: 0 !important;
  }

  .restaurant-dashboard-flow > div span {
    font-size: 7px !important;
  }

  .restaurant-dashboard-flow > svg {
    width: 11px !important;
    height: 11px !important;
  }


  /* BOTTOM STATUS */

  .restaurant-dashboard-bottom {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 5px !important;
  }

  .restaurant-dashboard-bottom span {
    font-size: 6px !important;
    text-align: center !important;
  }


  /* =======================================================
     CONNECTED RESTAURANT WORKFLOW
  ======================================================= */

  .restaurant-workflow-shell {
    padding: 14px !important;
    border-radius: 17px !important;
  }


  /* CUSTOMER ORDER CHANNELS — 2 x 2 */

  .restaurant-order-entry-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .restaurant-order-entry-grid article {
    min-height: 92px !important;
    padding: 12px 8px !important;
  }

  .restaurant-order-entry-grid article svg {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 7px !important;
  }

  .restaurant-order-entry-grid article strong {
    font-size: 10px !important;
  }

  .restaurant-order-entry-grid article span {
    margin-top: 3px !important;
    font-size: 7px !important;
  }


  /* FLOW ARROWS */

  .restaurant-flow-arrow {
    height: 32px !important;
  }


  /* KDS / RECIPE / INVENTORY STAGES */

  .restaurant-flow-stage {
    grid-template-columns: 38px minmax(0,1fr) !important;
    gap: 11px !important;

    padding: 14px !important;
    border-radius: 13px !important;
  }

  .restaurant-flow-stage-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .restaurant-flow-stage h3 {
    font-size: 13px !important;
  }

  .restaurant-flow-stage p {
    margin-top: 4px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  .restaurant-flow-stage-status {
    grid-column: 2 !important;
    justify-self: start !important;
  }


  /* PURCHASING + BI BRANCHES — KEEP 2 ACROSS */

  .restaurant-flow-branches {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .restaurant-flow-branch {
    min-width: 0 !important;
    padding: 14px 11px !important;
  }

  .restaurant-flow-branch h3 {
    font-size: 11px !important;
  }

  .restaurant-flow-branch p {
    font-size: 8px !important;
    line-height: 1.45 !important;
  }


  /* CLOUD / MULTI LOCATION / CONTROL / SUPPORT */

  .restaurant-flow-foundation {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;
  }

  .restaurant-flow-foundation > div {
    min-height: 48px !important;
    padding: 8px !important;
  }


  /* =======================================================
     RECIPE / INGREDIENT COSTING
  ======================================================= */

  .restaurant-ingredient-showcase {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .restaurant-food-image-wrap {
    min-height: 300px !important;
  }

  .ingredient-callout {
    transform: scale(.82);
    transform-origin: center;
  }


  /* COSTING PANEL */

  .restaurant-recipe-cost-panel {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .restaurant-recipe-header {
    flex-direction: row !important;
    align-items: center !important;
  }

  .restaurant-selling-price {
    text-align: right !important;
  }

  .restaurant-recipe-row {
    padding: 9px 0 !important;
  }


  /* Recipe Cost / Food Cost / Contribution
     KEEP ALL THREE ACROSS */

  .restaurant-recipe-summary {
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 6px !important;
  }

  .restaurant-recipe-summary > div {
    min-width: 0 !important;
    padding: 10px 6px !important;
  }

  .restaurant-recipe-summary small {
    font-size: 6px !important;
  }

  .restaurant-recipe-summary strong {
    font-size: 12px !important;
  }


  /* =======================================================
     INGREDIENT CONNECTED FLOW
  ======================================================= */

  .restaurant-ingredient-flow {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 7px !important;

    padding: 12px !important;
  }

  .restaurant-ingredient-flow > div {
    min-width: 0 !important;
    min-height: 68px !important;

    justify-content: center !important;

    padding: 8px 4px !important;
  }

  .restaurant-ingredient-flow > svg {
    display: none !important;
  }

  .restaurant-ingredient-flow > div span {
    font-size: 7px !important;
    line-height: 1.3 !important;
  }


  /* BENEFITS — 2 x 2 */

  .restaurant-ingredient-benefits {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .restaurant-ingredient-benefits article {
    min-height: 0 !important;
    padding: 12px !important;
  }


  /* =======================================================
     KITCHEN DISPLAY SYSTEM
  ======================================================= */

  .restaurant-kitchen-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .restaurant-kds-board {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .restaurant-kds-header {
    padding-bottom: 12px !important;
  }


  /* 3 LIVE ORDERS ACROSS */

  .restaurant-kds-grid {
    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap: 6px !important;
  }

  .restaurant-kds-order {
    min-height: 130px !important;
    padding: 10px 8px !important;
  }

  .restaurant-kds-order > div {
    flex-direction: column !important;
    gap: 2px !important;
  }

  .restaurant-kds-order p {
    font-size: 7px !important;
    line-height: 1.5 !important;
  }

  .restaurant-kds-order b {
    font-size: 6px !important;
  }


  /* KDS PROCESS */

  .restaurant-kds-flow {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 3px !important;
  }

  .restaurant-kds-flow span {
    font-size: 6px !important;
    padding: 5px 4px !important;
  }

  .restaurant-kds-flow svg {
    width: 10px !important;
    height: 10px !important;
  }


  /* =======================================================
     ORDERING CHANNELS
  ======================================================= */

  .restaurant-ordering-map {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .restaurant-order-channel {
    min-height: 105px !important;
    padding: 12px !important;
  }

  .restaurant-order-platform {
    grid-column: 1 / -1 !important;
    padding: 16px !important;
  }


  /* =======================================================
     CAPABILITIES
  ======================================================= */

  .restaurant-capability-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;
  }

  .restaurant-capability-grid article {
    min-height: 145px !important;
    padding: 15px !important;
  }

  .restaurant-capability-grid article > svg {
    margin-bottom: 12px !important;
  }

  .restaurant-capability-grid h3 {
    font-size: 12px !important;
  }

  .restaurant-capability-grid p {
    margin-top: 6px !important;
    font-size: 8px !important;
    line-height: 1.5 !important;
  }


  /* =======================================================
     MULTI LOCATION
  ======================================================= */

  .restaurant-multisite-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .restaurant-location-sites {
    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    gap: 8px !important;

    margin-top: 18px !important;
  }

  .restaurant-location-sites article {
    padding: 12px 8px !important;
  }

  .restaurant-location-sites strong {
    margin: 4px 0 8px !important;
    font-size: 10px !important;
  }


  /* =======================================================
     FINAL CTA
  ======================================================= */

  .restaurant-final-content {
    padding: 34px 18px !important;
    border-radius: 18px !important;
  }

  .restaurant-final-content h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  .restaurant-final-content > p {
    margin-top: 14px !important;
    font-size: 12px !important;
  }

  .restaurant-final-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 9px !important;

    width: 100% !important;

    margin-top: 22px !important;
  }

  .restaurant-final-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

}

/* =========================================================
   SITE-WIDE MOBILE POLISH — ALL REMAINING PAGES
   Added after reviewing About, Contact, Solutions/Industries,
   Inventory, Modules, POS/Sales, Pricing and Resources pages.
========================================================= */

@media (max-width: 640px) {

  /* ---------- shared mobile rhythm ---------- */
  .about-container,
  .contact-container,
  .solutions-container,
  .inventory-supply-container,
  .modules-container,
  .sales-customer-container,
  .pricing-container,
  .pricing-addons-container,
  .pricing-custom-container,
  .pricing-faq-container,
  .pricing-final-cta-container,
  .resources-container {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }

  .about-page,
  .contact-page,
  .solutions-page,
  .inventory-supply-page,
  .modules-page,
  .sales-customer-page {
    overflow-x: hidden !important;
  }

  /* =====================================================
     ABOUT
  ====================================================== */
  .about-hero { padding: 60px 0 !important; }
  .about-story-section,
  .about-purpose-section,
  .about-delivery-section,
  .about-belief-section,
  .about-industries-section,
  .about-cta-section { padding: 60px 0 !important; }

  .about-hero-grid { gap: 30px !important; }
  .about-hero-content h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .about-hero-lead { font-size: 14px !important; line-height: 1.65 !important; }
  .about-hero-actions { gap: 9px !important; margin-top: 24px !important; }
  .about-hero-actions .btn { min-height: 50px !important; }
  .about-hero-trust { gap: 8px 12px !important; margin-top: 22px !important; }

  .about-section-heading { margin-bottom: 30px !important; }
  .about-section-heading h2 { font-size: 34px !important; line-height: 1.08 !important; }

  .about-story-grid,
  .about-purpose-grid,
  .about-delivery-grid,
  .about-belief-grid { gap: 10px !important; }

  .about-story-card,
  .about-purpose-card,
  .about-delivery-card,
  .about-belief-grid > article {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 14px !important;
  }

  .about-delivery-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .about-delivery-card { padding: 16px !important; }
  .about-delivery-card h3 { font-size: 13px !important; }
  .about-delivery-card p { font-size: 10px !important; line-height: 1.5 !important; }

  .about-industries-layout { gap: 24px !important; }
  .about-industry-tags { gap: 7px !important; }
  .about-industry-tags span { padding: 8px 10px !important; font-size: 9px !important; }
  .about-cta { padding: 30px 18px !important; border-radius: 18px !important; }
  .about-cta h2 { font-size: 32px !important; }

  /* =====================================================
     CONTACT
  ====================================================== */
  .contact-section { padding: 58px 0 62px !important; }
  .contact-heading { margin-bottom: 32px !important; }
  .contact-heading h1 { font-size: 38px !important; line-height: 1.05 !important; }
  .contact-heading > p { margin-top: 16px !important; font-size: 13px !important; line-height: 1.65 !important; }

  .contact-trust {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px 12px !important;
    margin-top: 22px !important;
  }
  .contact-trust span { font-size: 10px !important; }

  .contact-grid { gap: 14px !important; }
  .contact-left { gap: 14px !important; }
  .contact-info-card,
  .contact-next-card,
  .contact-form-card { padding: 20px !important; border-radius: 15px !important; }

  .contact-info-card h2,
  .contact-form-heading h2 { font-size: 24px !important; }
  .contact-card-intro { margin: 10px 0 16px !important; }
  .contact-info-row { min-height: 58px !important; grid-template-columns: 36px minmax(0,1fr) 16px !important; gap: 10px !important; padding: 9px 0 !important; }
  .contact-info-icon { width: 36px !important; height: 36px !important; }
  .contact-next-card h3 { margin-bottom: 12px !important; font-size: 19px !important; }
  .contact-next-step { padding: 11px 0 !important; }

  .contact-form { gap: 16px !important; }
  .contact-form-heading { margin-bottom: 20px !important; }
  .contact-form-grid { gap: 12px !important; }
  .contact-option-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .contact-radio-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .contact-option-grid label span,
  .contact-radio-grid label span { min-height: 40px !important; padding: 7px 6px !important; font-size: 9px !important; }
  .contact-field textarea { min-height: 115px !important; }

  /* =====================================================
     SOLUTIONS / INDUSTRIES
  ====================================================== */
  .solutions-hero,
  .solutions-challenges,
  .solutions-transaction,
  .solutions-models,
  .solutions-architecture,
  .solutions-growth,
  .solutions-industries,
  .solution-finder,
  .solutions-final { padding: 60px 0 !important; }

  .solutions-hero-content h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .solutions-hero-content > p { font-size: 14px !important; line-height: 1.65 !important; }
  .solutions-hero-tags { gap: 6px !important; margin-top: 22px !important; }
  .solutions-hero-tags span { padding: 7px 8px !important; font-size: 8px !important; }
  .solutions-section-heading { margin-bottom: 30px !important; }
  .solutions-section-heading h2,
  .solutions-transaction-content h2,
  .solutions-architecture-content h2,
  .solutions-industries-content h2 { font-size: 34px !important; line-height: 1.08 !important; }

  .solutions-challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .solutions-page .solution-challenge-card { min-height: 0 !important; padding: 15px !important; }
  .solutions-page .solution-challenge-card h3 { font-size: 12px !important; }
  .solutions-page .solution-challenge-card p { font-size: 9px !important; line-height: 1.5 !important; }

  .solutions-transaction-layout,
  .solutions-architecture-layout,
  .solutions-industries-layout { gap: 28px !important; }
  .solutions-page .transaction-flow { padding: 14px !important; border-radius: 16px !important; }
  .solutions-model-grid { gap: 9px !important; }
  .solutions-growth-flow { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .solutions-growth-stage { min-height: 0 !important; padding: 15px !important; }
  .solutions-page .growth-arrow { display: none !important; }
  .solutions-industry-cloud { padding: 16px !important; border-radius: 16px !important; }
  .solution-finder-card { padding: 20px !important; gap: 24px !important; border-radius: 16px !important; }
  .solution-finder-group > div { gap: 6px !important; }
  .solution-finder-group span { padding: 7px 9px !important; font-size: 9px !important; }
  .solution-finder-button { width: 100% !important; justify-content: center !important; }
  .solutions-final-content h2 { font-size: 34px !important; }

  /* =====================================================
     INVENTORY & SUPPLY
  ====================================================== */
  .inventory-supply-hero,
  .inventory-supply-section,
  .inventory-supply-final { padding: 60px 0 !important; }

  .inventory-supply-hero-content h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .inventory-supply-hero-content > p { font-size: 14px !important; line-height: 1.65 !important; }

  .inventory-supply-hero-nav { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .inventory-supply-hero-nav > * { min-height: 74px !important; padding: 12px !important; }
  .inventory-supply-layout { gap: 28px !important; }
  .inventory-supply-content h2 { font-size: 33px !important; line-height: 1.08 !important; }
  .inventory-supply-feature-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px 10px !important; }
  .inventory-supply-feature-list li { font-size: 9px !important; }

  .inventory-kpis,
  .purchasing-order-details,
  .warehouse-zones,
  .transfer-summary,
  .transfer-timeline { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }

  .purchasing-flow { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .purchasing-flow > div { width: auto !important; min-height: 66px !important; padding: 9px !important; }
  .purchasing-flow > svg { display: none !important; }
  .warehouse-flow { gap: 5px !important; }

  .inventory-supply-final-card { padding: 32px 18px !important; border-radius: 18px !important; }
  .inventory-supply-final-card h2 { font-size: 34px !important; }

  /* =====================================================
     MODULES
  ====================================================== */
  .modules-hero { padding: 60px 0 52px !important; }
  .modules-nav-section { padding-top: 12px !important; padding-bottom: 12px !important; }
  .modules-group,
  .modules-custom-section { padding: 60px 0 !important; }

  .modules-hero-heading h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .modules-hero-heading p { font-size: 14px !important; line-height: 1.65 !important; }
  .modules-hero-points { gap: 8px 12px !important; }
  .modules-category-nav { gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding-bottom: 4px !important; }
  .modules-category-nav a { flex: 0 0 auto !important; padding: 8px 10px !important; font-size: 9px !important; }

  .modules-group-heading { margin-bottom: 26px !important; }
  .modules-group-heading h2 { font-size: 32px !important; }
  .modules-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .modules-page .module-card { min-height: 0 !important; padding: 15px !important; border-radius: 13px !important; }
  .modules-page .module-card h3 { font-size: 12px !important; }
  .modules-page .module-card p { font-size: 9px !important; line-height: 1.5 !important; }
  .modules-page .module-card ul { margin-top: 10px !important; gap: 4px !important; }
  .modules-page .module-card li { font-size: 8px !important; }

  .modules-custom-card { padding: 24px 18px !important; gap: 20px !important; border-radius: 18px !important; }
  .modules-custom-card h2 { font-size: 32px !important; }
  .modules-custom-actions { width: 100% !important; }
  .modules-custom-actions .btn { width: 100% !important; justify-content: center !important; }

  /* =====================================================
     POS & SALES
  ====================================================== */
  .sales-customer-hero,
  .sales-customer-section,
  .sales-customer-final { padding: 60px 0 !important; }

  .sales-customer-hero-content h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .sales-customer-hero-content > p { font-size: 14px !important; line-height: 1.65 !important; }
  .sales-customer-hero-actions { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .sales-customer-nav-card { min-height: 78px !important; padding: 12px !important; }
  .sales-customer-layout { gap: 28px !important; }
  .sales-customer-content h2 { font-size: 33px !important; line-height: 1.08 !important; }
  .sales-customer-feature-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px 10px !important; }
  .sales-customer-feature-list li { font-size: 9px !important; }
  .sales-pos-payments,
  .sales-crm-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .sales-customer-final-card { padding: 32px 18px !important; border-radius: 18px !important; }
  .sales-customer-final-card h2 { font-size: 34px !important; }

  /* =====================================================
     PRICING
  ====================================================== */
  .pricing-hero-section,
  .pricing-assurance-section,
  .plan-compare-section,
  .pricing-addons-section,
  .pricing-custom-section,
  .pricing-faq-section,
  .pricing-final-cta-section { padding-top: 60px !important; padding-bottom: 60px !important; }

  .pricing-hero-heading { font-size: 38px !important; line-height: 1.04 !important; }
  .pricing-hero-intro { font-size: 14px !important; line-height: 1.65 !important; }
  .pricing-trust-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .pricing-trust-item { min-height: 56px !important; padding: 9px !important; }

  .pricing-plan-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pricing-plan-card { min-height: 0 !important; padding: 22px 18px !important; border-radius: 16px !important; }
  .pricing-plan-top { min-height: 0 !important; }
  .pricing-plan-features { gap: 7px !important; }
  .pricing-plan-button { min-height: 48px !important; }

  .pricing-assurance-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .pricing-assurance-item { min-height: 0 !important; padding: 14px !important; }
  .pricing-addons-heading { margin-bottom: 28px !important; }
  .pricing-addons-heading h2,
  .pricing-custom-copy h2,
  .pricing-faq-heading h2 { font-size: 34px !important; }
  .pricing-addons-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .pricing-addon-card { min-height: 0 !important; padding: 16px !important; }
  .pricing-addon-card h3 { font-size: 13px !important; }
  .pricing-addon-card p { font-size: 9px !important; line-height: 1.5 !important; }

  .pricing-custom-copy,
  .pricing-custom-action { padding: 26px 18px !important; }
  .pricing-custom-points { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .pricing-custom-button { width: 100% !important; justify-content: center !important; }
  .pricing-faq-heading { margin-bottom: 28px !important; }
  .pricing-faq-question { padding: 15px !important; }

  .pricing-final-cta-panel { padding: 38px 18px !important; border-radius: 18px !important; }
  .pricing-final-cta-panel h2 { font-size: 34px !important; }
  .pricing-final-buttons { gap: 8px !important; }
  .pricing-final-points { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; text-align: left !important; }

  /* =====================================================
     RESOURCES
  ====================================================== */
  .resources-hero,
  .resources-faq,
  .resources-insights,
  .resources-privacy,
  .resources-final { padding: 60px 0 !important; }

  .resources-hero-content h1 { font-size: 38px !important; line-height: 1.04 !important; }
  .resources-hero-content > p { font-size: 14px !important; line-height: 1.65 !important; }
  .resources-hero-links { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .resources-hero-links a { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  .resources-section-heading { margin-bottom: 28px !important; }
  .resources-section-heading h2,
  .resources-faq-intro h2,
  .resources-privacy-sidebar h2 { font-size: 33px !important; line-height: 1.08 !important; }
  .resources-faq-layout,
  .resources-privacy-layout { gap: 28px !important; }
  .resources-faq-list { gap: 8px !important; }
  .resources-faq-item { border-radius: 12px !important; }

  .resources-insights-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .resource-insight-featured { grid-column: 1 / -1 !important; }
  .resource-insight-card { min-height: 0 !important; }
  .resource-insight-content { padding: 14px !important; }
  .resource-insight-content h3 { font-size: 12px !important; }
  .resource-insight-content p { font-size: 9px !important; line-height: 1.5 !important; }

  .resources-policy-content section { padding: 18px 16px 18px 48px !important; }
  .resources-policy-number { left: 16px !important; top: 20px !important; }
  .resources-final-card { padding: 24px 18px !important; gap: 20px !important; border-radius: 18px !important; }
  .resources-final-card h2 { font-size: 32px !important; }
  .resources-final-actions { width: 100% !important; }
  .resources-final-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* Very narrow phones: protect readability where 2-column cards become too tight */
@media (max-width: 380px) {
  .about-delivery-grid,
  .solutions-challenge-grid,
  .modules-grid,
  .pricing-addons-grid,
  .resources-insights-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-radio-grid,
  .pricing-trust-row,
  .pricing-assurance-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Intelligence page — mobile Insight Feed bottom breathing space */
@media (max-width: 640px) {
  .ai-insight-content {
    padding-bottom: 28px !important;
  }

  .ai-insight-item p {
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   HOME — AI INSIGHT CARD MOBILE BOTTOM SPACE
   The insight slides are absolutely positioned, so increase
   the content area's layout height on mobile.
========================================================= */
@media (max-width: 640px) {
  .ai-insight-content {
    min-height: 110px !important;
  }
}