/* HeyMate landing page.
   Matte paper, a black camera housing, and one green: the app's own pointer.
   Figtree echoes the app's Avenir Next; JetBrains Mono is for keys and commands. */

:root {
  --paper: #f3f3f2;
  --sheet: #ffffff;
  --ink: #0e0e0f;
  --graphite: #5f5f64;
  --mist: #8d8d92;
  --rule: #deddda;
  --housing: #000000;
  --housing-2: #161617;
  --housing-3: #2a2a2c;
  --signal: #23784f;
  --signal-bright: #5fd39d;
  --signal-wash: #e2f2e9;
  --fun: #3f72d9;

  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --text: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --r-window: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.visually-hidden, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.035em; }
h1 { font-weight: 800; font-size: clamp(42px, 6.6vw, 92px); line-height: 0.96; }
h1 .h1-sub { color: var(--mist); }
h2 { font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: 1.0; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--graphite); max-width: 40ch; }
.small { font-size: 14px; color: var(--mist); }
.label {
  font: 500 12px/1 var(--mono); text-transform: lowercase; letter-spacing: 0.02em; color: var(--mist);
}
kbd, .key {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 0.35em;
  font: 500 0.82em/1 var(--mono); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-bottom-width: 3px; border-radius: 7px;
  vertical-align: 0.08em;
}
code, .cmd { font-family: var(--mono); font-size: 0.88em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 16px/1 var(--text); text-decoration: none; transition: transform 0.2s var(--ease), background 0.2s;
}
.btn:hover { background: #262628; }
.btn:active { transform: scale(0.98); }
.btn .apple { width: 15px; height: 18px; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-quiet:hover { background: var(--sheet); }
.text-link { color: var(--signal); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font: 800 18px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; }
.brand img { width: 22px; height: 22px; border-radius: 6px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--graphite); }
.nav-links a:hover { color: var(--ink); }
.nav .btn { height: 38px; padding: 0 16px; font-size: 14px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 999px; height: 36px; padding: 0 14px; font: 500 14px var(--text); color: var(--ink); }
.nav-sheet { display: none; }
@media (max-width: 820px) {
  .nav-links, .nav .btn { display: none; }
  .menu-btn { display: block; }
  .nav.open .nav-sheet { display: grid; gap: 4px; padding: 8px var(--gutter) 20px; }
  .nav-sheet a { padding: 12px 0; font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--rule); }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 88px) 0 0; }
.hero-copy { display: grid; grid-template-columns: 1fr 360px; gap: 24px 48px; align-items: end; }
.hero-copy h1 { grid-column: 1 / -1; }
.hero-copy .lede { margin-top: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.hero-actions .small { flex-basis: 100%; margin-top: -4px; }
.ask-line { margin-top: 22px; font-size: 17px; color: var(--graphite); }
.ask-line kbd { margin: 0 2px; }
.byo-line { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink); max-width: 44ch; }
.byo-line .label { display: block; margin-bottom: 6px; color: var(--signal); }
@media (max-width: 900px) { .hero-copy { grid-template-columns: 1fr; gap: 20px; } }
.hero-copy .hero-actions { margin-top: 0; align-self: end; }

/* The screen: a bezel with the camera housing hanging from its top edge. */
.screen {
  position: relative; margin-top: clamp(40px, 6vw, 72px);
  background: var(--housing); border-radius: 26px 26px 0 0; padding: 12px 12px 0;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.35);
}
.display {
  position: relative; overflow: hidden; border-radius: 15px 15px 0 0;
  background: #fbfbfa; width: 100%; aspect-ratio: 16 / 9; min-height: 380px;
}
.menubar {
  display: flex; align-items: center; gap: 18px; height: 30px; padding: 0 16px;
  font: 600 12px/1 var(--text); color: #2a2a2c; background: rgba(255, 255, 255, 0.8); border-bottom: 1px solid #ecebe8;
}
.menubar span:not(:first-child) { font-weight: 400; color: #4a4a4d; }
.menubar .clock { margin-left: auto; white-space: nowrap; }
.app-title { white-space: nowrap; }

/* The notch grows from the housing into the HeyMate card. */
.notch {
  position: absolute; top: 0; left: 50%; z-index: 3; transform: translateX(-50%);
  width: 190px; height: 30px; background: var(--housing); border-radius: 0 0 14px 14px;
  overflow: hidden; color: #f4f4f2;
  transition: width 0.7s var(--ease), height 0.7s var(--ease), border-radius 0.7s var(--ease);
}
.notch.open { width: min(440px, 86%); height: 132px; border-radius: 0 0 24px 24px; }
.notch-body { opacity: 0; padding: 38px 20px 16px; transition: opacity 0.3s 0.35s; }
.notch.open .notch-body { opacity: 1; }
.notch-row { display: flex; align-items: center; gap: 10px; }
.notch-face { width: 26px; height: 26px; border-radius: 50%; background: var(--housing-3); display: grid; place-items: center; }
.notch-face svg { width: 13px; height: 13px; }
.notch-step { font: 500 11px/1 var(--mono); color: #9a9a9e; }
.notch-say { margin-top: 10px; font: 600 16px/1.35 var(--text); letter-spacing: -0.01em; min-height: 2.7em; }
.notch-dots { position: absolute; right: 20px; top: 46px; display: flex; gap: 5px; }
.notch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--housing-3); transition: background 0.3s; }
.notch-dots i.on { background: var(--signal-bright); }

/* A small video editor the walkthrough happens in. */
.app {
  position: absolute; inset: 56px 6% 0; background: var(--sheet); border-radius: 12px 12px 0 0;
  box-shadow: 0 0 0 1px #e6e5e2, 0 30px 60px -30px rgba(0, 0, 0, 0.25); overflow: hidden;
  display: flex; flex-direction: column;
}
.app-bar { display: flex; align-items: center; gap: 8px; height: 40px; flex: none; padding: 0 14px; border-bottom: 1px solid #efeeeb; }
.lights { display: flex; gap: 6px; margin-right: 10px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #e2e1de; }
.app-title { font: 600 13px/1 var(--text); color: #3a3a3d; margin-right: auto; }
.tool {
  font: 500 12px/1 var(--text); color: #4a4a4d; padding: 7px 10px; border-radius: 7px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.tool.target { background: var(--signal-wash); color: var(--signal); box-shadow: 0 0 0 2px var(--signal-bright); }
.editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.viewer {
  position: relative; flex: 1; min-height: 90px; margin: 12px 14px 10px;
  border-radius: 8px; overflow: hidden; background: #111;
}
.frame { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; transition: opacity 0.45s; }
.frame-intro { background: radial-gradient(circle at 50% 45%, #2b2b2e, #0f0f10 70%); color: #f4f4f2; gap: 6px; }
.frame-intro b { font: 800 clamp(14px, 2.2vw, 26px)/1 var(--display); letter-spacing: 0.08em; animation: intro-spin 3s ease-in-out infinite; }
.frame-intro span { font: 500 10px/1 var(--mono); color: #8d8d92; }
.frame-talk { background: linear-gradient(180deg, #d9d6cf, #b9b5ad); opacity: 0; }
.person { position: absolute; left: 50%; bottom: 0; width: 34%; height: 78%; transform: translateX(-50%); }
.person::before { content: ""; position: absolute; left: 50%; top: 0; width: 40%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #3a3a3d; }
.person::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; border-radius: 50% 50% 0 0; background: #3a3a3d; }
.caption { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--text); color: #fff; background: rgba(0,0,0,.6); padding: 5px 8px; border-radius: 5px; }
.timecode { position: absolute; right: 8px; top: 8px; font: 500 10px/1 var(--mono); color: #fff; background: rgba(0,0,0,.55); padding: 4px 6px; border-radius: 4px; }
.display.on-talk .frame-intro { opacity: 0; }
.display.on-talk .frame-talk { opacity: 1; }
.timeline { position: relative; flex: none; padding: 0 14px 12px; border-top: 1px solid #efeeeb; background: #f8f8f6; }
.ruler { display: flex; justify-content: space-between; height: 22px; align-items: center; font: 500 10px/1 var(--mono); color: #9a9a9e; }
.track { position: relative; display: flex; gap: 2px; height: 34px; margin-top: 4px; }
.track.audio { height: 22px; }
.clip {
  display: flex; align-items: center; padding: 0 8px; border-radius: 5px; overflow: hidden; white-space: nowrap;
  font: 600 11px/1 var(--text); color: #fff; min-width: 0;
  transition: flex-basis 0.6s var(--ease), padding 0.6s var(--ease), opacity 0.4s, box-shadow 0.3s;
}
.clip-intro { flex: 0 0 22%; background: #6b6b70; }
.clip-talk { flex: 1 1 auto; background: var(--ink); }
.clip-broll { flex: 0 0 20%; background: #3a3a3d; }
.clip-audio { flex: 1; background: repeating-linear-gradient(90deg, #8d8d92 0 2px, transparent 2px 5px); opacity: 0.55; border-radius: 4px; }
.clip-intro.cut { background: repeating-linear-gradient(135deg, #6b6b70 0 6px, #7a7a80 6px 12px); box-shadow: 0 0 0 2px var(--signal-bright); }
.clip-intro.gone { flex-basis: 0; padding: 0; opacity: 0; }
.track .spot { position: absolute; left: 22%; top: -4px; bottom: -4px; width: 22px; margin-left: -11px; border-radius: 6px; }
.spot.clickable { box-shadow: inset 0 0 0 2px var(--signal-bright); background: rgba(95, 211, 157, 0.18); animation: ping 1.6s ease-out infinite; }
.playhead { position: absolute; top: 22px; bottom: 8px; left: calc(14px + (100% - 28px) * var(--at, 0)); width: 2px; margin-left: -1px; background: #e0452f; transition: left 0.8s var(--ease); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -6px; left: -4px; width: 10px; height: 8px; border-radius: 2px; background: #e0452f; }
@keyframes intro-spin { 0%, 100% { transform: rotate(-4deg) scale(0.96); } 50% { transform: rotate(4deg) scale(1.04); } }

/* HeyMate's pointer, with what it is saying beside it. */
.pointer {
  position: absolute; z-index: 4; left: 18%; top: 62%; width: 0; height: 0;
  transition: left 1s var(--ease), top 1s var(--ease);
}
.pointer svg { width: 26px; height: 26px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
/* The instruction rides with the pointer, the way the app shows it. */
.pointer-tip {
  position: absolute; left: 22px; top: 22px; width: max-content; max-width: min(250px, 60vw);
  display: grid; gap: 4px; padding: 9px 11px; border-radius: 10px;
  font: 600 13px/1.3 var(--text); color: var(--sheet); background: var(--ink);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s;
}
.tip-step { font: 500 10px/1 var(--mono); color: var(--signal-bright); letter-spacing: 0.02em; }
.pointer.flip-x .pointer-tip { left: auto; right: 4px; }
.pointer.flip-y .pointer-tip { top: auto; bottom: 6px; }
.pointer.away { opacity: 0; }
.notch-body { display: none; }
@media (max-width: 640px) {
  .display { aspect-ratio: auto; height: 380px; }
  .app { inset: 48px 3% 0; }
  .display { height: 400px; }
  .viewer { margin-top: 8px; }
  .menubar span:not(:first-child):not(.clock) { display: none; }
  .tool.optional { display: none; }
  .notch.open { height: 142px; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lede { justify-self: end; }
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; } .section-head .lede { justify-self: start; } }

/* How a walkthrough goes: a real sequence, so it reads left to right. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.steps li { list-style: none; padding: 22px 22px 0 0; }
.steps li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
.steps .label { display: block; margin-bottom: 14px; color: var(--signal); }
.steps p { margin-top: 10px; color: var(--graphite); font-size: 16px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
}

/* A real app window around a rendered screen. */
.window {
  border-radius: var(--r-window); overflow: hidden; background: var(--sheet);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 50px 90px -50px rgba(0, 0, 0, 0.45);
}
.window-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f6f6f5; border-bottom: 1px solid #ebeae7; }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dedcd8; }
.window-bar span { margin-left: auto; margin-right: auto; font: 600 12px/1 var(--text); color: #6a6a6e; transform: translateX(-22px); }

/* HeyMate talks, agents work. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink); margin-bottom: 56px; }
.duo article { padding: 26px 32px 0 0; }
.duo article + article { padding-left: 32px; border-left: 1px solid var(--rule); }
.duo .who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.duo .who b { font: 800 26px/1 var(--display); letter-spacing: -0.03em; }
.duo .who .label { margin-left: auto; }
.duo ul { margin: 16px 0 0; padding: 0; list-style: none; }
.duo li { padding: 9px 0; border-top: 1px solid var(--rule); color: var(--graphite); font-size: 16px; }
.duo li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo article + article { padding-left: 0; border-left: 0; margin-top: 28px; }
}

/* Describe an agent: the sentence, then the draft. */
.builder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.builder figure { margin: 0; }
.builder figcaption { margin-top: 12px; }
.builder .first { margin-top: 0; }
.builder .then { margin-top: clamp(0px, 8vw, 110px); }
.arrow-note { display: flex; align-items: center; gap: 10px; margin: 26px 0; font: 500 13px var(--mono); color: var(--signal); }
.arrow-note::before { content: ""; flex: 0 0 40px; height: 1px; background: var(--signal); }
@media (max-width: 820px) { .builder { grid-template-columns: 1fr; } .builder .then { margin-top: 0; } }

/* Integrations, as a directory rather than a logo wall. */
.directory { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.directory section { padding: 22px 26px 0 0; }
.directory section + section { padding-left: 26px; border-left: 1px solid var(--rule); }
.directory h3 { font-size: 18px; }
.directory p { margin-top: 6px; color: var(--graphite); font-size: 15px; }
.directory ul { margin: 18px 0 0; padding: 0; list-style: none; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.tiles li { display: flex; align-items: center; gap: 10px; font-size: 15px; min-width: 0; }
.rule-note { margin-top: 40px; padding: 18px 22px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); display: flex; gap: 14px; align-items: baseline; }
.rule-note .label { color: var(--signal); flex: none; }
@media (max-width: 900px) {
  .directory { grid-template-columns: 1fr; }
  .directory section + section { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; }
}

/* Bring your own AI. */
.brains { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.brains li { display: grid; grid-template-columns: 240px 1fr auto; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.brains b { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--display); letter-spacing: -0.03em; }
.brains span { color: var(--graphite); }
@media (max-width: 720px) { .brains li { grid-template-columns: 1fr; gap: 6px; } .brains .label { justify-self: start; } }

/* Tour video. */
.film { background: var(--housing); color: #f3f3f2; }
.film .lede { color: #a7a7ab; }
.film .section-head .lede { justify-self: end; }
.film-frame { border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--housing-3); }
.film-frame video { width: 100%; }
.film-vertical { display: none; }
@media (max-width: 640px) { .film-landscape { display: none; } .film-vertical { display: block; } }
.film .small { color: #8d8d92; margin-top: 14px; }
.film .small a { color: #c9c9cc; }

/* Privacy. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.facts article { padding: 22px 22px 0 0; }
.facts article + article { padding-left: 22px; border-left: 1px solid var(--rule); }
.facts p { margin-top: 8px; color: var(--graphite); font-size: 15px; }
.facts h3 { font-size: 18px; }
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .facts article:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts article + article { padding-left: 0; border-left: 0; }
}
.links-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 24px; }

/* What's new. */
.releases { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.release { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.release-meta { display: grid; gap: 6px; align-content: start; }
.release-version { font: 800 26px/1 var(--display); letter-spacing: -0.03em; }
.release-date { font: 500 12px/1 var(--mono); color: var(--mist); }
.release ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.release li { color: var(--graphite); }
.release li strong { color: var(--ink); }
@media (max-width: 720px) { .release { grid-template-columns: 1fr; gap: 12px; } }

/* Install. */
.install { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.install-cmds { display: grid; gap: 16px; min-width: 0; }
.install article { min-width: 0; }
.install .recommended { border: 2px solid var(--ink); padding: 28px; gap: 14px; }
.install .recommended h3 { font-size: 28px; }
.install .recommended .cmdline { margin-top: 8px; }
.install .recommended .cmdline code { font-size: 14px; }
.badge { align-self: flex-start; font: 700 12px/1 var(--text); color: var(--ink); background: var(--signal-bright); padding: 6px 10px; border-radius: 999px; }
.install-cmds .cmdline { margin-top: 4px; }

.install article { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.install .label { color: var(--signal); }
.install p { color: var(--graphite); font-size: 15px; }
@media (max-width: 900px) { .install { grid-template-columns: 1fr; } }
.fine { margin-top: 28px; display: grid; gap: 8px; }

/* Finale + footer. */
.finale { padding: clamp(90px, 12vw, 160px) 0; text-align: center; }
.finale h2 { font-size: clamp(56px, 11vw, 150px); }
.finale .hero-actions { justify-content: center; }
.footer { border-top: 1px solid var(--rule); padding: 48px 0 40px; font-size: 14px; color: var(--graphite); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 24px; }
.footer h4 { margin: 0 0 10px; font: 500 12px/1 var(--mono); color: var(--mist); text-transform: lowercase; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.legal { margin-top: 32px; font-size: 12px; color: var(--mist); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Reveal on scroll (main.js adds .in). */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .notch, .notch-body, .pointer, .tool, .clip, .frame, .playhead { transition: none !important; }
  .frame-intro b, .spot.clickable { animation: none; }
}

/* App-style tiles for logos and glyphs. */
.tile {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tile img { width: 20px; height: 20px; }
.tile.glyph svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile.mono { font: 700 11px/1 var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.brains li { grid-template-columns: 44px 220px 1fr; }
.brains .tile { width: 44px; height: 44px; border-radius: 11px; }
.brains .tile img { width: 24px; height: 24px; }
@media (max-width: 720px) { .brains li { grid-template-columns: 44px 1fr; } .brains li > span:not(.tile) { grid-column: 2; } }

/* Example agents. */
.roster { margin: 0 0 40px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.roster li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px; }
.roster img { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.roster b { font: 700 16px/1.2 var(--display); letter-spacing: -0.01em; align-self: end; }
.roster span { font-size: 13px; color: var(--graphite); line-height: 1.35; align-self: start; }
@media (max-width: 960px) { .roster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .roster { grid-template-columns: 1fr; } }

/* Face strip under the builder. */
.faces { margin-top: 48px; }
.faces .label { margin-bottom: 14px; }
.faces-row { display: flex; flex-wrap: wrap; gap: 10px; }
.faces-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--rule); transition: transform 0.2s var(--ease); }
.faces-row img:hover { transform: translateY(-3px) scale(1.06); }

/* Install commands: code on the left, a real Copy button on the right. */
.cmdline {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 12px; background: var(--housing); color: #e9e9e7;
}
.cmdline code { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; font: 500 13px/1.6 var(--mono); padding: 4px 0; }
.cmdline code::-webkit-scrollbar { display: none; }
.cmdline .prompt { color: var(--signal-bright); margin-right: 8px; user-select: none; }
.copy-btn {
  flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--housing-3); color: #f3f3f2; font: 600 13px/1 var(--text);
}
.copy-btn:hover { background: #3a3a3d; }
.copy-btn.copied { background: var(--signal-bright); color: var(--ink); }
.copy-btn.copy-failed { background: #f1a10d; color: var(--ink); }

/* ---------- Interaction ---------- */
/* Hero: the keys you can hold, and the notch listening. */
kbd[data-key] { cursor: pointer; user-select: none; transition: transform 0.08s, border-bottom-width 0.08s, background 0.15s; }
kbd[data-key].down { transform: translateY(2px); border-bottom-width: 1px; background: var(--signal-wash); border-color: var(--signal-bright); }
.try-hint { margin-top: 10px; font-size: 14px; color: var(--mist); max-width: 46ch; }
.try-hint b { color: var(--graphite); font-weight: 600; }
.try-hint.used { color: var(--signal); }
.pointer { transition: left 1s var(--ease), top 1s var(--ease), opacity 0.3s; }
.clickable { cursor: pointer; position: relative; }
.tool.clickable { animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 2px var(--signal-bright); } 70% { box-shadow: 0 0 0 9px rgba(95, 211, 157, 0); } 100% { box-shadow: 0 0 0 2px var(--signal-bright); } }
.clip.clickable:hover { filter: brightness(1.15); }

/* Builder: a sentence becomes an agent. */
.drafter { background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px; padding: 20px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.3); }
.drafter-input { margin-top: 10px; min-height: 56px; padding: 14px 16px; border-radius: 12px; background: var(--paper); font: 500 17px/1.4 var(--text); color: var(--ink); }
.drafter-input .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--signal); opacity: 0; }
.drafter.typing .caret { opacity: 1; }
.drafter.drafting .drafter-input::after { content: "  drafting…"; font: 500 12px var(--mono); color: var(--signal); }
.drafter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.drafter-chips button {
  border: 1px solid var(--rule); background: var(--sheet); color: var(--graphite); border-radius: 999px;
  padding: 8px 12px; font: 500 13px/1.2 var(--text); cursor: pointer; text-align: left;
}
.drafter-chips button:hover { color: var(--ink); border-color: var(--mist); }
.drafter-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drafter-card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.drafter-card .label { margin: 14px 0 8px; }
.drafter-head { display: flex; gap: 12px; align-items: center; }
.drafter-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--rule); }
.drafter-head b { display: block; font: 800 22px/1.1 var(--display); letter-spacing: -0.02em; }
.drafter-head span { font-size: 14px; color: var(--graphite); }
.drafter-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.drafter-card li { padding: 8px 12px; border-radius: 9px; background: var(--paper); font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s var(--ease); }
.drafter-card .asks li { background: var(--signal-wash); color: var(--signal); }
.drafter-card.in li { opacity: 1; transform: none; }
.drafter-card .drafter-head { opacity: 0; transition: opacity 0.35s; }
.drafter-card.in .drafter-head { opacity: 1; }

/* Integrations finder. */
.finder { display: flex; align-items: center; gap: 10px; max-width: 520px; height: 48px; padding: 0 16px; margin-bottom: 28px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); }
.finder:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.finder svg { width: 18px; height: 18px; fill: none; stroke: var(--mist); stroke-width: 2; stroke-linecap: round; flex: none; }
.finder input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px var(--text); color: var(--ink); outline: none; }
.finder-miss { margin: -14px 0 24px; font-size: 15px; color: var(--signal); }
.tiles li { transition: opacity 0.2s; }
.directory.searching .tiles li.dim { opacity: 0.22; }
.directory.searching .tiles li.hit .tile { box-shadow: 0 0 0 2px var(--signal-bright); }
.tiles li:hover .tile { transform: translateY(-2px); }
.tile { transition: transform 0.2s var(--ease), box-shadow 0.2s; }

@media (prefers-reduced-motion: reduce) {
    .drafter-card li, .drafter-card .drafter-head { transition: none; }
}

/* What each permission unlocks. */
.perms { margin-top: 56px; }
.perms > p { margin-top: 8px; color: var(--graphite); max-width: 60ch; }
.perms ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 2px solid var(--ink); }
.perms li { display: grid; grid-template-columns: 36px 170px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.perms b { font: 700 15px/1.2 var(--display); }
.perms .can { font: 500 13px/1.3 var(--mono); color: var(--signal); }
@media (max-width: 900px) { .perms ul { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .perms li { grid-template-columns: 36px 1fr; } .perms .can { grid-column: 2; } }

/* Hero: the one playful word. Letters hop in, the squiggle draws itself,
   then the word gives a small hop every few seconds. */
.hero-copy .kicker, .hero-copy .tagline { grid-column: 1 / -1; margin: 0; }
.hero-copy .kicker { font-size: clamp(20px, 2.4vw, 32px); font-weight: 500; color: var(--mist); letter-spacing: -0.01em; }
.hero-copy .tagline { font-size: clamp(17px, 1.7vw, 22px); color: var(--graphite); }
.fun { position: relative; display: inline-block; color: var(--fun); }
.fun-word { display: inline-flex; }
.fun-word > span { display: inline-block; animation: fun-in 0.7s var(--ease) both, fun-hop 4.2s 1.6s ease-in-out infinite; }
.fun-word > span:nth-child(2) { animation-delay: 0.08s, 1.68s; }
.fun-word > span:nth-child(3) { animation-delay: 0.16s, 1.76s; }
.fun-squiggle { position: absolute; left: -2%; right: -2%; bottom: -0.16em; width: 104%; height: 0.2em; overflow: visible; }
.fun-squiggle path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 140; stroke-dashoffset: 140; animation: fun-draw 0.9s 0.45s var(--ease) forwards, fun-wave 4.2s 1.6s ease-in-out infinite; transform-origin: center; }
.fun:hover .fun-word > span { animation: fun-hop 0.6s ease-in-out; }
.fun:hover .fun-word > span:nth-child(2) { animation-delay: 0.06s; }
.fun:hover .fun-word > span:nth-child(3) { animation-delay: 0.12s; }
@keyframes fun-in { from { opacity: 0; transform: translateY(0.35em) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes fun-hop { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-0.14em) rotate(-4deg); } 94% { transform: translateY(0.02em) rotate(2deg); } }
@keyframes fun-draw { to { stroke-dashoffset: 0; } }
@keyframes fun-wave { 0%, 82%, 100% { transform: none; } 90% { transform: scaleY(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .fun-word > span, .fun:hover .fun-word > span { animation: none; }
  .fun-squiggle path { animation: none; stroke-dashoffset: 0; }
}

/* The notch stays a notch: a quiet "…" while HeyMate is listening or guiding. */
.notch-typing { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 5px; opacity: 0; transition: opacity 0.3s; }
.notch-typing i { width: 5px; height: 5px; border-radius: 50%; background: #f4f4f2; animation: notch-dot 1.2s ease-in-out infinite; }
.notch-typing i:nth-child(2) { animation-delay: 0.15s; }
.notch-typing i:nth-child(3) { animation-delay: 0.3s; }
.display.busy .notch-typing { opacity: 1; }
.is-listening .notch-typing i { background: var(--signal-bright); }
@keyframes notch-dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .notch-typing i { animation: none; opacity: 0.8; } }

/* Milo, the futuristic mate, lives along the bottom of the screen.
   js/mate.js walks him left and right (--x), and drives his steps, hops and
   leans on .mate-step. Wide screens show all of him. Narrower screens would put
   him over the text, so only his head peeks over the edge as he wanders, and he
   stands up when hovered or tapped. Near the footer he ducks away. */
.mate {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: 0; z-index: 15;
  width: 68px; pointer-events: none; transform: translate3d(var(--x, 0px), 0, 0);
}
.mate-btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.mate-btn:focus-visible { outline-offset: -2px; border-radius: 40% 40% 12px 12px; }
.mate-pose { display: block; transform: translateY(58%); transition: transform 0.55s var(--ease); }
.mate-body { display: block; animation: mate-breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.mate.walking .mate-body { animation: none; }
.mate-step { display: grid; transform-origin: 50% 100%; will-change: transform; }
.mate-step img {
  grid-area: 1 / 1; width: 100%; height: auto; opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(14, 14, 15, 0.16));
}
.mate[data-frame="idle"] .mate-idle,
.mate[data-frame="blink"] .mate-blink,
.mate[data-frame="wave"] .mate-wave,
.mate[data-frame="think"] .mate-think,
.mate[data-frame="celebrate"] .mate-celebrate { opacity: 1; }
.mate-bubble {
  position: absolute; right: 70%; bottom: calc(100% - 22px); white-space: nowrap;
  padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper);
  font: 600 13px/1.3 var(--text); opacity: 0; transform: translateY(6px) scale(0.96);
  transform-origin: 100% 100%; transition: opacity 0.2s, transform 0.3s var(--ease); pointer-events: none;
}
.mate.talking .mate-bubble { opacity: 1; transform: none; }
.mate:focus-within .mate-pose, .mate.awake .mate-pose { transform: none; }
@media (hover: hover) { .mate-btn:hover .mate-pose { transform: none; } }
.mate.away .mate-pose { transform: translateY(110%); }
@media (min-width: 1300px) {
  .mate { width: 94px; }
  .mate-pose { transform: none; }
}
@keyframes mate-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) scaleY(1.015) rotate(-0.8deg); } }
@media (prefers-reduced-motion: reduce) {
  .mate-pose, .mate-bubble { transition: none; }
  .mate-body { animation: none; }
}
@media print { .mate { display: none; } }

/* The cast: live Blobatars (js/cast.js + css/vendor/blobatar.css) and Milo and
   Nova portraits whose irises follow the pointer inside fixed eye masks. */
.blob, .portrait { position: relative; display: inline-block; flex: none; line-height: 0; cursor: pointer; }
.blob svg, .blob img { display: block; width: 100%; height: 100%; }
.blob .mo-eyes { --mo-track-travel: 3px; }
.blob.boop { animation: cast-boop 0.5s var(--ease); }
@keyframes cast-boop { 30% { transform: translateY(-6px) scale(1.06, 0.94); } 60% { transform: translateY(0) scale(0.97, 1.03); } }
.portrait { width: var(--cast, 48px); height: calc(var(--cast, 48px) * 1.0909); }
.portrait img, .portrait-eye { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-eye img { will-change: transform; }
.cast-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; flex-basis: 100%; margin-top: 6px; }
.cast-row .blob { width: 44px; height: 44px; }
.cast-row .small { flex-basis: 100%; margin: 2px 0 0; }
.cast-finale { justify-content: center; gap: 14px; margin: 0 0 18px; }
.cast-finale .blob { width: 64px; height: 64px; }
.cast-finale .portrait { --cast: 72px; }
.roster .blob { grid-row: 1 / 3; width: 56px; height: 56px; }
.faces-row .blob { width: 48px; height: 48px; }
.faces-row .portrait { --cast: 44px; }
.faces-row .blob, .faces-row .portrait { transition: transform 0.2s var(--ease); }
.faces-row .blob:hover, .faces-row .portrait:hover { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .blob.boop { animation: none; } }