/* ============================================================
   RESPONSIVE LAYER  (loaded last — wins the cascade)
   Breakpoints:  1024px tablet · 960px mobile-nav · 640px phone
   ============================================================ */

/* Never allow sideways scroll, keep media fluid everywhere */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }

/* Hamburger button — hidden on desktop */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border: none; border-radius: var(--r-full);
  cursor: pointer; flex-shrink: 0;
}
.nav-burger .ms { font-size: 24px; }
.nav-tab-cta { display: none; }

/* ---------------------------------------------------------- */
/* TABLET  ≤1024px : tighten padding, 4/3-col → 2-col          */
/* ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .sec, .sec-full { padding-left: 32px; padding-right: 32px; }
  .pricing-inner  { padding-left: 32px; padding-right: 32px; }
  .hero { padding-left: 32px; padding-right: 32px; gap: 32px; }

  .stats-strip, .price-cards, .cert-grid, .sec-metrics,
  .cap-grid, .addons-grid, .mpkg-grid, .vals-grid,
  .omics-workflow-grid, .tutorial-grid, .testimonials-grid,
  .sec-card-grid, .cap14-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------------------------------------------------------- */
/* MOBILE NAV  ≤960px : hamburger drawer, stack hero/2-col     */
/* ---------------------------------------------------------- */
@media (max-width: 960px) {
  .top-bar { padding: 0 14px; }
  .nav-burger { display: inline-flex; }

  /* nav tabs become a slide-down drawer */
  .nav-tabs {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 4px;
    background: rgba(248, 250, 253, .98);
    backdrop-filter: blur(24px);
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-bottom: 1px solid var(--md-outline-v);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
    max-height: calc(100vh - 64px); overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease-std), transform .22s var(--ease-std);
  }
  .top-bar.menu-open .nav-tabs {
    opacity: 1; transform: none; pointer-events: auto;
  }
  .nav-tab {
    width: 100%; text-align: left;
    padding: 13px 16px; font-size: 15px;
    border-radius: 12px;
  }
  /* CTA shown inside the drawer */
  .nav-tab-cta {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
    margin-top: 8px;
    background: var(--md-primary); color: var(--md-on-primary);
    font-weight: 600; text-decoration: none;
  }

  /* hero + asymmetric / 2-col layouts → single column */
  .hero { grid-template-columns: 1fr !important; padding-top: 84px; }
  .hero-vis { height: 300px; }
  .carousel-wrap, .sec-page-layout, .problem-grid, .about-split,
  .contact-grid, .pipeline-full, .wf-content.active, .grid2,
  .ent-grid, .arch-bullets-grid, .platforms-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------- */
/* PHONE  ≤640px : everything single column, smaller type      */
/* ---------------------------------------------------------- */
@media (max-width: 640px) {
  /* header CTA pill would crowd small phones — drawer carries it instead */
  .top-bar-cta { display: none !important; }

  .sec, .sec-full { padding: 32px 18px; }
  .pricing-inner  { padding: 40px 18px; }
  .hero { padding: 84px 18px 24px; }

  /* collapse every multi-column grid (class- and inline-based) */
  .stats-strip, .price-cards, .cert-grid, .sec-metrics, .footer-grid,
  .cap-grid, .addons-grid, .mpkg-grid, .vals-grid, .omics-workflow-grid,
  .tutorial-grid, .testimonials-grid, .sec-card-grid, .cap14-grid {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* cap any inline fixed widths to the viewport */
  [style*="width:"] { max-width: 100% !important; }
  img { height: auto; }

  /* typography down-scale */
  .disp-lg { font-size: clamp(30px, 8.5vw, 40px) !important; }
  .body-lg { font-size: 15px; }
  .plat-name, .stat-num { font-size: clamp(28px, 8vw, 38px) !important; }
  .sp-ticker-item { padding: 0 16px; font-size: 11px; }

  /* horizontal card rails stay swipeable but fit the screen */
  .testimonials-sec.rotating-testimonials .testimonial-card { width: 84vw; flex-basis: 84vw; }
}