/* Site v2 design tokens: the round 4 homepage (exp_round4_home) look.
   (Content-hash bump 2026-11-11 #2: never request a new hash URL on prod before the deploy that serves it.)
   This is the only v2 file allowed to contain colour literals. Light: white
   surfaces, zinc neutrals, one purple, a purple-to-cyan glow under the
   exp_ns2_revamp header (ns2.css). Dark: the same roles on the experiment's
   navy (see "Dark theme" below). .v2-night scopes the few dark plates (artwork
   drawn for dark backgrounds). Text pairs pass WCAG AA in both themes: filled
   buttons use --btn (#814ee8, the header's Sign Up purple) and links
   --accent-ink (#7e45ef, round 4's hover shade; #b9a1ff on navy); #8c54ff
   itself is decoration. */

:root {
  /* Surfaces (zinc) */
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f4f4f5;
  --rule: #e4e4e7;
  --rule-strong: #d4d4d8;
  /* The exp_ns2_revamp pages' flat page colour (behind white cards) */
  --page-tint: #f6f6fb;

  /* Text */
  --ink: #09090b;
  --ink-2: #27272a;
  --muted: #71717a;
  --subtle: #71717a;

  /* Purple */
  --accent: #8c54ff;
  --accent-ink: #7e45ef;
  --accent-hover: #6d3ce0;
  --accent-soft: #f5efff;
  --on-accent: #ffffff;
  --glow-a: #8c54ff;
  --glow-b: #09eaeb;
  /* Along the purple-to-cyan glow: its midpoint (the middle step of purple / blue / cyan colour coding), a
     deeper cyan that white text can sit on, and the two as text colours (both pass AA on white). */
  --glow-mid: color-mix(in srgb, var(--glow-a), var(--glow-b));
  --glow-mid-ink: color-mix(in srgb, var(--glow-mid) 70%, var(--ink));
  --glow-b-deep: color-mix(in srgb, var(--glow-b) 70%, var(--ink));
  --glow-b-ink: color-mix(in srgb, var(--glow-b) 50%, var(--ink));
  /* The page-top glow (base.css .v2-glow): the experiment homepage's pastels (ns2.css --ns2-glow-a / -b, its
     lilac and sky ellipses) rather than the brand purple and cyan, which blurred at 30% read as a heavy purple
     wash; on navy it takes that homepage's indigo-to-blue. */
  --glow-disc: linear-gradient(90deg, #cdc2ff, #bfe0ff);
  --glow-disc-opacity: 0.85;
  --tint: linear-gradient(90deg, rgb(140 84 255 / 0.05), rgb(9 234 235 / 0.05));
  --tint-strong: linear-gradient(
    135deg,
    rgb(140 84 255 / 0.1),
    rgb(9 234 235 / 0.1)
  );

  /* Buttons */
  --btn: #814ee8;
  --btn-hover: #7040d0;
  --on-btn: #ffffff;

  --danger: #dc2626;
  --success: #16a34a;

  --ring: inset 0 0 0 1px var(--rule);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-pop: 0 8px 30px rgb(9 9 11 / 0.09);
  --shadow-float:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --scrim: rgb(9 9 11 / 0.5);
  /* Behind a video before its first frame: dark in both themes. */
  --media-bg: #09090b;
  --logo-filter: grayscale(1);

  /* Type: Inter for headings, body and UI (weights 400/500/600); Geist Mono
     for labels. Fallbacks are metric-matched in _head_assets.html. */
  --font-sans:
    "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Headings (.v2-display, .v2-h1, .v2-h2), labels and buttons: the body's face and the mono labels here; the
     old site's chrome (below) gives them its own. */
  --font-display: var(--font-sans);
  --font-label: var(--font-mono);
  --font-ui: var(--font-sans);

  --fs-display: clamp(36px, 4vw, 48px);
  --fs-h1: clamp(34px, 3.4vw, 48px);
  --fs-h2: clamp(26px, 2.5vw, 32px);
  --fs-h3: 18px;
  --fs-h4: 16px;
  --fs-lead: clamp(16px, 1.3vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-caption: 13px;
  --fs-label: 12px;

  /* Layout: round 4's 1120px container */
  --max: 1120px;
  --read: 680px;
  --gutter: clamp(20px, 4vw, 32px);
  --col-gap: clamp(16px, 2vw, 24px);
  --section: clamp(56px, 7vw, 96px);
  --header-h: 72px; /* the ns2 header's height: sticky offsets and anchor padding */

  --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;

  /* The old homepage's footer (base.css .v2-old-footer): its text, link and hover colours from general.css. */
  --old-footer-ink: #ffffff;
  --old-footer-muted: #84858a;
  --old-footer-hover: #3391ed;
  /* The old site's top banner (base.css .v2-old-chrome #purple-banner, .v2-mob-banner): a satin purple in place of
     the flat #7b4bde it used to paint. The brand violet is light at both edges and deepens towards the middle,
     where the white pills sit; over it a top-to-bottom gloss and a faint angled sheen at each end. The phone banner
     takes the same fill. */
  --old-banner-bg:
    linear-gradient(
      100deg,
      rgb(255 255 255 / 0) 10%,
      rgb(255 255 255 / 0.12) 22%,
      rgb(255 255 255 / 0) 34%,
      rgb(255 255 255 / 0) 66%,
      rgb(255 255 255 / 0.12) 78%,
      rgb(255 255 255 / 0) 90%
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.18),
      rgb(255 255 255 / 0.02) 48%,
      rgb(9 9 11 / 0.1)
    ),
    linear-gradient(90deg, #9159ff 0%, #5a43ee 50%, #9159ff 100%);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* Entrances (base.css Motion): a long, soft settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-fast: 140ms;

  color-scheme: light;
}

/* In the old site's chrome (base.html v2.old_chrome / v2.mobile_chrome: the pill nav under the top banner, the old
   footer) the content pages take the old homepage's and the ChatLLM page's theme, so the site reads as one: the
   homepage's #f2f2f2 page under white cards (#f5f6f8 its second surface), its charcoal text (#383d47, #676776
   muted), and the ChatLLM page's blue and purple in place of Site v2's violet. The lead is the deep blue #2870c8
   (the shaded side of that page's feature icons, a step from the nav's navy): links, labels, check marks and every
   solid fill. The second hue is the site's own purple, #814ee8 (the banner's, the nav's Sign Up, that page's Get
   Started and the end of its "Teams" gradient), woven in where that page uses it: the far end of the headline
   gradient and the hero wash, the second tone of the tiers chart and the roadmap, the animations' violet ramp, the
   tints, and on dark plates its lavender #c2a4ff (the gradient's top). The icons' lit blue #549cf0 is the near end
   of the gradients. Buttons are the nav pill's own navy (#1d283a -> #30476c, _header_new_global.html; --btn is its
   top stop for the solid uses, the primary button takes the gradient itself, --btn-fill, in base.css), so the CTAs
   match the nav exactly. The dark plates are its nav navy already (.v2-night). Faces are those pages' own: Matter
   for headings, Roboto for the body on desktop (IBM Plex Sans, the old mobile site's face, on phones), IBM Plex
   Sans for labels and buttons; base.html loads them in this chrome. The top banner and the nav's Sign Up are the
   old site's own purple, as on every page. The mixes are declared again so they pick up these stops (a custom
   property resolves where it is declared). Light only, like the chrome. */
.v2-old-chrome {
  --paper-2: #f5f6f8;
  --paper-3: #eceef1;
  --rule: #e4e6ea;
  --rule-strong: #d7dade;
  --page-tint: #f2f2f2;
  --ink: #383d47;
  --ink-2: #383d47;
  --muted: #676776;
  --subtle: #676776;
  --accent: #2870c8;
  --accent-ink: #2870c8;
  --accent-hover: #1e5fae;
  --accent-soft: #e6f0fc;
  --accent-lit: #549cf0;
  --purple: #814ee8;
  --purple-soft: #c2a4ff;
  --glow-a: #549cf0;
  --glow-b: #814ee8;
  --glow-mid: color-mix(in srgb, var(--glow-a), var(--glow-b));
  --glow-mid-ink: color-mix(in srgb, var(--glow-mid) 70%, var(--ink));
  --glow-b-deep: color-mix(in srgb, var(--glow-b) 70%, var(--ink));
  --glow-b-ink: color-mix(in srgb, var(--glow-b) 50%, var(--ink));
  --glow-disc: linear-gradient(90deg, #cde2fb, #dccdfb);
  --tint: linear-gradient(
    90deg,
    rgb(84 156 240 / 0.08),
    rgb(129 78 232 / 0.06)
  );
  --tint-strong: linear-gradient(
    135deg,
    rgb(84 156 240 / 0.16),
    rgb(129 78 232 / 0.12)
  );
  --btn: #1d283a;
  --btn-hover: #30476c;
  --btn-fill: linear-gradient(180deg, #1d283a 0%, #30476c 100%);
  --btn-fill-hover: linear-gradient(180deg, #243149 0%, #3a5580 100%);
  --font-sans:
    "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "PingFang SC", "Hiragino Sans", "Noto Sans", sans-serif;
  --font-display: "Matter", var(--font-sans);
  --font-label: "IBM Plex Sans", var(--font-sans);
  --font-ui: "IBM Plex Sans", var(--font-sans);
}
.v2-mob-chrome {
  --font-sans:
    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "PingFang SC", "Hiragino Sans", "Noto Sans", sans-serif;
}
.v2-old-chrome .v2-night {
  --accent-ink: #c2a4ff;
}
/* The /enterprise animations in that chrome: the accent alphas step the deep blue, the violet ramp is the purple's
   (#814ee8 at the top, its lavender tints below), so the artwork carries both hues like the page. */
.v2-old-chrome .ent-anim {
  --ent-accent-a0: #2870c800;
  --ent-accent-a12: #2870c81f;
  --ent-accent-a15: #2870c826;
  --ent-accent-a18: #2870c82e;
  --ent-accent-a20: #2870c833;
  --ent-accent-a25: #2870c840;
  --ent-accent-a6: #2870c810;
  --ent-accent-a9: #2870c817;
  --ent-violet-100: #f1ecfe;
  --ent-violet-120: #dccdfb;
  --ent-violet-150: #cfbcfa;
  --ent-violet-160: #d2c0fa;
  --ent-violet-170: #d5c4fa;
  --ent-violet-200: #c2a4ff;
  --ent-violet-25: #f7f3ff;
  --ent-violet-250: #a784f4;
  --ent-violet-400: #814ee8;
  --ent-violet-50: #ebe3fd;
  --ent-violet-60: #ede6fd;
  --ent-violet-80: #efe9fe;
  --ent-violet-90: #f0ebfe;
}

/* Dark theme: the exp_ns2_revamp toggle's. The header's theme button (ns2Script) sets
   html[data-ns2-theme] and stores the choice in localStorage 'ns2-theme'; without a stored
   choice the system setting decides, exactly as on the experiment's homepage. The colours are
   ns2.css's dark set (navy #0f0f2e page, #edeef6 text, white-alpha hairlines) mapped onto v2's
   roles; the two blocks below are the same list, one per way of getting there. */
:root[data-ns2-theme="dark"] {
  --paper: #0f0f2e;
  --paper-2: #14153a;
  --paper-3: #1b1c46;
  --rule: #2a2b4c;
  --rule-strong: #3b3c5e;
  --page-tint: #0f0f2e;
  --ink: #edeef6;
  --ink-2: #c9ccdd;
  --muted: #9a9eb8;
  --subtle: #9a9eb8;
  --accent-ink: #b9a1ff;
  --accent-hover: #d2c4ff;
  --accent-soft: #221d52;
  --glow-b-deep: color-mix(in srgb, #09eaeb 70%, #09090b);
  --glow-disc: linear-gradient(90deg, #635bff, #3884ff);
  --glow-disc-opacity: 0.5;
  --tint: linear-gradient(90deg, rgb(140 84 255 / 0.1), rgb(9 234 235 / 0.08));
  --tint-strong: linear-gradient(
    135deg,
    rgb(140 84 255 / 0.2),
    rgb(9 234 235 / 0.14)
  );
  --danger: #f87171;
  --success: #4ade80;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.45);
  --shadow-float:
    0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45);
  --scrim: rgb(5 5 20 / 0.72);
  --logo-filter: grayscale(1) invert(1);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) {
    --paper: #0f0f2e;
    --paper-2: #14153a;
    --paper-3: #1b1c46;
    --rule: #2a2b4c;
    --rule-strong: #3b3c5e;
    --page-tint: #0f0f2e;
    --ink: #edeef6;
    --ink-2: #c9ccdd;
    --muted: #9a9eb8;
    --subtle: #9a9eb8;
    --accent-ink: #b9a1ff;
    --accent-hover: #d2c4ff;
    --accent-soft: #221d52;
    --glow-b-deep: color-mix(in srgb, #09eaeb 70%, #09090b);
    --glow-disc: linear-gradient(90deg, #635bff, #3884ff);
    --glow-disc-opacity: 0.5;
    --tint: linear-gradient(
      90deg,
      rgb(140 84 255 / 0.1),
      rgb(9 234 235 / 0.08)
    );
    --tint-strong: linear-gradient(
      135deg,
      rgb(140 84 255 / 0.2),
      rgb(9 234 235 / 0.14)
    );
    --danger: #f87171;
    --success: #4ade80;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.45);
    --shadow-float:
      0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    --scrim: rgb(5 5 20 / 0.72);
    --logo-filter: grayscale(1) invert(1);
    color-scheme: dark;
  }
}

/* Dark plates for artwork drawn on dark backgrounds: the header's navy. */
.v2-night {
  --paper: #1d283a;
  --paper-2: #243149;
  --paper-3: #30476c;
  --rule: #3a4a66;
  --rule-strong: #4a5d80;
  --ink: #ffffff;
  --ink-2: #e2e8f0;
  --muted: #cbd5e1;
  --subtle: #cbd5e1;
  --accent-ink: #b9a1ff;
  --logo-filter: grayscale(1) invert(1);
  color-scheme: dark;
}

/* /enterprise platform animations (templates/enterprise/_anim_*.html): the palette they were drawn in,
   kept as is in light. Scoped to the animations; the rest of the page uses the theme above. In dark
   (after this block) the tints turn into navy tints and the text greys into the dark set's. */
.ent-anim {
  --ent-accent-a0: #8c54ff00;
  --ent-accent-a12: #8c54ff1f;
  --ent-accent-a15: #8c54ff26;
  --ent-accent-a18: #8c54ff2e;
  --ent-accent-a20: #8c54ff33;
  --ent-accent-a25: #8c54ff40;
  --ent-accent-a6: #8c54ff10;
  --ent-accent-a9: #8c54ff17;
  --ent-amber-100: #fef3c7;
  --ent-amber-500: #f59e0b;
  --ent-amber-700: #92400e;
  --ent-black-a5: #0000000d;
  --ent-cyan-600: #09b6c9;
  --ent-green-150: #c9ead7;
  --ent-green-400: #4ade80;
  --ent-green-50: #e7f7ee;
  --ent-green-550: #22c55e;
  --ent-green-550-a20: #22c55e33;
  --ent-green-700: #1e7a4c;
  --ent-green-800: #14532d;
  --ent-ink-a12: #09090b1f;
  --ent-ink-a15: #09090b26;
  --ent-ink-a20: #09090b33;
  --ent-ink-a6: #09090b0f;
  --ent-ink-a8: #09090b14;
  --ent-red-500: #e11d48;
  --ent-red-600: #b42318;
  --ent-sky-400: #38bdf8;
  --ent-sky-50: #e0f2fe;
  --ent-sky-500: #0ea5e9;
  --ent-sky-700: #0369a1;
  --ent-violet-100: #f4efff;
  --ent-violet-120: #d9ccfd;
  --ent-violet-150: #c4b5fd;
  --ent-violet-160: #c9b6fd;
  --ent-violet-170: #cbb8fd;
  --ent-violet-200: #b9a2fb;
  --ent-violet-25: #f7f3ff;
  --ent-violet-250: #9f7afc;
  --ent-violet-400: #6a48f5;
  --ent-violet-50: #ebe3ff;
  --ent-violet-60: #ece6fd;
  --ent-violet-80: #f0e9ff;
  --ent-violet-90: #f3eeff;
  --ent-zinc-25: #fcfcfd;
  --ent-zinc-350: #a1a1aa;
  --ent-zinc-50: #ececf0;
  --ent-zinc-60: #f1f1f4;
  --ent-zinc-650: #52525b;
  --ent-zinc-70: #f5f5fb;
  --ent-zinc-750: #3f3f46;
  --ent-zinc-80: #f7f7f8;
  --ent-zinc-900: #18181b;
}

:root[data-ns2-theme="dark"] .ent-anim {
  --ent-amber-100: #3a2e0e;
  --ent-amber-700: #fbbf24;
  --ent-green-150: #1a4a38;
  --ent-green-50: #10342a;
  --ent-green-700: #5fd49a;
  --ent-green-800: #86efac;
  --ent-ink-a12: #00000059;
  --ent-ink-a15: #00000066;
  --ent-ink-a20: #00000073;
  --ent-ink-a6: #00000040;
  --ent-ink-a8: #0000004d;
  --ent-red-600: #f87171;
  --ent-sky-50: #0c2d48;
  --ent-sky-700: #7dd3fc;
  --ent-violet-100: #221d52;
  --ent-violet-120: #3d3280;
  --ent-violet-160: #4a3a99;
  --ent-violet-170: #4a3a99;
  --ent-violet-200: #5b48b8;
  --ent-violet-25: #1c1946;
  --ent-violet-250: #7a5cf0;
  --ent-violet-400: #a894ff;
  --ent-violet-50: #2a2360;
  --ent-violet-60: #2a2462;
  --ent-violet-80: #251f58;
  --ent-violet-90: #201c4e;
  --ent-zinc-25: #14153a;
  --ent-zinc-350: #8488a8;
  --ent-zinc-50: #2a2b4c;
  --ent-zinc-60: #1f2047;
  --ent-zinc-650: #b3b6cc;
  --ent-zinc-70: #17183f;
  --ent-zinc-750: #c9ccdd;
  --ent-zinc-80: #191a42;
  --ent-zinc-900: #08081f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) .ent-anim {
    --ent-amber-100: #3a2e0e;
    --ent-amber-700: #fbbf24;
    --ent-green-150: #1a4a38;
    --ent-green-50: #10342a;
    --ent-green-700: #5fd49a;
    --ent-green-800: #86efac;
    --ent-ink-a12: #00000059;
    --ent-ink-a15: #00000066;
    --ent-ink-a20: #00000073;
    --ent-ink-a6: #00000040;
    --ent-ink-a8: #0000004d;
    --ent-red-600: #f87171;
    --ent-sky-50: #0c2d48;
    --ent-sky-700: #7dd3fc;
    --ent-violet-100: #221d52;
    --ent-violet-120: #3d3280;
    --ent-violet-160: #4a3a99;
    --ent-violet-170: #4a3a99;
    --ent-violet-200: #5b48b8;
    --ent-violet-25: #1c1946;
    --ent-violet-250: #7a5cf0;
    --ent-violet-400: #a894ff;
    --ent-violet-50: #2a2360;
    --ent-violet-60: #2a2462;
    --ent-violet-80: #251f58;
    --ent-violet-90: #201c4e;
    --ent-zinc-25: #14153a;
    --ent-zinc-350: #8488a8;
    --ent-zinc-50: #2a2b4c;
    --ent-zinc-60: #1f2047;
    --ent-zinc-650: #b3b6cc;
    --ent-zinc-70: #17183f;
    --ent-zinc-750: #c9ccdd;
    --ent-zinc-80: #191a42;
    --ent-zinc-900: #08081f;
  }
}