/* Zamp design system v3 (D-051, docs/project/DESIGN-V3.md): the original zamp.com language (live-site computed styles,
   the captured Webflow CSS and the brand team's v4 book, docs/research/2026-10-22-zamp-core-language.md) refined with
   the polish layer from docs/research/2026-10-22-saas-polish.md, and the 2026-10-22 audit fixes. Loaded last on every
   route except /book-call; every rule excludes the approved homepage (`/`, .z3-hero) or targets off-home components. */

/* ── Tokens (original values; one rule colour, one muted grey, one motion curve) ── */
:root {
  --z6-ink: #000; --z6-act: #0c0a08; --z6-act-hover: #323232; --z6-muted: #838383;
  --z6-beige: #f6f5f3; --z6-beige-2: #fafaf9; --z6-rule: #e6e1da; --z6-rule-2: #c8bfb1;
  --z6-green: #183e3d; --z6-mint: #afecdb; --z6-yellow: #ffec72;
  --z6-ease: cubic-bezier(.45, .05, .55, .95); --z6-t: .24s;
  --z6-shadow: 0 0 0 1.5px var(--z6-rule), 0 24px 60px rgba(0, 0, 0, .1); /* product cards only */
  --z6-float: 0 1px 0 var(--z6-rule), 0 24px 48px -20px rgba(12, 10, 8, .18); /* menus and popovers */
}

/* ── Type: Season Mix 400, line height 1.2, −0.01em; the live site's fluid sizes (H1 ≈55px, H2 ≈47px, H3 ≈38px at
   1440; cap 64px), body and leads in ink. ── */
body:not(:has(.z3-hero)) {
  --z-type-display-size: clamp(2.25rem, 1.6rem + 2vw, 4rem);
  --z-type-section-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --z-type-subsection-size: clamp(1.75rem, 1.25rem + 1.25vw, 2.5rem);
  --z-type-card-size: clamp(1.5rem, 1.25rem + .5vw, 1.75rem);
  --z-type-lead-size: 1.125rem; --z-type-body-line: 1.5; --z-type-lead-line: 1.55;
  --z3-body: #000;
}
html body:not(:has(.z3-hero)) main :is(h1, h2, h3, h4, h5, h6) { font-weight: 400 !important; text-wrap: balance; }
html body:not(:has(.z3-hero)) main :is(h1, h2, h3, h4)[data-zamp-type="display"],
html body:not(:has(.z3-hero)) main :is(h1, h2, h3, h4)[data-zamp-type="section"],
html body:not(:has(.z3-hero)) main :is(h2, h3, h4, h5)[data-zamp-type="subsection"],
html body:not(:has(.z3-hero)) main :is(h2, h3, h4, h5, h6)[data-zamp-type="card"],
html body:not(:has(.z3-hero)) main :is(.z5-card__t, .feature_card_title, .z-cq__text, .z9-cta h2, .z-cta h2, .z5-trio__head h2) { line-height: 1.2 !important; letter-spacing: -.01em !important; }
html body:not(:has(.z3-hero)) main :is(p[data-zamp-type="lead"], .z5-card__b, .z-cta__lead) { text-wrap: pretty; }
/* Body copy in ink on light grounds (dark grounds keep their own on-dark colours). */
html body:not(:has(.z3-hero)) main :is(p[data-zamp-type="lead"], p[data-zamp-type="body"], div[data-zamp-type="body"], .z5-card__b, .feature_card_desc, .text-rich-text p, .text-rich-text li):not(:where(.background-color-black, .background-color-green, .z9-cta__panel, .z-cta--band, .z-hb--story, .footer_component, .small-cta_component) *) { color: var(--z6-ink) !important; }

/* Two-tone statement: a real word space at the heading's size, and the continuation in the original muted grey. */
html body:not(:has(.z3-hero)) main .text-component.z5-tone > .margin-top::before { content: "\00a0"; font-size: var(--z-type-section-size); }
html body:not(:has(.z3-hero)) main .text-component.z5-tone > .margin-top > p { color: var(--z6-muted) !important; line-height: 1.2 !important; letter-spacing: -.01em; }

/* ── Tag: the original yellow pill, the one bright accent per view (white pill on dark grounds) ── */
html body:not(:has(.z3-hero)) [data-wf--tag--variant].tag:not(.is-text):not(.blank) { gap: 0; padding: 6px 16px; border: 0; border-radius: 999px; background: var(--z6-yellow); color: var(--z6-ink); font: 500 14px/1.3 var(--z-font-body); letter-spacing: 0; }
html body:not(:has(.z3-hero)) [data-wf--tag--variant].tag:not(.is-text):not(.blank)::before { content: none; display: none; }
html body:not(:has(.z3-hero)) :is(.background-color-green, .background-color-black, .small-cta_component, .split-feature_left, .z-hb--story) [data-wf--tag--variant].tag:not(.is-text):not(.blank) { background: #fff; color: var(--z6-ink); }
/* Small category tags inside listing cards: the same pill, quieter. */
html body:not(:has(.z3-hero)) :is(.cards-component .blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank) { padding: 4px 10px; border: 0 !important; border-radius: 999px; background: var(--z6-beige); color: var(--z6-ink); font: 500 12px/1.3 var(--z-font-body) !important; }

/* ── Buttons: three sizes, one weight, square. Standard 52 (homepage), form 56, compact 40. ── */
html body:not(:has(.z3-hero)) main :is(.z3-btn, .z-sec__btn, a.button:not(.is-link):not(.is-text):not(.is-icon), .button.w-button:not(.is-link):not(.is-icon)) { border-radius: 0 !important; font-weight: 500 !important; letter-spacing: .02em; white-space: nowrap; transition: background-color var(--z6-t) var(--z6-ease), color var(--z6-t) var(--z6-ease), border-color var(--z6-t) var(--z6-ease); }
html body:not(:has(.z3-hero)) main :is(.z3-btn:not(.z3-btn--outline):not(.z3-btn--light), .z-sec__btn):hover { background-color: var(--z6-act-hover); }
html body:not(:has(.z3-hero)) main .z3-btn--outline { box-shadow: none !important; border: 1px solid var(--z6-act); }
html body:not(:has(.z3-hero)) main .z3-btn--outline:hover { background: var(--z6-act); color: #fff; }
/* Compact: card and quote links (40px, real 1px border, the arrow nudges). */
html body:not(:has(.z3-hero)) main .z5-card__btn { height: 40px; padding: 0 16px; gap: 8px; box-shadow: none; border: 1px solid var(--z6-act); font: 500 14px/1 var(--z-font-body); letter-spacing: .02em; transition: background-color var(--z6-t) var(--z6-ease), color var(--z6-t) var(--z6-ease); }
html body:not(:has(.z3-hero)) main .z5-card__btn span { transition: transform var(--z6-t) var(--z6-ease); }
/* Focus: one visible 2px deep-green ring everywhere (mint on dark grounds). */
html body:not(:has(.z3-hero)) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--z6-green); outline-offset: 2px; }
html body:not(:has(.z3-hero)) :where(.background-color-black, .background-color-green, .z9-cta__panel, .z-cta--band, .z-hb--story, .footer_component) :is(a, button, input, select, textarea):focus-visible { outline-color: var(--z6-mint); }

/* ── Inputs: one light border (#C8BFB1, hover #8C8273 is retired → ink), one dark recipe ── */
html body:not(:has(.z3-hero)) main input:is([type="email"], [type="text"], [type="search"], [type="tel"]):not(:where(.background-color-black, .background-color-green, .z9-cta__panel, .z-cta--band, .z-hb--story) *), html body:not(:has(.z3-hero)) main :is(select, textarea):not(:where(.background-color-black, .background-color-green, .z9-cta__panel, .z-cta--band) *) { border-color: var(--z6-rule-2) !important; background-color: #fff; }
html body:not(:has(.z3-hero)) main input:is([type="email"], [type="text"], [type="search"]):hover { border-color: var(--z6-act) !important; }

/* ── Feature cards: the whole card is the link; one title size per card size; art starts at the same height ── */
.z5-card:has(.z5-card__btn) { cursor: pointer; transition: background-color var(--z6-t) var(--z6-ease); }
.z5-card:has(.z5-card__btn) .z5-card__copy { position: static; }
.z5-card:has(.z5-card__btn) .z5-card__copy > * { position: relative; z-index: 2; }
.z5-card .z5-card__btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.z5-card:has(.z5-card__btn):hover { background-color: #f1efeb; }
.z5-card:has(.z5-card__btn):hover .z5-card__btn { background: var(--z6-green); border-color: var(--z6-green); color: #fff; }
.z5-card:has(.z5-card__btn):hover .z5-card__btn span { transform: translateX(3px); }
html body:not(:has(.z3-hero)) main .z5-card--full .z5-card__t { font-size: clamp(1.75rem, 1.4rem + .9vw, 2rem) !important; }
html body:not(:has(.z3-hero)) main .z5-card--half .z5-card__t { font-size: var(--z-type-card-size) !important; }
html body:not(:has(.z3-hero)) main .z5-card__b { max-width: 34rem; } /* never clamped: card copy is published content */
.z5-card--half .z5-card__copy { min-height: 300px; display: flex; flex-direction: column; align-items: flex-start; }
.z5-card--half .z5-card__copy .z5-card__btn { margin-top: auto; }
.z5-card--half .z5-card__copy .z5-card__b { margin-bottom: 24px; }
@media (max-width: 980px) { .z5-card--half .z5-card__copy { min-height: 0; } .z5-card--half .z5-card__copy .z5-card__btn { margin-top: 24px; } }

/* ── Icon tiles: the original 48px deep-green square with the white outline icon ── */
html body:not(:has(.z3-hero)) main .z5-trio .cards-component .feature-card .featured-card-icon-container { width: 48px !important; height: 48px !important; padding: 4px !important; }

/* ── Corner marks stay inside their panel on phones ── */
@media (max-width: 767px) { .z5-trio, .z-cta--light .z-cta__inner { background-image: none !important; } }

/* ── Section rhythm: two same-field (white) sections never stack their padding (was 240px of dead white) ── */
html body:not(:has(.z3-hero)) main > section.section_component:is(:not([class*="background-color-"]), .background-color-white, .background-color-black:has(> .padding-global .z-managed-band)):not(.z-hb):not(.z-logo-band) + section.section_component:is(:not([class*="background-color-"]), .background-color-white, .background-color-black:has(> .padding-global .z-managed-band)):not(.z-logo-band) > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-top: 0 !important; }
html body:not(:has(.z3-hero)) main > section.section_component:is(:not([class*="background-color-"]), .background-color-white, .background-color-black:has(.z-managed-band)):not(.z-hb):not(.z-logo-band) + .z9-cta { padding-top: 0; }
/* The panels at the foot of feature pages share one gap: the section rhythm. */
html body:not(:has(.z3-hero)) .z-featrows-host :is(.z-cta--band, .z-cta--light), html body:not(:has(.z3-hero)) .z5-proof { margin-top: var(--z3-sec-y, 120px) !important; }

/* ── Product graphics → Zamp product cards (no browser chrome): white card, 1.5px rule, the one shadow, a green icon
   tile in the header, rounded status pills (mint = done/handled, yellow = needs attention) ── */
.zr:not(.zr--product) { background: var(--z6-beige); }
.zr .zr-win__bar, .zr .zr-rail { display: none !important; }
.zr .zr-win__app { grid-template-columns: minmax(0, 1fr) !important; }
.zr .zr-win, .zr .zr-spot, .zr .zr-doc { box-shadow: var(--z6-shadow) !important; }
.zr .zr-toast { box-shadow: 0 0 0 1.5px var(--z6-rule), 0 16px 40px -12px rgba(0, 0, 0, .16) !important; }
.zr .zr-view { padding: 2.6cqw 2.8cqw; }
.zr .zr-view__head { align-items: center; gap: 1.4cqw; padding-bottom: 1.8cqw; margin-bottom: 1.8cqw; border-bottom: 1px solid var(--z6-rule); }
.zr .zr-view__ico { flex: none; display: grid; place-items: center; width: 4cqw; height: 4cqw; background: var(--z6-green); color: #fff; }
.zr .zr-view__ico svg { width: 2cqw; height: 2cqw; }
.zr .zr-view__head b { font: 500 2.2cqw/1.2 var(--z-font-body); letter-spacing: 0; }
.zr .zr-view__head small { color: var(--z6-muted); }
.zr .zr-chip { border-radius: 999px; padding: .5cqw 1.2cqw; background: var(--z6-mint); color: var(--z6-green); font-weight: 500; }
.zr .zr-chip--wait, .zr .zr-chip--dark { background: var(--z6-yellow); color: var(--z6-ink); }
.zr .zr-chip--live { background: var(--z6-mint); color: var(--z6-green); }
.zr .zr-pill.is-ok { border-radius: 999px; }
.zr .zr-pills span.is-on { background: var(--z6-green); }
.zr .zr-table th { color: var(--z6-muted); font-weight: 500; }
.zr .zr-table td { border-bottom-color: var(--z6-rule); }
.zr .zr-kpi { background: var(--z6-beige-2); box-shadow: inset 0 0 0 1px var(--z6-rule); }
.zr .zr-kpi b { color: var(--z6-green); }
.zr .zr-spot__ico, .zr .zr-toast i { background: var(--z6-green); color: #fff; }
.zr--spot .zr-spot__t b, .zr .zr-doc__t { font-family: var(--z-font-heading); }
/* Without the window bar and rail the card sits a little higher and wider in its frame. */
.z5-card .zr .zr-zoom { top: 2%; }
.zr--product .zr-zoom { top: 13%; }
/* Phones: notifications never cover the rows; stamps sit below the values. */
@container (max-width: 600px) {
  .zr--product .zr-toast { display: none; }
  .zr--spot .zr-stamp { bottom: 4%; width: 16cqw; }
  .zr .zr-view__ico { width: 6.5cqw; height: 6.5cqw; } .zr .zr-view__ico svg { width: 3.4cqw; height: 3.4cqw; }
  .zr .zr-view__head b { font-size: 4cqw; }
}

/* ── Pricing: the brand check tile instead of the black disc (0f8e… is the check; d5db… is the dash, left as is) ── */
html body:not(:has(.z3-hero)) main :is(.pricing_row-content, .pricing-table_icon-wrapper) > img[src*="0f8e317e9eb0ed3b"] { opacity: 0; }
html body:not(:has(.z3-hero)) main :is(.pricing_row-content, .pricing-table_icon-wrapper):has(> img[src*="0f8e317e9eb0ed3b"]) { position: relative; }
html body:not(:has(.z3-hero)) main :is(.pricing_row-content, .pricing-table_icon-wrapper):has(> img[src*="0f8e317e9eb0ed3b"])::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: var(--z6-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (max-width: 767px) { html body:not(:has(.z3-hero)) main .pricing_row .button { padding-left: 12px !important; padding-right: 12px !important; font-size: 14px !important; } }

/* ── Listing cards: one frame (1px rule, ink on hover), 3:2 images, on-token borders ── */
html body:not(:has(.z3-hero)) main .guide_image { aspect-ratio: 3 / 2 !important; height: auto !important; object-fit: cover; }
html body:not(:has(.z3-hero)) main .partners-card { border-color: var(--z6-rule) !important; transition: border-color var(--z6-t) var(--z6-ease); }
html body:not(:has(.z3-hero)) main .partners-card:hover { border-color: var(--z6-ink) !important; }
/* Integrations index: logos readable at 32px in their tile. */
html body:not(:has(.z3-hero)) main .integrations-image-wrapper { width: 56px !important; height: 56px !important; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--z6-rule); }
html body:not(:has(.z3-hero)) main .integrations-icon { width: 32px !important; height: 32px !important; object-fit: contain; }
html body:not(:has(.z3-hero)) main .integrations-content { transition: background-color var(--z6-t) var(--z6-ease); }
html body:not(:has(.z3-hero)) main .integrations-content:hover { background-color: var(--z6-beige); }

/* ── Empty CMS states (events with no hosts, unbound rich text) never render ── */
html body:not(:has(.z3-hero)) main .w-dyn-bind-empty { display: none !important; }
html body:not(:has(.z3-hero)) main .margin-top:has(> .w-dyn-list > .w-dyn-empty) { display: none !important; }

/* ── Breadcrumbs on phones: left-aligned, one line, scrolls instead of orphaning the last crumb ── */
@media (max-width: 767px) {
  html body:not(:has(.z3-hero)) .z-crumbs { text-align: left; }
  html body:not(:has(.z3-hero)) .z-crumbs ol { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  html body:not(:has(.z3-hero)) .z-hb--center .header_content, html body:not(:has(.z3-hero)) .z-hb--center :is(h1, p[data-zamp-type="lead"]) { text-align: left !important; }
}

/* ── Article tables on-token ── */
html body:not(:has(.z3-hero)) main .text-rich-text table :is(th, td) { border-color: var(--z6-rule) !important; }
html body:not(:has(.z3-hero)) main .text-rich-text table th { background: var(--z6-beige) !important; }