/* Checkmate Dynamics brand tokens. GENERATED by brand/tools/build.js from tokens.js. Do not hand-edit.
   Fonts: add <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet"> before this file. */
:root {
  --black: #000000;
  --surface: #0B0B0B;
  --champagne: #D4BB8B;
  --ivory: #F1EBDF;
  --ivory-rgb: 241 235 223;
  --champagne-rgb: 212 187 139;
  --text-2: rgb(241 235 223 / 0.66);
  --text-3: rgb(241 235 223 / 0.56);
  --line: rgb(212 187 139 / 0.22);
  --line-2: rgb(212 187 139 / 0.46);
  --fill-1: rgb(212 187 139 / 0.08);
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-features: "cv10", "calt";
  --fs-display-xl: clamp(64px, calc(64px + 104 * ((100vw - 400px) / 1040)), 168px);
  --fs-display: clamp(52px, calc(52px + 60 * ((100vw - 400px) / 1040)), 112px);
  --fs-h1: clamp(40px, calc(40px + 32 * ((100vw - 400px) / 1040)), 72px);
  --fs-h2: clamp(32px, calc(32px + 16 * ((100vw - 400px) / 1040)), 48px);
  --fs-h3: clamp(24px, calc(24px + 8 * ((100vw - 400px) / 1040)), 32px);
  --fs-h4: clamp(20px, calc(20px + 2 * ((100vw - 400px) / 1040)), 22px);
  --fs-lead: clamp(19px, calc(19px + 5 * ((100vw - 400px) / 1040)), 24px);
  --fs-body: clamp(16px, calc(16px + 0 * ((100vw - 400px) / 1040)), 16px);
  --fs-small: clamp(14px, calc(14px + 0 * ((100vw - 400px) / 1040)), 14px);
  --fs-caption: clamp(12px, calc(12px + 0 * ((100vw - 400px) / 1040)), 12px);
  --fs-overline: clamp(11px, calc(11px + 0 * ((100vw - 400px) / 1040)), 11px);
  --fs-data: clamp(13px, calc(13px + 0 * ((100vw - 400px) / 1040)), 13px);
  --fs-label: clamp(11px, calc(11px + 0 * ((100vw - 400px) / 1040)), 11px);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  --r-none: 0px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --w-hair: 1px;
  --w-rule: 1px;
  --w-strong: 2px;
  --w-bold: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-linear: linear;
  --dur-micro: 120ms;
  --dur-ui: 240ms;
  --dur-reveal: 480ms;
  --dur-hero: 800ms;
  --dur-draw: 1200ms;
  --dur-stagger: 40ms;
  --grid-major: 120px;
  --grid-minor: 24px;
  --grid-minor-rgb: rgb(var(--champagne-rgb) / 0.08);
  --grid-major-rgb: rgb(var(--champagne-rgb) / 0.1);
}
/* Faint technical grid: black ground, champagne lines at 8% (minor) and 17% (major), 5:1, vignetted.
   Major lines draw over minor ones, so the major layer alpha is set so the composite is 15%.
   Use on any element: <section class="cm-grid">. Content goes in a child with position:relative. */
.cm-grid { position: relative; background-color: #000; isolation: isolate; }
.cm-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major-rgb) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major-rgb) 1px, transparent 1px),
    linear-gradient(var(--grid-minor-rgb) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor-rgb) 1px, transparent 1px);
  background-size: var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major), var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor);
  -webkit-mask-image: radial-gradient(ellipse 57.5% 57.5% at 50% 50%, #000 43.5%, transparent 100%);
          mask-image: radial-gradient(ellipse 57.5% 57.5% at 50% 50%, #000 43.5%, transparent 100%); }
.cm-grid--flat::before { -webkit-mask-image: none; mask-image: none; }
/* Motion: always honour reduced motion. Final state is the base style. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }