/* upcheckr brand tokens — kept in sync with the app (src/main/resources/static/css/app.css)
   so the presentation page and the product share one visual language. */
:root {
  --paper: #FAFAF7; --paper-2: #F3F3EE; --surface: #FFFFFF; --surface-sunken: #F6F6F2;
  --ink-1: #111210; --ink-2: #3A3C38; --ink-3: #6B6E68; --ink-4: #9B9E97; --ink-5: #C8CAC4;
  --line-1: #E7E7E1; --line-2: #DADAD3; --line-3: #C4C4BC;
  --pulse-50: #ECFAF0; --pulse-100: #D4F3DE; --pulse-200: #A7E6BE; --pulse-300: #6FD195;
  --pulse-400: #3EB872; --pulse-500: #1E9E57; --pulse-600: #167E46; --pulse-700: #115E36; --pulse-800: #0C3F25;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;
}
html, body { margin: 0; padding: 0; background: var(--paper); font-family: var(--font-sans); color: var(--ink-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--pulse-700); }
.dotgrid { background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 24px 24px; background-position: -12px -12px; }