/* Zero to Agent: "Who we are", the page a prospect gets between the first and second call.
   It reads as the follow-up from the person they met: the opening on zerotoagent.com's dark stage
   (the faint diamond lattice, the welcome page's yellow circuit, their contact's portrait and
   note, the numbers), then five chapters, each on its own band so no two neighbours look alike
   and each opening with the same heading: results, who you'd work with, where we'd start, what
   you'd get (a sheet of paper on a dark desk), and questions. Yellow lives only on dark.
   Portraits are always shown whole, never cropped tight. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --graphite: #0b0b0d;
  --graphite-2: #131317;
  --graphite-3: #1b1b21;
  --cloud: #f6f7f8;
  --cloud-80: rgb(246 247 248 / 0.8);
  --cloud-64: rgb(246 247 248 / 0.66);
  --cloud-48: rgb(246 247 248 / 0.5);
  --cloud-16: rgb(246 247 248 / 0.16);
  --cloud-08: rgb(246 247 248 / 0.08);
  --yellow: #edf20a;
  --yellow-soft: rgb(237 242 10 / 0.16);
  /* The Chief's own colours (Chief Luma's ring and light), from the Chief brand. */
  --lavender: #7768c8;
  --lavender-soft: #afa2ea;
  --lavender-glow: rgb(119 104 200 / 0.5);
  --luma-cream: #f4e7c8;
  --paper: #faf9f5;
  --paper-2: #efece3;
  --mark: var(--ink);
  --card: #fffefd;
  --ink: #141310;
  --ink-80: rgb(20 19 16 / 0.8);
  --ink-62: rgb(20 19 16 / 0.64);
  --ink-14: rgb(20 19 16 / 0.14);
  --ink-08: rgb(20 19 16 / 0.08);
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 48px);
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --radius: 18px;
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 0.5 71.5 36 36 71.5 0.5 36Z' fill='none' stroke='%23F6F7F8' stroke-opacity='0.07'/%3E%3C/svg%3E");
  color-scheme: light dark;
}
/* Night reading: one deep ink ground, the same as the stage. Bands are told apart by the lattice,
   a soft light from above and a hairline, never by a flat grey (Matt, Oct 7: grey "looks cheap"). */
@media (prefers-color-scheme: dark) {
  .paper {
    --paper: #0b0b0d;
    --paper-2: #0f0f13;
    --card: #16161b;
    --mark: var(--yellow);
    --ink: #f6f7f8;
    --ink-80: rgb(246 247 248 / 0.8);
    --ink-62: rgb(246 247 248 / 0.66);
    --ink-14: rgb(246 247 248 / 0.14);
    --ink-08: rgb(246 247 248 / 0.08);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--graphite);
  color: var(--cloud);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--graphite); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.paper :focus-visible { outline-color: var(--ink); }
.paper .rec :focus-visible, .paper .run :focus-visible { outline-color: var(--yellow); }

.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--graphite);
  font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font: 600 0.9375rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--yellow { background: var(--yellow); color: var(--graphite); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::after { content: "\2197"; }
.btn--line { background: none; color: var(--cloud); box-shadow: inset 0 0 0 1.5px var(--cloud-48); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--cloud); }

.number dd, .note-sign span, .sign-role, .leader-role, .crew-role, .panel-title, .join, .watch, .step-title { text-wrap: balance; }
.qa p, .next-lead, .with-line, .step-do, .step-get, .ticks li { text-wrap: pretty; }

/* Headings: every section opens with a real h2 and one plain sentence (.ch-head); a group inside
   a section gets a small display heading (.mini-label). Notes and firm lines are plain small text. */
.mini-label { color: var(--ink); font: 650 1.25rem/1.25 var(--display); letter-spacing: -0.015em; }

/* --- The stage ------------------------------------------------------------------------------------ */

.stage { position: relative; isolation: isolate; overflow-x: clip; background: var(--graphite); color: var(--cloud); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lattice) right top / 72px 72px;
  -webkit-mask-image: radial-gradient(110% 70% at 80% 0%, #000 15%, transparent 70%);
  mask-image: radial-gradient(110% 70% at 80% 0%, #000 15%, transparent 70%);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 10px; font: 600 0.9375rem/1 var(--display); letter-spacing: -0.01em; }
.brand-mark { width: 24px; height: 24px; flex: none; }
/* Who we are a partner of, said once, quietly, at the top. */
.partner { color: var(--cloud-64); font: 600 0.8125rem/1.4 var(--body); }
.partner::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 0.1em; }

/* The welcome page's circuit, in the top corner. */
.circuit {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: min(432px, 60vw);
  height: auto;
  aspect-ratio: 432 / 288;
  pointer-events: none;
}
.circuit-traces path { fill: none; stroke: var(--yellow); stroke-opacity: 0.3; stroke-width: 1.25; stroke-linejoin: round; }
.circuit-nodes path { fill: var(--graphite); stroke: var(--yellow); stroke-width: 1.25; }
.circuit-nodes circle { fill: var(--yellow); }
.circuit-pulse { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 28 400; stroke-dashoffset: 28; opacity: 0; }

.bar-top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-height: 48px;
  padding-top: clamp(20px, 3vw, 32px);
}
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--cloud-16);
  color: var(--cloud-80);
  font: 600 0.8125rem/1.3 var(--body);
}
.stamp::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cloud-48); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(48px, 8vw, 112px);
}
.hi { margin-bottom: 12px; color: var(--cloud-64); font: 500 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.3 var(--display); }
#headline {
  font: 650 clamp(2.75rem, 1.2rem + 5.6vw, 5.75rem)/0.98 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
#headline .line { display: inline-block; max-width: 100%; }
#headline { overflow-wrap: anywhere; }
#who { color: var(--yellow); }
.tldr {
  max-width: 38rem;
  margin-top: 28px;
  color: var(--cloud-80);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
/* The call and the client video, side by side under the opening words: the play button is the
   one filled yellow thing on the first screen. */
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 24px; }
.call-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--cloud-08);
  box-shadow: inset 0 0 0 1px var(--cloud-16);
  font-size: 0.9375rem;
  font-weight: 600;
}
.call-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }

/* Their contact: a whole portrait and a short note, the person they met on the first call. */
.note {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 22px;
  align-items: end;
  padding: 18px;
  border-radius: 24px;
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--cloud-16);
}
.note-photo { overflow: hidden; border-radius: 14px; background: var(--graphite-3); outline: 1px solid var(--cloud-16); outline-offset: -1px; }
.note-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.note-initials { display: grid; place-items: center; aspect-ratio: 4 / 5; color: var(--cloud); font: 650 2.5rem/1 var(--display); }
.note-body { display: grid; gap: 10px; padding-bottom: 4px; }
.note-label { color: var(--cloud-64); font: 600 0.8125rem/1.45 var(--body); }
.note-text { color: var(--cloud); font: 500 1.0625rem/1.45 var(--display); letter-spacing: -0.01em; text-wrap: pretty; }
.note-sign { display: grid; gap: 2px; font-size: 0.875rem; line-height: 1.35; }
.note-sign strong { font: 650 1rem/1.25 var(--display); }
.note-sign span { color: var(--cloud-64); }
.note-email { justify-self: start; max-width: 100%; color: var(--cloud-80); font-size: 0.875rem; font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }

.numbers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 32px;
}
.numbers::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cloud-16);
  transform-origin: left;
}
.number dt {
  color: var(--cloud);
  font: 650 clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem)/1 var(--display);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.number dd { max-width: 15rem; margin-top: 10px; color: var(--cloud-64); font-size: 0.9375rem; line-height: 1.45; }

.hero > .wrap { padding-bottom: clamp(14px, 1.8vw, 22px); }
/* A one-line pointer to the client video, under the numbers. */
.watch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--cloud-08); box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud); font: 600 0.9375rem/1.2 var(--body); text-decoration: none; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease-out); }
.watch:hover { box-shadow: inset 0 0 0 1px var(--cloud-48); transform: translateY(-1px); }
/* Clients by name, in one quiet row under the numbers. Typed for now; logos replace them. */
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cloud-16); }
.clients-label { color: var(--cloud-48); font: 600 0.8125rem/1.4 var(--body); }
.clients-names { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.clients-names span { color: var(--cloud-80); font: 600 1.0625rem/1.3 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.clients-names { align-items: center; gap: 14px 38px; }
/* Each logo's height is set by eye so the row looks even (a wide wordmark sits lower than a
   stacked one); the page's general image rule would otherwise show them at full size. */
.client-logo { width: auto; height: 40px; opacity: 0.86; }
.client-logo[height="40"] { height: 45px; }
.client-logo[height="20"] { height: 23px; }
.client-logo[height="44"] { height: 50px; }
@media (max-width: 559px) { .clients-names { gap: 16px 28px; } }
.hero-actions { margin-top: 24px; }
/* A way into each part, for a reader who wants one thing. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 0.875rem; }
.jump a { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud-80); font-weight: 600; text-decoration: none; transition: color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
.jump a:hover { background: var(--cloud-08); box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.55); color: var(--cloud); }
/* Their own words in place of the general line. */
.tldr.is-said { color: var(--cloud-64); overflow-wrap: anywhere; }
.tldr.is-said q { color: var(--cloud); font-weight: 500; quotes: "\201C" "\201D"; }
.watch-play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--graphite); }
.watch-play svg { width: 12px; height: 12px; margin-left: 2px; }

@media (max-width: 999px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .note { max-width: 34rem; }
}
@media (max-width: 799px) {
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 559px) {
  .note { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
  .note-text { font-size: 1rem; }
}
@media (min-width: 1000px) and (max-height: 960px) {
  .hero-grid { padding-top: clamp(32px, 4vh, 56px); }
  #headline { font-size: clamp(2.75rem, 0.8rem + 4.4vw, 4.75rem); }
  .numbers { margin-top: clamp(32px, 4vh, 48px); padding-top: 28px; }
}
@media (max-width: 559px) {
  .hero-grid { padding-top: 28px; gap: 24px; }
  .note { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "photo label" "photo sign" "text text" "email email"; column-gap: 14px; row-gap: 8px; align-items: center; }
  .note-body { display: contents; }
  .note-photo { grid-area: photo; width: 64px; border-radius: 50%; }
  .note-photo img, .note-initials { aspect-ratio: 1 / 1; object-position: 50% 30%; }
  .note-initials { font-size: 1.25rem; }
  .note-label { grid-area: label; align-self: end; }
  .note-sign { grid-area: sign; align-self: start; }
  .note-text { grid-area: text; margin-top: 6px; }
  .note-email { grid-area: email; }
  .numbers { margin-top: 32px; padding-top: 24px; }
}

/* --- The chapters ----------------------------------------------------------------------------------- */

.paper { background: var(--paper); color: var(--ink); }
.ch-grid { padding-block: clamp(30px, 3.6vw, 52px); }
#ch-proof .ch-grid { padding-top: clamp(22px, 2.6vw, 36px); }
/* One band per chapter, and a change of band is the only divider: results on paper, the team on
   the second paper tone, the plan back on paper, the scope on a dark desk (its paper sheet is the
   contrast), and questions on the second tone. */
#ch-team, #ch-faq { background: var(--paper-2); }
@media (prefers-color-scheme: dark) {
  #ch-team { background: radial-gradient(90% 60% at 50% 0%, rgb(246 247 248 / 0.06), transparent 70%), var(--lattice), var(--paper-2); box-shadow: inset 0 1px 0 var(--ink-14), inset 0 -1px 0 var(--ink-14); }
  #ch-faq { background: radial-gradient(70% 90% at 50% 100%, rgb(246 247 248 / 0.045), transparent 70%), var(--paper); box-shadow: inset 0 1px 0 var(--ink-14); }
}
#ch-scope { background: var(--graphite) var(--lattice); --mark: var(--yellow); }
#ch-scope .ch-head h2 { color: var(--cloud); }
#ch-scope .ch-intro { color: var(--cloud-64); }
#ch-scope :focus-visible { outline-color: var(--yellow); }
.ch-head { display: grid; gap: 10px; max-width: 46rem; margin-bottom: clamp(20px, 2.4vw, 32px); }
/* The same opener everywhere: the brand's diamond over the heading. */
.ch-head::before { content: ""; width: 10px; height: 10px; margin: 0 0 10px 3px; border: 1.5px solid var(--mark); transform: rotate(45deg); }
.ch-head h2 {
  font: 650 clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)/1.04 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ch-intro { max-width: 40rem; color: var(--ink-80); font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.stage .ch-head h2 { color: var(--cloud); }
.stage .ch-intro { color: var(--cloud-64); }
.ch-body { display: grid; gap: clamp(28px, 3.5vw, 44px); align-content: start; min-width: 0; }

/* What we build, the whole of it: what we are in two short lines and the four things our team
   does; then two lanes, each under its own heading (.lane). The AI team: "Your Chief" and a row
   of people who each have one (.own), the system running (.run), the helpers by department
   (.depts), the Company Brain and the roadmap (.ideas). Custom software (.soft). Then the use
   cases as examples (.shift). On a lead's page the first build comes first and the rest follows
   it under its own heading (.whole-title). The words on the page's own ground follow the theme;
   every panel in the chapter is dark in both themes, like the scene, so the faces and the
   yellow accents are always on dark. Few words: the pictures carry it (Matt, Oct 8: "there's
   too much text here"). */
#ch-plan .ch-head { max-width: 62rem; }
#ch-plan .ch-intro { max-width: 62rem; }
/* The line under the bold sentence is its own block, so it wraps evenly and never leaves one word alone. */
.said { display: block; text-wrap: balance; }
/* The first sentence says it; the one under it says it is a service. */
.ch-intro strong, .whole-text strong { display: block; margin-bottom: 8px; color: var(--ink); font: 650 clamp(1.4375rem, 1.2rem + 1.1vw, 2rem)/1.16 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.whole { display: grid; gap: clamp(16px, 2vw, 22px); }
.whole:has(> .whole-title:not([hidden])) { padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--ink-14); }
.whole-title { font: 650 clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem)/1.06 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.whole-text { max-width: 46rem; margin-top: -6px; color: var(--ink-80); font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
/* The service: four things our team does, on one line that runs through a diamond at each. */
.service { --gap: clamp(16px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.service-step { position: relative; padding-top: 24px; }
.service-step::before { content: ""; position: absolute; top: 5px; left: 0; right: calc(-1 * var(--gap)); height: 1px; background: var(--ink-14); transform-origin: left; }
.service-step:last-child::before { right: 0; }
.service-step::after { content: ""; position: absolute; top: 0; left: 2px; width: 10px; height: 10px; border: 1.5px solid var(--mark); background: var(--paper); transform: rotate(45deg); }
.service-step b { display: block; font: 650 1.0625rem/1.25 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
/* A phone: two and two. */
@media (max-width: 759px) {
  .service { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .service-step:nth-child(2n)::before { right: 0; }
}
/* A small heading and one line over a group in this chapter. */
.block-head, .shift-head { display: grid; gap: 6px; max-width: 44rem; }
.block-lead { color: var(--ink-80); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }

/* Where we'd start: what they said (today) beside what we'd build (with us), joined by an arrow,
   so it reads as one thought: you said this, so we'd start here. */
.shift { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr); grid-template-areas: "heard arrow rec" "switch switch switch"; align-items: stretch; gap: clamp(16px, 2vw, 28px); }
.shift > .heard { grid-area: heard; }
.shift > .shift-arrow { grid-area: arrow; }
.shift > .rec { grid-area: rec; }
.shift > .switch { grid-area: switch; }
.shift > .shift-head { grid-area: head; }
.shift-arrow { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper-2); }
.shift-arrow svg { width: 20px; height: 20px; }
/* With no topic there are no words of theirs: the card on the left, every use case as a list on
   the right. */
.shift:has(> .heard[hidden]) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "head head" "rec switch"; gap: clamp(18px, 2.2vw, 26px) clamp(20px, 3vw, 44px); }
.shift:has(> .heard[hidden]) .shift-arrow { display: none; }
/* Among the chapter's other cards the example card takes their hairline, so at night it has an edge. */
.shift:has(> .heard[hidden]) .rec { box-shadow: inset 0 0 0 1px var(--cloud-16); }
.shift:has(> .heard[hidden]) .switch { align-content: start; margin-top: 0; }
.shift:has(> .heard[hidden]) .switch-row { display: grid; gap: 10px; }
.shift:has(> .heard[hidden]) .switch-btn { justify-content: flex-start; width: 100%; padding: 14px 18px; border-radius: 14px; font-size: 1rem; text-align: left; }
@media (max-width: 999px) {
  .shift, .shift:has(> .heard[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heard" "arrow" "rec" "switch"; gap: 14px; }
  .shift:has(> .heard[hidden]) { grid-template-areas: "head" "rec" "switch"; }
  .shift-arrow { justify-self: center; transform: rotate(90deg); }
}

/* Today: their own words, as notes from the call. Sized to be read, not shouted. */
.heard { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.8vw, 36px); border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--ink-14); }
/* A short note sits beside the middle of the recommendation, not stretched into an empty box. */
.heard { align-self: center; }
.heard .mini-label { color: var(--ink-62); font: 600 0.9375rem/1.3 var(--body); letter-spacing: 0; }
.heard-list { display: grid; gap: 20px; }
.heard-list:empty { display: none; }
.heard-list li {
  padding-left: 18px;
  border-left: 3px solid var(--ink-14);
  font: 600 clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem)/1.3 var(--display);
  letter-spacing: -0.02em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
/* The one they said first leads; a phrase that starts mid-sentence still opens with a capital. */
.heard-list li:first-child { border-left-color: var(--ink); font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5625rem); line-height: 1.24; }
.heard-list li::first-letter { text-transform: uppercase; }
.heard-topics { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ink-14); color: var(--ink-80); font-size: 1rem; }
.heard-list:empty + .heard-topics { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.125rem; line-height: 1.5; }
.heard-topics strong { font-weight: 650; }

/* With us: the recommendation, a dark card as tall as their words beside it, its three steps down
   the side, lighting in turn. */
.rec {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: 22px;
  background: var(--graphite);
  color: var(--cloud);
}
.panel:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
.rec-tag { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--graphite); font: 650 0.8125rem/1.4 var(--body); }
.panel-title { margin-top: 16px; font: 650 clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--display); letter-spacing: -0.03em; }
/* Watch it run: one small scene per use case, drawn like the real job, each told in the same four
   beats: waiting, the job arrives, the work is done, it's finished (beats 1 to 3 light the three
   steps under it). The few words in a scene are part of the drawing (the reel is hidden from
   screen readers; the steps are the text), so a scene is sized in px and em and grows with the
   reel (whose height follows 14vw), never with the page's text. The HTML ships the finished frame
   (data-beat="3"), so without motion or script each scene simply shows a job done. In the markup,
   data-in="2" comes in at beat 2 and data-out="3" leaves at beat 3; the beats themselves are in
   the motion block at the end of this file. */
.reel { position: relative; height: clamp(168px, 14vw, 208px); margin-block: 22px 14px; overflow: hidden; border-radius: 16px; background: var(--graphite-2) var(--lattice) center / 72px; box-shadow: inset 0 0 0 1px var(--cloud-08); }
.reel-stage { position: absolute; inset: 12px 0 20px; display: grid; align-content: center; gap: 0.65em; width: min(100% - 24px, 30em); margin-inline: auto; color: var(--cloud); font: 600 clamp(11px, 1.12vw - 2.6px, 13px)/1.25 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel-stage b { font-weight: 650; }
.reel-card { position: relative; border-radius: 0.9em; background: var(--graphite-3); box-shadow: inset 0 0 0 1px var(--cloud-16), 0 18px 36px -22px #000; }
.reel-ico { flex: none; width: 1.3em; height: 1.3em; color: var(--cloud-48); }
.reel-bar { display: block; height: 0.62em; border-radius: 0.31em; background: var(--cloud-16); }
.reel-bar--s { width: 46%; }
.reel-bar--m { width: 64%; }
.reel-bar--l { width: 80%; }
.reel-bar--xl { width: 94%; }
.reel-swap { display: grid; }
.reel-swap > * { grid-area: 1 / 1; }
.reel-head, .reel-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.9em; }
.reel-cap, .reel-head > span, .reel-line > span { color: var(--cloud-64); }
.reel [data-out] { opacity: 0; }
/* Finished: a tick and a word or two, on the edge of the thing that's done. */
.reel-done { --from: scale(0.4); position: absolute; right: 0.9em; bottom: -1em; display: flex; align-items: center; gap: 0.6em; padding: 0.34em 0.9em 0.34em 0.8em; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 0 3px var(--graphite-2); color: var(--graphite); }
.reel-done::before, .reel-note::before { content: ""; width: 0.38em; height: 0.72em; margin-top: -0.22em; border: solid currentColor; border-width: 0 0.16em 0.16em 0; transform: rotate(45deg); }
/* Quotes: a quote sheet. */
.reel-sheet { display: grid; gap: 0.55em; justify-self: center; width: min(100%, 22em); padding: 0.9em 1em 1.15em; }
.reel-sheet .reel-head { padding-bottom: 0.55em; border-bottom: 1px solid var(--cloud-16); }
.reel-sheet .reel-swap, .reel-mail .reel-swap { justify-items: end; }
.reel-doc-name { min-height: 1.2em; overflow: hidden; color: var(--cloud); font: 650 1em/1.2 var(--display); text-overflow: ellipsis; }
.reel-doc-name:empty { width: 60%; height: 0.7em; min-height: 0; border-radius: 0.35em; background: var(--cloud-48); }
.reel-total { padding-top: 0.55em; border-top: 1px solid var(--cloud-16); }
.reel-scan { position: absolute; left: 0.7em; right: 0.7em; top: 2.9em; height: 2px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 14px rgb(237 242 10 / 0.7); opacity: 0; }
/* Email: three emails in a list, each with its group; the one that matters stands out. */
.reel--inbox .reel-stage, .reel--sales .reel-stage { gap: 0.5em; }
.reel-mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8em; min-height: 3.1em; padding: 0.4em 0.8em 0.4em 0.9em; }
.reel-mail:not(.reel-mail--lead) { opacity: 0.55; }
.reel-mail--lead { box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.5), 0 18px 36px -22px #000; }
.reel-mail--lead .reel-ico { color: var(--yellow); }
.reel-lines { display: grid; gap: 0.42em; }
.reel-lines .reel-bar:first-child { background: var(--cloud-48); }
.reel-tag, .reel-src { padding: 0.28em 0.8em; border-radius: 999px; background: var(--cloud-08); box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud-80); }
.reel-mail .reel-done { position: static; box-shadow: none; }
/* The phone: the call, then the order it took. */
.reel-call { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.8em; padding: 0.4em 1.1em 0.4em 0.4em; border-radius: 999px; }
.reel-phone { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--yellow); color: var(--graphite); }
.reel-phone .reel-ico { width: 1.25em; height: 1.25em; color: inherit; }
.reel-wave { display: flex; align-items: center; justify-content: flex-end; gap: 0.25em; height: 1.7em; overflow: hidden; }
.reel-wave i { --h: 0.5; flex: none; width: 0.25em; height: 100%; border-radius: 999px; background: var(--yellow); transform: scaleY(var(--h)); }
.reel-wave i:nth-child(3n + 1) { --h: 0.3; }
.reel-wave i:nth-child(4n + 2) { --h: 0.85; }
.reel-wave i:nth-child(5n) { --h: 1; }
.reel-ticket, .reel-brief { display: grid; gap: 0.55em; padding: 0.9em 1em 1.3em; }
.reel-ticket .reel-line { grid-template-columns: 1.7em minmax(0, 1fr); gap: 0.5em; }
.reel-note { display: flex; align-items: center; gap: 0.6em; }
.reel-note::before { color: var(--yellow); }
/* Daily reports: the tools the work is spread across, and the one brief it's pulled into. */
.reel--ops .reel-stage { grid-template-columns: auto minmax(0, 20em); align-items: center; justify-content: center; gap: 1.9em; }
.reel-tools { display: grid; gap: 0.5em; }
.reel-tool { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 0.8em; }
.reel-tool::after { content: ""; position: absolute; top: calc(50% - 1px); left: 100%; width: 1.9em; height: 1.5px; background: rgb(237 242 10 / 0.4); transform-origin: left; }
/* Sales follow-up: their message, and our reply under it. */
.reel-msg { display: grid; gap: 0.45em; width: 62%; padding: 0.8em 0.9em; border-radius: 0.9em 0.9em 0.9em 0.25em; }
.reel-reply { display: grid; grid-template-columns: minmax(0, 1fr) 68%; align-items: end; gap: 0.8em; text-align: right; }
.reel-msg--ours { width: auto; padding-bottom: 1.3em; border-radius: 0.9em 0.9em 0.25em 0.9em; background: linear-gradient(var(--cloud-08), var(--cloud-08)), var(--graphite-3); }
.reel-msg--ours .reel-bar { --from: scaleX(0); background: var(--cloud-48); transform-origin: left; }
/* Your team's assistant: a question, and the answer with where it came from. */
.reel-ask { display: flex; align-items: center; gap: 0.7em; padding: 0.65em 1.1em 0.65em 0.8em; border-radius: 999px; }
.reel-answer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.8em; padding: 0.9em 1em 1.3em; }
.reel-mark { width: 0.7em; height: 0.7em; margin: 0.3em 0.15em 0 0.2em; background: var(--yellow); transform: rotate(45deg); }
.reel-block { display: grid; justify-items: start; gap: 0.6em; }
.reel-src { display: flex; align-items: center; gap: 0.45em; max-width: 100%; overflow: hidden; padding-left: 0.55em; border-radius: 0.6em; }
.reel-replay { align-self: flex-end; min-height: 32px; margin: -6px 0 2px; padding: 4px 2px; border: 0; background: none; color: var(--cloud-64); font: 600 0.8125rem/1.2 var(--body); text-decoration: underline; text-decoration-color: var(--cloud-16); text-underline-offset: 4px; cursor: pointer; }
.reel-replay:hover { color: var(--cloud); text-decoration-color: var(--yellow); }

/* The three steps: across under the reel on a wide card, down the side on a narrow one. A step
   is lit once the reel has reached it. */
.flow { display: grid; gap: 14px; margin-block: 10px 20px; }
.flow-step { display: grid; grid-template-columns: 19px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; }
.flow-node { width: 19px; height: 19px; margin-top: 3px; border: 1.5px solid var(--yellow); background: var(--graphite); transform: rotate(45deg) scale(0.74); transition: background-color 360ms var(--ease); }
.flow-text { color: var(--cloud-64); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; transition: color 360ms var(--ease); }
#rec:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .flow-step:nth-child(1) .flow-node,
#rec:is([data-beat="2"], [data-beat="3"]) .flow-step:nth-child(2) .flow-node,
#rec[data-beat="3"] .flow-step:nth-child(3) .flow-node { background: var(--yellow); }
#rec:is([data-beat="1"], [data-beat="2"], [data-beat="3"]) .flow-step:nth-child(1) .flow-text,
#rec:is([data-beat="2"], [data-beat="3"]) .flow-step:nth-child(2) .flow-text,
#rec[data-beat="3"] .flow-step:nth-child(3) .flow-text { color: var(--cloud); }
@media (min-width: 1000px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .flow-step { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .flow-step:nth-child(2) { justify-items: center; text-align: center; }
  .flow-step:nth-child(3) { justify-items: end; text-align: right; }
  .flow-node { margin-top: 0; }
  .flow-text { font-size: 1rem; }
}
.panel-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cloud-16); font-size: 0.875rem; line-height: 1.5; }
.panel-built { color: var(--cloud-64); }
/* A live example for anyone who wants one. Small on purpose: the demo is best run with them on the call. */
.panel-demo { color: var(--cloud); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; white-space: nowrap; }
.panel-demo::after { content: " \2197"; }
.panel-demo:hover { text-decoration-thickness: 2px; }

/* The other use cases: a button each under the card. Press one and the card shows that job. */
.switch { display: grid; gap: 10px; margin-top: 0; }
.switch-label { color: var(--ink-62); font: 600 0.9375rem/1.3 var(--body); }
.switch-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.switch-btn { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink-80); font: 600 0.9375rem/1.25 var(--body); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.switch-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-1px); }
.switch-btn[aria-pressed="true"] { background: var(--graphite); box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud); }
.switch-btn[aria-pressed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--yellow); vertical-align: 0.08em; }

/* The faces on the AI team (Matt, Oct 9: "The Chief isn't supposed to look like that"). The Chief
   is Chief Luma, the brand's approved presence icon: a warm cream face in a thin lavender ring,
   with a soft lavender light behind it at its larger sizes. Each helper is a face from the
   approved sub-agent avatar library, and never has the ring. The drawings come from media/chief/
   exactly as the brand made them (luma() and pal() in the generator), so nothing here styles
   what is inside a face: only its ring, its light and how the whole face sits or lifts. The
   page's own yellow stays the colour of work (a job on its way, a tick); lavender is the Chief's.
   A face is always a whole number of px across: at a size between two, the browser shaves the
   edge off the circle it is cut to. */
.face { display: block; width: 100%; height: 100%; }
.luma { --ring: 1.5px; --gap: 3px; --glow: 0; position: relative; isolation: isolate; display: block; width: 100%; height: 100%; }
.luma-core { display: block; width: 100%; height: 100%; }
.luma-ring, .luma-pulse { position: absolute; inset: calc(-1 * (var(--gap) + var(--ring))); border: var(--ring) solid var(--lavender); border-radius: 50%; pointer-events: none; }
/* The ring that goes out from Luma when it listens. Only the motion shows it. */
.luma-pulse { border-color: var(--lavender-soft); opacity: 0; }
.luma-glow { position: absolute; inset: -62%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--lavender-glow), rgb(119 104 200 / 0.16) 56%, transparent); opacity: var(--glow); pointer-events: none; }
.pal { position: relative; display: block; width: 100%; height: 100%; }
/* The light that runs round a helper while it works. Only the motion shows it. */
.pal-spin { position: absolute; inset: -3px; border: 1.5px solid transparent; border-top-color: var(--yellow); border-right-color: rgb(237 242 10 / 0.35); border-radius: 50%; opacity: 0; pointer-events: none; }

/* The chapter's two lanes, each under its own heading on the page's ground: the AI team, and
   custom software. A diamond, the name, and a hairline out to the edge. */
.lane { display: flex; align-items: center; gap: 14px; margin-top: clamp(4px, 1.4vw, 20px); margin-bottom: clamp(-18px, -1.2vw, -8px); font: 650 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.1 var(--display); letter-spacing: -0.028em; }
.lane::before { content: ""; flex: none; width: 11px; height: 11px; border: 1.5px solid var(--mark); transform: rotate(45deg); }
.lane::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--ink-14), transparent); }
/* The examples after the lanes open the same way, with one line under the heading. */
.shift-head { max-width: none; gap: 12px; }
.shift-head .lane { margin: clamp(4px, 1.4vw, 20px) 0 0; }
.shift-head .block-lead { max-width: 44rem; }

/* Your Chief: one line that says what it is, and a short row of people on a team, each beside a
   Chief of their own (Matt, Oct 9: "like Chief of Staff ... Each staff member has their own").
   Dark in both themes, like every panel in the chapter, with the Chief's lavender in one corner. */
.own {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(70% 130% at 0% 0%, rgb(119 104 200 / 0.2), transparent 70%) padding-box,
    linear-gradient(var(--graphite-2), var(--graphite-2)) padding-box,
    linear-gradient(150deg, rgb(175 162 234 / 0.55), rgb(246 247 248 / 0.07) 40%) border-box;
  color: var(--cloud);
}
.own-title { display: flex; align-items: center; gap: 20px; font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -0.025em; }
.own-face { flex: none; width: 56px; height: 56px; margin: 6px; }
.own-face .luma { --ring: 2px; --gap: 4px; --glow: 1; }
.own-line { max-width: 24rem; margin-top: 14px; color: var(--cloud); font: 500 clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem)/1.4 var(--body); text-wrap: balance; }
.own-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px); }
.own-pair { display: grid; justify-items: center; align-content: start; gap: 12px; min-width: 0; padding: 20px 6px 16px; border-radius: 16px; background: rgb(246 247 248 / 0.035); box-shadow: inset 0 0 0 1px var(--cloud-08); text-align: center; }
.own-duo { --size: 46px; display: flex; align-items: center; }
.own-person { display: grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%; background: var(--graphite-3); box-shadow: inset 0 0 0 1px var(--cloud-16); }
.own-person .run-ico { width: 46%; height: 46%; color: var(--cloud-80); }
/* What runs between a person and their Chief: three dots, like a text on its way. */
.own-link { --go: 20px; position: relative; flex: none; width: 26px; height: 6px; margin-inline: 4px 8px; background: radial-gradient(circle, var(--cloud-48) 1.5px, transparent 2px) center / 8px 6px repeat-x; }
.own-link::after { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--lavender-soft); box-shadow: 0 0 8px var(--lavender); opacity: 0; }
.own-chief { flex: none; width: var(--size); height: var(--size); }
.own-role { font: 600 0.9375rem/1.25 var(--body); text-wrap: balance; }
@media (max-width: 999px) {
  .own { grid-template-columns: minmax(0, 1fr); }
  .own-line { max-width: none; }
}
@media (max-width: 599px) {
  .own-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .own-face { width: 48px; height: 48px; }
  .own-title { gap: 16px; }
}
@media (max-width: 1199px) { .own-duo { --size: 40px; } }
@media (max-width: 359px) { .own-duo { --size: 36px; } .own-link { --go: 12px; width: 18px; margin-inline: 3px 7px; } .own-role { font-size: 0.875rem; } }

/* How it runs once it's live: one scene, the centrepiece of "What we build", dark in both themes.
   Three stops read left to right (top to bottom on a phone), each with one line over it and one
   under it in real words: the owner's text to the Chief (who can also be called, and each person
   has their own), the Chief with a line out to each helper and the Company Brain they read from,
   and the Work Hub where each finished job lands as a ticked row (with the software it ties in,
   and a login for each person). Yellow is only the small things: a tick, the job on its way,
   "Your first helper". The Chief is Luma in its lavender ring, and its light is lavender. The three drawings are hidden from screen readers and sized
   in px and em, so they never grow with the page's text. The HTML ships the finished frame;
   proof.js draws the lines and plays it once it is on screen (the motion is at the end of this
   file). */
.run {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  padding: clamp(18px, 3vw, 40px);
  border: 1px solid transparent;
  border-radius: 28px;
  /* A light from above, and an edge that catches it: bright at the top left, a trace of yellow
     at the bottom right. */
  background:
    radial-gradient(62% 48% at 50% 0%, rgb(246 247 248 / 0.075), transparent 72%) padding-box,
    linear-gradient(var(--graphite-2), var(--graphite-2)) padding-box,
    linear-gradient(150deg, rgb(246 247 248 / 0.38), rgb(246 247 248 / 0.08) 34%, rgb(246 247 248 / 0.08) 66%, rgb(237 242 10 / 0.34)) border-box;
  box-shadow: 0 40px 80px -48px rgb(0 0 0 / 0.7);
  color: var(--cloud);
}
/* The lattice, only around the Chief and its helpers, fading out to the edges. */
.run::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lattice) center / 72px 72px; -webkit-mask-image: radial-gradient(52% 64% at 50% 52%, #000 10%, transparent 76%); mask-image: radial-gradient(52% 64% at 50% 52%, #000 10%, transparent 76%); pointer-events: none; }
.run-title { font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -0.025em; text-wrap: balance; }

.run-stage { --gap: 34px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); color: var(--cloud); font: 600 13px/1.35 var(--body); font-variant-numeric: tabular-nums; }
.run-stage b { font-weight: 650; }
/* Stacked, each stop is one column in the middle, its words and its drawing on the same edge. */
.run-stop { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; justify-self: center; width: min(100%, 30em); min-width: 0; }
/* Each stop is numbered, so the still frame reads in order. */
.run-cap { display: flex; align-items: center; gap: 10px; color: var(--cloud); font: 600 0.9375rem/1.3 var(--body); }
.run-cap i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cloud-48); font: 650 0.8125rem/1 var(--display); }
/* Under each stop: the thing they get, and one line. */
.run-note { display: flex; align-items: center; gap: 12px; color: var(--cloud-64); font: 400 0.9375rem/1.4 var(--body); text-wrap: pretty; }
.run-note b { display: block; color: var(--cloud); font: 650 1.0625rem/1.3 var(--display); letter-spacing: -0.015em; }
/* One for each person on the team: three in a row. Under the first stop they are three Chiefs,
   each in its ring; under the last, three people. */
.run-stack { display: flex; flex: none; }
.run-stack > i { display: grid; place-items: center; width: 28px; height: 28px; }
.run-stack > i + i { margin-left: -5px; }
.run-stack > i:has(.luma) { width: 24px; height: 24px; margin: 4px 10px 4px 4px; }
.run-stack > i:has(.luma):last-child { margin-right: 4px; }
.run-stack .luma { --ring: 1.25px; --gap: 2px; }
.run-stack .run-ico { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--graphite-3); box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud-80); }
.run-yours { display: block; margin-top: 2px; color: var(--cloud); font-weight: 600; }
/* An arrow in the gap from one stop to the next. */
.run-stop + .run-stop::before { content: ""; position: absolute; top: calc(var(--gap) / -2 - 6px); left: calc(50% - 4px); width: 8px; height: 8px; border: solid var(--cloud-48); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.run-ico { flex: none; width: 1.3em; height: 1.3em; color: var(--cloud-64); }

/* 1. The owner's phone: a text to the Chief, and the Chief's answer under it. */
.run-phone, .run-board { overflow: hidden; border-radius: 1.5em; background: linear-gradient(180deg, #212128, #18181d); box-shadow: inset 0 0 0 1px var(--cloud-16), inset 0 1px 0 rgb(246 247 248 / 0.12), 0 24px 40px -26px #000; }
.run-phone { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.run-phone-head, .run-board-head { display: flex; align-items: center; gap: 0.65em; min-height: 3.5em; padding: 0.6em 1.1em; border-bottom: 1px solid var(--cloud-08); }
.run-phone-head b, .run-board-head b { font: 650 1.1em/1.2 var(--display); letter-spacing: -0.01em; }
.run-avatar { flex: none; width: 28px; height: 28px; margin-right: 0.15em; }
.run-avatar .luma { --ring: 1.25px; --gap: 2px; }
/* The Chief can be called, too. */
.run-call { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cloud-16); }
.run-call .run-ico { width: 1.05em; height: 1.05em; color: var(--cloud-80); }
/* The thread keeps room for the longest pair of messages, so the phone never changes height. */
.run-thread { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6em; min-height: 13.4em; padding: 0.9em 1em; }
.run-day { margin: 0 auto auto; color: var(--cloud-48); font-size: 0.88em; }
.run-msg { max-width: 88%; padding: 0.6em 0.95em; border-radius: 1.25em; font-size: 1.04em; font-weight: 500; text-wrap: pretty; }
.run-msg--you { align-self: flex-end; border-bottom-right-radius: 0.35em; background: var(--cloud); color: var(--graphite); }
.run-msg--chief, .run-typing { border-bottom-left-radius: 0.35em; background: var(--cloud-08); box-shadow: inset 0 0 0 1px var(--cloud-16); }
/* The Chief's answer, and in the same place the three dots while it writes one (only the motion
   shows those). */
.run-answer { display: grid; justify-items: start; align-items: end; }
.run-answer > * { grid-area: 1 / 1; }
.run-typing { display: flex; align-items: center; gap: 0.32em; padding: 0.8em 0.95em; border-radius: 1.25em; opacity: 0; }
.run-typing i { width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--cloud-64); }
.run-type { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0 1em 1em; padding: 0.35em 0.4em 0.35em 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud-48); font-weight: 500; }
.run-send { position: relative; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--cloud-16); }
.run-send::before { content: ""; position: absolute; top: calc(50% - 0.12em); left: calc(50% - 0.24em); width: 0.48em; height: 0.48em; border: solid var(--cloud); border-width: 0.14em 0 0 0.14em; transform: rotate(45deg); }

/* 2. The Chief, and a line out to each helper (proof.js draws the lines to fit); under them, the
   Company Brain. The Chief's name sits under its face, so nothing crosses the lines. */
.run-crew { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 1.3em; }
.run-tree { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: clamp(1.6em, 10%, 4em); }
.run-chief { --face: 72px; display: grid; justify-items: center; gap: 0.15em; width: 8.6em; text-align: center; }
.run-chief-face { position: relative; width: var(--face); height: var(--face); margin-bottom: 1.1em; }
/* Luma at its largest: a wider gap to its ring, and its soft lavender light behind it. */
.run-chief-face .luma { --ring: 2px; --gap: 0.42em; --glow: 1; }
.run-chief b { font: 650 1.2em/1.2 var(--display); letter-spacing: -0.015em; }
.run-status { min-height: 2.7em; color: var(--cloud-64); text-wrap: balance; }
.run-helpers { display: grid; gap: 0.45em; }
.run-helper { position: relative; display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto; align-items: center; column-gap: 0.7em; min-width: 0; }
.run-bot { position: relative; width: 38px; height: 38px; margin: 1px; }
/* A helper's badge, at the end of its row: its job's icon, and a tick once it has done one. */
.run-chip { position: relative; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cloud-16); }
.run-chip .run-ico { width: 0.95em; height: 0.95em; }
.run-chip::after, .run-tick::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.36em; height: 0.68em; margin: -0.44em 0 0 -0.2em; border: solid var(--graphite); border-width: 0 0.15em 0.15em 0; opacity: 0; transform: rotate(45deg); }
.run-helper.is-done .run-chip { background: var(--yellow); box-shadow: none; }
.run-helper.is-done .run-chip .run-ico { opacity: 0; }
.run-helper.is-done .run-chip::after, .run-row.is-done .run-tick::after { opacity: 1; }
.run-name { color: var(--cloud-80); font-size: 1.04em; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.run-first { grid-column: 2 / -1; justify-self: start; margin: -0.35em 0 0.3em; padding: 0.12em 0.75em; border-radius: 999px; background: var(--yellow); color: var(--graphite); font-size: 0.82em; line-height: 1.5; white-space: nowrap; }
.run-brain { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2em 0.7em; padding: 0.75em 1em; border-radius: 0.95em; background: var(--cloud-08); box-shadow: inset 0 0 0 1px var(--cloud-16); text-align: center; }
.run-brain b { font: 650 1.1em/1.2 var(--display); letter-spacing: -0.01em; }
.run-brain > span { color: var(--cloud-64); }

/* 3. The Work Hub: a row per job. An empty ring and two bars while it's being done; a tick, its
   name and the helper who did it once it's finished. */
.run-board { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.run-board-head > span { margin-left: auto; color: var(--cloud-48); }
.run-rows { display: grid; align-content: start; padding: 0.2em 1.1em 0.4em; }
.run-row { position: relative; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: center; column-gap: 0.8em; min-height: 4.2em; padding-block: 0.6em; border-top: 1px solid var(--cloud-08); }
.run-row:first-child { border-top: 0; }
.run-tick { position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cloud-16); }
.run-row.is-done .run-tick { background: var(--yellow); box-shadow: none; }
.run-swap { display: grid; align-items: center; }
.run-swap > * { grid-area: 1 / 1; }
.run-todo, .run-did { display: grid; gap: 0.2em; }
.run-todo { gap: 0.55em; opacity: 0; }
.run-by { display: flex; align-items: center; gap: 0.35em; color: var(--cloud-64); font-size: 0.94em; }
.run-by > i { flex: none; width: 18px; height: 18px; }
.run-bar { height: 0.62em; border-radius: 0.31em; background: var(--cloud-16); }
.run-bar--l { width: 78%; }
.run-bar--s { width: 44%; }
.run-row:not(.is-done) .run-todo { opacity: 1; }
.run-row:not(.is-done) .run-did { opacity: 0; }
/* The software the Work Hub ties in. */
.run-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 0.9em; padding: 0.75em 1.1em; border-top: 1px solid var(--cloud-08); color: var(--cloud-64); }
.run-tool-row { display: flex; gap: 0.4em; }
.run-tool-row i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.55em; background: var(--cloud-08); box-shadow: inset 0 0 0 1px var(--cloud-16); }
.run-tool-row .run-ico { width: 1.05em; height: 1.05em; color: var(--cloud-80); }

/* The lines (proof.js sizes them): a hairline from the Chief to each helper, the same line in
   yellow when a job goes down it, and the short trail behind a job on its way between stops. */
.run-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.run-wires path { fill: none; stroke-linecap: round; }
.run-spoke { stroke: rgb(246 247 248 / 0.24); stroke-width: 1; stroke-dasharray: 1; }
.run-spoke-lit { stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.run-trail { stroke: var(--yellow); stroke-width: 1.5; opacity: 0; }
/* The job on its way from one stop to the next: the brand's diamond. Only proof.js shows it. */
.run-token { --x: 0px; --y: 0px; position: absolute; top: -5.5px; left: -5.5px; z-index: 2; width: 11px; height: 11px; border-radius: 2.5px; background: var(--yellow); box-shadow: 0 0 0 3px rgb(237 242 10 / 0.16), 0 0 16px rgb(237 242 10 / 0.8); opacity: 0; pointer-events: none; transform: translate(var(--x), var(--y)) rotate(45deg); }
.run-replay { justify-self: end; min-height: 32px; margin-block: -10px -12px; padding: 4px 2px; border: 0; background: none; color: var(--cloud-64); font: 600 0.8125rem/1.2 var(--body); text-decoration: underline; text-decoration-color: var(--cloud-16); text-underline-offset: 4px; cursor: pointer; }
.run-replay:hover { color: var(--cloud); text-decoration-color: var(--yellow); }
/* A small phone: everything in the drawings a touch smaller, so the Chief and its helpers fit. */
@media (max-width: 374px) { .run-stage { font-size: 12px; } .run-chief { --face: 60px; width: 7.2em; } .run-bot { width: 34px; height: 34px; } .run-first { grid-column: 1 / -1; margin-top: 0.1em; } }
@media (min-width: 620px) { .run-tree { column-gap: clamp(3em, 17%, 7.5em); } }
@media (min-width: 1200px) { .run-chief { --face: 86px; width: 9.4em; } }
/* Between a tablet and a wide laptop the three columns are narrow: the row of three sits over its words. */
@media (min-width: 1000px) and (max-width: 1199px) { .run-note { flex-direction: column; gap: 8px; } }
/* A laptop: the three stops side by side, each as tall as the Chief and its helpers, and their
   words lined up along the top and the bottom. */
@media (min-width: 1000px) {
  .run-stage { --gap: clamp(28px, 3.2vw, 46px); grid-template-columns: minmax(0, 15fr) minmax(0, 22fr) minmax(0, 16fr); }
  .run-stop { width: auto; justify-self: stretch; }
  .run-note { align-items: flex-start; min-height: 3.2rem; }
  .run-note .run-stack { margin-top: 2px; }
  .run-stop + .run-stop::before { top: calc(50% - 4px); left: calc(var(--gap) / -2 - 6px); transform: rotate(-45deg); }
  /* The three rows share the board's height. */
  .run-rows { grid-auto-rows: 1fr; }
}

/* Helpers in each department: one dark panel, the Chief at the top and a line down from it to a
   rail the departments hang from, each marked with the brand's diamond. In each department, a
   small helper's face beside each job (the scene's own faces, so it reads as the same team). On a
   lead's page the department their first build is in is marked, with its jobs. A link with a=0
   leaves the Chief out. */
.depts { display: grid; gap: clamp(16px, 2vw, 22px); }
.roster {
  position: relative;
  padding: clamp(22px, 2.8vw, 38px) clamp(18px, 2.8vw, 40px) clamp(24px, 3vw, 40px);
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    radial-gradient(46% 42% at 50% 0%, rgb(246 247 248 / 0.09), transparent 72%) padding-box,
    var(--lattice) center top / 72px 72px padding-box,
    linear-gradient(var(--graphite), var(--graphite)) padding-box,
    linear-gradient(180deg, rgb(246 247 248 / 0.3), rgb(246 247 248 / 0.08) 46%) border-box;
  color: var(--cloud);
}
.roster-chief { position: relative; display: grid; justify-items: center; gap: 8px; padding-bottom: 30px; text-align: center; }
.roster-face { width: 60px; height: 60px; margin: 8px 0 6px; }
.roster-face .luma { --ring: 2px; --gap: 4px; --glow: 1; }
.roster-chief b { font: 650 1.0625rem/1.25 var(--display); letter-spacing: -0.015em; }
/* The line down from the Chief to the rail. */
.roster-chief::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 20px; background: linear-gradient(180deg, transparent, rgb(246 247 248 / 0.3)); transform-origin: top; }
.dept-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); row-gap: clamp(24px, 2.6vw, 32px); }
.dept { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; padding: 24px clamp(12px, 2vw, 28px) 0 0; }
/* The rail, and the department's diamond on it. */
.dept::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgb(246 247 248 / 0.2); transform-origin: left; }
.dept::before { content: ""; position: absolute; top: -5px; left: 2px; z-index: 1; width: 10px; height: 10px; border: 1.5px solid var(--yellow); background: var(--graphite); transform: rotate(45deg); }
.dept-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.dept-ico, .idea-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--graphite-3); box-shadow: inset 0 0 0 1px var(--cloud-16); }
.dept-ico .run-ico, .idea-ico .run-ico { width: 15px; height: 15px; color: var(--cloud-80); }
.dept-name { margin: 0; font: 650 1.1875rem/1.2 var(--display); letter-spacing: -0.02em; }
/* A lead's own department: a small tag on its rail, like "Our recommendation" on their card. */
.dept-flag { position: absolute; top: -11px; left: 24px; z-index: 1; padding: 2px 11px; border-radius: 999px; background: var(--yellow); color: var(--graphite); font: 650 0.75rem/1.4 var(--body); white-space: nowrap; }
.dept-jobs { display: grid; gap: 6px; }
.dept-job { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 28px; color: var(--cloud-80); font-size: 0.9375rem; line-height: 1.3; text-wrap: pretty; }
.dept-bot { width: 28px; height: 28px; }
.dept.is-first::after { background: var(--yellow); }
.dept.is-first::before { background: var(--yellow); }
.dept-job.is-first { color: var(--cloud); font-weight: 600; }
.dept-job.is-first .dept-bot { border-radius: 50%; box-shadow: 0 0 0 1.5px var(--graphite), 0 0 0 3px var(--yellow); }
@media (max-width: 699px) {
  .dept-grid { --cols: 2; }
  .dept { gap: 10px; padding-right: 12px; }
  .dept-name { font-size: 1.0625rem; }
  .dept-job { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 0.875rem; }
  .dept-bot { width: 24px; height: 24px; }
  .dept-ico { width: 24px; height: 24px; border-radius: 8px; }
  .dept-head { gap: 8px; }
}
/* A small phone: one department to a row. */
@media (max-width: 359px) { .dept-grid { --cols: 1; row-gap: 22px; } }

/* The Company Brain and the roadmap: a card each, side by side, the Brain the wider. Each has one
   line that says what it is, and under it a picture. The Brain's reads from left to right (top
   to bottom in a narrow card): what goes in, the Brain itself, who reads from it, and under
   them one rule being used (Matt, Oct 9: "just those little labels is very boring"). proof.js
   draws the lines between its three parts. The roadmap's is a path of three steps that light in
   order. Each card lays its picture out by its own width, so it is right beside the other card,
   on its own row, and on a phone. A link with a=0 hides the Brain's card, and the roadmap takes
   the row. */
.ideas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(12px, 1.4vw, 18px); }
.ideas:has(> .idea--brain[hidden]) { grid-template-columns: minmax(0, 1fr); }
.idea {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(80% 70% at 100% 100%, rgb(237 242 10 / 0.05), transparent 70%) padding-box,
    linear-gradient(var(--graphite-2), var(--graphite-2)) padding-box,
    linear-gradient(160deg, rgb(246 247 248 / 0.3), rgb(246 247 248 / 0.07) 42%) border-box;
  color: var(--cloud);
}
/* The Brain's card carries the Chief's lavender, where the others carry a trace of yellow. */
.idea--brain {
  background:
    radial-gradient(60% 60% at 50% 46%, rgb(119 104 200 / 0.13), transparent 72%) padding-box,
    linear-gradient(var(--graphite-2), var(--graphite-2)) padding-box,
    linear-gradient(160deg, rgb(246 247 248 / 0.3), rgb(246 247 248 / 0.07) 42%) border-box;
}
.idea-title { display: flex; align-items: center; gap: 12px; font: 650 clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.025em; }
.idea-ico { width: 36px; height: 36px; border-radius: 11px; }
.idea-ico .run-ico { width: 19px; height: 19px; color: var(--cloud); }
.idea-what { max-width: 30rem; margin-top: 2px; color: var(--cloud-80); font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }

/* The Brain's picture. Stacked (a narrow card): what goes in, a line down to the Brain, and lines
   down from it to the faces that read it. */
.brain { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 30px; margin-top: 14px; }
.brain-in, .brain-out { position: relative; z-index: 1; display: grid; gap: 10px; min-width: 0; }
.brain-in { justify-self: stretch; }
.brain-out { justify-items: center; }
/* Stacked, the lines come down onto the faces, so their label goes under them. */
.brain-out .brain-label { order: 1; }
.brain-label { color: var(--cloud-64); font: 600 0.8125rem/1.3 var(--body); }
.brain-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.brain-src { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 42px; padding: 8px 12px 8px 11px; border-radius: 12px; background: #1d1d24; box-shadow: inset 0 0 0 1px var(--cloud-16); font: 600 0.875rem/1.25 var(--body); }
.brain-src .run-ico { width: 16px; height: 16px; color: var(--cloud-64); }
/* The one the rule below comes from. */
.brain-src--rule { box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.55); }
.brain-src--rule .run-ico { color: var(--yellow); }
/* The Brain: a small bright core with two rings round it, in the Chief's lavender. */
.brain-core { position: relative; z-index: 1; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(175 162 234 / 0.16); }
.brain-core::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(175 162 234 / 0.3); }
.brain-orb { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #34304a, #1b1a26 72%); box-shadow: inset 0 0 0 1.5px var(--lavender-soft), 0 0 26px rgb(119 104 200 / 0.6); }
.brain-orb .run-ico { width: 24px; height: 24px; color: var(--cloud); }
.brain-readers { display: flex; align-items: center; gap: 14px; }
.brain-reader { flex: none; width: 34px; height: 34px; }
.brain-reader--chief { width: 38px; height: 38px; margin: 4px; }
.brain-reader .luma { --ring: 1.5px; --gap: 2.5px; }
/* The lines (proof.js sizes them): a hairline along each, and a short light that travels it. */
.brain-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.brain-wires path { fill: none; }
.brain-wire { stroke: rgb(175 162 234 / 0.36); stroke-width: 1; stroke-dasharray: 1; }
.brain-flow { stroke: var(--lavender-soft); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 0.16 1.2; stroke-dashoffset: 0.17; opacity: 0; }
/* One rule in use: the rule, and the job it held back. */
.brain-use { display: grid; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgb(246 247 248 / 0.04); box-shadow: inset 0 0 0 1px var(--cloud-08); }
.brain-tag { display: block; margin-bottom: 3px; color: var(--cloud-64); font: 600 0.8125rem/1.3 var(--body); }
.brain-rule b { font: 600 1rem/1.35 var(--body); text-wrap: balance; }
.brain-case { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.brain-job { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; background: #1d1d24; box-shadow: inset 0 0 0 1px var(--cloud-16); font: 600 0.875rem/1.3 var(--body); white-space: nowrap; }
.brain-by { flex: none; width: 24px; height: 24px; }
.brain-held { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--yellow); color: var(--graphite); font: 650 0.8125rem/1.4 var(--body); white-space: nowrap; }
/* Two bars: held. */
.brain-held::before { content: ""; width: 2px; height: 9px; border-inline: 2.5px solid var(--graphite); }
/* A wide card: the three parts side by side, and a line from each thing that goes in. */
@container (min-width: 470px) {
  .brain { grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; justify-items: stretch; column-gap: clamp(26px, 9cqw, 72px); margin-top: 16px; }
  .brain-srcs { grid-template-columns: minmax(0, 1fr); }
  .brain-in, .brain-out { grid-template-rows: auto minmax(0, 1fr); }
  .brain-out { justify-items: center; }
  .brain-out .brain-label { order: 0; }
  .brain-readers { flex-direction: column; justify-content: space-between; gap: 6px; }
  .brain-core { align-self: center; margin-top: calc(0.8125rem * 1.3 + 10px); }
  .brain-use { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
  .brain-case { justify-content: flex-end; }
}

/* The roadmap: a path of three steps, each with a diamond on the line. The first is the lit one;
   the line runs on from it, fading as it goes, and off past the last step. Down the card where
   the card is narrow (beside the Brain, or on a phone); across it where it is wide. */
.road { --gap: 0px; position: relative; display: grid; flex: 1; grid-auto-rows: minmax(min-content, 1fr); margin-top: 8px; padding-top: 14px; }
.road-step { position: relative; display: grid; align-content: start; gap: 3px; padding: 0 0 18px 30px; }
.road-step::before { content: ""; position: absolute; top: 12px; bottom: -6px; left: 6.5px; width: 1px; background: linear-gradient(180deg, var(--yellow), rgb(237 242 10 / 0.34)); transform-origin: top; }
.road-step:nth-child(2)::before { background: linear-gradient(180deg, rgb(237 242 10 / 0.34), var(--cloud-16)); }
.road-step:last-child { padding-bottom: 4px; }
.road-step:last-child::before { bottom: 0; background: linear-gradient(180deg, var(--cloud-16), transparent); }
.road-step::after { content: ""; position: absolute; top: 4px; left: 2px; width: 10px; height: 10px; border: 1.5px solid var(--yellow); background: var(--graphite-2); transform: rotate(45deg); }
.road-step:first-child::after { background: var(--yellow); box-shadow: 0 0 0 4px rgb(237 242 10 / 0.14); }
.road-when { color: var(--cloud-64); font: 600 0.8125rem/1.4 var(--body); }
.road-step b { font: 600 1rem/1.35 var(--body); text-wrap: pretty; overflow-wrap: anywhere; }
@container (min-width: 520px) {
  .road { --gap: clamp(14px, 3cqw, 26px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; align-content: end; gap: var(--gap); padding-top: 22px; }
  .road-step, .road-step:last-child { padding: 22px 0 0; }
  .road-step::before { top: 5px; bottom: auto; left: 0; right: calc(-1 * var(--gap)); width: auto; height: 1px; background: linear-gradient(90deg, var(--yellow), rgb(237 242 10 / 0.34)); transform-origin: left; }
  .road-step:nth-child(2)::before { background: linear-gradient(90deg, rgb(237 242 10 / 0.34), var(--cloud-16)); }
  .road-step:last-child::before { right: 0; background: linear-gradient(90deg, var(--cloud-16), transparent); }
  .road-step::after { top: 0; }
  .road-step b { font-size: 0.9375rem; }
}
@media (max-width: 999px) { .ideas { grid-template-columns: minmax(0, 1fr); } }

/* Custom software, the second lane: what is true of all of it in one line and three plain kinds
   on the left; on the right the one real example as a window, a quote and a purchase order side
   by side with each line checked against the other, and the software it is connected to along
   the bottom. The bars stand in for words. Dark in both themes, the same finish as the cards
   above it. It shows on every link, a=0 included. */
.soft {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(22px, 3.4vw, 56px);
  padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 100% 0%, rgb(246 247 248 / 0.07), transparent 70%) padding-box,
    radial-gradient(60% 70% at 0% 100%, rgb(237 242 10 / 0.05), transparent 70%) padding-box,
    linear-gradient(var(--graphite-2), var(--graphite-2)) padding-box,
    linear-gradient(160deg, rgb(246 247 248 / 0.3), rgb(246 247 248 / 0.07) 42%) border-box;
  color: var(--cloud);
}
.soft-say { display: grid; gap: clamp(18px, 2vw, 26px); }
.soft-line { color: var(--cloud); font: 600 clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.soft-kinds { display: grid; gap: 10px; }
.soft-kinds li { display: flex; align-items: center; gap: 12px; color: var(--cloud-80); font: 600 1rem/1.3 var(--body); }
.soft-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--graphite-3); box-shadow: inset 0 0 0 1px var(--cloud-16); }
.soft-ico .run-ico { width: 17px; height: 17px; color: var(--cloud); }
.soft-shot { display: grid; gap: 12px; min-width: 0; margin: 0; }
/* The window. */
.soft-app { overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #212128, #18181d); box-shadow: inset 0 0 0 1px var(--cloud-16), inset 0 1px 0 rgb(246 247 248 / 0.12), 0 30px 50px -30px #000; font: 600 13px/1.35 var(--body); }
.soft-bar { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--cloud-08); }
.soft-bar b { min-width: 0; font: 650 0.9375rem/1.25 var(--display); letter-spacing: -0.01em; }
.soft-dots { display: flex; flex: none; gap: 5px; }
.soft-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--cloud-16); }
/* The quote and the purchase order: two sheets, a row per line, and a tick between each pair.
   The three columns share one set of row heights, so every tick sits between its two lines. */
.soft-body { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: clamp(8px, 2.4%, 16px); padding: clamp(14px, 3%, 22px) clamp(12px, 3.4%, 24px); }
.soft-doc, .soft-checks { display: grid; grid-template-rows: 28px repeat(4, 22px); row-gap: 8px; align-items: center; min-width: 0; padding-block: 10px 12px; }
.soft-doc { padding-inline: clamp(10px, 6%, 16px); border-radius: 10px; background: rgb(246 247 248 / 0.045); box-shadow: inset 0 0 0 1px var(--cloud-08); }
.soft-head, .soft-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.soft-head { align-self: stretch; border-bottom: 1px solid var(--cloud-08); }
.soft-head .run-ico { width: 15px; height: 15px; color: var(--cloud-80); }
.soft-row { justify-content: space-between; }
.soft-ln, .soft-amt { height: 7px; border-radius: 4px; background: var(--cloud-16); }
.soft-ln--l { width: 62%; }
.soft-ln--m { width: 46%; }
.soft-ln--s { width: 34%; }
.soft-head .soft-ln { height: 8px; background: var(--cloud-48); }
.soft-amt { flex: none; width: 22%; background: var(--cloud-48); }
.soft-check { position: relative; justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); }
.soft-check::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; margin: -6px 0 0 -3px; border: solid var(--graphite); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.soft-ties { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--cloud-08); }
/* Connected: a link, a dotted line, and the software it ties in. */
.soft-tie { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; }
.soft-tie .run-ico { width: 1.15em; height: 1.15em; color: var(--cloud-64); }
.soft-ties::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cloud-16) 50%, transparent 0) center / 6px 1px repeat-x; }
.soft-ties .run-tool-row { order: 2; }
.soft-for { color: var(--cloud-64); font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 899px) { .soft { grid-template-columns: minmax(0, 1fr); } }

/* What you'd get: the agreement's contents as a sheet of paper lying on a dark desk, in plain
   words, so the agreement itself holds no surprises. It is paper in both themes (ink on warm
   white), so it reads as a real document and never blends into the page. No yellow on it. */
.sheet {
  --sheet: #f8f6ef;
  --sheet-tint: #ece9de;
  --ink: #141310;
  --ink-80: rgb(20 19 16 / 0.82);
  --ink-62: rgb(20 19 16 / 0.64);
  --ink-14: rgb(20 19 16 / 0.16);
  --ink-08: rgb(20 19 16 / 0.06);
  display: grid;
  gap: clamp(28px, 3.4vw, 44px);
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 72px);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--ink);
  /* Two more pages under it, then its shadow on the desk. */
  box-shadow: 0 0 0 1px rgb(20 19 16 / 0.08), 0 10px 0 -5px #d8d5cb, 0 20px 0 -10px #bdbab0, 0 60px 90px -50px rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) { .sheet { --sheet: #ebe8de; --sheet-tint: #dcd9ce; } }
#ch-scope .sheet :focus-visible { outline-color: var(--ink); }
/* The letterhead, then the document's title. */
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.sheet-for { min-width: 0; color: var(--ink-62); font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.sheet-kicker { font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--display); letter-spacing: -0.025em; }
/* A quiet label over each part, so the part's own words carry the weight. */
.sheet-label { margin-bottom: 14px; color: var(--ink-62); font: 600 0.9375rem/1.3 var(--body); }
/* The plan: a table, one row per step, read left to right. The eye runs down one tinted
   "You get" column. */
.sheet-steps { --cols: 28px minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
.steps-head, .step { display: grid; grid-template-columns: var(--cols); column-gap: clamp(14px, 1.8vw, 24px); align-items: start; }
.steps-head { padding-bottom: 10px; color: var(--ink-62); font-size: 0.8125rem; font-weight: 600; }
.steps-head > :last-child, .step-get { padding-inline: 14px; }
.steps { position: relative; isolation: isolate; }
.steps::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: calc((100% - 28px - 3 * clamp(14px, 1.8vw, 24px)) * 4 / 12); border-radius: 12px; background: var(--sheet-tint); }
.step { padding-block: 16px; border-top: 1px solid var(--ink-14); }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--sheet); font: 650 0.875rem/1 var(--display); }
.step-title { padding-top: 3px; font: 650 1.0625rem/1.25 var(--display); letter-spacing: -0.015em; }
/* When it happens, under the step's name. */
.step-when { display: block; margin-top: 3px; color: var(--ink-62); font: 600 0.8125rem/1.35 var(--body); letter-spacing: 0; }
.step-do { padding-top: 3px; color: var(--ink-80); font-size: 0.9375rem; line-height: 1.45; }
.step-get { display: grid; gap: 10px; padding-top: 3px; font-size: 0.9375rem; line-height: 1.45; }
/* What they get, as a short ticked list: the name carries the weight, and the line under it
   reads like the rest of the row. */
.gets { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gets li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; }
.gets li::before { content: ""; grid-row: 1 / span 2; width: 5px; height: 10px; margin: 3px 0 0 3px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.get-name { grid-column: 2; font-weight: 600; }
.get-desc { grid-column: 2; color: var(--ink-80); }
/* On a wide sheet the column's heading says "You get" once; each row keeps it for screen readers. */
.step-get > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.step-next { padding-left: 22px; color: var(--ink-80); }
@media (max-width: 999px) {
  .steps-head, .steps::before { display: none; }
  .step { grid-template-columns: 28px minmax(0, 1fr); row-gap: 4px; }
  .step > :not(.step-n) { grid-column: 2; }
  .step-n { grid-row: 1 / span 3; }
  .step-title, .step-do { padding-top: 0; }
  .step-title { margin-top: 3px; }
  .step-get { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sheet-tint); }
  .step-get > span:first-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--ink-62); font-size: 0.8125rem; font-weight: 600; }
}
/* The agreement, part by part: what this page has already shown, ticked, beside what we go
   through on the call. Nothing here asks anything of them. */
.sheet-lead { max-width: 44rem; margin: -6px 0 18px; font: 650 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.3 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); }
.parts-head { margin-bottom: 4px; color: var(--ink-62); font: 600 0.8125rem/1.4 var(--body); }
.parts .also { grid-template-columns: minmax(0, 1fr); gap: 0; }
.parts .also li { display: flex; align-items: baseline; gap: 12px; padding-block: 11px; }
.parts .also li::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--ink-62); border-radius: 50%; transform: translateY(1px); }
.parts .also.is-done li { color: var(--ink); font-weight: 600; }
.parts .also.is-done li::before { width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; border-radius: 0; transform: rotate(45deg) translate(-1px, -2px); margin-inline: 2px 1px; }
@media (max-width: 699px) { .parts { grid-template-columns: minmax(0, 1fr); } }
.also { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(16px, 2vw, 28px); }
.also li { padding-top: 12px; border-top: 1px solid var(--ink-14); color: var(--ink-80); font-size: 1rem; line-height: 1.4; text-wrap: pretty; }
@media (max-width: 999px) { .also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .also { grid-template-columns: minmax(0, 1fr); } }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; padding-top: 16px; border-top: 2px solid var(--ink); color: var(--ink-80); font-size: 0.9375rem; line-height: 1.5; }
#sheet-walk { color: var(--ink); font-weight: 650; }

/* Results, on warm paper (Matt: the dark band was "very hard to read"): the client's video beside
   his words, then one row per client, the figure on the left, the story on the right. */
#voices { scroll-margin-top: 24px; }
/* The clients on camera sit together in one dark panel, in both themes, so they stand apart from
   the page around them (and the yellow play buttons are on dark, where yellow belongs). */
.voices-panel {
  display: grid;
  gap: clamp(28px, 3.5vw, 44px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: 28px;
  background: var(--graphite) var(--lattice);
  color: var(--cloud);
  box-shadow: 0 0 0 1px var(--cloud-16), 0 40px 80px -48px rgb(0 0 0 / 0.6);
  --ink: var(--cloud);
  --ink-80: var(--cloud-80);
  --ink-62: var(--cloud-64);
  --ink-14: var(--cloud-16);
  --ink-08: var(--cloud-08);
}
.voices-panel :focus-visible { outline-color: var(--yellow); }
.voices-more { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--cloud-16); }
.voice { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 24px clamp(28px, 4vw, 56px); }
.voice-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.voice-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The play button sits in the bottom-left corner, clear of the person's face (Matt, Oct 8). The
   whole picture still starts the video: the button's own click area covers the frame. */
.voice-play { position: relative; place-self: end start; display: grid; place-items: center; width: 60px; height: 60px; margin: 0 0 18px 18px; border: 0; border-radius: 50%; background: var(--yellow); color: var(--graphite); box-shadow: 0 0 0 7px var(--yellow-soft); cursor: pointer; transition: transform 220ms var(--ease-spring); }
.voice-play::after { content: ""; position: absolute; inset: -100vmax; }
.voice-play svg { width: 22px; height: 22px; margin-left: 3px; }
.voice-play:hover { transform: scale(1.06); }
.voice-play:focus-visible { outline-color: var(--yellow); }
.voice.is-playing .voice-play { display: none; }
.voice-cap { display: grid; gap: 16px; }
.voice-quote p { font: 650 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.15 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.voice-who { display: grid; gap: 2px; color: var(--ink-80); font-size: 1rem; line-height: 1.45; }
.voice-who strong { color: var(--ink); font: 650 1.125rem/1.25 var(--display); }
.voice-who a { color: inherit; font-weight: 650; text-underline-offset: 3px; }
.voice-co { color: var(--ink-62); font-size: 0.9375rem; line-height: 1.5; }
/* Two more clients on camera, side by side under the first: a smaller frame, one line they say,
   and who they are by first name and industry. */
.voices-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.voice--more { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.voice--more .voice-play { width: 50px; height: 50px; margin: 0 0 14px 14px; box-shadow: 0 0 0 6px var(--yellow-soft); }
.voice--more .voice-play svg { width: 18px; height: 18px; }
.voice--more .voice-quote p { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.25; }
.voice--more .voice-cap { gap: 10px; }
@media (max-width: 799px) { .voices-more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .voice { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .voice-play, .voice--more .voice-play { width: 46px; height: 46px; margin: 0 0 12px 12px; box-shadow: 0 0 0 5px var(--yellow-soft); } .voice-play svg, .voice--more .voice-play svg { width: 17px; height: 17px; } }

.built { display: grid; gap: 18px; }
/* The use cases: a bento of dark cards in both themes (so the yellow figure is always on dark).
   Each card is one figure, one line a person would say out loud, one line of how, and a small
   note of what kind of proof the figure is. Two wide cards and five standard ones fill three
   rows with no hole. */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(14px, 1.6vw, 20px); }
.case { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: var(--graphite) var(--lattice); color: var(--cloud); box-shadow: inset 0 0 0 1px var(--cloud-16); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.case:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.45), 0 24px 48px -28px rgb(0 0 0 / 0.7); }
.case--wide { grid-column: span 2; }
.case-who { color: var(--cloud-64); font: 600 0.8125rem/1.45 var(--body); text-wrap: pretty; }
.case-who a { color: inherit; font-weight: 650; text-underline-offset: 3px; }
/* The figure is white and sits with a short label that makes it mean something on its own.
   Yellow stays a small accent (the proof dot, the quote's rule): big yellow type was rough on
   the eyes. */
.case-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--cloud-16); }
.case-num { color: var(--cloud); font: 650 clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case--wide .case-num { font-size: clamp(3rem, 2.1rem + 3vw, 4.75rem); }
.case-label { max-width: 22ch; color: var(--cloud-64); font-size: 0.9375rem; line-height: 1.35; text-wrap: balance; }
.case-head { margin-top: 4px; font: 650 clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem)/1.25 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.case--wide .case-head { max-width: 30ch; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); line-height: 1.18; }
.case-body { max-width: 62ch; color: var(--cloud-80); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.case-quote { margin-top: 4px; padding-left: 16px; border-left: 2px solid var(--yellow); font: 600 1.125rem/1.35 var(--display); letter-spacing: -0.01em; }
.case-proof { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding: 5px 12px 5px 10px; text-align: left; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--cloud-16); color: var(--cloud-64); font: 600 0.8125rem/1.4 var(--body); }
.case-proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.case :focus-visible { outline-color: var(--yellow); }
@media (max-width: 1099px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .cases { grid-template-columns: minmax(0, 1fr); } .case--wide { grid-column: auto; } }

/* Who you'd work with: the leaders across, the team photo beside everyone else, then the events. */
#ch-team .ch-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "leaders" "photo" "crew" "world"; gap: clamp(28px, 3.5vw, 44px); }
.leaders { grid-area: leaders; }
.team-photo { grid-area: photo; }
.crew-wrap { grid-area: crew; align-self: start; }
.world { grid-area: world; }


.leaders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.leaders.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.leader { display: grid; align-content: start; }
.leader-photo { position: relative; overflow: hidden; border-radius: 14px; background: var(--ink-08); }
.leader-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.leader-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top, rgb(11 11 13 / 0.3), transparent 36%); box-shadow: inset 0 0 0 1px rgb(246 247 248 / 0.12); pointer-events: none; }
.leader-name { margin-top: 12px; font: 650 1.0625rem/1.2 var(--display); letter-spacing: -0.015em; }
.leader-role { margin-top: 2px; color: var(--ink-62); font-size: 0.8125rem; line-height: 1.4; }
/* A short bio under each leader: who they are in a line or two. */
.leader-bio { margin-top: 10px; color: var(--ink-80); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.chip { justify-self: start; margin-top: 8px; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-14); color: var(--ink-80); font: 600 0.75rem/1.4 var(--body); }
@media (max-width: 799px) {
  .leaders, .leaders.is-five { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .leader { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .leader-photo { grid-row: 1 / span 4; }
  .leader > :not(.leader-photo) { grid-column: 2; }
  .leader-name { margin-top: 0; }
}

.team-photo { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--ink-14); }
.team-photo img { width: 100%; aspect-ratio: 2400 / 1067; object-fit: cover; }
.team-photo figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 6px 12px; border-radius: 999px; background: rgb(11 11 13 / 0.72); color: var(--cloud); font-size: 0.8125rem; line-height: 1.35; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 699px) {
  /* On a phone the photo is small, so its caption goes back under it. */
  .team-photo { overflow: visible; box-shadow: none; }
  .team-photo img { border-radius: 14px; }
  .team-photo figcaption { position: static; max-width: none; margin-top: 10px; padding: 0; border-radius: 0; background: none; color: var(--ink-62); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.crew-wrap { display: grid; gap: 8px; }
.crews { --per-row: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; }
.crew { flex: 0 0 calc((100% - (var(--per-row) - 1) * 24px) / var(--per-row)); min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--ink-08); }
.crew > :not(.crew-photo) { grid-column: 2; }
.crew-photo { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--ink-08); box-shadow: 0 0 0 1px var(--ink-14); }
.crew-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.crew-name { font: 650 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.crew-role { color: var(--ink-62); font-size: 0.8125rem; font-weight: 600; }
.crew-note { margin-top: 1px; color: var(--ink-62); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
@media (max-width: 1099px) { .crews { --per-row: 3; } }
@media (max-width: 799px) { .crews { --per-row: 2; } }
@media (max-width: 559px) {
  .crews { --per-row: 2; justify-content: flex-start; column-gap: 18px; }
  .crew { flex-basis: calc((100% - 18px) / 2); }
  /* Narrow columns: the photo sits above the name so long titles can wrap. */
  .crew { grid-template-columns: minmax(0, 1fr); }
  .crew > :not(.crew-photo) { grid-column: 1; }
  .crew-photo { grid-row: auto; align-self: start; width: 48px; height: 48px; margin-bottom: 6px; }
  .crew-role { overflow-wrap: break-word; }
}

.world { display: grid; gap: 14px; }
.world-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.event-shot { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--ink-08); box-shadow: 0 0 0 1px var(--ink-14); }
.event img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
a.event-shot::after { content: "\2197"; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(11 11 13 / 0.72); color: var(--cloud); font: 600 0.9375rem/1 var(--body); }
a.event-shot:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
.event figcaption { display: grid; gap: 1px; margin-top: 8px; font-size: 0.8125rem; line-height: 1.35; }
.event figcaption strong { font-weight: 650; }
.event figcaption span { color: var(--ink-62); }
.follow-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--ink-62); font-size: 0.875rem; }
.follow { color: var(--ink); font-weight: 600; white-space: nowrap; text-underline-offset: 4px; }
.follow::after { content: " \2197"; }
/* The featured photo is two tiles wide and two tall: two photos sit beside it, three under it. */
.event--lead { grid-column: span 2; grid-row: span 2; }
.event--lead figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.event--lead picture { display: block; height: 100%; }
.event--lead img { height: 100%; aspect-ratio: auto; }
@media (max-width: 899px) {
  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event--lead { grid-row: auto; }
  .event--lead img { height: auto; aspect-ratio: 16 / 10; }
  /* Two across on a phone: a photo left alone on the last row takes the full width. */
  .events > .event:last-child:nth-child(even) { grid-column: span 2; }
  .events > .event:last-child:nth-child(even) img { aspect-ratio: 16 / 10; }
}

/* Questions: a neat list, two across. One ruled row per question, a plus that turns to a minus,
   and the answer opening under it. All start closed (Matt, Oct 7). */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-col { display: grid; align-content: start; }
.qa { border-top: 1px solid var(--ink-14); }
.qa-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 16px; font: 650 clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem)/1.3 var(--display); letter-spacing: -0.015em; list-style: none; cursor: pointer; }
.qa-q::-webkit-details-marker { display: none; }
@media (min-width: 800px) { .qa-q { min-height: 84px; } }
.qa-q::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; box-shadow: inset 0 0 0 1px var(--ink-14); transition: transform 200ms var(--ease), background-size 200ms var(--ease); }
.qa[open] > .qa-q::after { background-size: 12px 1.5px, 1.5px 0; transform: rotate(180deg); }
.qa-q:hover::after { box-shadow: inset 0 0 0 1px var(--ink); }
.qa p { max-width: 36rem; padding-bottom: 20px; color: var(--ink-80); line-height: 1.6; }
@media (max-width: 799px) { .faq-list { grid-template-columns: minmax(0, 1fr); } }

/* --- What happens next ---------------------------------------------------------------------------- */

.next { padding-top: clamp(32px, 4vw, 52px); }
.next-card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 32px clamp(32px, 6vw, 96px);
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--cloud-16);
}
.next-card h2 { margin-top: 14px; font: 650 clamp(2.25rem, 1.4rem + 3vw, 4rem)/1 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.next-lead { max-width: 36rem; margin-top: 20px; color: var(--cloud-80); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; text-wrap: pretty; }
.join { max-width: 40rem; margin-top: 18px; color: var(--cloud-80); line-height: 1.55; }
.with { display: flex; align-items: center; gap: 14px; max-width: 36rem; margin-top: 16px; }
.with-photo { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--graphite-3); box-shadow: 0 0 0 1px var(--cloud-16); }
.with-photo:empty { display: none; }
.with-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.with-line { color: var(--cloud); font-weight: 600; line-height: 1.5; }
.next-side { display: flex; flex-direction: column; gap: 24px; }
.sign { display: flex; align-items: center; gap: 16px; }
.sign-photo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--graphite-3);
  box-shadow: 0 0 0 1px var(--cloud-16);
  color: var(--cloud);
  font: 650 1.25rem/1 var(--display);
}
/* The whole portrait in the circle: its top, where the face is. */
.sign-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.sign-text { display: grid; gap: 2px; line-height: 1.35; }
.sign-hi { color: var(--cloud-48); font-size: 0.875rem; }
.sign-text strong { font: 650 1.125rem/1.25 var(--display); }
.sign-role { color: var(--cloud-64); font-size: 0.875rem; }
.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.share-done { color: var(--cloud-64); font-size: 0.875rem; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 48px 40px; color: var(--cloud-48); font-size: 0.875rem; }
.foot a { color: var(--cloud-80); }
@media (max-width: 899px) { .next-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .next-actions .btn { flex: 1 1 auto; padding-inline: 18px; white-space: nowrap; } }

/* A personalized link keeps the hero's words hidden for the moment proof.js takes to address them,
   so nothing flashes; the CSS shows them anyway after a beat if the script never runs. */
.is-personalizing .hero-copy,
.is-personalizing .note,
.is-personalizing .stamp,
.is-personalizing .numbers,
.is-personalizing .clients { visibility: hidden; animation: unhide 0s 1.2s forwards; }
@keyframes unhide { to { visibility: visible; } }

/* --- Motion ---------------------------------------------------------------------------------------- */

@keyframes trace-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes node-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes circuit-pulse { 0% { stroke-dashoffset: 28; opacity: 1; } 45% { stroke-dashoffset: -306; opacity: 1; } 46%, 100% { opacity: 0; } }

@keyframes photo-sweep { to { transform: translateX(120%); } }
@keyframes photo-drift { from { transform: scale(1); } to { transform: scale(1.035) translate(-0.6%, -0.4%); } }
@keyframes face-ring { 0% { box-shadow: 0 0 0 1px var(--ink-14); } 45% { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--mark); } 100% { box-shadow: 0 0 0 1px var(--ink-14); } }
@keyframes reel-scan { 0% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(5em); } }
@keyframes reel-ring { from { box-shadow: 0 0 0 0 rgb(237 242 10 / 0.5); } to { box-shadow: 0 0 0 0.8em rgb(237 242 10 / 0); } }
@keyframes reel-wave { 50% { transform: scaleY(calc(1.2 - var(--h))); } }
@keyframes reel-read { 50% { background-color: var(--cloud-48); } }
@keyframes run-pop { from { transform: scale(0.3); } to { transform: none; } }
@keyframes run-dots { 0% { box-shadow: -0.4em 0 var(--yellow), 0.4em 0 rgb(237 242 10 / 0.3); background-color: rgb(237 242 10 / 0.3); } 33% { box-shadow: -0.4em 0 rgb(237 242 10 / 0.3), 0.4em 0 rgb(237 242 10 / 0.3); background-color: var(--yellow); } 66%, 100% { box-shadow: -0.4em 0 rgb(237 242 10 / 0.3), 0.4em 0 var(--yellow); background-color: rgb(237 242 10 / 0.3); } }
@keyframes run-ripple { from { box-shadow: 0 0 0 0 rgb(237 242 10 / 0.55); } to { box-shadow: 0 0 0 0.9em rgb(237 242 10 / 0); } }
@keyframes run-type { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-0.18em); } }
@keyframes run-sweep { from { opacity: 1; transform: translateX(-100%); } to { opacity: 1; transform: translateX(100%); } }
@keyframes run-sent { 0% { background-color: var(--yellow); transform: scale(0.8); } 100% { background-color: var(--cloud-16); transform: none; } }
/* Chief Luma's states, as the Chief brand sets them: only the whole face, its ring and its light
   move. Idle is a very light breath; listening, a lavender ring goes out from it; thinking, its
   light glows slowly; speaking, a tiny lift; done, one small lift. */
@keyframes luma-breathe { 50% { transform: scale(1.035); } }
@keyframes luma-listen { 0% { opacity: 0; transform: scale(0.86); } 28% { opacity: 0.62; } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes luma-think { 50% { opacity: 0.55; } }
@keyframes luma-speak { 50% { transform: translateY(-3%) scale(1.04); } }
@keyframes luma-done { 40% { transform: translateY(-5%) scale(1.03); } }
@keyframes pal-spin { to { transform: rotate(1turn); } }
@keyframes pal-done { 40% { transform: translateY(-9%) scale(1.06); } }
@keyframes own-text { 0% { opacity: 0; transform: none; } 12%, 30% { opacity: 1; } 42%, 100% { opacity: 0; transform: translateX(var(--go)); } }
@keyframes brain-flow { 0% { stroke-dashoffset: 0.17; opacity: 1; } 24% { stroke-dashoffset: -1; opacity: 1; } 25%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes brain-glow { 50% { box-shadow: inset 0 0 0 1.5px var(--lavender-soft), 0 0 40px rgb(119 104 200 / 0.9); } }
@keyframes road-lit { 0% { box-shadow: 0 0 0 0 rgb(237 242 10 / 0.6); } 100% { box-shadow: 0 0 0 12px rgb(237 242 10 / 0); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgb(237 242 10 / 0.45); } 70% { box-shadow: 0 0 0 22px rgb(237 242 10 / 0); } 100% { box-shadow: 0 0 0 7px var(--yellow-soft); } }
@media (prefers-reduced-motion: no-preference) {
  /* The reel, beat by beat (proof.js steps data-beat from 0 to 3 once the card is on screen).
     What a beat brings in rises into place, one data-step after another; a replay clears it at
     once. A part that leaves (data-out) is shown until its beat. */
  .reel [data-in], .reel [data-out] { --d: 0; transition: opacity 320ms var(--ease), transform 460ms var(--ease-out); }
  .reel [data-step="1"] { --d: 1; }
  .reel [data-step="2"] { --d: 2; }
  .reel [data-step="3"] { --d: 3; }
  .reel [data-step="5"] { --d: 5; }
  .reel [data-step="7"] { --d: 7; }
  .reel .reel-done { transition-timing-function: var(--ease), var(--ease-spring); }
  .reel .reel-mail { transition: opacity 320ms var(--ease), transform 460ms var(--ease-out), box-shadow 320ms var(--ease); }
  #rec[data-beat="1"] .reel [data-in="1"], #rec[data-beat="2"] .reel [data-in="2"], #rec[data-beat="3"] .reel [data-in="3"] { transition-delay: calc(var(--d) * 140ms); }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel [data-out="2"], #rec:not([data-beat="3"]) .reel [data-out="3"], #rec:not([data-beat="3"]) .reel-mail { opacity: 1; }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel :is([data-in="2"], [data-in="3"]), #rec[data-beat="2"] .reel [data-in="3"] { opacity: 0; transform: var(--from, translateY(0.5em)); transition-duration: 140ms; }
  /* Before it plays, the scene waits dimmed, so the reel is never an empty box. */
  #rec[data-beat="0"] .reel [data-in="1"] { opacity: 0.3; transform: translateY(0.4em); transition-duration: 200ms; }
  /* Quotes: a light runs down the sheet as each line is priced. */
  #rec[data-beat="2"] .reel-scan { animation: reel-scan 900ms var(--ease) both; }
  /* Email: the one that matters is marked once it's sorted. */
  .reel-mail--lead .reel-ico { transition: color 320ms var(--ease); }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel-mail--lead { box-shadow: inset 0 0 0 1px var(--cloud-16), 0 18px 36px -22px #000; }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel-mail--lead .reel-ico { color: var(--cloud-48); }
  /* The phone rings twice, then the line is live while the order is taken. */
  #rec[data-beat="1"] .reel-phone { animation: reel-ring 390ms var(--ease) 60ms 2; }
  .reel-wave i { transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel-wave i { background: var(--cloud-16); transform: scaleY(0.2); }
  #rec[data-beat="2"] .reel-wave i { animation: reel-wave 400ms ease-in-out 300ms 3; }
  #rec[data-beat="2"] .reel-wave i:nth-child(odd) { animation-delay: 420ms; }
  /* Daily reports: a line runs from each tool to the brief. */
  .reel-tool::after { transition: transform 420ms var(--ease-out); }
  #rec:is([data-beat="0"], [data-beat="1"]) .reel-tool::after { transform: scaleX(0); transition-duration: 0s; }
  /* Sales follow-up: the reply is a draft, with a dashed edge, until a person has checked it. */
  #rec[data-beat="2"] .reel-msg--ours { box-shadow: 0 18px 36px -22px #000; outline: 1px dashed var(--cloud-48); outline-offset: -1px; }
  /* Your team's assistant: the question is typed, then the handbook is read. */
  .reel-ask b { clip-path: inset(0); transition: clip-path 600ms steps(12) 180ms; }
  #rec[data-beat="0"] .reel-ask b { clip-path: inset(0 100% 0 0); transition: none; }
  #rec[data-beat="2"] .reel-block .reel-bar { animation: reel-read 520ms var(--ease) 240ms 2; }
  /* The Chief is alive: Luma breathes very lightly, each one out of step with its neighbours,
     while the chapter is on screen (proof.js adds is-awake). */
  :where(#ch-plan.is-awake) .luma-core { animation: luma-breathe 2600ms var(--ease) infinite; }
  :where(.own-pair:nth-child(2n), .run-stack > i:nth-child(2), .roster-face) .luma-core { animation-delay: -900ms; }
  :where(.own-pair:nth-child(3n), .run-stack > i:nth-child(3), .brain-reader) .luma-core { animation-delay: -1700ms; }
  /* How it runs once it's live. proof.js adds is-live and plays three jobs through the scene,
     moving the classes below from one element to the next: a message is-in, the send button
     is-sent, the Chief is-active, a helper is-working and then is-done, the Company Brain
     is-reading, a Work Hub row is-done, the thread is-typing. The job itself is the diamond:
     proof.js moves it along a line, frame by frame, with the line lighting up behind it. */
  .run-msg { transition: opacity 240ms var(--ease), transform 460ms var(--ease-spring); }
  .run-msg--you { transform-origin: 100% 100%; }
  .run-msg--chief, .run-typing { transform-origin: 0 100%; }
  .run.is-live .run-msg:not(.is-in) { opacity: 0; transform: translateY(0.9em) scale(0.9); }
  /* Before it plays, the first text waits dimmed, so the phone is never empty. */
  .run.is-live.is-waiting .run-msg--you { opacity: 0.3; transform: none; }
  .run-send.is-sent { animation: run-sent 620ms var(--ease-out); }
  /* The Chief writes back: three dots, then the answer in their place. */
  .run-typing { transition: opacity 180ms var(--ease), transform 320ms var(--ease-spring); transform: scale(0.8); }
  .run-thread.is-typing .run-typing { opacity: 1; transform: none; }
  .run-thread.is-typing .run-typing i { animation: run-type 900ms var(--ease) infinite; }
  .run-thread.is-typing .run-typing i:nth-child(2) { animation-delay: 140ms; }
  .run-thread.is-typing .run-typing i:nth-child(3) { animation-delay: 280ms; }
  /* The Chief has the job: it grows a little and its ring brightens. Then Luma's own states, one
     after another (proof.js sets data-state): it listens as the job arrives (a ring goes out from
     it), thinks while its helper works (its light glows slowly, in Luma's cream), speaks while it
     writes back (a tiny lift), and is done (one small lift). The face in the chat lifts with it. */
  .run-chief-face { transition: transform 480ms var(--ease-spring); }
  .luma-ring { transition: border-color 320ms var(--ease), box-shadow 320ms var(--ease); }
  .luma-glow { transition: background-color 320ms var(--ease); }
  .run-chief.is-active .run-chief-face { transform: scale(1.06); }
  .run-chief.is-active .luma-ring { border-color: var(--lavender-soft); box-shadow: 0 0 1.1em rgb(119 104 200 / 0.75); }
  .run-chief[data-state="listening"] .luma-pulse { animation: luma-listen 1100ms var(--ease) 2; }
  .run-chief[data-state="thinking"] .luma-ring { border-color: var(--luma-cream); box-shadow: 0 0 1.1em rgb(244 231 200 / 0.5); }
  .run-chief[data-state="thinking"] .luma-glow { animation: luma-think 1800ms var(--ease) infinite; }
  .run-chief[data-state="speaking"] .luma-core, .run-phone:has(.run-thread.is-typing) .run-avatar .luma-core { animation: luma-speak 1200ms var(--ease) infinite; }
  .run-chief[data-state="done"] .luma-core { animation: luma-done 620ms var(--ease-spring); }
  .run-status, .run-name { transition: color 240ms var(--ease); }
  .run-chief.is-active .run-status { color: var(--cloud); }
  /* A helper at work: it grows a little, a light runs round it, and three dots stand where its
     icon was. When it's done it lifts once and the tick pops in. */
  .run-bot { transition: transform 480ms var(--ease-spring); }
  .pal-spin { transition: opacity 200ms var(--ease); }
  .run-helper.is-working .run-bot { transform: scale(1.1); }
  .run-helper.is-working .pal-spin { opacity: 1; animation: pal-spin 820ms linear infinite; }
  .run-helper.is-working .run-name { color: var(--cloud); }
  .run-chip, .run-tick { transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease); }
  .run-chip .run-ico, .run-chip::after, .run-tick::after { transition: opacity 180ms var(--ease); }
  .run-helper.is-working .run-chip { box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.6); }
  .run-helper.is-working .run-chip .run-ico { opacity: 0; }
  .run-helper.is-working .run-chip::before { content: ""; position: absolute; top: calc(50% - 0.09em); left: calc(50% - 0.09em); width: 0.18em; height: 0.18em; border-radius: 50%; animation: run-dots 720ms steps(1) infinite; }
  .run.is-live .run-helper.is-done .run-chip, .run.is-live .run-row.is-done .run-tick { animation: run-pop 420ms var(--ease-spring); }
  .run.is-live .run-helper.is-done .pal { animation: pal-done 560ms var(--ease-spring); }
  /* The Company Brain while a helper reads from it. */
  .run-brain .run-ico { transition: color 280ms var(--ease); }
  .run-brain.is-reading { background-color: rgb(237 242 10 / 0.07); box-shadow: inset 0 0 0 1px rgb(237 242 10 / 0.6); }
  .run-brain.is-reading .run-ico { color: var(--yellow); }
  /* A finished job lands in the Work Hub: a ring goes out from the tick, the job's name rises
     into place and a light crosses the row once. */
  .run-todo, .run-did { transition: opacity 260ms var(--ease), transform 460ms var(--ease-out); }
  .run.is-live .run-row:not(.is-done) .run-did { transform: translateY(0.5em); }
  .run-tick::before { content: ""; position: absolute; inset: 0; border-radius: 50%; }
  .run.is-live .run-row.is-done .run-tick::before { animation: run-ripple 800ms var(--ease-out); }
  .run-row::after { content: ""; position: absolute; inset: 0 -1.1em; background: linear-gradient(100deg, transparent 30%, rgb(246 247 248 / 0.09) 50%, transparent 70%); opacity: 0; pointer-events: none; }
  .run.is-live .run-row.is-done::after { animation: run-sweep 900ms var(--ease-out); }
  /* The lines. A job's own line stays lit while its helper works, then fades. */
  .run-spoke-lit, .run-trail { transition: opacity 420ms var(--ease); }
  .run-spoke-lit.is-on, .run-trail.is-on { opacity: 1; transition-duration: 80ms; }
  .run-token { transition: opacity 220ms var(--ease); }
  .run-token.is-flying { opacity: 1; transition-duration: 100ms; }
  /* proof.js sets the waiting frame, and each replay's first frame, at once. */
  .run.is-setting *, .run.is-setting *::before, .run.is-setting *::after { transition: none !important; animation: none !important; }
  .voice.is-in .voice-play { animation: ring 1600ms var(--ease) 300ms 2; }

  /* The opening, once per device (proof-intro.js sets motion-on): only the circuit draws in the
     corner. The words, the contact card and the numbers are there from the first frame. */
  .motion-on .circuit-traces path { stroke-dasharray: 1; animation: trace-draw 1000ms var(--ease-out) both; }
  .motion-on .circuit-traces path:nth-child(2) { animation-delay: 250ms; }
  .motion-on .circuit-traces path:nth-child(3) { animation-delay: 80ms; }
  .motion-on .circuit-nodes .node { transform-box: fill-box; transform-origin: center; animation: node-pop 480ms var(--ease-spring) both; }
  .motion-on .circuit-nodes .node:nth-child(1) { animation-delay: 380ms; }
  .motion-on .circuit-nodes .node:nth-child(2) { animation-delay: 500ms; }
  .motion-on .circuit-nodes .node:nth-child(3) { animation-delay: 620ms; }
  .motion-on .circuit-nodes .node:nth-child(4) { animation-delay: 740ms; }
  .motion-on .circuit-nodes .node:nth-child(5) { animation-delay: 260ms; }
  .motion-on .circuit-nodes .node:nth-child(6) { animation-delay: 680ms; }
  .motion-on .numbers::before { animation: grow-x 800ms var(--ease-out) 300ms both; }
  /* Then a light runs down the circuit, twice. */
  .circuit-pulse { animation: circuit-pulse 6s var(--ease) 2.2s 2; }

  /* As each part reaches the screen (proof.js adds reveal-on once it is watching). */
  .reveal-on [data-reveal] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .ch-head::before { transition: transform 520ms var(--ease-spring) 180ms, opacity 300ms var(--ease) 180ms; }
  .reveal-on .ch-head:not(.is-in)::before { opacity: 0; transform: rotate(45deg) scale(0.2); }
  .team-photo img { transition: transform 1400ms var(--ease-out); }
  .reveal-on .team-photo:not(.is-in) img { transform: scale(1.04); }
  .leader-photo img, .event img { transition: transform 900ms var(--ease-out); }
  .reveal-on .leader:not(.is-in) .leader-photo img, .reveal-on .event:not(.is-in) img { transform: scale(1.08); }
  /* A soft light crosses each leader's photo once as it arrives; the team photo drifts very slowly
     while it's on screen; and a ring passes down the team's faces once. */
  .leader-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgb(246 247 248 / 0.22) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; }
  .reveal-on .leader.is-in .leader-photo::before { animation: photo-sweep 1100ms var(--ease-out) calc(var(--i, 0) * 110ms + 300ms) 1 both; }
  .reveal-on .team-photo.is-in img { animation: photo-drift 22s ease-in-out 1.6s infinite alternate; }
  .reveal-on .crew.is-in .crew-photo { animation: face-ring 900ms var(--ease) calc(var(--i, 0) * 90ms + 900ms) 1 backwards; }
  @media (max-width: 699px) { .reveal-on .team-photo.is-in img { animation: none; } }
  .crew-photo { transition: transform 560ms var(--ease-spring) calc(var(--i, 0) * 70ms + 140ms), box-shadow 200ms var(--ease); }
  .reveal-on .crew:not(.is-in) .crew-photo { transform: scale(0.72); }
  @media (hover: hover) {
    .leader:hover .leader-photo img, .event:hover img { transform: scale(1.04); transition-duration: 500ms; }
    .crew:hover .crew-photo { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--mark); }
    .team-photo:hover img { transform: scale(1.015); }
  }
  /* What we build, as it reaches the screen. The service's line draws from the left and its
     diamonds turn into place. */
  .service-step::before { transition: transform 800ms var(--ease-out) calc(var(--i, 0) * 110ms + 120ms); }
  .reveal-on .service-step:not(.is-in)::before { transform: scaleX(0); }
  .service-step::after { transition: transform 520ms var(--ease-spring) calc(var(--i, 0) * 110ms + 200ms), opacity 300ms var(--ease) calc(var(--i, 0) * 110ms + 200ms); }
  .reveal-on .service-step:not(.is-in)::after { opacity: 0; transform: rotate(45deg) scale(0.2); }
  /* The scene: the phone, the Chief and the Work Hub settle one after another, the lines draw
     out from the Chief, and the helpers wake down the row. */
  .run-phone, .run-board, .run-brain { transition: opacity 600ms var(--ease-out) var(--wait, 0ms), transform 800ms var(--ease-out) var(--wait, 0ms); }
  .run-board { --wait: 260ms; }
  .run-brain { --wait: 700ms; transition: opacity 600ms var(--ease-out) var(--wait), transform 800ms var(--ease-out) var(--wait), box-shadow 280ms var(--ease), background-color 280ms var(--ease); }
  .reveal-on .run:not(.is-in) :is(.run-phone, .run-board, .run-brain) { opacity: 0; transform: translateY(16px); }
  .reveal-on .run:not(.is-in) .run-chief-face { transform: scale(0.5); }
  .run-chief { transition: opacity 400ms var(--ease) 120ms; }
  .reveal-on .run:not(.is-in) .run-chief { opacity: 0; }
  .run-spoke { transition: stroke-dashoffset 900ms var(--ease-out) calc(var(--n, 0) * 70ms + 380ms); }
  .reveal-on .run:not(.is-in) .run-spoke { stroke-dashoffset: 1; }
  .run-helper { transition: opacity 360ms var(--ease) calc(var(--n, 0) * 70ms + 700ms), transform 620ms var(--ease-spring) calc(var(--n, 0) * 70ms + 700ms); }
  .run-helper:nth-child(2) { --n: 1; }
  .run-helper:nth-child(3) { --n: 2; }
  .run-helper:nth-child(4) { --n: 3; }
  .run-helper:nth-child(5) { --n: 4; }
  .run-helper:nth-child(6) { --n: 5; }
  .reveal-on .run:not(.is-in) .run-helper { opacity: 0; transform: translateX(-10px) scale(0.86); }
  /* The departments: the line comes down from the Chief, the rail draws across, each diamond
     turns into place, and each department's helpers pop in down its list. */
  .roster-chief::after { transition: transform 500ms var(--ease-out) 200ms; }
  .reveal-on .roster:not(.is-in) .roster-chief::after { transform: scaleY(0); }
  .roster-face { transition: transform 620ms var(--ease-spring) 60ms; }
  .reveal-on .roster:not(.is-in) .roster-face { transform: scale(0.5); }
  .dept::after { transition: transform 800ms var(--ease-out) calc(var(--i, 0) * 90ms + 360ms); }
  .reveal-on .dept:not(.is-in)::after { transform: scaleX(0); }
  .dept::before { transition: transform 520ms var(--ease-spring) calc(var(--i, 0) * 90ms + 420ms), opacity 300ms var(--ease) calc(var(--i, 0) * 90ms + 420ms); }
  .reveal-on .dept:not(.is-in)::before { opacity: 0; transform: rotate(45deg) scale(0.2); }
  .dept-bot { transition: transform 520ms var(--ease-spring), opacity 260ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--j, 0) * 90ms + 520ms); }
  .dept-job:nth-child(2) { --j: 1; }
  .dept-job:nth-child(3) { --j: 2; }
  .reveal-on .dept:not(.is-in) .dept-bot { opacity: 0; transform: scale(0.5); }
  @media (hover: hover) { .dept:hover .pal { animation: pal-done 520ms var(--ease-spring) calc(var(--j, 0) * 70ms); } }
  /* Your Chief, as it reaches the screen: each person arrives, then their own Chief pops in
     beside them and a ring goes out from it. After that a text crosses to each Chief now and then. */
  .own-pair { --p: 0; }
  .own-pair:nth-child(2) { --p: 1; }
  .own-pair:nth-child(3) { --p: 2; }
  .own-pair:nth-child(4) { --p: 3; }
  .own-person, .own-link, .own-role { transition: opacity 420ms var(--ease) calc(var(--p) * 130ms + 200ms), transform 560ms var(--ease-out) calc(var(--p) * 130ms + 200ms); }
  .own-chief { transition: opacity 300ms var(--ease) calc(var(--p) * 130ms + 520ms), transform 620ms var(--ease-spring) calc(var(--p) * 130ms + 520ms); }
  .own-face { transition: transform 700ms var(--ease-spring) 120ms; }
  .reveal-on .own:not(.is-in) :is(.own-person, .own-link, .own-role) { opacity: 0; transform: translateY(8px); }
  .reveal-on .own:not(.is-in) .own-chief { opacity: 0; transform: scale(0.4); }
  .reveal-on .own:not(.is-in) .own-face { transform: scale(0.6); }
  .reveal-on .own.is-in .own-chief .luma-pulse { animation: luma-listen 1200ms var(--ease) calc(var(--p) * 130ms + 900ms); }
  .reveal-on .own.is-in .own-face .luma-pulse { animation: luma-listen 1400ms var(--ease) 500ms 2; }
  :where(#ch-plan.is-awake) .own.is-in .own-link::after { animation: own-text 5200ms var(--ease) calc(var(--p) * 1300ms + 2200ms) infinite; }
  /* The Company Brain: what goes in arrives, a line draws from each to the Brain, the Brain wakes,
     lines draw out to the faces that read it, and the rule and the job it held come up last.
     After that a short light travels each line now and then, in, then out. */
  .brain-src { --k: 0; transition: opacity 400ms var(--ease) calc(var(--k) * 90ms + 160ms), transform 600ms var(--ease-out) calc(var(--k) * 90ms + 160ms), box-shadow 500ms var(--ease) 1700ms; }
  .brain-src:nth-child(2) { --k: 1; }
  .brain-src:nth-child(3) { --k: 2; }
  .brain-src:nth-child(4) { --k: 3; }
  .brain-src .run-ico { transition: color 500ms var(--ease) 1700ms; }
  .reveal-on .brain:not(.is-in) .brain-src { opacity: 0; transform: translateX(-12px); box-shadow: inset 0 0 0 1px var(--cloud-16); }
  .reveal-on .brain:not(.is-in) .brain-src .run-ico { color: var(--cloud-64); }
  .brain-wire { transition: stroke-dashoffset 800ms var(--ease-out) calc(var(--n, 0) * 80ms + 560ms); }
  .reveal-on .brain:not(.is-in) .brain-wire { stroke-dashoffset: 1; }
  .brain-core { transition: opacity 400ms var(--ease) 700ms, transform 760ms var(--ease-spring) 700ms; }
  .reveal-on .brain:not(.is-in) .brain-core { opacity: 0; transform: scale(0.6); }
  .brain-reader { --k: 0; transition: opacity 320ms var(--ease) calc(var(--k) * 90ms + 1500ms), transform 600ms var(--ease-spring) calc(var(--k) * 90ms + 1500ms); }
  .brain-reader:nth-child(2) { --k: 1; }
  .brain-reader:nth-child(3) { --k: 2; }
  .brain-reader:nth-child(4) { --k: 3; }
  .reveal-on .brain:not(.is-in) .brain-reader { opacity: 0; transform: scale(0.4); }
  .brain-label { transition: opacity 400ms var(--ease) 160ms; }
  .brain-out .brain-label { transition-delay: 1400ms; }
  .reveal-on .brain:not(.is-in) .brain-label { opacity: 0; }
  :where(#ch-plan.is-awake) .brain.is-in .brain-flow { animation: brain-flow 5600ms linear calc(var(--n, 0) * 220ms + 1900ms) infinite; }
  :where(#ch-plan.is-awake) .brain.is-in .brain-orb { animation: brain-glow 5600ms var(--ease) 1900ms infinite; }
  .brain-use { transition: opacity 500ms var(--ease) 1900ms, transform 700ms var(--ease-out) 1900ms; }
  .brain-held { transition: opacity 240ms var(--ease) 2500ms, transform 520ms var(--ease-spring) 2500ms; }
  .reveal-on .brain:not(.is-in) + .brain-use { opacity: 0; transform: translateY(12px); }
  .reveal-on .brain:not(.is-in) + .brain-use .brain-held { opacity: 0; transform: scale(0.6); }
  /* The roadmap lights in order: the first diamond, the line on from it, the next, and so on,
     each step's words coming up as its diamond lights. */
  .road-step { --i: 0; }
  .road-step:nth-child(2) { --i: 1; }
  .road-step:nth-child(3) { --i: 2; }
  .road-step::after { transition: transform 520ms var(--ease-spring) calc(var(--i) * 520ms + 300ms), opacity 300ms var(--ease) calc(var(--i) * 520ms + 300ms); }
  .road-step::before { transition: transform 520ms var(--ease) calc(var(--i) * 520ms + 520ms); }
  .road-step > * { transition: opacity 500ms var(--ease) calc(var(--i) * 520ms + 340ms), transform 600ms var(--ease-out) calc(var(--i) * 520ms + 340ms); }
  .reveal-on .road:not(.is-in) .road-step::before { transform: scaleY(0); }
  .reveal-on .road:not(.is-in) .road-step::after { opacity: 0; transform: rotate(45deg) scale(0.2); }
  .reveal-on .road:not(.is-in) .road-step > * { opacity: 0; transform: translateY(6px); }
  .reveal-on .road.is-in .road-step::after { animation: road-lit 900ms var(--ease-out) calc(var(--i) * 520ms + 420ms) backwards; }
  @container (min-width: 520px) { .reveal-on .road:not(.is-in) .road-step::before { transform: scaleX(0); } }
  /* Custom software: the window settles, each line is checked in turn, and the connected
     software's icons come in along the bottom. */
  .soft-app { transition: transform 900ms var(--ease-out) 120ms, opacity 600ms var(--ease) 120ms; }
  .reveal-on .soft-shot:not(.is-in) .soft-app { opacity: 0; transform: translateY(18px) scale(0.985); }
  .soft-check { --c: 0; transition: transform 460ms var(--ease-spring) calc(var(--c) * 220ms + 700ms), opacity 200ms var(--ease) calc(var(--c) * 220ms + 700ms); }
  .soft-check:nth-child(3) { --c: 1; }
  .soft-check:nth-child(4) { --c: 2; }
  .soft-check:nth-child(5) { --c: 3; }
  .reveal-on .soft-shot:not(.is-in) .soft-check { opacity: 0; transform: scale(0.3); }
  .soft-row { --c: 0; transition: opacity 300ms var(--ease) calc(var(--c) * 220ms + 560ms); }
  .soft-row:nth-child(3) { --c: 1; }
  .soft-row:nth-child(4) { --c: 2; }
  .soft-row:nth-child(5) { --c: 3; }
  .reveal-on .soft-shot:not(.is-in) .soft-row { opacity: 0.35; }
  .soft-ties .run-tool-row i { --c: 0; transition: opacity 300ms var(--ease) calc(var(--c) * 90ms + 1600ms), transform 500ms var(--ease-spring) calc(var(--c) * 90ms + 1600ms); }
  .soft-ties .run-tool-row i:nth-child(2) { --c: 1; }
  .soft-ties .run-tool-row i:nth-child(3) { --c: 2; }
  .soft-ties .run-tool-row i:nth-child(4) { --c: 3; }
  .reveal-on .soft-shot:not(.is-in) .soft-ties .run-tool-row i { opacity: 0; transform: scale(0.5); }
  .soft-kinds li { --c: 0; transition: opacity 420ms var(--ease) calc(var(--c) * 110ms + 240ms), transform 600ms var(--ease-out) calc(var(--c) * 110ms + 240ms); }
  .soft-kinds li:nth-child(2) { --c: 1; }
  .soft-kinds li:nth-child(3) { --c: 2; }
  .reveal-on .soft:not(.is-in) .soft-kinds li { opacity: 0; transform: translateX(-10px); }
  .lane::after { transition: transform 900ms var(--ease-out) 200ms; transform-origin: left; }
  .lane::before { transition: transform 520ms var(--ease-spring) 120ms, opacity 300ms var(--ease) 120ms; }
  .reveal-on .lane:not(.is-in)::after { transform: scaleX(0); }
  .reveal-on .lane:not(.is-in)::before { opacity: 0; transform: rotate(45deg) scale(0.2); }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px); }
}

@media print {
  .stage::before, .circuit, .next-actions { display: none !important; }
}