/* Zamp Design System v4 site-wide (D-052). The brand team's shared design-system artifact (marketing system,
   tokens.json v4, synced 2026-10-16) is now the default on every route, homepage included (user, 2026-10-22: "run that
   over the entire website"). One type scale built from its tokens replaces the ~40 sizes measured on the site.
   Loaded last on every route except /book-call. Values are copied from the artifact's project/tokens.json. */

:root {
  /* Colour tokens (tokens.json v4) */
  --ds-ground-white: #ffffff; --ds-ground-beige: #f6f5f3; --ds-ground-beige-light: #fafaf9;
  --ds-forest: #183e3d; --ds-forest-deep: #183e3d; /* D-056: bands back on the original Zamp green (was #112d2c) */ --ds-black: #0d0d0d;
  --ds-ink: #000000; --ds-ink-secondary: #323232; --ds-ink-caption: #838383;
  --ds-on-dark: #ffffff; --ds-on-dark-body: rgba(255, 255, 255, .8);
  --ds-yellow: #ffec72; --ds-mint: #afecdb; --ds-border: #e6e1da; --ds-neutral-deep: #c8bfb1;
  --ds-highlight: #fdf7d9; --ds-warning-ink: #a04b00;
  --ds-shadow-card: 0 24px 60px rgba(0, 0, 0, .1);
  /* Type scale. The artifact's heading steps (h1 4 / h3 3 / h4 2.5 / h5 2 / h6 1.5rem) assigned to roles, each
     scaled down proportionally on small screens. Seven sizes for the whole site, plus the reading size. */
  --t-hero: clamp(2.5rem, 1.75rem + 2.6vw, 4rem);          /* h1 · homepage hero only            64 → 40 */
  --t-display: clamp(2.25rem, 1.75rem + 1.4vw, 3rem);      /* h3 · every other page H1           48 → 36 */
  --t-section: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem);    /* h4 · section H2, big figures       40 → 30 */
  --t-subsection: clamp(1.5rem, 1.25rem + .8vw, 2rem);     /* h5 · panel headings, feature quote 32 → 24 */
  --t-card: clamp(1.25rem, 1rem + .6vw, 1.5rem);           /* h6 · card titles, quotes           24 → 20 */
  --t-lead: 1.125rem; --t-body: 1rem; --t-small: .875rem; --t-label: .75rem; --t-reading: 1.125rem;
  --lh-head: 1.2; --lh-body: 1.55; --lh-small: 1.45; --lh-reading: 1.7;
  /* The site's role variables point at the scale (homepage and v2/v3 layers read these). */
  --z-type-display-size: var(--t-display) !important; --z-type-display-line: 1.2 !important;
  --z-type-section-size: var(--t-section) !important; --z-type-section-line: 1.2 !important;
  --z-type-subsection-size: var(--t-subsection) !important; --z-type-subsection-line: 1.2 !important;
  --z-type-card-size: var(--t-card) !important; --z-type-card-line: 1.2 !important;
  --z-type-stat-size: var(--t-section) !important; --z-type-stat-line: 1.2 !important;
  --z-type-quote-size: var(--t-card) !important; --z-type-quote-line: 1.35 !important;
  --z-type-compact-size: 1.125rem !important; --z-type-compact-line: 1.4 !important;
  --z-type-lead-size: var(--t-lead) !important; --z-type-lead-line: 1.55 !important;
  --z-type-body-size: var(--t-body) !important; --z-type-body-line: 1.55 !important;
  --z-type-small-size: var(--t-small) !important; --z-type-small-line: 1.45 !important;
  --z-type-reading-size: var(--t-reading) !important; --z-type-reading-line: 1.7 !important;
  --z3-body: #000;
}
body { --z-type-display-size: var(--t-display) !important; --z-type-section-size: var(--t-section) !important; --z-type-subsection-size: var(--t-subsection) !important; --z-type-card-size: var(--t-card) !important; --z3-body: #000; }

/* ── Headings: Season Mix 400, −0.01em, line height 1.2, never heavier than 400 ── */
html body main :is(h1, h2, h3, h4, h5, h6) { font-weight: 400 !important; text-wrap: balance; }
html body main :is(h1, h2, h3, h4, h5, h6, blockquote, [data-zamp-type="display"], [data-zamp-type="section"], [data-zamp-type="subsection"], [data-zamp-type="card"], [data-zamp-type="stat"]):not([data-zamp-type="compact"]):not([data-zamp-type="small"]):not([data-zamp-type="ui"]):not(.z7-faq-btn) { letter-spacing: -.01em !important; }

/* Hero: the homepage H1 at h1; every other page H1 at h3. */
html body .z3-hero h1, html body .z3-hero .z14-l { font-size: var(--t-hero) !important; line-height: 1.12 !important; }
html body main h1:not(.z3-hero h1), html body main [data-zamp-type="display"]:not(.z3-hero *) { font-size: var(--t-display) !important; line-height: 1.2 !important; }
/* Section H2 */
html body main :is(h2, h3)[data-zamp-type="section"], html body main .z3-sec h2, html body main .z3-head h2, html body main .z6-stories__head h2,
html body main .z8-managed h2, html body main .z3-feat h2, html body main .z3-integ h2, html body main .z9-cta h2, html body main .z-cta h2,
html body main .faq_component h2, html body main .z6-faq h2, html body main section > .padding-global h2:not([data-zamp-type]):not(.z-visually-hidden) { font-size: var(--t-section) !important; line-height: 1.2 !important; }
/* Subsection: panel headings, full-width feature cards, the featured customer quote, stat headings */
html body main :is(h2, h3, h4, h5)[data-zamp-type="subsection"], html body main .z5-trio__head h2, html body main .z8-commit__head h2,
html body main .z5-card--full .z5-card__t, html body main .heading-style-h3, html body main .z-cq--featured .z-cq__text, html body main .c_post_stat_title,
html body main .z-managed-band h2 { font-size: var(--t-subsection) !important; line-height: 1.2 !important; }
/* Card titles and quotes */
html body main :is(h2, h3, h4, h5, h6)[data-zamp-type="card"], html body main .z5-card--half .z5-card__t, html body main .feature_card_title,
html body main .z8-commit__terms b, html body main .z3-feat__card h3, html body main .z-cq--compact .z-cq__text, html body main .c_post_tes_quote,
html body main .text-rich-text blockquote, html body main blockquote[data-zamp-type="quote"]:not(.z-cq__text), html body main .z6-story__q { font-size: var(--t-card) !important; line-height: 1.3 !important; }
/* Compact Sans headings (FAQ questions, small headings): 18 / 500 */
html body main :is(.z7-faq-btn, [data-zamp-type="compact"]) { font-size: 1.125rem !important; line-height: 1.4 !important; }
/* Lead, body, reading, small, label */
html body main :is(p, div, span)[data-zamp-type="lead"], html body main .text-size-medium:not(h1, h2, h3, h4, h5, h6), html body main .z3-hero__lead, html body main .z8-managed__lead, html body main .z9-cta__lead, html body main .z-cta__lead, html body main .z5-card__b { font-size: var(--t-lead) !important; line-height: 1.55 !important; }
html body main .z5-card--half .z5-card__b, html body main .feature_card_desc, html body main :is(p, div)[data-zamp-type="body"], html body main .text-size-regular:not(h1, h2, h3, h4, h5, h6) { font-size: var(--t-body) !important; line-height: 1.55 !important; }
html body main .text-rich-text :is(p, li) { font-size: var(--t-reading) !important; line-height: 1.7 !important; }
html body main :is([data-zamp-type="small"], .text-size-small) { font-size: var(--t-small) !important; line-height: 1.45 !important; }
html body main :is(.z6-label, .z5-card__k, .z-cq__k) { font-size: var(--t-label) !important; line-height: 1.3 !important; letter-spacing: .08em !important; }
/* The logo-band label is a caption, never a heading-sized line. */
html body main .z-logo-band :is(h2, h3, h4, h5, h6, p, div)[class], html body main .z-logo-band :is(h6, p) { font-size: var(--t-small) !important; line-height: 1.45 !important; }
/* Body copy in ink on light grounds (dark grounds keep on-dark). */
html body main :is(p[data-zamp-type="lead"], p[data-zamp-type="body"], div[data-zamp-type="body"], .z3-hero__lead, .z5-card__b, .feature_card_desc):not(:where(.background-color-black, .background-color-green, .z9-cta__panel, .z-cta--band, .z-hb--story, .z8-managed, .footer_component, .small-cta_component) *) { color: var(--ds-ink) !important; }

/* ── Tag: the only rounded element; yellow fill, forest text, 14/500, .375rem 1rem. Beige fill on forest. ── */
html body :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill) { display: inline-flex; align-items: center; gap: 0; padding: .375rem 1rem; border: 0 !important; border-radius: 999px; background: var(--ds-yellow) !important; color: var(--ds-forest) !important; font: 500 .875rem/1.2 var(--z-font-body) !important; letter-spacing: 0; }
html body :is([data-wf--tag--variant].tag:not(.is-text):not(.blank), .z14-pill)::before, html body .z14-pill > span:empty { content: none; display: none !important; }
html body :is(.background-color-green, .z-hb--story, .z8-managed, .z9-cta__panel, .z-cta--band) [data-wf--tag--variant].tag:not(.is-text):not(.blank) { background: var(--ds-ground-beige) !important; color: var(--ds-forest) !important; }
html body :is(.cards-component .blog_item-link, .event_item, .event_item_h, .media-card, .press_card) .tag:not(.is-text):not(.blank) { padding: .25rem .75rem; border: 0 !important; border-radius: 999px; background: var(--ds-mint) !important; color: var(--ds-forest) !important; font: 500 .75rem/1.2 var(--z-font-body) !important; }

/* ── Button: square; ink fill on light grounds, white fill with forest text on dark; Season Sans 500 16px, 0.02em,
   padding .6875rem 1.125rem. Form controls share one 48px height. ── */
html body 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), .z3-hero__submit, .z9-cta__submit, .z-cta button) { border-radius: 0 !important; font: 500 1rem/1.2 var(--z-font-body) !important; letter-spacing: .02em !important; }
html body main :is(.z3-btn, .z-sec__btn, a.button:not(.is-link):not(.is-text):not(.is-icon)) { min-height: 48px; height: auto !important; padding: .6875rem 1.125rem !important; }
html body main :is(.z3-hero__input, .z9-cta__input, .z3-hero__submit, .z9-cta__submit, input.form_input, input[type="submit"].button) { height: 48px !important; min-height: 48px !important; }
html body main :is(.z3-hero__submit, .z9-cta__submit, input[type="submit"].button) { padding: 0 1.125rem !important; }
html body main :is(.z9-cta__panel, .z-cta--band) .z9-cta__submit { color: var(--ds-forest) !important; } /* white button on dark grounds: forest text */
html body main .z-cta--light .z9-cta__submit { color: #fff !important; }

/* ── Grounds: bands use the original Zamp green (#183E3D, D-056), the same green as icon tiles, numbers and lines ── */
html body :is(.z9-cta__panel, .z8-managed, .background-color-green, .z-hb--story, .zr--product, .z-cq--plate .z-cq__media),
html body .z-cta--band .z-cta__inner, html body .z-hb--product .header_image-wrapper.z-hero-art { background-color: var(--ds-forest-deep) !important; }

/* ── Table: forest header row (on-dark, Season Sans 500), rows alternate white / beige-light, labels left, numbers right ── */
html body main .text-rich-text table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
html body main .text-rich-text table th { background: var(--ds-forest) !important; color: var(--ds-on-dark) !important; font-weight: 500 !important; border-color: var(--ds-forest) !important; }
html body main .text-rich-text table td { border-color: var(--ds-border) !important; }
html body main .text-rich-text table tbody tr:nth-child(even) td { background: var(--ds-ground-beige-light); }

/* ── KPI card: beige-light fill, border hairline, Season Mix number in forest, caption label ── */
html body main :is(.about_stat-card, .stats-card, .c_post_stat) { background: var(--ds-ground-beige-light) !important; border: 1px solid var(--ds-border) !important; }
html body main :is(.about_stat-card, .stats-card) :is(h2, h3, .heading-style-h3, [data-zamp-type="stat"]) { color: var(--ds-forest) !important; }

/* ── Captions and metadata: ink-caption, 14px minimum ── */
html body main :is(.z-crumbs, .z-crumbs a, .z-crumbs span) { font-size: var(--t-small) !important; }
/* Stragglers found by the type inventory (2026-10-22): story pull quotes, FAQ questions set as text-size-medium,
   quote bylines and section links. */
html body main blockquote:not(.z-cq__text) { font-size: var(--t-card) !important; line-height: 1.35 !important; }
html body main :is(.faq_question, .faq_item, .faq-item) .text-size-medium { font-size: 1.125rem !important; line-height: 1.4 !important; }
html body main .z-cq__who b { font-size: 1rem !important; } html body main .z-cq__who span { font-size: var(--t-small) !important; }
html body main .z-sec__link { font-size: 1rem !important; }

/* ── Product UI cards on the homepage (D-052): the same v4 spec as every other graphic — 1.5px border plus the one
   shadow, Season Sans 500 card titles, rounded status pills (mint = done or handled, yellow = needs attention). ── */
html body :is(.z4-panel, .z3-hero__card, .z3-hub__returns, .z3-hub__engine) { box-shadow: 0 0 0 1.5px var(--ds-border), var(--ds-shadow-card) !important; }
html body .z4-panel__title { font: 500 14px/1.3 var(--z-font-body) !important; letter-spacing: 0 !important; }
html body .z4-chip { border-radius: 999px; padding: 3px 9px; background: var(--ds-yellow); color: var(--ds-ink); font: 500 12px/1.3 var(--z-font-body); }
html body .z4-chip--mint { background: var(--ds-mint); color: var(--ds-forest); }
html body .z11-chip--flag { background: var(--ds-yellow) !important; color: var(--ds-ink) !important; }
html body .z3-hub__status { border-radius: 999px; padding: 3px 9px; }
html body .is-review .z3-hub__status { background: var(--ds-yellow); color: var(--ds-ink); }
html body .z11-returns li > span.z11-num:nth-child(2), html body .z3-hub__returns li > span { font-variant-numeric: normal; } /* dates: no tabular spaces */

/* D-053 revision: split heroes open with the breadcrumb trail on its own row at the top of the band, ruled off from
   the copy (SiteContent wraps it in .z-hb__top before .header_content), so it reads as navigation, not eyebrow. */
html body .z-hb--split .z-hb__top { margin: -24px 0 48px; padding-bottom: 16px; border-bottom: 1px solid var(--z3-rule, #e6e1da); }
html body .z-hb--split .z-hb__top .z-crumbs { margin: 0; font-size: 13px; }
@media (max-width: 767px) { html body .z-hb--split .z-hb__top { margin: -12px 0 28px; padding-bottom: 12px; } }