/* Pocket Shop Manager landing page mobile polish */
@media (max-width: 767px) {
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }

  /* Header */
  header.sticky > div {
    height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  header.sticky img { width: 32px !important; height: 32px !important; }
  header.sticky .text-\[15px\] { font-size: 12px !important; }
  header.sticky .text-\[9px\] { font-size: 7px !important; }
  header.sticky .gap-2 { gap: 5px !important; }
  header.sticky button { min-height: 34px; }
  header.sticky button.border { padding: 7px 11px !important; }
  header.sticky button.bg-\[\#1672F8\] { padding: 7px 12px !important; }

  /* Hero */
  section:first-of-type > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 34px 16px 20px !important;
  }
  section:first-of-type h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px !important;
  }
  section:first-of-type p { font-size: 12px !important; line-height: 1.65 !important; }
  section:first-of-type .mt-6.flex.gap-6 {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
  section:first-of-type .mt-6.flex.gap-3 {
    flex-direction: column !important;
    width: 100% !important;
  }
  section:first-of-type .mt-6.flex.gap-3 button { width: 100% !important; justify-content: center !important; }
  section:first-of-type .inline-flex.rounded-full { font-size: 7px !important; }

  /* Dashboard preview */
  #how-preview { width: 100% !important; max-width: 100% !important; }
  #how-preview .psm-dashboard { min-height: 0 !important; }
  #how-preview .psm-main { padding: 9px !important; }
  #how-preview .psm-head { margin-bottom: 8px !important; }
  #how-preview .psm-head h3 { font-size: 9px !important; }
  #how-preview .psm-head p { font-size: 4.5px !important; }
  #how-preview .psm-date { font-size: 4.5px !important; padding: 5px !important; }
  #how-preview .psm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; margin-bottom: 6px !important; }
  #how-preview .psm-kpi { padding: 7px !important; border-radius: 8px !important; }
  #how-preview .psm-kpi strong { font-size: 9px !important; }
  #how-preview .psm-kpi-top { font-size: 4.3px !important; }
  #how-preview .psm-kpi-icon { width: 14px !important; height: 14px !important; font-size: 6px !important; }
  #how-preview .psm-kpi small { font-size: 4px !important; }
  #how-preview .psm-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  #how-preview .psm-card { padding: 7px !important; border-radius: 8px !important; }
  #how-preview .psm-card-head b { font-size: 5.5px !important; }
  #how-preview .psm-card-head span { font-size: 4.3px !important; }
  #how-preview .psm-chart { height: 58px !important; gap: 4px !important; }
  #how-preview .psm-row { grid-template-columns: 1fr 1fr .65fr .45fr !important; font-size: 4px !important; padding: 5px 0 !important; }
  #how-preview .psm-row.head { font-size: 3.8px !important; }
  #how-preview .psm-side-stat { padding: 6px 0 !important; }
  #how-preview .psm-side-label { font-size: 4.5px !important; }
  #how-preview .psm-side-value { font-size: 6px !important; }
  #how-preview .psm-stock-item { padding: 5px 0 !important; }

  /* Trust strip */
  section:first-of-type > div:last-child {
    padding: 8px 16px 20px !important;
    gap: 6px !important;
  }

  /* Main sections */
  #features, #pricing, #testimonials, #how, #support {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #features { padding-top: 38px !important; padding-bottom: 38px !important; }
  #pricing { padding-bottom: 38px !important; }
  #testimonials { padding-bottom: 24px !important; }
  #how, #support { padding-bottom: 24px !important; }

  #features .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #features .grid > div { padding: 12px !important; min-height: 145px; }
  #features h3 { font-size: 9px !important; }
  #features p { font-size: 7px !important; line-height: 1.55 !important; }

  #pricing .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #pricing .grid > div { width: 100% !important; }

  #testimonials > div { grid-template-columns: 1fr !important; gap: 12px !important; padding: 14px !important; text-align: center !important; }
  #testimonials > div > div { border: 0 !important; padding: 0 !important; }

  #how > div, #support > div { padding: 18px 14px !important; }

  /* Footer */
  footer > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    padding: 34px 16px !important;
  }
  footer > div > div:first-child { grid-column: 1 / -1 !important; }
  footer > div > div:last-child { grid-column: 1 / -1 !important; }
  footer button { font-size: 8px !important; }
}

@media (max-width: 420px) {
  header.sticky .text-left { max-width: 126px; }
  header.sticky .text-\[15px\] { font-size: 10.5px !important; }
  header.sticky .text-\[9px\] { font-size: 6.5px !important; }
  header.sticky button.border { padding: 6px 8px !important; font-size: 8px !important; }
  header.sticky button.bg-\[\#1672F8\] { padding: 6px 9px !important; font-size: 8px !important; }
  #features .grid { grid-template-columns: 1fr !important; }
  #features .grid > div { min-height: auto; }
  #how-preview .psm-head { align-items: flex-start !important; }
  #how-preview .psm-date { display: none !important; }
}