/* =============================================================================
   Frameflow Creatives — Brand Polish Layer
   -----------------------------------------------------------------------------
   Purpose:
   1. Lock the site to the EXACT Brand Guidelines 2026 palette.
   2. Propagate the Frameflow Creatives "chrome" (sticky header, footer CTA card,
      section heads, light/dark rhythm, premium buttons) to every inner page
      via the `ff-cl-page` body class. The home page keeps its own approved
      design (incl. the protected hero) and is intentionally NOT scoped here.

   Brand palette (per PDF):
     Primary   #13072D  (headings)
     Secondary #432692  (buttons / CTA / accents)
     Accent    #AB05E4  (emphasis)
     Body      #232323  (paragraph text)
   Type: Inter (headings) · Manrope (body)

   Loaded LAST in <head> so it wins over page-level inline <style> blocks.
   ========================================================================== */

:root {
  /* Brand Guidelines 2026 tokens */
  --ff-indigo: #13072D;
  --ff-purple: #432692;
  --ff-magenta: #AB05E4;
  --ff-ink: #232323;
  --ff-white: #FFFFFF;
  --ff-indigo-2: #1C0E3D;
  --ff-indigo-3: #241452;
  --ff-font-heading: "Inter", sans-serif;
  --ff-font-body: "Manrope", sans-serif;
  /* Legacy theme aliases — PDF brand: Inter (headings) · Manrope (body) */
  --font-main: var(--ff-font-heading);
  --font-body: var(--ff-font-body);
  --font-heading: var(--ff-font-heading);
  --font_instrument: var(--ff-font-heading);

  /* Reusable brand tokens (aliases) */
  --ff-primary: var(--ff-indigo);
  --ff-secondary: var(--ff-purple);
  --ff-accent: var(--ff-magenta);
  --ff-body: var(--ff-ink);
  --ff-ink-900: #0f0826;
  --ff-grad-cta: linear-gradient(135deg, #432692 0%, #7a23c8 55%, #ab05e4 100%);
  --ff-grad-cta-hover: linear-gradient(135deg, #4d2ba6 0%, #8a2ad6 55%, #b81ef0 100%);
  --ff-grad-text: linear-gradient(120deg, #13072d 0%, #432692 55%, #ab05e4 110%);
  --ff-grad-dark: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(171, 5, 228, 0.28) 0%, transparent 55%),
                  radial-gradient(ellipse 60% 70% at 0% 100%, rgba(67, 38, 146, 0.55) 0%, transparent 52%),
                  linear-gradient(135deg, #160a33 0%, #2a1366 45%, #432692 120%);
  --ff-dark-bg: #160a33;
  --ff-on-dark-eyebrow: #c46cf2;
  --ff-radius-lg: 22px;
  --ff-radius-md: 16px;
  --ff-shadow-sm: 0 4px 14px -6px rgba(19, 7, 45, 0.14);
  --ff-shadow-md: 0 18px 44px -22px rgba(19, 7, 45, 0.45);
  --ff-shadow-lg: 0 28px 64px -28px rgba(19, 7, 45, 0.55);

  /* Align global brand variables to the exact palette (cascades to all pages;
     home hero uses literal colors so it stays untouched). */
  --heading: #13072D;
  --primary: #13072D;
  --text-body: #232323;
  --brand: #432692;
  --brand-accent: #AB05E4;
  --accent-lime: #AB05E4; /* retire off-brand lime accent */
}

/* -----------------------------------------------------------------------------
   Site-wide typography — Client PDF brand: Inter (headings) · Manrope (body)
   -------------------------------------------------------------------------- */
.frameflow-light {
  font-family: var(--ff-font-body);
}

.frameflow-light h1,
.frameflow-light h2,
.frameflow-light h3,
.frameflow-light h4,
.frameflow-light h5,
.frameflow-light h6,
.frameflow-light .h1,
.frameflow-light .h2,
.frameflow-light .h3,
.frameflow-light .h4,
.frameflow-light .h5,
.frameflow-light .h6,
.frameflow-light .heading-title,
.frameflow-light .title,
.frameflow-light .box-title,
.frameflow-light .widget-title,
.frameflow-light .text-display-1,
.frameflow-light .text-display-2,
.frameflow-light .font-main,
.frameflow-light .tf-btn,
.frameflow-light .tf-btn-2 {
  font-family: var(--ff-font-heading);
}

.frameflow-light .font-body,
.frameflow-light p,
.frameflow-light .text,
.frameflow-light .text-body-2,
.frameflow-light .text-body-3,
.frameflow-light li,
.frameflow-light label,
.frameflow-light input,
.frameflow-light select,
.frameflow-light textarea {
  font-family: var(--ff-font-body);
}

/* -----------------------------------------------------------------------------
   1. Accessibility — visible, on-brand focus states for keyboard users
   -------------------------------------------------------------------------- */
.frameflow-light a:focus-visible,
.frameflow-light button:focus-visible,
.frameflow-light input:focus-visible,
.frameflow-light select:focus-visible,
.frameflow-light textarea:focus-visible,
.frameflow-light .tf-btn:focus-visible,
.frameflow-light .tf-btn-2:focus-visible,
.frameflow-light .ff-cl-cta:focus-visible {
  outline: 3px solid rgba(171, 5, 228, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =============================================================================
   INNER PAGES ONLY  ·  scoped to .ff-cl-page (added to every live inner page)
   ========================================================================== */

/* Brand tokens reasserted on inner pages (defensive against page inline styles) */
.frameflow-light.ff-cl-page {
  --heading: #13072D;
  --primary: #13072D;
  --text-body: #232323;
  --brand: #432692;
  --brand-accent: #AB05E4;
}

/* -----------------------------------------------------------------------------
   2. Header — Frameflow Creatives sticky pill header (home + inner pages)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .tf-header--cl,
.frameflow-light.home-page .tf-header--cl {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 70%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.frameflow-light.ff-cl-page .tf-header--cl .header-inner,
.frameflow-light.home-page .tf-header--cl .header-inner {
  background: radial-gradient(ellipse 80% 100% at 0% 50%, rgba(171, 5, 228, 0.05) 0%, transparent 55%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 244, 248, 0.92) 100%);
  border: 1px solid rgba(67, 38, 146, 0.1);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(19, 7, 45, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.frameflow-light.ff-cl-page .tf-header--cl.is-scrolled .header-inner,
.frameflow-light.home-page .tf-header--cl.is-scrolled .header-inner {
  box-shadow: 0 10px 28px rgba(19, 7, 45, 0.14);
}
@media (min-width: 992px) {
  .frameflow-light.ff-cl-page .tf-header--cl .header-inner,
  .frameflow-light.home-page .tf-header--cl .header-inner {
    max-width: min(1120px, 100% - 32px);
    margin-inline: auto;
    padding: 12px 24px;
    min-height: 60px;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .item-link,
  .frameflow-light.home-page .tf-header--cl .item-link {
    color: var(--heading);
    -webkit-text-fill-color: var(--heading);
    background-image: none;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .item-link:hover,
  .frameflow-light.ff-cl-page .tf-header--cl .item-link.active,
  .frameflow-light.home-page .tf-header--cl .item-link:hover,
  .frameflow-light.home-page .tf-header--cl .item-link.active {
    color: var(--brand);
    -webkit-text-fill-color: var(--brand);
    background-image: none;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone,
  .frameflow-light.home-page .tf-header--cl .header-phone {
    color: var(--heading);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(67, 38, 146, 0.1);
    border-radius: 999px;
    padding: 8px 16px;
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone .icon,
  .frameflow-light.home-page .tf-header--cl .header-phone .icon {
    color: var(--brand);
  }
  .frameflow-light.ff-cl-page .tf-header--cl .header-phone:hover,
  .frameflow-light.home-page .tf-header--cl .header-phone:hover {
    color: var(--brand);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(67, 38, 146, 0.22);
  }
  .frameflow-light.ff-cl-page .tf-header--cl .logo-site img,
  .frameflow-light.home-page .tf-header--cl .logo-site img {
    height: 32px;
    max-width: min(190px, 22vw);
  }
}
.frameflow-light.ff-cl-page .tf-header--cl .mobile-menu,
.frameflow-light.home-page .tf-header--cl .mobile-menu {
  color: var(--heading);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(67, 38, 146, 0.12);
}

/* -----------------------------------------------------------------------------
   3. Buttons — exact-brand premium CTAs on inner pages
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .tf-btn,
.frameflow-light.ff-cl-page .header-cta {
  background-color: #432692;
  background-image: var(--ff-grad-cta);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
              0 2px 4px rgba(19, 7, 45, 0.12),
              0 12px 26px -10px rgba(67, 38, 146, 0.5);
}
.frameflow-light.ff-cl-page .tf-btn:hover,
.frameflow-light.ff-cl-page .header-cta:hover {
  background-image: var(--ff-grad-cta-hover);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
              0 6px 12px rgba(19, 7, 45, 0.16),
              0 18px 38px -12px rgba(171, 5, 228, 0.42);
}
.frameflow-light.ff-cl-page .tf-btn-2 {
  background: #fff;
  border: 1px solid rgba(67, 38, 146, 0.18);
  color: var(--primary);
  border-radius: 12px;
  box-shadow: var(--ff-shadow-sm);
}
.frameflow-light.ff-cl-page .tf-btn-2:hover {
  border-color: rgba(171, 5, 228, 0.4);
  color: var(--brand);
  background: #faf8ff;
}

/* Carousel nav — hover overlay color only (brand purple; default button unchanged) */
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper::before,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper::before {
  background-color: #432692;
  background-image:
    radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.22) 0%, transparent 52%),
    linear-gradient(168deg, #5840b8 0%, #432692 48%, #211247 100%);
}
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper:hover,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper:hover {
  color: #fff;
}
.frameflow-light.ff-cl-page .group-btn-slider .nav-prev-swiper:hover::before,
.frameflow-light.ff-cl-page .group-btn-slider .nav-next-swiper:hover::before {
  background-color: #4d2c9e;
  background-image:
    radial-gradient(100% 100% at 30% 8%, rgba(255, 255, 255, 0.28) 0%, transparent 52%),
    linear-gradient(168deg, #6d28d9 0%, #432692 42%, #211247 100%);
}

/* -----------------------------------------------------------------------------
   4. Typography — brand gradient headline text on inner pages
   -------------------------------------------------------------------------- */
/* Solid brand ink on light surfaces — match home section headings (#13072D) */
.frameflow-light.ff-cl-page .text-gradient-1,
.frameflow-light.ff-cl-page .text-gradient-2,
.frameflow-light.ff-cl-page .text-gradient-3,
.frameflow-light.ff-cl-page .ff-heading-brand,
.frameflow-light.ff-cl-page .heading-title.text-gradient-1,
.frameflow-light.ff-cl-page .heading-title.text-gradient-2,
.frameflow-light.ff-cl-page .heading-title.text-gradient-3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--ff-indigo, #13072d) !important;
  -webkit-text-fill-color: var(--ff-indigo, #13072d) !important;
}

/* Eyebrow labels — consistent brand pill across inner page section heads */
.frameflow-light.ff-cl-page .heading-sub,
.frameflow-light.ff-cl-page .heading-section .heading-sub {
  display: inline-block;
  color: var(--brand);
  font-family: var(--ff-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   5. Inner-page hero rhythm (section-hero v1 / v2)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .section-hero.v1,
.frameflow-light.ff-cl-page .section-hero.v2 {
  padding-top: clamp(60px, 9vw, 120px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.frameflow-light.ff-cl-page .section-hero .content-wrap .text {
  color: var(--secondary);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   6. Section rhythm + light/dark banding for inner pages
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .ff-section--light {
  background: #faf9fc;
}
.frameflow-light.ff-cl-page .ff-section--dark {
  background: var(--ff-dark-bg);
  color: rgba(255, 255, 255, 0.88);
}
.frameflow-light.ff-cl-page .ff-section--dark .heading-title,
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__title,
.frameflow-light.ff-cl-page .ff-section--dark .ff-ref-title {
  color: #fff;
}
.frameflow-light.ff-cl-page .ff-section--dark .heading-sub,
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__eyebrow,
.frameflow-light.ff-cl-page .ff-section--dark .ff-ref-eyebrow {
  color: var(--ff-on-dark-eyebrow);
}
.frameflow-light.ff-cl-page .ff-section--dark .ff-cl-section-head__desc {
  color: rgba(255, 255, 255, 0.68);
}

/* -----------------------------------------------------------------------------
   7. Card system — consistent radius / shadow / hover across inner components
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .box-contact-item,
.frameflow-light.ff-cl-page .ff-service-lists .service-item,
.frameflow-light.ff-cl-page .features-item,
.frameflow-light.ff-cl-page .box-white {
  border-radius: var(--ff-radius-md);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.frameflow-light.ff-cl-page .box-contact-item:hover,
.frameflow-light.ff-cl-page .features-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--ff-shadow-md);
}
.frameflow-light.ff-cl-page .box-contact-item i {
  color: var(--brand);
}

/* -----------------------------------------------------------------------------
   8. Footer — premium Frameflow Creatives CTA card (base markup, brand colors)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .ff-site-footer__cta-wrap {
  padding: 0 0 64px;
  background: linear-gradient(180deg, #eeecf3 0%, #e8e4f0 100%);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(32px, 5vw, 52px);
  border: none;
  border-radius: clamp(20px, 3vw, 30px);
  background: var(--ff-grad-dark);
  box-shadow: var(--ff-shadow-lg);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-card::after {
  display: none;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-eyebrow {
  color: var(--ff-on-dark-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-title span {
  display: block;
  color: var(--ff-on-dark-eyebrow);
  background: none;
  -webkit-text-fill-color: var(--ff-on-dark-eyebrow);
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2 {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}
.frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   9. Forms — unify legacy form-contact look with the modern ff-contact-form
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .form-contact input,
.frameflow-light.ff-cl-page .form-contact textarea,
.frameflow-light.ff-cl-page .ff-contact-form input,
.frameflow-light.ff-cl-page .ff-contact-form textarea,
.frameflow-light.ff-cl-page .form-contact .nice-select {
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.frameflow-light.ff-cl-page .form-contact input:focus,
.frameflow-light.ff-cl-page .form-contact textarea:focus,
.frameflow-light.ff-cl-page .ff-contact-form input:focus,
.frameflow-light.ff-cl-page .ff-contact-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(67, 38, 146, 0.12);
}

/* -----------------------------------------------------------------------------
   10. Portfolio filter buttons — brand pills (legacy filter-btn markup)
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .filter-btn,
.frameflow-light.ff-cl-page .portfolio-filters .filter-btn {
  border-radius: 999px;
  border: 1px solid rgba(67, 38, 146, 0.16);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.frameflow-light.ff-cl-page .filter-btn.active,
.frameflow-light.ff-cl-page .filter-btn:hover {
  background: var(--ff-grad-cta);
  border-color: transparent;
  color: #fff;
}

/* -----------------------------------------------------------------------------
   11. Accordion (FAQ) — brand active state
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .accordion-asked-item,
.frameflow-light.ff-cl-page .accordion-collapse {
  border-radius: var(--ff-radius-md);
}
.frameflow-light.ff-cl-page .accordion-button:not(.collapsed) {
  color: var(--brand);
}

/* -----------------------------------------------------------------------------
   12. Legal / prose pages — readable, on-brand typographic rhythm
   -------------------------------------------------------------------------- */
.frameflow-light.ff-legal-page {
  background: linear-gradient(180deg, #faf9fc 0%, #fff 20%, #fff 100%);
}

.frameflow-light.ff-legal-page .section-hero.v1.ff-legal-hero {
  min-height: unset !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.frameflow-light.ff-legal-page .ff-legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 12px 16px 0;
  margin-bottom: 0;
}

.frameflow-light.ff-legal-page .ff-legal-hero__bg {
  position: absolute;
  inset: 12px 16px 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 92% 8%, rgba(188, 40, 245, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 50% 60% at 4% 88%, rgba(117, 85, 245, 0.16) 0%, transparent 55%),
    linear-gradient(155deg, #f5f1ff 0%, #ebe4ff 42%, #f8f6fc 100%);
  border: 1px solid rgba(117, 85, 245, 0.12);
  box-shadow: 0 18px 48px -28px rgba(30, 21, 80, 0.28);
}

.frameflow-light.ff-legal-page .ff-legal-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(117, 85, 245, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 85, 245, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 20%, transparent 100%);
  opacity: 0.65;
}

.frameflow-light.ff-legal-page .ff-legal-hero .container {
  position: relative;
  z-index: 1;
}

.frameflow-light.ff-legal-page .ff-legal-hero__content {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 20px 52px;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(30, 21, 80, 0.52);
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s ease;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb a:hover {
  color: #5a2bf0;
}

.frameflow-light.ff-legal-page .ff-legal-hero__breadcrumb-sep {
  color: rgba(30, 21, 80, 0.28);
}

.frameflow-light.ff-legal-page .ff-legal-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a2bf0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(117, 85, 245, 0.18);
  box-shadow: 0 8px 24px -16px rgba(90, 43, 240, 0.35);
}

.frameflow-light.ff-legal-page .ff-legal-hero__badge .icon {
  font-size: 14px;
}

.frameflow-light.ff-legal-page .ff-legal-hero__title {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1e1550;
}

.frameflow-light.ff-legal-page .ff-legal-hero__meta {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 21, 80, 0.58);
}

.frameflow-light.ff-legal-page .ff-legal-hero__lead {
  margin: 0 auto 28px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(30, 21, 80, 0.72);
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1e1550;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(117, 85, 245, 0.12);
}

.frameflow-light.ff-legal-page .ff-legal-hero__highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
  color: #7555f5;
  background: rgba(117, 85, 245, 0.1);
}

.frameflow-light.ff-cl-page .privacy-content h2,
.frameflow-light.ff-cl-page .privacy-content h3 {
  color: var(--heading);
  margin-top: 1.6em;
}
.frameflow-light.ff-cl-page .privacy-content p,
.frameflow-light.ff-cl-page .privacy-content li {
  color: var(--text-body);
  line-height: 1.8;
}
.frameflow-light.ff-cl-page .privacy-content a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer legal links — background-clip:text + transparent fill breaks clicks in WebKit */
.frameflow-light .ff-site-footer__legal a {
  color: rgba(245, 244, 248, 0.55) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.frameflow-light .ff-site-footer__legal a:hover {
  color: rgba(245, 244, 248, 0.95) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Header nav — gradient text + hover overlays can block clicks in WebKit */
.frameflow-light .tf-header .nav-menu-main .item-link {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.frameflow-light .menu-item.has-child::after {
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   13. Links & misc accents — brand-true
   -------------------------------------------------------------------------- */
.frameflow-light.ff-cl-page .text-brand {
  color: var(--brand);
}
.frameflow-light.ff-cl-page .link-underline:hover {
  color: var(--brand);
}

/* -----------------------------------------------------------------------------
   14. Responsive safety nets
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .frameflow-light.ff-cl-page .ff-site-footer__cta-card {
    padding: 28px;
  }
}
@media (max-width: 575px) {
  .frameflow-light.ff-cl-page .section-hero.v1,
  .frameflow-light.ff-cl-page .section-hero.v2 {
    padding-top: 96px;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__content {
    padding: 32px 12px 40px;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__highlights {
    flex-direction: column;
    align-items: stretch;
  }
  .frameflow-light.ff-legal-page .ff-legal-hero__highlight {
    justify-content: center;
  }
  .frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn,
  .frameflow-light.ff-cl-page .ff-site-footer__cta-actions .tf-btn-2 {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frameflow-light.ff-cl-page * {
    scroll-behavior: auto !important;
  }
}

/* Homepage clay overrides removed — restored via home-hero.css + styles.css */

/* SEO content hub & service insights */
.ff-service-insights__list,
.ff-home-insights .tf-grid-layout { list-style: none; }
.ff-service-insights__list { padding: 0; margin: 0; }
.ff-service-insights__list li { margin-bottom: 12px; }
.ff-service-insights__list a { font-weight: 600; text-decoration: underline; }
.ff-article-author { margin: 2rem 0; padding: 1.5rem; border-radius: 12px; background: rgba(30, 21, 80, 0.04); }
.ff-home-insights .tf-grid-layout { gap: 24px; align-items: stretch; }
.ff-home-insights .article-blog { display: flex; flex-direction: column; height: 100%; }
.ff-home-insights .article-blog .blog-image { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ff-home-insights .article-blog .blog-image picture,
.ff-home-insights .article-blog .blog-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ff-home-insights .article-blog .blog-content { flex: 1; padding-top: 12px; }

/* Home — Resources / blog journal */
.frameflow-light.home-page .ff-blog-journal {
  padding-top: 72px;
  padding-bottom: 80px;
  background: #faf9fd;
  border-top: 1px solid rgba(85, 66, 176, 0.08);
}

.frameflow-light.home-page .ff-blog-journal__grid {
  gap: 28px 22px;
}

@media (min-width: 992px) {
  .frameflow-light.home-page .ff-blog-journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .frameflow-light.home-page .ff-blog-journal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.frameflow-light.home-page .ff-blog-journal__card {
  height: 100%;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(85, 66, 176, 0.1);
  background: #fff;
  box-shadow: 0 10px 28px -18px rgba(42, 27, 110, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.frameflow-light.home-page .ff-blog-journal__card:hover {
  border-color: rgba(85, 66, 176, 0.22);
  box-shadow: 0 16px 36px -16px rgba(42, 27, 110, 0.28);
  transform: translateY(-2px);
}

.frameflow-light.home-page .ff-blog-journal__media {
  margin-bottom: 14px;
  border-radius: 16px;
}

.frameflow-light.home-page .ff-blog-journal__mobile-cta {
  margin-top: 28px;
  text-align: center;
}

/* ── Hide section label pills entirely (client request) ── */
.heading-sub,
.heading-section .heading-sub,
.heading-section.center .heading-sub,
.frameflow-light.home-page .ff-growth-engine__eyebrow-badge,
.frameflow-light.home-page .ff-blog-journal__eyebrow-badge {
  display: none !important;
}

.section-about-us .col-left .sub .dot,
.ff-hero__badge .dot {
  display: none !important;
}
