/* GENERATED by tools/tokens-sync.ts from packages/ui/tokens/campfire.tokens.json. Do not edit by hand. */
/* Design system: Kenhold (Campfire). Source: claude-design. */

/* Tailwind theme: utilities (bg-primary, text-muted-foreground, shadow-md, ...) read the
   Campfire custom properties below, so switching data-theme re-skins everything. */

:root {
  --spacing: 0.25rem;
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Lora Variable", "Lora", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-3xs: 0.625rem;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-display: -0.035em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --background: oklch(0.985 0.008 70);
  --foreground: oklch(0.22 0.020 50);
  --card: oklch(1 0.005 70);
  --card-foreground: oklch(0.22 0.020 50);
  --popover: oklch(1 0.005 70);
  --popover-foreground: oklch(0.22 0.020 50);
  --primary: oklch(0.72 0.155 65);
  --primary-foreground: oklch(0.22 0.020 50);
  --secondary: oklch(0.95 0.015 65);
  --secondary-foreground: oklch(0.25 0.020 50);
  --accent: oklch(0.95 0.015 65);
  --accent-foreground: oklch(0.25 0.020 50);
  --muted: oklch(0.96 0.010 70);
  --muted-foreground: oklch(0.50 0.025 55);
  --border: oklch(0.91 0.012 70);
  --input: oklch(0.65 0.020 60);
  --ring: oklch(0.60 0.150 65);
  --link: oklch(0.48 0.14 290);
  --destructive: oklch(0.55 0.16 30);
  --destructive-foreground: oklch(0.99 0.005 70);
  --success: oklch(0.52 0.120 150);
  --success-foreground: oklch(0.99 0.005 70);
  --warning: oklch(0.64 0.155 48);
  --warning-foreground: oklch(0.99 0.005 70);
  --info: oklch(0.55 0.12 240);
  --info-foreground: oklch(0.99 0.005 70);
  --cf-shadow-sm: 0 1px 2px 0 oklch(0.22 0.020 50 / 8%), 0 1px 1px -1px oklch(0.22 0.020 50 / 6%);
  --cf-shadow-md: 0 2px 6px -1px oklch(0.22 0.020 50 / 10%), 0 2px 4px -2px oklch(0.22 0.020 50 / 8%);
  --cf-shadow-lg: 0 8px 20px -4px oklch(0.22 0.020 50 / 14%), 0 4px 8px -4px oklch(0.22 0.020 50 / 10%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(0.18 0.015 50);
  --foreground: oklch(0.94 0.010 70);
  --card: oklch(0.21 0.018 50);
  --card-foreground: oklch(0.94 0.010 70);
  --popover: oklch(0.21 0.018 50);
  --popover-foreground: oklch(0.94 0.010 70);
  --primary: oklch(0.78 0.13 65);
  --primary-foreground: oklch(0.18 0.020 50);
  --secondary: oklch(0.27 0.020 50);
  --secondary-foreground: oklch(0.94 0.010 70);
  --accent: oklch(0.27 0.020 50);
  --accent-foreground: oklch(0.94 0.010 70);
  --muted: oklch(0.24 0.018 50);
  --muted-foreground: oklch(0.68 0.020 65);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 36%);
  --ring: oklch(0.78 0.13 65);
  --link: oklch(0.72 0.12 290);
  --destructive: oklch(0.65 0.15 30);
  --destructive-foreground: oklch(0.18 0.020 50);
  --success: oklch(0.70 0.13 150);
  --success-foreground: oklch(0.18 0.020 50);
  --warning: oklch(0.74 0.15 48);
  --warning-foreground: oklch(0.18 0.020 50);
  --info: oklch(0.70 0.12 240);
  --info-foreground: oklch(0.18 0.020 50);
  --cf-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 30%), 0 1px 1px -1px oklch(0 0 0 / 24%);
  --cf-shadow-md: 0 2px 6px -1px oklch(0 0 0 / 36%), 0 2px 4px -2px oklch(0 0 0 / 28%);
  --cf-shadow-lg: 0 8px 20px -4px oklch(0 0 0 / 46%), 0 4px 8px -4px oklch(0 0 0 / 36%);
}

:root {
  /* Brand hexes for exports and other non-CSS contexts. */
  --cream: #faf7f1;
  --bone: #f2ece2;
  --rule: #e6decf;
  --slate: #7a7066;
  --cocoa: #2c2520;
  --caramel: #d89255;
  --ember: #c56535;
  --plum: #6a52a3;
  --radius: 0.75rem;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --control-h: 2rem;
  --control-h-lg: 2.5rem;
  --row-h: 1.75rem;
  --header-h: 2.25rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: oklch(0.18 0.015 50);
    --foreground: oklch(0.94 0.010 70);
    --card: oklch(0.21 0.018 50);
    --card-foreground: oklch(0.94 0.010 70);
    --popover: oklch(0.21 0.018 50);
    --popover-foreground: oklch(0.94 0.010 70);
    --primary: oklch(0.78 0.13 65);
    --primary-foreground: oklch(0.18 0.020 50);
    --secondary: oklch(0.27 0.020 50);
    --secondary-foreground: oklch(0.94 0.010 70);
    --accent: oklch(0.27 0.020 50);
    --accent-foreground: oklch(0.94 0.010 70);
    --muted: oklch(0.24 0.018 50);
    --muted-foreground: oklch(0.68 0.020 65);
    --border: oklch(1 0 0 / 12%);
    --input: oklch(1 0 0 / 36%);
    --ring: oklch(0.78 0.13 65);
    --link: oklch(0.72 0.12 290);
    --destructive: oklch(0.65 0.15 30);
    --destructive-foreground: oklch(0.18 0.020 50);
    --success: oklch(0.70 0.13 150);
    --success-foreground: oklch(0.18 0.020 50);
    --warning: oklch(0.74 0.15 48);
    --warning-foreground: oklch(0.18 0.020 50);
    --info: oklch(0.70 0.12 240);
    --info-foreground: oklch(0.18 0.020 50);
    --cf-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 30%), 0 1px 1px -1px oklch(0 0 0 / 24%);
    --cf-shadow-md: 0 2px 6px -1px oklch(0 0 0 / 36%), 0 2px 4px -2px oklch(0 0 0 / 28%);
    --cf-shadow-lg: 0 8px 20px -4px oklch(0 0 0 / 46%), 0 4px 8px -4px oklch(0 0 0 / 36%);
  }
}
/* What every page shares, the home page (src/home.css) and the rest (src/site.css): the fonts,
   the base, the waiting-list form's message, buttons and the cookie banner. build.ts puts Campfire's
   tokens (src/campfire.css) above it. Every colour, radius, shadow and space here is a token. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Lora Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/lora-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Lora Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/lora-latin-wght-italic.woff2") format("woff2-variations");
}

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

:root {
  --font-brand: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-features: "ss01", "cv11", "calt";
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 160ms;
  /* The boards' 1200px column, plus the gutters either side. */
  --page-max: calc(var(--spacing) * 300 + 2 * var(--gutter));
  --section-y: calc(var(--spacing) * 14);
  --band: color-mix(in oklch, var(--muted) 45%, var(--background));
  --narrow-max: calc(var(--space-16) * 11);
  --gutter: var(--space-4);
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-8);
    --section-y: calc(var(--spacing) * 24);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--space-16);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: var(--narrow-max);
}

.icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

.icon-lg {
  width: var(--space-8);
  height: var(--space-8);
}

.tone-success {
  color: var(--success);
}

.tone-error {
  color: var(--destructive);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 47.99rem) {
  .wide-only {
    display: none;
  }
}

@media (min-width: 48rem) {
  .narrow-only {
    display: none;
  }
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-16) * -1);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--cf-shadow-md);
}

.skip:focus {
  top: var(--space-4);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button[hidden] {
  display: none;
}

.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: calc(var(--text-sm) * 1.5);
  font-size: var(--text-sm);
}

.form-message:empty {
  min-height: 0;
}

.form-message .icon {
  margin-top: var(--space-0-5);
}

.form-message[data-tone="success"] {
  color: var(--success);
}

.form-message[data-tone="error"] {
  color: var(--destructive);
}

.form-message[data-tone="neutral"] {
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-lg);
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.button-sm {
  height: var(--control-h);
  padding-inline: var(--space-3);
  text-decoration: none;
}

.button-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover:not(:disabled) {
  background: color-mix(in oklch, var(--primary) 90%, black);
}

.button-outline {
  border-color: var(--input);
  background: var(--background);
  color: var(--foreground);
}

.button-outline:hover,
.button-ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.button-ghost {
  background: transparent;
  color: var(--foreground);
}

.button-icon {
  width: var(--control-h-lg);
  padding: 0;
}

/* ---------------------------------------------------------------- the cookie banner and dialog */

.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: var(--popover);
  color: var(--popover-foreground);
  border-top: 1px solid var(--border);
  box-shadow: var(--cf-shadow-lg);
  font-size: var(--text-sm);
}

.cookie-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
}

.cookie-row > p {
  grid-column: 1 / -1;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie-row > .button-icon {
  grid-row: 2;
  grid-column: 2;
}

@media (min-width: 48rem) {
  .cookie-row {
    grid-template-columns: 1fr auto auto;
  }

  .cookie-row > p {
    grid-column: 1;
  }

  .cookie-row > .button-icon {
    grid-row: 1;
    grid-column: 3;
  }
}

.cookie-dialog {
  width: min(100% - 2 * var(--space-4), calc(var(--space-16) * 8));
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--cf-shadow-lg);
}

.cookie-dialog::backdrop {
  background: color-mix(in oklch, var(--foreground) 40%, transparent);
}

.cookie-dialog form {
  display: grid;
  gap: var(--space-4);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.dialog-head h2 {
  font-size: var(--text-lg);
}

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
}

.choice input {
  width: var(--space-4);
  height: var(--space-4);
  margin: var(--space-0-5) 0 0;
  accent-color: var(--ring);
}

.choice strong {
  font-weight: var(--font-weight-semibold);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
}
/* kenhold.ai's home page, as the design canvas "Kenhold pre-launch website" draws it (5 November
   2026). build.ts puts Campfire's tokens (src/campfire.css) and src/shared.css above this file in
   /home.css, and the rules for the page's inline styles below it (src/pages.ts,
   withoutInlineStyles). Every colour, radius, shadow and space is a token, or a mix of tokens.
   Wide screens, tablets (641 to 1100 wide) and phones (up to 640) are container queries on .kh. */

/* the page's own colours, mixed from Campfire's, light and dark */
:root,
[data-theme="light"] {
  --loop: 16s;
  --glow: color-mix(in oklch, var(--caramel) 30%, transparent);
  --heat: var(--ember);
  --beam: color-mix(in oklch, var(--card) 85%, transparent);
}
[data-theme="dark"] {
  --glow: color-mix(in oklch, var(--ember) 45%, transparent);
  --heat: var(--caramel);
  --beam: color-mix(in oklch, var(--caramel) 10%, transparent);
}
/* the dark theme also follows the visitor's system setting, as Campfire's tokens do */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glow: color-mix(in oklch, var(--ember) 45%, transparent);
    --heat: var(--caramel);
    --beam: color-mix(in oklch, var(--caramel) 10%, transparent);
    --ink: var(--cream);
  }
  :root:not([data-theme="light"]) .hero-brain {
    --web-line: color-mix(in oklch, var(--cream) 32%, transparent);
    --web-far: color-mix(in oklch, var(--cream) 16%, transparent);
    --web-node: var(--cocoa);
    --web-edge: color-mix(in oklch, var(--cream) 65%, transparent);
    --web-hot: var(--caramel);
    --web-cl: color-mix(in oklch, var(--caramel) 22%, transparent);
    --web-name: var(--caramel);
  }
}

/* ------------------------------------------------------------------ base */

.kh {
  container-type: inline-size;
  width: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow: clip; /* clip, not hidden: hidden would make the page its own scroller, and sticky cards and scroll-linked scenes need the window's */
}
.kh *,
.kh *::before,
.kh *::after {
  box-sizing: border-box;
}
.kh h1,
.kh h2,
.kh h3,
.kh p,
.kh ul,
.kh ol,
.kh dl,
.kh dd,
.kh blockquote,
.kh figure {
  margin: 0;
}
.kh ul,
.kh ol {
  padding: 0;
  list-style: none;
}
.kh a {
  color: var(--link);
  text-underline-offset: 2px;
}
.kh svg.i {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
}
.kh svg.i-sm {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}
.kh :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-8);
}
.night {
  background: var(--background);
  color: var(--foreground);
  position: relative;
  isolation: isolate;
}

/* the warm light behind dark bands: a campfire, not a gradient wash */
.fire {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-full);
  filter: blur(80px);
  background: radial-gradient(closest-side, var(--glow), transparent);
  animation: kh-breathe 9s ease-in-out infinite;
}
.dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    color-mix(in oklch, var(--foreground) 10%, transparent) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%);
}

/* header */
.hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--space-16) + var(--space-4));
}
.brand,
.kh a.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  text-decoration: none;
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand img {
  width: var(--space-8);
  height: var(--space-8);
  display: block;
}
.hdr-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.kh .hdr-nav a.plain {
  color: var(--muted-foreground);
  text-decoration: none;
}

/* buttons and the form */
.btn,
.kh a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-12);
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease),
    box-shadow 160ms var(--ease);
}
.btn-primary,
.kh a.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--primary) 60%, transparent),
    0 8px 24px -8px var(--glow);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--primary),
    0 12px 32px -8px var(--glow);
}
.btn-quiet,
.kh a.btn-quiet {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.btn-sm,
.kh a.btn-sm {
  min-height: var(--control-h-lg);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
.btn-xs {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 32rem;
}
.form label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}
.form-row {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--input);
  background: color-mix(in oklch, var(--card) 80%, transparent);
  box-shadow: var(--cf-shadow-md);
}
.form-row:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h-lg);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--foreground);
  font: inherit;
}
.input:focus {
  outline: none;
}
.form-note {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

/* type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 70%, transparent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.live {
  position: relative;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--primary);
}
.live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary);
  animation: kh-ping 2s var(--ease) infinite;
}
.display {
  font-size: 5.5rem;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.heat {
  background: linear-gradient(
    100deg,
    var(--caramel),
    var(--ember) 45%,
    var(--caramel) 70%,
    var(--primary)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kh-shine 8s ease-in-out infinite;
}
.h2 {
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: var(--weight-bold);
  text-wrap: balance;
}
.h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
}
.lede {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.body {
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* sections */
.sec {
  position: relative;
  padding-block: calc(var(--space-16) * 2);
}
.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 48rem;
  margin-bottom: var(--space-12);
}
.sec-head.center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-bottom: var(--space-16);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-height: 40rem;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-12);
}
.hero-copy .lede {
  max-width: 32rem;
}

@keyframes kh-hover {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes kh-open {
  0%,
  12% {
    transform: translateZ(0);
  }
  30%,
  78% {
    transform: translateZ(130px);
  }
  94%,
  100% {
    transform: translateZ(0);
  }
}
@keyframes kh-rise {
  0%,
  22% {
    transform: translateZ(var(--z)) translateY(0);
  }
  36%,
  72% {
    transform: translateZ(var(--z)) translateY(-56px);
  }
  86%,
  100% {
    transform: translateZ(var(--z)) translateY(0);
  }
}

/* what floats around it: pages coming in, every AI it tells */
.chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 85%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--cf-shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  animation: kh-float 6s ease-in-out infinite;
}
.chip svg {
  color: var(--heat);
}
.chip.ok svg {
  color: var(--success);
}
.chip.c1 {
  left: 0;
  top: 14%;
}
.chip.c2 {
  left: 4%;
  top: 46%;
  animation-delay: -2s;
}
.chip.c3 {
  left: 10%;
  bottom: 10%;
  animation-delay: -4s;
}
.chip.c4 {
  right: 0;
  top: 8%;
  animation-delay: -1s;
}
.chip.c5 {
  right: 2%;
  top: 40%;
  animation-delay: -3s;
}
.chip.c6 {
  right: 8%;
  bottom: 16%;
  animation-delay: -5s;
}
@keyframes kh-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

/* the story: chat, then the brain, then every AI */
.stage {
  position: relative;
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-16) minmax(0, 1.1fr) var(--space-16) minmax(
      0,
      0.8fr
    );
  align-items: center;
}
.panel {
  position: relative;
  background: color-mix(in oklch, var(--card) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--cf-shadow-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.panel-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.panel-top .step-dot {
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: var(--foreground);
  font-family: var(--font-brand);
  letter-spacing: 0;
}
.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.msg-you {
  align-self: flex-end;
  max-width: 85%;
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);
  font-size: var(--text-sm);
}
.msg-ken {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
}
.ken-face {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ken-face img {
  width: var(--space-4);
  height: var(--space-4);
  display: block;
}
.ken-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.typing {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--muted);
  align-self: flex-start;
}
.typing i {
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--muted-foreground);
  animation: kh-bob 1s ease-in-out infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.ken-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.press {
  position: relative;
}
.press::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: kh-press var(--loop) var(--ease) infinite;
}

.brain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 4.25rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  overflow: hidden;
}
.tile .lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: auto;
}
.tile .lines i {
  display: block;
  height: 3px;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--foreground) 14%, transparent);
}
.tile .lines i:last-child {
  width: 60%;
}
.tile .hot,
.tile .ok {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: inherit;
  font-size: var(--text-xs);
}
.tile .hot b,
.tile .ok b {
  font-weight: var(--weight-medium);
}
.tile .hot em,
.tile .ok em {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-style: normal;
  font-weight: var(--weight-semibold);
}
.tile .hot em::before {
  content: "";
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background: var(--heat);
}
.tile .hot {
  border: 1.5px solid var(--heat);
  background: color-mix(in oklch, var(--heat) 14%, var(--muted));
  color: var(--foreground);
  animation: kh-t24 var(--loop) var(--ease) infinite;
}
.tile .ok {
  border: 1.5px solid var(--success);
  background: color-mix(in oklch, var(--success) 14%, var(--card));
  color: var(--foreground);
}
.tile .ok svg {
  color: var(--success);
}
.tile .ok.f1 {
  animation: kh-t38 var(--loop) var(--ease) infinite;
}
.tile .ok.f2 {
  animation: kh-t44 var(--loop) var(--ease) infinite;
}
.tile .ok.f3 {
  animation: kh-t50 var(--loop) var(--ease) infinite;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.toast svg {
  color: var(--success);
}

.ais {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  overflow: hidden;
}
.ai-mark {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: var(--text-xs);
}
.ai .told {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: inherit;
  border: 1.5px solid var(--success);
  background: color-mix(in oklch, var(--success) 12%, var(--card));
}
.ai .told small {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}
.ai .told svg {
  color: var(--success);
}
.ai:nth-child(1) .told {
  animation: kh-t66 var(--loop) var(--ease) infinite;
}
.ai:nth-child(2) .told {
  animation: kh-t70 var(--loop) var(--ease) infinite;
}
.ai:nth-child(3) .told {
  animation: kh-t74 var(--loop) var(--ease) infinite;
}

.wire {
  position: relative;
  height: 2px;
  align-self: center;
}
.wire svg {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: 14px;
  overflow: visible;
}
.wire .base {
  stroke: var(--border);
  stroke-width: 2;
}
.wire .flow {
  stroke: var(--heat);
  stroke-width: 2;
  stroke-dasharray: 4 8;
  stroke-linecap: round;
  animation: kh-flow 0.8s linear infinite;
}
.wire.w1 .flow {
  animation:
    kh-flow 0.8s linear infinite,
    kh-wire24 var(--loop) var(--ease) infinite;
}
.wire.w2 .flow {
  animation:
    kh-flow 0.8s linear infinite,
    kh-wire62 var(--loop) var(--ease) infinite;
}
.spark {
  position: absolute;
  top: -4px;
  left: 0;
  width: var(--space-2-5, 10px);
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--heat);
  box-shadow: 0 0 12px 2px var(--heat);
  opacity: 0;
}
.w1 .spark {
  animation: kh-spark24 var(--loop) var(--ease) infinite;
}
.w2 .spark {
  animation: kh-spark62 var(--loop) var(--ease) infinite;
}

.stage-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-16) minmax(0, 1.1fr) var(--space-16) minmax(
      0,
      0.8fr
    );
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  text-align: center;
}
.stage-cap span:nth-child(2) {
  grid-column: 3;
}
.stage-cap span:nth-child(3) {
  grid-column: 5;
}

/* the story's timing, one loop: each scene appears at its moment and stays till the loop ends */
.at3 {
  animation: kh-t3 var(--loop) var(--ease) infinite;
}
.at16 {
  animation: kh-t16 var(--loop) var(--ease) infinite;
}
.at56 {
  animation: kh-t56 var(--loop) var(--ease) infinite;
}
.typing {
  animation: kh-typing var(--loop) linear infinite;
}

@keyframes kh-t3 {
  0%,
  2% {
    opacity: 0;
    transform: translateY(6px);
  }
  5%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t16 {
  0%,
  15% {
    opacity: 0;
    transform: translateY(6px);
  }
  18%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t24 {
  0%,
  23% {
    opacity: 0;
  }
  26%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t38 {
  0%,
  37% {
    opacity: 0;
    transform: scale(0.96);
  }
  40%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t44 {
  0%,
  43% {
    opacity: 0;
    transform: scale(0.96);
  }
  46%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t50 {
  0%,
  49% {
    opacity: 0;
    transform: scale(0.96);
  }
  52%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t56 {
  0%,
  55% {
    opacity: 0;
    transform: translateY(6px);
  }
  58%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t66 {
  0%,
  65% {
    opacity: 0;
    transform: translateX(-8px);
  }
  68%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t70 {
  0%,
  69% {
    opacity: 0;
    transform: translateX(-8px);
  }
  72%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-t74 {
  0%,
  73% {
    opacity: 0;
    transform: translateX(-8px);
  }
  76%,
  93% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-typing {
  0%,
  7% {
    opacity: 0;
    max-height: 0;
    padding-block: 0;
  }
  8%,
  15% {
    opacity: 1;
    max-height: 2rem;
  }
  16%,
  100% {
    opacity: 0;
    max-height: 0;
    padding-block: 0;
  }
}
@keyframes kh-press {
  0%,
  30% {
    opacity: 0;
    transform: scale(1);
  }
  32% {
    opacity: 1;
    transform: scale(1);
  }
  36%,
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes kh-wire24 {
  0%,
  23% {
    opacity: 0;
  }
  25%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-wire62 {
  0%,
  61% {
    opacity: 0;
  }
  63%,
  93% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes kh-spark24 {
  0%,
  22% {
    opacity: 0;
    left: 0;
  }
  23% {
    opacity: 1;
    left: 0;
  }
  27% {
    opacity: 1;
    left: calc(100% - 10px);
  }
  28%,
  100% {
    opacity: 0;
    left: calc(100% - 10px);
  }
}
@keyframes kh-spark62 {
  0%,
  60% {
    opacity: 0;
    left: 0;
  }
  61% {
    opacity: 1;
    left: 0;
  }
  65% {
    opacity: 1;
    left: calc(100% - 10px);
  }
  66%,
  100% {
    opacity: 0;
    left: calc(100% - 10px);
  }
}

@keyframes kh-flow {
  to {
    stroke-dashoffset: -24;
  }
}
@keyframes kh-breathe {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes kh-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes kh-shine {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes kh-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ every chat starts from zero */

.zero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.zero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.zero-copy .body {
  font-size: var(--text-lg);
}
.again {
  position: relative;
  height: 22rem;
}
.again .chatcard {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--cf-shadow-md);
  font-size: var(--text-sm);
  animation: kh-drift 6s ease-in-out infinite;
}
.again .chatcard:nth-child(1) {
  top: 0;
  transform: scale(0.9);
  opacity: 0.45;
  animation-delay: -4s;
}
.again .chatcard:nth-child(2) {
  top: 5.5rem;
  transform: scale(0.95);
  opacity: 0.7;
  animation-delay: -2s;
}
.again .chatcard:nth-child(3) {
  top: 11rem;
}
.chatcard .meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.attach {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.stale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--warning);
  color: var(--foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.stale svg {
  color: var(--warning);
}
@keyframes kh-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

.now {
  margin-top: calc(var(--space-16) * 1.5);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
}
.now .body {
  font-size: var(--text-lg);
}
.now .h2 {
  font-size: var(--text-4xl);
}

/* ------------------------------------------------------------------ meet Ken: a bento of four jobs */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--cf-shadow-lg);
}
.span-4 {
  grid-column: span 4;
}
.span-2 {
  grid-column: span 2;
}
.span-3 {
  grid-column: span 3;
}
.card-open {
  border-style: dashed;
  background: transparent;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted-foreground);
}
.card-icon svg {
  color: var(--heat);
}
.vignette {
  position: relative;
  margin-top: auto;
  min-height: 9rem;
  border-radius: var(--radius-lg);
  background: var(--muted);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* brings it all in */
.inflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  height: 100%;
}
.loose {
  position: relative;
  flex: 1;
  height: 7rem;
}
.doc {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cf-shadow-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  animation: kh-file 6s var(--ease) infinite;
}
.doc:nth-child(1) {
  top: 0;
  left: 0;
}
.doc:nth-child(2) {
  top: 2.5rem;
  left: 18%;
  animation-delay: -1.5s;
}
.doc:nth-child(3) {
  top: 5rem;
  left: 4%;
  animation-delay: -3s;
}
.doc:nth-child(4) {
  top: 1.25rem;
  left: 46%;
  animation-delay: -4.5s;
}
.shelves {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 13rem;
}
.shelf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.shelf svg {
  color: var(--heat);
}
.shelf b {
  margin-left: auto;
  font-weight: var(--weight-medium);
  color: var(--muted-foreground);
}
@keyframes kh-file {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  15%,
  55% {
    opacity: 1;
    transform: none;
  }
  80%,
  100% {
    opacity: 0;
    transform: translateX(140px) scale(0.85);
  }
}

/* keeps it right */
.fixdoc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--text-sm);
}
.fixline {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.fixline .strike {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 0;
  background: var(--heat);
  animation: kh-strike 5s var(--ease) infinite;
}
.fixline.old {
  color: var(--muted-foreground);
}
.fixline.new {
  padding: 0 var(--space-1);
  border-radius: var(--space-1);
  background: color-mix(in oklch, var(--success) 18%, transparent);
  font-weight: var(--weight-semibold);
  animation: kh-newline 5s var(--ease) infinite;
}
.fixdoc .who-checks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  animation: kh-newline 5s var(--ease) infinite;
  animation-delay: 0.3s;
}
@keyframes kh-strike {
  0%,
  15% {
    width: 0;
  }
  30%,
  90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes kh-newline {
  0%,
  30% {
    opacity: 0;
    transform: translateY(4px);
  }
  42%,
  90% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

/* tells every AI */
.radiate {
  position: relative;
  height: 100%;
  min-height: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radiate .core {
  position: relative;
  z-index: 1;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cf-shadow-md);
}
.radiate .core img {
  width: var(--space-6);
  height: var(--space-6);
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--space-12);
  height: var(--space-12);
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--heat);
  animation: kh-ring 3s var(--ease) infinite;
}
.ring:nth-child(2) {
  animation-delay: 1s;
}
.ring:nth-child(3) {
  animation-delay: 2s;
}
.orbit {
  position: absolute;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.orbit.o1 {
  left: 8%;
  top: 18%;
}
.orbit.o2 {
  right: 8%;
  top: 30%;
}
.orbit.o3 {
  left: 30%;
  bottom: 10%;
}
@keyframes kh-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* works on its own */
.patrol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.prow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.prow .chk {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--muted-foreground);
  animation: kh-checked 4.5s var(--ease) infinite;
}
.prow .chk svg {
  color: var(--success);
}
.prow:nth-child(2) .chk {
  animation-delay: 0.6s;
}
.prow:nth-child(3) .chk {
  animation-delay: 1.2s;
}
.scan {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  top: var(--space-4);
  height: calc(var(--space-8) + var(--space-1));
  border-radius: var(--radius-md);
  border: 1.5px solid var(--heat);
  box-shadow: 0 0 16px -2px var(--glow);
  animation: kh-scan 4.5s var(--ease) infinite;
  pointer-events: none;
}
/* each row is space-8 + space-1 tall with a space-2 gap, so the scan steps by exactly one row and lands on its border */
@keyframes kh-scan {
  0%,
  10% {
    transform: translateY(0);
  }
  30%,
  40% {
    transform: translateY(calc(var(--space-8) + var(--space-1) + var(--space-2)));
  }
  60%,
  70% {
    transform: translateY(calc(2 * (var(--space-8) + var(--space-1) + var(--space-2))));
  }
  90%,
  100% {
    transform: translateY(0);
  }
}
@keyframes kh-checked {
  0%,
  15% {
    opacity: 0;
  }
  25%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ how it works */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}
.track {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  top: var(--space-6);
  height: 2px;
  background: var(--border);
  overflow: hidden;
}
.track::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--heat), transparent);
  animation: kh-travel 4s linear infinite;
}
@keyframes kh-travel {
  to {
    left: 100%;
  }
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.step-n {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--cf-shadow-md);
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.step .h3 {
  font-size: var(--text-2xl);
}

/* ------------------------------------------------------------------ who it's for */

.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.person {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.person:hover {
  transform: translateY(-4px);
  box-shadow: var(--cf-shadow-lg);
}
.person-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted-foreground);
}
.person-who svg {
  color: var(--heat);
}
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.change {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.change svg {
  color: var(--success);
  margin-top: 2px;
}

/* ------------------------------------------------------------------ why Kenhold */

.reasons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--border);
  overflow: hidden;
}
.reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--background);
}
.reason .ic {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  color: var(--heat);
}

/* ------------------------------------------------------------------ where it's going */

.road {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr);
  align-items: stretch;
}
.stg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.stg-now::before {
  content: "";
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, var(--glow), transparent);
  animation: kh-breathe 7s ease-in-out infinite;
}
.stg-next {
  border-style: dashed;
  background: transparent;
}
.stg .tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.stg .h3 {
  font-size: var(--text-2xl);
}
.road-wire {
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
}
.road-wire svg {
  width: 100%;
  height: 14px;
  overflow: visible;
}

/* ------------------------------------------------------------------ early access */

.join {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
.join-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.join-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 80%, transparent);
  box-shadow: var(--cf-shadow-lg);
}
.perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.perks li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.perks svg {
  color: var(--success);
}
.join-side .form {
  max-width: none;
}

/* footer */
.ftr {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}
.ftr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-height: var(--space-16);
  padding-block: var(--space-4);
}
.ftr-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: center;
}

/* ------------------------------------------------------------------ narrower screens */

@container (max-width: 1100px) {
  .display {
    font-size: var(--text-6xl);
  }
  .stage,
  .stage-cap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .stage-cap {
    display: none;
  }
  .wire {
    height: var(--space-8);
    width: 2px;
    justify-self: center;
  }
  .wire svg {
    inset: 0 -6px;
    width: 14px;
    height: 100%;
  }
  .wire .spark {
    display: none;
  }
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 640px) {
  .wrap {
    padding-inline: var(--space-4);
  }
  .hdr-nav .plain {
    display: none;
  }
  .brand {
    font-size: var(--text-xl);
  }
  .brand img {
    width: var(--space-6);
    height: var(--space-6);
  }
  .hero-copy {
    padding-top: var(--space-8);
    gap: var(--space-5);
  }
  .display {
    font-size: var(--text-5xl);
    letter-spacing: -0.04em;
  }
  .h2,
  .now .h2 {
    font-size: var(--text-3xl);
  }
  .lede {
    font-size: var(--text-lg);
  }
  .sec {
    padding-block: var(--space-16);
  }
  .sec-head {
    margin-bottom: var(--space-8);
  }
  .form-row {
    flex-direction: column;
    border-radius: var(--radius-xl);
  }
  .form-row .btn {
    width: 100%;
  }
  .zero,
  .now,
  .join {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .now {
    margin-top: var(--space-16);
  }
  .again {
    height: 20rem;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .span-4,
  .span-2,
  .span-3 {
    grid-column: auto;
  }
  .inflow {
    flex-direction: column;
    align-items: stretch;
  }
  .shelves {
    width: auto;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .track {
    left: calc(var(--space-6) - 1px);
    right: auto;
    top: var(--space-6);
    bottom: var(--space-6);
    width: 2px;
    height: auto;
  }
  .track::after {
    display: none;
  }
  .people,
  .reasons {
    grid-template-columns: minmax(0, 1fr);
  }
  .road {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .road-wire {
    justify-content: center;
    transform: rotate(90deg);
    height: var(--space-8);
  }
  .road-wire svg {
    width: var(--space-16);
  }
  .join-side {
    padding: var(--space-5);
  }
  .ftr-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* motion is a bonus: with reduced motion, every scene shows its final state */
/* biome-ignore-start lint/complexity/noImportantStyles: reduced motion must beat every scene's own animation */
@media (prefers-reduced-motion: reduce) {
  .kh *,
  .kh *::before,
  .kh *::after {
    animation: none !important;
    transition: none !important;
  }
  .typing,
  .spark,
  .scan,
  .ring,
  .press::after {
    display: none;
  }
}
/* biome-ignore-end lint/complexity/noImportantStyles: reduced motion must beat every scene's own animation */

/* a slow band of daylight across the hero */
.beam {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, var(--beam) 48%, transparent 62%);
  background-size: 220% 100%;
  animation: kh-beam 14s ease-in-out infinite;
}
@keyframes kh-beam {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
}

/* the headline types itself in, word by word, and the caret keeps blinking */
.w {
  display: inline-block;
  animation: kh-word 500ms var(--ease) both;
}
.w:nth-child(2) {
  animation-delay: 220ms;
}
.w:nth-child(3) {
  animation-delay: 440ms;
}
.w:nth-child(4) {
  animation-delay: 660ms;
}
.caret {
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.04em;
  border-radius: var(--radius-full);
  background: var(--primary);
  animation: kh-blink 1.1s steps(1) infinite;
}
@keyframes kh-word {
  from {
    opacity: 0;
    transform: translateY(0.25em);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes kh-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .w {
    opacity: 1;
  }
}

@container (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
  }
  .hero-copy {
    padding-bottom: 0;
  }
}
@container (max-width: 640px) {
  .scene {
    height: 24rem;
    perspective: 1100px;
  }
  .chip.c1,
  .chip.c3 {
    display: none;
  }
  .chip.c4 {
    top: 2%;
    right: 0;
  }
  .chip.c6 {
    bottom: 4%;
    right: auto;
    left: 0;
  }
}

/* ------------------------------------------------------------------ the mark: five leaves, one in ember */
:root,
[data-theme="light"] {
  --ink: var(--cocoa);
}
[data-theme="dark"] {
  --ink: var(--cream);
}
.mk {
  display: block;
  overflow: visible;
}
.mk .ink {
  fill: var(--ink);
}
.mk .em {
  fill: var(--ember);
}

/* the hero: the company's brain as a 3D knowledge graph. Pages sit in clusters of related knowledge, spread on three axes, and the whole graph turns slowly. Labels always face the reader. At rest only the links inside each cluster show. When the price list changes, the threads to the pages that depend on it draw in, hop by hop; each page it reaches lights up, then shows checked, and the AIs know. One change loop is 11s; one turn is 60s. */
@property --spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.scene {
  position: relative;
  height: 41rem;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}
.scene .fire {
  left: 15%;
  top: 18%;
  width: 70%;
  height: 60%;
}
.hero-brain {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  --web-line: color-mix(in oklch, var(--slate) 55%, transparent);
  --web-far: color-mix(in oklch, var(--slate) 28%, transparent);
  --web-node: var(--card);
  --web-edge: var(--slate);
  --web-hot: var(--ember);
  --web-cl: color-mix(in oklch, var(--caramel) 30%, transparent);
  --web-lab: var(--foreground);
  --web-name: color-mix(in oklch, var(--ember) 80%, var(--cocoa));
}
[data-theme="dark"] .hero-brain {
  --web-line: color-mix(in oklch, var(--cream) 32%, transparent);
  --web-far: color-mix(in oklch, var(--cream) 16%, transparent);
  --web-node: var(--cocoa);
  --web-edge: color-mix(in oklch, var(--cream) 65%, transparent);
  --web-hot: var(--caramel);
  --web-cl: color-mix(in oklch, var(--caramel) 22%, transparent);
  --web-name: var(--caramel);
}
.g3 {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  scale: 0.84;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(var(--spin));
  animation: kh-spin 60s linear infinite;
}
@keyframes kh-spin {
  from {
    --spin: 0deg;
  }
  to {
    --spin: 360deg;
  }
}
.g3 > * {
  position: absolute;
  left: 0;
  top: 0;
}
/* anything that should face the reader: put it at its point, then undo the turn and the tilt */
.g3-halo,
.g3-name,
.g3-node,
.g3-lab,
.g3-wave {
  transform: translate3d(var(--x), var(--y), var(--z)) rotateY(calc(-1 * var(--spin)))
    rotateX(16deg) translate(-50%, -50%);
}
.g3-lab {
  transform: translate3d(var(--x), var(--y), var(--z)) rotateY(calc(-1 * var(--spin)))
    rotateX(16deg) translate(14px, -50%);
}
.g3-halo {
  width: 280px;
  height: 280px;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, var(--web-cl), transparent);
}
.g3-name {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--web-name);
  white-space: nowrap;
}
.g3-link,
.g3-dep {
  height: 0;
  transform-origin: 0 0;
  transform-style: preserve-3d;
}
.g3-link b,
.g3-dep b {
  position: absolute;
  left: 0;
  top: -0.75px;
  width: 100%;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: var(--web-line);
  transform-origin: 0 50%;
}
.g3-link.far b {
  background: var(--web-far);
}
.g3-dep b {
  top: -1.5px;
  height: 3px;
  background: var(--web-hot);
  box-shadow: 0 0 10px var(--glow);
  scale: 0 1;
  opacity: 0;
  animation: kh-thread3 11s var(--ease) infinite both;
  animation-delay: var(--d);
}
@keyframes kh-thread3 {
  0% {
    scale: 0 1;
    opacity: 1;
  }
  9% {
    scale: 1 1;
    opacity: 1;
  }
  72% {
    scale: 1 1;
    opacity: 1;
  }
  82%,
  100% {
    scale: 1 1;
    opacity: 0;
  }
}
.g3-node {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--web-node);
  border: 1.75px solid var(--web-edge);
  box-sizing: border-box;
}
.g3-node.named {
  width: 16px;
  height: 16px;
}
.g3-node.origin {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--web-hot);
}
.g3-node.hit,
.g3-node.origin {
  animation: kh-node3 11s var(--ease) infinite both;
  animation-delay: var(--d);
}
@keyframes kh-node3 {
  0%,
  1% {
    background: var(--web-node);
    border-color: var(--web-edge);
    box-shadow: 0 0 0 0 transparent;
  }
  6% {
    background: var(--web-hot);
    border-color: var(--web-hot);
    box-shadow:
      0 0 0 7px var(--glow),
      0 0 18px var(--glow);
  }
  16% {
    background: var(--web-hot);
    border-color: var(--web-hot);
    box-shadow: 0 0 0 0 transparent;
  }
  26%,
  72% {
    background: var(--success);
    border-color: var(--success);
  }
  82%,
  100% {
    background: var(--web-node);
    border-color: var(--web-edge);
  }
}
.g3-node.origin {
  animation-name: kh-origin3;
}
@keyframes kh-origin3 {
  0%,
  1% {
    background: var(--web-node);
    box-shadow: 0 0 0 0 transparent;
  }
  6% {
    background: var(--web-hot);
    box-shadow:
      0 0 0 9px var(--glow),
      0 0 24px var(--glow);
  }
  16%,
  72% {
    background: var(--web-hot);
    box-shadow: 0 0 0 0 transparent;
  }
  82%,
  100% {
    background: var(--web-node);
  }
}
.g3-lab {
  margin-top: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--web-lab);
  white-space: nowrap;
  text-shadow:
    0 0 3px var(--background),
    0 0 3px var(--background),
    0 0 6px var(--background);
}
.g3-lab.hit {
  animation: kh-lab3 11s var(--ease) infinite both;
  animation-delay: var(--d);
}
@keyframes kh-lab3 {
  0%,
  1% {
    font-weight: 500;
  }
  6%,
  72% {
    font-weight: 650;
  }
  82%,
  100% {
    font-weight: 500;
  }
}
.g3-wave {
  transform-origin: 0 0;
  width: 300px;
  height: 300px;
  border-radius: var(--radius-full);
  border: 2px solid var(--web-hot);
  opacity: 0;
  animation: kh-wave3 11s ease-out infinite;
}
.g3-wave.w2 {
  animation-delay: 0.5s;
}
@keyframes kh-wave3 {
  0% {
    scale: 0.08;
    opacity: 0.9;
    border-width: 2px;
  }
  18% {
    scale: 1;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 0;
  }
}
.hero-tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--heat);
  color: var(--primary-foreground);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px var(--glow);
}
.hero-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--primary-foreground);
  animation: kh-breathe 1.2s ease-in-out infinite;
}
.tag-change {
  left: 0;
  top: 0;
  animation: kh-tag 11s var(--ease) infinite both;
}
@keyframes kh-tag {
  0% {
    opacity: 0;
    translate: 0 6px;
  }
  3%,
  72% {
    opacity: 1;
    translate: 0 0;
  }
  82%,
  100% {
    opacity: 0;
    translate: 0 6px;
  }
}
.chip.arrive {
  animation: kh-arrive 11s var(--ease) infinite both;
}
.chip.arrive.late {
  animation-delay: 0.4s;
}
@keyframes kh-arrive {
  0%,
  44% {
    opacity: 0;
    translate: 0 10px;
  }
  50%,
  74% {
    opacity: 1;
    translate: 0 0;
  }
  82%,
  100% {
    opacity: 0;
    translate: 0 10px;
  }
}
.chip.c4 {
  left: 4%;
  right: auto;
  top: auto;
  bottom: 3.4rem;
}
.chip.c6 {
  left: auto;
  right: 4%;
  top: auto;
  bottom: 3.4rem;
}
.chip.c7 {
  left: 4%;
  right: auto;
  bottom: 0;
}
.chip.c8 {
  left: auto;
  right: 4%;
  bottom: 0;
}
.chip.arrive.d2 {
  animation-delay: 0.8s;
}
.chip.arrive.d3 {
  animation-delay: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
  .g3 {
    transform: rotateX(-16deg) rotateY(-24deg);
  }
  .g3-halo,
  .g3-name,
  .g3-node,
  .g3-lab,
  .g3-wave {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateY(24deg) rotateX(16deg)
      translate(-50%, -50%);
  }
  .g3-lab {
    transform: translate3d(var(--x), var(--y), var(--z)) rotateY(24deg) rotateX(16deg)
      translate(14px, -50%);
  }
  .g3-dep b {
    scale: 1 1;
    opacity: 1;
  }
  .g3-node.hit {
    background: var(--success);
    border-color: var(--success);
  }
  .g3-node.origin {
    background: var(--web-hot);
  }
  .g3-wave {
    display: none;
  }
  .tag-change,
  .chip.arrive {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ tablet, 641 to 1100 wide */
@container (min-width: 641px) and (max-width: 1100px) {
  /* the hero: the graph sits behind the headline and fades out before the words, and the early access form steps back */
  .hero-grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    min-height: 30rem;
  }
  .hero-copy {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    padding-block: var(--space-12);
  }
  .hero .scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
    pointer-events: none;
    opacity: 0.75;
    -webkit-mask-image: linear-gradient(100deg, transparent 40%, black 78%);
    mask-image: linear-gradient(100deg, transparent 40%, black 78%);
  }
  .hero .g3 {
    left: 76%;
    top: 44%;
    scale: 0.8;
  }
  .hero .hero-tag,
  .hero .chip.arrive,
  .hero .g3-lab,
  .hero .g3-name {
    display: none;
  }
  .hero-copy > .pill {
    display: none;
  }
  .hero-copy .form {
    max-width: 26rem;
    gap: var(--space-1);
  }
  .hero-copy .form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-copy .form-row {
    background: color-mix(in oklch, var(--card) 70%, transparent);
    box-shadow: none;
  }
  .hero-copy .form .input {
    min-height: var(--space-10);
  }
  .hero-copy .form .btn {
    min-height: var(--space-10);
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    box-shadow: none;
  }

  /* Meet Ken: the chat and every AI on the left, the brain on the right, so the whole story fits one screen */
  .stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-4);
    align-items: stretch;
  }
  .stage > .wire {
    display: none;
  }
  .stage > .panel:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .stage > .panel:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .stage > .panel:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
  }
  .stage > .panel:nth-child(3) {
    display: flex;
    flex-direction: column;
  }
  .stage > .panel:nth-child(3) .panel-body {
    flex: 1;
  }
  .stage > .panel:nth-child(3) .tile {
    min-height: 5.5rem;
  }
  .stage > .panel:nth-child(3) .toast {
    margin-top: auto;
  }
  .ai .told small {
    display: none;
  }

  /* the four jobs as an even two by two */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .span-4,
  .span-2,
  .span-3 {
    grid-column: span 1;
  }
  .inflow {
    flex-direction: column;
    align-items: stretch;
  }
  .inflow .loose {
    flex: none;
  }
  .shelves {
    width: auto;
  }
  .road {
    grid-template-columns: minmax(0, 1fr) var(--space-16) minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ phone, up to 640 wide: more picture, fewer words */
@container (max-width: 640px) {
  /* the hero: headline, then the graph, then one line and the form */
  .hero-grid {
    gap: var(--space-5);
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy > .pill,
  .hero-copy .form-note {
    display: none;
  }
  .hero-copy .form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hero-copy .display {
    order: 1;
  }
  .hero .scene {
    order: 2;
    height: 27rem;
    margin-inline: calc(-1 * var(--space-4));
  }
  .hero-copy .lede {
    order: 3;
    font-size: var(--text-base);
  }
  .hero-copy .form {
    order: 4;
  }
  .hero .g3 {
    scale: 0.6;
    top: 47%;
  }
  .hero .g3-lab {
    display: none;
  }
  .hero .g3-name {
    font-size: calc(var(--text-xs) / 0.6);
  }
  .tag-change {
    left: var(--space-4);
    top: 0;
  }
  .chip .kw {
    display: none;
  }
  .chip.c4 {
    left: var(--space-4);
    right: auto;
    bottom: calc(var(--space-10) + var(--space-1));
  }
  .chip.c6 {
    left: calc(50% + var(--space-1));
    right: auto;
    bottom: calc(var(--space-10) + var(--space-1));
  }
  .chip.c7 {
    left: var(--space-4);
    right: auto;
    bottom: 0;
  }
  .chip.c8 {
    left: calc(50% + var(--space-1));
    right: auto;
    bottom: 0;
  }

  /* Meet Ken: all three steps in one screen */
  .stage {
    margin-top: var(--space-8);
    gap: var(--space-3);
  }
  .stage > .wire {
    display: none;
  }
  .panel-top {
    padding: var(--space-2) var(--space-3);
  }
  .panel-body {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .brain .tile {
    min-height: var(--space-16);
    padding: var(--space-1-5);
  }
  .tile .lines {
    display: none;
  }
  .tile .hot,
  .tile .ok {
    padding: var(--space-1-5);
  }
  .ais {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ai,
  .ai .told {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    text-align: center;
    font-size: var(--text-xs);
  }
  .ai .told small {
    display: none;
  }
  .card-icon {
    font-size: 0;
    gap: 0;
  }
  .inflow .loose {
    flex: none;
  }

  /* how it works: a timeline, numbers on the line and words beside them */
  #how .h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #how .sec-head {
    margin-bottom: var(--space-6);
  }
  .steps {
    gap: var(--space-6);
  }
  .step {
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
  }
  .step-n {
    grid-row: 1 / span 2;
    margin: 0;
    background: var(--card);
  }
  .step .h3 {
    display: flex;
    align-items: center;
    min-height: var(--space-12);
    font-size: var(--text-xl);
  }
  .step .body {
    grid-column: 2;
  }
  .track {
    left: calc(var(--space-6) - 1px);
    right: auto;
    top: var(--space-6);
    bottom: var(--space-6);
    width: 2px;
    height: auto;
  }
  .track::after {
    display: block;
    left: 0;
    top: -30%;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, transparent, var(--heat), transparent);
    animation: kh-travel-y 4s linear infinite;
  }

  /* who it's for: a deck. Each card stops under the last as you scroll, so they stack */
  .people {
    gap: var(--space-3);
  }
  .person {
    position: sticky;
    top: calc(var(--space-16) + var(--deck, 0) * var(--space-3));
    gap: var(--space-3);
    padding: var(--space-5);
    box-shadow: var(--cf-shadow-md);
  }
  .person:hover {
    transform: none;
  }
  .person:nth-child(2) {
    --deck: 1;
  }
  .person:nth-child(3) {
    --deck: 2;
  }
  .person:nth-child(4) {
    --deck: 3;
  }
  .quote {
    font-size: var(--text-lg);
  }
  .change {
    padding-top: var(--space-3);
  }

  /* why Kenhold: four reasons as a two by two, titles only */
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reason {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
  }
  .reason .h3 {
    font-size: var(--text-base);
  }
  .reason .body {
    display: none;
  }
}
@keyframes kh-travel-y {
  to {
    top: 100%;
  }
}

/* Meet Ken on a phone plays with the scroll, not the clock: scroll down and Ken answers, the pages turn checked and every AI is told; scroll back and it runs backward. Where a browser can't link motion to the scroll, the timed loop stays. */
@keyframes kh-sin {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.stage .msg-you {
  --a: 0;
  --b: 0.06;
}
.stage .msg-ken {
  --a: 0.08;
  --b: 0.16;
}
.stage .tile .hot {
  --a: 0.2;
  --b: 0.26;
}
.stage .tile .ok.f1 {
  --a: 0.32;
  --b: 0.38;
}
.stage .tile .ok.f2 {
  --a: 0.4;
  --b: 0.46;
}
.stage .tile .ok.f3 {
  --a: 0.48;
  --b: 0.54;
}
.stage .toast {
  --a: 0.58;
  --b: 0.64;
}
.stage .ai:nth-child(1) .told {
  --a: 0.7;
  --b: 0.76;
}
.stage .ai:nth-child(2) .told {
  --a: 0.78;
  --b: 0.84;
}
.stage .ai:nth-child(3) .told {
  --a: 0.86;
  --b: 0.92;
}
@supports (animation-timeline: view()) {
  @container (max-width: 640px) {
    .stage {
      view-timeline: --ken block;
    }
    .stage .msg-you,
    .stage .msg-ken,
    .stage .tile .hot,
    .stage .tile .ok,
    .stage .toast,
    .stage .ai .told {
      animation: kh-sin linear both;
      animation-duration: auto;
      animation-timeline: --ken;
      animation-range: cover calc(30% + var(--a) * 28%) cover calc(30% + var(--b) * 28%);
    }
    .stage .typing,
    .stage .press::after {
      display: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .person {
    position: static;
  }
}

.kh .s1 { --x: 0px; --y: 0px; --z: 0px; }
.kh .s2 { --x: 0px; --y: -101.4px; --z: 0px; }
.kh .s3 { --x: 235px; --y: 95px; --z: -40px; }
.kh .s4 { --x: 235px; --y: 1.4px; --z: -40px; }
.kh .s5 { --x: -225px; --y: 100px; --z: 70px; }
.kh .s6 { --x: -225px; --y: 3.5px; --z: 70px; }
.kh .s7 { --x: 70px; --y: -165px; --z: 210px; }
.kh .s8 { --x: 70px; --y: -245px; --z: 210px; }
.kh .s9 { --x: -110px; --y: -150px; --z: -215px; }
.kh .s10 { --x: -110px; --y: -254.9px; --z: -215px; }
.kh .s11 { width: 102.9px; transform: translate3d(65px, -110.8px, 203.7px) rotateY(-76.7deg) rotateZ(-59deg); }
.kh .s12 { width: 93.5px; transform: translate3d(65px, -110.8px, 203.7px) rotateY(31deg) rotateZ(-28.6deg); }
.kh .s13 { width: 75.7px; transform: translate3d(65px, -110.8px, 203.7px) rotateY(124.4deg) rotateZ(-75.8deg); }
.kh .s14 { width: 72.2px; transform: translate3d(77.2px, -199px, 255.3px) rotateY(108.7deg) rotateZ(11.8deg); }
.kh .s15 { width: 89.9px; transform: translate3d(135.4px, -155.7px, 161.4px) rotateY(-161.5deg) rotateZ(-18.5deg); }
.kh .s16 { width: 80.9px; transform: translate3d(-178.4px, 129.6px, 64.8px) rotateY(131.4deg) rotateZ(-82deg); }
.kh .s17 { width: 100.3px; transform: translate3d(-178.4px, 129.6px, 64.8px) rotateY(-125.2deg) rotateZ(-43.3deg); }
.kh .s18 { width: 80.2px; transform: translate3d(-277.1px, 60.8px, 78px) rotateY(82.7deg) rotateZ(0deg); }
.kh .s19 { width: 73.2px; transform: translate3d(-277.1px, 60.8px, 78px) rotateY(-39.4deg) rotateZ(0.1deg); }
.kh .s20 { width: 100.1px; transform: translate3d(-185.9px, 49.5px, 56.3px) rotateY(144.4deg) rotateZ(6.5deg); }
.kh .s21 { width: 77.3px; transform: translate3d(-185.9px, 49.5px, 56.3px) rotateY(-116.9deg) rotateZ(8.5deg); }
.kh .s22 { width: 91px; transform: translate3d(-96.3px, -109.3px, -262px) rotateY(-145.4deg) rotateZ(-39.6deg); }
.kh .s23 { width: 79.6px; transform: translate3d(-96.3px, -109.3px, -262px) rotateY(-113.4deg) rotateZ(20deg); }
.kh .s24 { width: 107.4px; transform: translate3d(-96.3px, -109.3px, -262px) rotateY(-61.8deg) rotateZ(-68.1deg); }
.kh .s25 { width: 94.3px; transform: translate3d(-154px, -167.3px, -222.2px) rotateY(-45.8deg) rotateZ(64.8deg); }
.kh .s26 { width: 87.4px; transform: translate3d(-154px, -167.3px, -222.2px) rotateY(3.3deg) rotateZ(-28.5deg); }
.kh .s27 { width: 76px; transform: translate3d(0px, 0px, 0px) rotateY(12.8deg) rotateZ(-46.8deg); }
.kh .s28 { width: 75.4px; transform: translate3d(0px, 0px, 0px) rotateY(-27.1deg) rotateZ(33deg); }
.kh .s29 { width: 72.6px; transform: translate3d(0px, 0px, 0px) rotateY(71.9deg) rotateZ(-10.9deg); }
.kh .s30 { width: 82.7px; transform: translate3d(0px, 0px, 0px) rotateY(153.1deg) rotateZ(-7.6deg); }
.kh .s31 { width: 90px; transform: translate3d(0px, 0px, 0px) rotateY(-77.1deg) rotateZ(-1.1deg); }
.kh .s32 { width: 75.6px; transform: translate3d(50.7px, -55.4px, -11.5px) rotateY(116.9deg) rotateZ(33.4deg); }
.kh .s33 { width: 81.3px; transform: translate3d(56.2px, 41.1px, 28.8px) rotateY(-121.6deg) rotateZ(-31.7deg); }
.kh .s34 { width: 100.1px; transform: translate3d(22.1px, -13.8px, -67.8px) rotateY(-162.1deg) rotateZ(1.6deg); }
.kh .s35 { width: 80.5px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(73.4deg) rotateZ(-38.2deg); }
.kh .s36 { width: 85.6px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(24.9deg) rotateZ(30deg); }
.kh .s37 { width: 121.1px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(-24.8deg) rotateZ(-27.5deg); }
.kh .s38 { width: 71.2px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(-109.2deg) rotateZ(-68.2deg); }
.kh .s39 { width: 91.2px; transform: translate3d(191.7px, 63.7px, -99.6px) rotateY(-107.4deg) rotateZ(-10.3deg); }
.kh .s40 { width: 86.1px; transform: translate3d(191.7px, 63.7px, -99.6px) rotateY(11.9deg) rotateZ(7.7deg); }
.kh .s41 { width: 99.8px; transform: translate3d(240.8px, 156.3px, -70.2px) rotateY(53.8deg) rotateZ(-54.3deg); }
.kh .s42 { width: 108.6px; transform: translate3d(271.1px, 57.5px, 6.1px) rotateY(169.3deg) rotateZ(-5.4deg); }
.kh .s43 { width: 492.8px; transform: translate3d(65px, -110.8px, 203.7px) rotateY(109.1deg) rotateZ(0.2deg); }
.kh .s44 { width: 341.9px; transform: translate3d(-277.1px, 60.8px, 78px) rotateY(60.9deg) rotateZ(-24.7deg); }
.kh .s45 { width: 375.3px; transform: translate3d(77.2px, -199px, 255.3px) rotateY(72deg) rotateZ(41deg); }
.kh .s46 { width: 76px; transform: translate3d(0px, 0px, 0px) rotateY(12.8deg) rotateZ(-46.8deg); --d: 0.4s; }
.kh .s47 { width: 75.4px; transform: translate3d(0px, 0px, 0px) rotateY(-27.1deg) rotateZ(33deg); --d: 0.4s; }
.kh .s48 { width: 72.6px; transform: translate3d(0px, 0px, 0px) rotateY(71.9deg) rotateZ(-10.9deg); --d: 0.4s; }
.kh .s49 { width: 211px; transform: translate3d(0px, 0px, 0px) rotateY(12.7deg) rotateZ(32.5deg); --d: 0.4s; }
.kh .s50 { width: 80.5px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(73.4deg) rotateZ(-38.2deg); --d: 1.7s; }
.kh .s51 { width: 85.6px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(24.9deg) rotateZ(30deg); --d: 1.7s; }
.kh .s52 { width: 121.1px; transform: translate3d(173.6px, 113.5px, -39px) rotateY(-24.8deg) rotateZ(-27.5deg); --d: 1.7s; }
.kh .s53 { width: 304.2px; transform: translate3d(50.7px, -55.4px, -11.5px) rotateY(-161.6deg) rotateZ(37.5deg); --d: 1.7s; }
.kh .s54 { --x: 0px; --y: 0px; --z: 0px; --d: 0s; }
.kh .s55 { --x: 50.7px; --y: -55.4px; --z: -11.5px; --d: 1.3s; }
.kh .s56 { --x: 56.2px; --y: 41.1px; --z: 28.8px; --d: 1.3s; }
.kh .s57 { --x: 22.1px; --y: -13.8px; --z: -67.8px; --d: 1.3s; }
.kh .s58 { --x: -73.1px; --y: -10.9px; --z: -37.1px; }
.kh .s59 { --x: 20px; --y: -1.7px; --z: 87.7px; }
.kh .s60 { --x: 173.6px; --y: 113.5px; --z: -39px; --d: 1.3s; }
.kh .s61 { --x: 191.7px; --y: 63.7px; --z: -99.6px; --d: 2.6s; }
.kh .s62 { --x: 240.8px; --y: 156.3px; --z: -70.2px; --d: 2.6s; }
.kh .s63 { --x: 271.1px; --y: 57.5px; --z: 6.1px; --d: 2.6s; }
.kh .s64 { --x: 164.9px; --y: 47.4px; --z: -13.9px; }
.kh .s65 { --x: 275.2px; --y: 75.2px; --z: -117.2px; }
.kh .s66 { --x: -178.4px; --y: 129.6px; --z: 64.8px; --d: 2.6s; }
.kh .s67 { --x: -277.1px; --y: 60.8px; --z: 78px; }
.kh .s68 { --x: -185.9px; --y: 49.5px; --z: 56.3px; }
.kh .s69 { --x: -266.8px; --y: 60.7px; --z: -1.5px; }
.kh .s70 { --x: -220.5px; --y: 60.9px; --z: 124.4px; }
.kh .s71 { --x: 65px; --y: -110.8px; --z: 203.7px; }
.kh .s72 { --x: 77.2px; --y: -199px; --z: 255.3px; }
.kh .s73 { --x: 135.4px; --y: -155.7px; --z: 161.4px; }
.kh .s74 { --x: 54.6px; --y: -184.2px; --z: 188.4px; }
.kh .s75 { --x: -96.3px; --y: -109.3px; --z: -262px; }
.kh .s76 { --x: -154px; --y: -167.3px; --z: -222.2px; }
.kh .s77 { --x: -126px; --y: -82px; --z: -193.4px; }
.kh .s78 { --x: -77.4px; --y: -208.9px; --z: -226.6px; }
.kh .s79 { border-top: 1px solid var(--border); }
.kh .s80 { background: var(--muted); border-block: 1px solid var(--border); }
.kh .s81 { margin-top: var(--space-16); }
.kh .s82 { padding-top: 0; }
.kh .s83 { left: -10%; top: 10%; width: 60%; height: 80%; }