/* ==========================================================================
   Block gap — the one rule for the space BETWEEN blocks (owner, 2026-10-16).
   Doc: docs/BLOCK_GAP.md · guideline: /guidelines §1 · proof: npm run audit:gaps

   Gap = from the last visible thing of a block (text line, image, button, card,
   or the edge of a coloured band) to the first visible thing of the next one.
   It is --block-gap everywhere: 9.375rem (150px at 1440, scales with the fluid
   root like every other value on the site), 6.25rem ≤767 (80px), 5rem ≤479 (80px).
   These are the site's existing .padding-t-b steps — the token just names them.

   How it works (main.main-wrapper is a flex column, so margins never collapse):
   each top-level block cancels its own air below its content and puts
   (gap − its air above its content) above itself. Nothing inside a block moves;
   only the distance between blocks changes.

     --air-t  space between the block's top edge and its first visible thing
     --air-b  space between its last visible thing and its bottom edge
     Default for both = --block-gap (a section wrapped in .padding-global.padding-t-b).
     A coloured band / card that starts at its own edge: 0.
     Anything else: declare it next to the block's padding (component CSS) or below.
   ========================================================================== */

:root { --block-gap: 9.375rem; }
@media screen and (max-width: 767px) { :root { --block-gap: 6.25rem; } }
@media screen and (max-width: 479px) { :root { --block-gap: 5rem; } }

/* Joined blocks are one block split over two sections; their seam belongs to the hero's own
   layout (HERO_RULES.md), not to the gap: the hero + its visual (logos / image / proof row)
   and the home hero + its lottie (a 750vh sticky scroll whose end frame depends on the
   viewport height — its seam to the next block stays as built). The pre-footer CTA keeps its own seam to the footer
   (FOOTER_CTA_RULES.md) and the floating bottom-bar is not a block. */
main.main-wrapper:not(.gl) > :not(:first-child, .section_industry-hero-visual, .section_services-hero-visual,
    .section_industry-hero-proof, .section_lottie, .section_lottie ~ .section_stk.is-dots, .bottom-bar) {
  margin-top: calc(var(--block-gap) - var(--air-t, var(--block-gap)));
}
main.main-wrapper:not(.gl) > :not(.section_industry-hero, .section_services-hero, .section_hero:has(+ .section_lottie),
    .section_industry-hero-visual:has(+ .section_industry-hero-proof), .section_lottie, .section_cta-wrapper, .bottom-bar) {
  margin-bottom: calc(0px - var(--air-b, var(--block-gap)));
}
.section_cta-wrapper { --air-t: 0px; }

/* A page without the CTA ends on a block. That block keeps its own bottom margin (main clips
   its overflow, so a negative margin there would cut the block's content off) and the footer
   takes the whole correction: one gap under the block's last visible thing. */
main.main-wrapper.main-wrapper:not(.gl):not(:has(> .section_cta-wrapper)) > :is(section, div):not(:has(~ :is(section, div))) {
  margin-bottom: 0;
}
main.main-wrapper:not(.gl):not(:has(> .section_cta-wrapper)) + .section_footer {
  margin-top: calc(var(--block-gap) - var(--footer-air-t, 4.5rem) - var(--last-air-b, var(--block-gap)));
}
/* the last block's air, for the footer rule (inherited from the wrapper around main + footer) */
:has(> main.main-wrapper > .section_contact) { --last-air-b: 13.125rem; }
:has(> main.main-wrapper > [data-block="awards"]) { --last-air-b: 2.25rem; }
@media screen and (max-width: 991px) { :has(> main.main-wrapper > .section_contact) { --last-air-b: 2.75rem; } }
@media screen and (max-width: 767px) { :has(> main.main-wrapper > [data-block="awards"]) { --last-air-b: 0px; } }

/* ---- Registry: Webflow-class blocks whose air is not the default ---------- */

/* Coloured bands and cards that start / end at their own edge */
:is(.section_pricing-tiers, .section_gray, .section_industry-approach,
    .section_showcase, .section_stk.is-dots, .section_process, .section_team,
    .section_trial:not(.is-dark)) { --air-t: 0px; --air-b: 0px; }
/* a plain wrapper (an anchor div, a pin) around one of them */
main.main-wrapper > div:not([class]):has(> :is(.section_industry-approach, .section_team)) { --air-t: 0px; --air-b: 0px; }
.section_lendflow, .section_mvp-roadmap.is-lines { --air-t: 0px; }
.section_stk { --air-b: 0px; }

/* Heroes not joined to a visual: content sits on the hero's own bottom padding */
.section_hero { --air-b: 0px; }
@media screen and (max-width: 991px) { .section_hero { --air-b: 4rem; } }
@media screen and (max-width: 767px) { .section_hero { --air-b: 3rem; } }

/* Hero visuals end at their lowest logo (HeroLogos trims the chip under it). */
:is(.section_industry-hero-visual, .section_services-hero-visual):has(.h2l:not(.is-gap)) { --air-b: 0px; }

/* A block whose top air would exceed the gap gets its own top padding trimmed instead of a
   negative margin: pulled up, its ground would paint over the end of the block above. These
   are the Webflow phone paddings of 100px (> the 80px gap) and the /ai trial block's 9.375rem
   on tablets-in-portrait. */
@media screen and (max-width: 767px) {
  main.main-wrapper > .section_trial.is-dark > .padding-t-b { padding-top: var(--block-gap); }
}
@media screen and (max-width: 479px) {
  main.main-wrapper > :is(.section_case-studies, .section_mvp-roadmap:not(.is-lines), .section_stk:not(.is-dots), .section_trial.is-dark)
    > .padding-global:is(.startups, .mob-custom, .pd-mob-mvp, .padding-t, .mobile-no-paddings) { padding-top: var(--block-gap); }
}

/* ---- Measured airs (rem, from npm run audit:gaps). A block's content does not start or end
   on its padding here — a rotated photo, a card stack, a line box, an inner offset. Re-measure
   after editing one of these blocks. Regimes: default ≥992 · ≤991 · ≤767 · ≤479. */

/* heroes */
.section_hero.is-work { --air-b: 1rem; }
.section_hero.bg-dark { --air-b: 7.1875rem; }                       /* /ai: the card stack */
.section_industry-hero-proof { --air-b: 4rem; }
@media screen and (max-width: 991px) {
  .section_hero.is-work { --air-b: 5rem; }
  .section_hero.is-case-study { --air-b: 0px; }
  .section_hero.bg-dark { --air-b: 11.1875rem; }
  .section_about-entry { --air-b: 0px; }
}
@media screen and (max-width: 767px) {
  .section_hero.is-work { --air-b: 4rem; }
  .section_hero.is-case-study { --air-b: 0px; }
  .section_hero.bg-dark { --air-b: 8.25rem; }
}
@media screen and (max-width: 479px) {
  .section_hero.is-work { --air-b: 3.75rem; }
  .section_hero.is-case-study { --air-b: 1.5rem; }
  .section_hero.bg-dark { --air-b: 9.0625rem; }
}

/* FAQ: the last question's text sits on its row's 2rem padding */
.section_faq { --air-b: 11.375rem; }
@media screen and (max-width: 767px) { .section_faq { --air-b: initial; } }

/* home · /product-design-agency */
#start.cgrid { --air-b: 10.5rem; }
@media screen and (max-width: 767px) {
  #start.cgrid { --air-b: 7.1875rem; }
  .section_case-studies:has(> .padding-t-b.mob-custom) { --air-t: 9.375rem; --air-b: 9.375rem; }
  .section_industry-trustedby:has(.itb_point-desc) { --air-b: 9.3125rem; }
  [data-block="trial-formats"], [data-block="trial-start"] { --air-b: 4.75rem; }
  .section_testimonials { --air-t: 4.625rem; --air-b: 0px; }
}
@media screen and (max-width: 479px) {
  .section_lendflow { --air-b: 6.25rem; }
  .section_testimonials { --air-b: 0.3125rem; }
  .q4-sec { --air-b: 5.3125rem; }
  #start.cgrid { --air-b: 5.875rem; }
  .section_industry-trustedby:has(.itb_point-desc) { --air-b: 8rem; }
  [data-block="trial-formats"], [data-block="trial-start"] { --air-b: 3.5rem; }
}

/* /services/branding: the image visual ends 3.5rem above its box; on phones the proof row
   under it is an empty 5rem box, so the gap runs from the image to the next block */
.section_industry-hero-visual:has(.industry-hero_img) { --air-b: 3.5rem; }
@media screen and (max-width: 767px) {
  main.main-wrapper:not(.gl) > .section_industry-hero-visual:has(+ .section_industry-hero-proof.is-m2026) { margin-bottom: calc(0px - var(--air-b)); }
  .section_industry-hero-proof.is-m2026 { --air-b: 5rem; }
}

/* /about-us */
[data-block="about-mission"] { --air-b: 11.0625rem; }              /* the tilted photo */
@media screen and (max-width: 991px) {
  [data-block="about-mission"] { --air-b: 12.0625rem; }
}
@media screen and (max-width: 767px) {
  [data-block="about-mission"] { --air-b: 8.9375rem; }
}
@media screen and (max-width: 479px) {
  [data-block="about-mission"] { --air-b: 7.6875rem; }
}

/* /ai (and the awards block on /awards-light) */
.section_clients { --air-t: 3.125rem; --air-b: 3.1875rem; }
.section_experience { --air-t: 6.25rem; }
.section_choice { --air-t: 4.5rem; --air-b: 8.625rem; }              /* pinned: GSAP copies these margins onto its spacer */
[data-block="awards"] { --air-t: 2.25rem; --air-b: 2.25rem; }
@media screen and (max-width: 991px) {
  .section_choice { --air-t: 9.1875rem; --air-b: 18rem; }
  .section_services.is-dark { --air-b: 8.6875rem; }
}
@media screen and (max-width: 767px) {
  .section_clients { --air-t: 7.125rem; --air-b: 3.1875rem; }
  :is([data-block="ai-truth"], [data-block="ai-collab"]) { --air-t: 9.375rem; --air-b: 0px; }
  .section_experience { --air-b: 0px; }
  .approach-section { --air-t: 5.3125rem; --air-b: 4.625rem; }
  .section_services.is-dark { --air-t: 4.5625rem; --air-b: 7.75rem; }
  .section_trial.is-dark { --air-b: 2.375rem; }
  .section_choice { --air-t: initial; --air-b: -3.8125rem; }        /* not pinned on phones; its card hangs below the box */
  [data-block="awards"] { --air-b: 0px; }
  .section_footer[class*="w-variant-bb70a7ec"] { --footer-air-t: 0px; }
}
@media screen and (max-width: 479px) {
  .section_clients { --air-t: 6.5rem; --air-b: 2.5rem; }
  .section_trial.is-dark { --air-b: 1.875rem; }
  .section_case-studies:has(> .padding-t-b.mob-custom) { --air-t: initial; }
  :is([data-block="ai-truth"], [data-block="ai-collab"]) { --air-t: 6.25rem; }
  .section_choice { --air-t: 6.1875rem; --air-b: -14.875rem; }      /* its card hangs below the box */
}

/* /services */
[data-block="services-rewards"] { --air-b: 11.375rem; }
@media screen and (max-width: 991px) { [data-block="services-rewards"] { --air-b: 0px; } }

/* /cases: the logo wall sits in a padded wrapper */
main.main-wrapper > .padding-section-150 { --air-t: 12.5rem; --air-b: 12.5rem; }
@media screen and (max-width: 991px) { main.main-wrapper > .padding-section-150 { --air-b: 11.9375rem; } }
@media screen and (max-width: 767px) { main.main-wrapper > .padding-section-150 { --air-t: 16.5rem; --air-b: 12.625rem; } }
@media screen and (max-width: 479px) { main.main-wrapper > .padding-section-150 { --air-t: 15.875rem; --air-b: 11.875rem; } }

/* /blog · blog articles */
#posts { --air-t: 6.25rem; --air-b: 6.5rem; }
main.main-wrapper > section:has(> .pad-100.pad-50-mobile) { --air-t: 6.25rem; --air-b: 6.25rem; }
main.main-wrapper > section:has(> .toc__main) { --air-t: 6.1875rem; --air-b: 6.25rem; }
@media screen and (max-width: 767px) {
  #posts { --air-t: 1.5rem; --air-b: 3.375rem; }
  main.main-wrapper > section:has(> .pad-100.pad-50-mobile) { --air-t: 3.0625rem; --air-b: 3.125rem; }
  main.main-wrapper > section:has(> .toc__main) { --air-t: 2rem; --air-b: 3.125rem; }
  main.main-wrapper > section:not(.section_gray):has(> .padding-t-b.is-blog-post) { --air-t: 3.0625rem; --air-b: 3.125rem; }
}

/* case studies: the blocks keep 9.375rem on phones; full-bleed shots and the 80px variants */
@media screen and (max-width: 767px) {
  main.main-wrapper > section:has(> .padding-global > * > .padding-section-150) { --air-t: 9.375rem; --air-b: 9.375rem; }
  main.main-wrapper > section:has(> .padding-t-b.is-case-study-no-p) { --air-t: 0px; --air-b: 9.375rem; }
}
@media screen and (max-width: 479px) {
  main.main-wrapper > section:has(> .padding-global > * > .padding-section-150.mob-padding-0) { --air-t: 0px; --air-b: 0px; }
  main.main-wrapper > section:has(> .padding-t-b.is-case-study-no-p) { --air-b: 0px; }
  main.main-wrapper > section:has(> .padding-global > * > .padding-section-150.mob-padding-80) { --air-t: 5rem; --air-b: 5rem; }
  main.main-wrapper > section:has(> .padding-global > * > .padding-section-150.mon-padding-bottom-80) { --air-t: 0px; --air-b: 5rem; }
}

/* legal · contact */
.policy { --air-b: 5rem; }

/* the footer's own top (pages without the CTA) */
@media screen and (max-width: 767px) { :root { --footer-air-t: 6.5rem; } }
@media screen and (max-width: 479px) {
  :root, .section_footer[class*="w-variant-bb70a7ec"] { --footer-air-t: 4.1875rem; }
}