/* ============================================================
   Frameflow Creatives — Inner-page mobile polish (Phase 3)
   Shared rules for .ff-cl-page: FAQ, blog, legal, pricing, etc.
   Load after home-responsive.css on live pages.
   ============================================================ */

@media (max-width: 767px) {
  .frameflow-light.ff-cl-page .flat-spacing:first-of-type,
  .frameflow-light.ff-cl-page .ff-blog-hero,
  .frameflow-light.ff-cl-page .ff-article__hero {
    padding-top: clamp(96px, 22vw, 120px);
  }

  .frameflow-light.ff-cl-page .page-title,
  .frameflow-light.ff-cl-page .ff-case-study-hero__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .frameflow-light.ff-cl-page .ff-article,
  .frameflow-light.ff-cl-page .ff-case-study-body {
    padding-inline: 0;
  }

  .frameflow-light.ff-cl-page .ff-article p,
  .frameflow-light.ff-cl-page .ff-article li,
  .frameflow-light.ff-cl-page .ff-case-study-block__text {
    font-size: 16px;
    line-height: 1.65;
  }

  /* Blog + Contact — no horizontal overflow */
  .frameflow-light.ff-cl-page.blog-page,
  .frameflow-light.ff-contact-page {
    overflow-x: clip;
  }

  .frameflow-light.ff-cl-page .ff-blog-hero .heading-title,
  .frameflow-light.ff-contact-page .ff-contact-hero__title {
    overflow-wrap: anywhere;
  }

  .frameflow-light.ff-cl-page .container,
  .frameflow-light.ff-contact-page .container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 991px) {
  .frameflow-light.ff-cl-page .tf-header .header-inner {
    margin-inline: 12px !important;
    padding: 10px 12px !important;
    min-height: 52px;
  }

  .frameflow-light.ff-cl-page .tf-header .logo-site img {
    height: 32px;
    width: auto;
    max-width: min(168px, 46vw);
  }
}

@media (max-width: 480px) {
  .frameflow-light.ff-cl-page .tf-header .logo-site img {
    max-width: min(150px, 44vw);
  }
}