/* ==========================================================================
   responsive.css — breakpoints, largest to smallest. Loaded on every page.
   ========================================================================== */

/* ~1024px: tighten section padding slightly */
@media (max-width:1024px){
  .wrap{ padding:0 24px; }
  .sec-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ~900px: tablet — stack hero, collapse desktop nav into mobile menu */
@media (max-width:900px){
  .navlinks, .navcta{ display:none; }
  .navtoggle{ display:block; }

  .hero{ min-height:auto; padding:100px 0 48px; }
  .hero-scrim{
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(7,26,28,0.9) 40%, rgba(7,26,28,0.55) 100%);
  }
  .hero-stats{ gap:24px; }

  .problem-grid{ grid-template-columns:1fr; gap:32px; }
  .showcase-grid{ grid-template-columns:1fr; gap:32px; }

  .product-grid{ grid-template-columns:1fr 1fr; }
  .explore-grid{ grid-template-columns:1fr 1fr; }

  .tabpanel.active{ grid-template-columns:1fr; }

  .principles-row{ grid-template-columns:1fr 1fr; }

  .corridor-list{ grid-template-columns:1fr 1fr; }

  .sec-grid{ grid-template-columns:1fr 1fr; }

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

  .cta-band{ padding:48px 28px; margin:0 20px; }

  .credential-flow{ flex-direction:column; }
  .credential-arrow{ transform:rotate(90deg); padding:2px 0; }
}

/* ~600px: phones */
@media (max-width:600px){
  .wrap{ padding:0 20px; }
  .section-pad{ padding:64px 0; }

  .product-grid{ grid-template-columns:1fr; }
  .explore-grid{ grid-template-columns:1fr; }
  .corridor-list{ grid-template-columns:1fr; }
  .sec-grid{ grid-template-columns:1fr; }
  .principles-row{ grid-template-columns:1fr 1fr; }

  .hero{ padding:88px 0 40px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .hero-stats{ gap:20px 28px; }

  .corridor{ min-height:auto; padding:20px 16px 18px; }
  .corridor-svg{ height:220px; }

  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  nav{ padding:16px 20px; }
  .nav-mobile{ padding:8px 20px 20px; }

  .code-tabs-head{ flex-wrap:wrap; gap:10px; }
  .step{ grid-template-columns:32px 1fr; gap:14px; }
  .step .n{ width:32px; height:32px; font-size:12px; }
  .steps-list::before{ left:15px; }
}

/* ~380px: very small phones */
@media (max-width:380px){
  .hero-stats{ flex-direction:column; gap:14px; }
  .principles-row{ grid-template-columns:1fr; }
  .tabbar{ width:100%; }
  .tabbtn{ flex:1; padding:10px 8px; font-size:13px; }
}