/* RD-932 — the on-page demo section of /landing/v3/ (#demo, right after the hero). Kept OUT of the imported Next build's hashed stylesheet (_next/static/css/index.*.css) so the generator's file stays byte-identical and a re-import stays a clean replace; loaded after it from , so these class rules win on equal specificity. Palette, radii, type scale and section rhythm mirror the neighbouring .hero / .pricing-card / .end-section rules of that stylesheet. The widget's own styles live in /widget/demo.css (built from admin-app/src/widget/demo.css). */ .demo-section { padding-block: 0 72px; } .demo-head { max-width: 640px; margin: 0 auto 26px; text-align: center; } .demo-head .eyebrow { justify-content: center; } .demo-head h2 { letter-spacing: -1.9px; margin: 16px 0 14px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; line-height: 1.15; } .demo-head .section-intro { margin: 0 auto; max-width: 560px; } .demo-card { background: #fff; border: 1px solid #e2daed; border-radius: 15px; padding: 30px 28px 22px; max-width: 760px; margin: 0 auto; box-shadow: 0 18px 45px #44375110; } /* Reserve the idle form's height so the section does not jump when the widget bundle (deferred module) mounts a beat after first paint. */ .demo-root { min-height: 96px; } .demo-note { justify-content: center; margin-top: 16px; } @media (max-width: 800px) { .demo-section { padding-bottom: 48px; } .demo-card { padding: 20px 16px 16px; } } @media (max-width: 480px) { .demo-head h2 { letter-spacing: -1.2px; } }