/* Phone + small-tablet layout for the inline-styled bundle. The classes are added by build.mjs;
   !important is needed because every rule here overrides an inline style. Desktop is untouched. */
html, body { overflow-x: hidden; }
img { max-width: 100%; }

@media (max-width: 820px) {
  /* nav: logo + wallet on one row, links on a second row */
  .fz-nav { flex-wrap: wrap !important; gap: 12px 16px !important; padding: 12px 16px !important; justify-content: space-between !important; }
  .fz-navlinks { order: 3; flex: 1 0 100% !important; gap: 20px !important; }
  .fz-nav button { font-size: 11px !important; padding: 9px 13px !important; }

  /* page gutters */
  .fz-page { padding-left: 16px !important; padding-right: 16px !important; }
  .fz-pad { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* home hero: the dynamite moves above the headline instead of sitting behind it */
  .fz-hero { padding: 32px 0 40px !important; min-height: 0 !important; }
  .fz-heroimg { position: static !important; display: block; transform: none !important; height: 120px !important; margin: 0 0 24px -12px; }
  .fz-h1 { font-size: 44px !important; margin-bottom: 18px !important; }
  .fz-lead { font-size: 16px !important; margin-bottom: 28px !important; }
  .fz-ctas { flex-wrap: wrap; }
  .fz-ctas button { flex: 1 1 auto; }

  /* stats: 2 columns, 5th tile full width */
  .fz-stats { grid-template-columns: 1fr 1fr !important; margin-bottom: 40px !important; }
  .fz-stats > div { padding: 16px !important; border-right: none !important; border-bottom: 1px solid rgba(236,234,228,0.10); }
  .fz-stats > div:nth-child(odd):not(:last-child) { border-right: 1px solid rgba(236,234,228,0.10) !important; }
  .fz-stats > div:last-child { grid-column: 1 / -1; border-bottom: none; }
  .fz-stats > div > div:last-child { font-size: 22px !important; }

  /* list header: title above the filter tabs, tabs scroll sideways if they still don't fit */
  .fz-listhead { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  .fz-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .fz-tabs span { flex: 0 0 auto; padding: 6px 10px !important; }

  /* launch list: token | progress | status stay in one row, tighter */
  .fz-row { grid-template-columns: 1.3fr 1fr auto !important; gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .fz-row:not(.fz-rowhead) { padding-top: 14px !important; padding-bottom: 14px !important; }
  .fz-rowhead { font-size: 9px !important; letter-spacing: 0.08em !important; }
  .fz-row img { width: 32px !important; height: 32px !important; }
  .fz-row > div:first-child { gap: 10px !important; min-width: 0; }

  /* launch + token pages: one column */
  .fz-split { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fz-pair { grid-template-columns: 1fr !important; gap: 16px !important; }
  .fz-h2 { font-size: 32px !important; }
  .fz-clock { font-size: 40px !important; margin-bottom: 22px !important; }
  .fz-bignum { font-size: 40px !important; }
  .fz-clockrow { flex-direction: column; gap: 18px; }
  .fz-clockrow > div:last-child { text-align: left !important; }

  /* footer stacks */
  .fz-footer { flex-direction: column; gap: 8px; margin-top: 48px !important; padding: 18px 16px !important; }
}

@media (max-width: 380px) {
  .fz-h1 { font-size: 38px !important; }
  .fz-navlinks span { font-size: 13px !important; }
}