/* D-060 site-wide design QA (2026-10-28): fixes found combing every template against Design System v4 (D-052…D-059).
   Loads last on every route except /book-call. Grouped by component; each rule names what it corrects. */

/* Customer-story "Get in touch" card: the dark variant typed white on a white field. It becomes the forest panel of
   the closing CTA, with the same white field and white button. */
html body .newsletter_card.z-newsletter-card-dark { background: #183e3d !important; color: #fff; }
html body .z-newsletter-card-dark .newsletter_card_title { color: #fff !important; }
html body .z-newsletter-card-dark input.z-input { background: #fff !important; color: #000 !important; border: 0 !important; min-height: 48px; }
html body .z-newsletter-card-dark input.z-input::placeholder { color: #838383 !important; }
html body .z-newsletter-card-dark input[type="submit"] { background: #fff !important; color: #183e3d !important; border: 0 !important; min-height: 48px; }

/* Green split panels (/buyout, /careers, /zamp-commitment, /about-us, compare "Switch with confidence"): the D-052 ink
   rule reached their lead and body copy, black on #183e3d. Copy on the green panel reads white, as its bullet rows do. */
html body main .split-feature_left:not(.z-split-feature-media-beige) :is(p, li, div[data-zamp-type="body"]) { color: rgba(255, 255, 255, .82) !important; }
html body main .split-feature_left:not(.z-split-feature-media-beige) :is(h2, h3, h4, h5, h6) { color: #fff !important; }

/* Partner quotes on light plates: the partner marks are white artwork (made for green plates). Ink them. */
html body .z-cq--compact .z-cq__logo { filter: brightness(0); opacity: .82; }

/* Article tables (blog, guides): Webflow fixed them at 896px inside the 640px column, cut mid-word, with three
   different header styles. One D-052 data table: full column width, forest header, beige-light alternate rows. */
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) :is(figure.wp-block-table, .blog-table-wrapper) { overflow-x: auto; max-width: 100%; }
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) table :is(th, td) { padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid #e6e1da !important; text-align: left; vertical-align: top; overflow-wrap: anywhere; background: transparent; color: #000; }
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) table thead :is(th, td),
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) table:not(:has(thead)) tr:first-child > th { background: #183e3d !important; color: #fff !important; font-weight: 500; border-bottom: 0 !important; }
html body main :is(.text-rich-blog, .text-rich-text, .z-article-body) table tbody tr:nth-child(even) > td { background: #f6f5f3 !important; }

/* Breadcrumbs: on phones a long trail pushed the page 10–23px wider than the screen. The trail wraps; the current
   page's label truncates. */
html body .z-crumbs, html body .z-crumbs :is(ol, ul) { flex-wrap: wrap; min-width: 0; max-width: 100%; }
html body .z-crumbs li:last-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Guide covers and state tiles are portrait art (410×488, 566×674) that the 3:2 blog thumbnail cropped through the
   cover title and the state abbreviation. They take their own 5:6 frame. */
html body .blog_image-wrapper:has(> img.guide_image) { aspect-ratio: 5 / 6; height: auto !important; }
html body .blog_image-wrapper > img.guide_image { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }

/* Hairlines are #e6e1da, never ink: integration "Why Zamp" and steps cards, the compare table's Zamp column. */
html body main .feature-card.z-feature-card[style*="border"], html body main .home_stats_grid .feature-card { border-top-color: #e6e1da !important; }

/* Comparison number tiles (/article/*): black numerals on forest. */
html body .cmp-number { color: #fff !important; }

/* Corner-square motif and dot/x grids: one composition does not need every motif. Kept on the green closing CTA
   panel and the quote's green plate (the original zamp.com squares); removed where it collided with content — under
   the trio's third card, cut off at the light CTA's top edge, the x-grid behind quotes, /switch's step cards, the
   /support and /partners corner patterns. */
html body .z5-trio, html body .z-cta--light .z-cta__inner { background-image: none !important; }
html body .z-cq__body::before { content: none !important; }
html body main .decor_wrap:has(> img.image-full) { display: none !important; }
html body main .corner-pattern-black { background-image: none !important; }

/* "The problem" bands (product pages): black with charcoal cards and red/orange glyphs. They take the brand green
   band, white hairline cards and the standard white-on-forest icon tile. */

/* Product-tab graphics (data/graphics.mjs TAB_ART): the live graphic sits on the forest panel's bottom edge, as feature
   cards set theirs, on the same 440px desktop stage; no leftover image frame. */
html body .products-tabs_image-wrapper.z-tab-art { display: flex !important; flex-direction: column; justify-content: flex-end; padding: 56px 56px 0 !important; }
html body .z-tab-art > .zc { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: transparent; }
html body .z-tab-art > .zc:not(.zc--bento) > .zc-card { position: relative; inset: auto; height: auto; margin: 0; }
html body .z-tab-art > .zc--bento .zb-panel { margin-top: 0; }
html body .z-tab-art .zb--stat .zb-panel, html body .z-tab-art .zb--invoice .zb-panel:last-child { margin-right: 0; }
@media (min-width: 981px) { html body .z-tab-art > .zc { display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--g-stage); } }
@media (max-width: 767px) { html body .products-tabs_image-wrapper.z-tab-art { padding: 28px 20px 0 !important; } }

/* Tab-panel feature rows (/products/*, white-label): grey 50px tiles with black glyphs, and H4 titles at 31.5px on one
   page and 16px on the others. Standard 48px forest tile, white glyph; one 16px Season Sans 500 title. */
html body main .z-tabs-icon-container { width: 48px !important; height: 48px !important; min-width: 48px; padding: 12px !important; background: #183e3d !important; }
html body main .z-tabs-icon-container img { filter: brightness(0) invert(1); width: 24px !important; height: 24px !important; }
html body main h4.products-tabs-item-title-text { font: 500 16px/1.4 var(--z-font-body) !important; letter-spacing: 0 !important; }
/* Diagrams (steps, timeline, gauges) are drawn for the warm card surface; on the forest panel they sit on it. */
html body .z-tab-art > .zc:is(.zb--steps, .zb--timeline, .zb--gauges, .zb--converge, .zb--handoff) { background: #f6f5f3; padding: 28px 24px 0; }

/* Integrations block: the converge diagram on the warm field, sized like a half feature card. */
html body .header_image-wrapper.z-hub-art { display: flex !important; flex-direction: column; justify-content: center; padding: 32px !important; background: #f6f5f3 !important; aspect-ratio: auto !important; height: auto !important; }
html body .z-hub-art > .zc { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; background: transparent; }

/* Buttons: one 48px height for standalone buttons (captured Webflow buttons were 52px beside 48px ones). */
html body main :is(a, input).button.w-button:not(.is-link):not(.is-icon):not(.is-small) { min-height: 48px !important; height: 48px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
html body main input.button.w-button:not(.is-link) { display: inline-block; line-height: 46px; }

/* Green split panels: their H4 heading ("Switch with confidence.") sits at the section role, like every other band. */
html body main .split-feature_left:not(.z-split-feature-media-beige) .max-width-small > :is(h2, h3, h4):first-child { font: 400 var(--t-section, 2.5rem)/1.2 var(--z-font-heading) !important; letter-spacing: -.01em; }

/* Pull quotes in posts and stories: 27.2px was off the scale; the quote role is 24px. */
html body main .text-rich-blog blockquote { font-size: 24px !important; line-height: 1.35 !important; }

/* Post footer: "About author:" printed with no bio after it. */
html body .b_post_content_footer_bottom:not(:has(.b_post_content_footer_bottom_title ~ * :is(p, a, img):not(:empty))) .b_post_content_footer_bottom_title { display: none; }

/* /pricing: the sticky plan row sat under the check tiles scrolling beneath it. */
html body .pricing_top-row { z-index: 3; position: sticky; }
@media (max-width: 479px) { html body .pricing_top-row .button { white-space: normal; line-height: 1.2; height: auto; min-height: 48px; padding: 6px 8px !important; } }

/* /careers role chips: small mint category pills (D-052), not grey squares. */
html body .roles-item .display-inlineflex > div { background: #afecdb !important; color: #183e3d !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 500; }

/* Legal pages: headings inside the policy text were body-size; they take the subsection role, and the text column
   aligns to the page spine under the left-aligned title. */
html body .legal-component .text-rich-text :is(h2, h3, h4, h5) { font: 400 24px/1.25 var(--z-font-heading) !important; letter-spacing: -.01em; margin: 40px 0 12px !important; }
html body .legal-component .text-rich-text :is(h6) { font: 500 16px/1.4 var(--z-font-body) !important; margin: 24px 0 8px !important; }
html body .legal-component .max-width-xlarge.align-center { margin-left: 0 !important; margin-right: auto !important; }

/* Bento pills: one mint (#afecdb) and its tint, not two near-mints. */
html body .zb-pill--fill { background: #afecdb; }

/* City sales tax calculator: 56px controls beside the site's 48px; the CTA band on pages without <main> missed the
   48px rule too. */
html body .zsc .zsc-input, html body .zsc .zsc-select, html body .zsc .zsc-btn { height: 48px !important; }
html body .z9-cta :is(.z9-cta__input, .z9-cta__submit) { height: 48px !important; min-height: 48px; }
html body .zsc [class*="hint"], html body .zsc [class*="stale"] { color: #183e3d !important; }

/* Section rhythm: the mid-page CTA and the next quote touched (0px) on /services; captured Webflow divider sections
   (161px with a stray hairline) sat between body sections and quotes on solutions and partnership pages. */
html body .z-cta--light + .z-cq { margin-top: 120px !important; }
@media (max-width: 767px) { html body .z-cta--light + .z-cq { margin-top: 48px !important; } }
html body main section:has(> .padding-global > .container-large > .section-padding > .divider-component:only-child) { display: none !important; }


/* /about-us figures: D-052 KPI tiles (beige-light, hairline, forest figure), not #e6e1da blocks with black figures. */
html body .about_hero_stat { background: #f6f5f3 !important; box-shadow: inset 0 0 0 1px #e6e1da; }
html body .about_hero_stat .feature_card_title { color: #183e3d !important; font-size: 32px !important; }
html body main .section-padding > .divider-component { height: 120px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
html body main .section-padding > .divider-component > * { display: none !important; }
@media (max-width: 767px) { html body main .section-padding > .divider-component { height: 48px !important; } }

/* Customer impact marquee (/customers): stops under reduced motion (D-021), like every other slider. */
@media (prefers-reduced-motion: reduce) { html body .swiper-wrapper.is-partners { animation: none !important; transform: none !important; } }
/* Story testimonials: the dot/cross-matrix ornament under the quote is old Webflow decoration. */
html body img.c_post_video_grid_bg { display: none !important; }
/* Directory counts ("26 Platforms"): #838383 is for 24px and up; at 16px it is the secondary ink. */
html body .integrations-count, html body .integrations-count * { color: #323232 !important; }

/* D-061: compare tables stack on phones and lose the logo header; each cell names its column. */
@media (max-width: 767px) {
  .comparison-table-cell[data-label] { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .comparison-table-cell[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #323232; }
  .comparison-table-cell.is-zamp[data-label]::before { color: #183e3d; }
}

/* D-061: four nexus gauges wrap two by two when the card is narrow (stacked trio cards on phones). */
@container (max-width: 340px) { .zb--gauges .zb-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D-061: directory marks sit in one optical box: square marks 30px, wordmarks up to 40px wide (ink-cropped files). */
html body:not(:has(.z3-hero)) main .integrations-image-wrapper .integrations-icon { width: 40px !important; height: 30px !important; object-fit: contain; }

/* D-061: on beige sections the quote plate turns white, and its square motif became a stray white-on-white block. */
.background-color-beige .z-cq--compact, .background-color-light-beige .z-cq--compact, .section_component:has(> .padding-global .z-cq--compact):is([class*="beige"]) .z-cq--compact { background-image: none; }
/* Logo banks shown static (reduced motion) sit centred under their centred heading. */
@media (prefers-reduced-motion: reduce) { html body:not(:has(.z3-hero)) .z-logo-bank__marquee { justify-content: center; } html body:not(:has(.z3-hero)) .z-logo-bank__track { flex: 1 1 100%; } }

/* D-061: when the managed band sits directly above the closing CTA, the page asks once — the band's button yields
   to the closing CTA's form (feature pages ended on two "Book a demo" asks back to back). */
main section:has(.z-managed-band):has(+ .z9-cta) .z-managed-band .z3-actions .z3-btn { display: none; }

/* D-063 eyebrow pill (user, 2026-10-28): one pill everywhere — never green on yellow. Yellow fill, ink text, one size
   (28px, 13/500), a 6px square marker in the text colour. Replaces the D-052 forest-on-yellow tag, the 25px card
   variant and the managed band's letter-spaced label. Blog/event category chips keep their mint (a different role). */
html body :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label) { display: inline-flex !important; align-items: center; gap: 8px !important; width: auto; height: 28px; padding: 0 12px 0 10px !important; border: 0 !important; border-radius: 999px; background: #ffec72 !important; color: #000 !important; font: 500 13px/1 var(--z-font-body) !important; letter-spacing: .01em !important; text-transform: none !important; white-space: nowrap; }
html body :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label)::before { content: "" !important; display: block !important; position: static !important; flex: none; width: 6px !important; height: 6px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: currentColor !important; opacity: 1 !important; }
html body .z14-pill > span:empty { display: none !important; }
html body .z-managed-band .z6-label { margin-bottom: 16px; }
html body :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill) > div { display: contents; }
/* Category chips on post, event, press and story cards stay the small mint chip, wherever the card sits. */
html body main :is(.blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank) { height: auto; margin-bottom: 0; padding: .25rem .75rem !important; gap: 0 !important; background: #afecdb !important; color: #183e3d !important; font: 500 12px/1.3 var(--z-font-body) !important; letter-spacing: 0 !important; }
html body main :is(.blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank)::before { content: none !important; display: none !important; }
/* Comparison step numbers: white figures on the green tile (they rendered black). */
html body main .cmp-number { color: #fff !important; }

/* D-063 closing CTA (every page): the photograph matches the panel's height exactly, keeping the grid gutter between
   them (user, revised); the customer-logo row is gone (G2 stays as the one proof line). */
html body .z9-cta__panel { background-color: #183e3d !important; padding-top: 80px; padding-bottom: 80px; }
html body .z9-cta__panel > .z9-proof__g2 { margin-top: 24px; }
@media (max-width: 980px) { html body .z9-cta__panel { padding-top: 48px; padding-bottom: 48px; } }
html body .z9-cta__photo { display: flex; }
html body .z9-cta__photo img { flex: 1; height: auto !important; min-height: 100% !important; }
@media (max-width: 980px) { html body .z9-cta__photo img { min-height: 0 !important; } }

/* D-063 product "problem" section (50+ states & territories): the site's black section, on the design system — ink
   ground, white type, hairline option cards with forest icon tiles, and the answer card on the Zamp green. */
html body main section.background-color-black.bottom-left-pattern { background: #0d0d0d !important; background-image: none !important; color: #fff; }
html body main section.background-color-black.bottom-left-pattern h2 { color: #fff !important; font-size: var(--z-type-section-size) !important; line-height: 1.15 !important; letter-spacing: -.015em; max-width: 16ch; text-wrap: balance; }
html body main section.background-color-black.bottom-left-pattern .problem_feature_para { color: rgba(255, 255, 255, .72) !important; font-size: 18px !important; line-height: 1.55 !important; }
html body main section.background-color-black.bottom-left-pattern .insights-problem-grid { gap: 16px !important; }
html body main section.background-color-black.bottom-left-pattern .z-feature-card-light-opacity.feature-card { padding: 32px !important; background: transparent !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; }
html body main section.background-color-black.bottom-left-pattern .z-feature-card-light-opacity .feature_card_title { color: #fff !important; }
html body main section.background-color-black.bottom-left-pattern .featured-card-icon-container { width: 48px !important; height: 48px !important; padding: 12px !important; background: #183e3d !important; }
html body main section.background-color-black.bottom-left-pattern .featured-card-icon-container img { filter: brightness(0) invert(1); width: 24px !important; height: 24px !important; }
html body main section.background-color-black.bottom-left-pattern .feature-card:not(.z-feature-card-light-opacity) { margin-top: 16px; padding: 32px !important; border: 0 !important; outline: 0 !important; background: #183e3d !important; box-shadow: none !important; }
html body main section.background-color-black.bottom-left-pattern .feature-card:not(.z-feature-card-light-opacity) .feature_card_title { color: #fff !important; }
html body main section.background-color-black.bottom-left-pattern .feature-card:not(.z-feature-card-light-opacity) .feature_card_desc { color: rgba(255, 255, 255, .78) !important; }

/* D-064 homepage stories slider: the viewport was clipped at the left gutter (home-v8 inset … var(--z3-g)), so the
   card before the first one stopped short of the browser edge while the right side bled off it. Both edges bleed. */
body:has(.z3-hero) .customer-industry-component :is(.z17-viewport, .swiper) { clip-path: inset(-40px 0 -40px 0) !important; }

/* D-064 story bylines: a hairline, then the name (16/500 ink) over role and company (14 secondary), pinned to the
   card foot so every byline in the row lines up whatever the quote's length. */
body:has(.z3-hero) .customer-industry-info.z6-story__info { flex: 1; }
body:has(.z3-hero) .swiper-slide.is-customer-industry { display: flex; flex-direction: column; }
body:has(.z3-hero) .z6-story__who { display: grid; gap: 2px; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid #e6e1da; font: 400 14px/1.4 var(--z-font-body); color: #323232; }
body:has(.z3-hero) .z6-story__who b { font: 500 16px/1.35 var(--z-font-body); color: #000; }
/* The "Read all customer stories" text link carried button padding, so on phones it sat 18px in from the heading. */
html body:has(.z3-hero) main .z6-stories__aside .button-group a.button.w-button { padding-left: 0 !important; padding-right: 0 !important; }

/* /shopify-filing-partner (published after the 2026-10-05 baseline, captured 2026-10-30): its two forest panels set
   white and pale-green text with the page's own classes, which the site's ink rules for type roles override. Restore
   the colours as published on zamp.com (read from the live page). */
html body main :is(.shp-onboarding-intro, .shp-closing-copy) :is(h2, .text-color-white) { color: #fff !important; }
html body main .shp-onboarding-intro .shp-onboarding-description { color: rgb(224, 234, 230) !important; }
html body main .shp-closing-copy .shp-closing-eyebrow { color: rgb(196, 229, 216) !important; }
html body main .shp-closing-copy .shp-closing-description { color: rgb(224, 235, 229) !important; }
html body main .shp-closing-copy .shp-closing-term { color: rgb(199, 221, 209) !important; }