/* ============================================================ grid.css — Stripe-style page grid (verticals + horizontals) Scoped under . Linked from index.html. Load order: tokens → base → components → sections → grid (this file) 1. Vertical rails on .container 2. Section padding migrated onto direct .container 3. Top/bottom closure for the rails (nav-bottom, footer-bottom) 4. Trust bar — rail-to-rail box 5. Phone: drop the rails at ≤767px ============================================================ */ /* 1. Vertical rails ---------------------------------------- */ .page-grid .container { border-left: 1px solid var(--border); border-right: 1px solid var(--border); } /* 2. Migrate section vertical padding onto direct .container so stacked containers abut and the rails read as continuous. */ .page-grid .hero, .page-grid .bento, .page-grid .chapter, .page-grid .stories, .page-grid .research, .page-grid .integrations, .page-grid .compliance, .page-grid .enterprise, .page-grid .outro, .page-grid .footer, .page-grid .stage { padding-block: 0; } .page-grid .hero > .container { padding-block: 56px 80px; } .page-grid .bento > .container { padding-block: 56px 0; } .page-grid .chapter > .container { padding-block: 96px; } .page-grid .stories > .container { padding-block: 56px 0; } .page-grid .research > .container { padding-block: 56px 96px; } .page-grid .integrations > .container { padding-block: 56px 96px; } .page-grid .compliance > .container { padding-block: 56px 96px; } .page-grid .outro > .container { padding-block: 96px; } .page-grid .footer > .container { padding-block: 80px 0; } /* Enterprise section: top padding above the eyebrow/heading; the deck butts the container's bottom edge so its rail-to-rail verticals connect to the outro section's `border-top`. Mirrors the `.stage` precedent — putting any bottom padding here makes the verticals visually float above the next horizontal. Internal breathing lives in `.enterprise__card` padding. */ .page-grid .enterprise > .container { padding-block: 64px 0; } /* Each stage: top padding above the eyebrow/heading; the sub-deck butts the container's bottom edge so its bottom hairline lands on the rail. padding-bottom: 0 lets the next section's border-top sit flush against the sub-deck, making the vertical hairlines visually connect. */ .page-grid .stage > .container { padding-block: 64px 0; } /* 3. Close the grid: visible nav border and footer bottom. */ .page-grid .nav { border-bottom-color: var(--border); } /* The dark footer surface is its own page-bottom closure — no border-bottom on the section, and no rails inside the dark zone (rails would be invisible on a dark background and would clash with the brand/links inset). */ .page-grid .footer .container { border-left: 0; border-right: 0; } /* 4. Trust bar — rail-to-rail box -------------------------- */ .page-grid .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .page-grid .trust-bar { margin-top: 56px; } /* Negative margin pulls the box past the container's gutter so its left/right edges land on the rails. The matching padding rebuilds the gutter inside, keeping the marquee + fades clear of the rails. */ .page-grid .trust-bar__box { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-block: 1px solid var(--border); } .page-grid .trust-bar__marquee { margin-top: 0; height: 56px; padding-block: 18px; box-sizing: content-box; } /* 5. Phone ------------------------------------------------- The phone overrides in sections.css (@media max-width: 767px) change padding on the section elements — but we zeroed those out in step 2 above. Re-apply the phone vertical rhythm to the migrated containers so phone spacing still works. ---------------------------------------------------------- */ @media (max-width: 767px) { .page-grid .container { border-left: 0; border-right: 0; } .page-grid .hero > .container { padding-block: 56px; } .page-grid .bento > .container { padding-block: 40px 0; } .page-grid .chapter > .container { padding-block: 64px; } .page-grid .stories > .container { padding-block: 40px; } .page-grid .research > .container { padding-block: 40px 64px; } .page-grid .integrations > .container { padding-block: 40px 64px; } .page-grid .compliance > .container { padding-block: 40px 64px; } .page-grid .outro > .container { padding-block: 64px; } .page-grid .footer > .container { padding-block: 44px 0; } /* Phone stage: keep top padding; bottom is 0 so sub-deck still butts the edge. The sub-deck's phone fallback (sections.css) resets margin-inline and background. */ .page-grid .stage > .container { padding-block: 48px 0; } /* Phone enterprise: symmetric (48px / 64px) — matches compliance / integrations. */ .page-grid .enterprise > .container { padding-block: 48px 64px; } .page-grid .trust-bar__box { margin-inline: 0; } } /* ============================================================ Pricing page-grid padding ============================================================ */ /* Sections 1–6 are added to the zero-out list so rails stay continuous */ .page-grid .pricing-hero, .page-grid .pricing-calculator, .page-grid .pricing-trust-bar, .page-grid .pricing-features, .page-grid .pricing-explainer, .page-grid .pricing-faq { padding-block: 0; } /* Hero: standard hero container padding (mirrors .hero) */ .page-grid .pricing-hero > .container { padding-block: 56px 80px; } /* Calculator: generous top + bottom to let the cards breathe. Bottom is 0 — the trust-bar sits flush below. */ .page-grid .pricing-calculator > .container { padding-block: 64px 56px; } /* Trust bar on pricing: inherits standard trust-bar styling, but the section wrapper owns the outer block padding. The 56px top lives on the container (not the inner .trust-bar) so the margin can't collapse out of the section and break the page-grid rails. Bottom is 0 — the next section (pricing-features) owns the breathing room with its own 96px top padding, so this section ends flush. */ .page-grid .pricing-trust-bar > .container { padding-block: 56px 0; } .page-grid .pricing-trust-bar .trust-bar { margin-top: 0; } /* Feature comparison: generous top for the eyebrow+h2 head; bottom is 0 so the rail-to-rail deck butts the next section's border-top flush. */ .page-grid .pricing-features > .container { padding-block: 96px 0; } /* Man-hours Explained: symmetric 96px top/bottom — mirrors .compliance which also has 56px top / 96px bottom. Using 96px both sides here because the section has no eyebrow shortening the visual height. */ .page-grid .pricing-explainer > .container { padding-block: 96px; } /* FAQ: 96px desktop / 64px phone — matches outro, compliance, chapter spacing; section reads as a deliberate closing info block before outro. */ .page-grid .pricing-faq > .container { padding-block: 96px; } @media (max-width: 767px) { .page-grid .pricing-hero > .container { padding-block: 40px 56px; } .page-grid .pricing-calculator > .container { padding-block: 48px 40px; } .page-grid .pricing-trust-bar > .container { padding-block: 40px 0; } .page-grid .pricing-features > .container { padding-block: 64px 0; } .page-grid .pricing-explainer > .container { padding-block: 64px; } .page-grid .pricing-faq > .container { padding-block: 64px; } } /* ============================================================ Enterprise page-grid padding ============================================================ */ /* Zero out section-level padding (standard page-grid contract) so stacked containers abut and the rails read as continuous. */ .page-grid .problem-stack, .page-grid .enterprise-trust-bar, .page-grid .enterprise-integrations { padding-block: 0; } /* Problem-stack: symmetric 96px — matches .compliance / .outro rhythm. */ .page-grid .problem-stack > .container { padding-block: 96px; } /* Trust bar wrapper: top padding owns the section break to the hero above; bottom is 0 so the next section's border-top sits flush. Mirrors `.pricing-trust-bar`. The 56px lives on the container (not the inner .trust-bar) so margin can't collapse out of the section. */ .page-grid .enterprise-trust-bar > .container { padding-block: 56px 0; } .page-grid .enterprise-trust-bar .trust-bar { margin-top: 0; } /* Enterprise Integrations: 56px top / 96px bottom — mirrors `.compliance`, the structural twin (eyebrow + h2 + lead on the left, cluster on the right). The 56px keeps the eyebrow row from reading top-heavy under the section's border-top. */ .page-grid .enterprise-integrations > .container { padding-block: 56px 96px; } @media (max-width: 767px) { .page-grid .problem-stack > .container { padding-block: 64px; } .page-grid .enterprise-trust-bar > .container { padding-block: 40px 0; } .page-grid .enterprise-integrations > .container { padding-block: 40px 64px; } } /* ============================================================ Contact + Legal page-grid padding ============================================================ */ /* Zero out section-level padding (standard page-grid contract) */ .page-grid .contact, .page-grid .legal { padding-block: 0; } /* Contact: symmetric 96px — mirrors .compliance / .outro rhythm. The form card adds its own internal breathing via padding: 32px. */ .page-grid .contact > .container { padding-block: 96px; } /* Legal: slightly wider top padding to compensate for the lack of a hero section above (page opens directly under the nav). */ .page-grid .legal > .container { padding-block: 96px; } @media (max-width: 767px) { .page-grid .contact > .container { padding-block: 64px; } .page-grid .legal > .container { padding-block: 64px; } } /* ============================================================ Blog + research page-grid padding ============================================================ */ /* Top padding above the heading; the rail-to-rail deck butts the container's bottom edge so the deck's bottom hairline lands on the outro section's `border-top`. Mirrors the `.stage` / `.enterprise` precedent so vertical hairlines visually connect edge-to-edge. */ .page-grid .blog-index > .container { padding-block: 96px 0; } .page-grid .research-index > .container { padding-block: 96px 0; } .page-grid .post > .container { padding-block: 96px 80px; } @media (max-width: 767px) { .page-grid .blog-index > .container { padding-block: 64px 0; } .page-grid .research-index > .container { padding-block: 64px 0; } .page-grid .post > .container { padding-block: 64px 56px; } }