/* site-v4-sections.css — family layer of the D-034 site-wide uplevel; see site-v4.css.
   Owner: body sections of the marketing templates (feature, product, solution, compare, integration, partnership,
   switch, pricing body, customers, about, services, white-label, partners, nexus, commitment).
   The homepage (`/`) is the reference and is never restyled here: every rule is either scoped to captured components the
   homepage does not use, or excluded with body:not(:has(.z3-hero)).
   Frames, surfaces, spacing, alignment and type only; artwork, photos and copy are untouched. */

/* ── 0 · Local tokens ─────────────────────────────────────────────────────────────────────────────────────────── */
:root { --z4s-rule: #e6e1da; --z4s-rule-card: #e0dbd2; --z4s-g: 3.75rem; }
@media (max-width: 991px) { :root { --z4s-g: 1.875rem; } }
@media (max-width: 767px) { :root { --z4s-g: 1.5rem; } }
@media (max-width: 479px) { :root { --z4s-g: 1.25rem; } }

/* ── 1 · Section headers ──────────────────────────────────────────────────────────────────────────────────────────
   A header with an H2 and a supporting lead becomes the homepage split header: (tag +) H2 on columns 1–7, lead on 8–12,
   bottom-aligned. A header that is a single statement (H2 only) stays centred. Header → content is always 64 / 48. */
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--z4-gap); row-gap: 0;
  align-items: end; max-width: none; margin-left: 0; margin-right: 0; text-align: left;
}
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > * { grid-column: 1 / span 7; min-width: 0; }
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > .margin-bottom { grid-row: 1; }
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > div:has(> h2) { grid-row: 2; }
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > .margin-top {
  grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; margin-top: 0;
}
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > .margin-top > p {
  max-width: 30rem; margin: 0; color: var(--z4-body);
}
/* pretty, not balance: balance split compounds such as "e-commerce" at the hyphen in the narrower 7-column measure. */
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) h2 { margin: 0; text-wrap: pretty; }
/* Single-statement headers: centred H2 on the section scale, balanced. */
body:not(:has(.z3-hero)) main .text-component:has(> div > h2):not(:has(> .margin-top > p)) h2 { margin-left: auto; margin-right: auto; }
/* Header → content: one gap. */
body:not(:has(.z3-hero)) main :is(.text-component, .split-text-component):has(h2) + .spacer-component { padding-top: var(--z4-head-gap) !important; }
/* Dark fields: lead in the on-dark tint. */
:is(.background-color-black, .background-color-green) .text-component > .margin-top > p { color: var(--z4-on-green); }

/* Split text header (H2 + action, e.g. "Related Blogs / View all"): same split, action = outline button. */
body:not(:has(.z3-hero)) main .split-text-component {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--z4-gap); row-gap: 24px; align-items: end; max-width: none;
}
body:not(:has(.z3-hero)) main .split-text-component > * { grid-column: 1 / span 7; min-width: 0; }
body:not(:has(.z3-hero)) main .split-text-component > .split-text-info { grid-column: 8 / -1; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
body:not(:has(.z3-hero)) main .split-text-component h2 { margin: 0; }
body:not(:has(.z3-hero)) main .split-text-component .button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; height: auto; padding: 0 24px; font-size: 16px; font-weight: 500; line-height: 1;
  background: transparent; color: var(--z4-act); border: 0; box-shadow: inset 0 0 0 1px var(--z4-act);
}
body:not(:has(.z3-hero)) main .split-text-component .button:not(.is-link):hover { background: var(--z4-act); color: #fff; }

@media (max-width: 767px) {
  body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *),
  body:not(:has(.z3-hero)) main .split-text-component { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > *,
  body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > .margin-top,
  body:not(:has(.z3-hero)) main .split-text-component > *,
  body:not(:has(.z3-hero)) main .split-text-component > .split-text-info { grid-column: 1; grid-row: auto; }
  body:not(:has(.z3-hero)) main .text-component:has(> div > h2):has(> .margin-top > p):not(.align-center):not([style*="max-width"]):not(.split-component *) > :is(.margin-bottom, div:has(> h2), .margin-top) { grid-row: auto; }
  body:not(:has(.z3-hero)) main .split-text-component > .split-text-info { align-items: flex-start; }
}

/* ── 2 · Customer-logo bar → the homepage logo band ───────────────────────────────────────────────────────────────
   A section whose only content is a short heading + the logo marquee becomes a ruled band: label on the left
   (14px/500, rule to its right), greyscale logos fading at both edges. White band after a warm hero, warm otherwise. */
body:not(:has(.z3-hero)) main > .section_component:has(.section-padding > .customers-logo-component):not(:has(.section-padding > :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) {
  background: var(--z4-warm); border-top: 1px solid var(--z4-rule); border-bottom: 1px solid var(--z4-rule);
}
body:not(:has(.z3-hero)) main > .section_component.background-color-beige + .section_component:has(.section-padding > .customers-logo-component):not(:has(.section-padding > :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) {
  background: #fff; border-top-color: var(--z4-rule);
}
body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) {
  display: flex; align-items: center; gap: 32px; padding-top: 40px !important; padding-bottom: 40px !important;
}
body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .spacer-component { display: none; }
body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .text-component {
  flex: 0 0 auto; max-width: 13.5rem; margin: 0; padding-right: 32px; border-right: 1px solid var(--z4-rule-2); text-align: left;
}
body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .text-component :is(h1, h2, h3, h4, h5, h6) {
  margin: 0; max-width: none; font: 500 14px/1.4 var(--z-font-body) !important; letter-spacing: 0; color: var(--z4-body); text-wrap: pretty;
}
body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .customers-logo-component {
  flex: 1 1 auto; min-width: 0;
}
/* Every logo marquee: edge fade instead of the captured white shade blocks (which showed on warm fields). */
main .customers-logo-component { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
main .customers-logo-component > :is(.customers-logo-left-shade, .customers-logo-right-shade) { display: none; }
@media (max-width: 767px) {
  body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) {
    flex-direction: column; align-items: stretch; gap: 16px; padding-top: 28px !important; padding-bottom: 28px !important;
  }
  body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .text-component {
    max-width: none; padding-right: 0; border-right: 0;
  }
  body:not(:has(.z3-hero)) main .section-padding:has(> .customers-logo-component):not(:has(> :not(.text-component, .spacer-component, .customers-logo-component))):not(:has(.text-component p)) > .text-component :is(h1, h2, h3, h4, h5, h6) { font-size: 13px !important; }
  main .customers-logo-component { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
}

/* ── 3 · Cards: the homepage card standard ────────────────────────────────────────────────────────────────────────
   Sharp; warm card on white or white card on warm; 1px rule frame; 32/24 padding; icon tile → title 24 → copy 8;
   actions pushed to the bottom; linked cards' frame turns black on hover. */
main :is(.cards-component, .insights-component, .zamp-commitment) .feature-card:not(.z-feature-card-light-opacity),
main .feature-card:not(.z-feature-card-light-opacity):not(.about_hero_stat),
main :is(.multi-feature-card, .resource_card, .press_card, .quote-card, .customers-quote-card) {
  border-radius: 0; box-shadow: none; outline: 1px solid var(--z4s-rule-card); outline-offset: -1px;
}
main .feature-card:not(.z-feature-card-light-opacity), main :is(.multi-feature-card, .resource_card, .press_card, .quote-card) { background-color: var(--z4-warm); }
/* White card on warm fields. */
main :is(.background-color-beige, .background-color-light-beige, .section_products-tabs) :is(.feature-card:not(.z-feature-card-light-opacity), .multi-feature-card, .resource_card, .press_card, .quote-card, .customers-quote-card) { background-color: #fff; }
main :is(.feature-card, .multi-feature-card, .resource_card, .press_card, .quote-card) { padding: var(--z4-card-pad); }
/* Icon tile → title → copy. */
main .feature-card > .margin-bottom.margin-large { margin-bottom: 24px; }
main .feature-card .feature_card_stat:empty, main .resource_card > p:empty { display: none; }
main :is(.feature-card .feature_card_title, .resource_card_title, .feature-card h3) { margin: 0; text-wrap: balance; }
main :is(.feature-card .feature_card_desc, .resource_card_para) { display: block; margin-top: 8px; font-size: 16px !important; line-height: 1.6 !important; color: var(--z4-body); text-wrap: pretty; }
main .resource_card_media { margin-bottom: 24px; }
main .multi-feature-card > .margin-bottom:first-child { margin-bottom: 24px; }
main .multi-feature-card > .margin-bottom:first-child > :is(h3, h4, h5, h6) {
  margin: 0; font: 400 var(--z-type-card-size)/1.3 var(--z-font-heading) !important; letter-spacing: -.005em; color: var(--z4-ink); text-wrap: balance;
}
main .multi-feature-card .switch_beneift_li { color: var(--z4-body); }
main .feature-card .feature_card_title + .feature_card_desc { margin-top: 8px; }
main .feature-card > div > h3 + .margin-top { margin-top: 8px; }
main .feature-card :is(p, .text-size-medium):not(.feature_card_stat):not(.feature_card_title) { color: var(--z4-body); }
/* Dark-field cards (problem grids on black): translucent tile with the on-dark rule and tint. */
main .feature-card.z-feature-card-light-opacity { padding: var(--z4-card-pad); outline: 1px solid var(--z4-rule-green); outline-offset: -1px; }
main .feature-card.z-feature-card-light-opacity :is(.feature_card_desc, p) { color: var(--z4-on-green); }
/* Actions sit at the bottom of the card. */
main :is(.resource_card, .press_card, .feature-card) > .margin-top:last-child { margin-top: auto; padding-top: 24px; }
/* Linked cards: whole-frame hover. */
main :is(a.press_card, a.feature-card, .resource_card:has(a), .feature-card:has(> a:only-child)) { transition: outline-color .15s; }
main :is(a.press_card, a.feature-card, .resource_card:has(a)):hover { outline-color: var(--z4-act); }
main :is(a.press_card, a.feature-card) { color: inherit; text-decoration: none; }
/* The card frame uses outline, so restore the site focus ring explicitly for linked cards. */
main :is(a.press_card, a.feature-card):focus-visible { outline: 2px solid var(--z4-green); outline-offset: 2px; }

/* Card grids: 24px gutter (16 on phones). */
main .cards-component :is(._3col-grid, ._2col-grid, ._2_col_grid, ._4col-grid, .home_stats_grid) { gap: var(--z4-gap); }
@media (max-width: 767px) { main .cards-component :is(._3col-grid, ._2col-grid, ._2_col_grid, ._4col-grid, .home_stats_grid) { gap: 16px; } }

/* ── 4 · Testimonials (review-component): the homepage quote standard ─────────────────────────────────────────────
   Left-aligned editorial quote: proof row (customer logo + G2) on top, Season Mix quote on columns 1–8, attribution
   (14px, name black, on a short rule) beneath it. The right-hand columns stay clear for the captured corner mark
   (graph corner on warm, stepped squares on green), so a mark never sits behind copy. */
body:not(:has(.z3-hero)) main .review-component {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--z4-gap); row-gap: 0; align-items: start;
  padding: 56px; text-align: left; border-radius: 0;
}
body:not(:has(.z3-hero)) main .review-component:not(.z-review-card-green) { background-color: var(--z4-warm); outline: 1px solid var(--z4s-rule-card); outline-offset: -1px; }
body:not(:has(.z3-hero)) main .background-color-beige .review-component:not(.z-review-card-green) { background-color: #fff; }
body:not(:has(.z3-hero)) main .review-component > * { grid-column: 1 / span 8; margin: 0 !important; min-width: 0; max-width: none; text-align: left; }
body:not(:has(.z3-hero)) main .review-component > .margin-bottom:first-child { grid-column: 1 / -1; margin-bottom: 32px !important; }
body:not(:has(.z3-hero)) main .review-component .review-logo-container { justify-content: flex-start; }
body:not(:has(.z3-hero)) main .review-component > .max-width-xlarge > * {
  font: 400 var(--z-type-card-size)/1.4 var(--z-font-heading) !important; letter-spacing: -.005em; color: var(--z4-ink); text-align: left; text-wrap: pretty;
}
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 24px !important;
  padding-left: 16px; border-left: 1px solid var(--z4-rule-2);
}
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child > *,
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child .display-inlineflex > * {
  font-size: 14px !important; line-height: 1.5 !important; text-align: left;
}
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child > :first-child { font-weight: 500; color: var(--z4-ink); }
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child .display-inlineflex { display: block; }
body:not(:has(.z3-hero)) main .review-component > .margin-top:last-child .display-inlineflex > * { display: inline; }
body:not(:has(.z3-hero)) main .review-component .text-style-muted { color: var(--z4-body); }
/* Green variant: white quote, on-green attribution and rule; content clears the top-left stepped mark. */
body:not(:has(.z3-hero)) main .review-component.z-review-card-green { padding-top: 88px; background-size: 80px auto, auto; }
body:not(:has(.z3-hero)) main .review-component.z-review-card-green > .max-width-xlarge > * { color: #fff; }
body:not(:has(.z3-hero)) main .review-component.z-review-card-green > .margin-top:last-child { border-left-color: var(--z4-rule-green); }
body:not(:has(.z3-hero)) main .review-component.z-review-card-green > .margin-top:last-child > :first-child { color: #fff; }
body:not(:has(.z3-hero)) main .review-component.z-review-card-green :is(.text-style-muted, .margin-top:last-child > :not(:first-child)) { color: var(--z4-on-green); }
@media (max-width: 991px) {
  body:not(:has(.z3-hero)) main .review-component > * { grid-column: 1 / span 10; }
}
@media (max-width: 767px) {
  /* Phones: the corner mark shrinks and gets its own strip below the attribution. */
  body:not(:has(.z3-hero)) main .review-component { padding: 32px 24px 80px; background-size: 112px auto; }
  body:not(:has(.z3-hero)) main .review-component > *, body:not(:has(.z3-hero)) main .review-component > .margin-bottom:first-child { grid-column: 1 / -1; }
  body:not(:has(.z3-hero)) main .review-component > .margin-bottom:first-child { margin-bottom: 24px !important; }
  body:not(:has(.z3-hero)) main .review-component.z-review-card-green { padding-top: 72px; background-size: 56px auto, 64px auto; }
  body:not(:has(.z3-hero)) main .review-component .review-logo-container { flex-wrap: wrap; gap: 16px; }
}

/* ── 5 · Split feature (deep-green panel + photo) ─────────────────────────────────────────────────────────────────
   The captured hook for on-dark text was misspelt (.split-feature-left), so the lead and list read #323232 on green.
   Panel copy uses the homepage on-green tint; title on the subsection scale; list on on-green rules. */
main .split-feature_left:not(.z-split-feature-media-beige) { --z-body-ink: var(--z4-on-green); color: #fff; }
main .split-feature_left:not(.z-split-feature-media-beige) :is(p, .text-size-medium, li, span):not(.button):not(.button *) { color: var(--z4-on-green); }
main .split-feature_left:not(.z-split-feature-media-beige) :is(h2, h3, h4, h5, h6) { color: #fff; }
main .split-feature_left.z-split-feature-media-beige :is(h2, h3, h4, h5, h6) { color: var(--z4-ink); }
main .split-feature_left.z-split-feature-media-beige { outline: 1px solid var(--z4s-rule-card); outline-offset: -1px; }
main .split-feature_left :is(h2, h3, h4, h5, h6) { font-size: var(--z-type-subsection-size) !important; line-height: 1.25 !important; text-wrap: balance; }
main .split-feature_left .margin-top.margin-xsmall { margin-top: 16px; }
main .split-feature_component { column-gap: var(--z4-gap); }
main .split-feature_right { min-height: 0; overflow: hidden; }
main .split-feature_right img { display: block; width: 100%; height: 100%; object-fit: cover; }
main .split-feature_left:not(.z-split-feature-media-beige) .split-feature-icon-block { border-color: var(--z4-rule-green); }
/* Review fix (D-034): fixed icon column so every label in the icon list starts on the same x. */
main .split-feature_left .split-feature-icon { flex: 0 0 40px; width: 40px; display: flex; align-items: center; justify-content: center; }
main .split-feature_left .split-feature-icon img, main .split-feature_left .split-feature-icon svg { max-width: 24px; max-height: 24px; }
/* Tablet/small desktop: the panel narrows, so the top-right steps shrink to stay clear of the H2. */
@media (min-width: 768px) and (max-width: 1279px) {
  main .split-feature_left:not(.z-split-feature-media-beige) { padding-top: 88px; background-size: 96px auto, 48px auto; }
}
/* Phones: the panel is full width, so the corner marks shrink and the copy starts below the top-right steps. */
@media (max-width: 767px) {
  main .split-feature_left:not(.z-split-feature-media-beige) { padding: 72px 24px 56px; background-size: 72px auto, 32px auto; }
  main .split-feature_left.z-split-feature-media-beige { padding: 32px 24px; }
}

/* ── 6 · Insights (problem → solution on black): fix the solution card overflowing into the next section ── */
main .insights_content-right > .feature-card { height: auto; }
main .insights-component h2 { font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; }
main .insights-component .problem_feature_para { color: var(--z4-on-green); }
main .background-color-beige .insights-component .problem_feature_para { color: var(--z4-body); }

/* ── 7 · Product tabs: left-aligned segmented control (52px, 16/500), white panel on the warm field ── */
main .products-tabs-menu { justify-content: flex-start; margin-left: 0; margin-right: auto; width: max-content; max-width: 100%; margin-bottom: 24px; }
main .products-tabs-link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; font-size: 16px; font-weight: 500; line-height: 1.2; background-color: #fff; color: var(--z4-act); transition: background-color .15s, color .15s; }
main .products-tabs-link:hover { background-color: var(--z4-warm); }
main .products-tabs-link.w--current, main .products-tabs-link.w--current:hover { background-color: var(--z4-act); color: #fff; }
main .products-tabs_content { background-color: #fff; outline: 1px solid var(--z4s-rule-card); outline-offset: -1px; }
main .products-tabs_content-left { padding: 56px; }
main .products-tabs_content-left :is(h3, h4, h5) { font-size: var(--z-type-subsection-size) !important; line-height: 1.25 !important; letter-spacing: -.01em; color: var(--z4-ink); text-wrap: balance; }
main .products-tabs_content-left > p { margin-top: 8px; color: var(--z4-body); }
main .products-tabs-item { border-color: var(--z4-rule); }
@media (max-width: 767px) {
  main .products-tabs-menu { width: 100%; flex-direction: column; }
  main .products-tabs-link { width: 100%; min-height: 48px; padding: 0 16px; font-size: 15px; }
  main .products-tabs_content-left { padding: 32px 24px; }
}

/* ── 8 · Comparison (compare pages): split header; white table on 1px rules; the Zamp column on warm ── */
main .comparison-component > .margin-bottom:first-child { margin-bottom: var(--z4-head-gap); }
main .comparison-component > .margin-bottom:first-child > .text-align-center {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--z4-gap); align-items: end; text-align: left;
}
main .comparison-component > .margin-bottom:first-child > .text-align-center > * { grid-column: 1 / span 7; margin: 0; }
main .comparison-component > .margin-bottom:first-child > .text-align-center > p { grid-column: 8 / -1; max-width: 30rem; color: var(--z4-body); }
main .comparison-component h2 { margin: 0; }
main .section_comparison > .padding-global > .container-large > .padding-section-medium { padding-top: var(--z4-sec-y); padding-bottom: var(--z4-sec-y); }
main .comparison-table-wrapper { outline: 1px solid var(--z4s-rule-card); outline-offset: -1px; }
main .comparison-table-row { background-color: var(--z4s-rule); }
main .comparison-table-cell { background-color: #fff; color: var(--z4-body); }
main .comparison-table-cell:first-child { color: var(--z4-ink); font-weight: 500; }
main .comparison-table-cell.is-zamp { background-color: var(--z4-warm); color: var(--z4-ink); font-weight: 500; }
main .comparison-table-icon { background-color: var(--z4-green); }
main .comparison-logo-cell:nth-child(2) { background-color: var(--z4-warm); box-shadow: inset 0 3px 0 var(--z4-green); }
@media (max-width: 767px) {
  main .comparison-component > .margin-bottom:first-child > .text-align-center { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  main .comparison-component > .margin-bottom:first-child > .text-align-center > *, main .comparison-component > .margin-bottom:first-child > .text-align-center > p { grid-column: 1; }
}

/* ── 9 · Full-bleed sections (team and G2 quote marquees): the header still sits on the container spine,
   and the marquee keeps its hard edge. ── */
main .section-padding.z-section-full-width-large-padding > :is(.text-component, .split-text-component) {
  box-sizing: border-box; width: 100%; max-width: calc(84rem + 2 * var(--z4s-g)); margin-left: auto; margin-right: auto;
  padding-left: var(--z4s-g); padding-right: var(--z4s-g);
}
/* Review fix: no edge fade on the quote marquees; it washed out the first card's quote text. Hard edge, as captured. */
/* G2 quote cards: the homepage story-quote type (Season Mix 20, black), attribution 14px. */
main .quote-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; box-sizing: border-box; }
main .quote-card .text-size-medium { font: 400 var(--z-type-compact-size)/1.4 var(--z-font-heading) !important; letter-spacing: -.005em; color: var(--z4-ink); text-wrap: pretty; }
main :is(.quote-card, .team-card) .quote-info { font-size: 14px; line-height: 1.5; color: var(--z4-body); }
main :is(.quote-card, .team-card) .quote-info .text-weight-medium { color: var(--z4-ink); font-weight: 500; }
main .team-card .quote-info { margin-top: 12px; }

/* ── 10 · About: the captured intro paragraph sits loose in <main>; put it on the container spine as a lead. ── */
main > p.about_hero_para {
  box-sizing: border-box; max-width: calc(48rem + 2 * var(--z4s-g)); margin: 0 auto; padding: var(--z4-sec-y) var(--z4s-g) 0;
  font-size: 18px; line-height: 1.6; text-align: center; color: var(--z4-body);
}

/* ── 11 · Partner directory cards: one card — warm logo plate, then a white body with name 24 → region → copy,
   link at the bottom; the frame turns black on hover like the homepage's linked cards. ── */
main .partners-card { display: flex; flex-direction: column; box-sizing: border-box; border-color: var(--z4s-rule-card); transition: border-color .15s; }
main .partners-card:hover { border-color: var(--z4-act); }
main .partners-logo-wrapper { border-bottom: 0; }
main .partners-name-wrapper { align-items: flex-start; text-align: left; padding: 24px var(--z4-card-pad) 0; background-color: #fff; border-bottom: 0; }
main .partners-name-wrapper :is(h3, h4, h5, h6) { margin: 0; font: 400 var(--z-type-card-size)/1.3 var(--z-font-heading) !important; letter-spacing: -.005em; color: var(--z4-ink); }
main .partners-info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 8px var(--z4-card-pad) var(--z4-card-pad); }
main .partners-info > .margin-bottom { margin-bottom: 12px; font-size: 14px; color: var(--z4-body); }
main .partners-info > p { color: var(--z4-body); }
main .partners-info > .margin-top:last-child { margin-top: auto; padding-top: 24px; }

/* ── 12 · Dividers ── */
main .divider-horizontal { background-color: var(--z4-rule); height: 1px; }