/* Zamp design system v2 (D-046, docs/project/DESIGN-V2.md): Ramp-informed structure in the Zamp brand. Loaded on every
   route except /book-call, after the v4 layers and before the homepage files; every rule excludes `/` (.z3-hero). */
:root { --z5-grey: #8c8273; --z5-card: #f6f5f3; --z5-card-2: #efebe5; }

/* ── Tight editorial type (Ramp: one weight, very tight leading) ── */
body:not(:has(.z3-hero)) main h1[data-zamp-type="display"] { line-height: 1.02 !important; letter-spacing: -.025em; }
body:not(:has(.z3-hero)) main :is(h2, h3)[data-zamp-type="section"] { line-height: 1.08 !important; letter-spacing: -.02em; }
body:not(:has(.z3-hero)) main :is(h2, h3, h4)[data-zamp-type="card"] { line-height: 1.17 !important; }

/* ── Two-tone heading: H2 + short lead as one statement, the lead in warm grey at the heading's size ── */
body:not(:has(.z3-hero)) main .text-component.z5-tone { display: block !important; max-width: 46rem !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; grid-template-columns: none !important; }
body:not(:has(.z3-hero)) main .text-component.z5-tone > * { display: inline !important; margin: 0 !important; grid-column: auto !important; grid-row: auto !important; }
body:not(:has(.z3-hero)) main .text-component.z5-tone > div > h2 { display: inline !important; margin: 0 !important; }
body:not(:has(.z3-hero)) main .text-component.z5-tone > .margin-bottom { display: block !important; margin-bottom: 20px !important; }
body:not(:has(.z3-hero)) main .text-component.z5-tone > .margin-top > p { display: inline !important; max-width: none !important; margin: 0 !important;
  font: 400 var(--z-type-section-size)/1.08 var(--z-font-heading) !important; letter-spacing: -.02em; color: var(--z5-grey) !important; }
body:not(:has(.z3-hero)) main .text-component.z5-tone > .margin-top::before { content: "\00a0"; }
/* centred captured variants stay centred */
body:not(:has(.z3-hero)) main .text-component.z5-tone[data-wf--text-header--variant="centered"] { margin-left: auto !important; text-align: center !important; max-width: 44rem !important; }

/* ── Feature cards (side-by-side rows) ── */
.z5-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: var(--z4-head-gap, 64px); }
.z5-card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--z5-card); }
.z5-card--full { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; min-height: 520px; }
.z5-card__copy { position: relative; z-index: 2; padding: 40px 40px 32px; }
.z5-card--full .z5-card__copy { padding: 48px; align-self: start; }
.z5-card__k { margin: 0 0 16px; font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #183e3d; }
.z5-card__t { margin: 0; font: 400 var(--z-type-card-size)/1.17 var(--z-font-heading) !important; letter-spacing: -.01em; color: #000; text-wrap: pretty; }
.z5-card--full .z5-card__t { font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.25rem) !important; line-height: 1.12 !important; }
.z5-card__t span { color: var(--z5-grey); }
.z5-card__b { margin: 16px 0 0; max-width: 30rem; font: 400 16px/1.6 var(--z-font-body); color: #323232; }
.z5-card__art { margin: 0; flex: 1; position: relative; min-height: 0; }
.z5-card--half .z5-card__art { margin-left: 40px; }
.z5-card--half .z5-card__art:has(> .zr--spot) { margin-left: 0; }
/* Half cards in a row share their height; the art is pinned to the foot so both spotlight panels line up. */
.z5-card--half .z5-card__art { flex: none; margin-top: auto; }
.z5-card--half .z5-card__copy { padding-bottom: 40px; }
/* Full-card documents sit right of centre so the arriving message never covers the document's title. */
.z5-card--full .zr-doc { left: 38%; width: 56%; }
.z5-card--full .zr-toast--tl { left: 2%; top: 30%; max-width: 35%; }
/* A photograph in a half card takes the spotlight frame (same inset and bleed as the panels beside it). */
.z5-card--half .z5-card__art:has(> .zr--photo) { margin-left: 0; }
.z5-card--half .zr--photo { background: transparent; }
.z5-card--half .zr--photo .zr-photo, .z5-card--half .zr--photo::after { left: 10%; right: 10%; width: 80%; top: 14%; height: auto; bottom: -8%; }
.z5-card--half .zr--photo::after { top: 50%; }
.z5-card--half .zr--photo .zr-stat { left: 15%; right: 15%; bottom: 8%; }
/* The scene drops its own field inside a card and bleeds off the card's bottom and right edges. */
.z5-card .zr { background: transparent; }
.z5-card .zr-dots { display: none; }
.z5-card--half .zr { aspect-ratio: 4 / 3; }
.z5-card--full .z5-card__art { align-self: stretch; }
.z5-card--full .zr { position: absolute; inset: 48px 0 0 0; width: auto; height: auto; aspect-ratio: auto; }
.z5-card .zr-zoom { left: 0; top: 0; width: 86%; height: 92%; }
.z5-card .zr--photo { background: #ddd6cc; }
.z5-card--half .zr--photo, .z5-card--full .zr--photo { margin: 0; }
.z5-card .zr-doc { top: 10%; } .z5-card .zr-rules { width: 90%; }
@media (max-width: 980px) {
  .z5-cards { grid-template-columns: minmax(0, 1fr); }
  .z5-card--full { display: flex; min-height: 0; }
  .z5-card--full .zr { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .z5-card__copy, .z5-card--full .z5-card__copy { padding: 32px 28px 24px; }
  .z5-card--half .z5-card__art, .z5-card--full .z5-card__art { margin-left: 28px; }
  .z5-card--half .z5-card__art:has(> .zr--spot) { margin-left: 0; }
}

/* ── Product rows (captured three-up feature cards → ruled rows: icon tile, title, one line; no box) ── */
body:not(:has(.z3-hero)) main .cards-component ._3col-grid:has(> .feature-card), body:not(:has(.z3-hero)) main .home_stats_grid:has(> .feature-card) { column-gap: 40px !important; row-gap: 8px !important; }
body:not(:has(.z3-hero)) main .cards-component .feature-card:not(.is-full):not(.is-horizontal) { padding: 28px 0 0 !important; background: transparent !important; outline: 0 !important; box-shadow: none !important; border-top: 1px solid #000; }
body:not(:has(.z3-hero)) main .cards-component .feature-card:not(.is-full):not(.is-horizontal)::after { display: none !important; }
body:not(:has(.z3-hero)) main .cards-component .feature-card .featured-card-icon-container { width: 44px; height: 44px; }
body:not(:has(.z3-hero)) main .cards-component .feature-card .feature_card_title { font-size: var(--z-type-card-size) !important; line-height: 1.17 !important; }
body:not(:has(.z3-hero)) main .background-color-black .cards-component .feature-card, body:not(:has(.z3-hero)) main .background-color-green .cards-component .feature-card { border-top-color: rgba(255, 255, 255, .4); }

/* ── Proof ticker (under marketing heroes) ── */
.z5-ticker { border-top: 1px solid #e6e1da; border-bottom: 1px solid #e6e1da; background: #fff; font-family: var(--z-font-body); }
.z5-ticker__in { max-width: 84rem; margin: 0 auto; padding: 18px var(--z3-g, 60px); display: flex; align-items: center; gap: 40px; }
.z5-ticker__k { flex: none; display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: #000; }
.z5-ticker__k i { width: 8px; height: 8px; background: #183e3d; box-shadow: 0 0 0 3px #afecdb; }
.z5-ticker dl { flex: 1; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.z5-ticker dl > div { display: flex; align-items: baseline; gap: 10px; }
.z5-ticker dt { font-size: 14px; color: #5b5b5b; }
.z5-ticker dd { margin: 0; order: -1; padding: 2px 8px; background: #f6f5f3; font: 400 18px/1.2 var(--z-font-heading); color: #000; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .z5-ticker__in { flex-direction: column; align-items: flex-start; gap: 14px; } .z5-ticker dl { flex-wrap: wrap; justify-content: flex-start; gap: 12px 24px; } }


/* ── Feature-card link (D-047): every card links to the page that covers its subject ── */
.z5-card__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 16px; box-shadow: inset 0 0 0 1px #000; font: 500 14px/1.2 var(--z-font-body); color: #000; text-decoration: none; transition: background .2s, color .2s; }
.z5-card__btn:hover, .z5-card__btn:focus-visible { background: #183e3d; color: #fff; box-shadow: none; }
.z5-card__btn span { transition: transform .2s; } .z5-card__btn:hover span { transform: translateX(3px); }

/* ── Mid-page CTA band (D-047): opens the first "how it works" section, one section-gap above its heading ── */
/* D-049: it follows the cards; the customer proof follows it, each one section-gap apart. */
.z-featrows-host :is(.z-cta--band, .z-cta--light) { margin: clamp(64px, 4rem + 3vw, 120px) 0 0; }
.z5-proof { margin-top: clamp(64px, 4rem + 3vw, 120px); }

/* ── Featured customer quote, quote-led (D-047): image, quote, one byline, one link. No stats, meta or name overlay. ── */
.z-cq--featured .z-cq__body { justify-content: center; padding: 72px 80px; }
.z-cq--featured .z-cq__body::before { display: none; }
.z-cq--featured .z-cq__glyph { font-size: 120px; margin-bottom: 16px; }
.z-cq--featured .z-cq__text { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) !important; line-height: 1.2 !important; letter-spacing: -.015em; max-width: 34ch; }
.z-cq--featured .z-cq__who { margin-top: 32px; padding-left: 0; border-left: 0; font-size: 15px; }
.z-cq--featured .z-cq__foot { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--z3-rule); }
.z-cq--featured .z-cq__cta { margin-top: 0; }
.z-cq--featured .z-cq__media::after { inset: 70% 0 0; opacity: .6; }
.z-cq--featured .z-cq__plate { inset: 0; }
@media (max-width: 1100px) { .z-cq--featured .z-cq__body { padding: 56px 48px; } }
@media (max-width: 600px) { .z-cq--featured .z-cq__body { padding: 36px 24px 40px; } .z-cq--featured .z-cq__glyph { font-size: 88px; } }

/* Full cards carry both renderings: the window (wide) and the spotlight (one column), so phones never get a shrunken window. */
.z5-art-narrow { display: none; }
@media (max-width: 980px) {
  .z5-art-wide { display: none; } .z5-art-narrow { display: block; }
  .z5-card--full .z5-card__art:has(.z5-art-narrow) { margin-left: 0; }
}

/* ── Product hero frame (D-048): homepage split geometry. Copy left; the green product panel fills the right half,
   bleeding to the viewport edge and the hero's top and bottom (as the homepage photograph does). ── */
.z-hb--product { position: relative; overflow: hidden; }
.z-hb--product .decor_wrap { display: none !important; }
.z-hb--product .header_image-wrapper.z-hero-art { background: #183e3d; overflow: hidden !important; }
@media (min-width: 992px) {
  .z-hb--product > .padding-global, .z-hb--product > .padding-global > .container-large, .z-hb--product .section-padding, .z-hb--product .header_component, .z-hb--product .header_content { position: static !important; }
  .z-hb--product > .padding-global > .container-large > .section-padding { min-height: clamp(620px, 47vw, 740px); display: flex; flex-direction: column; justify-content: center; }
  .z-hb--product .header_content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .z-hb--product .header_content-left { max-width: 36rem; padding-right: 56px; }
  .z-hb--product .header_image-wrapper.z-hero-art { position: absolute !important; inset: 0 0 0 50% !important; align-self: stretch !important; justify-self: stretch !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; margin: 0 !important; }
}
@media (max-width: 991px) {
  .z-hb--product .header_image-wrapper.z-hero-art { width: 100vw !important; max-width: none; margin: 48px calc(50% - 50vw) 0 !important; aspect-ratio: 5 / 4 !important; }
  :is(section, div).z-hb--product.z-hb.z-hb.z-hb > .padding-global > .container-large > :is(.section-padding, .padding-section-medium, .padding-section-large) { padding-bottom: 0 !important; }
}

/* ── Trio band (D-048): three feature cards in the homepage Commitment recipe (.z8-commit) ── */
.z5-trio { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: center; padding: 40px; overflow: hidden;
  background: var(--z3-warm, #f6f5f3) url('/migrated/61ca852e0d19092bd43a7cb94ae7d7243e323233ffc391aeb1c48e303a4b47c6.svg') 100% 100% / 112px auto no-repeat; }
.background-color-beige .z5-trio, .background-color-light-beige .z5-trio { background-color: #fff; }
.z5-trio > * { position: relative; }
body:not(:has(.z3-hero)) main .z5-trio > .text-component.z5-trio__head { grid-column: 1 / span 4; margin: 0 !important; max-width: none !important; text-align: left !important; display: block !important; }
body:not(:has(.z3-hero)) main .z5-trio__head h2 { margin: 0 !important; font: 400 var(--z-type-subsection-size)/1.2 var(--z-font-heading) !important; letter-spacing: -.01em; text-align: left !important; text-wrap: balance; }
body:not(:has(.z3-hero)) main .z5-trio__head p { margin: 12px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; text-align: left !important; color: var(--z3-body) !important; }
.z5-trio > .cards-component { grid-column: 5 / -1; margin: 0 !important; }
.z5-trio--bare > .cards-component { grid-column: 1 / -1; }
body:not(:has(.z3-hero)) main .z5-trio ._3col-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
body:not(:has(.z3-hero)) main .z5-trio .cards-component .feature-card.feature-card:not(.is-full):not(.is-horizontal) { display: flex !important; flex-direction: column; padding: 24px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; min-height: 0 !important; }
body:not(:has(.z3-hero)) main :is(.background-color-beige, .background-color-light-beige) .z5-trio .cards-component .feature-card.feature-card:not(.is-full):not(.is-horizontal) { background: var(--z3-warm, #f6f5f3) !important; }
body:not(:has(.z3-hero)) main .z5-trio .feature-card > .margin-bottom { margin: 0 0 20px !important; }
body:not(:has(.z3-hero)) main .z5-trio .cards-component .feature-card .featured-card-icon-container { width: 36px !important; height: 36px !important; padding: 2px !important; background: var(--z3-green, #183e3d) !important; }
body:not(:has(.z3-hero)) main .z5-trio .featured-card-icon-container img { width: 100% !important; height: 100% !important; }
body:not(:has(.z3-hero)) main .z5-trio .feature_card_stat:empty, body:not(:has(.z3-hero)) main .z5-trio .feature-card > p:empty { display: none !important; }
body:not(:has(.z3-hero)) main .z5-trio .cards-component .feature-card .feature_card_title { margin: 0 !important; font: 400 var(--z-type-card-size)/1.3 var(--z-font-heading) !important; letter-spacing: -.005em; color: #000 !important; }
body:not(:has(.z3-hero)) main .z5-trio .feature_card_desc { display: block; margin-top: 8px !important; font: 400 14px/1.5 var(--z-font-body) !important; color: var(--z3-body, #323232) !important; }
@media (max-width: 1100px) {
  body:not(:has(.z3-hero)) main .z5-trio > .text-component.z5-trio__head, .z5-trio > .cards-component { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .z5-trio { padding: 24px; background-size: 96px auto; }
  body:not(:has(.z3-hero)) main .z5-trio ._3col-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  body:not(:has(.z3-hero)) main .z5-trio .cards-component .feature-card.feature-card:not(.is-full):not(.is-horizontal) { padding: 20px !important; }
}
