# Firecrawl layout research — 2026-10-20
Source: https://www.firecrawl.dev/ . Live homepage checked with Playwright Chromium, deviceScaleFactor 1, viewport height 1000, widths 1440/1280/1024/768/390. document.fonts.ready awaited. No application or design-system edits.

## Verified measurements
- `.container`: computed max-width `min(100% - 32px, 1112px)` on desktop. Width/x: 1440→1112/164;1280→1112/84;1024→992/16.
- At 768/390, `.container` computed max-width `min(100% - 32px, 356px)`: actual width356, x206/x17. This is a narrow tablet clamp. Exact breakpoint not independently extracted; measured 1024 desktop versus768 mobile.
- `.cmw-container.border-x`: fixed, top0, viewport-height; same x/width as content; left/right borders1px. Shared rails continue across section boundaries.
- Main numbered divider wrapper (`main` direct div with classes `-mt-1 pointer-events-none select-none relative`): height245 desktop,155 mobile. Desktop numbered row `.container.relative.grid` height106 with padding45px 0 on its label block; horizontal separator child spans viewport width (1440), height1px.
- Main section intro ancestor of `h2.section-head-title`: `.py-88.lg:py-143`, padding143px 0 desktop,88px 0 mobile. Compact subheader variant `.py-64.lg:py-88`:88px desktop. H2 itself padding12px20px8px. H2 fonts52/56 desktop,36/40 mobile (font/line height); H1 60/64 vs44/48.
- `.developer-features-tabs`: desktop grid three equal columns370.66px across1112px, gap0, outer tab padding12px. Mobile horizontal tab strip; screenshot shows next choice partially offscreen. Do not turn substantive client content into hidden tabs merely to copy it.
- `.features-media` and `.features-wait` share parent `.lg:grid.grid-cols-2.relative.gap-16`: desktop two548px columns,16px gap; mobile normal stacked blocks, separated by52px line bands (`.lg:hidden.h-52.border-y`). Other rows repeat this pattern.
- Agent command panels parent `.grid.lg:grid-cols-2`: two556px columns, gap0 desktop; one356px column mobile. Nested action grid:4 columns desktop/2 mobile.
- Split subheaders use centered max736px desktop group with left eyebrow and right left-aligned title; become vertically centered stack mobile. This is repeated for agent connection, testimonials and FAQ.
- Stable homepage anchors confirmed: `#home-hero`, `#alexandria`. Remaining sections have no IDs in this capture; locate by `h2.section-head-title` text or classes, not invented anchors.
- `#alexandria`:1112px-wide colored block, min-height560px, padding96px20px desktop; min-height460px, padding64px20px mobile.

## Proposed adaptation to Dealyo (not existing brand rules)
Keep requested max1240, General Sans, orange #FE4A23 and square cards. Reuse one shared rail coordinate, 1px separators, aligned grid edges, two intro templates (centered and split), and measured16px grid gap as a candidate token. At max1240, two columns with16px gap become612px (derived proposal, not Firecrawl measurement). Use one-column mobile stacking. Evaluate shorter section spacing for a service landing; Firecrawl's143px intro padding plus245px divider modules creates substantial scroll.

Do not copy Firecrawl's1112px max,356px tablet clamp, rounded cards/buttons, curved line joins, developer terminal motifs or long decorative pauses. A square-card design should keep rail intersections square rather than inherit its SVG curves.

## Artifacts
- top-1440.png: desktop hero,1440×1000
- features-1440.png: intro/three-col tabs/code area,1440×1100
- top-390.png: mobile hero,390×1000
- features-390.png: mobile feature intro/tabs/stacked code,390×1300
- top-768.png: tablet narrow-container evidence
- full-1440.png/full-390.png: full-page captures (very tall; prefer crops)
- metrics-{1440,1280,1024,768,390}.json: computed CSS and rectangles for headings/ancestors/sections/grids
- inspect.cjs: reproducible measurement script