fix(landing): mobile iter 2 — pointer:coarse, copy, layout polish

[johnnichev]

Summary

Iteration 2 of mobile responsive fixes after Galaxy S23 testing of PR #41. Addresses 10 specific issues from the bug report. Applied /adapt and /clarify skill guidelines.

The critical insight

PR #41 bumped the breakpoint from 900px → 1024px to catch Chrome's "Desktop Site" mode. That assumption was wrong. Chrome on Galaxy S23 in Desktop Site mode actually reports a viewport of ~1280px (not ~980px), which still exceeded the 1024px breakpoint. The full nav remained visible and squeezed.

The fix is @media (pointer: coarse). Touch input is a hardware property that the user-agent cannot spoof — no "Desktop Site" toggle can hide the fact that the device has a touchscreen. This is the only reliable signal for "this is a touch device, no matter what the viewport pretends to be."

Issues fixed (mapped to your numbered bug report)

#	Issue	Fix
1	Header still showing 4 nav items + hidden hamburger on mobile	@media (pointer: coarse) block forces hamburger + drawer regardless of reported viewport
2	Hero pills feel buggy and templated	Replaced with clean "Works with · OpenAI Anthropic Gemini Ollama" provider strip; removed redundant feature pills
3	Supervisor agent chips break to 3+1 layout	2-column CSS grid with :last-child:nth-child(odd) { grid-column: 1 / -1 } so orphan items span full width
4	"What is Selectools?" copy too dense	Restructured into 3 short paragraphs + middle-dot capability list; removed redundant "Unlike X" framing
5	Code blocks scroll horizontally — is this OK?	Yes, it's the standard (Stripe, Tailwind, Vercel all do it). Added a right-edge gradient mask matching the comparison table pattern
6	Feature cards too tall + big gaps on mobile	Compact card layout: 28px → 20px padding, 40 → 32px icon, 32 → 14px grid gap
7	"Live · no server required" chip orphaned	Moved inline with the "Visual Agent Builder" section label
8	Comparison table cells wrapping to 3 lines	Bumped min-width 640 → 800px; added white-space: nowrap to Yes/No verdict cells
9	No gap before first builder card in "Three paths"	Explicit margin-bottom: 64px on description + padding-top on cards
10	Header should always be visible on mobile	Removed nav-hide-on-scroll on touch devices (kept on desktop where it's a progressive enhancement)

The /adapt and /clarify takeaways

From /adapt: Viewport-based responsive design is fundamentally fragile because users can override it (Desktop Site mode, Reader Mode, browser zoom, accessibility settings). The reliable signal for "is this a touch device" is @media (pointer: coarse), which queries hardware capability. Combined with viewport breakpoints, you get defense in depth.

From /clarify: The "What is Selectools?" copy was suffering from textbook clarity problems: one long sentence with a list rammed inside, repeated "Unlike X" framing, and a poetic closing line that didn't add value. The rewrite is shorter, scannable, and uses visual hierarchy (a brighter middle-dot list) to break up the prose.

Detailed changes

CSS (in landing/index.html)

Touch-input override block (the centerpiece)
```css
@media (pointer: coarse) {
.nav-burger { display: block; }
.nav-drawer { display: block; }
.nav-links.hide-mobile { display: none; }
.hero-grid { grid-template-columns: 1fr; }
.hero-flow { display: none; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
```

Provider strip (replaces hero pills)

• New .hero-providers, .hero-providers-label, .hero-providers-list, .provider classes
• Each provider gets a small cyan dot prefix via ::before
• Wraps cleanly on narrow viewports

Supervisor agent chips grid

• Switched .sim-agents from flex-wrap to 2-column grid on mobile + touch
• :last-child:nth-child(odd) { grid-column: 1 / -1 } handles odd counts gracefully

Code block scroll indicator

• mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%) on .code-body
• Drops on :hover and :focus-within so engaged users see full content
• Reduced mobile font size 12px → 11.5px for better fit

Compact card layout

• @media (max-width: 768px), (pointer: coarse): card padding 28→20, icon 40→32, grid gap 32→14
• Smaller h3 (15→14) and p (13.5→13)

Comparison table column widths

• min-width: 640px → 800px
• .yes, .no, .mid cells get white-space: nowrap so verdict text never wraps

Nav hide-on-scroll: desktop only

• New JS check: var allowHide = !prefersReduced && window.matchMedia('(pointer: fine)').matches
• Touch devices keep the nav permanently visible

Markup changes

Hero pills → provider strip
```html

Works with

OpenAI Anthropic Gemini Ollama

\`\`\`

"What is Selectools?" rewrite
```html

Open-source Python library for production AI agents. One pip install gives you the full stack:

Multi-agent graphs · Tool calling · Hybrid RAG · 50 evaluators · Guardrails · Audit logging · Visual builder

No DSL. No separate packages. No paid SaaS. Your code stays plain Python — readable, debuggable, yours.

\`\`\`

Visual Builder section header

• Section label and "Live · no server required" badge now share a flex row

Test plan

After merge, on Galaxy S23 specifically (the device that surfaced these issues):

Test in BOTH normal mobile mode AND "Desktop Site" mode:

• Header shows hamburger button only — no nav-links visible
• Header stays fixed when scrolling down (doesn't hide)
• Hero shows the new "Works with · OpenAI Anthropic Gemini Ollama" strip (no pill grid)
• pip-install button is full-width and tappable
• Supervisor simulation shows agents in 2x2 grid (not 3+1)
• "What is Selectools?" copy reads as 3 short paragraphs with a distinct middle list
• Code blocks have a faded right edge that drops when you tap into them
• Feature cards feel compact (no awkward 1/3-screen blocks)
• Visual Builder section shows the live chip inline next to the section label
• Comparison table cells fit on 1-2 lines (not 3-4)
• Yes/No verdict cells never wrap
• "Three paths" cards have visible breathing room above the first card
• All hover states feel correct on touch (no stickiness)

Regression on desktop:

• Hover-based progressive enhancements still work
• Nav still auto-hides on scroll-down (desktop only)
• Hero pills replacement looks good at full width

What's NOT in this PR

• Replacing the hero pills with logo SVGs (would require finding/sourcing logos and adds asset weight)
• Converting comparison tables to mobile card layout (significant structural change; the scroll-with-edge-gradient pattern is the standard mobile pattern for data tables)
• Replacing builder iframe with screenshots (still a "needs more room" CTA card on mobile, same as PR fix(landing,docs): comprehensive mobile responsive pass #41)

If anything still feels off after merge, I'll iterate on the same fix/mobile-iter-2 branch — no need to spawn another PR.