/* Zamp design-system refinements — authored corrections layered over the captured Webflow styles.
   Loaded on every public route after components.css. Source of truth for the rules: docs/project/DESIGN.md.
   Sections: 1 text colour · 2 secondary text · 3 weight · 4 selection/links · 5 square tag · 6 fonts. */

:root {
  --z-ink-body: var(--z-primitives-neutral-colors-neutral-dark, #323232);
  --z-ink-secondary: var(--z-primitives-neutral-colors-neutral-dark, #323232);
  --z-ink-muted: var(--z-primitives-neutral-colors-neutral, #838383); /* 24px+ or on dark fields only */
  --season-sans: var(--z-font-body); /* captured blog tables reference this undefined variable */
}

/* 1 · Body, lead, article and supporting text are neutral dark on light surfaces. Dark fields and
   controls keep their own inherited colour via --z-body-ink: currentColor. Headings stay black. */
/* Text elements only: never buttons, links, tags, controls or anything that sets its own colour. */
:is(p, li, td, th, dd, dt, figcaption, small, div, span):is([data-zamp-type="body"], [data-zamp-type="lead"], [data-zamp-type="reading"], [data-zamp-type="small"]):not(.button, .w-button, .tag, .tag-text, .tag-text-2, [class*="button"], [class*="_link"], [class*="-link"], [class*="toggle"], [class*="badge"], [class*="status"], [class*="pill"]) { color: var(--z-body-ink, var(--z-ink-body)); }
.background-color-green, .background-color-black, .footer_component, .small-cta_component,
.split-feature-left, .image-card-green, .review-card-green, .cmp-editorial-snapshot, .cmp-table-head,
.integrations-category-dropdown, .text-color-alternate, .navbar_component, .banner_component,
[class*="w-variant-a9b86035"], [class*="w-variant-ad2c7a1a"], [class*="w-variant-2f3bec32"],
.z-opt-c__team, .z-opt-b, .z-handoff, .tag { --z-body-ink: currentColor; }

/* 2 · Secondary text uses one token instead of six greys; names and dates are black. */
.breadcrumb_item, .blog_post_hero_author_designation, .c_post_tes_role, .speakers_role,
.cmp-prose, .cmp-body-copy, .b_post_toc_link, .blog-toc-header { color: var(--z-ink-secondary); }
.blog_post_hero_author_name, .blog_post_hero_date_item, .c_post_tes_name { color: var(--z-color-black, #000); }
.heading-style-h6.text-color-secondary { color: var(--z-ink-secondary); }
.text-style-muted { opacity: 1; color: var(--z-ink-secondary); }
.footer_component .footer-title { color: var(--z-ink-muted); }
input::placeholder, textarea::placeholder { color: #6f6f6f; opacity: 1; }

/* 3 · Season ships 400 and 500 only; never ask the browser to synthesise bold. */
strong, b, .text-weight-semibold, .text-weight-bold, .text-weight-xbold,
.pricing_row-content, .text-style-tagline { font-weight: 500; }

/* 4 · Selection and the current dropdown link were Webflow blue. */
::selection { background: var(--z-color-mint, #afecdb); color: var(--z-color-black, #000); }
.w-dropdown-link.w--current { color: inherit; }

/* 5 · One eyebrow treatment: the approved square tag. Captured tags were yellow/green pills. */
.tag.z-tag, .tag {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1);
  color: var(--z-color-black, #000);
  padding: 5px 12px;
  font-weight: 500;
  letter-spacing: .01em;
}
.tag.is-text, .tag.z-is-text, .tag.blank, .tag.z-blank { border: 0; padding: 0; background: transparent; }
.background-color-green .tag, .background-color-black .tag, .footer_component .tag, .small-cta_component .tag,
.split-feature-left .tag, [class*="w-variant-a9b86035"] .tag, [class*="w-variant-ad2c7a1a"] .tag,
.tag.is-alternate, .tag.z-is-alternate { border-color: #ffffff4d; background: transparent; color: #e0eee7; }

/* 6 · Fonts: captured blog tables and tags inherit the Season body family explicitly. */
.text-rich-blog table, .text-rich-blog td, .text-rich-blog th { font-family: var(--z-font-body); }

/* 7 · Square geometry everywhere outside product illustrations and people avatars. */
.w-pagination-next, .w-pagination-previous {
  border-radius: 0; font-size: 1rem; line-height: 1.5; padding: .6875rem 1.125rem;
  background: transparent; border: 1px solid var(--z-action, #0c0a08); color: var(--z-color-black, #000);
}
.w-pagination-next:hover, .w-pagination-previous:hover { background: var(--z-color-rule, #e6e1da); }
.w-checkbox-input--inputType-custom { border-radius: 0; box-shadow: none; border-color: var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1); }
.w-checkbox-input--inputType-custom.w--redirected-checked { background-color: var(--z-action, #0c0a08); border-color: var(--z-action, #0c0a08); }
.w-checkbox-input--inputType-custom.w--redirected-focus { box-shadow: none; outline: 2px solid var(--z-color-green, #183e3d); outline-offset: 2px; }
.form_radio-icon { border-radius: 0; }

/* 8 · One button system: 48px, 16px/400, #0C0A08 fill and border, hover #323232; secondary/outline/white hover #E6E1DA; one icon gap. */
.button, .z-button { border-color: var(--z-action, #0c0a08); border-radius: 0; }
.button.is-alternate:hover, .button.z-is-alternate:hover, .z-button-white:hover, .button.is-secondary:hover, .z-button-outline:hover { background-color: var(--z-color-rule, #e6e1da); }
.button.is-icon, .button.is-link.is-icon { gap: .5rem; }
.button.is-small.outline { border-color: var(--z-action, #0c0a08); }
.button.is-pricing-button.max-width-full { padding: .6875rem 1.125rem; }
.z-opt .z-opt__submit { height: 48px; font-size: 16px; font-weight: 400; }
.z-opt .z-opt__submit:hover { background: var(--z-primitives-neutral-colors-neutral-dark, #323232); border-color: var(--z-primitives-neutral-colors-neutral-dark, #323232); color: var(--z-color-white, #fff); }
.z-opt .z-opt__submit--light:hover { background: var(--z-color-mint, #afecdb); border-color: var(--z-color-mint, #afecdb); color: var(--z-color-black, #000); }
.z-opt__input { height: 48px; }

/* 9 · One field spec: white, 1px #C8BFB1, 48px, visible green focus. Dark-form and outline variants keep their own surface. */
.form_input:not([class*="w-variant-"]):not(.is-outline) { background-color: var(--z-color-white, #fff); border-color: var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1); border-radius: 0; }
.form_input:focus-visible, .z-opt__input:focus-visible, .w-input:focus-visible, .w-select:focus-visible { outline: 2px solid var(--z-color-green, #183e3d) !important; outline-offset: 2px !important; box-shadow: none !important; }
.form_message-error, .form_message-error div, ._wf-hs_error-alert, .text-color-red { color: #b32318; }
.w-form-fail { background-color: var(--z-color-warm, #f6f5f3); border: 1px solid #b32318; }

/* 10 · Surfaces, tiles and rules on the palette. */
.newsletter_card { background-color: var(--z-color-warm, #f6f5f3); }
.newsletter_card.is-dark, .newsletter_card.z-is-dark, [class*="newsletter_card"][class*="dark"] { background-color: var(--z-action, #0c0a08); }
.split-feature-icon { background-color: var(--z-color-green, #183e3d); }
.featured_card_divider { background-color: var(--z-color-rule, #e6e1da); }
.integrations-category-box { border-color: var(--z-primitives-brand-colors-very-dark-beige, #c8bfb1); }
.text-rich-blog table, .text-rich-blog td, .text-rich-blog th { border-color: var(--z-color-rule, #e6e1da); }
.text-rich-blog th, .text-rich-blog thead { background-color: var(--z-color-warm, #f6f5f3); }

/* 11 · One logo-row treatment: grayscale at 85%, consistent height, colour on hover (matches HomeLogoBank). */
.customers_logo { filter: grayscale(1); opacity: .85; max-height: 2rem; transition: opacity .2s, filter .2s; }
.customers_logo-item:hover .customers_logo { filter: none; opacity: 1; }

/* 12 · Measure: a heading-plus-support block never runs the full 84rem container. Centered blocks
   cap at 52rem with a 40rem paragraph; left-aligned variants keep the same caps without centering. */
.text-component:not([class*="max-width"]) { max-width: 52rem; }
.text-component:not([class*="max-width"]) p,
.text-component:not([class*="max-width"]) .text-size-medium,
.text-component:not([class*="max-width"]) .text-size-large { max-width: 40rem; margin-left: auto; margin-right: auto; }
.text-component.z-text-header-left:not([class*="max-width"]) p,
.text-component.z-split-text-header-left:not([class*="max-width"]) p,
.text-component[class*="w-variant-9d5bf280"] p,
.text-component[class*="w-variant-363b97ed"] p { margin-left: 0; margin-right: 0; }
/* Centered hero: a readable title measure and lead, with the form directly beneath. */
.header_content.z-split-header-center .header_title_wrapper h1,
.header_content[class*="w-variant-b94e9b91"] .header_title_wrapper h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.header_content.z-split-header-center .text-size-medium,
.header_content[class*="w-variant-b94e9b91"] .text-size-medium { max-width: 36rem; margin-left: auto; margin-right: auto; }

/* 13 · One card standard. Grids stretch their items; every content card is a top-aligned flex column with
   2rem padding and a consistent icon→title→copy rhythm. The homepage stat row (bare stat tiles) is untouched. */
.cards-component ._3col-grid, .cards-component ._2col-grid, .cards-component ._4col-grid, ._3col-grid, ._2col-grid, ._4col-grid,
.events_list, .careers-list, .customers-grid { align-items: stretch; }
.home_stats_grid:has(> .feature-card), .home_stats_grid:has(> .press_card), .home_stats_grid:has(> .media-card) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: 1.5rem; align-items: stretch; justify-content: stretch;
}
.home_stats_grid:has(> .feature-card:nth-child(6)), .home_stats_grid:has(> .feature-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home_stats_grid:has(> .feature-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .home_stats_grid:has(> .feature-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .home_stats_grid:has(> .feature-card) { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; } }

.feature-card, .press_card, .media-card, .customers-quote-card, .event_item, .blog_item-link, .resource_card, .news_card, .newsletter_card {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; height: 100%; min-height: 0;
}
.feature-card, .press_card, .customers-quote-card, .media-card-bottom { padding: 2rem; }
.event_item, .resource_card { padding: 1.5rem; }
.feature-card.is-horizontal { flex-direction: row; align-items: flex-start; padding: 1.5rem; }
/* Icon tile → title → copy rhythm inside cards. */
.feature-card > .margin-bottom.margin-large, .press_card > .margin-bottom.margin-large, .media-card-bottom > .margin-bottom.margin-large { margin-bottom: 1.5rem; }
.feature_card_stat { gap: .5rem; }
.feature_card_title { margin: 0; }
.feature_card_desc { margin: 0; font-weight: 400; }
.press_card .button-group, .press_card > .margin-top, .media-card-bottom .button-group { margin-top: auto; padding-top: 1.5rem; }
/* Fixed-width quote cards only inside the swiper; in a grid they fill the column. */
.cards-component .customers-quote-card:not(.swiper-slide .customers-quote-card) { min-width: 0; max-width: none; }
/* Listing cards keep their image ratio and align meta to the bottom of the card. */
.blog_item-link > :last-child { margin-top: auto; }
.blog_image-wrapper, .media-image-wrapper, .customer_image-wrapper { border-radius: 0; }

/* 14 · FAQ: the captured sticky left column overlaps the accordion once the grid collapses to one column. */
@media (max-width: 991px) { .faq_content-left { position: static; top: auto; } }

/* Footer "Popular content" (Rohit's Loom review, 2026-10-29): the link targets the panel, which opens in place of the
   Webflow interaction that used to reveal it. */
:is(.popular-content,.z-popular-content):target { display: block; }
/* D-073 SOC block: the official AICPA SOC mark, "SOC 2 Type II compliant", and the Trust Center link; the whole block
   is the link. */
a.footer_soc2 { display: inline-flex !important; align-items: center; gap: 16px; color: #fff !important; text-decoration: none !important; }
a.footer_soc2 img { width: 64px !important; height: 64px !important; flex: none; }
a.footer_soc2 p { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 500 15px/1.35 var(--z-font-body); color: #fff !important; }
a.footer_soc2 p > span { font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, .7); }
a.footer_soc2:hover p > span { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
a.footer_soc2:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* D-071 one eyebrow pill, every route (user, 2026-10-29: "never yellow and green together"). Yellow fill, black
   Season Sans 500, no marker; beige fill on forest and black grounds. Replaces the forest-text tag (D-052/D-070), the
   green-dot homepage pill and the square-marker pill (D-060). Status pills inside product graphics and the mint
   category chips on cards are a different role and keep their colours. The :not(#zp) step outranks the per-template
   layers that load after this file. */
html body:not(#zp) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label, .zv-tag, .zg2-tag) {
  display: inline-flex !important; align-items: center; gap: 0 !important; width: auto; height: auto !important;
  padding: 6px 14px !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  background: var(--ds-yellow, #ffec72) !important; color: #000 !important;
  font: 500 13px/1.3 var(--z-font-body) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap;
}
html body:not(#zp) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label, .zv-tag, .zg2-tag)::before,
html body:not(#zp) :is([data-wf--tag--variant].tag, .z14-pill, .zv-tag, .zg2-tag) > span:empty { content: none !important; display: none !important; }
html body:not(#zp) :is(.background-color-green, .background-color-black, .z-hb--story, .z8-managed, .z9-cta__panel, .z-cta--band, .zv-buyout, .zv-commit) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .zv-tag),
html body:not(#zp) .zv-tag--dark { background: var(--ds-ground-beige, #f6f5f3) !important; color: #000 !important; }
/* Category chips on post, event, press and story cards keep the small mint chip. */
html body:not(#zp) main :is(.blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank) { padding: .25rem .75rem !important; background: #afecdb !important; color: #183e3d !important; font: 500 12px/1.3 var(--z-font-body) !important; }

/* D-081 pills (user, 2026-10-29, option F5): every eyebrow pill is white with a hairline and a solid yellow dot before
   black 12px text. The homepage hero pill is the split variant: a yellow "Zamp" segment, then the line.
   Replaces D-071's yellow fill. Card category chips (blog, events, stories) keep their mint chip. */
html body:not(#zp) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label, .zv-tag, .zg2-tag) {
  gap: 8px !important; padding: 5px 14px 5px 11px !important; background: #fff !important; color: #000 !important;
  box-shadow: inset 0 0 0 1px var(--ds-border, #e6e1da) !important; font: 500 13px/1.3 var(--z-font-body) !important;
}
html body:not(#zp) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .z-managed-band .z6-label, .zv-tag, .zg2-tag)::before {
  content: "" !important; display: block !important; flex: none; width: 9px !important; height: 9px !important; margin: 0 !important;
  border-radius: 50% !important; background: var(--ds-yellow, #ffec72) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06) !important; opacity: 1 !important; position: static !important;
}
html body:not(#zp) :is(.background-color-green, .background-color-black, .z-hb--story, .z8-managed, .z9-cta__panel, .z-cta--band, .zv-buyout, .zv-commit) :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill, .zv-tag),
html body:not(#zp) .zv-tag--dark { background: #fff !important; color: #000 !important; box-shadow: none !important; }
html body:not(#zp):not(#zp2) .z14-pill.z-pill--split.z-pill--split.z-pill--split { padding: 3px 14px 3px 3px !important; gap: 10px !important; }
html body:not(#zp):not(#zp2) .z14-pill.z-pill--split.z-pill--split.z-pill--split::before { content: none !important; display: none !important; }
html body:not(#zp):not(#zp2) .z14-pill.z-pill--split.z-pill--split.z-pill--split b { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--ds-yellow, #ffec72); font-weight: 500; color: #000; }

/* D-083 pill size (user, 2026-10-29): eyebrow pills are a step bigger (13px; were 12px). The chips on the homepage
   story photos ("Switched from Avalara", "Customer since 2024") stay at 12px because they are special, and use the
   split style of the hero pill: the first word on a yellow segment, no dot. */
html body:not(#zp):not(#zp2) .customer-industry-container .tag.z6-chip--switch.z-pill--split.z-pill--split {
  gap: 7px !important; padding: 3px 10px 3px 3px !important; background: #fff !important; color: #000 !important;
  box-shadow: none !important; font: 500 12px/1.3 var(--z-font-body) !important; align-items: center;
}
html body:not(#zp):not(#zp2) .customer-industry-container .tag.z6-chip--switch.z-pill--split.z-pill--split::before { content: none !important; display: none !important; }
html body:not(#zp):not(#zp2) .customer-industry-container .tag.z6-chip--switch.z-pill--split.z-pill--split b { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--ds-yellow, #ffec72); font-weight: 500; color: #000; }