/* ============================================================
   Responsive: every asymmetric layout collapses to a single column below 768px
   ============================================================ */
@media (max-width: 1100px) {
  .compose-grid { grid-template-columns: 1fr; }
  .compose-preview-box { position: static; }
  .editor-md { grid-template-columns: 1fr; }
  .md-pane + .md-pane { border-left: none; border-top: 1px solid var(--line); }
  .md-pane { min-height: 300px; }
  .two { grid-template-columns: 1fr; gap: 40px; }
  .top-search { display: none; }
}

@media (max-width: 960px) {
  .top-nav, .top-stat { display: none; }
  .top-in, .wrap, .app-body { padding: 0 18px; }
  .hero-in { grid-template-columns: 1fr; padding: 48px 18px 36px; }
  .acc { flex-direction: column; height: auto; }
  .acc a { flex: none; height: 74px; }
  .acc a:hover, .acc a.open { flex: none; height: 300px; }
  .acc .v { display: none; }
  .acc .cap { opacity: 1; }
  .head, .zz, .cta { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .btn.lg { height: 46px; font-size: 15px; }
  .zz > a, .zz > a:nth-child(even) { padding: 28px 0; border-left: 0; }
  section.s { padding: 64px 0; }
}

@media (max-width: 768px) {
  body { font-size: 14.5px; }
  .brand { padding-right: 12px; border-right: 0; }
  .top-cta { display: none; }
  .btn-menu { display: inline-flex; }
  .icon-btn { margin-left: 4px; }
  .hero-h1 { font-size: clamp(44px, 14vw, 72px); }
  .sidebar {
    position: fixed; top: 58px; left: 0; bottom: 0; z-index: var(--z-drawer);
    width: min(300px, 86vw); max-height: none; padding: 20px 16px 32px 18px;
    background: var(--bg-1); border-right: 1px solid var(--line-2);
    box-shadow: 20px 0 60px -20px rgba(var(--shadow-rgb), 0.9);
    transform: translateX(calc(-100% - 16px));
    transition: transform var(--dur) var(--ease);
  }
  .sidebar.open { transform: none; }
  .content { padding: 20px 0 80px; }
  h1.page-title { font-size: 26px; }
  .field-row { flex-direction: column; gap: 0; }
  .ph-new, .ph-row { grid-template-columns: 1fr; }
  .ph-token { padding-top: 0; }
  .scroll-btns { right: 14px; bottom: 16px; }
  .modal { padding: 26px 22px 24px; }
  .mega-inner { padding: 20px 18px 28px; grid-template-columns: 1fr; }
  /* mobile site nav drawer */
  .top.nav-open .top-nav { display: flex; flex-direction: column; position: absolute; top: 58px; left: 0; right: 0; height: auto; background: var(--bg-1); border-bottom: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(var(--shadow-rgb), 0.9); }
  .top.nav-open .top-nav > a, .top.nav-open .nav-cat > a { height: 48px; padding: 0 20px; border-right: 0; border-bottom: 1px solid var(--line); width: 100%; }
  .top.nav-open .nav-cat { height: auto; }
  .top.nav-open .nav-caret, .top.nav-open .mega { display: none; }
}