/* Fixes for the Webflow sections that repeat across pages.
   Loaded site-wide from app/(site)/layout.tsx.

   These started as page-level overrides on /global-accounts, but the same markup
   is exported into every page that uses the section, so the same defects were on
   all of them. They live here, keyed on the section's own classes, so one fix
   covers every page. Page-specific tweaks stay in that page's own style block.

   Most of the file is phone-only and sits in the media query below; rules that
   apply at every width (the CTA overlay) come first. */

/* Closing CTA: cream type sits straight on a photo, at 1.8:1 contrast against the
   brightest parts of it - effectively unreadable. A flat scrim over the image
   lifts that to ~4.2:1 worst case (~5.5:1 over the typical background) while
   keeping the photo clearly visible. Every page's CTA uses this same section. */
/* ::after, not ::before: the photo is an absolutely positioned <img> that comes
   last among the section's children, so a ::before scrim painted underneath it. */
.section_cta2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 0, 0.4);
  z-index: 0;
  pointer-events: none;
}
/* Article hero meta row ("2 Min Read • by … • March 23, 2026 •") renders a
   separator after every item, leaving one dangling at the end. */
.div-block-67 > .rl_blogpost1_text-divider:has(+ .w-embed) {
  display: none;
}

/* Lift the copy above the scrim (the marquee already carries its own z-index). */
.section_cta2 .padding-global {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  /* Full-bleed section panels.
     Every coloured section panel (dark, cream, light grey) is a rounded block
     inset 16px from each edge. On a phone that inset eats into already narrow
     content and makes the panel fight the page for room. Edge to edge, square
     corners, so each section gets the full width to breathe.
     These four classes are the *section* panels only — inner cards (feature
     grids, testimonial cards, persona cards) keep their own rounding. */
  .section_black-bg,
  .section_black-bg-copy,
  .section_light-bg,
  .section_grey-bg {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  /* Two section panels that predate those four classes and need the same
     treatment. "Security & Compliance You Can Trust" (cards) is inset by its
     container's margins, so pull just the panel out — the photo below it keeps
     its own inset. */
  .section_security .security_container {
    margin-left: 0;
    margin-right: 0;
  }
  /* The grid centres its items, so the panel would sit short of the edges. */
  .section_security .security_component {
    justify-items: stretch;
  }
  .section_security .security_header-wrapper {
    width: 100%;
    border-radius: 0;
  }
  /* The photo under the panel keeps the inset the container used to give it. */
  .section_security .security_image-component {
    margin-left: 16px;
    margin-right: 16px;
    width: auto;
  }
  /* The testimonial panel ("Real people, real Onboarders") lives inside a Webflow
     slider whose mask clips overflow, so negative margins would be cut off. Drop
     the section's side padding instead — the slider is all this section holds. */
  .section_product-testimonial .padding-global {
    padding-left: 0;
    padding-right: 0;
  }
  .section_product-testimonial .product-testimonial_inner {
    border-radius: 0;
  }
  /* 26px is too heavy for a quote on a phone. */
  .section_product-testimonial .heading-style-h3-5 {
    font-size: 21px;
    line-height: 1.35;
  }
  /* Slider controls sit in their own row under the card: position indicators on
     the left, arrows on the right. The row is 48px tall with 12px above and
     below, and everything in it shares one centre line. */
  .section_product-testimonial .rl_testimonial15_component {
    padding-bottom: 72px;
  }
  .section_product-testimonial .rl_testimonial15_arrow-right {
    right: 16px;
    bottom: 12px;
  }
  .section_product-testimonial .rl_testimonial15_arrow-left {
    right: 80px;
    bottom: 12px;
  }
  /* Webflow ships the slide nav hidden and renders it as centred dots. Show it as
     a left-aligned row of dashes — one per testimonial, the current one filled.
     They stay clickable, so they double as controls. */
  .section_product-testimonial .w-slider-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    left: 16px;
    right: auto;
    bottom: 12px;
    width: auto;
    height: 48px;
    padding: 0;
    margin: 0;
  }
  .section_product-testimonial .w-slider-nav .w-slider-dot {
    width: 22px;
    height: 3px;
    margin: 0;
    border-radius: 999px;
    background: rgba(29, 23, 0, 0.22);
    transition: width 0.25s ease, background-color 0.25s ease;
  }
  .section_product-testimonial .w-slider-nav .w-slider-dot.w-active {
    width: 34px;
    background: #1d1700;
  }

  /* Once a panel runs edge to edge, the padding under it plus the CTA's own top
     margin reads as a stray band of page background between two full-width
     blocks. Close it up when a panel section sits directly above the CTA. */
  .section_faq2:has(> .section_light-bg):has(+ .section_cta2),
  .section_logo:has(> .section_black-bg):has(+ .section_cta2) {
    padding-bottom: 0;
  }
  .section_faq2:has(> .section_light-bg) + .section_cta2,
  .section_logo:has(> .section_black-bg) + .section_cta2 {
    margin-top: 0;
  }

  /* "Made for businesses with real FX volume": on phones the 3D spring is pinned
     partway down the heading block, which lands it on top of the subtext. Drop it
     below the copy so it overlaps the image slider instead, and lift it above the
     slider's own absolutely-positioned images. */
  .business-for-you_heading-wrapper img.image-16 {
    top: calc(100% + 20px);
    z-index: 2;
  }
  /* The spring's own z-index is confined to its branch, which sits at z-index 1
     alongside the gallery — and the gallery comes later in the DOM, so it painted
     over the spring. Lift the branch that holds the spring above it. */
  .padding-global:has(.business-for-you_heading-wrapper) {
    z-index: 3;
  }

  /* "Backed by the best": every logo sat in a fixed 11.11em box, so a wide mark
     nearly filled its box while a narrow one floated in space and the gaps read
     as random. Natural widths plus one gap gives an even rhythm, and the logos
     are big enough to actually read. The names marquee below is separate markup
     and keeps its own size. */
  .section_logo .logos {
    width: auto;
    max-width: none;
    height: 40px;
  }
  .section_logo .logos-row2 {
    column-gap: 30px;
    padding-left: 30px;
  }

  /* "Regulated. Backed. Trusted.": heading sat too far from its subtext, the
     subtext was capped at 380px, and the CTA (plus its wrapper) shrank to fit
     its label instead of filling the column. */
  .section_all-in-one .why-onboard_content-wrapper-copyafaf {
    row-gap: 24px;
  }
  .section_all-in-one .div-block-109 {
    max-width: none;
  }
  .section_all-in-one .button-group-center {
    width: 100%;
    align-self: stretch;
  }
  /* Out-specifies Webflow's own .button.is-icon.is-hero padding (17px top and
     bottom plus a 38px left inset for the arrow), far too heavy once the button
     runs the full width. */
  .section_all-in-one .button.is-icon.is-hero.ctabutton {
    width: 100%;
    justify-content: center;
    padding: 8px 20px;
    min-height: 46px;
  }

  /* Closing CTA: the fixed 480px height clipped the heading at the top and
     pushed the button onto the marquee pinned to the section's bottom. Let it
     grow with its content and reserve the marquee its own room. */
  .section_cta2 {
    height: auto;
    padding-top: 56px;
    padding-bottom: 96px;
  }
  .section_cta2 .business-footer-content {
    row-gap: 22px;
  }
  /* 64px display type and a 24px subtext are desktop sizes; on a phone the
     heading ran to five lines and dominated the section. */
  .section_cta2 .heading-2 {
    font-size: 40px;
    line-height: 1.02;
  }
  .section_cta2 .text-size-medium {
    font-size: 17px;
    line-height: 1.5;
  }

  /* Blog index hero: 72px heading with a 60px line-height (tighter than the type
     itself) and a 24px subtext were desktop sizes squeezed onto a phone. */
  .section_blog-hero-2 .heading-style-h1 {
    font-size: 64px;
    line-height: 1.05;
  }
  .section_blog-hero-2 .text-size-medium {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Article hero title. The h1 carries a fixed -3px tracking at every size: ~3% at
     its 100px desktop size, but ~6% at 48px on a phone, and it sets line-height 1
     on top, so the words looked jammed together. Loosen both, and trade a little
     size for the room the looser tracking needs. */
  .heading-style-h1.blog-details {
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  /* Article body (blog detail). The rich text drops to 16px on phones, but list
     items keep their desktop 20px at line-height 2, so lists read as a different,
     double-spaced document with a 40px indent. One scale and one rhythm for the
     whole body, with headings sized for a 351px column. */
  .rl-text-rich-text p {
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 18px;
  }
  .rl-text-rich-text ul,
  .rl-text-rich-text ol {
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 20px;
    padding-left: 22px;
  }
  .rl-text-rich-text li {
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 10px;
  }
  .rl-text-rich-text li:last-child {
    margin-bottom: 0;
  }
  .rl-text-rich-text li > ul,
  .rl-text-rich-text li > ol {
    margin: 10px 0 0;
  }
  .rl-text-rich-text h2 {
    font-size: 26px;
    line-height: 1.2;
    margin: 34px 0 12px;
  }
  .rl-text-rich-text h3 {
    font-size: 21px;
    line-height: 1.3;
    margin: 28px 0 10px;
  }
  .rl-text-rich-text h4 {
    font-size: 18px;
    line-height: 1.35;
    margin: 24px 0 8px;
  }
  .rl-text-rich-text figure {
    margin: 24px 0;
  }
  .rl-text-rich-text img {
    border-radius: 12px;
  }
  .rl-text-rich-text > :first-child {
    margin-top: 0;
  }
  .rl-text-rich-text > :last-child {
    margin-bottom: 0;
  }
  /* "Share this post" wrapped onto two lines beside a row of seven icons. Give the
     label its own line so both sit comfortably. */
  .blogpost_content-top {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .blogpost_content-top .blogpost_author-text {
    width: 100%;
  }

  /* FAQ: 56px of dead air between the heading and the first question. */
  .section_faq2 .faq_component2 {
    row-gap: 24px;
  }
}