/* bloo.app marketing site — chrome + responsive overrides.
   Layout is mostly inline-styled (React style objects); this file only
   carries the global reset and the handful of breakpoints inline styles
   can't express. !important is intentional: it overrides inline styles. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-card); font-family: var(--font-body); }

.bl-tabs__tab { white-space: nowrap; }

@media (max-width: 900px) {
  .site-nav-links { display: none !important; }
}

@media (max-width: 760px) {
  .site-grid-3 { grid-template-columns: 1fr !important; }
  .site-grid-2 { grid-template-columns: 1fr !important; }
  .site-footer-cols { gap: 28px !important; }
}

@media (max-width: 640px) {
  .site-container { padding: 0 20px !important; }
  .site-h1-hero { font-size: 38px !important; }
  .site-h1 { font-size: 32px !important; }
}

/* "What's inside" deep-dive — master-detail + explorer stack on narrow screens */
@media (max-width: 860px) {
  .pack-md { grid-template-columns: 1fr !important; }
  .pack-explorer-grid { grid-template-columns: 1fr !important; }
  .pack-md-rail { position: static !important; }
  .pack-explorer-controls { position: static !important; }
}
@media (max-width: 560px) {
  .pack-catch-list { grid-template-columns: 1fr !important; }
  .pack-sc-row { grid-template-columns: 1fr !important; gap: 4px !important; }
}