# Static SaaS/mobile pass pattern

Use this when a static marketing/proof hub has a polished desktop SaaS layout but feels cramped or unfriendly on mobile.

## Durable pattern

1. Patch the generator/source, not only generated HTML.
   - If the site is generated from a script, update the shared CSS/template in the generator.
   - Regenerate all affected pages so homepage, hub pages, and individual landing pages stay visually consistent.

2. Add an intermediate breakpoint before phone widths.
   - Around `max-width: 1100px`, allow the header to wrap, reduce hero type, and move nav to a second row before it collides.
   - Do not wait until `640px`/mobile to fix a dense desktop nav.

3. Make mobile navigation usable instead of just smaller.
   - Set the header to non-sticky on mobile if it consumes too much vertical space.
   - Convert nav links to horizontal scroll chips: `overflow-x:auto; flex-wrap:nowrap; white-space:nowrap;`.
   - Keep primary actions reachable; use a two-column action row or full-width stacked buttons depending on width.

4. Make hero and CTAs thumb-friendly.
   - Reduce hero padding, border radius, and headline size on phones.
   - Stack hero columns to one column.
   - Make primary/secondary CTAs full-width with comfortable tap height.
   - Keep mock dashboards/code panels contained with smaller padding and `white-space:pre-wrap` for code.

5. Collapse dense content predictably.
   - Cards, forms, protocol/status rows, dark CTA sections, and footer columns should become one column.
   - Reduce card padding/radius on phones, but keep enough whitespace to preserve the SaaS feel.

6. Verify both directions.
   - After mobile CSS changes, re-check desktop so no regression was introduced.
   - Browser-check at least homepage and one representative landing page.
   - Run a no-horizontal-overflow check such as: `document.documentElement.scrollWidth <= window.innerWidth`.
   - Use screenshot/vision QA for visible overlap/clipping; numeric overflow alone misses visual collisions.

## CSS snippets

```css
@media (max-width: 1100px) {
  .topin { height:auto; flex-wrap:wrap; padding:14px 0; }
  .nav { order:3; width:100%; gap:12px; }
  .hero h1 { font-size:clamp(3rem,5.4vw,4.9rem); }
}

@media (max-width: 900px) {
  .top { position:static; }
  .nav {
    display:flex;
    overflow-x:auto;
    flex-wrap:nowrap;
    margin:0 -22px;
    padding:0 22px 8px;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar { display:none; }
  .nav a { white-space:nowrap; border-radius:999px; padding:9px 12px; }
  .actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .hero, .dark { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .wrap { padding:0 16px; }
  .hero { border-radius:24px; min-height:0; }
  .hero-copy { padding:30px 22px; }
  .hero h1 { font-size:clamp(2.3rem,12vw,3rem); line-height:.96; }
  .btn { width:100%; padding:13px 14px; }
  .grid.two, .grid.three, .stats, .footer-grid { grid-template-columns:1fr; }
  .card { padding:22px; border-radius:22px; }
}
```