/*
 * Modern-page compatibility layer
 *
 * Applies the current ccMonet visual system to legacy Webflow pages without
 * changing their editorial content, forms, URLs, or CMS bindings. Page-specific
 * layouts can be simplified over time, but these rules establish one type,
 * colour, spacing and action language immediately.
 */

.site-modern {
  background: var(--surface-secondary);
  color: var(--color-gray-800);
}

.site-modern :is(main, section, article) {
  box-sizing: border-box;
}

/* Several legacy pages make the body a centred flex column. Keep injected
   breadcrumbs full width so they retain the shared component's container. */
.site-modern .page-breadcrumb {
  align-self: stretch;
  flex: 0 0 auto;
  width: 100%;
}

.site-modern .page-breadcrumb-inner {
  width: min(var(--container-max), calc(100% - (var(--container-px) * 2))) !important;
  margin: 0 auto !important;
}

/* Pages whose Webflow section names are unique still receive the same outer
   page rhythm. Modals and contact overlays are intentionally excluded. */
.site-modern > section:first-of-type {
  padding: var(--space-20) var(--container-px) var(--space-16) !important;
  background: var(--surface-primary) !important;
}

.site-modern > section:not(:first-of-type):not(.section-27):not(.talk-to-an-expert):not(.contact-us) {
  padding: var(--section-py) var(--container-px) !important;
  border-top: 1px solid var(--border-light);
  background: var(--surface-secondary) !important;
}

.site-modern > section:first-of-type > :is(div, .w-layout-blockcontainer) {
  width: min(var(--container-max), 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.site-modern :is(.section1, .section1-copy, .section1-copy2, .section1-copy-copy,
  .section1-2, .section1-3, .frame-133909) {
  padding-top: var(--space-20) !important;
  padding-bottom: var(--space-16) !important;
  background: var(--surface-primary) !important;
}

.site-modern :is(.frame-81, .frame-134430, .frame-134818) {
  width: min(var(--container-max), calc(100% - (var(--container-px) * 2))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Shared hero treatment for product, service, sector, price and company pages. */
.site-modern :is(.frame-81, .frame-134430, .frame-134818) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr) !important;
  gap: clamp(var(--space-8), 6vw, var(--space-20)) !important;
  align-items: center !important;
}

.site-modern :is(.frame-82, .frame-134431, .frame-134819, .frame-134820) {
  max-width: 680px;
}

.site-modern :is(.text-214, .text-230, .text-295, .new-h1, .heading-5, .heading-34) {
  max-width: 720px;
  margin: var(--space-3) 0 var(--space-4) !important;
  color: var(--color-gray-900) !important;
  font-family: var(--type-heading-font) !important;
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)) !important;
  font-weight: var(--type-heading-weight) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tighter) !important;
  text-align: left !important;
}

.site-modern .hero-keyword {
  color: var(--color-primary-500) !important;
}

.site-modern .page-hero-eyebrow {
  margin: 0;
  color: var(--color-primary-500);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

/* Match AI CFO's eyebrow-to-heading rhythm. Legacy hero copy wrappers are
   flex columns with their own row gap, so the shared eyebrow must own the
   12px spacing rather than stacking three independent margins/gaps. */
.site-modern :is(.frame-82, .frame-134431, .frame-134819, .frame-134820):has(> .page-hero-eyebrow) {
  row-gap: var(--space-3) !important;
}

.site-modern .page-hero-eyebrow + h1 {
  margin-top: 0 !important;
}

/* Accounting Firms uses a full-width product reveal rather than the usual
   split Hero. Its legacy children had mixed alignment after the global type
   migration, so keep the editorial copy, proof marks and product image on one
   deliberate centre line. */
.site-modern .frame-133909 {
  align-items: center !important;
  gap: var(--space-6) !important;
  text-align: center;
}

.site-modern .frame-133909 > .new-h1 {
  max-width: 880px;
  margin: 0 !important;
  text-align: center !important;
}

.site-modern .frame-133909 > .experience-effortless-accounting-with-a-smart-ai-powered-agent-perfected-by-trusted-experts-designed {
  max-width: 720px;
  text-align: center !important;
}

.site-modern .frame-133909 > .form-block-2 {
  width: auto !important;
}

.site-modern .frame-133909 > .frame-83 {
  justify-content: center !important;
  width: min(100%, var(--container-max));
  margin-bottom: 0 !important;
}

.site-modern .frame-133909 > img {
  width: min(100%, var(--container-max));
  height: auto;
}

/* Keep the testimonial carousel's off-canvas slides from widening the page. */
.site-modern .section3 {
  overflow: hidden;
}

/* Affiliate Program is a card Hero. It should sit on the standard white page
   surface without the legacy top margin being added after the fixed header. */
body.site-modern > section.section-29:not(.section-27):not(.talk-to-an-expert):not(.contact-us) {
  margin-top: 0 !important;
  background: var(--surface-primary) !important;
}

/* Affiliate Hero uses the image itself as its visual anchor; the inherited
   green panel makes this page feel unlike the rest of the new site. */
.site-modern .section-29 .section-25 {
  background: transparent !important;
  border-radius: 0;
}

.site-modern .section-29 .heading-1-invoice-ocr {
  color: var(--color-primary-500);
}

.site-modern .section-29 .heading-1-invoice-ocr-2 {
  color: var(--color-gray-900);
}

.site-modern .section-29 .text-118 {
  color: var(--color-gray-500);
}

.site-modern .section-29 .button-v2 {
  background: var(--color-primary-500);
  color: var(--surface-primary);
}

/* The source references three retired document files here. They render only
   broken-image alt text while reserving a full image row, which pushes the
   sections that follow out of position. */
.site-modern .background-9 > .frame-134836:last-child {
  display: none;
}

/* These three legacy sections cap themselves at 1440px without centring. On
   wider screens they therefore sit against the left edge, unlike the sections
   above them. Keep the sections full width and let their children define the
   shared centred content measure. */
.site-modern :is(.background-9, .background-11, .frame-134838) {
  width: 100% !important;
  max-width: none !important;
}

.site-modern :is(.text-226, .text-231, .text-267, .text-268,
  .no-more-spreadsheets-no-more-tax-time-chaos-just-clarity-managing-finances-shouldnt-slow-you-down-wi,
  .experience-effortless-accounting-with-a-smart-ai-powered-agent-perfected-by-trusted-experts-designed) {
  max-width: 650px;
  margin: 0 !important;
  color: var(--color-gray-500) !important;
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  text-align: left !important;
}

.site-modern :is(.button-style-29, .button-style-23, .getstarted, .button-2, .submit-button, .submit-button-2) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: var(--space-12) !important;
  padding: var(--space-3) var(--space-6) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-primary-500) !important;
  color: var(--surface-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out) !important;
}

.site-modern :is(.button-style-29, .button-style-23, .getstarted, .button-2):hover {
  background: var(--color-primary-600) !important;
  color: var(--surface-primary) !important;
  transform: translateY(-1px);
}

.site-modern :is(.button-style-30, .button-style-24) {
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
}

/* Pricing has one editorial Hero followed by three proof cards. It is not a
   split Hero, so keep this content in one centred vertical flow. */
.site-modern .section1-3 {
  padding-top: var(--space-20) !important;
  padding-bottom: var(--section-py) !important;
  background: var(--surface-primary) !important;
}

.site-modern .section1-3 .frame-134818 {
  display: block !important;
  width: min(var(--container-max), calc(100% - (var(--container-px) * 2))) !important;
  margin: 0 auto !important;
}

.site-modern .section1-3 :is(.frame-134819, .frame-134820) {
  display: flex !important;
  align-items: center !important;
  max-width: none !important;
  text-align: center !important;
}

.site-modern .section1-3 .text-295 {
  max-width: 820px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

.site-modern .section1-3 .no-more-spreadsheets-no-more-tax-time-chaos-just-clarity-managing-finances-shouldnt-slow-you-down-wi {
  max-width: 680px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

.site-modern .section1-3 .frame-134821 {
  width: 100% !important;
  margin-top: var(--space-10) !important;
}

.site-modern .section1-3 .card-19,
.site-modern .section1-3 .card-19 .text-296 {
  align-items: center !important;
  text-align: center !important;
}

/* Standard vertical rhythm and alternating neutral surfaces for legacy sections. */
.site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
  .section-style-14, .section6, .section-1, .section-2, .section-3, .section-4,
  .section-5, .section-6, .section-7, .section-8, .section-9, .section-10,
  .section-11, .section-12, .section-13, .section-14, .section-15, .section-16) {
  padding: var(--section-py) var(--container-px) !important;
  border-top: 1px solid var(--border-light);
  background: var(--surface-secondary) !important;
}

.site-modern :is(.section-style-5, .section-style-8, .section-style-14, .section-2,
  .section-4, .section-6, .section-8, .section-10, .section-12, .section-14, .section-16) {
  background: var(--surface-primary) !important;
}

.site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
  .section-style-14, .section6) > :is(.frame-134392, .frame-134394, .frame-134426,
  .frame-87, .container-88, .container-92, .w-layout-blockcontainer, .w-container),
.site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
  .section-style-14, .section6) > h2,
.site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
  .section-style-14, .section6) > h3,
.site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
  .section-style-14, .section6) > p {
  width: min(var(--container-max), 100%) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.site-modern :is(.text-217, .text-220) {
  margin: 0 auto var(--space-3) !important;
  color: var(--color-primary-500) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-snug) !important;
  text-align: center !important;
  text-transform: uppercase;
}

.site-modern :is(.highted-title, .text-233, .text-236, .text-297, .text-182) {
  max-width: 820px;
  margin: 0 auto var(--space-4) !important;
  color: var(--color-gray-900) !important;
  font-family: var(--type-heading-font) !important;
  font-size: clamp(var(--text-2xl), 3.4vw, var(--text-4xl)) !important;
  font-weight: var(--type-heading-weight) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  text-align: center !important;
}

.site-modern :is(.text-218, .text-221, .text-175-copy, .text-231) {
  max-width: 680px;
  margin: 0 auto !important;
  color: var(--color-gray-500) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  text-align: center !important;
}

/* Legacy feature cards become the image-and-information cards used by new pages. */
.site-modern :is(.frame-134394, .frame-134426, .frame-87, .frame-134821) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-6) !important;
  margin-top: var(--space-10) !important;
}

/* A grid with exactly three cards should give each equal visual weight instead
   of leaving a single card stranded on a second row. */
.site-modern :is(.frame-134394, .frame-134426, .frame-87, .frame-134821):has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.site-modern :is(.container-88, .card-9, .card-10, .card-19) {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
  min-height: 100% !important;
  padding: var(--space-6) !important;
  overflow: hidden;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--surface-elevated) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.site-modern :is(.container-88, .card-9, .card-10, .card-19) :is(img.image-51, img) {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.site-modern :is(.heading-3-intelligent-ai-assistance-6, .text-222, .text-297) {
  margin: 0 !important;
  color: var(--color-gray-900) !important;
  font-family: var(--type-heading-font) !important;
  font-size: var(--text-lg) !important;
  font-weight: 800 !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
}

.site-modern :is(.text-219, .text-223, .text-235, .text-299) {
  margin: 0 !important;
  color: var(--color-gray-500) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--leading-relaxed) !important;
}

/* The old CTA blocks are reduced to one calm, consistent closing band. */
.site-modern :is(.cta-section, .before-foot) {
  padding: var(--space-20) var(--container-px) !important;
  border-top: 1px solid var(--color-primary-200) !important;
  background: var(--color-primary-50) !important;
}

.site-modern :is(.cta-section, .before-foot) :is(.frame-99, .frame-133877, .container-6, .hero-wrapper-two-2) {
  max-width: 760px;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

.site-modern :is(.cta-section, .before-foot) :is(.frame-133913, ._2btns) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: var(--space-3) !important;
  margin-top: var(--space-8) !important;
}

/* Content, legal and CMS pages receive readable measure and quieter text. */
.site-modern :is(.rich-text-block, .w-richtext, .blog-body, .post-content, .article-content) {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  color: var(--color-gray-600);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.site-modern :is(.rich-text-block, .w-richtext, .blog-body, .post-content, .article-content) :is(h2, h3, h4) {
  margin-top: var(--space-10) !important;
  color: var(--color-gray-900) !important;
}

.site-modern :is(.section-27, .talk-to-an-expert, .contact-us) {
  color: var(--color-gray-800);
}

@media screen and (max-width: 767px) {
  .site-modern > section:first-of-type,
  .site-modern > section:not(:first-of-type):not(.section-27):not(.talk-to-an-expert):not(.contact-us) {
    padding: var(--section-py-sm) var(--space-4) !important;
  }

  .site-modern :is(.section1, .section1-copy, .section1-copy2, .section1-copy-copy,
    .section1-2, .section1-3, .frame-133909) {
    padding-top: var(--section-py-sm) !important;
    padding-bottom: var(--space-12) !important;
  }

  .site-modern .section1-3 {
    padding-top: var(--section-py-sm) !important;
    padding-bottom: var(--section-py-sm) !important;
  }

  .site-modern :is(.frame-81, .frame-134430, .frame-134818) {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
    width: min(calc(100% - (var(--space-4) * 2)), var(--container-max)) !important;
  }

  .site-modern :is(.frame-82, .frame-134431, .frame-134819, .frame-134820) {
    text-align: center;
  }

  .site-modern :is(.text-214, .text-230, .text-295, .new-h1, .heading-5, .heading-34,
    .text-226, .text-231, .text-267, .text-268) {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .site-modern .page-hero-eyebrow {
    text-align: center;
  }

  .site-modern :is(.frame-134394, .frame-134426, .frame-87, .frame-134821) {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .site-modern :is(.frame-134394, .frame-134426, .frame-87, .frame-134821):has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr !important;
  }

  .site-modern :is(.section-style-5, .section-style-6, .section-style-8, .section-style-9,
    .section-style-14, .section6, .section-1, .section-2, .section-3, .section-4,
    .section-5, .section-6, .section-7, .section-8, .section-9, .section-10,
    .section-11, .section-12, .section-13, .section-14, .section-15, .section-16) {
    padding: var(--section-py-sm) var(--space-4) !important;
  }

  /* Pricing's original slider and comparison table deliberately exceed one
     viewport. Keep the scroll inside their own containers, never on <body>. */
  .site-modern .frame-133912,
  .site-modern .slider,
  .site-modern .mask-2 {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .site-modern .frame-134822 {
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .site-modern .frame-134822 .card-20 {
    min-width: 0 !important;
  }

  .site-modern .table-style {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}