/* ============================================================
   Doppelganger landing — refined monochrome
   Mirrors the app design system (packages/ui/DESIGN.md): one
   achromatic OKLCH ramp (the .dark tokens from globals.css),
   contrast over color, borders over shadows, Orbitron as the
   futuristic display face, system stacks for body and mono.
   ============================================================ */

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  /* `optional` (not `swap`), matching the app (see apps/web): the font is
     preloaded and tiny, so it's ready at first paint in practice — and on a
     slow network the all-caps clamp()ed h1 must not reflow mid-read. */
  font-display: optional;
  src: url("fonts/orbitron-latin.woff2") format("woff2");
}

/* Hex/rgba fallback ramp first: engines without oklch() (older in-app
   webviews — X's in-app browser is a big slice of launch traffic) would
   otherwise drop every color. Custom properties can't fall back via a
   second declaration (an unsupported value inside var() invalidates the
   whole property at computed-value time), hence the @supports override. */
:root {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --muted-fg: #a3a3a3;
  --dim: #737373;
  --surface: #141414;
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.14);
  --primary: #e5e5e5;
  --primary-fg: #171717;
  --font-display: "Orbitron", ui-sans-serif, system-ui, sans-serif;
  --font-body:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --container: 1120px;
}

@supports (color: oklch(0.5 0 0)) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --muted-fg: oklch(0.708 0 0);
    --dim: oklch(0.556 0 0);
    --surface: oklch(0.185 0 0);
    --border-soft: oklch(1 0 0 / 6%);
    --border-strong: oklch(1 0 0 / 14%);
    --primary: oklch(0.922 0 0);
    --primary-fg: oklch(0.205 0 0);
  }
}

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

::selection {
  background: rgba(255, 255, 255, 0.25);
  background: oklch(1 0 0 / 25%);
}

:focus-visible {
  outline: 2px solid var(--dim);
  outline-offset: 3px;
  border-radius: 4px;
}

/* mono labels */
.eyebrow,
.sec-label,
.chat-meta,
.chat-log,
.job-tags,
.stack-note,
.final-note {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   Buttons — contrast, not color; color transitions only
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-fg);
}

/* the one place a shadow is allowed to glow: the money button */
.btn-primary:hover {
  background: var(--foreground);
  transform: translateY(-1px);
  box-shadow: 0 10px 34px rgba(255, 255, 255, 0.13);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--foreground);
}

.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--dim);
  transform: translateY(-1px);
}

.btn .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover .arr {
  transform: translateY(2px);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding: 168px 0 104px;
  overflow: clip;
}

/* blueprint grid, radially masked — monochrome, very faint */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-image:
    linear-gradient(oklch(1 0 0 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 4.5%) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(75% 64% at 50% 30%, #000 35%, transparent 100%);
  mask-image: radial-gradient(75% 64% at 50% 30%, #000 35%, transparent 100%);
}

/* a faint monochrome spotlight behind the headline — depth, no hue */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px 320px at 50% 30%, rgba(255, 255, 255, 0.05), transparent 70%);
  background: radial-gradient(560px 320px at 50% 30%, oklch(1 0 0 / 5%), transparent 70%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  color: var(--muted-fg);
  margin-bottom: 30px;
}

.hero h1 {
  font-size: clamp(38px, 6.8vw, 78px);
  max-width: 16ch;
}

/* the doppelganger: a static offset echo of the word */
.ghost-wrap {
  position: relative;
  display: inline-block;
}

.ghost {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  -webkit-text-stroke: 1px oklch(1 0 0 / 20%);
  transform: translate(7px, 6px);
  pointer-events: none;
  user-select: none;
}

.sub {
  max-width: 52ch;
  margin-top: 28px;
  font-size: 18px;
  color: var(--muted-fg);
}

/* the three "its own" claims carry the pitch — lift them off the gray */
.sub strong {
  color: var(--foreground);
  font-weight: 500;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

/* stat strip — muted-fg, not dim: 12px text needs WCAG AA (4.5:1), and
   the app system reserves the dim gray for non-text (focus rings) */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 58px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.stat-strip li {
  padding: 0 26px;
  border-left: 1px solid var(--border-soft);
}

.stat-strip li:first-child {
  border-left: 0;
}

.stat-strip strong {
  color: var(--foreground);
  font-weight: 500;
  margin-right: 8px;
}

/* ============================================================
   Chat proof — one job, end to end, in the channel you'd use
   ============================================================ */

.chat {
  width: min(520px, 100%);
  margin-top: 76px;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--surface);
  /* dark-on-dark depth; the one other allowed shadow besides the CTA */
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--primary);
  color: var(--primary-fg);
}

.chat-name {
  font-size: 13.5px;
  font-weight: 600;
}

/* presence: it's on, right now */
.chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--foreground);
}

.chat-meta {
  margin-left: auto;
  color: var(--dim);
  letter-spacing: 0.12em;
  font-size: 10.5px;
}

/* demo switcher — hidden without JS (no playback to drive it) */
.chat-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}

html.js .chat-tabs {
  display: flex;
}

.chat-tab {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.chat-tab:hover {
  color: var(--foreground);
}

.chat-tab.active {
  background: var(--primary);
  color: var(--primary-fg);
}

.chat-body {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px 22px;
  min-height: 324px;
}

.chat-body.active {
  display: flex;
}

.bubble {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
}

.bubble.you {
  align-self: flex-end;
  margin-left: auto;
  background: var(--primary);
  color: var(--primary-fg);
  border-bottom-right-radius: 4px;
}

.bubble.them {
  align-self: flex-start;
  background: var(--background);
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  border-bottom-left-radius: 4px;
}

/* the receipts: what it actually did, as a quiet mono panel */
.chat-log {
  align-self: stretch;
  margin: 4px 0;
  padding: 11px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted-fg);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* playback: with JS the thread plays like a live conversation — app.js
   flips .on per message; without JS everything is simply visible */
html.js .chat .bubble,
html.js .chat .chat-log li {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

html.js .chat .bubble.on,
html.js .chat .chat-log li.on {
  opacity: 1;
  transform: none;
}

/* typing indicator: pure decoration, only ever shown by the playback */
.bubble.typing {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 13px 14px;
}

.bubble.typing.on {
  display: inline-flex;
}

.bubble.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-fg);
  animation: typing-blink 1s ease-in-out infinite;
}

.bubble.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.bubble.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }

  30% {
    opacity: 1;
  }
}

/* absolute marker = hanging indent when a log line wraps on small screens */
.chat-log li {
  position: relative;
  padding-left: 18px;
}

.chat-log li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--dim);
}

/* ============================================================
   Sections
   ============================================================ */

.section {
  position: relative;
  padding: 128px 0;
  border-top: 1px solid var(--border-soft);
}

.sec-label {
  color: var(--muted-fg);
}

/* alternating sections sit a hair off pure black — depth without color */
.section.alt {
  background: #101010;
  background: oklch(0.16 0 0);
}

/* the numbered label runs a hairline out to the right — editorial chrome */
.sec-head .sec-label {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sec-head .sec-label::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--border-soft);
}

.sec-head {
  max-width: 720px;
  margin-bottom: 60px;
}

.sec-head h2 {
  margin-top: 18px;
  font-size: clamp(27px, 4.6vw, 46px);
}

.sec-lede {
  margin-top: 18px;
  font-size: 17px;
  color: var(--muted-fg);
  max-width: 56ch;
}

/* ============================================================
   Feature grid (the body · security trio)
   ============================================================ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.feature-grid.trio {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
}

.feature {
  padding: 28px 28px 30px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color 0.15s ease,
    transform 0.2s ease;
}

.feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.feature p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--muted-fg);
}

/* hand-drawn stroke glyphs in a small tile — an app icon, not clip art */
.card-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--background);
  color: var(--foreground);
}

.card-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Chip wall (integrations)
   ============================================================ */

.chip-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 880px;
}

.chip-wall li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.chip-wall li:hover {
  color: var(--primary-fg);
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* real marks, monochrome: they inherit the chip's text color */
.chip-ico {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
  opacity: 0.85;
}

.chip-wall li:hover .chip-ico {
  opacity: 1;
}

.stack-note {
  margin-top: 34px;
  color: var(--muted-fg);
}

/* ============================================================
   Job grid (hand it a job)
   ============================================================ */

.job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.job {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color 0.15s ease,
    transform 0.2s ease;
}

.job:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* the job is literally the text you'd send — style it as one */
.job h3 {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.job p {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted-fg);
}

.job-tags {
  margin-top: auto;
  padding-top: 18px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

/* the job p directly above tags shouldn't flex-grow past its text */
.job p:not(.job-tags) {
  flex: 0 0 auto;
}

/* ============================================================
   Vault diagram (security)
   ============================================================ */

.vault {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vault-node {
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--foreground);
  background: var(--surface);
}

.vault-arrow {
  color: var(--dim);
}

/* ============================================================
   Fleet
   ============================================================ */

.fleet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.fleet-lead {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fleet-arrow {
  color: var(--dim);
  font-size: 18px;
  /* optically align with the marks, not the mark+label column */
  margin-bottom: 24px;
}

.fleet-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* an outlined echo of the brand mark — the doubles */
.fleet-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  color: var(--foreground);
  background: var(--surface);
}

.fleet-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transform: translate(7px, 6px);
}

/* you: the one filled mark the outlined doubles echo */
.fleet-mark-you {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-fg);
}

.fleet-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* ============================================================
   Day one — three numbered steps under top rules
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  counter-reset: none;
}

.step {
  border-top: 1px solid var(--border-strong);
  padding-top: 20px;
}

.step-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--dim);
}

.step h3 {
  margin-top: 12px;
}

.step p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted-fg);
}

/* ============================================================
   Final CTA
   ============================================================ */

.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-image:
    linear-gradient(oklch(1 0 0 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 4.5%) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 80% at 50% 55%, #000 30%, transparent 100%);
}

.final-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 0 26px;
}

/* 24px floor + 8vw: "BE EVERYWHERE" in Orbitron at the old 32px floor
   measured ~343px — wider than the 272px content box of a 320px phone
   (the overflow was masked by body overflow-x: hidden, not absent). */
.final-h {
  font-size: clamp(24px, 8vw, 60px);
  max-width: 100%;
}

.final .sec-label {
  margin: 28px 0 4px;
  max-width: 54ch;
}

.final-note {
  margin-top: 26px;
  color: var(--dim);
  letter-spacing: 0.12em;
  font-size: 11px;
}

/* ============================================================
   Reveal on scroll — entrance-only, quick (DESIGN.md: 300ms ceiling)
   ============================================================ */

/* hidden start state is gated on html.js (set by app.js), so content
   stays visible without JavaScript — and app.js only sets html.js when
   prefers-reduced-motion is off, so every entrance below is opt-in */
html.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* [data-stagger] containers reveal their children one by one instead of
   moving themselves; app.js writes each child's --d from the attribute */
html.js .reveal[data-stagger] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* children enter via a one-shot animation (not a transition) so the
   per-child delay can't leak into their hover transitions later */
html.js .reveal[data-stagger] > * {
  opacity: 0;
}

html.js .reveal[data-stagger].in > * {
  opacity: 1;
  animation: rise-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* hero entrance: one cascade down the column on load */
html.js .hero-inner > .reveal:nth-child(1) {
  transition-delay: 0s;
}

html.js .hero-inner > .reveal:nth-child(2) {
  transition-delay: 0.07s;
}

html.js .hero-inner > .reveal:nth-child(3) {
  transition-delay: 0.14s;
}

html.js .hero-inner > .reveal:nth-child(4) {
  transition-delay: 0.21s;
}

html.js .hero-inner > .reveal:nth-child(5) {
  transition-delay: 0.28s;
}

html.js .hero-inner > .reveal:nth-child(6) {
  transition-delay: 0.34s;
}

/* section headings settle into their tracking as they arrive */
html.js .sec-head.reveal h2 {
  letter-spacing: 0.07em;
  transition: letter-spacing 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .sec-head.reveal.in h2 {
  letter-spacing: 0.02em;
}

/* ============================================================
   Cursor spotlight — a faint white glow tracks the pointer over
   cards (fine pointers only; app.js feeds --mx/--my)
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .feature,
  .job {
    position: relative;
    overflow: hidden;
  }

  .feature::after,
  .job::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
      240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.07),
      transparent 60%
    );
    transition: opacity 0.3s ease;
  }

  .feature:hover::after,
  .job:hover::after {
    opacity: 1;
  }
}

/* ============================================================
   Ambient motion — loops so faint they read as texture, not
   animation. All gated on html.js (absent under reduced motion
   and without JavaScript) AND the media query, in case the OS
   preference flips mid-session.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* presence dot breathes */
  html.js .chat-dot {
    animation: dot-pulse 2.4s ease-in-out infinite;
  }

  @keyframes dot-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.35;
    }
  }

  /* the blueprint grid breathes */
  html.js .hero::before {
    animation: grid-breathe 9s ease-in-out infinite alternate;
  }

  @keyframes grid-breathe {
    from {
      opacity: 0.65;
    }

    to {
      opacity: 1;
    }
  }

  /* the doppelganger moment: the echo detaches from the word, then
     keeps drifting slightly out of sync with it — never in lockstep */
  html.js .hero h1.in .ghost {
    animation:
      ghost-detach 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards,
      ghost-drift 7s ease-in-out 2.5s infinite alternate;
  }

  @keyframes ghost-detach {
    from {
      opacity: 0;
      transform: translate(0, 0);
    }

    to {
      opacity: 1;
      transform: translate(7px, 6px);
    }
  }

  @keyframes ghost-drift {
    from {
      transform: translate(7px, 6px);
    }

    to {
      transform: translate(11px, 9px);
    }
  }

  /* security: the credential's path lights up node by node, forever */
  html.js .vault.in .vault-node {
    animation: vault-pulse 4.8s ease-in-out 2s infinite;
  }

  html.js .vault.in .vault-node:nth-child(3) {
    animation-delay: 2.55s;
  }

  html.js .vault.in .vault-node:nth-child(5) {
    animation-delay: 3.1s;
  }

  html.js .vault.in .vault-node:nth-child(7) {
    animation-delay: 3.65s;
  }

  @keyframes vault-pulse {
    0%,
    22%,
    100% {
      border-color: var(--border-strong);
    }

    9% {
      border-color: var(--muted-fg);
    }
  }

  /* the doubles' echoes drift on their own clocks (you stay still) */
  html.js .fleet-row.in > .fleet-chip .fleet-mark::after {
    animation: echo-drift 5s ease-in-out infinite alternate;
  }

  html.js .fleet-row.in > .fleet-chip:nth-child(3) .fleet-mark::after {
    animation-delay: 0.7s;
  }

  html.js .fleet-row.in > .fleet-chip:nth-child(4) .fleet-mark::after {
    animation-delay: 1.4s;
  }

  html.js .fleet-row.in > .fleet-chip:nth-child(5) .fleet-mark::after {
    animation-delay: 2.1s;
  }

  @keyframes echo-drift {
    from {
      transform: translate(7px, 6px);
    }

    to {
      transform: translate(11px, 10px);
    }
  }
}

/* ============================================================
   Brand assets page (brand.html)
   ============================================================ */

.brand-hero {
  padding: 156px 0 0;
}

.brand-hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
}

.brand-hero .sub {
  margin-top: 20px;
  font-size: 16.5px;
  max-width: 62ch;
}

.brand-hero .cta-row {
  justify-content: flex-start;
  margin-top: 30px;
}

.brand-kit-meta {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.brand-main {
  padding-bottom: 110px;
}

.asset-section {
  margin-top: 60px;
}

.asset-section h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--muted-fg);
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.asset-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 44px 36px;
}

/* pure #fff / #000 tiles (not the oklch page tokens): the assets are pure
   black and pure white, so preview them on the grounds they ship for */
.asset-preview.on-light {
  background: #fff;
}

.asset-preview.on-dark {
  background: #000;
}

.asset-preview .img-square {
  height: 150px;
  width: auto;
}

.asset-preview .img-horizontal {
  width: min(440px, 100%);
  height: auto;
}

.asset-preview .img-stacked {
  width: min(280px, 100%);
  height: auto;
}

.asset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.asset-name {
  color: var(--muted-fg);
}

.asset-dl {
  display: flex;
  gap: 18px;
}

.asset-dl a {
  color: var(--muted-fg);
  transition: color 0.15s ease;
}

.asset-dl a:hover {
  color: var(--foreground);
}

.brand-note {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  max-width: 70ch;
  font-size: 14px;
  color: var(--muted-fg);
}

/* ============================================================
   Legal pages (terms.html, privacy.html)
   ============================================================ */

.legal-main {
  padding-bottom: 110px;
}

.legal-hero {
  padding: 156px 0 0;
}

.legal-hero h1 {
  font-size: clamp(30px, 4.6vw, 48px);
}

.legal-meta {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.legal-body {
  max-width: 72ch;
}

.legal-tldr {
  margin-top: 40px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  font-size: 15px;
  color: var(--muted-fg);
}

.legal-body h2 {
  margin-top: 56px;
  font-size: 17px;
  letter-spacing: 0.06em;
}

.legal-body h3 {
  margin-top: 28px;
}

.legal-body p,
.legal-body li {
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--muted-fg);
}

.legal-body li {
  margin-top: 10px;
}

.legal-body strong,
.legal-tldr strong {
  color: var(--foreground);
  font-weight: 500;
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
}

.legal-body ul {
  list-style: disc;
}

.legal-body ol {
  list-style: decimal;
}

.legal-body li::marker {
  color: var(--dim);
}

.legal-body a,
.legal-tldr a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.legal-body a:hover,
.legal-tldr a:hover {
  text-decoration-color: var(--foreground);
}

.legal-note {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
}

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 920px) {
  .feature-grid,
  .feature-grid.trio,
  .job-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 140px 0 76px;
  }

  .brand-hero {
    padding-top: 128px;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .sub {
    font-size: 16.5px;
  }

  .section {
    padding: 88px 0;
  }

  .sec-head {
    margin-bottom: 44px;
  }

  .stat-strip {
    gap: 10px 18px;
  }

  /* no dividers when the strip can wrap — a wrapped row would otherwise
     start with an orphaned left rule */
  .stat-strip li {
    padding: 0;
    border-left: 0;
  }

  .chat {
    margin-top: 60px;
  }
}

@media (max-width: 620px) {
  /* "you" takes its own line so the four doubles sit as one row */
  .fleet-lead {
    flex-basis: 100%;
  }

  .fleet-row {
    gap: 18px;
  }

  .fleet-arrow {
    display: none;
  }

  .feature-grid,
  .feature-grid.trio,
  .job-grid {
    grid-template-columns: 1fr;
  }

  .vault-arrow {
    width: 100%;
    /* the row wraps to a column of nodes; rotate the flow arrows */
    text-align: left;
    padding-left: 18px;
  }

  .vault-arrow::before {
    content: "\2193";
  }

  .vault-arrow {
    font-size: 0;
  }

  .vault-arrow::before {
    font-size: 14px;
  }
}

/* ============================================================
   Splash — the whole index page: mark, wordmark, waitlist CTA
   ============================================================ */

.splash {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px;
  text-align: center;
  overflow: clip;
}

/* same faint blueprint grid + spotlight as the old hero */
.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-image:
    linear-gradient(oklch(1 0 0 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 4.5%) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(75% 64% at 50% 46%, #000 35%, transparent 100%);
  mask-image: radial-gradient(75% 64% at 50% 46%, #000 35%, transparent 100%);
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px 320px at 50% 46%, rgba(255, 255, 255, 0.05), transparent 70%);
  background: radial-gradient(560px 320px at 50% 46%, oklch(1 0 0 / 5%), transparent 70%);
}

.splash > * {
  position: relative;
  z-index: 1;
}

.splash-mark {
  height: 72px;
  width: auto;
}

.splash-word {
  margin-top: 34px;
  font-size: clamp(26px, 6.2vw, 64px);
  letter-spacing: 0.06em;
}

.splash .btn {
  margin-top: 44px;
}

/* waitlist page (waitlist.html) — the mission statement is the hero copy;
   "love" carries a shiny sweep (base stays bright so the word reads at rest) */
.splash-tagline {
  margin-top: 38px;
  font-size: clamp(19px, 2.8vw, 28px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--foreground);
}

.splash-tagline .love {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.75) 30%,
    #fff 48%,
    #fff 52%,
    rgba(255, 255, 255, 0.75) 70%
  );
  background: linear-gradient(
    110deg,
    oklch(1 0 0 / 75%) 30%,
    oklch(1 0 0) 48%,
    oklch(1 0 0) 52%,
    oklch(1 0 0 / 75%) 70%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: love-shine 3.6s linear infinite;
}

@keyframes love-shine {
  to {
    background-position: 200% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-tagline .love {
    /* static glint centered on the word */
    animation: none;
    background-position: 50% center;
  }
}