/* breakpoints */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr) !important; gap: 48px !important; }
  .product-grid > * { grid-column: span 6; }
  .app { grid-template-columns: 220px minmax(0, 1fr) !important; }
  .sidebar { width: 220px !important; }
}
@media (max-width: 900px) {
  .hero-grid, .developer-grid, .product-hero { grid-template-columns: 1fr !important; }
  .hero-preview { max-width: 680px; }
  .feature-card, .feature-card:nth-child(n) { grid-column: span 6; }
  .product-hero > .product-card:first-child { min-height: 270px; }
  .app { display: block !important; }
  .sidebar {
    position: sticky !important;
    top: 0;
    width: 100% !important;
    height: auto;
    padding: 8px var(--p2-gutter) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--p2-line) !important;
  }
  .sidebar .brand, .sidebar-foot { display: none !important; }
  .sidebar .nav { display: flex !important; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .sidebar .nav button, .sidebar .nav a { width: auto; flex: 0 0 auto; }
  body.page-admin .topbar { top: 55px !important; }
}
@media (max-width: 720px) {
  body { background: var(--p2-page) !important; }
  .nav-inner { min-height: 57px !important; }
  .menu-toggle { display: grid !important; place-items: center; }
  .nav-links {
    position: absolute !important;
    top: 57px !important;
    right: var(--p2-gutter) !important;
    left: var(--p2-gutter) !important;
    display: none !important;
    align-items: stretch !important;
    flex-direction: column !important;
    padding: 7px !important;
    border: 1px solid var(--p2-line-strong) !important;
    border-radius: var(--p2-radius-lg) !important;
    background: var(--p2-surface-1) !important;
    box-shadow: var(--p2-shadow-float) !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links > a { width: 100%; }
  .hero { padding-top: 62px !important; }
  .hero-copy { padding-left: 0; }
  .hero-copy::before { display: none; }
  .hero-copy h1 { font-size: clamp(2.85rem, 10vw, 3.5rem) !important; }
  .feature-card, .feature-card:nth-child(n) { grid-column: 1 / -1; min-height: auto !important; }
  .stats-card { grid-template-columns: 1fr !important; }
  .stat, .stat:first-child {
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--p2-line) !important;
  }
  .stat:last-child { border-bottom: 0 !important; }
  .cta-card { padding: 28px !important; }
  .cta-card::before { display: none !important; }
  .product-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 11px var(--p2-gutter) !important;
  }
  .product-brand { min-height: 34px; }
  .product-nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-nav::-webkit-scrollbar { display: none; }
  .product-grid > *, .product-grid.two > * { grid-column: 1 / -1; }
  body.page-admin .topbar {
    top: 55px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding-block: 14px !important;
  }
  body.page-admin .topbar .btn { width: 100%; }
}
@media (max-width: 480px) {
  :root { --p2-gutter: 16px; }
  .hero-actions > *, .developer-actions > *, .cta-actions > * { width: 100%; }
  .hero-preview::before { margin-top: 8px; }
  .browser-card { border-radius: var(--p2-radius) !important; }
  .auth-dialog { padding: 24px 18px !important; }
  .auth-oauth { grid-template-columns: 1fr !important; }
  .cookie-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .product-shell { padding-top: 34px !important; }
  .product-hero > .product-card:first-child { min-height: 240px; }
  .product-title { font-size: clamp(2.65rem, 13vw, 4rem) !important; }
  .product-card { padding: 20px !important; }
  .legal-links a:not(:last-child) { display: none !important; }
  body.page-admin .topbar p { display: none; }
  .sidebar .nav button, .sidebar .nav a { min-height: 42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}