/* Fixes for responsive bugs that exist on the published Framer site too — both are
   visible on a 390px viewport, and both were reported against the live site.
   Framer's breakpoints: phone <=809px, tablet 810-1199px, desktop >=1200px. */

/* 1. The hero's rotating word ("AI CHATBOT FOR YOUR <word>") is a code component that
      emits the desktop font size, 96px, at every breakpoint. Beside an h1 that is 48px on
      phone and 64px on tablet it renders at 2x / 1.5x and runs off both edges — the word
      appears clipped and oversized until the first rotation. Match it to the heading. */
@media (max-width: 809px) {
  .framer-1nij2ej-container span { font-size: 48px !important; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  .framer-1nij2ej-container span { font-size: 64px !important; }
}

/* 2. Text layers authored at a fixed width keep `white-space: pre` on the *container*,
      which is `width: auto; flex: none` and therefore sizes to max-content. "AI chatbot
      trained on your own website data" ends up 440px wide inside a 358px column at 390px
      and pushes the whole page 25px sideways. The rule has to relax the container — a
      heading given a 440px box will not wrap on its own.

      Scoped with :has() to containers holding a heading: buttons and inline labels rely
      on `pre` to stay on one line, and relaxing those clipped the hero CTA. */
@media (max-width: 809px) {
  [data-framer-component-type="RichTextContainer"]:has(> :is(h1, h2, h3, h4)),
  [data-framer-component-type="RichTextContainer"]:has(> :is(h1, h2, h3, h4)) * {
    white-space: pre-wrap;
    max-width: 100%;
  }
}