/* Zivo design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap" rel="stylesheet">
   One family (Geist), two weights in text (400 body, 500 headings/labels), 600 only for big mock-up numbers. */
:root {
  /* ── Surfaces ── */
  --bg: #FDFCFC;            /* paper: every section */
  --surface: #F5F3F1;       /* cards, secondary buttons, panels */
  --surface-2: #FFFFFF;     /* mock-up cards floating on panels and fields */
  --ink-bg: #131314;        /* primary buttons, dark chips */

  /* ── Text ── */
  --text: #131314;          /* ink: headings, labels, links */
  --text-2: #716B63;        /* muted: leads, body, card lines, meta (5.1:1 on paper) */
  --muted: #716B63;
  --on-dark: #FFFFFF;       /* text on fields, photos and ink */
  --on-dark-2: rgba(253, 252, 252, .8);

  /* ── Lines ── */
  --line: #EDEBE9;          /* hairlines, card borders, FAQ rules */
  --line-2: rgba(19, 19, 20, .12);  /* the outlined nav pill */
  --glide: #EDEAE6;         /* the sliding nav pill */
  --guide: #EDEBE9;         /* the blueprint frame: vertical guides + section rules */
  --cross: #716B63;         /* the small plus-cross where rules meet guides */
  --glass: rgba(0, 0, 0, .05);          /* glass pieces on colour fields */
  --glass-line: rgba(255, 255, 255, .2);
  --glass-strong: rgba(19, 19, 20, .5);
  --glass-me: rgba(19, 19, 20, .34);   /* the visitor's bubble on a field (keeps 4.5:1 on bright patches) */  /* input pill on a bright field (keeps 4.5:1) */

  /* ── Brand / accent (set per business by the palette engine) ── */
  --accent: #D86F22;        /* first hero line only + tiny highlights (3.3:1 on paper, large text) */
  --accent-soft: #F7E6D8;
  --on-accent: #131314;

  /* ── Data / status (mock-ups only) ── */
  --success: #3E7B52; --warning: #B7791F; --danger: #B5452E; --info: #3D6E8F;
  --bar: #C9C4BE;           /* the "before" bar in charts */

  /* ── Fonts ── */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 6px;              /* bubble tail corner */
  --r-sm: 10px;             /* logo tiles */
  --r-bubble: 14px;
  --r: 16px;                /* cards, photos, mock-up cards */
  --r-lg: 20px;             /* large cards, panels */
  --r-xl: 24px;             /* hero chat card */
  --r-pill: 999px;

  /* ── Spacing / layout ── */
  --container: 1192px;      /* between the two guides */
  --inner: 1096px;          /* content inside the guides (48px in) */
  --gutter: 24px;           /* outside the guides on small screens */
  --inset: 48px;            /* guide → content */
  --section: 112px;         /* top/bottom padding of a band */
  --head-gap: 72px;         /* section head → content */
  --gap: 24px;              /* card gap */

  /* ── Shadows (the style has none; depth = ghost cards + fields) ── */
  --shadow-1: none;
  --shadow-2: 0 1px 0 rgba(19, 19, 20, .04);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s; --dur-fast: .25s;
}

/* ── Type scale (Geist; tracking tight everywhere) ── */
.t-display { font: 500 clamp(40px, 5vw, 64px)/1.04 var(--font-display); letter-spacing: -.045em; }
.t-h1 { font: 500 clamp(36px, 4.4vw, 48px)/1.05 var(--font-display); letter-spacing: -.05em; }
.t-h2 { font: 500 clamp(28px, 3vw, 32px)/1.08 var(--font-display); letter-spacing: -1.2px; }
.t-h3 { font: 500 24px/1.3 var(--font); letter-spacing: -.5px; }
.t-h4 { font: 500 20px/1.5 var(--font); letter-spacing: -.5px; }
.t-h5 { font: 500 18px/1.5 var(--font); letter-spacing: -.5px; }
.t-lead { font: 400 16px/1.5 var(--font); letter-spacing: -.5px; color: var(--text-2); }
.t-body { font: 400 16px/1.5 var(--font); letter-spacing: -.5px; }
.t-small { font: 400 14px/1.5 var(--font); letter-spacing: -.5px; }
.t-label { font: 500 14px/1.5 var(--font); letter-spacing: -.5px; }
.t-meta { font: 400 13px/1.5 var(--font); letter-spacing: -.4px; color: var(--text-2); }
.t-quote { font: 500 clamp(20px, 2vw, 24px)/1.32 var(--font); letter-spacing: -.5px; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }