/* Shared components (D-035): one recipe per component for every page — logo bank, CTA family (closing / band / light),
   managed-service band, customer quote (compact / featured), and the homepage primitives they are built from
   (buttons, text link, label, G2 badge). Loaded on every route except /book-call, after the site-v4 layers and before
   the homepage home-v* files. Values are the homepage's (D-026 pixel standard); tokens mirror home-v3/v7 so the same
   rules read the same on `/`. Components: LogoBank, Cta, ManagedBand, CustomerQuote (src/components/design-system). */

:root {
  --z3-gap: 24px; --z3-g: clamp(20px, 4.2vw, 60px); --z3-ink: #000; --z3-body: #323232; --z3-warm: #f6f5f3;
  --z3-rule: #e6e1da; --z3-rule-2: #c8bfb1; --z3-green: #183e3d; --z3-mint: #afecdb; --z3-act: #0c0a08;
  --z3-sec-y: 120px;
  --z7-on-green: rgba(255, 255, 255, .78); --z7-rule-green: rgba(255, 255, 255, .18);
  --z7-shadow: 0 1px 0 #e6e1da, 0 24px 48px -20px rgba(12, 10, 8, .18);
  --zc-frame: #e0dbd2;
}
@media (max-width: 1279px) { :root { --z3-sec-y: 96px; } }
@media (max-width: 767px) { :root { --z3-sec-y: 72px; } }
.z-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Primitives: button, text link, actions row, label ─────────────────────────────────────────────────────────── */
.z3-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; background: var(--z3-act); color: #fff; font: 500 16px/1 var(--z-font-body); text-decoration: none; transition: background .15s, color .15s; }
.z3-btn:hover { background: var(--z3-green); color: #fff; }
.z3-btn--light { background: #fff; color: var(--z3-act); }
.z3-btn--light:hover { background: var(--z3-mint); color: var(--z3-act); }
.z3-btn--outline { background: transparent; color: var(--z3-act); box-shadow: inset 0 0 0 1px var(--z3-act); }
.z3-btn--outline:hover { background: var(--z3-act); color: #fff; }
.z3-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 16px/1.4 var(--z-font-body); color: var(--z3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.z3-link span { display: inline-block; text-decoration: none; transition: transform .2s; }
.z3-link:hover span { transform: translateX(3px); }
.z3-link--light { color: #fff; }
.z3-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.z3-actions .z3-link { margin: 0 !important; }
.z6-label { margin: 0 0 16px; font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--z3-body); }
@media (max-width: 560px) { .z3-actions .z3-btn { width: 100%; } }

/* ── Logo bank (every logo row): homepage marquee, per-logo optical heights, label on a rule ────────────────────── */
.z-logo-bank.z-logo-bank--bare { padding: 0; background: transparent; border: 0; }
.z-logo-bank__marquee { --gap: 56px; -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); }
.z-logo-bank__item, .z-logo-bank__item--wide, .z-logo-bank__item--stack { width: auto !important; height: 40px; }
.z-logo-bank__item img { height: var(--h, 22px) !important; width: auto !important; max-width: none !important; max-height: none !important; filter: grayscale(1); opacity: .85; }
.z-logo-bank__item:hover img { filter: none; opacity: 1; }
.z-logo-bank--labelled { display: flex; align-items: center; gap: 32px; max-width: 84rem; margin: 0 auto; }
.z-logo-bank--labelled .z-logo-bank__marquee { flex: 1 1 auto; min-width: 0; }
.z-logo-bank__label { flex: 0 0 auto; max-width: 12.5rem; margin: 0; padding-right: 32px; border-right: 1px solid var(--z3-rule-2); font: 500 14px/1.4 var(--z-font-body); letter-spacing: 0; color: var(--z3-body); text-align: left; }
@media (max-width: 767px) {
  .z-logo-bank--labelled { flex-direction: column; align-items: flex-start; gap: 16px; }
  .z-logo-bank__label { max-width: none; padding-right: 0; border-right: 0; font-size: 13px; }
  .z-logo-bank--labelled .z-logo-bank__marquee { width: 100%; }
  .z-logo-bank__marquee { --gap: 40px; }
  .z-logo-bank__item img { height: calc(var(--h, 22px) * .8) !important; }
}
/* The section a labelled bank sits in becomes the homepage logo band: warm, ruled, 40/28px padding. */
body:not(:has(.z3-hero)) section.z-logo-band { background: var(--z3-warm); border-top: 1px solid var(--z3-rule); border-bottom: 1px solid var(--z3-rule); }
body:not(:has(.z3-hero)) section.z-logo-band .section-padding { padding-top: 40px !important; padding-bottom: 40px !important; }
body:not(:has(.z3-hero)) section.z-logo-band .spacer-component { display: none; }
body:not(:has(.z3-hero)) section.z-logo-band.background-color-beige,
body:not(:has(.z3-hero)) section.background-color-beige + section.z-logo-band { background: #fff; }
@media (max-width: 767px) { body:not(:has(.z3-hero)) section.z-logo-band .section-padding { padding-top: 28px !important; padding-bottom: 28px !important; } }
/* An unlabelled bank under its own header (investors, partners) keeps the header and sits 48px below it. */
body:not(:has(.z3-hero)) .z-logo-bank--bare:not(.z-logo-bank--labelled) { margin-top: 8px; }

/* ── CTA family ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* closing: the homepage closing CTA (deep-green panel + photo + proof). */
.z9-cta, .z9-cta * { box-sizing: border-box; }
.z9-cta { padding: var(--z3-sec-y) var(--z3-g); background: #fff; font-family: var(--z-font-body); }
.z9-cta__inner { max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z3-gap); align-items: stretch; }
.z9-cta__panel { position: relative; grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: center; padding: 72px 64px; color: #fff; overflow: hidden;
  background-color: var(--z3-green);
  background-image: url('/migrated/7538b72f7abb654b1c0c66c4b1e7e1f8e9fe7440df5c86572fcb57c22154f488.svg'), url('/migrated/cbe4144f02a5125f4a9a366d0423fdb1bca72892bf72aa32619d0118f7b6e2a7.svg');
  background-position: 100% 0, 0 100%; background-repeat: no-repeat; }
.z9-cta__panel > * { position: relative; }
.z9-cta__panel :is(h2, h3) { margin: 0; max-width: 15ch; color: #fff; font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; text-wrap: balance; }
.z9-cta__lead { margin: 20px 0 0; max-width: 32rem; font: 400 18px/1.6 var(--z-font-body); color: var(--z7-on-green); }
.z9-cta__form { display: flex; gap: 8px; max-width: 32rem; margin-top: 32px; }
.z9-cta__input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 0; background: transparent; font: 400 16px/1.4 var(--z-font-body); color: #fff; }
.z9-cta__input::placeholder { color: rgba(255, 255, 255, .7); }
.z9-cta__input:focus-visible { outline: 2px solid var(--z3-mint) !important; outline-offset: 2px; }
.z9-cta__submit { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 24px; border: 0; border-radius: 0; background: #fff; color: #0c0a08; font: 500 16px/1 var(--z-font-body); cursor: pointer; white-space: nowrap; transition: background .15s; }
.z9-cta__submit:hover { background: var(--z3-mint); }
.z9-cta__submit span { display: inline-block; transition: transform .2s; }
.z9-cta__submit:hover span { transform: translateX(3px); }
.z9-cta__submit:focus-visible { outline: 2px solid var(--z3-mint); outline-offset: 2px; }
.z9-cta__panel > .z9-proof__g2 { margin-top: 20px; }
.z9-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--z7-rule-green); }
.z9-proof__g2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 14px/1.3 var(--z-font-body); color: #fff; }
.z9-proof__g2 img { filter: brightness(0) invert(1); }
.z9-proof__g2 img:first-child { width: 22px; height: 22px; }
.z9-proof__g2 img:nth-child(2) { width: 76px; height: auto; }
.z9-proof__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.z9-proof__logos img { display: block; height: var(--h, 18px); width: auto; filter: brightness(0) invert(1); opacity: .8; }
.z9-cta__photo { grid-column: 8 / -1; margin: 0 !important; min-height: 100%; }
.z9-cta__photo img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 980px) {
  .z9-cta__panel, .z9-cta__photo { grid-column: 1 / -1; }
  .z9-cta__photo { order: -1; }
  .z9-cta__photo img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .z9-cta__panel { padding: 48px 40px; }
}
@media (max-width: 600px) {
  .z9-cta__panel { padding: 40px 24px; background-size: 72px auto, 0 0; }
  .z9-cta__form { flex-direction: column; }
  .z9-cta__submit { width: 100%; }
}
/* On routes other than `/`, the closing CTA follows the page's last section; a warm last section keeps its field. */
body:not(:has(.z3-hero)) main > .z9-cta:last-child { padding-top: var(--z3-sec-y); }

/* band / light: full-width panel, heading + lead left (7 cols), form or button right (5), bottom-aligned.
   The captured .small-cta_component bands share this recipe (site-v4-chrome.css §4 sets their fields/marks). */
.z-cta { padding: 0; font-family: var(--z-font-body); }
.z-cta__inner { position: relative; max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--z3-gap); align-items: end; padding: 64px; background-repeat: no-repeat; }
.z-cta--band .z-cta__inner { background-color: var(--z3-green); color: #fff;
  background-image: url('/migrated/7538b72f7abb654b1c0c66c4b1e7e1f8e9fe7440df5c86572fcb57c22154f488.svg'), url('/migrated/cbe4144f02a5125f4a9a366d0423fdb1bca72892bf72aa32619d0118f7b6e2a7.svg');
  background-position: 100% 0, 0 100%; background-size: 96px auto, 61px auto; }
.z-cta--light .z-cta__inner { background-color: var(--z3-warm); color: var(--z3-ink); background-image: url('/migrated/61ca852e0d19092bd43a7cb94ae7d7243e323233ffc391aeb1c48e303a4b47c6.svg'); background-position: 100% 0; background-size: 96px auto; }
.z-cta :is(h2, h3) { margin: 0; max-width: 24ch; font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; text-wrap: balance; color: inherit; }
.z-cta__lead { margin: 16px 0 0; max-width: 34rem; font: 400 18px/1.6 var(--z-font-body); }
.z-cta--band .z-cta__lead { color: var(--z7-on-green); }
.z-cta--light .z-cta__lead { color: var(--z3-body); }
.z-cta__action .z9-cta__form { margin-top: 0; max-width: none; }
.z-cta--light .z9-cta__input { border-color: var(--z3-rule-2); background: #fff; color: var(--z3-ink); }
.z-cta--light .z9-cta__input::placeholder { color: #6f6f6f; }
.z-cta--light .z9-cta__submit { background: var(--z3-act); color: #fff; }
.z-cta--light .z9-cta__submit:hover { background: var(--z3-green); }
@media (max-width: 860px) { .z-cta__inner { grid-template-columns: minmax(0, 1fr); padding: 48px 32px; } }
@media (max-width: 600px) { .z-cta__inner { padding: 40px 24px; } .z-cta .z9-cta__form { flex-direction: column; } .z-cta .z9-cta__submit { width: 100%; } }

/* ── Footer: CTAs never live in the footer. The captured footer CTA block is removed server-side (SiteContent);
   the footer opens on its logo row with the standard section rhythm. ── */
.footer_component.z-footer-no-cta > .padding-global > .container-large > .padding-bottom { padding-top: var(--z3-sec-y) !important; }
.footer_component.z-footer-no-cta > .padding-global > .container-large > .padding-bottom > .padding-vertical.padding-xhuge:first-child { display: none; }
.footer_component.z-footer-no-cta { background-image: none !important; }

/* ── G2 support badge (homepage managed section and the managed band) ─────────────────────────────────────────── */
.z12-g2 { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: #fff; box-shadow: var(--z7-shadow); text-align: left; }
.z12-g2__mark { display: block; width: 32px; height: 32px; }
.z12-g2__body { display: grid; gap: 2px; justify-items: start; }
.z12-g2__stars { display: block; width: 70px; height: auto; margin-bottom: 2px; }
.z12-g2 b { font: 500 14px/1.25 var(--z-font-body); color: #000; }
.z12-g2 small { font: 400 12px/1.3 var(--z-font-body); color: var(--z3-body); }

/* ── Managed band: the homepage managed section, lighter (warm panel) and smaller (one photo, three points) ───── */
.z-managed-band, .z-managed-band * { box-sizing: border-box; }
.z-managed-band { font-family: var(--z-font-body); color: var(--z3-ink); }
.z-managed-band__inner { max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--z3-gap); align-items: stretch; background: var(--z3-warm);
}
.z-managed-band__copy { grid-column: 1 / span 6; align-self: center; padding: 64px 0 64px 64px; }
.z-managed-band__copy :is(h2, h3) { margin: 0; max-width: 18ch; color: var(--z3-ink); font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; text-wrap: balance; }
.z-managed-band__line { display: block; }
.z-managed-band__lead { margin: 20px 0 0; max-width: 32rem; font: 400 18px/1.6 var(--z-font-body); color: var(--z3-body) !important; }
.z-managed-band__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.z-managed-band__points li { display: flex; align-items: center; gap: 12px; font: 500 16px/1.4 var(--z-font-body); color: var(--z3-ink); }
.z-managed-band__points i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: var(--z3-green); color: #fff; }
.z-managed-band__points svg { width: 16px; height: 16px; }
.z-managed-band__media { position: relative; grid-column: 8 / -1; margin: 0; min-height: 440px; }
.z-managed-band__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.z-managed-band__media .z12-g2 { position: absolute; left: 24px; bottom: 24px; }
@media (max-width: 980px) {
  .z-managed-band__copy { grid-column: 1 / -1; padding: 48px 40px 8px; }
  .z-managed-band__media { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 10; margin: 0 40px 40px; }
}
@media (max-width: 600px) {
  .z-managed-band__copy { padding: 40px 24px 0; }
  .z-managed-band__media { margin: 0 24px 24px; aspect-ratio: 4 / 3; }
  .z-managed-band__media .z12-g2 { left: 12px; bottom: 12px; padding: 8px 10px 8px 8px; gap: 8px; }
  .z-managed-band__media .z12-g2__mark { width: 24px; height: 24px; }
  .z-managed-band__media .z12-g2 small { display: none; }
}
/* Host sections (captured): the band replaces their green/black split panel, so they become plain white sections. */
section.z-managed-host { background: #fff !important; }
section.z-managed-host > .decor_wrap { display: none; }

/* ── Customer quote: compact and featured (D-035; featured case-study card D-036) ─────────────────────────────── */
.z-cq, .z-cq * { box-sizing: border-box; }
.z-cq { margin: 0; font-family: var(--z-font-body); color: var(--z3-ink); text-align: left; }
.z-cq__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.z-cq__logo { display: block; height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.z-cq__logo--g2 { height: 32px; }
.z-cq__glyph { display: block; height: .5em; margin: 0 0 8px -4px; font: 400 96px/1 var(--z-font-heading); color: var(--z3-green); user-select: none; }
.z-cq__text { margin: 0; padding: 0; border: 0; font: 400 var(--z-type-card-size)/1.35 var(--z-font-heading) !important; letter-spacing: -.005em; color: var(--z3-ink); text-wrap: pretty; quotes: none; }
.z-cq__who, .z-cq__who * { text-align: left !important; }
.z-cq__who { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--z3-green); font: 400 14px/1.5 var(--z-font-body); color: var(--z3-body); }
.z-cq__who b { font-weight: 500; color: var(--z3-ink); }
.z-cq__link { margin-top: 20px; }

/* compact: warm panel, quote on 8 of 12 columns, warm mark bottom-right. */
.z-cq--compact { max-width: 84rem; margin: 0 auto; padding: 56px 64px; background: var(--z3-warm) url('/migrated/61ca852e0d19092bd43a7cb94ae7d7243e323233ffc391aeb1c48e303a4b47c6.svg') 100% 100% / 96px auto no-repeat; }
.z-cq--compact .z-cq__text { max-width: 46rem; }
.background-color-beige .z-cq--compact, .background-color-light-beige .z-cq--compact { background-color: #fff; }

/* featured: a case-study card — media on 5 columns, story panel on 7, one 1px frame that turns black on hover. */
.z-cq--featured { position: relative; max-width: 84rem; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--z3-warm); }
.z-cq--featured::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--zc-frame); pointer-events: none; transition: border-color .2s; }
.z-cq--featured:hover::after { border-color: var(--z3-ink); }
.background-color-beige .z-cq--featured, .background-color-light-beige .z-cq--featured { background: #fff; }
.z-cq__media { position: relative; grid-column: 1 / span 5; display: block; min-height: 520px; overflow: hidden; background: #ede9e2; color: #fff; text-decoration: none; }
.z-cq__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.z-cq--featured:hover .z-cq__photo { transform: scale(1.04); }
.z-cq__media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(12, 10, 8, .78), rgba(12, 10, 8, .35) 55%, rgba(12, 10, 8, 0)); pointer-events: none; }
.z-cq__mark { position: absolute; z-index: 1; left: 32px; top: 32px; height: 28px; width: auto; max-width: 55%; }
.z-cq__headline { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 32px; font: 400 var(--z-type-card-size)/1.25 var(--z-font-heading); letter-spacing: -.005em; color: #fff; text-wrap: balance; text-shadow: 0 1px 12px rgba(12, 10, 8, .45); }
/* No published portrait: deep-green brand panel with the logo in white and the site's stepped green marks. */
.z-cq--plate .z-cq__media { background-color: var(--z3-green);
  background-image: url('/migrated/a60a1871d4168ba74f983123d6f8d4d2a87f5d21a73421725e4cd298127d640a.svg'), url('/migrated/8b6ea4d6c59e8ac356e1049068cdfe7a3eb1b6702539167645ce405547f74948.svg');
  background-position: 0 0, 100% 100%; background-repeat: no-repeat; background-size: 180px auto, 190px auto; }
.z-cq--plate .z-cq__media::after { display: none; }
.z-cq__plate { position: absolute; inset: 0 0 96px; display: grid; place-items: center; }
.z-cq__plate-logo { display: block; width: auto; height: 52px; max-width: 70%; object-fit: contain; filter: brightness(0) invert(1); }
.z-cq--plate .z-cq__headline { border-top: 1px solid var(--z7-rule-green); padding-top: 20px; }

.z-cq--featured .z-cq__body { position: relative; grid-column: 6 / -1; display: flex; flex-direction: column; justify-content: center; padding: 56px 64px; overflow: hidden; }
.z-cq--featured .z-cq__body::before { content: ""; position: absolute; top: 0; right: 0; width: 320px; height: 120px; pointer-events: none; opacity: .42;
  background: url('/migrated/58e76a6f2b24513f2bc498d9d89f04d04a9a43b1f86a98f181ee49536e7cfb43.svg') 100% 0 / 565px auto no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent); mask-image: linear-gradient(to left, #000 40%, transparent); }
.z-cq--featured .z-cq__body > * { position: relative; }
.z-cq__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 32px; font: 400 14px/1.4 var(--z-font-body); color: var(--z3-body); }
.z-cq__pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 10px; border: 1px solid var(--z3-rule-2); background: #fff; font: 500 13px/1.3 var(--z-font-body); color: var(--z3-ink); }
.z-cq__pill span { width: 8px; height: 8px; background: var(--z3-green); box-shadow: 0 0 0 3px var(--z3-mint); }
.z-cq__chip { padding: 4px 8px; background: var(--z3-mint); font: 500 12px/1.3 var(--z-font-body); color: var(--z3-green); }
.z-cq__place { color: var(--z3-body); }
.z-cq--featured .z-cq__text { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem) !important; line-height: 1.28 !important; letter-spacing: -.01em; }
.z-cq__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--z3-rule); }
.z-cq__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-left: 16px; border-left: 1px solid var(--z3-rule-2); }
.z-cq__stats dd { margin: 0; font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.05 var(--z-font-heading); letter-spacing: -.02em; color: var(--z3-ink); }
.z-cq__stats dt { font: 400 14px/1.45 var(--z-font-body); color: var(--z3-body); }
.z-cq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 36px; }
.z-cq__cta { gap: 8px; }
.z-cq__cta span { display: inline-block; transition: transform .2s; }
.z-cq--featured:hover .z-cq__cta span { transform: translateX(3px); }
.z-cq__g2 { display: block; flex: none; align-self: center; height: 36px; width: auto; }
@media (max-width: 1100px) { .z-cq--featured .z-cq__body { padding: 48px 40px; } }
@media (max-width: 980px) {
  .z-cq__media { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 9; }
  .z-cq--plate .z-cq__media { aspect-ratio: 16 / 8; }
  .z-cq--featured .z-cq__body { grid-column: 1 / -1; padding: 40px; }
}
@media (max-width: 600px) {
  .z-cq--compact { padding: 40px 24px 72px; background-size: 64px auto; }
  .z-cq__glyph { font-size: 72px; }
  .z-cq__media { aspect-ratio: 4 / 3.4; }
  .z-cq--plate .z-cq__media { aspect-ratio: 4 / 3; background-size: 110px auto, 120px auto; }
  .z-cq__mark, .z-cq__headline { left: 20px; right: 20px; }
  .z-cq__mark { top: 20px; height: 22px; }
  .z-cq__headline { bottom: 20px; font-size: 20px; }
  .z-cq--featured .z-cq__body { padding: 32px 24px 36px; }
  .z-cq--featured .z-cq__body::before { display: none; }
  .z-cq__stats { gap: 16px; }
  .z-cq__foot { flex-direction: column; align-items: stretch; }
  .z-cq__foot .z-cq__g2 { align-self: flex-start; height: 32px; }
  .z-cq__cta { width: 100%; }
}

/* ── Hero types (D-037). Every page hero is one of four shared types, tagged server-side on its section, and each
   opens with the same breadcrumb trail (`.z-crumbs`, data/breadcrumbs.mjs):
     split   – copy left, the page's media right; warm field + graph corner (feature, solution, compare, integration,
               partnership, event, guide, calculator-state pages)
     center  – centred copy and form, optional media below; white field (product, pricing, switch, listings, tools)
     article – left-aligned title block with meta; warm field, rule below (posts, articles, press, careers, legal)
     story   – customer stories: the article layout on the deep-green field
   Spacing, type and the form spec inside the hero come from site-v4-heroes.css; this layer owns the type-level
   differences: field colour, alignment, breadcrumb placement and the top of the band. ── */
.z-crumbs { margin: 0 0 32px; font: 400 14px/1.4 var(--z-font-body); color: var(--z3-body); }
.z-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.z-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.z-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--z3-rule-2); }
.z-crumbs a { color: var(--z3-ink); font-weight: 500; text-decoration: none; }
.z-crumbs a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.z-crumbs a:focus-visible { outline: 2px solid var(--z3-green); outline-offset: 2px; }
.z-crumbs [aria-current="page"] { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--z3-body); }
/* One band top for every type (56 / 48 / 28): the trail is the first line of the copy block, 32px above the eyebrow
   (or the H1 when a hero has no eyebrow). The pill's own top margin is cancelled so the rhythm is trail → 32 → pill → 24 → H1. */
:is(section, div).z-hb.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-top: 56px !important; }
.z-hb .z-crumbs + :is(.margin-bottom, .header_title_wrapper, h1, .tag) { margin-top: 0 !important; }
/* Blog/article heroes already space their title block with a 32px flex gap. */
.z-hb .blog_post_hero_left_top > .z-crumbs { margin-bottom: 0; }
/* Split heroes: copy top-aligned with the media, so the trail starts at the same height on every hero type
   (it no longer floats with copy centred against media of different heights). */
.z-hb--split .header_content { align-items: start !important; }
.z-hb--split .header_content > .header_content-left { align-self: start !important; }
@media (max-width: 1279px) { :is(section, div).z-hb.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-top: 48px !important; } }
@media (max-width: 767px) {
  .z-crumbs { margin-bottom: 20px; font-size: 13px; }
  .z-hb .blog_post_hero_left_top:has(> .z-crumbs) { row-gap: 20px; }
  /* Phones: the H1 names the page, so the trail stops at its parent and stays on one line. */
  .z-crumbs li:last-child:not(:first-child):not(:nth-child(2)) { display: none; }
  :is(section, div).z-hb.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-top: 28px !important; }
}

/* split: warm field everywhere (integration heroes were white), graph corner as on feature pages. */
.z-hb--split { background-color: var(--z3-warm) !important; }
.z-hb--split .z-crumbs { position: relative; z-index: 2; }

/* center: white field everywhere (about, careers, support, state index were warm); trail centred. */
.z-hb--center { background-color: #fff !important; }
.z-hb--center .z-crumbs ol { justify-content: center; }
.z-hb--center .z-crumbs { text-align: center; }

/* article: left-aligned title block on the warm field, closed by a rule. Centred captured variants are realigned. */
.z-hb--article { background-color: var(--z3-warm) !important; border-bottom: 1px solid var(--z3-rule); }
.z-hb--article :is(.header_content, .text-component) { text-align: left !important; justify-items: start; }
.z-hb--article :is(.header_content, .text-component) :is(h1, p, .text-size-medium, .header_title_wrapper, .para_wrapper, .max-width-large, .max-width-medium) { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.z-hb--article .text-component { max-width: 52rem !important; margin-left: 0 !important; }
.z-hb--article h1 { max-width: 22ch; }
.z-hb--article .header_content.z-split-header-center, .z-hb--article .header_content[class*="w-variant-b94e9b91"] { justify-items: start; }

/* story: customer stories keep the deep-green field; the title block and trail align left like an article. */
.z-hb--story .text-component { max-width: 52rem !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
.z-hb--story .text-component > * { margin-left: 0 !important; }
.z-hb--story .customers-logo-container { justify-content: flex-start !important; }
.z-hb--story h1 { max-width: 22ch; margin-left: 0 !important; text-align: left !important; }
.z-hb--story .z-crumbs, .z-hb--story .z-crumbs [aria-current="page"] { color: var(--z7-on-green); }
.z-hb--story .z-crumbs a { color: #fff; }
.z-hb--story .z-crumbs li + li::before { color: var(--z7-rule-green); }
.z-hb--story .z-crumbs a:focus-visible { outline-color: var(--z3-mint); }
.z-hb--article .header_content-left { align-items: flex-start !important; text-align: left !important; }
/* Empty CMS image slots render Webflow's placeholder graphic (press releases); an article hero is title-only then. */
.z-hb .header_image-wrapper:has(> img[src*="a670c0b3e744ec8b878328aae1dd2ffcfae3f3d5f862b06ebb17d621ca70602e"]) { display: none; }
.z-hb .header_content:has(> .header_image-wrapper > img[src*="a670c0b3e744ec8b878328aae1dd2ffcfae3f3d5f862b06ebb17d621ca70602e"]) { grid-template-columns: minmax(0, 1fr) !important; }
.z-hb--story .customers-logo-container { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.z-hb--story .customers-logo-container img { margin-left: 0 !important; }
.z-hb--article .header_content > * { justify-self: start !important; margin-left: 0 !important; }

/* ── D-039 split-hero media: one frame for every split hero (11:10, the shape most of these images already have), so
   the hero is the same size from page to page. Photographs cover it; graphics (integration screens, comparison pairs,
   webinar art, state maps) are contained at full size on the hero field. ── */
.z-hb--split .header_image-wrapper:is(.z-media-photo, .z-media-art) { position: relative; width: 100%; aspect-ratio: 11 / 10; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden; align-self: start; }
.z-hb--split .header_image-wrapper:is(.z-media-photo, .z-media-art) > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; margin: 0; }
.z-hb--split .header_image-wrapper.z-media-photo > img { object-fit: cover; object-position: 50% 40%; }
.z-hb--split .header_image-wrapper.z-media-art > img { object-fit: contain; object-position: 50% 50%; }
.z-hb--split .header_image-wrapper.z-media-photo { background: #ede9e2; }
/* Feature heroes: the photo is clipped by .za-hero, the card may overhang the frame. */
.z-hb--split .header_image-wrapper.z-hero-art { overflow: visible; }
.z-hb--split .header_image-wrapper.z-hero-art .za-hero { overflow: visible; }
.z-hb--split .header_image-wrapper.z-hero-art .za-hero__photo { clip-path: inset(0); }
/* Every split hero ends the same way (96 / 80 / 56), so the band height matches page to page. */
:is(section, div).z-hb--split.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-bottom: 96px !important; }
@media (max-width: 1279px) { :is(section, div).z-hb--split.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-bottom: 80px !important; } }
@media (max-width: 767px) { :is(section, div).z-hb--split.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-bottom: 56px !important; } }
/* (site-v4-heroes.css removes a hero's bottom padding when the next section shares its field, via --z4h-joined.
   Split heroes always keep the standard bottom, so every split band is one height.) */
.z-hb--split > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { --z4h-joined: 96px; }
@media (max-width: 1279px) { .z-hb--split > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { --z4h-joined: 80px; } }
@media (max-width: 767px) { .z-hb--split > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { --z4h-joined: 56px; } }

/* D-102 partner logo row: one dark colour for every mark (partner logos range from near-white to bright), colour on hover. */
.z-logo-bank--mono .z-logo-bank__item img { filter: brightness(0) !important; opacity: .72; transition: filter .2s, opacity .2s; }
.z-logo-bank--mono .z-logo-bank__item:hover img { filter: none !important; opacity: 1; }
/* D-102 partner directory cards: each logo at its optical height (scaled up from the logo-row value) instead of a 128×64 box. */
.partners-logo-wrapper img.partners-logo { height: calc(var(--h, 24px) * 1.6) !important; width: auto !important; max-width: 240px !important; max-height: none !important; object-fit: contain; }
.partners-logo-wrapper.is-dark-panel { background: var(--z-color-green) !important; }
/* D-102 partner card descriptions: clamp to four lines with CSS, so cards Finsweet loads later match the first page
   (the published excerpt script only runs once, at load) and the full text stays searchable. */
.partners-card [fs-list-field="description"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }