/* ============================================================
   RESPONSIVE — breakpoints for narrower viewports
   ============================================================ */
@media (max-width: 1080px) {
  /* Stack multi-column layouts to single column */
  .hero-in,
  .twocol,
  .flow2,
  .band-in,
  .builder,
  .split2 {
    grid-template-columns: 1fr;
  }

  /* Two columns for pricing, platform tiles, marketplace, and stat cards */
  .pricegrid,
  .platsel,
  .dgrid,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Collapse app shell to single column */
  .shell { grid-template-columns: 1fr; }

  /* Sidebar becomes a fixed drawer — hidden by default */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 256px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    /* override display:none */
    display: flex !important;
  }
  .sidebar.sidebar--open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.45);
  }

  /* Show hamburger, keep topbar above overlay */
  .ham-btn    { display: grid !important; }
  .topbar     { z-index: 210; }
  /* Show close X inside the sidebar drawer */
  .sb-close-btn { display: grid; }

  /* Scale down typographic sizes */
  .hero h1        { font-size: 44px; }
  .shead h2,
  .band h2        { font-size: 30px; }
}

@media (max-width: 600px) {
  .hero h1           { font-size: 32px; }
  .hero p.sub        { font-size: 16px; }
  .stats             { grid-template-columns: 1fr 1fr; }
  .dgrid             { grid-template-columns: 1fr; }

  /* Topbar: solid background so it shows clearly on mobile */
  .topbar {
    padding: 12px 16px;
    gap: 10px;
    background: var(--paper);
    backdrop-filter: none;
    border-bottom: 1.5px solid var(--line);
  }

  /* Crumb text visible on mobile */
  .crumb { font-size: 12px; }

  .content           { padding: 20px 16px; }

  /* Page header: stack title above action button on small screens */
  .phead             { flex-direction: column; align-items: flex-start; gap: 12px; }
  .phead h1          { font-size: 26px; }

  /* Tables: scroll horizontally instead of overflowing */
  .card              { overflow-x: auto; }
  .card--chart       { overflow: hidden; }
  table              { min-width: 520px; }
  canvas             { max-width: 100% !important; }

  .walletpill .wl    { display: none; }
  #toast-root        { bottom: 16px; right: 16px; left: 16px; }
  .toast             { max-width: 100%; }
}