/* Zero to Agent: client welcome page.
   Two registers, one brand. The dark stage matches zerotoagent.com; the warm
   paper matches the Work Hub clients already saw. Electric yellow stays on dark
   surfaces: the stage, the closing, Chief's brief card, and the roadmap path at night. */

@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 {
  /* Marketing register (zerotoagent.com) */
  --graphite: #0b0b0d;
  --graphite-raised: #1f1f26;
  --cloud: #f6f7f8;
  --cloud-72: rgb(246 247 248 / 0.72);
  --cloud-56: rgb(246 247 248 / 0.56);
  --cloud-14: rgb(246 247 248 / 0.14);
  --yellow: #edf20a;
  --yellow-hover: #f4f85a;

  /* Product register (Work Hub) */
  --paper: #faf9f5;
  --card: #fffefd;
  --ink: #141310;
  --ink-78: rgb(20 19 16 / 0.78);
  --ink-70: rgb(20 19 16 / 0.7);
  --ink-30: rgb(20 19 16 / 0.3);
  --ink-14: rgb(20 19 16 / 0.14);
  --card-hover: #ffffff;
  /* The roadmap path: ink on paper by day, the stage's yellow circuit at night. */
  --path: #141310;
  --path-text: #faf9f5;
  --path-glow: none;
  --path-tip-glow: none;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Public Sans", ui-sans-serif, system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --film-w: min(calc(100vw - 2 * var(--gutter)), 420px);
  /* How far the video card drops from the dark stage onto the paper. */
  --seam: calc(var(--film-w) * 0.5);
  --hero-gap: clamp(48px, 7vw, 112px);
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  /* Confident arrivals, and a small overshoot for things that land. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (min-width: 900px) {
  :root { --film-w: clamp(320px, 29vw, 400px); }
}

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

:root { color-scheme: light dark; }

[hidden] { display: none !important; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--graphite);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol { margin: 0; }

::selection { background: var(--yellow); color: var(--graphite); }
.paper ::selection { background: rgb(20 19 16 / 0.16); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.stage :focus-visible,
.team :focus-visible,
.closing :focus-visible,
.after-card :focus-visible { outline-color: var(--yellow); }

/* One content column for the whole page: every section's left and right edges line up, from the
   hero to Meet the team (team.css uses the same gutter and width) to the footer. */
.wrap {
  width: min(100% - 2 * var(--gutter), 1280px);
  margin-inline: auto;
}

/* Brand lockup ---------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cloud);
  font: 600 0.9375rem/1 var(--body);
  letter-spacing: 0.01em;
}
.brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Stage (dark) ----------------------------------------------------------- */

.stage {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--cloud);
  padding-top: clamp(20px, 3vw, 32px);
  overflow-x: clip;
}

/* The diamond lattice from zerotoagent.com, kept faint and faded out. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: 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");
  background-size: 72px 72px;
  background-position: right top;
  -webkit-mask-image: radial-gradient(110% 85% at 78% 0%, #000 15%, transparent 72%);
  mask-image: radial-gradient(110% 85% at 78% 0%, #000 15%, transparent 72%);
  pointer-events: none;
}

/* Yellow traces on the lattice, the zerotoagent.com hero motif. They draw
   themselves on arrival and one pulse runs down toward the video. */
.circuit {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 432px;
  height: 288px;
  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;
  stroke-linejoin: miter;
}
.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;
  animation: circuit-pulse 6s var(--ease) 1.2s 3;
}
@keyframes circuit-pulse {
  0% { stroke-dashoffset: 28; }
  45%, 100% { stroke-dashoffset: -306; }
}
@media (max-width: 440px) {
  /* On small phones this trace would cross the "Zero to Agent" wordmark. */
  .circuit .lead-in { display: none; }
}
@media (min-width: 900px) and (max-width: 1439px) {
  /* Here the card sits under the circuit, so keep the traces in the band above it. */
  .circuit {
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 45%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 45%);
  }
}
@media (max-width: 899px) {
  /* On phones keep the traces above the headline. */
  .circuit {
    -webkit-mask-image: linear-gradient(to bottom, #000 26%, transparent 56%);
    mask-image: linear-gradient(to bottom, #000 26%, transparent 56%);
  }
}
@media (max-width: 599px) {
  /* With their company over the headline, the traces end above it, so no trace crosses its words. */
  .stage:has(.hero-for:not([hidden])) .circuit {
    -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 29%);
    mask-image: linear-gradient(to bottom, #000 18%, transparent 29%);
  }
}

.hero {
  display: grid;
  gap: clamp(28px, 5vw, 40px);
  padding-top: clamp(40px, 8vw, 88px);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) var(--film-w);
    align-items: center;
    column-gap: var(--hero-gap);
  }
}

.hero-copy {
  position: relative;
  max-width: 36rem;
}
/* The row is centred on the card, so a long name grows it toward the paper: keep the lede well
   clear of the seam whatever the name. */
@media (min-width: 900px) {
  .hero-copy { padding-bottom: 48px; }
}

/* Their company, above the headline: "Prepared for Northwind", in the page's small label, with
   the circuit's diamond. */
.hero-for {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--cloud-72);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hero-for::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--yellow);
  transform: rotate(45deg);
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.35rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 em {
  font-style: normal;
  color: var(--yellow);
  /* Chinese, Japanese and Korean names stay whole on a line, as in the welcome film. */
  word-break: keep-all;
}

.nowrap { white-space: nowrap; }

.lede {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 30rem;
  color: var(--cloud-72);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* The film: a 9:16 card that sits across the seam. ---------------------- */

.film {
  position: relative;
  z-index: 1;
  width: var(--film-w);
}
/* The page's one shadow: the card resting on paper. It sits on this layer under the card,
   because the card's mask (the Safari corner safeguard below) clips anything drawn outside it.
   The layer stays flat while the card leans toward the pointer, so it sits 8px inside the card,
   past the lean's reach: no strip of paper opens between the card and its shadow. */
.film::before {
  content: "";
  position: absolute;
  inset: 8px 8px auto;
  height: calc(var(--film-w) * 16 / 9 - 16px);
  border-radius: 24px;
  box-shadow: 0 36px 72px -28px rgb(20 19 16 / 0.42);
  pointer-events: none;
}

@media (min-width: 600px) and (max-width: 899px) {
  .film,
  .film-notes { margin-inline: auto; }
}

/* Lights down: while Kensho speaks with his card mostly on screen, the page dims around him and
   the card's edge glows yellow, the light of a screen in a dark room. The dim is drawn inside the
   stage, under the card, and the stage rises above the rest of the page while it shows; it drops
   back only once the dim has faded (z-index 0 paints exactly as auto does). */
.stage {
  z-index: 0;
  transition: z-index 0s linear 900ms;
}
html.is-theater .stage {
  z-index: 40;
  transition-delay: 0s;
}
.theater {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--graphite);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}
html.is-theater .theater { opacity: 0.92; }
.film::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--film-w) * 16 / 9);
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(237 242 10 / 0.4), 0 0 96px 4px rgb(237 242 10 / 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease);
}
html.is-theater .film::after { opacity: 1; }

.film-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  margin-bottom: calc(var(--seam) * -1);
  border-radius: 24px;
  overflow: hidden;
  scroll-margin: 16px;
  background: #16161a;
}
/* The card's edge, drawn inside it so the mask can't clip it and it tilts with the card: a
   hairline that keeps the card's outline on the dark stage and on night paper, whatever the
   picture shows. It sits over everything in the card and takes no clicks. */
.film-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(246 247 248 / 0.16);
  pointer-events: none;
}

/* Keep these two rules separate: one unknown selector would void a combined rule. */
.film-frame video:fullscreen { object-fit: contain; border-radius: 0; }
.film-frame video:-webkit-full-screen { object-fit: contain; border-radius: 0; }
/* The card clips overflow, so draw the keyboard focus ring inside the video. */
.film-frame video:focus-visible { outline-offset: -3px; }

.film-frame video::cue {
  font-family: var(--body);
}

.film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: #16161a;
}

/* Kensho's poster frame, drawn over the video until it really plays (player.js shows it and
   sets .is-started), so the card always shows him: while the video loads, if it stalls, and if
   it fails. Some browsers drop the video's own poster when loading fails. */
.film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.film-frame.is-started .film-poster { visibility: hidden; }

/* The whole poster is the button; the pill is the visible cue. It sits in the
   open sky at the top of the frame, so it shows on the first screen on phones
   and short laptop windows, and never over the paper. */
.play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 16px 0;
  border: 0;
  background: linear-gradient(to bottom, rgb(11 11 13 / 0.3), transparent 30%);
  color: var(--graphite);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.play:focus-visible { outline: none; }


.play-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--yellow);
  max-width: 100%;
  font: 600 0.9375rem/1.2 var(--body);
  letter-spacing: 0.01em;
  text-align: left;
  transition: background-color 160ms var(--ease);
}
.play:hover .play-pill { background: var(--yellow-hover); }
.play:focus-visible .play-pill {
  outline: 3px solid var(--cloud);
  outline-offset: 3px;
}

.play-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--yellow);
}
.play-icon svg { width: 18px; height: 18px; }

.play-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.62;
}

/* Size the pill from the card's own width so it never outgrows a small card
   (320px phones, or the 320px card on 900 to 1100px screens). */
.film-frame {
  container-type: inline-size;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
@supports (width: 1cqi) {
  .play { padding: clamp(10px, 4cqi, 16px) clamp(10px, 4cqi, 16px) 0; }
  .play-pill {
    gap: clamp(8px, 3.4cqi, 12px);
    padding: clamp(5px, 2cqi, 8px) clamp(12px, 5.7cqi, 20px) clamp(5px, 2cqi, 8px) clamp(5px, 2cqi, 8px);
    font-size: clamp(0.8125rem, 4.3cqi, 0.9375rem);
  }
  .play-icon {
    width: clamp(28px, 10.3cqi, 36px);
    height: clamp(28px, 10.3cqi, 36px);
  }
}

/* Paper ----------------------------------------------------------------- */

.paper {
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  padding-top: calc(var(--seam) + 22px);
  padding-bottom: clamp(88px, 11vw, 144px);
}

.film-notes { width: var(--film-w); }

@media (min-width: 900px) {
  .paper { padding-top: 40px; }
  /* Kensho's caption sits beside the video's lower edge, and "What happens next" follows it
     straight away (see .section--road), so the column under it never stands empty. */
  .film-notes {
    width: calc(100% - var(--film-w) - var(--hero-gap));
    max-width: 36rem;
  }
}

.film-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-70);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink-14);
}
.film-caption strong {
  display: block;
  color: var(--ink);
  font: 600 1.0625rem/1.3 var(--display);
  letter-spacing: -0.01em;
}

.next-cta {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(11 11 13 / 0.82);
  box-shadow: 0 0 0 1px rgb(246 247 248 / 0.18);
  color: var(--cloud);
  font: 600 0.9375rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
}
.next-cta:hover { background: rgb(11 11 13 / 0.94); }
.next-cta svg { width: 16px; height: 16px; }
#next-title { scroll-margin-top: 48px; }

.film-error {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgb(11 11 13 / 0.88);
  box-shadow: 0 0 0 1px rgb(246 247 248 / 0.16);
  color: var(--cloud);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.film-error strong { display: block; font: 600 1.0625rem/1.35 var(--display); letter-spacing: -0.01em; }
.film-error a { color: var(--yellow); }

/* Kensho's player: a progress bar you can drag, then pause, time, captions and mute. */
.player {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "track track track track track"
    "toggle time . cc mute";
  align-items: center;
  column-gap: 2px;
  padding: 36px 8px 6px;
  background: linear-gradient(to top, rgb(11 11 13 / 0.78), rgb(11 11 13 / 0.35) 60%, transparent);
  color: var(--cloud);
}
.player button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.player button:hover { background: rgb(246 247 248 / 0.12); }
.player :focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }
.player svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player .icon-play { fill: currentColor; stroke: none; }
.film-frame.is-playing .icon-play,
.film-frame:not(.is-playing) .icon-pause,
.player-mute .icon-off,
.player-mute[aria-pressed="true"] .icon-on { display: none; }
.player-mute[aria-pressed="true"] .icon-off { display: block; }
.player-toggle { grid-area: toggle; }
.player-cc { grid-area: cc; font: 700 0.75rem/1 var(--body); letter-spacing: 0.06em; opacity: 0.7; }
.player-cc[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
.player-mute { grid-area: mute; }
.player-time {
  grid-area: time;
  padding: 0 6px;
  color: var(--cloud-72);
  font: 600 0.8125rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.player-track {
  grid-area: track;
  position: relative;
  height: 28px;
  margin: 0 8px;
}
.player-bar {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgb(246 247 248 / 0.28);
}
.player-fill {
  position: absolute;
  inset: 0;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
}
.player-seek {
  position: relative;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.player-seek::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.player-seek::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgb(11 11 13 / 0.4);
  -webkit-appearance: none;
  appearance: none;
}
.player-seek::-moz-range-track { height: 28px; background: transparent; }
.player-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
}
.player-seek:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* When the browser only allows it silent: one clear way to turn the sound on. */
.sound {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--graphite);
  font: 600 0.9375rem/1 var(--body);
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
}
.sound:hover { background: var(--yellow-hover); }
/* It floats over the video, so a dark band keeps its yellow focus ring clear on any frame. */
.sound:focus-visible { box-shadow: 0 0 0 3px var(--graphite); }
.sound svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.section {
  display: grid;
  gap: 28px 64px;
  padding-top: clamp(72px, 9vw, 120px);
}

@media (min-width: 900px) {
  /* The heading's column never drops below 380px, so "What happens next" stays on one line on
     laptops and tablets in landscape (it broke after "What" at 1024). */
  .section { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); }
  /* The heading comes right after Kensho's caption, beside the video's lower edge; only the
     steps wait for the card. They start the usual section gap below it: the card drops
     --seam onto the paper, which is taken up by the paper's 40px top, the caption row (its
     48px avatar; a caption that wraps only adds room) and this section's own top. */
  .section--road {
    --notes-gap: clamp(36px, 4vw, 56px);
    padding-top: var(--notes-gap);
  }
  .section--road .road {
    margin-top: calc(var(--seam) + clamp(72px, 9vw, 120px) - 40px - 48px - var(--notes-gap));
  }
}

h2 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(2rem, 1.35rem + 2.1vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Three body sizes on the page: 20 for ledes and step text, 17 for what supports them (lists, tips,
   intros, the email), 15 in cards and captions. */
.section-lede {
  margin-top: 14px;
  max-width: 34ch;
  color: var(--ink-78);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* The roadmap: one path from today to Chief at work. It carries the stage's
   circuit onto the paper: diamond stops on a line that lights up as the reader
   follows it. The heading stays in view beside it on wide screens. */
@media (min-width: 900px) {
  .section--road .section-head {
    position: sticky;
    top: 56px;
    align-self: start;
  }
}

/* Small diamonds instead of bullets, the lattice shape at list size. */
.stop-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stop-list li {
  position: relative;
  padding-left: 20px;
  text-wrap: pretty;
}
.stop-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 6px;
  height: 6px;
  border: 1.25px solid var(--ink-70);
  transform: rotate(45deg);
}
.road {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stop {
  --rail-x: 22px;
  --node-y: 12px;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
  padding-bottom: clamp(44px, 5.5vw, 60px);
}
.stop:last-child { padding-bottom: 0; }
/* The node is drawn absolutely, so place the text in the second column explicitly. */
.stop-body { grid-column: 2; min-width: 0; }

/* The line to the next stop runs from diamond centre to diamond centre and
   passes under the diamonds, like the circuit on the stage. */
.stop:not(:last-child)::before,
.stop:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--node-y);
}
.stop:not(:last-child)::before {
  bottom: calc(-1 * var(--node-y));
  left: calc(var(--rail-x) - 1px);
  width: 2px;
  border-radius: 1px;
  background: var(--ink-14);
}
/* The lit part follows the reader (--fill is set by the script), with a small
   bright tip where it is drawing. The segment is exactly one stop tall. */
.stop:not(:last-child)::after {
  left: calc(var(--rail-x) - 5px);
  width: 10px;
  height: calc(var(--fill, 0) * 100%);
  background:
    radial-gradient(circle closest-side, var(--path) 62%, transparent) 50% 100% / 8px 8px no-repeat,
    linear-gradient(var(--path), var(--path)) 50% 0 / 2px calc(100% - 4px) no-repeat;
  filter: var(--path-tip-glow);
}

.stop-node {
  position: absolute;
  z-index: 1;
  top: var(--node-y);
  left: var(--rail-x);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}
.stop-node::before,
.stop-node::after {
  content: "";
  position: absolute;
  inset: 4px;
  transform: rotate(45deg);
}
.stop-node::before {
  border: 1.5px solid var(--ink-30);
  background: var(--paper);
}
.stop.is-reached .stop-node::before {
  border-color: var(--path);
  box-shadow: var(--path-glow);
}
/* You are here: filled in, and it pings. */
.stop.is-now .stop-node::before {
  border-color: var(--path);
  background: var(--path);
}
.stop.is-now .stop-node::after {
  border: 1.5px solid var(--path);
  opacity: 0;
}
.stop-when {
  display: flex;
  align-items: center;
  min-height: 24px;
  color: var(--ink-70);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.here {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--path);
  color: var(--path-text);
  letter-spacing: 0.04em;
}
.stop h3 {
  font: 600 clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem)/1.2 var(--display);
  letter-spacing: -0.018em;
}
.stop-text {
  max-width: 50ch;
  margin-top: 10px;
  color: var(--ink-78);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.stop-tip {
  max-width: 54ch;
  margin-top: 16px;
  color: var(--ink-70);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.stop-list {
  gap: 10px;
  max-width: 54ch;
  margin-top: 18px;
  color: var(--ink-78);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Their Slack channel, by name, and the one-click actions. */
.channel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 20px 12px 0 0;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--ink-14);
  border-radius: 16px;
  background: var(--card);
  vertical-align: middle;
}
.channel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--graphite);
  color: var(--cloud);
}
.channel-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.channel-text { display: grid; min-width: 0; }
.channel-app { color: var(--ink-70); font: 600 0.8125rem/1.35 var(--body); }
.channel-name { font: 700 1.125rem/1.3 var(--body); overflow-wrap: anywhere; }
/* No channel in the link: say where its name is instead of making one up. */
.channel-name.is-unnamed { font-weight: 500; font-size: 1rem; }
.action {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  margin-top: 20px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1.0625rem/1.2 var(--body);
  text-decoration: none;
  vertical-align: middle;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.action:hover { transform: translateY(-1px); }
.action--light { background: var(--yellow); color: var(--graphite); }
.action--light:hover { background: var(--yellow-hover); }

/* Kensho's welcome email, drawn as the email itself, so the page and the inbox match. */
.mail {
  max-width: 30rem;
  margin-top: 28px;
  padding: 18px 20px 12px;
  border: 1px solid var(--ink-14);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 18px 40px -28px rgb(20 19 16 / 0.4);
}
.mail-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.mail-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.mail-from { font-size: 0.9375rem; line-height: 1.3; }
.mail-from strong { display: block; font-weight: 600; }
.mail-to { color: var(--ink-70); font-size: 0.8125rem; }
.mail-when {
  align-self: start;
  padding: 3px 10px;
  border: 1px solid var(--ink-14);
  border-radius: 999px;
  color: var(--ink-70);
  font-size: 0.75rem;
}
.mail-subject {
  margin-top: 16px;
  font: 600 1.125rem/1.3 var(--display);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.mail-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.mail-body a { color: var(--ink); overflow-wrap: anywhere; }
.mail-body ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}
.mail-sign { color: var(--ink-70); }
.mail.is-folded .mail-body {
  max-height: 12.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
  mask-image: linear-gradient(#000 50%, transparent);
}
.mail-more {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 1rem/1 var(--body);
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-underline-offset: 4px;
  cursor: pointer;
}
.mail-more:hover { text-decoration-color: var(--ink); }
/* An opened email is taller than the screen: let the column scroll with the page. */
@media (min-width: 900px) {
  .section--road .section-head:has(.mail:not(.is-folded)) { position: static; }
}


/* Meet the team (dark, full width). Its layout and circuit live in team.css and team.js. */
.team {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--graphite);
  color: var(--cloud);
}
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: 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");
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
  pointer-events: none;
}
/* The page's one small label: eyebrows, step labels, the directory's groups and photo captions. */
.eyebrow {
  color: var(--yellow);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* After the kickoff: the roadmap, locked until Kensho's post-kickoff link opens it. The card
   sits across the seam into the closing, the way Kensho's video sits across the seam at the top. */
.after,
.closing { --after-seam: clamp(96px, 11vw, 160px); }
/* The client's card, at the end of Meet the team, sits a short step above this card, and the
   circuit runs straight down from it into this card's lock (team.js). */
.after {
  padding: clamp(56px, 5.3vw, 76px) 0 0;
  background: var(--paper);
  color: var(--ink);
}
.after-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 380px;
  margin-bottom: calc(var(--after-seam) * -1);
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 56px);
  overflow: hidden;
  border-radius: 24px;
  background: #16161a;
  color: var(--cloud);
  text-align: center;
  box-shadow: 0 0 0 1px rgb(246 247 248 / 0.08), 0 36px 72px -28px rgb(20 19 16 / 0.42);
}
.after-locked,
.after-open {
  display: grid;
  justify-items: center;
  max-width: 34rem;
}
.after-locked[hidden],
.after-open[hidden] { display: none; }
.after-open-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.after-open-actions .action { margin-top: 0; }
/* The second button beside a yellow one: outlined, so the yellow one leads. */
.after-open-actions .action:not(.action--light),
.closing-actions .action:not(.action--light) {
  background: transparent;
  color: var(--cloud);
  box-shadow: inset 0 0 0 1.5px var(--cloud-56);
}
.after-open-actions .action:not(.action--light):hover,
.closing-actions .action:not(.action--light):hover { box-shadow: inset 0 0 0 1.5px var(--cloud); }
.lock {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid rgb(237 242 10 / 0.6);
  border-radius: 50%;
  color: var(--yellow);
  box-shadow: 0 0 28px rgb(237 242 10 / 0.16);
}
.lock svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.after-card .eyebrow { margin-top: 22px; }
.after-card h2 { margin-top: 10px; }
.after-hello {
  margin-top: 12px;
  color: var(--cloud);
  font: 600 clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)/1.35 var(--display);
  letter-spacing: -0.01em;
}
.after-hello + .after-text { margin-top: 6px; }
.after-open-title:focus { outline: none; }
.after-text {
  margin-top: 14px;
  color: var(--cloud-72);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  text-wrap: balance;
}

/* The headline's word measure for the name-fitting script. */
.fit-probe { position: absolute; visibility: hidden; white-space: nowrap; }

/* Closing: the page's sign-off (dark). The roadmap card drops into it across the seam, and the
   circuit ends here, on one last node above the biggest words on the page. -------------- */

.closing {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--cloud);
  padding-top: var(--after-seam);
  text-align: center;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: 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");
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(72% 52% at 50% 38%, #000 16%, transparent 74%);
  mask-image: radial-gradient(72% 52% at 50% 38%, #000 16%, transparent 74%);
  pointer-events: none;
}
.closing .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
}

/* The circuit's last stop: a wire from the roadmap card's lower edge down to one node. */
.closing-stop {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: clamp(64px, 8vw, 104px);
}
.closing-stop::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 10px;
  left: calc(50% - 0.75px);
  width: 1.5px;
  background: linear-gradient(rgb(237 242 10 / 0.28), rgb(237 242 10 / 0.8));
  transform-origin: top;
}
.closing-node {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
}
.closing-node::before,
.closing-node::after {
  content: "";
  position: absolute;
  inset: 3px;
  transform: rotate(45deg);
}
.closing-node::before {
  border: 1.5px solid var(--yellow);
  background: radial-gradient(circle, var(--yellow) 0 1.6px, var(--graphite) 2.2px);
  box-shadow: 0 0 18px rgb(237 242 10 / 0.35);
}
.closing-node::after {
  border: 1.5px solid var(--yellow);
  opacity: 0;
}

.closing-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(20px, 2.4vw, 28px);
}

.closing-title {
  max-width: 15ch;
  font-weight: 700;
  font-size: clamp(2.625rem, 1.2rem + 5.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.036em;
  overflow-wrap: anywhere;
}
.closing-title em {
  font-style: normal;
  color: var(--yellow);
  word-break: keep-all;
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 3.2vw, 36px);
}
.closing-actions .action {
  min-height: 56px;
  margin-top: 0;
  padding: 0 28px;
  font-size: 1.125rem;
}
/* Phones: both buttons on one line when they fit. */
@media (max-width: 599px) {
  .closing-actions { gap: 10px; }
  .closing-actions .action { padding: 0 20px; font-size: 1.0625rem; }
}
/* The smallest phones: the two buttons stack at one width, not ragged. */
@media (max-width: 359px) {
  .closing-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
  }
  .closing-actions .action { justify-content: center; }
}

/* Signed like Kensho's email: his face, and everyone behind him. */
.closing-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 5.5vw, 64px);
  color: var(--cloud-72);
  font-size: 1.0625rem;
  line-height: 1.45;
  text-align: left;
}
.closing-sign img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--graphite), 0 0 0 3.5px var(--cloud-14);
}
.closing-sign strong { color: var(--cloud); font-weight: 600; }
/* Kensho's own words, from the end of his video and under his name in his email. */
.closing-motto {
  display: inline-block;
  margin-top: 4px;
  color: var(--yellow);
  font: 600 1.0625rem/1.4 var(--display);
  letter-spacing: -0.005em;
}

/* The last stop arrives: the wire draws down, the node lands and pings, and the sign-off rises
   in. main.js arms it only when the closing starts below the screen. */
.closing.is-waiting .closing-stop::before { transform: scaleY(0); }
.closing.is-waiting .closing-node { opacity: 0; }
.closing.is-waiting .closing-note:not(:focus-within) { opacity: 0; transform: translateY(24px); }
.closing.is-lit .closing-stop::before { animation: rule-grow 800ms var(--ease-out) both; }
.closing.is-lit .closing-node { animation: node-pop 520ms var(--ease-spring) 620ms both; }
.closing.is-lit .closing-node::after { animation: diamond-ping 1800ms var(--ease-out) 1000ms 2; }
.closing.is-lit .closing-note { animation: rise-in 900ms var(--ease-out) 380ms both; }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--graphite);
  font: 600 1rem/1.2 var(--body);
  text-decoration: none;
  transition: background-color 160ms var(--ease);
}
.button:hover { background: #ffffff; }

.footer-bar {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: clamp(64px, 9vw, 112px);
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cloud-14);
  color: var(--cloud-56);
  font-size: 0.875rem;
  text-align: left;
}
.brand--footer {
  gap: 8px;
  color: var(--cloud-72);
  font-size: 0.875rem;
}
.brand--footer .brand-mark { width: 20px; height: 20px; }
.site-link {
  display: inline-block;
  padding: 11px 0;
  color: var(--cloud-72);
  text-decoration: none;
}
.site-link:hover { color: var(--cloud); }
/* "Replay the intro" sits beside the site link. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
}

@media (max-width: 639px) {
  .footer-bar { flex-direction: column; align-items: center; text-align: center; }
}

/* Small phones: give the roadmap text more room --------------------------- */
@media (max-width: 599px) {
  .stop {
    --rail-x: 18px;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
  }
  .stop h3 { font-size: 1.25rem; }
}

/* Motion -------------------------------------------------------------------
   The arrival: the circuit powers up, the lattice lights up around the
   client's name, and the pulse runs into Kensho's card, where the play button
   pings. Everything else explains state: "You are here" pings, the roadmap
   lights up stop by stop as you follow it, the invites arrive, and Chief's
   brief fills in. Content is visible by default; scripts only park elements
   that start fully below the screen. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(36px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@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 pill-ping {
  0% { box-shadow: 0 0 0 0 rgb(237 242 10 / 0.6); }
  28%, 100% { box-shadow: 0 0 0 16px rgb(237 242 10 / 0); }
}
@keyframes glint {
  0% { opacity: 0; transform: scale(0.2); }
  22% { opacity: 1; transform: scale(1.3); }
  36% { transform: none; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.85); }
}
@keyframes node-bump {
  0% { transform: none; }
  45% { transform: scale(1.3); }
  100% { transform: none; }
}
@keyframes diamond-ping {
  from { opacity: 0.75; transform: rotate(45deg) scale(1); }
  to { opacity: 0; transform: rotate(45deg) scale(2.6); }
}
@keyframes rule-grow {
  from { transform: scaleY(0); }
  to { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand { animation: rise-in 600ms var(--ease-out) both; }
  .hero-copy h1 { animation: rise-in 900ms var(--ease-out) 80ms both; }
  .lede { animation: rise-in 900ms var(--ease-out) 240ms both; }
  .hero-for { animation: rise-in 900ms var(--ease-out) 160ms both; }
  /* With the intro, it waits under the film like the lede, and rises in just behind the headline. */
  html.intro-on .hero-for { animation-play-state: paused; }
  html.intro-played .hero-for { animation-delay: 900ms; }
  .film { animation: card-in 1000ms var(--ease-out) 180ms both; }

  .circuit-traces path {
    stroke-dasharray: 1;
    animation: trace-draw 1100ms var(--ease-out) 450ms both;
  }
  .circuit-traces path:nth-child(2) { animation-delay: 650ms; }
  .circuit-traces path:nth-child(3) { animation-delay: 300ms; }
  .circuit-nodes .node {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-pop 520ms var(--ease-spring) both;
  }
  .circuit-nodes .node:nth-child(1) { animation-delay: 760ms; }
  .circuit-nodes .node:nth-child(2) { animation-delay: 880ms; }
  .circuit-nodes .node:nth-child(3) { animation-delay: 1000ms; }
  .circuit-nodes .node:nth-child(4) { animation-delay: 1120ms; }
  .circuit-nodes .node:nth-child(5) { animation-delay: 620ms; }
  .circuit-nodes .node:nth-child(6) { animation-delay: 1040ms; }

  /* The pulse reaches the card, then the play button answers. */
  .play-pill { animation: pill-ping 6s var(--ease-out) 3.4s 3; }
  .play.is-replay .play-pill { animation: none; }
  /* Phones mask the pulse, so answer sooner. */
  @media (max-width: 899px) {
    .play-pill { animation-delay: 2.4s; }
  }
  html { scroll-behavior: smooth; }
}

/* Celebration: the lattice lights up around the client's name, one node at a
   time, rippling out from the word, then settles back. */
.glints {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.glint {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  opacity: 0;
  animation: glint 1800ms var(--ease-out) var(--delay, 0ms) forwards;
}
.glint::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid var(--yellow);
  background: var(--graphite);
  box-shadow: 0 0 14px rgb(237 242 10 / 0.45);
  transform: rotate(45deg);
}
.glint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--yellow);
}
.glint--soft { animation-duration: 2600ms; }
.glint--soft::before {
  border-color: rgb(237 242 10 / 0.65);
  box-shadow: 0 0 10px rgb(237 242 10 / 0.3);
}
/* The stage's living background: short circuit traces that draw and fade. */
.ambient-traces {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ambient-trace {
  fill: none;
  stroke: var(--yellow);
  stroke-opacity: 0.38;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
@media (max-width: 599px) {
  .glint { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
}

/* Reveals: only elements the script parked below the fold wait. */
.reveal { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.is-pending { opacity: 0; transform: translateY(24px); transition: none; }
/* Roadmap text fades in place, so its label never drifts off its diamond. */
.stop-body.is-pending { transform: none; }

.stop-node::before { transition: border-color 400ms var(--ease), background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.stop.is-reached .stop-node { animation: node-bump 600ms var(--ease-spring); }
.stop.is-now.is-reached .stop-node::after { animation: diamond-ping 1800ms var(--ease-out) 300ms 3; }

/* Desktop: the card leans toward the pointer until the video starts. */
@media (hover: hover) and (pointer: fine) {
  .film-frame {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 500ms var(--ease-out);
  }
}

/* Night reading: people in dark mode get a soft charcoal instead of bright paper, a clear step up
   from the stage so the two registers and the video's seam still read, and the roadmap path
   becomes the stage's yellow circuit. */
@media (prefers-color-scheme: dark) {
  .paper {
    --paper: #1a1a20;
    --card: #24242b;
    --card-hover: #2c2c34;
    --ink: #f6f7f8;
    --ink-78: rgb(246 247 248 / 0.8);
    --ink-70: rgb(246 247 248 / 0.7);
    --ink-30: rgb(246 247 248 / 0.3);
    --ink-14: rgb(246 247 248 / 0.12);
    --path: var(--yellow);
    --path-text: var(--graphite);
    --path-glow: 0 0 10px rgb(237 242 10 / 0.5);
    --path-tip-glow: drop-shadow(0 0 4px rgb(237 242 10 / 0.6));
    border-top: 1px solid rgb(246 247 248 / 0.1);
  }
  .paper ::selection { background: var(--yellow); color: var(--graphite); }
  .after {
    background: #1a1a20;
    border-top: 1px solid rgb(246 247 248 / 0.1);
  }
  /* The channel's tile is graphite on a charcoal card: an edge keeps its shape. */
  .channel-icon { box-shadow: inset 0 0 0 1px rgb(246 247 248 / 0.14); }
  .paper .action:not(.action--light) { background: var(--yellow); color: var(--graphite); }
  .mail { box-shadow: none; }
  .film::before { box-shadow: 0 36px 72px -28px rgb(0 0 0 / 0.7); }
  /* At night the roadmap card stays a step darker than the charcoal paper it sits on, as it is by
     day, with the circuit's lit edge, so the end of the page has its light too. Fully lit once it
     opens. */
  .after-card {
    background: #121215;
    box-shadow: 0 0 0 1px rgb(237 242 10 / 0.45), 0 0 80px -20px rgb(237 242 10 / 0.3), 0 36px 72px -28px rgb(0 0 0 / 0.7);
  }
  .after-card.is-open {
    box-shadow: 0 0 0 1.5px rgb(237 242 10 / 0.8), 0 0 72px -12px rgb(237 242 10 / 0.5), 0 36px 72px -28px rgb(0 0 0 / 0.7);
  }
}

/* 404 */
.lost {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 48px 0;
  text-align: center;
}
.lost .lede { margin-inline: auto; }
.lost .closing-mark { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .circuit-pulse { display: none; }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}