@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/Inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/Inter-latin-500.woff2") format("woff2");
}

/* ==========================================================================
   NB - landing page
   The NB app's cockpit identity grown into a webpage: JetBrains Mono
   throughout, a paper/cream default with a dark sibling, a fixed workshop-grid
   surface, and one motif carried everywhere - many quiet lines, one human dot.
   ========================================================================== */

/* ── Self-hosted type (no runtime CDN - the page is fully self-contained) ── */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/JetBrainsMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/JetBrainsMono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/JetBrainsMono-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/JetBrainsMono-700.woff2") format("woff2");
}

/* ── Tokens ──────────────────────────────────────────────────────────────
   Light (paper) is the canonical default. Dark is honored when the OS asks
   for it, and either can be pinned by the theme toggle via [data-theme].     */
:root {
  --font-sans: "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono",
    Menlo, Consolas, monospace;

  /* Type scale */
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15px;
  --t-md: 16.5px;
  --t-lg: 19px;
  --t-xl: 23px;
  --t-2xl: 30px;
  --t-3xl: clamp(30px, 5vw, 46px);
  --t-hero: clamp(32px, 6.2vw, 62px);

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --maxw: 1120px;

  /* Paper / light */
  --bg: #f3f0e8;
  --bg-deep: #ebe7dc;
  --surface: #ffffff;
  --surface-2: #fbf9f3;
  --surface-3: #f5f2ea;
  --border: #d8d4c7;
  --border-soft: #e7e3d6;
  --border-strong: #b9b4a3;
  --text: #161617;
  --text-2: #4a4a4d;
  --text-3: #64625d;
  --text-4: #69675f;
  --accent: #2f7a4f;      /* the human dot - where a person still acts */
  --accent-soft: rgba(47, 122, 79, 0.12);
  --grid-line: rgba(0, 0, 0, 0.04);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
  --shadow-2: 0 18px 40px -24px rgba(0, 0, 0, 0.28);
  --scene-sky: #d6d0bd;
  --scene-haze: #eee8dc;
  --scene-ridge: #777b71;
  --scene-front: #424c46;
  --scene-wood: #998e78;
  --device-metal: #555b5b;
  --screen: #101719;
  --screen-raised: #192225;
  --screen-line: #354145;
  --screen-text: #edf0ed;
  --screen-muted: #b5c0be;
  --hero-ink: #ffffff;
  --hero-action: #b9f2cc;
  --hero-action-hover: #d2f9df;
  --hero-action-ink: #102b1d;
  --hero-bar-bg: #12161a;
  --hero-bar-ink: #e8ecef;
  --hero-bar-muted: #9aa5ad;
  --hero-bar-line: #2c343b;
  --hero-bar-hover: #1d242a;
  /* The light theme's hero sits over the founder's DAY scene (see the head of
     index.html), whose afternoon sky is far brighter than dusk. The contrast
     gate measures the glyphs against the frame as composited: with the dusk
     wash the headline fell to 4.02:1 at 1440 and the subline to 3.10:1 on a
     phone. At these the tightest is 5.08:1. */
  --hero-sky-1: rgba(6, 8, 14, 0.62);
  --hero-sky-2: rgba(6, 8, 14, 0.58);
  --hero-sky-3: rgba(6, 8, 14, 0.42);
}

/* OS-dark, only while the user has not pinned light via the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b0d;
    --bg-deep: #07080a;
    --surface: #111317;
    --surface-2: #161a1f;
    --surface-3: #1d2128;
    --border: #23272f;
    --border-soft: #1a1d23;
    --border-strong: #2f343d;
    --text: #e7e8eb;
    --text-2: #b5b8c0;
    --text-3: #a1a6af;
    --text-4: #a1a6af;
    --accent: #6fd49a;
    --accent-soft: rgba(111, 212, 154, 0.14);
    --grid-line: rgba(255, 255, 255, 0.03);
    --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
    --shadow-2: 0 18px 44px -22px rgba(0, 0, 0, 0.7);
    --scene-sky: #303b3d;
    --scene-haze: #788080;
    --scene-ridge: #374747;
    --scene-front: #202d2b;
    --scene-wood: #786e5c;
    --device-metal: #555b5b;
    --screen: #101719;
    --screen-raised: #192225;
    --screen-line: #354145;
    --screen-text: #edf0ed;
    --screen-muted: #b5c0be;
    --hero-ink: #ffffff;
    --hero-action: #b9f2cc;
    --hero-action-hover: #d2f9df;
    --hero-action-ink: #102b1d;
    --hero-bar-bg: #12161a;
    --hero-bar-ink: #e8ecef;
    --hero-bar-muted: #9aa5ad;
    --hero-bar-line: #2c343b;
    --hero-bar-hover: #1d242a;
    --hero-sky-1: rgba(6, 8, 14, 0.52);
    --hero-sky-2: rgba(6, 8, 14, 0.44);
    --hero-sky-3: rgba(6, 8, 14, 0.18);
  --hero-sky-1: rgba(6, 8, 14, 0.52);
  --hero-sky-2: rgba(6, 8, 14, 0.44);
  --hero-sky-3: rgba(6, 8, 14, 0.18);
  }
}

/* Explicit pin - wins over everything above */
:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --bg-deep: #07080a;
  --surface: #111317;
  --surface-2: #161a1f;
  --surface-3: #1d2128;
  --border: #23272f;
  --border-soft: #1a1d23;
  --border-strong: #2f343d;
  --text: #e7e8eb;
  --text-2: #b5b8c0;
  --text-3: #a1a6af;
  --text-4: #a1a6af;
  --accent: #6fd49a;
  --accent-soft: rgba(111, 212, 154, 0.14);
  --grid-line: rgba(255, 255, 255, 0.03);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --shadow-2: 0 18px 44px -22px rgba(0, 0, 0, 0.7);
  --scene-sky: #303b3d;
  --scene-haze: #788080;
  --scene-ridge: #374747;
  --scene-front: #202d2b;
  --scene-wood: #786e5c;
  --device-metal: #555b5b;
  --screen: #101719;
  --screen-raised: #192225;
  --screen-line: #354145;
  --screen-text: #edf0ed;
  --screen-muted: #b5c0be;
  --hero-ink: #ffffff;
  --hero-action: #b9f2cc;
  --hero-action-hover: #d2f9df;
  --hero-action-ink: #102b1d;
  --hero-bar-bg: #12161a;
  --hero-bar-ink: #e8ecef;
  --hero-bar-muted: #9aa5ad;
  --hero-bar-line: #2c343b;
  --hero-bar-hover: #1d242a;
  --hero-sky-1: rgba(6, 8, 14, 0.52);
  --hero-sky-2: rgba(6, 8, 14, 0.44);
  --hero-sky-3: rgba(6, 8, 14, 0.18);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fixed workshop grid - two crossed 1px gradients, softened by a radial mask */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 82% 74% at 50% 22%, var(--text) 32%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 74% at 50% 22%, var(--text) 32%, transparent 100%);
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
::selection {
  background: var(--text);
  color: var(--bg);
}

/* Keyboard focus - always visible, good contrast in both themes */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Shared structure ─────────────────────────────────────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.section {
  position: relative;
  z-index: 1;
  padding-block: var(--s-9);
  border-top: 1px solid var(--border-soft);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.section-head {
  max-width: 640px;
  margin-bottom: var(--s-7);
}
.section-title {
  margin-top: var(--s-4);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.section-sub {
  margin-top: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-md);
  max-width: 56ch;
}

/* Small board+dot glyph reused as a structural marker */
.mark {
  flex: none;
  color: var(--text);
}
.mark .m-dot {
  fill: var(--text-3);
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
}
.brand .wordmark {
  font-size: var(--t-lg);
  letter-spacing: -0.03em;
}
.brand .brand-tag {
  font-size: var(--t-xs);
  color: var(--text-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 2px;
}
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding-inline: var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--text-2);
  border-color: var(--text-2);
}
.btn-lg {
  height: 48px;
  padding-inline: var(--s-5);
  font-size: var(--t-md);
}
.btn .arrow {
  display: inline-block;
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* Icon-only theme toggle (revealed by JS; hidden for no-JS so no dead control) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
[hidden] { display: none !important; }
.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.theme-toggle .i-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .i-sun {
  display: block;
}
:root[data-theme="dark"] .theme-toggle .i-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .i-moon {
    display: none;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 9vw, 104px) var(--s-9);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-cta {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.hero-note {
  font-size: var(--t-sm);
  color: var(--text-3);
}

/* The signature: a "board" card - many faint change-lines resolving to one
   human dot (the PR that is ready to merge). */
.board-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--shadow-1);
  padding: var(--s-5);
  overflow: hidden;
}
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px dashed var(--border);
}
.board-head .bh-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
}
.board-head .bh-meta {
  font-size: var(--t-xs);
  color: var(--text-3);
  letter-spacing: 0.06em;
}
.board-rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.row .tick {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--border-strong);
  opacity: 0.55;
}
.row .line {
  height: 6px;
  border-radius: 3px;
  background: var(--text-4);
  opacity: 0.5;
}
.row .agent-tag {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* The one line that carries the human dot */
.row-merge {
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  gap: var(--s-3);
}
.row-merge .dot {
  flex: none;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
}
.row-merge .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--text-3);
}
.row-merge .merge-label {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.row-merge .merge-label b {
  font-size: var(--t-sm);
  font-weight: 600;
}
.row-merge .merge-label span {
  font-size: var(--t-xs);
  color: var(--text-3);
}
.row-merge .merge-cta {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── How it works - a real 3-step sequence, so numbering is earned ────────── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.step-n {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.1em;
}
/* Connector line between steps on desktop, ending in the human dot on step 3 */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--s-6) + 7px);
  right: calc(-1 * var(--s-5) - 1px);
  width: calc(var(--s-5) + 2px);
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0 5px,
    transparent 5px 10px
  );
}
.step-title {
  margin-top: var(--s-4);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step-body {
  margin-top: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-base);
}
.step-body .hl {
  color: var(--text);
}
.step.is-out {
  border-color: color-mix(in srgb, var(--text-3) 42%, var(--border));
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--surface);
}
.step.is-out .step-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.step.is-out .step-title .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 4px var(--border-soft);
}

/* ── Capabilities - 6 quiet cards, each with a lines-and-dot glyph ────────── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.cap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.cap:hover {
  border-color: var(--border-strong);
}
.cap .cap-glyph {
  color: var(--text-3);
  margin-bottom: var(--s-4);
}
.cap .cap-glyph .g-dot {
  fill: var(--text-3);
}
.cap h3 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cap p {
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* ── Deployment model - a spec sheet, engineered look ─────────────────────── */
.deploy {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.spec {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.spec-row {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border-soft);
}
.spec-row:last-child {
  border-bottom: 0;
}
.spec-row dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding-top: 2px;
}
.spec-row dd {
  font-size: var(--t-base);
  color: var(--text);
}
.spec-row dd small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: var(--t-sm);
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.cta {
  text-align: center;
}
.cta-card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(36px, 6vw, 72px) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.cta-card .mark {
  margin-inline: auto;
  display: block;
}
.cta-card h2 {
  margin-top: var(--s-5);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.cta-card p {
  margin-top: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-md);
  max-width: 48ch;
  margin-inline: auto;
}
.cta-card .hero-cta {
  justify-content: center;
}
.mono-mail {
  font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-soft);
  padding-block: var(--s-6);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-3);
}
.footer-inner a:hover {
  color: var(--text);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-weight: 600;
}

/* ── Motion - enhancement only; content is fully visible without it ───────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .d1 { animation-delay: 0.05s; }
  .d2 { animation-delay: 0.12s; }
  .d3 { animation-delay: 0.19s; }
  .row-merge .dot::after {
    animation: pulse-ring 2.4s ease-out infinite;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse-ring {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.5); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .board-card { order: 2; }
  .pipeline { grid-template-columns: 1fr; gap: var(--s-4); }
  .step:not(:last-child)::after {
    top: auto;
    right: auto;
    left: calc(var(--s-6));
    bottom: calc(-1 * var(--s-4) - 1px);
    width: 1px;
    height: calc(var(--s-4) + 2px);
    background: repeating-linear-gradient(
      180deg,
      var(--border-strong) 0 5px,
      transparent 5px 10px
    );
  }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .deploy { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 600px) {
  :root {
    --s-9: 64px;
  }
  .wrap { padding-inline: var(--s-5); }
  .section { padding-block: var(--s-8); }
  .cap-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4); }
  .brand .brand-tag { display: none; }
  .hero-cta { gap: var(--s-3); }
  .btn { width: 100%; justify-content: center; }
  .theme-toggle, .topbar .btn { width: auto; }
  .topbar .btn-primary { display: none; }
}

@media (max-width: 380px) {
  .hero-lockup .lockup-meta { display: none; }
}

/* Dusk hero.

   HERO CALIBRATION. One block. The glass rectangle of the laptop screen in the
   FIRST frame of the founder's clip, which is also the rest picture he fed the
   video model. Measured by scripts/track-hero-screen.py and recorded, with the
   other 191 frames, in assets/hero-move.json. Swapping the clip is: rerun
   encode-hero-move.sh, rerun track-hero-screen.py, copy frame 0 here.

   --plane-cover is the rest picture's own aspect ratio as a percentage, which
   is what makes the plane cover the stage with no script at all. */
.hero {
  /* The glass has rounded TOP corners and square bottom ones, as a real
     laptop screen does. The tracked quad is the rectangle of the glass's
     straight edges, so its top corners sit out on the bezel; the NB still
     is rounded to match, as fractions of the glass's own width and height.
     Measured on frames 110, 150 and 191 by walking each tracked corner's
     diagonal into the glass: about 3.8 and 5.7 percent, taken a touch
     larger here because too large leaves black glass, which cannot be seen,
     and too small leaves a corner on the silver bezel, which can. */
  --glass-corner-x: 4%;
  --glass-corner-y: 6%;
  --glass-left: 46.3851%;
  --glass-top: 56.1806%;
  --glass-width: 7.6383%;
  --glass-height: 8.4722%;
  --plane-cover: 177.683cqh;
  --plane-aspect: 1672 / 941;
  --zoom: 0;
  padding: 0;
}
/* How fast the hero copy (and the top bar with it) fades as the move begins:
   gone at a zoom of 1 / --copy-rate. The headline is only ever readable over the
   resting wide shot, so it must be gone before the glass has grown 15 percent.
   Measured from each corner table: the night glass reaches that at zoom 0.1696
   (gone at 1/6 = 0.1667); the day camera starts faster and reaches it at 0.1239,
   so the day copy is gone at 1/9 = 0.1111, when its glass has grown about 12. */
:root { --copy-rate: 6; }
:root[data-scene="day"] { --copy-rate: 9; }
/* THE DAY SCENE (the light theme, see the head of index.html). Its picture at
   rest is the day clip's own first frame, 1920 by 1080, and the glass on it is
   the first quad of assets/hero-move-day.json, as the night's is of its own. */
:root[data-scene="day"] .hero {
  --glass-left: 46.4581%;
  --glass-top: 56.1419%;
  --glass-width: 7.5878%;
  --glass-height: 8.5893%;
  --plane-cover: 177.778cqh;
  --plane-aspect: 1920 / 1080;
}
.hero-pin { position: relative; height: max(650px, 100svh); overflow: clip; color: var(--hero-ink); }
.hero-grid { display: block; position: relative; padding-top: 88px; text-align: center; z-index: 4; }
.hero-copy { max-width: 1000px; margin-inline: auto; font-family: var(--font-sans); }
.hero-display { font-size: clamp(42px, 3.89vw, 56px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.hero h1 { max-width: 1050px; margin: 14px auto 0; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -.015em; text-wrap: balance; }
.hero .hero-cta { justify-content: center; margin-top: 26px; gap: 26px; }
.hero .btn-primary { background: var(--hero-action); color: var(--hero-action-ink); border-color: var(--hero-action); border-radius: 999px; font-weight: 500; font-size: 15px; padding-inline: 24px; width: auto; }
.hero .btn-primary:hover { background: var(--hero-action-hover); border-color: var(--hero-action-hover); }
.hero-demo-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font-size: 15px; font-weight: 500; }
.hero-demo-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* The stage holds four layers in one box: the rest picture with the NB still
   on its glass, the scroll scrubbed clip, the NB still under the projective
   transform that rides the glass through the move, and the live demo frame. */
.hero-stage, .hero-move { position: absolute; inset: 0; pointer-events: none; }
.hero-stage { isolation: isolate; container-type: size; }
.hero-plane {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100%, var(--plane-cover)); aspect-ratio: var(--plane-aspect);
}
.hero-rest { display: block; width: 100%; height: 100%; }
/* The picture at rest names no file until the head has chosen the scene; with
   scripts off it never will, and the <noscript> copy of the night picture
   takes its place. */
.hero-rest:not([src]) { display: none; }
.hero-glass { position: absolute; left: var(--glass-left); top: var(--glass-top); width: var(--glass-width); height: var(--glass-height); object-fit: fill;
  border-radius: var(--glass-corner-x) var(--glass-corner-x) 0 0 / var(--glass-corner-y) var(--glass-corner-y) 0 0; }
.hero-move-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* The other scene's clip while a switch loads it: decoding, never seen. */
.hero-move-next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
/* The camera move as the visitor sees it: the clip only decodes, and each
   frame is drawn here in the same paint that places the NB still. */
.hero-move-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* Where the canvas draws nothing (see pixelsLanded), the video itself is shown. */
.clip-direct .hero-move-canvas { display: none; }
/* THE SKY WASH. Not a box and not a picture edit: one full bleed gradient over
   the whole stage, with no edge anywhere, that deepens the dusk sky the copy
   sits in. It is a page layer above the picture and below the copy, and it
   fades out on the same curve as the copy, so the move and the landing are the
   founder's picture and nothing else. */
.hero-sky { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--hero-sky-1) 0%, var(--hero-sky-2) 26%, var(--hero-sky-3) 42%, transparent 58%); }
.hero-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; transform-origin: 0 0; opacity: 0; will-change: transform;
  /* The radius is set in the still's own box, before the transform, so the
     projection bends it exactly as it bends the glass; it fades to square as
     the still pops out to the full stage (--glass-round, set by the page). */
  border-radius: calc(var(--glass-corner-x) * var(--glass-round, 1)) calc(var(--glass-corner-x) * var(--glass-round, 1)) 0 0 /
                 calc(var(--glass-corner-y) * var(--glass-round, 1)) calc(var(--glass-corner-y) * var(--glass-round, 1)) 0 0; }
.hero-screen:not([src]) { visibility: hidden; }
.hero-live { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: var(--screen); }
.hero-frame { display: block; width: 100%; height: 100%; border: 0; }

/* The landed control. Neutral tokens only: nothing on it is the primary
   action, and nothing on it says Play.

   WHERE IT SITS, AND WHY. Once the move lands, the demo owns the whole stage,
   and the demo puts its own brand in the top left, its tour cards and their
   buttons on the right, and its dock along the bottom. The landing page's own
   top bar row has scrolled away by then, so there is no room in it: the
   control is the slim tab the contract names instead, on the left edge, level
   with the middle of the stage. Collapsed it is one pill reading Live demo;
   hover, focus or a tap opens the three actions beside it. It never reaches
   the bottom third of the frame and never crosses the middle. */
.hero-bar {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; z-index: 6;
  display: flex; align-items: center;
}
.hero-bar[hidden] { display: none; }
.hero-bar-pill {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; min-height: 96px; padding: 12px 0; cursor: pointer;
  border: 1px solid var(--hero-bar-line); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--hero-bar-bg); color: var(--hero-bar-muted); font-family: inherit;
}
.hero-bar-pill:hover, .hero-bar.is-open .hero-bar-pill { color: var(--hero-bar-ink); background: var(--hero-bar-hover); }
.hero-bar.is-open .hero-bar-pill { border-radius: 0; }
/* No text-transform: the label reads exactly the two words it is. */
.hero-bar-label { writing-mode: vertical-rl; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
/* Collapsed it has no width and no visibility, so the three actions are out of
   the tab order until the control is open. */
.hero-bar-actions {
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  width: 0; padding: 0; visibility: hidden;
  border: 1px solid var(--hero-bar-line); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--hero-bar-bg); color: var(--hero-bar-ink);
}
.hero-bar.is-open .hero-bar-actions { width: 152px; padding: 8px; visibility: visible; }
.hero-bar-btn {
  min-height: 34px; padding-inline: 12px; border-radius: 8px; cursor: pointer; text-align: left;
  background: none; border: 1px solid transparent; color: var(--hero-bar-ink);
  font-family: inherit; font-size: 13px; white-space: nowrap;
}
.hero-bar-btn:hover { background: var(--hero-bar-hover); border-color: var(--hero-bar-line); }

.topbar { position: absolute; inset: 0 0 auto; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--hero-ink); }
.topbar-inner { max-width: none; padding-inline: 40px; height: 76px; }
.topbar .mark, .topbar .brand-tag { color: inherit; }
.topbar .theme-toggle { background: none; border-color: transparent; color: inherit; width: 44px; height: 44px; }
.topbar-contact { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; font-size: 12px; }
.topbar-contact:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn { transition: border-color .2s, background .2s; }
  .btn .arrow { transition: transform .2s; }
  /* The resting plate IS the clip's first frame, so the two swap in one
     step: the clip is only shown once it has presented a frame of its own. A
     fade between them only ever did anything when they disagreed, which after
     a flick left the NB still on the glass of the clip while the plate was
     still the picture on top. The NB still swaps with them for the same
     reason: the plate carries the same screen on the same glass. Only the
     live demo fades, and it fades over an opaque still. */
  .hero-live { transition: opacity .18s linear; }
  .hero-bar-actions { transition: width .16s ease; }
}
/* The move runs above phone widths only. At 700px and under the hero is the
   rest picture with NB on its glass, and Launch demo is a plain link. */
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  .hero.motion-ready { height: 280svh; }
  .motion-ready .hero-pin { position: sticky; top: 0; height: 100svh; }
  .motion-ready .hero-grid, .motion-ready .hero-sky { opacity: clamp(0, calc(1 - var(--zoom) * var(--copy-rate)), 1); }
  .motion-ready.copy-hidden .hero-grid { visibility: hidden; pointer-events: none; }
  /* The top bar is not in the hero, so it carries the class and the clock on
     the page element itself and leaves on the copy's own curve. */
  html.motion-ready .topbar { opacity: clamp(0, calc(1 - var(--zoom) * var(--copy-rate)), 1); }
  html.motion-ready.copy-hidden .topbar { visibility: hidden; pointer-events: none; }
  .motion-ready.clip-ready .hero-plane { opacity: 0; }
  .motion-ready.clip-ready .hero-move-canvas { opacity: 1; }
  .motion-ready.clip-ready.clip-direct .hero-move-clip { opacity: 1; }
  .motion-ready.clip-ready.screen-ready .hero-screen { opacity: 1; }
  .motion-ready.demo-live .hero-live { visibility: visible; opacity: 1; pointer-events: auto; }
  /* One class more than the rule above it, on purpose: once the live frame is
     on screen the still fades out from under it. */
  /* The still stays opaque UNDER the live demo, which is opaque itself. Fading
     it out there meant that both ways through the handoff, two half faded
     layers let the video's own blank laptop screen show through: measured on
     29 Sep, a black laptop 188ms after flicking back to the top. */
}
@media (min-width: 601px) and (max-width: 1000px) {
  .hero-grid { padding-top: 72px; }
  .hero h1 { font-size: 16px; max-width: 720px; margin-top: 18px; }
}
@media (max-width: 600px) {
  .hero-pin { height: max(680px, 100svh); }
  .hero-grid { padding: 80px 22px 0; }
  .hero-display { font-size: 36px; max-width: 340px; margin-inline: auto; text-wrap: initial; }
  .hero h1 { font-size: 15px; line-height: 1.4; margin-top: 12px; }
  .hero .hero-cta { margin-top: 20px; gap: 6px 18px; }
  .hero .btn-primary { height: 44px; font-size: 13px; padding-inline: 18px; }
  .hero-demo-link { min-height: 44px; font-size: 13px; }
  .topbar-inner { height: 64px; padding-inline: 22px; }
}
@media (max-height: 700px) and (min-width: 601px) {
  .hero-grid { padding-top: 76px; }
  .hero-display { font-size: 42px; }
  .hero h1 { font-size: 16px; margin-top: 12px; }
  .hero .hero-cta { margin-top: 16px; }
}

.product-section { background: var(--screen); color: var(--screen-text); }
.product-section .eyebrow { color: var(--screen-muted); }
.demo-layout { max-width: 1440px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.demo-copy .section-title { font-size: clamp(28px, 3vw, 42px); }
.feature-list { margin-top: 32px; }
.feature-list details { border-top: 1px solid var(--screen-line); padding: 20px 0; }
.feature-list summary { cursor: pointer; font-size: 16px; font-weight: 500; }
.feature-list details p { font-size: 14px; color: var(--screen-muted); margin-top: 14px; }
.demo-link { display: inline-block; margin-top: 16px; text-decoration: underline; text-underline-offset: 5px; }
.demo-panel { min-width: 0; background: var(--screen-raised); border: 1px solid var(--screen-line); border-radius: 16px; overflow: hidden; }
.demo-frame { position: relative; aspect-ratio: 16/10; }
.demo-frame-img, .demo-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.demo-frame-img.is-shown { opacity: 1; }
.demo-frame.clip-ready .demo-clip { opacity: 1; }
.demo-frame.clip-ready .demo-frame-img.is-shown { opacity: 0; }
.demo-caption-bar { display: flex; align-items: center; padding: 16px; font-size: 11px; }
.demo-panel figcaption { padding: 0 16px 16px; color: var(--screen-muted); font-size: 11px; }
.demo-film { margin-top: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.demo-film h3 { font-size: 26px; line-height: 1.2; margin: 16px 0; }
.demo-film p:not(.eyebrow) { font-size: 14px; color: var(--screen-muted); }
.film-frame { position: relative; display: block; width: 100%; aspect-ratio: 8/5; border: 1px solid var(--screen-line); border-radius: 12px; overflow: hidden; background: var(--screen); margin: 0; }
.film-still, .film-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.film-clip { opacity: 0; transition: opacity .2s ease; }
.film-ready .film-clip { opacity: 1; }
.film-ready .film-still { opacity: 0; }
.pipeline { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.step { padding: 24px 18px; }
.step-body { font-size: 13px; }
.step:not(:last-child)::after { display: none; }
.capability-details { background: var(--surface-2); }
.proof-block { margin-bottom: 100px; text-align: center; }
.proof-block .section-title, .proof-block .section-sub { max-width: 760px; margin-inline: auto; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px auto 20px; max-width: 850px; }
.proof-grid b { display: block; font-weight: 400; font-size: clamp(44px, 6vw, 80px); }
.proof-grid span, .proof-note { font-size: 12px; color: var(--text-2); }
@media (max-width: 940px) {
  .demo-layout, .demo-film { grid-template-columns: 1fr; gap: 32px; }
  .pipeline { grid-template-columns: 1fr; }
  .demo-copy { max-width: 650px; }
}
@media (max-width: 600px) {
  .demo-panel { max-width: 400px; margin-inline: auto; }
  .proof-grid { gap: 12px; }
  .proof-grid span { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step { animation: step-entrance linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes step-entrance { from { transform: translateY(20px); } to { transform: none; } }
  }
}