/* site.css — everything Blueacrobat wrote for www.blueacrobat.com.
   custom.css is the Webflow export (plus the performance patches made inside its
   own rules); this file loads AFTER it and holds every addition since the move
   off Webflow, so the cascade order is: custom.css → site.css. Keep it that way:
   several rules here override Webflow selectors of equal specificity by order.
   Bump cssVersion in src/modules/pageRenderer.js whenever this file changes
   (the CDN caches it). Sections: 1 site-wide · 2 homepage marquee · 3 estimate
   forms · 4 onboarding form · 5 blog post · 6 footer · 7 animated gradients. */

/* ══ 1. Site-wide (from the layout) ═════════════════════════════════════════ */
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 .blur-blue {
   transform: translate3d(0, 0, 0);
 }

 /* ------------------------------------------------------------------
iOS performance fix.

.navbar2_component is position:fixed with background-color:#0000
(transparent) at every breakpoint below 1440px, and .backdrop-blur
adds backdrop-filter: blur(8px). The logo marquee scrolls underneath
it on an infinite CSS animation that never stops, so Safari has to
re-run an 8px gaussian blur over the full-width nav on EVERY frame,
forever. Desktop GPUs absorb that; the iPhone compositor does not —
it is why menu taps stay unresponsive after the page has loaded.

Below tablet we drop the blur and substitute a solid background in
#252b3a — the same colour Webflow already applies to this nav at
min-width:1440px, which pairs with the nav's --lavender-3 (#e4ebfa)
text colour.
------------------------------------------------------------------ */
 @media (max-width: 991px) {

   .navbar2_component.backdrop-blur,
   .navbar2_component-copy.backdrop-blur {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
     background-color: rgba(37, 43, 58, 0.94);
   }
 }

 /* At min-width:1440px Webflow paints the nav solid #252b3a (custom.css). On the
    pages Webflow built, a page interaction then sets an inline transparent
    background at the top of the page, so the nav sits over the hero; the blog
    category and post templates never had that interaction and showed a solid
    bar over the new hero bands (owner, 2026-09-09). The nav is transparent until
    site.js adds .backdrop-blur past 200px, on every page alike. */
 @media (min-width: 1440px) {
   .navbar2_component:not(.backdrop-blur) { background-color: transparent; }
 }

 /* Respect the OS "Reduce Motion" setting — also stops the marquee. */
 @media (prefers-reduced-motion: reduce) {
   .scroll {
     animation: none !important;
   }
 }

/* ══ 2. Homepage logo marquee ═══════════════════════════════════════════════ */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 5rem));
  }
}

.scroll {
  /* 260s: the two rows are ~5.5k and ~6.2k px long, so this is 21–24 px/s.
     Webflow's 100s ran them at 55–62 px/s, which the owner read as too fast
     (2026-09-09). Adding logos lengthens a row and slows it proportionally. */
  animation: scroll 260s linear infinite;
}

/* One tone for every logo. The source files are a mix of black, grey and
   full-colour marks; every one has a transparent background (28 PNGs with
   alpha, 19 SVGs, checked 2026-09-09), so brightness(0) turns each opaque pixel
   black and invert() lifts that to a single mid grey. A logo that arrives with
   a painted white box would show as a grey slab: fix the file, not this rule.
   The 19 SVGs are Webflow wrappers around an embedded raster at fill-opacity
   .6, which a filter cannot raise, so they get a darker tone: over white,
   .6 × 20% grey composites to the same mid grey as 1.0 × 52%. */
.marquee-logo {
  filter: brightness(0) invert(52%);
}
.marquee-logo[src$=".svg"] {
  filter: brightness(0) invert(20%);
}
/* A mark drawn on its own painted badge (Snapchat's ghost on its square,
   Storyteller Overland's oval) would become a solid grey shape under the rule
   above; "class": "badge" in logos.json keeps the badge legible in plain grey. */
.marquee-logo.badge {
  filter: grayscale(1) opacity(.55);
}
/* A true vector SVG at full opacity (Qlik, the first not from the Webflow export)
   takes the standard tone, not the darker one for the 60%-alpha wrappers. */
.marquee-logo.vector {
  filter: brightness(0) invert(52%);
}
/* Logos added from companies' own sites (assets/logos/) arrive at arbitrary
   intrinsic sizes (a 34px glyph, a 5400px-wide wordmark); the Webflow-era
   files were pre-sized. Give them one height and let width follow. Matched on
   "/logos/", not "/assets/logos/": on the deployed stages pageRenderer rewrites
   /assets/ to the CDN (…/website-dev/logos/), and the first form matched only
   locally, so Away rendered 5,400px wide on staging (owner, 2026-09-09). */
.marquee-logo[src*="/logos/"] {
  height: 56px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
}
/* Very wide wordmarks (8:1 and beyond: Kimberly-Clark, The Ocean Cleanup, Coco
   Republic) letterbox inside a fixed-height box and their ink ends up 25px tall;
   they are sized by width instead, so the mark itself reads (owner, 2026-09-09). */
.marquee-logo.wide { height: auto; width: 330px; max-width: 330px; }
/* Lockups whose wordmark is small beside its symbol (Rosecrance) or whose file
   was exported small (Computacenter, 113px) get more height. */
.marquee-logo.tall { height: 88px; }
/* A lockup set in a heavy face (Dropbox's bold wordmark) outweighs its neighbours
   at the standard height; "class": "compact" takes it down. */
.marquee-logo.compact { height: 44px; }
/* The two strips are siblings with no gap between them; open them up (owner,
   2026-09-09). */
.marquee + .marquee { margin-top: 2.5rem; }

.marquee:hover > .scroll {
  animation-play-state: paused;
}

.reverse {
  animation-direction: reverse;
}

/* ══ 3. Estimate request forms (field help tooltips) ════════════════════════ */
.tooltip-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  column-gap: 12px;
  width: 100%;

  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: #4f4f4f;
  letter-spacing: 0;
  text-transform: none;
}

.tooltip-text {
  display: block;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: #4f4f4f;
  letter-spacing: 0;
  text-transform: none;
}

.tooltip-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #1238ff;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  text-transform: none;
}

.tooltip-box {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  width: 380px;
  max-width: 80vw;
  background: #ffffff;
  color: #222222;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 99999;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.tooltip-icon-wrap:hover .tooltip-box {
  display: block;
}

.tooltip-box strong {
  font-weight: 700;
}

/* ══ 4. Onboarding form ═════════════════════════════════════════════════════
   Five blocks moved verbatim from the view (E3, 2026-09-09); the last block
   overrides the first three with !important and is what actually renders. */
.residency-row {
  display: grid;
  grid-template-columns: 1fr 32px 407px;
  gap: 24px;
  align-items: center;
  margin-top: 56px;
}

.residency-label {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: -0.1px;
}

.residency-help-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.residency-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #1238ff;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
  text-transform: none;
}

.residency-help-box {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 420px;
  max-width: 80vw;
  background: white;
  color: #222;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.residency-help-wrap:hover .residency-help-box {
  display: block;
}

.residency-select {
  width: 407px;
  height: 56px;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: #222;
}

.project-date-row {
  display: grid;
  grid-template-columns: 1fr 32px 407px;
  gap: 24px;
  align-items: center;
  margin-top: 56px;
}

.project-date-label {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: -0.1px;
}

.project-help-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #1238ff;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
  text-transform: none;
}

.project-help-box {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 420px;
  max-width: 80vw;
  background: white;
  color: #222;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.project-help-wrap:hover .project-help-box {
  display: block;
}

.project-date-input {
  width: 407px;
  height: 56px;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: #222;
}

.delta-wrapper {
  width: 100%;
}

.delta-row {
  display: grid;
  grid-template-columns: 1fr 32px 407px;
  gap: 24px;
  align-items: center;
  margin-top: 56px;
}

.delta-date-section {
  margin-top: 56px;
}

.delta-label {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: -0.1px;
}

.delta-help-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delta-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: #1238ff;
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: help;
  text-transform: none;
}

.delta-help-box {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 420px;
  max-width: 80vw;
  background: white;
  color: #222;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.delta-help-wrap:hover .delta-help-box {
  display: block;
}

.delta-select,
.delta-date-input {
  width: 407px;
  height: 56px;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: #222;
}

.delta-wrapper .delta-date-section {
  display: none !important;
}

.delta-wrapper:has(.delta-select option[value="Yes"]:checked) .delta-date-section {
  display: grid !important;
}

/* Match existing Webflow label style */
.delta-label,
.project-date-label,
.residency-label {
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #555555 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.2px !important;
}

/* Match existing Webflow input/select style */
.delta-select,
.delta-date-input,
.project-date-input,
.residency-select {
  width: 407px !important;
  height: 64px !important;
  padding: 12px 16px !important;
  border: 1px solid #c9d6f0 !important;
  border-radius: 10px !important;
  background-color: #f8faff !important;
  color: #222222 !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
}

.delta-select:focus,
.delta-date-input:focus,
.project-date-input:focus,
.residency-select:focus {
  outline: none !important;
  border-color: #1a5cff !important;
  box-shadow: 0 0 0 1px #1a5cff !important;
}

/* Keep helper icons aligned */
.delta-row,
.project-date-row,
.residency-row {
  grid-template-columns: 1fr 32px 407px !important;
  gap: 24px !important;
  align-items: center !important;
}

.delta-help-wrap,
.project-help-wrap,
.residency-help-wrap {
  justify-self: center !important;
}

.delta-help-icon,
.project-help-icon,
.residency-help-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  background: #1238ff !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.loader {
  width: 40px;
  height: 20px;
  --c: no-repeat radial-gradient(farthest-side, #000 93%, #0000);
  background:
    var(--c) 0 0,
    var(--c) 50% 0;
  background-size: 8px 8px;
  position: relative;
  clip-path: inset(-200% -100% 0 0);
  animation: l6-0 1.5s linear infinite;
}
.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background: #000;
  left: -16px;
  top: 0;
  animation:
    l6-1 1.5s linear infinite,
    l6-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
}
.loader:after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  animation: l6-3 1.5s linear infinite;
}
@keyframes l6-0 {
  0%,
  30% {
    background-position:
      0 0,
      50% 0;
  }
  33% {
    background-position:
      0 100%,
      50% 0;
  }
  41%,
  63% {
    background-position:
      0 0,
      50% 0;
  }
  66% {
    background-position:
      0 0,
      50% 100%;
  }
  74%,
  100% {
    background-position:
      0 0,
      50% 0;
  }
}
@keyframes l6-1 {
  90% {
    transform: translateY(0);
  }
  95% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(15px);
    left: calc(100% - 8px);
  }
}
@keyframes l6-2 {
  100% {
    top: -0.1px;
  }
}
@keyframes l6-3 {
  0%,
  80%,
  100% {
    transform: translate(0);
  }
  90% {
    transform: translate(26px);
  }
}

/* ══ 5 · 6. Blog post readability, footer (moved from the end of custom.css) ═ */
/* ── Blog post readability (2026-09-09, after the move to data-fed posts) ────
   Webflow's post template hid the whole meta row (.blogpost-content-top was
   display:none because the author fields were never bound), rendered the square
   hero image at full column width, and left body links at browser default. These
   rules replace that block's role with .blogpost-meta and tune the article measure.
   Bump cssVersion in pageRenderer.js whenever this file changes (CDN cache). */
/* Widened and enlarged 2026-09-09 (owner: the post read as small): 52rem column,
   18px body, 44px title. The same evening the column was opened to the full
   container and reverted within minutes (owner: harder to read), so 52rem is a
   settled decision, not an oversight. Bump cssVersion. */
.blogpost-title-wrapper { max-width: 52rem; margin-left: auto; margin-right: auto; }
.blogpost-title-wrapper h1.heading-style-h2 { font-size: 2.75rem; line-height: 1.15; }
.blogpost-title-wrapper p { font-size: 1.25rem; line-height: 1.6; }
.section-blogpost .max-width-large { max-width: 52rem; }
.blogpost-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    width: 100%; margin-bottom: 2rem; padding-bottom: 1rem;
    border-bottom: 1px solid #e2e2e2; color: #434959; font-size: .9375rem;
}
.blogpost-meta-item { display: inline-flex; align-items: center; gap: .5rem; }
.blogpost-meta-category {
    display: inline-block; padding: .2rem .7rem; border-radius: 999px;
    background: #f2f3ff; color: #013499; font-weight: 600; font-size: .8125rem;
    text-decoration: none; letter-spacing: .01em;
}
.blogpost-meta-category:hover { background: #d6daff; }
.blogpost-meta-share { margin-left: auto; display: inline-flex; align-items: center; gap: .75rem; }
.blogpost-meta-share a { color: #434959; text-decoration: none; font-size: .875rem; display: inline-flex; align-items: center; gap: .35rem; }
.blogpost-meta-share a:hover { color: #013499; }
.blogpost-meta-share svg { width: 16px; height: 16px; fill: currentColor; }
/* Hero: crop to a wide frame instead of showing the whole square. */
.blog-post-image { aspect-ratio: 2 / 1; max-height: 460px; object-fit: cover; }
/* Article measure and hierarchy. 48rem column at 16px ran ~95 characters a line;
   17px on a 44rem column lands at ~72. */
.blogpost-content { max-width: 52rem; margin-left: auto; margin-right: auto; }
.rich-text.blog-post { font-size: 1.125rem; line-height: 1.7; color: #1e1e1e; }
.rich-text.blog-post p { font-size: inherit; margin-bottom: 1.25rem; }
.rich-text.blog-post h2, .rich-text.blog-post h3, .rich-text.blog-post h4, .rich-text.blog-post h5 {
    color: #141c30; line-height: 1.3; margin-top: 2.5rem; margin-bottom: .75rem;
}
.rich-text.blog-post h2 { font-size: 1.875rem; }
.rich-text.blog-post h3 { font-size: 1.625rem; }
.rich-text.blog-post h4, .rich-text.blog-post h5 { font-size: 1.5rem; font-weight: 700; }
.rich-text.blog-post h4 strong, .rich-text.blog-post h5 strong { font-weight: inherit; }
.rich-text.blog-post ul, .rich-text.blog-post ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.rich-text.blog-post li { margin-bottom: .5rem; }
.rich-text.blog-post li strong { color: #141c30; }
.rich-text.blog-post a { color: #013499; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rich-text.blog-post a:hover { color: #3898ec; }
.rich-text.blog-post blockquote { border-left: 3px solid #d6daff; padding-left: 1.25rem; color: #434959; }
@media screen and (max-width: 767px) {
    .blog-post-image { aspect-ratio: 16 / 10; max-height: 260px; }
    .rich-text.blog-post { font-size: 1rem; }
    .rich-text.blog-post h4, .rich-text.blog-post h5 { font-size: 1.25rem; margin-top: 2rem; }
    .blogpost-meta-share { margin-left: 0; width: 100%; }
}

/* ── Footer back-to-top button placement (2026-09-09) ──────────────────────
   .footer_layout is a 5-column grid (3 at tablet, 1 at phone). The button had
   no grid-column, so auto-placement dropped it into the FIRST column of a new
   row and `justify-self: end` pushed it to that column's right edge: it floated
   left of centre under the company details on every page. Pin it to the last
   column; the existing phone rule (justify-self: center) still applies there. */
@media screen and (min-width: 768px) {
    #w-node-_7ebbe016-7b3b-88ce-5276-28758652c42c-8652c3fb.footer_up-button {
        grid-column: -2 / -1;
        justify-self: end;
        align-self: end;
    }
}
/* The four link columns are `1fr`, whose minimum is the longest unbreakable
   label, so a long link ("DBVault Continuous Backup") pushes the grid past its
   container. minmax(0, 1fr) keeps every column to its share and lets a long
   label wrap instead. */
@media screen and (min-width: 992px) {
    /* 19rem, not Webflow's 27rem: the link columns need ~188px each to keep
       "Terms and Conditions" on one line at 1312px container width. */
    .footer_layout { grid-template-columns: 19rem repeat(4, minmax(0, 1fr)); }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .footer_layout { grid-template-columns: 21.25rem repeat(2, minmax(0, 1fr)); }
}
/* Column links may wrap: with the columns now fixed to their share, the two
   longest labels would otherwise run into the next column under nowrap. */
@media screen and (min-width: 768px) {
    .footer_pages .footer_link { white-space: normal; }
}

/* ══ 7. Animated gradient backgrounds (E5, 2026-09-09; retuned the same day) ═
   Opt-in with class="ba-glow" on a full-width band. Built after bioagelabs.com,
   whose effect is one large soft layer ROTATING continuously (a full turn every
   10s) rather than blobs drifting a few percent — a drift that slow reads as a
   still image, which is what the first cut did.
   Ground: a static navy #141c30 → #013499 linear gradient on the band itself.
   Light: ONE transparent square layer (::before) the band's own width, centred,
   carrying three radial glows in the site's blues (#3898ec and #1a5cff — not
   the button's #1224cc, whose violet lean read as purple over navy, owner
   2026-09-09), turning once every 45s, linear, so the glows orbit the centre and
   sweep the band without ever stopping. The layer is transparent outside the
   glows, so it does not need to cover the band's diagonal; the ground shows
   through wherever it does not reach. That keeps the composited layer at
   (1.2 × width)² pixels instead of the viewport-sized square the reference uses — the
   repo's iOS history (custom.css, .blur-blue) is why: no filter: blur at any
   width, transform is the only animated property.
   No purple: the owner rejected it on the CTA band (2026-09-09).
   Contrast, white text over the lightest frame: #3898ec at .45 on the #013499
   end of the ground is 5.6:1 (WCAG AA for body text); every other glow is
   darker. Keep the alphas at or below these values, or re-check. */
.ba-glow {
    --ba-glow-ground: linear-gradient(160deg, #141c30 0%, #0f224a 50%, #013499 100%);
    position: relative;
    overflow: hidden;
    background-color: #141c30;
    background-image: var(--ba-glow-ground);
}
.ba-glow::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -10%;
    width: 120%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    /* Each glow is an ellipse with an EXPLICIT size, so it reaches zero alpha
       well inside the square layer: a glow that runs past the layer's edge is
       clipped to a hard arc that sweeps through wide bands as the layer turns
       (owner, 2026-09-09). Keep centre ± size inside 4%–96% on both axes. */
    background-image:
        radial-gradient(ellipse 25% 25% at 30% 38%, rgba(56, 152, 236, .45) 0%, rgba(56, 152, 236, .18) 45%, rgba(56, 152, 236, 0) 100%),
        radial-gradient(ellipse 25% 25% at 70% 36%, rgba(26, 92, 255, .5) 0%, rgba(26, 92, 255, .18) 45%, rgba(26, 92, 255, 0) 100%),
        radial-gradient(ellipse 20% 20% at 52% 74%, rgba(56, 152, 236, .32) 0%, rgba(56, 152, 236, .1) 45%, rgba(56, 152, 236, 0) 100%);
    transform: translateY(-50%) rotate(0turn);
    animation: ba-glow-turn 45s linear infinite;
    will-change: transform;
}
.ba-glow > .padding-global {
    position: relative;
    z-index: 1;
}
@keyframes ba-glow-turn {
    from { transform: translateY(-50%) rotate(0turn); }
    to   { transform: translateY(-50%) rotate(1turn); }
}
/* The CTA band (partials/cta.handlebars): white heading on the gradient; the
   four line-art illustrations were drawn for the light #d1dbed band and sink
   into the navy, so they are not painted there. */
.section_cta.ba-glow h2 { color: #fff; }
.section_cta.ba-glow .cta_bg { display: none; }
/* Every other full-width flat-blue band (owner, 2026-09-09: "in place of solid
   blue wherever it stretches across the screen"). Each needs one override:
   - .bg-primary-blue: the homepage band behind the DBVault card is an empty
     absolutely-positioned strip; .ba-glow's position: relative would drop it
     into the flow.
   - .section_testimonial: its curved top edge is a solid #013499 SVG drawn 6rem
     ABOVE the section, which no longer matches and would be clipped anyway, so
     it is not painted. Its light bottom strip (.bg-primary-blue.white) is sized
     34vh, bottom-anchored: on a tall viewport that is taller than the band and
     covered it entirely, heading included (owner, 2026-09-09), so it is not
     painted either — the cards sit straight on the gradient.
   - .section-hero.terms-privacy: two-class Webflow selector beats .ba-glow's
     background-image. */
.bg-primary-blue.ba-glow { position: absolute; }
.section_testimonial.ba-glow .curve-bg { display: none; }
.section_testimonial.ba-glow > .bg-primary-blue.white { display: none; }
.section-hero.terms-privacy.ba-glow { background-image: var(--ba-glow-ground); }
/* Webflow's static .blur-blue washes (solid #013499 at .8, 225px blur at desktop,
   two per hero) paint AFTER the glow layer and hid the moving light entirely on
   the homepage (owner, 2026-09-09). The glow layer is what they were for, so
   inside a gradient band they are not painted. The homepage's .bg-net grid keeps
   its place above the light. The footer is not a gradient band and keeps its
   blobs (tried and reverted 2026-09-09: motion behind five columns of small
   links read as distraction). */
.ba-glow > .blur-blue { display: none; }
/* Homepage hero only (owner, 2026-09-09: "make it darker, just that one"): a
   deeper ground and the glow layer at 70%, so the grid reads against a darker
   field. Every other band keeps the standard values above. */
.section_header.ba-glow { --ba-glow-ground: linear-gradient(160deg, #0e1526 0%, #101e42 50%, #072a7a 100%); }
.section_header.ba-glow::before { opacity: .7; }
/* Homepage hero height. Webflow pads it 16rem top and bottom (512px at a 16px
   root); the §11 wide-screen scale and the two-paragraph hero copy took the
   band to 1,271px against production's 991 (measured 2026-09-09). The copy and
   the type stay; the padding comes down to 9rem / 6rem at desktop. */
@media screen and (min-width: 992px) {
    .section_header .padding-section_home { padding-top: 9rem; padding-bottom: 6rem; }
}
/* Text on a gradient band is pure white, not Webflow's off-white --lavender-3
   (#e4ebfa), and the homepage hero paragraph loses its 70% alpha (owner,
   2026-09-09: "a bit brighter"). Card text inside the bands is untouched. */
.ba-glow .text-color-blue-white,
.ba-glow .text-size-large.text-color-blue-white.hero,
.ba-glow h1 { color: #fff; }
/* Reduce Motion: the layer stays where its loop starts; the gradient stays. */
@media (prefers-reduced-motion: reduce) {
    .ba-glow::before {
        animation: none;
    }
}

/* ══ 8. Type scale (2026-09-09, from the owner's third-party typography review) ══
   material/2026-09-09-1310-chatgpt-architect-typography-review.md holds the
   measurements and the per-point disposition. What was wrong, measured in the
   delivered custom.css: "regular" utility text was .875rem (14px) while "small"
   was 1rem; paragraphs were 80% black; the homepage H1 was 4.6rem at line-height
   1.5 beside 20px copy on a ~95-character line; footer text was 70% alpha; below
   767px paragraphs dropped to 16px while "regular" stayed 14px. The classes are
   NOT renamed (133 uses across the views); their sizes now hold
   small ≤ regular < medium < large. Overrides only: custom.css is untouched. */
:root {
    --text-sm: .9375rem;    /* 15px  small metadata, tags, trust-centre lists */
    --text-ui: 1rem;        /* 16px  regular UI text and links */
    --text-body: 1.125rem;  /* 18px  paragraphs (unchanged) */
    --text-lead: 1.25rem;   /* 20px  hero paragraphs (unchanged) */
    --heading-1: clamp(2.75rem, 5.2vw, 4.25rem);  /* 44–68px, was a fixed 73.6px; 64 read as small to the owner */
    --text-ink: #2d2d2d;    /* solid; was #1e1e1e at 80% */
}
p { color: var(--text-ink); }
.text-size-regular { color: var(--text-ink); font-size: var(--text-ui); line-height: 1.5; }
.text-size-small-2 { font-size: var(--text-sm); }
.tag-text { font-size: var(--text-sm); }
.testimonila_company { color: var(--text-ink); }
h1 { line-height: 1.15; }
.heading-style-h1 { font-size: var(--heading-1); line-height: 1.12; }
.button { font-weight: 600; }
.text-color-blue-white.footer-text,
.footer_copyright-text { color: #e4ebfae6; }
/* Measure: the homepage hero paragraph is centred in a 79%-wide grid and ran to
   ~95 characters a line at desktop; the product heroes' 64rem column to ~90. */
.header1_content p { max-width: 70ch; margin-left: auto; margin-right: auto; font-size: 1.375rem; line-height: 1.55; }
.section_acroxtract-home-header .max-width-xlarge p { max-width: 62ch; }
@media screen and (max-width: 767px) {
    /* Webflow drops paragraphs to 16px here; 17px keeps them readable on a phone
       without the desktop 18px. The two-class testimonial selector is repeated
       because Webflow's own mobile rule names it and would otherwise win. */
    p,
    .text-size-medium,
    .text-size-medium.testimonial-text { font-size: 1.0625rem; }
}

/* Blog category pages (E2 shared view): the H1 and intro sit above Webflow's
   heading-and-filters row, not inside it — inside, they became flex siblings of
   the filter buttons and the page collapsed into one row (owner, 2026-09-09). */
.blog-category-intro { margin-bottom: 3rem; }
.blog-category-intro h1 { margin-bottom: 1rem; }
.blog-category-intro p { max-width: 62ch; }

/* ══ 9. DBVault financial reporting section (2026-09-09, worklog (as)) ═══════
   Four report families as cards across the full container; the names as
   lists rather than comma-run paragraphs. Replaces Webflow's
   .acrovault-values_list (four 1fr text columns with 1rem gaps inside a 64rem
   box), which the backups page still uses for its own content. */
.fin-reports_intro { max-width: 62ch; }
.fin-reports_intro p { margin-bottom: 0; }
/* DBVault page: the intro and the how-it-runs note sit side by side above the
   cards, so the section's width is used and neither paragraph runs alone. */
.fin-reports_lead { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: start; }
.fin-reports_lead .fin-reports_intro { max-width: none; }
.fin-reports_lead .fin-reports_how { max-width: none; }
.fin-reports_icon { width: 44px; height: 44px; object-fit: contain; margin-bottom: .75rem; }
@media screen and (max-width: 767px) { .fin-reports_lead { grid-template-columns: 1fr; } }
.fin-reports {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}
.fin-reports_card {
    background: #fff;
    border: 1px solid #d6daff;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.fin-reports_card h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    color: #141c30;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #013499;
}
.fin-reports_list { list-style: none; margin: 0 0 1rem; padding: 0; }
.fin-reports_list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .45rem;
    font-size: 1rem;
    line-height: 1.45;
    color: #2d2d2d;
}
.fin-reports_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #3898ec;
}
.fin-reports_note {
    /* follows the list rather than pinning to the card's foot: pinned, the two
       short cards read as hollow (owner, 2026-09-09) */
    margin-top: .25rem;
    padding-top: .75rem;
    border-top: 1px solid #eaeef5;
    font-size: .9375rem;
    line-height: 1.5;
    color: #434959;
}
.fin-reports_how {
    max-width: 62ch;
    padding-left: 1.25rem;
    border-left: 3px solid #013499;
}
.fin-reports_how p { margin-bottom: 0; }
@media screen and (max-width: 991px) {
    .fin-reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
    .fin-reports { grid-template-columns: 1fr; }
}

/* ══ 10. Draft-page furniture and the SAP solution page (2026-09-09, worklog (ax)) ═
   .ba-draft-banner and .ba-verify exist so an unverified page can be reviewed
   at a URL without any highlighted sentence reading as a published claim.
   Remove both from a page only when its reviewer notes are closed. */
.ba-draft-banner {
    /* Fixed to the foot of the viewport: the nav is fixed at the top and covered
       an in-flow banner; here it stays visible on every scroll position. */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: #fff4d6; color: #5a3d00; border-top: 1px solid #f0c36d;
    padding: .75rem 1.5rem; font-size: .9375rem; line-height: 1.5; text-align: center;
}
mark.ba-verify { background: #fff1b8; color: inherit; padding: 0 .15em; border-bottom: 2px dotted #d9a400; cursor: help; }
.ba-image-pending { font-size: .8125rem; color: #7c8385; text-align: center; margin-top: .5rem; }
.sap-steps { counter-reset: step; list-style: none; margin: 2rem 0; padding: 0; max-width: 62ch; }
.sap-steps li { position: relative; padding-left: 3.25rem; margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: #2d2d2d; }
.sap-steps li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: .1em; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: #013499; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Continuous backup page, feature tile row: Webflow's grid is five columns and
   the row now has six tiles (Vendor Independence, worklog (bd)); a sixth column
   at desktop keeps them on one line. Tablet and phone keep Webflow's wrapping. */
@media screen and (min-width: 992px) {
    .logo2_logo-list-copy:has(#ba-vendor-independence) { grid-template-columns: repeat(6, 1fr); }
}

/* ══ 11. Wide-screen scale (2026-09-09, worklog (ay)) ═══════════════════════
   The Webflow export sizes the container (.container-large is 82rem), the
   section padding and the type in rem, so scaling the root font size scales
   the whole layout together, the way bioagelabs.com fills a wide monitor.
   16px up to 1440px wide, then linear to 19px at 2400px: at 1920px the root
   is 17.5px and the container 1435px; at 2400px, 19px and 1558px. Pixel-sized
   things (the nav, images) do not scale, which is intended. Nothing changes
   below 1440px, so phones and laptops keep the reviewed type scale. */
@media screen and (min-width: 1440px) {
    html { font-size: calc(16px + (100vw - 1440px) * 0.003125); }
}
@media screen and (min-width: 2400px) {
    html { font-size: 19px; }
}

/* ══ 12. AcroXtract hero line-art (2026-09-09, worklog (bg)) ═══════════════
   The homepage hero's grid is a thin-line SVG laid over the gradient at 25%
   (.bg-net in custom.css). The AcroXtract hero gets a padlock drawn the same
   way, kept to the right half where the copy is not; the ::before glow layer
   sits under it and .padding-global above it. */
.bg-lock {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .28;
    background: url(../icons/hero-lock.svg) no-repeat right -6% center / auto 96%;
}
@media screen and (max-width: 991px) {
    .bg-lock { opacity: .16; background-position: right -30% center; background-size: auto 80%; }
}
/* The DBVault platform hero takes a vault door the same way. */
.bg-vault {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .28;
    /* The vault drawing is wider than the padlock (hinge and collar), so it is
       scaled smaller and anchored flush right to stay clear of the copy. */
    background: url(../icons/hero-vault.svg) no-repeat right 0 center / auto 72%;
}
@media screen and (max-width: 991px) {
    .bg-vault { opacity: .16; background-position: right -20% center; background-size: auto 60%; }
}
/* The case-studies category hero takes a speech bubble with the quotation mark and
   five stars (assets/icons/hero-quote.svg), chosen by "hero": "quote" in
   blog-categories.json. */
.bg-quote {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .28;
    background: url(../icons/hero-quote.svg) no-repeat right 0 center / auto 118%;
}
@media screen and (max-width: 991px) {
    .bg-quote { opacity: .16; background-position: right -25% center; background-size: auto 80%; }
}

/* ══ 13. Homepage card sections (2026-09-09, worklog (bl)) ═════════════════
   Webflow gave every card paragraph in the two "integration" sections a fixed
   18.5rem height, so the link sat at the foot and the shorter cards read
   hollow; the link follows the text, as on the DBVault reporting cards. */
.integrations_texts { height: auto; }
/* "Where to start": the intro ran alone down a 36rem column with the right
   half of the section empty. Heading left, paragraph right, on a two-column
   lead; one column at phone. The tag and the spacers keep their own rows. */
.integration_card.headings.ba-lead { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
.integration_card.headings.ba-lead > .tag-wrap, .integration_card.headings.ba-lead > .padding-bottom { grid-column: 1 / -1; }
.integration_card.headings.ba-lead > .tag-wrap { justify-self: start; }
.integration_card.headings.ba-lead > p { margin-bottom: 0; max-width: 62ch; }
@media screen and (max-width: 767px) { .integration_card.headings.ba-lead { grid-template-columns: 1fr; row-gap: 1rem; } }

/* ══ 14. Case studies (2026-09-09, worklog (bm)) ══════════════════════════════
   A post in the "case-studies" category carries a caseStudy block; the post
   view renders it as a facts panel (client, engagement, verified rating) and a
   pull quote between the hero and the narrative, and a source line after it. */
.cs-facts {
    display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: 1.5rem 2rem;
    margin: 2rem 0 2rem; padding: 1.5rem 1.75rem;
    background: #f2f3ff; border: 1px solid #d6daff; border-radius: 12px;
}
.cs-facts_h { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #013499; margin: 0 0 .5rem; line-height: 1.4; }
.cs-facts dl { margin: 0; }
.cs-facts dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem; padding: .4rem 0; border-top: 1px solid #dfe3f5; font-size: .9375rem; line-height: 1.4; }
.cs-facts dt { color: #434959; }
.cs-facts dd { margin: 0; color: #141c30; font-weight: 500; overflow-wrap: anywhere; }
.cs-facts dd a { color: #013499; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cs-score { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .5rem; }
.cs-score_num { font-size: 2.25rem; font-weight: 700; color: #141c30; line-height: 1; }
/* Five stars filled to the rating: the text is painted by a two-stop gradient
   whose split is --r (the rating as a percentage), set on the element. */
.cs-score_stars { --r: 100%; font-size: 1.25rem; letter-spacing: .08em; line-height: 1;
    background: linear-gradient(90deg, #f0b400 var(--r), #c9cfe8 var(--r));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-score_stars::before { content: "\2605\2605\2605\2605\2605"; }
.cs-metrics > div { grid-template-columns: 1fr auto; }
.cs-facts_link { display: inline-block; margin-top: .9rem; font-size: .9375rem; font-weight: 600; color: #013499; text-decoration: underline; text-underline-offset: 3px; }
.cs-quote { margin: 0 0 2.25rem; padding: 1.25rem 1.75rem; border-left: 4px solid #013499; background: #fff; }
.cs-quote p { margin: 0; font-size: 1.375rem; line-height: 1.5; color: #141c30; font-weight: 500; }
.cs-quote footer { margin-top: .6rem; font-size: .9375rem; color: #434959; }
.cs-source { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e2e2e2; font-size: .9375rem; line-height: 1.5; color: #434959; }
.cs-source a { color: #013499; }
@media screen and (max-width: 991px) { .cs-facts { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) {
    .cs-facts { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
    .cs-quote p { font-size: 1.125rem; }
}
/* Client logo on a named case study: the same file the testimonials band or the
   logo strip uses, in its own colours, boxed to a fixed height. */
.cs-logo { height: 48px; margin: .25rem 0 .75rem; display: flex; align-items: center; }
.cs-logo img { max-height: 48px; max-width: 180px; width: auto; object-fit: contain; }

/* ══ 15. Blog dropdown in the navbar (2026-09-09, worklog (bn), (bq)) ═══════
   One card per blog category on the Solutions dropdown's three-column grid,
   and an "All articles" row under them. */
/* Each card is text over button; the text row takes the slack so the three
   buttons share one baseline whatever the blurb lengths (owner, 2026-09-09). */
.ba-blog-menu .navbar9_dropdown-link-list { grid-template-rows: 1fr auto; }
.ba-blog-menu_all { grid-column: 1 / -1; display: flex; justify-content: flex-start; }

/* ══ 16. Blog heroes (2026-09-09, worklog (bp)) ══════════════════════════════
   The category page and the post page open on the same gradient band as the
   product heroes (.section_header.ba-glow, §7), carrying the H1 and intro in
   white; the content section beneath drops its 10rem nav clearance. */
.ba-blog-hero_pad { position: relative; z-index: 1; padding-top: 10rem; padding-bottom: 4.5rem; }
.ba-blog-hero h1 { color: #fff; }
.ba-blog-hero p, .ba-blog-hero p a { color: rgba(255, 255, 255, .88); }
.ba-blog-hero p a { text-decoration: underline; text-underline-offset: 3px; }
.ba-blog-hero .blog-category-intro, .ba-blog-hero .blogpost-title-wrapper { margin-bottom: 0; }
.padding-section-blog.ba-after-hero { padding-top: 3rem; }
@media screen and (max-width: 767px) {
    .ba-blog-hero_pad { padding-top: 7rem; padding-bottom: 3rem; }
    .padding-section-blog.ba-after-hero { padding-top: 2rem; }
}

/* ══ 17. "Latest Blogs" block with case-study cards (2026-09-09, worklog (br)) ═
   partials/latest-posts.handlebars: the three newest articles, then the three
   newest case studies as quote-led cards (rating, the client's words, who said
   it, the title, Read more). */
.ba-latest_all { display: inline-flex; gap: .5rem; color: #013499; font-weight: 600; }
.ba-latest_all:hover { color: #3898ec; }
.ba-latest_all svg { width: 16px; height: 16px; }
/* Cards fill their row so the dates and the Read-more links sit on one line;
   every list (latest block, category page, blog index) the same way. */
.blog-list .blog-item { display: flex; }
.blog-list .blog-card { width: 100%; display: flex; flex-direction: column; }
.ba-latest_meta { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: 1rem; color: #434959; }
.ba-latest_cs-heading { margin-top: 4rem; }
/* The case-studies row on its own (product pages) opens at the top of its section. */
.ba-latest_standalone .ba-latest_cs-heading { margin-top: 0; }
.cs-card { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem 1.5rem 1.25rem; background: #fff; }
/* The cover shrunk to a bar across the top of the card: the three interim covers
   repeat across every case study, and at card size they read as empty (owner,
   2026-09-09); the bar keeps a line of colour until the G-21 images arrive. */
.cs-card_bar { height: 40px; margin: -.5rem -.5rem .25rem; border-radius: .6rem; overflow: hidden; }
.cs-card_bar img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; display: block; }
.cs-card_top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.cs-card_rating { display: inline-flex; align-items: center; gap: .4rem; }
.cs-card_rating .cs-score_stars { font-size: 1.05rem; }
.cs-card_score { font-weight: 700; color: #141c30; font-size: .9375rem; }
.cs-card_quote { margin: 0; font-size: 1.1875rem; line-height: 1.5; font-weight: 500; color: #141c30; }
.cs-card_client { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; }
.cs-card_logo { max-height: 32px; max-width: 120px; width: auto; object-fit: contain; }
.cs-card_who { font-size: .875rem; line-height: 1.4; color: #434959; }
.cs-card_title { margin: .25rem 0 0; padding-top: .9rem; border-top: 1px solid #e6e8f5; font-size: 1.125rem; line-height: 1.35; color: #141c30; }
.cs-card_more { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; color: #013499; font-weight: 600; font-size: .9375rem; }
.cs-card_more svg { width: 16px; height: 16px; transition: transform .2s; }
.cs-card:hover .cs-card_more svg { transform: translateX(3px); }
@media screen and (max-width: 767px) { .ba-latest_cs-heading { margin-top: 2.5rem; } .cs-card_quote { font-size: 1.0625rem; } }

/* ══ 18. Homepage solution cards: the whole tile is the link (2026-09-09, worklog (bs)) ═
   The "Learn more" button read as the only clickable part. An empty .ba-tile-link
   anchor (aria-hidden, unfocusable) is stretched over each card, so a click anywhere
   on the tile navigates while the button stays the accessible link, and the tile
   lifts on hover like the blog cards. `translate`, not `transform`: Webflow's entrance animation
   leaves an inline transform on the card that would override a hover transform. */
.solutions_services { position: relative; cursor: pointer; transition: translate .35s, box-shadow .2s; }
.solutions_services:hover { translate: 0 -10px; box-shadow: 1px 5px 5px #10182833; }
.ba-tile-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .solutions_services:hover { translate: none; } }

/* ══ 19. Print (2026-09-09, worklog (bv)) ═════════════════════════════════════
   Case studies carry a "Print / PDF" link (site.js block 5). On paper the page
   is the title, intro, facts panel, quote, narrative and source line: no nav,
   footer, CTA, related posts, share links or animated band. */
/* The Print / PDF link reads as a button, not as one of the grey share links
   beside it (owner could not find it, 2026-09-09). */
.blogpost-meta-share a.ba-print { color: #013499; border: 1.5px solid #013499; border-radius: 6px; padding: .35rem .8rem; font-weight: 600; margin-right: .5rem; }
.blogpost-meta-share a.ba-print:hover { background: #013499; color: #fff; }
.ba-print svg { width: 16px; height: 16px; fill: currentColor; }
.ba-print-header { display: none; }
@media print {
    @page { margin: 16mm; }
    /* The logo heads the first page, with a clear gap before the title (owner). */
    .ba-print-header { display: block; margin: 0 0 22mm; padding-bottom: 6mm; border-bottom: 1px solid #ccc; }
    .ba-print-header img { height: 12mm; width: auto; }
    #ba-stage-banner, #nav-general, .footer, .section_cta, .section_latest-blog,
    .blogpost-meta-share, .ba-draft-banner, .section_testimonial, .w-nav-overlay { display: none !important; }
    html { font-size: 11pt; }
    body { background: #fff; color: #000; }
    /* Webflow's entrance animation leaves inline opacity/transforms behind. */
    [data-w-id] { opacity: 1 !important; transform: none !important; }
    .ba-blog-hero, .ba-blog-hero.section_header.ba-glow { background: none !important; }
    .ba-glow::before { display: none !important; }
    .ba-blog-hero h1, .ba-blog-hero p { color: #000 !important; }
    .ba-blog-hero_pad { padding: 0 0 .5rem; }
    .padding-section-blog.ba-after-hero { padding-top: 0; padding-bottom: 0; }
    .padding-global { padding-left: 0; padding-right: 0; }
    .blogpost-title-wrapper h1.heading-style-h2 { font-size: 22pt; }
    .blogpost-title-wrapper p { font-size: 12pt; }
    .blogpost-meta { border-bottom: 1px solid #999; }
    .cs-facts { grid-template-columns: 1.15fr 1fr .9fr; break-inside: avoid; border-color: #bbb; background: #f4f5fb;
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cs-score_stars { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cs-quote { break-inside: avoid; border-left-color: #000; }
    .rich-text.blog-post { font-size: 11pt; line-height: 1.5; }
    .rich-text.blog-post h2 { font-size: 15pt; margin-top: 1.4rem; break-after: avoid; }
    .rich-text.blog-post a { color: #000; text-decoration: none; }
    .cs-facts_link::after, .cs-source a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
    .cs-source::before { content: "Printed from www.blueacrobat.com. "; }
}

/* ══ 20. Questions section as two packed columns of cards (2026-09-09, worklog (ce)) ═
   Webflow's .faq-list is one column across the whole container, so nine
   always-open answers at 15px ran to 190 characters a line and stacked into a
   long strip. Opt in with .ba-faq on .faq-component: two CSS columns of white
   cards, question over answer. Columns, not a grid: answers differ in length,
   and a grid row takes its tallest card's height, leaving ragged gaps beside the
   short ones (owner, 2026-09-09); columns pack each card under the last. */
.ba-faq .faq-list { display: block; columns: 2; column-gap: 1.5rem; }
.ba-faq .faq-accordion { display: block; break-inside: avoid; margin: 0 0 1.5rem; background: #fff; border: 1px solid #d6daff; border-radius: 12px; padding: .5rem 0 .75rem; }
.ba-faq .faq-question { padding: 1.25rem 1.75rem .5rem; cursor: default; }
.ba-faq .faq-question h3 { font-size: 1.1875rem; line-height: 1.35; color: #141c30; margin: 0; }
.ba-faq .faq-answer { padding: 0 1.75rem .5rem; }
.ba-faq .faq-answer p { font-size: 1rem; line-height: 1.65; color: #434959; margin: 0; }
.ba-faq .faq-answer .padding-bottom { display: none; }
@media screen and (max-width: 991px) {
    .ba-faq .faq-list { columns: 1; }
}

/* ══ 21. Homepage solution cards: spacing (2026-09-09, worklog (cf)) ═══════════
   Webflow's cards are flex columns with space-between, so the shorter card
   (AcroFile) opened a 140px hole between its text and its button, and the
   DBVault card kept 109px of padding under its button with the top-right
   corner empty. Text, then the button close beneath it, then the illustration
   at the foot; the DBVault illustration fills the card's height on the right. */
@media screen and (min-width: 992px) {
    /* The two top cards: a grid with the text across the top and, beneath it, the
       button at the left and the illustration at the right, so the card is as tall
       as text plus picture, not text plus button plus picture. */
    .solutions_services.bg-grey3:not(.flex-h) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; justify-content: normal; }
    .solutions_services.bg-grey3:not(.flex-h) .solution_services-content { grid-column: 1 / -1; }
    .solutions_services.bg-grey3:not(.flex-h) .solutions_button-wrapper { grid-column: 1; grid-row: 2; align-self: start; margin-top: 1.5rem; }
    .solutions_services.bg-grey3:not(.flex-h) .solutios_img { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin-top: 1rem; }
    .solutions_services .solutions_button-wrapper { margin-top: 1.5rem; }
    .solutions_services.bg-grey3.flex-h.width100 { padding-bottom: 30px; }
    .solutios_img-copy { inset: 24px 0 0 auto; display: flex; align-items: flex-end; justify-content: flex-end; min-width: 0; max-width: 46%; }
    .solutios_img-copy .image { width: auto; height: auto; max-height: 100%; max-width: 100%; }
}