@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-400.6a54c75699.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-600.064170ebb2.woff) format('woff')}
@font-face{font-family:'Manrope';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-700.80000eb3dd.woff) format('woff')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/manrope-800.edbc47053a.woff) format('woff')}
/* Zenoziva design tokens — generated by tools/build_tokens.py. Do not edit by hand. */
:root {
  --zz-teal-50: #f0fdfa;
  --zz-teal-100: #ccfbf1;
  --zz-teal-200: #99f6e4;
  --zz-teal-300: #5eead4;
  --zz-teal-400: #2dd4bf;
  --zz-teal-500: #14b8a6;
  --zz-teal-600: #0d9488;
  --zz-teal-700: #0f766e;
  --zz-teal-800: #115e59;
  --zz-teal-900: #134e4a;
  --zz-teal-950: #042f2e;
  --zz-deep: #0f3b37;
  --zz-ink-0: #ffffff;
  --zz-ink-50: #f5f8f8;
  --zz-ink-100: #f0f4f4;
  --zz-ink-200: #e0e8e8;
  --zz-ink-300: #c7d3d3;
  --zz-ink-400: #a9b8bb;
  --zz-ink-500: #85979b;
  --zz-ink-600: #5c6e72;
  --zz-ink-700: #3b4d51;
  --zz-ink-800: #2d4247;
  --zz-ink-850: #1f3034;
  --zz-ink-900: #172629;
  --zz-ink-925: #121e21;
  --zz-ink-950: #0f191c;
  --zz-ink-975: #0b1315;
  --zz-ink-text: #0c1a1d;
  --zz-success-light: #15803d;
  --zz-success-dark: #4ade80;
  --zz-warning-light: #b45309;
  --zz-warning-dark: #fbbf24;
  --zz-danger-light: #b91c1c;
  --zz-danger-dark: #f87171;
  --zz-info-light: #1d4ed8;
  --zz-info-dark: #60a5fa;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-write: cubic-bezier(0.65, 0, 0.35, 1);
  --brand: #0f766e;
  --brand-hover: #115e59;
  --brand-ink: #ffffff;
  --brand-text: #0f766e;
  --brand-soft: #e7f4f2;
  --brand-line: #b9e0da;
  --cta-bg: #0f766e;
  --cta-ink: #ffffff;
  --bg: #ffffff;
  --bg-alt: #f5f8f8;
  --surface: #ffffff;
  --surface-2: #f0f4f4;
  --border: #e0e8e8;
  --border-strong: #c7d3d3;
  --ink: #0c1a1d;
  --ink-2: #3b4d51;
  --ink-3: #5c6e72;
  --shadow-sm: 0 1px 2px rgba(12,26,29,.06), 0 1px 1px rgba(12,26,29,.04);
  --shadow-md: 0 10px 30px -12px rgba(12,26,29,.18), 0 2px 6px rgba(12,26,29,.05);
  --shadow-lg: 0 24px 60px -20px rgba(12,26,29,.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --brand: #2dd4bf;
    --brand-hover: #5eead4;
    --brand-ink: #042f2e;
    --brand-text: #5eead4;
    --brand-soft: rgba(45, 212, 191, 0.10);
    --brand-line: rgba(45, 212, 191, 0.28);
    --cta-bg: #0f3b37;
    --cta-ink: #e6fbf7;
    --bg: #0b1315;
    --bg-alt: #0f191c;
    --surface: #121e21;
    --surface-2: #172629;
    --border: #1f3034;
    --border-strong: #2d4247;
    --ink: #e6eeef;
    --ink-2: #a9b8bb;
    --ink-3: #85979b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --brand: #2dd4bf;
  --brand-hover: #5eead4;
  --brand-ink: #042f2e;
  --brand-text: #5eead4;
  --brand-soft: rgba(45, 212, 191, 0.10);
  --brand-line: rgba(45, 212, 191, 0.28);
  --cta-bg: #0f3b37;
  --cta-ink: #e6fbf7;
  --bg: #0b1315;
  --bg-alt: #0f191c;
  --surface: #121e21;
  --surface-2: #172629;
  --border: #1f3034;
  --border-strong: #2d4247;
  --ink: #e6eeef;
  --ink-2: #a9b8bb;
  --ink-3: #85979b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
[data-zz-theme="paper"] {
  --theme-bg: #ffffff;
  --theme-surface: #f5f8f8;
  --theme-text: #0c1a1d;
  --theme-muted: #3b4d51;
  --theme-accent: #0f766e;
  --theme-line: #e0e8e8;
  --theme-chip-bg: #e7f4f2;
  --theme-chip-text: #0f766e;
  --theme-z1: #0c1a1d;
  --theme-z2: #0f766e;
}
[data-zz-theme="mist"] {
  --theme-bg: #f5f8f8;
  --theme-surface: #ffffff;
  --theme-text: #0c1a1d;
  --theme-muted: #3b4d51;
  --theme-accent: #0f766e;
  --theme-line: #c7d3d3;
  --theme-chip-bg: #ffffff;
  --theme-chip-text: #0f766e;
  --theme-z1: #0c1a1d;
  --theme-z2: #0f766e;
}
[data-zz-theme="ink"] {
  --theme-bg: #0b1315;
  --theme-surface: #121e21;
  --theme-text: #e6eeef;
  --theme-muted: #a9b8bb;
  --theme-accent: #2dd4bf;
  --theme-line: #1f3034;
  --theme-chip-bg: #172629;
  --theme-chip-text: #5eead4;
  --theme-z1: #e6eeef;
  --theme-z2: #2dd4bf;
}
[data-zz-theme="deep"] {
  --theme-bg: #0f3b37;
  --theme-surface: #134e4a;
  --theme-text: #e6fbf7;
  --theme-muted: #a7d8d0;
  --theme-accent: #5eead4;
  --theme-line: #1d5a54;
  --theme-chip-bg: #134e4a;
  --theme-chip-text: #99f6e4;
  --theme-z1: #e6fbf7;
  --theme-z2: #5eead4;
}
[data-zz-theme="teal"] {
  --theme-bg: #0f766e;
  --theme-surface: #115e59;
  --theme-text: #ffffff;
  --theme-muted: #ccfbf1;
  --theme-accent: #99f6e4;
  --theme-line: #2a8a82;
  --theme-chip-bg: #115e59;
  --theme-chip-text: #ccfbf1;
  --theme-z1: #ffffff;
  --theme-z2: #99f6e4;
}

/* Zenoziva ERP help: site styles. Colours, radii and fonts come from Brand/tokens/tokens.css (included above). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-sans); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text); text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; }
h1 { font-weight: 800; font-size: clamp(30px, 6vw, 46px); letter-spacing: -0.03em; margin: 8px 0 12px; }
h2 { font-weight: 800; font-size: clamp(22px, 3.6vw, 28px); letter-spacing: -0.02em; margin: 40px 0 16px; }
h3 { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--brand-ink); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }
.accent { color: var(--brand-text); }
.small { font-size: 14px; color: var(--ink-3); }
.ui { font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.preview-banner { background: #b45309; color: #fff; text-align: center; font: 600 14px/1.4 var(--font-sans); padding: 8px 16px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.zz { width: 30px; height: 27px; }
.zz .z1 { stroke: var(--ink); } .zz .z2 { stroke: var(--brand); }
.brand-name { font: 800 21px/1 var(--font-display); letter-spacing: -0.03em; }
.brand-sub { font: 600 13px/1 var(--font-sans); color: var(--brand-text); background: var(--brand-soft); border-radius: 999px; padding: 4px 9px; }
.ind-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ind-nav a { text-decoration: none; color: var(--ink-2); font: 500 15px/1 var(--font-sans); padding: 9px 12px; border-radius: 999px; }
.ind-nav a:hover { background: var(--surface-2); color: var(--ink); }
.ind-nav a[aria-current] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.search-mini { margin-left: auto; }
input[type=search] { font: 400 15px var(--font-sans); color: var(--ink); background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 999px; padding: 10px 16px; width: 240px; min-height: 44px; }
input[type=search]:focus { outline: none; border-color: var(--brand); background: var(--surface); }

/* hero, buttons, cards */
.hero { padding: 40px 0 8px; max-width: 760px; }
.hero.home { padding-top: 56px; }
.eyebrow { font: 700 13px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-text); margin: 0; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 680px; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 0;
	background: var(--cta-bg); color: var(--cta-ink); font: 600 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--brand-hover); color: var(--cta-ink); }
.btn.ghost { background: transparent; color: var(--brand-text); border: 1.5px solid var(--brand-line); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.light { background: #fff; color: #0f3b37; }
.search-big { display: flex; gap: 8px; margin-top: 20px; max-width: 560px; }
.search-big input { flex: 1; width: auto; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--border);
	border-radius: 18px; text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), transform .15s var(--ease); }
.card:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-2px); }
.card-title { font: 700 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
.card-meta { font-size: 14px; color: var(--ink-3); }
.card-count { margin-top: auto; padding-top: 6px; font: 600 13px/1.2 var(--font-sans); color: var(--brand-text); }
.clip-card { padding: 0; overflow: hidden; }
.clip-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-bottom: 1px solid var(--border); }
.clip-card .card-title { padding: 12px 16px 0; }
.clip-card .card-meta { padding: 0 16px 16px; }
.callout { background: var(--brand-soft); border-radius: 12px; padding: 12px 16px; color: var(--ink-2); }
.chapter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.chapter-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; }
.li-title { font-weight: 600; } .li-who { color: var(--ink-3); font-size: 14px; }
.cta { margin: 56px 0 24px; padding: 32px; border-radius: 24px; background: var(--zz-deep); color: #e6fbf7; }
.cta h2 { color: #e6fbf7; margin-top: 0; } .cta .accent { color: #5eead4; } .cta p { color: #a7d8d0; }

/* chapter pages */
.with-side { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding-top: 32px; }
.side { position: sticky; top: 84px; align-self: start; display: grid; gap: 16px; }
.toc summary { font: 700 13px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); cursor: pointer; padding: 6px 0; }
.toc ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; text-decoration: none; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; font-size: 15px; }
.toc a:hover { background: var(--surface-2); }
.toc a[aria-current] { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.chapter { max-width: 780px; min-width: 0; }
.crumbs { font-size: 14px; margin: 0; } .crumbs a { color: var(--ink-3); }
.who { font-size: 14px; font-weight: 600; color: var(--brand-text); margin-bottom: 8px; }
.start-link { font-size: 15px; color: var(--ink-3); }
.step { padding: 24px 0; border-top: 1px solid var(--border); }
.step h3 { display: flex; align-items: baseline; gap: 10px; }
.num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
	background: var(--brand-soft); color: var(--brand-text); font: 800 14px/1 var(--font-display); transform: translateY(-2px); }
.anchor { margin-left: auto; text-decoration: none; color: var(--ink-3); opacity: 0; font-weight: 400; padding: 0 4px; }
.step:hover .anchor, .anchor:focus { opacity: 1; }
.note { background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 15px; color: var(--ink-2); }
figure { margin: 16px 0 0; }
figure.row { display: flex; gap: 12px; flex-wrap: wrap; }
figure.row .shot { flex: 1 1 140px; max-width: 300px; }
.shot { display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.shot img { width: 100%; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 8px; }
.pn { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; }
.pn span { font: 600 12px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.pn.next { text-align: right; grid-column: 2; }
.pn:hover { border-color: var(--brand); }

/* videos */
.vgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.vgrid.one { grid-template-columns: 1fr; }
.vgrid .clip-title { font-size: 17px; }
.clip { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); }
.clip video { width: 100%; aspect-ratio: 16/9; background: #0b1315; }
.clip-text { padding: 14px 18px 16px; }
.clip-title { margin: 0 0 4px; font-size: 19px; }
.dur { font: 600 13px var(--font-sans); color: var(--ink-3); margin-left: 6px; }
.clip-sub { color: var(--ink-2); margin-bottom: 8px; }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--brand-text); padding: 6px 0; min-height: 32px; }
.transcript p { font-size: 15px; color: var(--ink-2); margin: 6px 0; }
.own { font-size: 14px; display: inline-block; margin-top: 6px; }
.clip-page { max-width: 900px; padding-top: 8px; }
.feature { max-width: 900px; }

/* search page (Pagefind UI) */
.pf { --pagefind-ui-primary: var(--brand); --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--surface);
	--pagefind-ui-border: var(--border); --pagefind-ui-tag: var(--surface-2); --pagefind-ui-border-radius: 12px;
	--pagefind-ui-font: var(--font-sans); margin-bottom: 40px; }
.pf mark { background: var(--brand-soft); color: var(--brand-text); border-radius: 3px; padding: 0 2px; }

/* footer */
.foot { margin-top: 64px; border-top: 1px solid var(--border); background: var(--bg-alt); padding: 28px 0 36px; font-size: 15px; color: var(--ink-2); }
.demo-note { max-width: 760px; }

.toc-m { display: none; }
@media (max-width: 900px) {
	.with-side { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
	.side { display: none; }
	.toc-m { display: block; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 12px; padding: 4px 12px; }
	.toc-m summary { min-height: 40px; display: flex; align-items: center; list-style: none; }
	.toc-m summary::-webkit-details-marker { display: none; }
	.toc-m summary::after { content: "▾"; margin-left: auto; font-size: 16px; }
	.toc-m[open] summary::after { content: "▴"; }
	.toc-m ol { margin-bottom: 8px; }
	.toc-m .btn { margin: 4px 0 12px; }
}
@media (max-width: 760px) {
	.top-in { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 6px; }
	.search-mini { margin-left: auto; }
	.search-mini input { width: 150px; }
	.ind-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.ind-nav a { white-space: nowrap; font-size: 14px; padding: 8px 10px; }
	html { scroll-padding-top: 120px; }
	.side { top: auto; }
	.hero { padding-top: 24px; } .hero.home { padding-top: 32px; }
	.lead { font-size: 17px; }
	.search-big { flex-direction: column; }
	.cta { padding: 24px 20px; }
	.anchor { opacity: 1; }
	.prevnext { grid-template-columns: 1fr; } .pn.next { grid-column: 1; }
}
@media (max-width: 380px) { .brand-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }