/* One page design for every main-site page (Stu, 21 Oct 2026: "it feels design is not unified").
   The homepage is the reference. Every other page family (product, feature, use case, company,
   Learn, Marketplace, compare) takes the same hero, headings, labels, cards, buttons and surfaces.
   Loaded last, after live.css. The black Zenoo AI page (body.za-dark) keeps its own skin. */
:root {
  --un-h1: clamp(42px, 7.2vw, 86px);
  --un-h2: clamp(32px, 4.6vw, 56px);
  --un-lead: clamp(18px, 1.6vw, 21px);
  --un-label: #6548e8;
  --un-label-dark: #b9adff;
  --un-grey: #a1a4ab;
  --un-line: #e7e5e0;
  --un-card-r: 16px;
  --un-dark-r: 28px;
  --un-sec: clamp(80px, 9vw, 120px);
}

/* ---- Hero: tag pill, one headline size, one lead, then the product ---- */
body:not(.za-dark) main h1:is(.u-h1),
body:not(.za-dark) .hero h1 {
  font-family: var(--display); font-weight: 650; font-size: var(--un-h1); line-height: .98; letter-spacing: -.052em; text-wrap: balance;
}
body:not(.za-dark) :is(.zf-hero, .u-hero) h1 { max-width: 15ch; }
/* two steps, after Stripe: 86px on top-level pages, a smaller headline on the pages under them */
body[data-depth="deep"]:not(.za-dark) main h1:is(.u-h1), body[data-depth="deep"]:not(.za-dark) .hero h1 { font-size: clamp(40px, 5.4vw, 66px); max-width: 16ch; }
body:not(.za-dark) main h1 :is(em, span) { font-style: normal; color: var(--un-grey); }
/* the feature, company and use case heroes carried a mono eyebrow; it becomes the homepage's tag pill */
body:not(.za-dark) :is(.zf-hero, .u-hero) :is(.zf-k, .u-ey):has(+ h1) {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 0;
  padding: 6px 14px; border: 1px solid var(--un-line); background: #fff; border-radius: 999px;
  font: 500 14px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink);
}
body:not(.za-dark) :is(.zf-hero, .u-hero) :is(.zf-k, .u-ey):has(+ h1)::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--un-label); flex: none;
}
body:not(.za-dark) :is(.zf-hero, .u-hero) h1 { margin-top: 22px; }
body:not(.za-dark) :is(.zf-lead, .u-hero .u-lead, .hero .lead) { font-size: var(--un-lead); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
/* every hero starts at the same height under the nav */
body:not(.za-dark) .zf-hero .zf-wrap { padding-top: 72px; }
body:not(.za-dark) .u-hero > .wrap { padding-top: 56px; }

/* ---- Section headings: one size, left-aligned, grey second phrase ---- */
body:not(.za-dark) main :is(.h2, .zf-h2, .u-h2):not(.cta-h) {
  font-family: var(--display); font-weight: 650; font-size: var(--un-h2); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
}
body:not(.za-dark) main :is(.zf-h2, .u-h2) { max-width: 18ch; }
body:not(.za-dark) main :is(.h2, .zf-h2, .u-h2) :is(em, span):not([class]) { font-style: normal; color: var(--un-grey); }
body:not(.za-dark) .sec-head { text-align: left; justify-items: start; }
body:not(.za-dark) .sec-head h2 { margin-inline: 0; }
body:not(.za-dark) .sec-head .lead { margin-inline: 0; }
/* on the rail pages the section's short label sat centred above the heading; it becomes the purple label */
body:not(.za-dark) main .wrap.event:has(.sec-head) > .stamp .what { display: none; }
body:not(.za-dark) main .sec-head .eyebrow { display: block; margin-bottom: 14px; font: 500 12.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--un-label); }
body:not(.za-dark) main :is(.pg-band, #observability, #contact) .sec-head .eyebrow { color: var(--un-label-dark); }

/* ---- One label style above a heading: purple mono caps ---- */
body:not(.za-dark) main :is(.zf-k, .u-ey):has(+ :is(h2, .zf-h2, .u-h2)) {
  font: 500 12.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--un-label);
}

/* ---- Surfaces: the canvas, and one inset black card for the AI story ---- */
body:not(.za-dark) .u-grey { background: transparent; }
body:not(.za-dark) main > :is(.u-black, .pg-band, .zf-ai) {
  margin-inline: 24px; border-radius: var(--un-dark-r); overflow: hidden; background: #0b0b0e;
}
body:not(.za-dark) main > :is(.u-black, .pg-band, .zf-ai) + section { border-top-color: transparent; }
body:not(.za-dark) main :is(.u-black, .pg-band, .zf-ai) :is(.zf-k, .u-ey, .eyebrow):has(+ :is(h2, .zf-h2, .u-h2)) { color: var(--un-label-dark); }
body:not(.za-dark) main :is(.u-black, .pg-band, .zf-ai) :is(.h2, .zf-h2, .u-h2) { color: #fff; }
body:not(.za-dark) main :is(.u-black, .pg-band, .zf-ai) :is(.h2, .zf-h2, .u-h2) :is(em, span):not([class]) { color: #6f6c7a; background: none; -webkit-text-fill-color: currentColor; }
body:not(.za-dark) .pg-band::before { content: none; }
@media (max-width: 700px) {
  body:not(.za-dark) main > :is(.u-black, .pg-band, .zf-ai) { margin-inline: 8px; border-radius: 22px; }
}

/* ---- Section rhythm: the same space above and below every section ---- */
body:not(.za-dark) .u-sec:not(.u-tight) > .wrap { padding-block: var(--un-sec); }
body:not(.za-dark) .zf-wrap { padding-top: var(--un-sec); padding-bottom: var(--un-sec); }

/* ---- Cards: white, one hairline, one radius. Product UI inside keeps Compliance Hub's own radii ---- */
body:not(.za-dark) main :is(.u-card, .u-pain, .zf-card, .ft-tile, .pg-card, .vs-card, .bw-path, .bw-doc, .bw-get, .pg-log, .pg-li) {
  border-radius: var(--un-card-r);
}
body:not(.za-dark) main :is(.u-card, .u-pain, .pg-card, .vs-card, .bw-path, .pg-li) { border: 1px solid var(--un-line); background: #fff; }
body:not(.za-dark) main .zf-card { background: #fff; border: 1px solid var(--un-line); }
body:not(.za-dark) main :is(.u-card, .pg-card, .vs-card, .pg-li, .ft-tile):hover { border-color: #cfc6ff; }
body:not(.za-dark) main .pg-grid { border-radius: var(--un-card-r); }

/* ---- Buttons: one size for page buttons (product UI keeps its small buttons) ---- */
body:not(.za-dark) main .btn:not(.btn-sm) { height: 46px; padding-inline: 20px; border-radius: 11px; font-size: 15.5px; font-weight: 600; }

/* ---- The timeline chip, on every page that has the left guide (added by site.js on feature and use case pages) ---- */
body:not(.za-dark) main > section > .wrap:has(> .un-chip) { position: relative; }
body:not(.za-dark) .un-chip {
  position: absolute; z-index: 2; top: 0; left: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: var(--canvas); font: 500 13px/1 var(--font-mono); letter-spacing: .02em; box-shadow: 0 0 0 6px var(--canvas);
}
@media (max-width: 1240px) { body:not(.za-dark) .un-chip { left: 16px; transform: translateY(-50%); } }