/* TimberTrack marketing site — mobile/responsive layer.
   Desktop is unchanged; everything below only applies on narrow screens.
   Overrides the design's inline styles via attribute selectors + !important. */

/* Mobile-only chrome is hidden on desktop */
.nav-toggle{ display:none; }
.nav-menu{ display:none; }

@media (max-width:880px){

  /* ---------- NAV → hamburger menu ---------- */
  nav .nav-links{ display:none !important; }              /* desktop centre links */
  .login-link{ display:none !important; }                 /* moved into the menu */
  nav a[style*="padding:11px 20px"]{ display:none !important; } /* trial CTA → into the menu */
  nav a{ white-space:nowrap; }

  .nav-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; cursor:pointer;
    background:#fff; color:#1E3318;
    border:1px solid #E0DCCE; border-radius:11px;
  }
  .nav-toggle:active{ background:#F0F2EC; }

  /* in-flow accordion panel under the sticky bar */
  .nav-menu{
    display:flex; flex-direction:column;
    max-height:0; overflow:hidden; opacity:0;
    background:rgba(247,245,239,.98);
    border-top:1px solid #E7E4D8;
    padding:0 20px;
    transition:max-height .26s ease, opacity .2s ease, padding .26s ease;
  }
  nav.menu-open .nav-menu{ max-height:380px; opacity:1; padding:6px 20px 14px; }
  .nav-menu a{
    font:700 16px 'Hanken Grotesk'; color:#1A241A; text-decoration:none;
    padding:14px 4px; border-bottom:1px solid #ECE8DC;
  }
  .nav-menu .nav-cta{
    margin-top:12px; padding:14px; border-bottom:none; text-align:center;
    color:#fff !important; background:#1E3318; border-radius:12px;
  }

  /* ---------- SPACING: tighten side gutters everywhere ---------- */
  [style*="margin:0 auto"][style*="40px"]{
    padding-left:20px !important; padding-right:20px !important;
  }
  /* trim oversized vertical padding on the big sections */
  [style*="padding:92px 40px"]{ padding-top:54px !important; padding-bottom:54px !important; }
  [style*="padding:84px 40px"]{ padding-top:48px !important; padding-bottom:48px !important; }
  [style*="padding:90px 40px"]{ padding-top:50px !important; padding-bottom:48px !important; }
  [style*="padding:78px 40px"]{ padding-top:46px !important; padding-bottom:46px !important; }
  [style*="padding:54px 40px"]{ padding-top:34px !important; padding-bottom:34px !important; }
  [style*="padding:84px 40px 92px"]{ padding-top:40px !important; padding-bottom:48px !important; }
  [style*="padding:74px 40px 80px"]{ padding-top:36px !important; padding-bottom:44px !important; }
  [style*="padding:74px 40px 8px"]{ padding-top:40px !important; }
  /* dark CTA cards */
  [style*="padding:64px 56px"], [style*="padding:60px 56px"]{ padding:42px 24px !important; }
  [style*="padding:60px 56px;text-align:center"]{ padding:42px 24px !important; }

  /* ---------- HERO ---------- */
  .hero-visual{ display:none !important; }   /* drop the busy layered composition on the home hero */
  h1{ font-size:34px !important; line-height:1.1 !important; }
  h2{ font-size:27px !important; line-height:1.16 !important; }

  /* big stat numbers + drop the divider lines once the stats stack */
  [style*="font:700 44px 'Space Grotesk'"]{ font-size:34px !important; }
  [style*="border-left:1px solid #DED9C9"]{ border-left:none !important; }

  /* ---------- horizontal step diagrams → swipeable row ---------- */
  [style*="justify-content:space-between"][style*="gap:10px"],
  [style*="justify-content:space-between"][style*="gap:8px"]{
    overflow-x:auto; -webkit-overflow-scrolling:touch; gap:12px !important;
    margin:0 -20px; padding:0 20px 8px;
  }
  [style*="justify-content:space-between"][style*="gap:10px"] > div[style*="flex:1"],
  [style*="justify-content:space-between"][style*="gap:8px"] > div[style*="flex:1"]{
    flex:0 0 auto !important; min-width:132px;
  }
}