/* =========================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (Scaled +40%)
   Breakpoints: 320px, 360px, 375px, 390px, 412px, 768px, 1024px
========================================================= */

/* Mobile Ultra-Compact (<= 340px) */
@media (max-width: 340px) {
  .nav-brand-title {
    font-size: 15px;
  }
  .nav-brand-sub {
    font-size: 11px;
  }
  .btn-demo-nav {
    padding: 6px 10px;
    font-size: 13px;
  }
  .study-kit-tab {
    padding: 0 7px;
    font-size: 12px;
    height: 34px;
  }
  .study-cylinder-viewport {
    height: 290px;
  }
  .cylinder-card {
    width: 185px;
    height: 255px;
    padding: 12px 10px 10px;
  }
  .study-cylinder-carousel {
    width: 185px;
    height: 255px;
  }
}

/* Standard Mobile (341px - 480px: 360px, 375px, 390px, 412px) */
@media (min-width: 341px) and (max-width: 480px) {
  .study-kit-tabs {
    gap: 5px;
  }
  .study-cylinder-viewport {
    height: 310px;
  }
  .cylinder-card {
    width: 215px;
    height: 275px;
  }
  .study-cylinder-carousel {
    width: 215px;
    height: 275px;
  }
}

/* Tablet (481px - 899px) */
@media (min-width: 481px) and (max-width: 899px) {
  .study-cylinder-viewport {
    height: 370px;
    perspective: 850px;
  }
  .study-cylinder-carousel {
    width: 260px;
    height: 335px;
  }
  .cylinder-card {
    width: 260px;
    height: 335px;
    padding: 22px 18px;
  }
}

/* Desktop & Widescreen (>= 900px) */
@media (min-width: 900px) {
  .study-cylinder-viewport {
    height: 420px;
    perspective: 1050px;
  }
  .study-cylinder-carousel {
    width: 300px;
    height: 380px;
  }
  .cylinder-card {
    width: 300px;
    height: 380px;
  }
}

/* Universal Anti-Overflow Safeguard */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}