@charset "UTF-8"; /* =========================================================================== Gutter Boys — survey message styling PASTE INTO GHL, NOT INTO THE LANDING PAGE. Where: Sites -> Surveys -> this survey -> Styles / Custom CSS. Why it cannot live in the landing page: the survey renders inside a cross-origin iframe on api.leadconnectorhq.com. Nothing in the parent document can reach into it — not CSS, not JS. This has to be served by GHL with the survey itself. What it fixes: GHL renders the disqualification / thank-you message with `padding: 0` and `width: fit-content` on the white card, so the text runs straight into the rounded corners and the box shrink-wraps the longest line. Every rule below carries !important because the values it is overriding are inline styles on the elements themselves. Structure being targeted (verified live, not guessed): #_builder-form .thank-you-message width: fit-content; overflow: auto > div display: inline-block; radius 10px > div background #fff; padding: 0; width: fit-content

heading

body copy

=========================================================================== */ /* Let the message use the width it is given rather than shrink-wrapping. */ #_builder-form .thank-you-message, #_builder-form .thank-you-message > div { width: 100% !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; overflow: visible !important; box-sizing: border-box !important; } /* The white card. This is the one doing the damage: padding:0 is why the copy touches the border radius. */ #_builder-form .thank-you-message > div > div { width: 100% !important; max-width: 100% !important; padding: 30px 32px !important; box-sizing: border-box !important; border-radius: 14px !important; background: #ffffff !important; border: 1px solid #e9e9e9 !important; box-shadow: 0 12px 34px rgba(12, 49, 51, 0.09) !important; line-height: 1.65 !important; color: #565969 !important; font-family: Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; text-align: left !important; } /* Body copy. The inline padding-left:0!important is already there; what is missing is vertical rhythm and a readable colour. */ #_builder-form .thank-you-message p { margin: 0 0 15px !important; padding: 0 !important; font-size: 16px !important; line-height: 1.65 !important; color: #565969 !important; text-align: left !important; } #_builder-form .thank-you-message p:last-child { margin-bottom: 0 !important; } /* First line is the heading. GHL emits it as inside the first
, so it is styled as a block rather than replaced. */ #_builder-form .thank-you-message p:first-child { margin-bottom: 12px !important; } #_builder-form .thank-you-message p:first-child strong { display: block !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; color: #0c3133 !important; } /* The link is the only action on this screen, so it should look like one. Teal pill with dark ink — the same button as the landing page, and the same 6.4:1 contrast rather than the 2.2:1 white-on-teal the brand site uses. */ #_builder-form .thank-you-message a { display: inline-block !important; margin-top: 6px !important; padding: 15px 30px !important; background: #7eb9bc !important; color: #0c3133 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; border-radius: 50px !important; transition: background 0.3s ease-in-out !important; } #_builder-form .thank-you-message a:hover { background: #5da0a3 !important; } #_builder-form .thank-you-message a:focus-visible { outline: 3px solid #0c3133 !important; outline-offset: 2px !important; } /* Narrow phones: keep the card off the edges. */ @media (max-width: 480px) { #_builder-form .thank-you-message > div > div { padding: 22px 20px !important; } #_builder-form .thank-you-message p:first-child strong { font-size: 21px !important; } }

What is the address of the project?

Who are we preparing an estimate for?