/* site-v4-chrome.css — family layer of the D-034 site-wide uplevel; see site-v4.css.
   Shared chrome and conversion components on every route: navigation bar + menus, FAQ, footer closing CTA,
   small CTA bands, forms (fields, selects, checkboxes, submit buttons, success/error states) and the /pricing plan
   cards + comparison table. CSS only; no copy, links, forms or assets are hidden or replaced.
   The homepage `/` is the reference and must not change: its nav, FAQ and footer already carry home-v6…v9 overrides,
   so every rule that would otherwise reach `/` is scoped with `:root:not(:has(.z3-hero))` (the homepage hero). */

/* ── 1. Navigation: the homepage's bar on every template ───────────────────────────────────────────────────────────
   Home (home-v6/v7): gutter clamp(20px, 4.2vw, 60px) on an 84rem spine, weight-500 actions, and a persistent
   "See a demo" button in the bar below 992px. Other templates had a fixed 60px gutter (misaligned with / at 1024)
   and 400-weight actions. (The announcement banner above the bar belongs to site-v4-heroes.css.) */
:root:not(:has(.z3-hero)) .navbar_component { padding-left: clamp(20px, 4.2vw, 60px) !important; padding-right: clamp(20px, 4.2vw, 60px) !important; }
:root:not(:has(.z3-hero)) .navbar_container { max-width: 84rem; margin-left: auto; margin-right: auto; }
:root:not(:has(.z3-hero)) .navbar_button-wrapper-inside > a { font-weight: 500 !important; }
@media (max-width: 991px) {
  :root:not(:has(.z3-hero)) .navbar_button-wrapper-inside { display: flex !important; align-items: center; }
  :root:not(:has(.z3-hero)) .navbar_button-wrapper-inside > a:not([href="/book-call"]) { display: none !important; }
  :root:not(:has(.z3-hero)) .navbar_button-wrapper-inside > a[href="/book-call"] {
    display: inline-flex !important; align-items: center; height: 36px; min-height: 36px; padding: 0 14px !important; margin-right: 8px; font-size: 14px !important;
    position: relative;
  }
  /* 44px tap target without changing the drawn 36px button (as on /). */
  :root:not(:has(.z3-hero)) .navbar_button-wrapper-inside > a[href="/book-call"]::after { content: ""; position: absolute; inset: -4px -2px; }
}

/* ── 2. FAQ: the homepage FAQ on every template ─────────────────────────────────────────────────────────────────────
   Warm field, 120/96/72 section rhythm, heading cols 1–5 / questions cols 7–12 on the 12-column grid, 20px/500 black
   questions (some templates used an 18px/400 grey lead), underlined contact links, answers capped at 65ch. */
:root:not(:has(.z3-hero)) section:has(.faq_component) { background-color: var(--z4-warm); }
:root:not(:has(.z3-hero)) :is(.padding-section-medium, .padding-section-large, .section-padding):has(> .faq_component) {
  padding-top: var(--z4-sec-y) !important; padding-bottom: var(--z4-sec-y) !important;
}
:root:not(:has(.z3-hero)) .faq_content-left h2 {
  font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; text-wrap: balance;
}
:root:not(:has(.z3-hero)) .faq_content-left p a {
  font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap;
}
:root:not(:has(.z3-hero)) .faq_content-left p a strong { font-weight: inherit; }
:root:not(:has(.z3-hero)) .faq_question > :first-child {
  font-family: var(--z-font-body) !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 500 !important;
  letter-spacing: 0 !important; color: var(--z4-ink) !important; text-wrap: balance;
}
:root:not(:has(.z3-hero)) .faq_answer p { max-width: 65ch; }
@media (min-width: 981px) {
  :root:not(:has(.z3-hero)) .faq_content {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: var(--z4-gap) !important;
  }
  :root:not(:has(.z3-hero)) .faq_content > :first-child { grid-column: 1 / span 5; position: sticky; top: 120px; align-self: start; }
  :root:not(:has(.z3-hero)) .faq_content > :last-child { grid-column: 7 / -1; }
}
@media (max-width: 767px) {
  /* Tap target via inline padding: the captured markup keeps the word space inside the link, so stay inline. */
  :root:not(:has(.z3-hero)) .faq_content-left p a { display: inline; padding: 12px 0; }
}

/* ── 3. Footer closing CTA: retired by D-035. CTAs no longer sit in the footer; the footer's CTA block is removed
   server-side and every page ends with the shared Cta `closing` section (site-components.css). ── */

/* ── 4. Small CTA bands (product, integration, partnership, customers, events) ──────────────────────────────────────
   Black band → deep-green panel with the green marks; warm subscribe band keeps its warm field and gets the warm
   two-square mark instead of a dot grid running behind the form. Section-size H2 left (7 cols), action/form right on
   the baseline, card padding 64/40/24. */
:root:not(:has(.z3-hero)) .small-cta_component {
  position: relative; padding: 64px; background-repeat: no-repeat;
}
:root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) {
  background-color: var(--z4-green); background-image: var(--z4-mark-green-a), var(--z4-mark-green-b);
  background-position: 100% 0, 0 100%; background-size: 96px auto, 61px auto;
}
:root:not(:has(.z3-hero)) .small-cta_component.is-subscribe {
  background-color: var(--z4-warm); background-image: var(--z4-mark-warm); background-position: 100% 0; background-size: 96px auto;
}
:root:not(:has(.z3-hero)) .small-cta_content {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--z4-gap); align-items: end; place-items: end stretch;
}
:root:not(:has(.z3-hero)) .small-cta_content > .max-width-small { max-width: none; }
:root:not(:has(.z3-hero)) .small-cta_content h2 {
  max-width: 24ch; margin: 0; font-size: var(--z-type-section-size) !important; line-height: 1.18 !important; letter-spacing: -.015em; text-wrap: balance;
}
:root:not(:has(.z3-hero)) .small-cta_content .button-group { justify-content: flex-end; }
:root:not(:has(.z3-hero)) .small-cta_content .button-group > .cta_form-block { width: 100%; margin: 0; }
/* White button on the green panel: no dark keyline (homepage "light" button: white → mint). */
:root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) .button.z-button-white { border-color: #fff; }
:root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) .button.z-button-white:hover { border-color: var(--z4-mint); }
:root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) .cta_form .form_input { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
:root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) .cta_form .form_input::placeholder { color: rgba(255, 255, 255, .7); }
@media (max-width: 991px) {
  :root:not(:has(.z3-hero)) .small-cta_component { padding: 56px 40px; }
}
@media (max-width: 767px) {
  :root:not(:has(.z3-hero)) .small-cta_component { padding: 48px 24px; }
  :root:not(:has(.z3-hero)) .small-cta_component:not(.is-subscribe) { background-image: var(--z4-mark-green-a); background-size: 64px auto; }
  :root:not(:has(.z3-hero)) .small-cta_component.is-subscribe { background-size: 64px auto; }
  :root:not(:has(.z3-hero)) .small-cta_content { grid-template-columns: minmax(0, 1fr); align-items: start; place-items: start stretch; }
  :root:not(:has(.z3-hero)) .small-cta_content h2 { max-width: 13ch; }
  :root:not(:has(.z3-hero)) .small-cta_content .button-group { justify-content: flex-start; }
}

/* ── 5. Forms outside heroes: one field and button recipe ───────────────────────────────────────────────────────────
   56px fields and submits, weight-500 submit labels (typography.css sets every input[data-zamp-type] to 400),
   56px selects, square checkboxes with a deep-green checked state, 2px deep-green focus ring (mint on dark). */
:root:not(:has(.z3-hero)) form input[type="submit"][data-zamp-type]:not(.header_component *),
:root:not(:has(.z3-hero)) form input[type="submit"]:not(.header_component *) { font-weight: 500 !important; }
:root:not(:has(.z3-hero)) form select.form_input.is-select-input { min-height: 56px; height: 56px; padding-left: 16px; border-radius: 0; }
:root:not(:has(.z3-hero)) form textarea.form_input { border-radius: 0; }
:root:not(:has(.z3-hero)) form .form_input:focus-visible { outline: 2px solid var(--z4-green); outline-offset: 2px; }
:root:not(:has(.z3-hero)) :is(.footer_component, .small-cta_component:not(.is-subscribe), .background-color-green, .background-color-black) form .form_input:focus-visible { outline-color: var(--z4-mint); }
:root:not(:has(.z3-hero)) form :not(:is(.blog-component, .section_roles) *).w-checkbox-input { width: 16px; height: 16px; border: 1px solid var(--z4-rule-2); border-radius: 0; background-color: #fff; }
:root:not(:has(.z3-hero)) form :not(:is(.blog-component, .section_roles) *).w-checkbox-input.w--redirected-checked { border-color: var(--z4-green); background-color: var(--z4-green); background-size: 12px 12px; }
:root:not(:has(.z3-hero)) form :not(:is(.blog-component, .section_roles) *).w-checkbox-input.w--redirected-focus { box-shadow: none; outline: 2px solid var(--z4-green); outline-offset: 2px; }
/* Filter dropdowns (integrations, partners, integration directories): weight-500 toggle, rule-framed floating panel.
   The blog and careers filters (.blog-component, .section_roles) are styled in site-v4-content.css and left to it. */
:root:not(:has(.z3-hero)) :not(:is(.blog-component, .section_roles) *).integrations-category-toggle { font-weight: 500; }
:root:not(:has(.z3-hero)) :not(:is(.blog-component, .section_roles) *).integrations-category-nav.w--open { border: 1px solid var(--z4-rule); border-radius: 0; box-shadow: var(--z4-shadow); }
:root:not(:has(.z3-hero)) .integrations-category-checkbox { cursor: pointer; }

/* Success / error states: sharp, left-aligned 14px/500 blocks instead of a red-boxed default. The wrappers lose
   Webflow's default tinted padding box; the message itself carries the surface. Rich success messages (the support
   form's heading + text) keep their structure. */
:root:not(:has(.z3-hero)) :is(.form_message-success-wrapper, .form_message-error-wrapper) { padding: 0; border: 0; background: transparent; text-align: left; }
:root:not(:has(.z3-hero)) .form_message-success-wrapper .form_message-success,
:root:not(:has(.z3-hero)) .form_message-error-wrapper .form_message-error {
  display: block; min-height: 0; margin-top: 8px; padding: 12px 16px; border-radius: 0; text-align: left;
  font: 500 14px/1.4 var(--z-font-body) !important; letter-spacing: 0 !important;
}
:root:not(:has(.z3-hero)) .form_message-success-wrapper .form_message-success { border: 0; background: var(--z4-mint); color: var(--z4-act); }
:root:not(:has(.z3-hero)) .form_message-success-wrapper .form_message-success:has(> div:only-child:empty) { display: none; } /* captured with no success copy (customers, events subscribe) */
:root:not(:has(.z3-hero)) .form_message-success-wrapper .form_message-success :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--z4-ink); text-align: left; }
:root:not(:has(.z3-hero)) .form_message-success-wrapper .form_message-success .margin-bottom { margin-bottom: 4px; }
:root:not(:has(.z3-hero)) .form_message-error-wrapper .form_message-error { border: 1px solid #b32318; background: #fff; color: #b32318; }
:root:not(:has(.z3-hero)) .form_message-error-wrapper .form_message-error > * { color: inherit; border: 0; padding: 0; background: none; text-align: left; }
:root:not(:has(.z3-hero)) :is(.footer_component, .small-cta_component:not(.is-subscribe)) .form_message-error-wrapper .form_message-error { border-color: rgba(255, 255, 255, .55); background: transparent; color: #ffb4a8; }

/* ── 6. /pricing: plan cards and the comparison table ───────────────────────────────────────────────────────────────
   Cards: sharp warm cards that frame in black on hover (homepage card recipe), weight-500 56px submit, black
   section labels so each tier reads tier → promise → action → features. Table: 500 action labels, square header
   buttons that fit their columns on phones, centred status icons. */
.pricing_plan { transition: border-color .15s; }
.pricing_plan:hover { border-color: var(--z4-ink); }
.pricing_plan .pricing_feature-list > .heading-style-h6 { color: var(--z4-ink); }
.pricing_plan .pricing_feature-list > .text-weight-medium {
  margin-top: 8px; font-size: 16px !important; line-height: 1.5 !important; font-weight: 500 !important; color: var(--z4-ink);
}
.pricing_plan .pricing_feature-list > .heading-style-h6 + .text-weight-medium { margin-top: 0; }
.pricing_plan .pricing_feature { align-items: flex-start; color: var(--z4-body); }
/* Check sits on the first line of a wrapped feature (24px line), not the middle of the block. */
.pricing_plan .pricing_icon-wrapper { align-self: flex-start; display: flex; align-items: center; height: 1.5em; }
.pricing_row-content { align-items: center; justify-content: center; }
.pricing-table_icon-wrapper { display: flex; align-items: center; justify-content: center; }
.pricing_heading-row h4 { letter-spacing: 0; }
@media (max-width: 767px) {
  .pricing_top-row-content .is-pricing-button {
    min-height: 44px !important; height: auto; padding: 10px 8px !important; font-size: 14px !important; line-height: 1.2 !important;
    white-space: normal; text-align: center;
  }
  /* Review fix: one-line and two-line header buttons share one height. */
  .pricing_top-row-content .is-pricing-button { min-height: 52px !important; display: flex !important; align-items: center; justify-content: center; }
}