/* Site-wide V4 foundation (D-034). The homepage is the design standard; this layer carries its language onto the
   captured components every route shares. Loaded on every route except /book-call, after site-v3.css and before the
   homepage's own home-v* layers (so `/` keeps its authored values). Family layers: site-v4-heroes.css,
   site-v4-sections.css, site-v4-content.css, site-v4-chrome.css. CSS only; no captured content or markup changes.
   Reference values: DESIGN.md "Homepage pixel standard" (D-026) and home-v7/v8.css. */

:root {
  --z4-ink: #000;
  --z4-body: #323232;
  --z4-act: #0c0a08;
  --z4-green: #183e3d;
  --z4-mint: #afecdb;
  --z4-warm: #f6f5f3;
  --z4-rule: #e6e1da;
  --z4-rule-2: #c8bfb1;
  --z4-on-green: rgba(255, 255, 255, .78);
  --z4-rule-green: rgba(255, 255, 255, .18);
  --z4-shadow: 0 1px 0 #e6e1da, 0 24px 48px -20px rgba(12, 10, 8, .18);
  --z4-gap: 24px;
  --z4-sec-y: 120px;      /* standard section padding (homepage) */
  --z4-sec-y-s: 64px;     /* small-padding variant (logo strips, compact bands) */
  --z4-head-gap: 64px;    /* section header → content */
  --z4-card-pad: 32px;
  /* Original site marks (used by the family layers; see home-v9.css for the homepage placements). */
  --z4-mark-graph: url('/migrated/58e76a6f2b24513f2bc498d9d89f04d04a9a43b1f86a98f181ee49536e7cfb43.svg');
  --z4-mark-warm: url('/migrated/61ca852e0d19092bd43a7cb94ae7d7243e323233ffc391aeb1c48e303a4b47c6.svg');
  --z4-mark-green-a: url('/migrated/7538b72f7abb654b1c0c66c4b1e7e1f8e9fe7440df5c86572fcb57c22154f488.svg');
  --z4-mark-green-b: url('/migrated/cbe4144f02a5125f4a9a366d0423fdb1bca72892bf72aa32619d0118f7b6e2a7.svg');
  --z4-mark-green-c: url('/migrated/a60a1871d4168ba74f983123d6f8d4d2a87f5d21a73421725e4cd298127d640a.svg');
  --z4-mark-green-d: url('/migrated/8b6ea4d6c59e8ac356e1049068cdfe7a3eb1b6702539167645ce405547f74948.svg');
}
@media (max-width: 1279px) { :root { --z4-sec-y: 96px; --z4-sec-y-s: 56px; } }
@media (max-width: 767px)  { :root { --z4-sec-y: 72px; --z4-sec-y-s: 48px; --z4-head-gap: 48px; --z4-card-pad: 24px; } }

/* ── Section rhythm: one scale (120 / 96 / 72), small variant 64 / 56 / 48 ── */
.section-padding.z-section-padding:not(.z-section-small-padding):not(.z-section-zero-padding):not(.z-section-full-width-zero-padding):not(.z-variant-64b7dc56-710) {
  padding-top: var(--z4-sec-y); padding-bottom: var(--z4-sec-y);
}
.section-padding.z-section-padding:is(.z-section-small-padding, .z-variant-64b7dc56-710) { padding-top: var(--z4-sec-y-s); padding-bottom: var(--z4-sec-y-s); }

/* ── Headings and reading text: the homepage's tracking and wrapping ── */
:is(h1, h2, h3, h4)[data-zamp-type] { color: var(--z4-ink); }
:is(h1)[data-zamp-type="display"] { line-height: 1.08 !important; letter-spacing: -.02em; }
:is(h1, h2, h3)[data-zamp-type="section"] { line-height: 1.18 !important; letter-spacing: -.015em; }
:is(h2, h3, h4)[data-zamp-type="card"], :is(h2, h3, h4)[data-zamp-type="subsection"] { letter-spacing: -.005em; }
:is(h1, h2, h3)[data-zamp-type] { text-wrap: balance; }
main p { text-wrap: pretty; }
.background-color-green :is(h1, h2, h3, h4), .background-color-black :is(h1, h2, h3, h4),
.split-feature_left :is(h1, h2, h3, h4), .small-cta_component :is(h1, h2, h3, h4), .footer_component :is(h1, h2, h3, h4) { color: inherit; }

/* ── Buttons: 52px standalone, 56px inside forms, 16px/500, square; primary hovers to deep green ── */
.button.w-button:not(.is-small):not(.is-link):not(.is-form):not(.navbar_menu-button),
.button.w-inline-block:not(.is-small):not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  font-weight: 500; line-height: 1; border-radius: 0; transition: background-color .15s, border-color .15s, color .15s;
}
.button:not(.is-link):not(.is-small):not(.is-alternate):not(.is-secondary):not(.z-button-outline):not(.z-button-white):not(.is-light):hover {
  background-color: var(--z4-green); border-color: var(--z4-green); color: #fff;
}
.button:is(.is-secondary, .z-button-outline):not(.is-small):hover { background-color: var(--z4-act); border-color: var(--z4-act); color: #fff; }
.background-color-green .button:is(.is-alternate, .z-button-white):hover,
.background-color-black .button:is(.is-alternate, .z-button-white):hover,
.small-cta_component .button:is(.is-alternate, .z-button-white):hover { background-color: var(--z4-mint); border-color: var(--z4-mint); color: var(--z4-act); }
form .button.is-form, form input.button[type="submit"] { min-height: 56px; height: 56px; padding: 0 24px; font-weight: 500; border-radius: 0; }
form .form_input.w-input:not(textarea):not(.is-select-input) { min-height: 56px; height: 56px; padding-left: 16px; padding-right: 16px; }

/* ── Text links: one spec — 500 16px, 1px underline at 4px, arrow/icon never underlined ── */
.button.is-link:not(.is-small) {
  min-height: 0; padding: 0; background: transparent; border: 0; color: var(--z4-act);
  font-weight: 500; text-decoration: none; gap: 6px;
}
/* Flex items inherit decoration, so underline the label only; icons never carry the line. */
.button.is-link:not(.is-small) > :not([class*="icon"]):not(svg), .button.is-link:not(.is-small):not(:has(> *)) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.button.is-link:not(.is-small):hover { background: transparent; color: var(--z4-act); }
.button.is-link:not(.is-small):hover > :not([class*="icon"]):not(svg), .button.is-link:not(.is-small):not(:has(> *)):hover { text-decoration-thickness: 2px; }
.button.is-link:not(.is-small) > [class*="icon"] { transition: transform .15s; }
.button.is-link:not(.is-small):hover > [class*="icon"] { transform: translateX(3px); }
.background-color-green .button.is-link:not(.is-small), .background-color-black .button.is-link:not(.is-small), .split-feature_left .button.is-link:not(.is-small),
.small-cta_component .button.is-link:not(.is-small) { color: #fff; }

/* ── Eyebrow tags → the homepage category pill (white, rule frame, deep-green square with a mint ring) ──
   Applies to the published eyebrow tags (Webflow tag variants); category tags inside listing cards stay plain squares. */
[data-wf--tag--variant].tag:not(.is-text):not(.blank) {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 10px;
  border: 1px solid var(--z4-rule-2); border-radius: 0; background: #fff; color: var(--z4-ink);
  font: 500 13px/1.3 var(--z-font-body); letter-spacing: 0;
}
[data-wf--tag--variant].tag:not(.is-text):not(.blank)::before {
  content: ""; flex: none; width: 8px; height: 8px; background: var(--z4-green); box-shadow: 0 0 0 3px var(--z4-mint);
}
:is(.background-color-green, .background-color-black, .footer_component, .small-cta_component, .split-feature_left) [data-wf--tag--variant].tag:not(.is-text):not(.blank) {
  background: transparent; border-color: var(--z4-rule-green); color: #fff;
}
:is(.background-color-green, .background-color-black, .footer_component, .small-cta_component, .split-feature_left) [data-wf--tag--variant].tag::before {
  background: var(--z4-mint); box-shadow: 0 0 0 3px rgba(175, 236, 219, .25);
}

/* ── One focus ring: 2px deep green (mint on dark fields) ── */
main :is(a, button, summary, [tabindex]):focus-visible, .footer_component :is(a, button):focus-visible, .navbar_component :is(a, button, .w-dropdown-toggle):focus-visible {
  outline: 2px solid var(--z4-green); outline-offset: 2px;
}
:is(.background-color-green, .background-color-black, .footer_component, .small-cta_component, .split-feature_left) :is(a, button):focus-visible { outline-color: var(--z4-mint); }

/* ── Chips and labels: 12px 500; labels uppercase with .08em tracking ── */
.text-style-tagline, .eyebrow-text { font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; }

/* ── Square geometry: captured large radii are retired outside product illustrations and avatars ── */
:is(.feature-card, .press_card, .media-card, .customers-quote-card, .review-component, .quote-card, .newsletter_card,
  .small-cta_component, .products-tabs_image-wrapper, .split-feature_left, .split-feature_right, .event_item, .resource_card,
  .integrations-category-box, .pricing_plan, .cmp-tool-card, .cmp-source-card, .cmp-method-card, .multi-feature-card,
  .header_image-wrapper, .split-feature_image-wrapper, .blog_image-wrapper) { border-radius: 0; }

/* ── FAQ questions as native buttons (site-v4.js; the homepage uses the same class from home-v3.js) ── */
.z7-faq-btn { all: unset; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.z7-faq-btn:focus-visible { outline: 2px solid var(--z4-green) !important; outline-offset: 4px; }

/* ── Review fix: the captured light-beige (#FAFAF9) is a third neutral; fold it into the warm field ── */
body:not(:has(.z3-hero)) .background-color-light-beige { background-color: var(--z4-warm); }