/* The root spacing.blockGap (theme.json) puts a 2rem margin-top between
   top-level template parts/blocks (announcement bar, header, main,
   newsletter, footer) via WP's unlayered ".wp-site-blocks > * + *" global
   style. Each of those regions already owns its own vertical rhythm
   (padding, section backgrounds), so that extra margin only opens a gap
   that exposes the body's page background between them. */
.wp-site-blocks > * {
  margin-block: 0 !important;
}

/* Same leak, one level deeper: every page's <main class="wp-block-group">
   wraps its wp:pattern sections in a "constrained" layout, so WP also
   applies the root 2rem blockGap as margin-block-start between each
   pattern section via its own unlayered global style. Each section
   already owns its rhythm via .l-section padding (see below), so that
   extra 2rem just opens a strip of the page background between adjacent
   sections — invisible when both happen to share the page's background
   color, but a visible seam wherever two different u-surface-* sections
   meet back to back (e.g. about-values' dark surface into about-cta's
   ember surface). */
main.wp-block-group > * + * {
  margin-block-start: 0 !important;
}

.l-container {
  width: min(100% - (2 * var(--gutter)), var(--container-2xl));
  margin-inline: auto;
}

.l-container--xl { max-width: var(--container-xl); margin-inline: auto; }
.l-container--lg { max-width: var(--container-lg); margin-inline: auto; }
.l-container--md { max-width: var(--container-md); margin-inline: auto; }
.l-container--sm { max-width: var(--container-sm); margin-inline: auto; }
.l-container--text-lg { max-width: var(--container-text-lg); margin-inline: auto; }
.l-container--text-md { max-width: var(--container-text-md); margin-inline: auto; }
.l-container--text-sm { max-width: var(--container-text-sm); margin-inline: auto; }

/* Major section rhythm, target ~84-92px at typical desktop widths. */
.l-section {
  padding-block: clamp(4.375rem, 2.5vw + 2.5rem, 5.75rem);
}

/* Medium section rhythm, target ~66-78px. */
.l-section--compact {
  padding-block: clamp(3rem, 2vw + 2rem, 4.875rem);
}

/* Adjacent sections each carry their own top+bottom padding, which would
   otherwise stack into a much larger gap than intended wherever two
   sections meet directly with no other content between them. Drop the
   latter section's top padding so a single section's worth of space
   shows at the seam; the background-color change still marks the
   boundary. */
.l-section + .l-section,
.l-section + .l-section--compact,
.l-section--compact + .l-section,
.l-section--compact + .l-section--compact {
  padding-top: 0;
}

/* Opt-in escape hatch for a section that wants its own top padding back
   despite following another .l-section directly (e.g. it needs visual
   separation even though the background color alone doesn't mark a
   boundary). Same specificity (two classes) as the zeroing rule above,
   so source order — this coming after — decides the winner without
   needing !important. */
.l-section.l-section--pt-restore {
  padding-top: clamp(4.375rem, 2.5vw + 2.5rem, 5.75rem);
}

.l-grid { display: grid; gap: var(--grid-gap); }

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-6));
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-4));
}

/* WordPress's default ("flow"/"constrained") block layout adds margin-block
   between direct children (`:root :where(.is-layout-flow) > *` and the
   -constrained twin, both one-class specificity, neither !important). These
   components take over layout with their own display:flex/grid and gap, so
   that inherited margin only doubles or misaligns spacing — neutralize it
   here rather than per-component.

   NOT !important, deliberately. This selector matches core's specificity and
   the theme's CSS prints after core's (see inc/assets.php), so it already
   wins. Adding !important here would also outrank each component's OWN child
   margins — `margin-top: auto` bottom-pinning on card footers, and the
   per-child margins in the testimonial/review/value cards — silently
   deleting the spacing those components depend on. Component files load
   after this one, so with a normal declaration they override it naturally,
   which is what you want. */
.c-announcement > *,
.c-site-header > *,
.c-site-header__inner > *,
.c-site-header__utility > *,
.c-header-search > *,
.c-site-header__nav-row > *,
.c-site-header__waitlist > *,
.c-header-actions > *,
.c-article-toc > *,
.c-article-toc__details > *,
.c-site-footer__main > *,
.c-site-footer__brand > *,
.c-site-footer__legal > *,
.c-article-card > *,
.c-article-card__body > *,
.c-article-card__footer > *,
.c-newsletter > *,
.c-newsletter__copy > *,
.c-hero > *,
.c-hero__panel > *,
.c-hero__rating > *,
.c-benefit-grid > *,
.c-benefit-card > *,
.c-benefit-card__body > *,
.c-benefit-tile > *,
.c-step-grid > *,
.c-step > *,
.c-testimonial-grid > *,
.c-testimonial-card > *,
.c-testimonial-card__meta > *,
.c-testimonial-card__identity > *,
.c-review-card > *,
.c-waitlist-hero__offer > *,
.c-waitlist-hero__form-inner > *,
.c-learn-filters__inner > *,
.c-contact > *,
.c-contact__rows > *,
.c-contact__row > *,
.c-page-hero__inner > *,
.c-values-grid > *,
.c-value-card > *,
.c-editorial > *,
.c-editorial__body > * {
  margin-block: 0;
}