/* Canvas pages carry the exported design verbatim; neutralise the block
   theme's own spacing/padding so nothing shifts the original layout. */
.wp-site-blocks > *{ margin-block-start:0 !important; }
.wp-site-blocks{ padding-left:0 !important; padding-right:0 !important; }
/* <picture> wrappers must not participate in layout. */
picture{ display:contents; }

/* The sticky headers 18px backdrop blur repaints every scroll frame and is one
   of the most expensive effects on mobile GPUs. Below the designs own 940px
   breakpoint, swap it for a near-identical opaque gradient. */
@media (max-width: 940px) {
  header[data-screen-label='Header'] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: linear-gradient(180deg, rgba(24,48,16,0.97) 0%, rgba(31,61,20,0.94) 100%) !important;
  }
}

/* On mobile the process timeline and comparison table are wider than the
   screen. Clipped inside the 24px gutter they look cut off, so bleed them to
   the edges like the testimonial rail and keep a 24px inset for the content. */
@media (max-width: 940px) {
  .ftg-hscroll {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    scroll-padding-left: 24px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ftg-hscroll > * { scroll-snap-align: start; }
}

/* The comparison table carries an inline min-width:760px. Scrolling it
   sideways on a phone still crops the columns, so below the design breakpoint
   stack each row: the row label becomes a heading and every value is shown
   against its column name. Nothing is cropped and nothing scrolls. */
@media (max-width: 940px) {
  .ftg-table-wrap { overflow-x: visible !important; }
  .ftg-table-stack { min-width: 0 !important; display: block; width: 100%; font-size: 14.5px; }
  .ftg-table-stack thead { display: none; }
  .ftg-table-stack tbody,
  .ftg-table-stack tr,
  .ftg-table-stack td { display: block; width: auto; }
  .ftg-table-stack tr + tr { border-top: 1px solid #E7EDE4; }
  .ftg-table-stack td { border: 0 !important; }
  .ftg-table-stack td:first-child {
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    color: #1F3D14;
    padding: 18px 18px 8px;
  }
  .ftg-table-stack td + td {
    display: flex;
    gap: 14px;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 18px;
    line-height: 1.5;
  }
  .ftg-table-stack td + td::before {
    content: attr(data-ftg-col);
    flex: 0 0 40%;
    color: #5C5C5C;
    font-size: 13px;
    font-weight: 600;
  }
  .ftg-table-stack td:last-child { padding-bottom: 18px; }
}

/* The hero copy is vertically centred in a 950px box with 110px of top
   padding, so on a phone it sits low and hides most of the photograph.
   Anchor it to the top and tighten the padding to lift it. */
@media (max-width: 940px) {
  .ftg-hero-inner {
    align-items: flex-start !important;
    padding-top: 44px !important;
    padding-bottom: 56px !important;
  }
}