@font-face { font-family: "GT Standard L"; src: url("../fonts/gt-standard-l.woff2?v=dc269709a1") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GT Standard M"; src: url("../fonts/gt-standard-m.woff2?v=cda7e28421") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT Standard Mono Narrow"; src: url("../fonts/gt-standard-mono-narrow.woff2?v=54606734ef") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  color-scheme: light dark;
  --white: #fff;
  --black: #0b0b0c;
  --bg: #fff;
  --fg: #0b0b0c;
  --grey-600: #686b73;
  --grey-500: #6e7077;
  --grey-200: #e8e9ec;
  --grey-100: #f5f6f8;
  --blue: #3f66fe;
  --accent: var(--blue);
  --team-logo: none;
  --end-bg: #0b0b0c;
  --mission-bg: #1d1d1f;
  --mission-edge: transparent;

  /* Read by hero.js. */
  --cv-ink: #26272b;
  --cv-mute: #8a8d94;
  --cv-bg: var(--bg);

  --pl-yellow: #f2c94c;
  --pl-blue: #3f66fe;
  --pl-pink: #e83fc6;
  --pl-green: #00b37a;
  --pd-yellow: #f2c94c;
  --pd-blue: #6f8cff;
  --pd-pink: #f17bd9;
  --pd-green: #63e0b0;
  --p-yellow: var(--pl-yellow);
  --p-blue: var(--pl-blue);
  --p-pink: var(--pl-pink);
  --p-green: var(--pl-green);
  --fc-1: var(--p-yellow);
  --fc-2: var(--p-blue);
  --fc-3: var(--p-pink);
  --fc-4: var(--p-green);

  --font-display: "GT Standard L", "Helvetica Neue", Arial, sans-serif;
  --font-text: "GT Standard M", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "GT Standard Mono Narrow", ui-monospace, "SF Mono", Menlo, monospace;

  --text-hero: clamp(2.75rem, 1rem + 9vw, 8.5rem);
  --text-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-lede: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);

  --fast: 160ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --beat: 80ms;

  --wrap: 72rem;
  --nav-h: 4.5rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(2.75rem, 0.5rem + 7vw, 7rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0b0c;
    --fg: #f5f6f8;
    --grey-600: #a0a3ab;
    --grey-500: #7d8088;
    --grey-200: #26272b;
    --grey-100: #161719;
    --blue: #6f8cff;
    --team-logo: invert(1);
    --end-bg: #111214;
    --mission-bg: #222327;
    --mission-edge: rgba(255, 255, 255, 0.1);

    --cv-ink: #e6e7ea;
    --cv-mute: #80838b;
    --p-yellow: var(--pd-yellow);
    --p-blue: var(--pd-blue);
    --p-pink: var(--pd-pink);
    --p-green: var(--pd-green);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-behavior: smooth; }
/* Keeps anchor jumps and focused content clear of the sticky nav and its fade. Not scroll-padding on the root: with that,
   focusing anything in the nav itself scrolls the page. */
[id], :where(main, footer) :is(a, button, summary) { scroll-margin-top: calc(var(--nav-h) + 2rem); }
/* Sections open with their own padding, so they land with their top tucked under the bar, hiding the section before. */
.section[id] { scroll-margin-top: calc(var(--nav-h) - 0.5rem); }
#careers { scroll-margin-top: calc(var(--nav-h) + 3rem); }
body {
  background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  transition: background-color 300ms ease, color 300ms ease;
}
/* Safari paints the overscroll bounce in body's background colour over html's, ignoring images, so while the footer is
   in view (.end-in) body paints its colour as an image and the bounce below the footer takes the footer's. */
.end-in { background: var(--end-bg); }
.end-in body { background: linear-gradient(var(--bg) 0 0); transition: color 300ms ease; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
svg { display: block; }
h1, h2, h3, strong, th, .btn, .arrow { font-family: var(--font-display); font-weight: 500; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}

.btn {
  display: inline-flex; align-items: center; height: 2.875rem; padding: 0 1.25rem;
  border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: 0.9375rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: opacity var(--fast) ease, transform var(--fast) var(--ease-out);
}
.btn:hover { opacity: 0.82; }
.btn:active { transform: scale(0.97); }
.btn-sm { height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }
.btn-light { background: var(--white); color: var(--black); }
.arrow { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; letter-spacing: -0.01em; }
.arrow::after { content: "\2192"; content: "\2192" / ""; transition: transform var(--fast) var(--ease-out); }
.arrow:hover::after { transform: translateX(3px); }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateY(14px); } }
@keyframes line-up { from { transform: translateY(105%); } }
.rise { animation: rise 700ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * var(--beat)); }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .reveal.stagger { opacity: 1; transform: none; }
.js .reveal.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--beat)); }
.js .reveal.in, .js .reveal.stagger.in > * { opacity: 1; transform: none; }
.stagger > :nth-child(2) { --i: 1; }
.stagger > :nth-child(3) { --i: 2; }

/* nav.js sets is-scrolled when the page leaves the top, and is-compact once the hero's top is under the bar. The bar's
   background runs on 2rem past its bottom edge and fades out, so content passes under it without a hard line. */
.nav { position: sticky; top: 0; z-index: 5; }
.nav::before {
  content: ""; position: absolute; inset: 0 0 -2rem; pointer-events: none; background: var(--bg);
  mask: linear-gradient(#000 calc(100% - 2.5rem), calc(100% - 1.1rem), transparent);
  opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s 240ms, background-color 300ms ease;
}
.nav.is-scrolled::before, html:not(.js) .nav::before { opacity: 1; visibility: visible; transition: opacity 240ms ease, background-color 300ms ease; }
.nav-row { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); animation: fade 500ms ease both; }
.nav-brand { --u: calc(5.75rem / 108); position: relative; }
.logo { display: flex; justify-content: space-between; width: calc(108 * var(--u)); height: calc(28 * var(--u)); }
.logo svg { height: 100%; fill: currentColor; }
.logo-mark { width: calc(34 * var(--u)); overflow: visible; }
.logo-word { width: calc(63 * var(--u)); }
/* The mark's three paths are its chevrons, right to left so the leftmost paints on top. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .logo-mark path { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
  .logo:is(:hover, :focus-visible) .logo-mark path:nth-child(1) { transform: translateX(1.5px); }
  .logo:is(:hover, :focus-visible) .logo-mark path:nth-child(3) { transform: translateX(-1.5px); }
}
.nav-links { display: flex; align-items: center; gap: 2rem; font-size: 0.9375rem; }
.nav-links a:not(.btn) {
  color: var(--grey-600); padding-block: 0.125rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--fast) ease, background-size 300ms var(--ease-out);
}
.nav-links a:not(.btn):hover { color: var(--fg); background-size: 100% 1px; }
/* nav.css styles the phone menu and the logo's morph into its button; nav.js loads it after the page. */
.nav-menu, .nav-sheet { display: none; }

@media (max-width: 56rem) {
  .nav-links { gap: 1.25rem; }
  .nav-links a:not(.btn):not(.nav-keep) { display: none; }
}

/* The hero fills the first screen below the nav, with the cards at the bottom and the map in the open space above them.
   On a short screen it grows past the fold rather than squeezing the lede against the cards. */
.hero {
  display: flex; flex-direction: column; min-height: calc(100vh - var(--above)); min-height: calc(100svh - var(--above));
  padding-top: clamp(2rem, 0.5rem + 9vw, 10rem); padding-bottom: clamp(1.5rem, 4svh, 3rem);
}
.hero h1 { font-size: var(--text-hero); line-height: 0.9; letter-spacing: -0.058em; }
.hero h1 .line { display: block; overflow: hidden; padding: 0 0.1em 0.12em 0; margin-bottom: -0.12em; }
.hero h1 .line > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; animation: line-up 900ms cubic-bezier(0.19, 1, 0.22, 1) both; animation-delay: calc((1 + var(--d, 0)) * var(--beat)); }
.hero .lede { max-width: 28.5em; margin-block: clamp(1.75rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.75rem + 1.5vw, 2rem); font-size: var(--text-lede); line-height: 1.45; color: var(--grey-600); text-wrap: pretty; }
.hero .lede b { color: var(--fg); font-weight: 400; }
.hero .lede.rise { animation-name: slide; }

.fc-board { position: relative; margin-top: auto; }
.fc-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; margin-top: 0.5rem; }
.fc-live { display: flex; align-items: baseline; gap: 0.4375rem; margin-left: auto; font-size: 0.75rem; color: var(--grey-500); white-space: nowrap; }
.fc-live i { position: relative; flex: none; align-self: center; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--fc-c, var(--accent)); }
.fc-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fc-c, var(--accent)); opacity: 0; }
.fc-card[aria-current="true"] .fc-live i::after { animation: ping 2s var(--ease-out) infinite; }
.fc-ago { transition: opacity 200ms ease; }
.fc-card:focus-visible { outline-offset: -2px; border-radius: 1rem; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(3); opacity: 0; } }
/* Bleeds up to 20rem into the right gutter and --pad into the left, where hero.js masks it; padding, not width, so cards
   still size to the column, and 1rem below for their rise. Past 107rem (the wrap plus 2 × (20rem − --pad)) the bleed no
   longer reaches the screen edge, so the mask's --end fades it out instead of cutting off. */
.fc-track {
  --bleed: min(20rem, (100vw - min(100vw, var(--wrap))) / 2 + max(var(--pad), env(safe-area-inset-right, 0px)));
  overflow-x: hidden; overflow-x: clip;
  margin: 0 calc(-1 * var(--bleed)) -1rem calc(-1 * var(--pad)); padding: 0 var(--bleed) 1rem var(--pad);
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.fc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.5rem) / 3.25); gap: 0.75rem; }
@media (hover: hover) { .fc-card:not([aria-current="true"]) { cursor: pointer; } }
@media (width > 107rem) { .fc-track { --end: #000 calc(100% - var(--bleed) + 2.25rem), transparent calc(100% - 5.75rem), transparent; } }
.fc-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.875rem;
  padding: 1.25rem 1.375rem 1.375rem; border-radius: 1rem; background: var(--grey-100);
  transition: background-color 300ms ease;
  animation: rise 700ms var(--ease-out) both; animation-delay: calc((6.5 + var(--i, 0)) * var(--beat));
}
.fc-q { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }
.fc-p { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); line-height: 0.95; letter-spacing: -0.05em; color: var(--fc-c, var(--accent)); }
.fc-p sup { font-size: 0.45em; letter-spacing: -0.02em; vertical-align: 0.85em; margin-left: 0.04em; }
.fc-p small { font-size: 0.4em; letter-spacing: -0.01em; margin-left: 0.2em; }
.fc-lbl { font-size: 0.8125rem; color: var(--grey-600); }

.shell { --above: 4.5rem; position: relative; overflow-x: clip; isolation: isolate; }
.bg-stage { position: absolute; top: calc(-1 * var(--above)); right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
/* A smootherstep fade, carried further down in places by two rows of soft lobes whose periods differ so the edge never
   visibly repeats. It starts higher on narrow screens, where the cards do. */
.fx {
  --fade-h: min(100%, 85% + 1.25vw);
  --lobe: rgba(0,0,0,0.6), rgba(0,0,0,0.59) 12.5%, rgba(0,0,0,0.54) 25%, rgba(0,0,0,0.43) 37.5%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.17) 62.5%, rgba(0,0,0,0.06) 75%, rgba(0,0,0,0.012) 87.5%, transparent;
  --mask: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.5) 38%, #000 68%),
    linear-gradient(180deg, #000 46%, rgba(0,0,0,0.98) 52%, rgba(0,0,0,0.9) 58%, rgba(0,0,0,0.72) 64%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.28) 76%, rgba(0,0,0,0.1) 82%, rgba(0,0,0,0.02) 88%, transparent 94%),
    radial-gradient(50% 42% at 50% 56%, var(--lobe)),
    radial-gradient(50% 38% at 50% 60%, var(--lobe));
  position: absolute; inset: 0; opacity: 0; transition: opacity 450ms ease;
  -webkit-mask-image: var(--mask);
  -webkit-mask-composite: source-in, source-over, source-over, source-over;
  mask-image: var(--mask);
  mask-composite: intersect, add, add, add;
  mask-size: 100% 100%, 100% var(--fade-h), 54rem var(--fade-h), 37rem var(--fade-h);
  mask-position: 0 0, 0 0, 0 0, 20rem 0;
  mask-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
}
.fx.show { opacity: 1; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Thins the map behind the lede so it reads at 4.5:1 (WCAG 1.4.3). Adding "outside the lede's columns", "outside its rows"
   and a floor leaves only the floor inside its box (set by hero.js), easing back over --soft. */
.fx canvas {
  --soft: 2.5rem; --floor: rgba(0,0,0,0.1);
  --thin: linear-gradient(var(--floor), var(--floor)),
    linear-gradient(90deg, #000 calc(var(--lx0) - var(--soft)), transparent var(--lx0), transparent var(--lx1), #000 calc(var(--lx1) + var(--soft))),
    linear-gradient(180deg, #000 calc(var(--ly0) - var(--soft)), transparent var(--ly0), transparent var(--ly1), #000 calc(var(--ly1) + var(--soft)));
  -webkit-mask-image: var(--thin); mask-image: var(--thin);
}
/* Above phone width the stage runs --below past the cards, and lobes of different periods and depths carry the fade down
   unevenly, the deepest trailing faint glyphs under the cards. A lobe's depth is its tile's height: Chrome won't size a
   gradient's ellipse with a calc() that mixes % and lengths. */
@media (width > 40rem) {
  .bg-stage { --below: min(4.5rem, var(--section) - 1rem); bottom: calc(-1 * var(--below)); }
  .fx {
    --fade-h: min(100% - var(--below), 85% - 0.85 * var(--below) + 1.25vw);
    --lobe: rgba(0,0,0,0.5), rgba(0,0,0,0.475) 20%, rgba(0,0,0,0.375) 40%, rgba(0,0,0,0.27) 55%, rgba(0,0,0,0.175) 70%, rgba(0,0,0,0.125) 80%, rgba(0,0,0,0.085) 88%, rgba(0,0,0,0.05) 94%, rgba(0,0,0,0.016) 98%, transparent;
    --mask: linear-gradient(90deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.5) 38%, #000 68%),
      linear-gradient(180deg, #000 58%, rgba(0,0,0,0.98) 62.5%, rgba(0,0,0,0.9) 67%, rgba(0,0,0,0.72) 71.5%, rgba(0,0,0,0.5) 76%, rgba(0,0,0,0.28) 80.5%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.02) 89.5%, transparent 94%),
      radial-gradient(36% 47% at 50% 53%, var(--lobe)),
      radial-gradient(30% 41% at 50% 59%, var(--lobe)),
      radial-gradient(36% 35% at 50% 65%, var(--lobe));
    -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over;
    mask-composite: intersect, add, add, add, add;
    mask-size: 100% 100%, 100% var(--fade-h), 54rem 100%, 37rem calc(100% - 0.8 * var(--below)), 23rem calc(1.02 * var(--fade-h));
    mask-position: 0 0, 0 0, 0 0, 20rem 0, 9rem 0;
    mask-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x;
  }
}

/* On phones the hero fills the first screen below the nav, with the cards at the bottom and the map in the band between
   them and the lede. The map is dimmed behind the headline and lede, down to --lede (the lede's bottom, set by hero.js),
   rather than towards the left as on desktop, and fades out just above the cards instead of on #10's lobes. */
@media (max-width: 40rem) {
  .shell { --above: 3.75rem; }
  .hero {
    display: flex; flex-direction: column; min-height: calc(100vh - var(--above)); min-height: calc(100svh - var(--above));
    padding-top: 1.25rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  }
  .fx {
    --mask: linear-gradient(180deg, rgba(0,0,0,0.35) calc(var(--lede, 16rem) - 2rem), #000 var(--lede, 16rem),
      #000 calc(100% - 18rem), rgba(0,0,0,0.85) calc(100% - 16.5rem), rgba(0,0,0,0.5) calc(100% - 15rem),
      rgba(0,0,0,0.15) calc(100% - 13.5rem), transparent calc(100% - 12rem));
    -webkit-mask-composite: source-over; mask-composite: add;
    mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat;
  }
}

.section { padding-top: var(--section); }
.section h2, .band h2, .cta h2 { font-size: var(--text-h2); line-height: 1; letter-spacing: -0.048em; max-width: 16ch; text-wrap: balance; }
.section .lede, .band .lede { margin-top: 1.5rem; max-width: 34rem; font-size: var(--text-lede); line-height: 1.45; color: var(--grey-600); text-wrap: pretty; }
#calls .lede { max-width: 38em; text-wrap: balance; }
.lead-in { margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem); }

#calls { --accent: var(--p-yellow); }
#product { --accent: var(--p-pink); }
#about { --accent: var(--p-green); }

.tr-line { padding-bottom: 0.75rem; font-size: 1.0625rem; color: var(--grey-600); text-wrap: pretty; }
.tr-line strong { color: var(--fg); }
.tr-link { margin-top: 1rem; align-self: start; }
.tr-grid { --tr-num: 1.5rem; --tr-meta: 0.8125rem; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; }
.tr-col { display: flex; flex-direction: column; }
.tr-col > :has(+ .tr-link) { margin-bottom: auto; }
.tr-col .tr-line { padding-bottom: 0.875rem; border-bottom: 1px solid var(--grey-200); }

.mc { position: relative; margin-top: 1.5rem; container-type: inline-size; }
.mc-plot { position: relative; height: clamp(9rem, 7.5rem + 3vw, 11rem); }
.mc-area { position: absolute; inset: 2.25rem 0 2.25rem; }
.mc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc-line-m { stroke: var(--accent); }
.mc-line-ai { stroke: var(--grey-200); stroke-width: 1.5; }
.mc-s { list-style: none; }
.mc-s li { position: absolute; left: var(--x); top: var(--y); }
.mc-s li::before { content: ""; position: absolute; left: -0.25rem; top: -0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.mc-m li::before { background: var(--accent); }
.mc-ai li::before { background: var(--grey-500); }
.mc-lab { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 500; font-size: var(--tr-num); letter-spacing: -0.03em; }
.mc-m .mc-lab { bottom: 0.5rem; color: var(--accent); }
.mc-ai .mc-lab { top: 0.5rem; color: var(--grey-500); }
.mc-s li:first-child .mc-lab { transform: none; left: -0.25rem; }
.mc-s li:last-child .mc-lab { transform: translateX(-100%); left: 0.25rem; }
.mc-x { position: relative; height: 1rem; margin-top: 0.25rem; font-size: var(--tr-meta); color: var(--grey-500); }
.mc-x span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.mc-x span:first-child { transform: none; left: 0; }
.mc-x span:last-child { transform: translateX(-100%); left: 100%; }
@container (max-width: 22.5rem) {
  .mc-x { height: 2.6em; }
  .mc-x span { width: min-content; white-space: normal; line-height: 1.3; text-align: center; }
  .mc-x span:first-child { text-align: left; }
  .mc-x span:last-child { text-align: right; }
}
.mc-keys { position: absolute; top: -0.875rem; left: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--tr-meta); color: var(--grey-600); }
.mc-key { display: inline-flex; align-items: center; gap: 0.5rem; }
.mc-key::before { content: ""; width: 0.875rem; height: 2px; border-radius: 1px; }
.mc-key-m::before { background: var(--accent); }
.mc-key-ai::before { background: var(--grey-500); }
@container (width < 21rem) { .mc-plot { margin-top: 1.375rem; } }

.pm { flex: 1; display: grid; align-content: space-evenly; gap: 1.25rem; margin-top: 1.5rem; }
.pm-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.75rem; }
.pm-v { font-family: var(--font-display); font-weight: 500; font-size: var(--tr-num); line-height: 1; letter-spacing: -0.03em; color: var(--grey-500); }
.pm-m { color: var(--accent); }
.pm-k { font-size: var(--tr-meta); color: var(--grey-600); }
.pm-bar { grid-column: 1 / -1; height: 0.25rem; margin-top: 0.625rem; border-radius: 1px; background: var(--grey-100); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: var(--w); background: var(--grey-500); }
.pm-row:first-child .pm-bar i { background: var(--accent); }
.pm-note { margin-top: 1rem; max-width: 26rem; font-size: var(--tr-meta); color: var(--grey-500); }

.js .mc-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1) 150ms; }
.js .mc-line-ai { transition-delay: 0ms; }
.js .mc-s li { opacity: 0; transition: opacity 400ms ease; transition-delay: calc(150ms + var(--i) * 420ms); }
.js .pm-bar i { transform: scaleX(0); transform-origin: left; transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1) 250ms; }
.js .pm-row + .pm-row .pm-bar i { transition-delay: 400ms; }
.js .in .mc-line { stroke-dashoffset: 0; }
.js .in .mc-s li { opacity: 1; }
.js .in .pm-bar i { transform: none; }

@media (max-width: 56rem) {
  .tr-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}
@media (max-width: 40rem) {
  .tr-grid { --tr-num: 1.25rem; --tr-meta: 0.75rem; }
}

.calls-head, .call summary { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 7rem 4rem 2.5rem; align-items: center; }
.calls-head { align-items: baseline; padding-bottom: 0.875rem; font-size: 0.875rem; color: var(--grey-600); border-bottom: 1px solid var(--grey-200); }
.calls-head span:nth-child(4) { text-align: right; }
.call { border-bottom: 1px solid var(--grey-200); }
.call summary { list-style: none; cursor: pointer; padding-block: 1rem; -webkit-tap-highlight-color: transparent; }
.call summary::-webkit-details-marker { display: none; }
.call .q { padding-right: 2rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.02em; text-wrap: pretty; transition: color var(--fast) ease; }
@media (hover: hover) { .call summary:hover .q { color: var(--accent); } }
.call .q small { display: block; margin-top: 0.25rem; font-family: var(--font-text); font-weight: 400; font-size: 0.875rem; letter-spacing: 0; color: var(--grey-600); }
.call .n { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.call .m { color: var(--p-yellow); }
.call .c { color: var(--grey-500); }
.call .r { text-align: right; font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1; }
.toggle { position: relative; justify-self: end; align-self: center; width: 0.875rem; height: 0.875rem; transition: transform 380ms var(--ease-out); }
.toggle::before, .toggle::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; margin-top: -0.75px; background: var(--grey-600); border-radius: 1px; transition: background-color var(--fast) ease; }
.toggle::after { transform: rotate(90deg); }
.call summary:hover .toggle::before, .call summary:hover .toggle::after { background: var(--fg); }
.call[open] .toggle { transform: rotate(45deg); }
.call-body { overflow: hidden; }
.call-inner { max-width: 44rem; padding-bottom: 2rem; color: var(--grey-600); }
.call.closing .toggle { transform: none; }
.call-body blockquote { margin-block: 1.25rem; padding-left: 1.25rem; border-left: 2px solid var(--accent); font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.45; letter-spacing: -0.015em; color: var(--fg); }
.call-body cite { display: block; margin-top: 0.5rem; font-family: var(--font-text); font-weight: 400; font-style: normal; font-size: 0.875rem; letter-spacing: 0; color: var(--grey-600); }
.call-body b { color: var(--fg); font-weight: 400; }
.cc { position: relative; height: clamp(7.5rem, 5rem + 8vw, 10rem); margin: 0.5rem 3.5rem 3rem 0; font-size: 0.75rem; line-height: 1; }
.cc svg { width: 100%; height: 100%; overflow: visible; }
.cc path { fill: none; stroke: var(--grey-500); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cc .cc-m { stroke: var(--accent); stroke-width: 2; }
.cc > * { position: absolute; white-space: nowrap; }
.cc i { left: var(--b); top: var(--by); bottom: -0.375rem; border-left: 1px dotted var(--grey-500); }
.cc .cc-dm { left: var(--a); top: var(--ay); }
.cc i::before { content: ""; position: absolute; left: -0.28rem; top: -0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grey-500); box-shadow: 0 0 0 2px var(--grey-100); }
.cc .cc-dm::before { background: var(--accent); }
.cc i::after { content: ""; position: absolute; left: 0.5px; bottom: -2px; width: 5px; height: 5px; border: solid var(--fg); border-width: 0 0 1px 1px; rotate: 45deg; }
.cc .cc-dc::after { left: -6.5px; rotate: -135deg; }
.cc::before, .cc::after { content: ""; position: absolute; inset: auto 0 0; border-top: 1px solid var(--grey-200); }
.cc::after { left: var(--a); right: calc(100% - var(--b)); bottom: -0.375rem; border-color: var(--fg); }
.cc b { left: calc(100% + 0.5rem); top: var(--y); translate: 0 -50%; }
.cc .cc-lc { color: var(--grey-600); }
.cc span { top: calc(100% + 0.875rem); }
.cc span:last-child { right: 0; }
.cc .cc-lead { left: clamp(6rem, (var(--a) + var(--b)) / 2, 100% - 6rem); translate: -50%; font-family: var(--font-display); font-weight: 500; color: var(--fg); }

.band { margin-top: var(--section); padding-block: clamp(2.75rem, 0.5rem + 6vw, 6rem); background: var(--grey-100); }
.band + .mission { margin-top: 0; }
@media (max-width: 40rem) { .band { padding-block: 2.5rem; } }

/* Product illustration, drawn by product.js: a stage beside the heading plays each step's animation in turn while that
   step is highlighted. */
.product-head { display: grid; grid-template-columns: minmax(20rem, 34rem) minmax(0, 1fr); gap: 2rem 3rem; }
.stage-wrap { justify-self: center; align-self: end; width: 100%; max-width: 21rem; }
.stage { display: grid; }
.s-scene { grid-area: 1 / 1; opacity: 0; transition: opacity 400ms ease; }
.s-scene.on { opacity: 1; }
.s-lbl { margin-bottom: 0.875rem; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-label); }
.s-lbl span { color: var(--e-acc); }
.s-art { display: block; width: 100%; height: auto; aspect-ratio: 240 / 96; overflow: visible; }

#product.rotating .steps li > * { transition: color 600ms ease; }
#product.rotating .steps li::before { transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1), background-color 600ms ease; transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--beat)), 0ms; }
#product.rotating .steps li.on::before { background: var(--e-acc); }
#product.rotating .steps li:not(.on) h3 { color: var(--grey-500); }
#product.rotating .steps li:not(.on) p { color: var(--grey-500); }
@media (hover: hover) { .steps li:hover { --grey-500: var(--grey-600); } }

#product {
  --e-muted: color-mix(in srgb, var(--fg) 14%, transparent); --e-ink: var(--fg); --e-why: color-mix(in srgb, var(--fg) 50%, transparent);
  --e-acc: var(--accent); --e-acc2: var(--grey-500); --e-tint: color-mix(in srgb, var(--e-acc) 14%, transparent);
  --e-label: var(--grey-500); --e-line: color-mix(in srgb, var(--fg) 22%, transparent);
}

.s-dot { fill: var(--e-ink); }
.s-dot.lit { fill: var(--e-acc); fill-opacity: 1; }
#s-trail stop { stop-color: var(--e-acc); }
.s-beam { stroke: var(--e-acc); stroke-width: 1.25; }
.s-ring { fill: none; stroke: var(--e-acc); }
.s-p { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -0.05em; fill: var(--e-ink); }
.s-pc { font-size: 16px; fill: var(--e-acc); }
.s-muted { fill: var(--e-muted); }
.s-why { fill: var(--e-why); }
.s-area { fill: var(--e-tint); }
.s-curve { fill: none; stroke: var(--e-acc); stroke-width: 1.5; stroke-linejoin: round; }
.s-mark { fill: none; stroke: var(--e-acc); stroke-dasharray: 2 2.5; }
.s-axis { fill: none; stroke: var(--e-line); }
.s-line { fill: none; stroke: var(--e-acc); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.s-head { fill: var(--e-acc); }
.s-ping { fill: none; stroke: var(--e-acc); }
.s-val { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: -0.02em; fill: var(--e-ink); }
.s-news path { fill: none; stroke: var(--e-acc2); stroke-dasharray: 2 2.5; }
.s-news circle { fill: var(--bg); stroke: var(--e-acc2); stroke-width: 1.25; }

@media (max-width: 56rem) {
  .product-head { grid-template-columns: minmax(0, 1fr); }
  .stage-wrap { justify-self: start; }
}

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.steps li { position: relative; padding-top: 1.25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.steps button) { all: unset; }
.steps li::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--fg); transform-origin: left; }
.js .steps li::before { transform: scaleX(0); transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: inherit; }
.js .steps.in li::before { transform: none; }
.steps h3 { font-size: 1.625rem; letter-spacing: -0.035em; line-height: 1.1; }
.steps p { margin-top: 0.625rem; max-width: 20rem; color: var(--grey-600); text-wrap: pretty; }
@media (max-width: 56rem) { .steps { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; } .steps p { max-width: 40rem; } }
@media (max-width: 40rem) { .steps li { padding-top: 0.875rem; } .steps h3 { font-size: 1.25rem; } .steps p { margin-top: 0.375rem; } }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; }
.split .body { padding-top: 0.5rem; font-size: 1.1875rem; line-height: 1.5; color: var(--grey-600); }
.split .body p { text-wrap: pretty; }
.split .body b { color: var(--fg); font-weight: 400; }
.split .body p a { text-decoration: underline 1px var(--grey-500); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.22em; transition: color var(--fast) ease, text-decoration-color var(--fast) ease; }
.split .body p a:hover { color: var(--fg); text-decoration-color: var(--accent); }
.careers {
  margin-top: clamp(2.5rem, 0.5rem + 6vw, 7rem); padding: clamp(2rem, 1rem + 4vw, 4rem); border-radius: 1.5rem;
  background: var(--grey-100);
  background: color-mix(in srgb, var(--p-green) 9%, var(--grey-100));
  --under: color-mix(in srgb, var(--p-green) 9%, var(--grey-100));
}
.careers .body { padding-top: 0.75rem; }
.careers .arrow { margin-top: 1.75rem; color: var(--fg); }
.careers .arrow::after { color: var(--accent); }

.film { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: fit-content; max-width: 100%; margin-top: 1.75rem; padding: 0; border: 0; border-radius: 0.75rem; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.film-thumb { position: relative; flex: none; width: 32rem; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.75rem; background: var(--grey-100); }
.film-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.film-thumb svg { position: absolute; inset: 0; width: 22%; height: auto; margin: auto; }
.film-thumb circle { fill: rgba(255, 255, 255, 0.92); }
.film-thumb path { fill: var(--black); }
.film-label { display: flex; flex-direction: column; gap: 0.125rem; font-family: var(--font-display); font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.01em; }
.film-label small { font: 400 0.8125rem/1.3 var(--font-mono); color: var(--grey-600); }
@media (hover: hover) { .film:hover .film-thumb img { transform: scale(1.04); } }
@media (max-width: 40rem) {
  .film { align-items: center; margin-inline: auto; }
  .film-thumb { width: min(20rem, (100vw - 2 * var(--pad)) * 0.8); }
  .film-label { align-items: center; text-align: center; }
}
html:has(.film-dialog[open]) { overflow: hidden; }
.film-dialog { width: 100%; max-width: none; height: 100%; max-height: none; padding: 4rem var(--pad); border: 0; background: none; }
.film-dialog[open] { display: grid; place-items: center; animation: fade 240ms ease both; }
.film-dialog::backdrop { background: rgba(11, 11, 12, 0.92); animation: fade 240ms ease both; }
.film-frame { position: relative; width: min(100%, 72rem, (100dvh - 8rem) * 16 / 9); aspect-ratio: 16 / 9; }
.film-frame video { display: block; width: 100%; height: 100%; border-radius: 0.75rem; background: var(--black); }
.film-close {
  position: absolute; right: 0; bottom: calc(100% + 0.75rem);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: var(--white); cursor: pointer; transition: background-color var(--fast) ease;
}
.film-close:hover { background: rgba(255, 255, 255, 0.2); }
.film-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.demo-frame { position: relative; width: min(100%, 50rem); min-width: 0; }
/* HubSpot's embed sizes the iframe to the height it asks for, so a shorter box would have to scroll the iframe, which
   touch scrolling over a cross-origin iframe doesn't reliably do on iOS. The iframe fills the box instead and scrolls its
   own page, which keeps its Back and Confirm bar in view. 44.75rem is about the height HubSpot asks for. */
.demo-frame div { display: grid; height: min(100dvh - 8rem, 44.75rem); overflow: hidden; border-radius: 0.75rem; background: var(--white); color-scheme: light; }
.demo-frame iframe { min-width: 0 !important; height: 100% !important; min-height: 0 !important; }
.demo-frame .film-close { top: 0; right: auto; bottom: auto; left: calc(100% + 0.75rem); }
@media (max-width: 60rem) {
  .demo-frame .film-close { z-index: 1; top: 0.5rem; right: 0.5rem; left: auto; width: 2.5rem; height: 2.5rem; background: rgba(11, 11, 12, 0.72); }
  .demo-frame .film-close:hover { background: rgba(11, 11, 12, 0.88); }
}
@media (max-width: 40rem) {
  .demo-dialog { height: 100dvh; padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)); }
  .demo-frame { width: 100%; height: 100%; }
  .demo-frame div { height: 100%; }
}

.marquee { position: relative; overflow: hidden; overflow: clip; }
/* The edges fade into the band's colour, painted over the moving track: a mask instead is recomposited every frame. */
.marquee::before, .marquee::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 2.5rem; background: linear-gradient(90deg, var(--under), transparent); pointer-events: none; }
.marquee::after { left: auto; right: 0; background: linear-gradient(270deg, var(--under), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur) linear infinite; }
.marquee-track > li { flex: none; padding-right: var(--gap, 2.5rem); white-space: nowrap; }
.js .marquee:not(.on) .marquee-track { animation-play-state: paused; }
@media (hover: hover) { .press-list:hover .marquee-track { animation-play-state: paused; } }
/* Keyboard focus stops a marquee and makes it scrollable, so site.js can bring the focused link into view. */
.marquee:has(:focus-visible) { overflow-x: auto; scrollbar-width: none; padding: 0.375rem; margin: -0.375rem; scroll-padding-inline: 0.375rem; }
.marquee:has(:focus-visible)::before, .marquee:has(:focus-visible)::after { content: none; }
.marquee:has(:focus-visible) .marquee-track { animation: none; }
@keyframes marquee { to { transform: translateX(calc(-100% / var(--copies))); } }
.press-band { --under: var(--grey-100); margin-top: clamp(2rem, 1rem + 2.5vw, 3.25rem); background: var(--under); }
.press-row { display: flex; align-items: center; gap: 1.5rem; padding-block: 1.125rem; line-height: 1; }
.press-label { flex: none; font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); }
.press-row .marquee { flex: 1; min-width: 0; }
.press-list { --gap: 3.5rem; }
.press-list a { display: inline-flex; align-items: center; height: 2.25rem; }

.mission { margin-top: var(--section); padding-block: clamp(2.25rem, 1rem + 4vw, 5rem); background: var(--mission-bg); color: var(--white); box-shadow: inset 0 1px 0 var(--mission-edge); transition: background-color 300ms ease; }
.mission h2 { font-size: var(--text-h2); line-height: 1; letter-spacing: -0.048em; }
.mm { position: relative; container-type: inline-size; max-width: 50rem; margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem); }
.mm-yellow { --a: --y; --c: #f2c94c; --c-bg: rgba(242, 201, 76, 0.14); }
.mm-blue { --a: --b; --c: #6f8cff; --c-bg: rgba(63, 102, 254, 0.22); }
.mm-pink { --a: --p; --c: #f17bd9; --c-bg: rgba(241, 123, 217, 0.16); }
.mm-green { --a: --g; --c: #63e0b0; --c-bg: rgba(99, 224, 176, 0.14); }
.mm-row { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 0 0.3em; margin-top: 0.12em; font-family: var(--font-display); font-weight: 500; font-size: min(4.25rem, 7.4cqi); line-height: 1.12; letter-spacing: -0.045em; }
.mm-num { align-self: center; margin-right: 0.3em; font-family: var(--font-mono); font-weight: 400; font-size: max(0.36em, 0.6875rem); letter-spacing: 0; color: #8b8e95; }
.mm-box { display: inline-block; white-space: nowrap; padding: 0 0.22em 0.06em; border: 1.5px solid var(--c); background: var(--c-bg); color: var(--c); }
.mm-note { position: relative; z-index: 1; max-width: 30ch; font-family: var(--font-mono); font-size: min(1rem, max(0.6875rem, 3.05cqi)); line-height: 1.75; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.mm-note.mm-blue { margin-left: 32%; max-width: 54ch; }
.mm-note.mm-yellow { margin: clamp(0.75rem, 0.5rem + 1vw, 1.5rem) 0 clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 21%; }
.mm-note.mm-pink { max-width: 46ch; margin: clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 0 0 34%; padding-left: 0.25rem; }
.mm-note.mm-green { margin-top: clamp(1rem, 0.75rem + 1.5vw, 2rem); }
.mm-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mm-wires .wire { fill: none; stroke-width: 1.25; stroke-dasharray: 3 4; }
.mm-wires .draw { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (min-width: 72rem) { @supports (anchor-name: --a) {
  .mm { display: flex; flex-wrap: wrap; column-gap: 1.11rem; max-width: none; padding: 7rem 0 8rem; }
  .mm::after { content: ""; flex-basis: 100%; order: 1; }
  #mm-r2 ~ p { order: 2; }
  .mm-row { font-size: 3.7rem; }
  .mm-box { anchor-name: var(--a); }
  .mm .mm-note { position: absolute; position-anchor: var(--a); top: 0; left: calc(anchor(center) + 3rem); margin: 0; }
  .mm-note.mm-pink, .mm-note.mm-green { top: calc(anchor(bottom) + 4.5rem); }
} }

.js .mm-box { clip-path: inset(0 100% 0 0); transition: clip-path 700ms cubic-bezier(0.65, 0, 0.35, 1) var(--t); }
.js .mm-num, .js .mm-to { opacity: 0; transition: opacity 500ms ease var(--t); }
.js .mm-note { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out) var(--t), transform 800ms var(--ease-out) var(--t); }
.js .mm-wires .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 520ms cubic-bezier(0.65, 0, 0.35, 1); }
.js .mm.in .mm-box { clip-path: inset(0); }
.js .mm.in .mm-num, .js .mm.in .mm-to, .js .mm.in .mm-note { opacity: 1; transform: none; }
.js .mm.in .mm-wires .draw { stroke-dashoffset: 0; }

.team { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--grey-200); }
.team p { font-size: 0.875rem; color: var(--grey-600); }
.team .marquee { --gap: 2.5rem; margin-top: 1rem; }
.team li { display: flex; align-items: center; height: 2.5rem; }

.footer-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--white); }

@media (max-width: 40rem) {
  .mm-note.mm-blue { margin-left: 22%; }
  .mm-note.mm-yellow { margin-left: 30cqi; }
  .mm-note.mm-pink { margin-left: 8%; }
}

.lg { display: block; height: var(--h); aspect-ratio: var(--r); }
.press-list .lg { background: var(--grey-500); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: background-color var(--fast) ease; }
.press-list a:hover .lg { background: var(--fg); }
.team-list .lg { background: var(--src) center / contain no-repeat; opacity: 0.8; filter: var(--team-logo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lg-reuters { --src: url("../logos/reuters.svg?v=8fea570a45"); --r: 3.9594; --h: 25px; }
.lg-the-economist { --src: url("../logos/the-economist.svg?v=40bf9a224f"); --r: 6.8810; --h: 23px; }
.lg-the-guardian { --src: url("../logos/the-guardian.svg?v=0d9661f55c"); --r: 5.7222; --h: 22px; }
.lg-time { --src: url("../logos/time.svg?v=6fca274810"); --r: 3.4000; --h: 19px; }
.lg-the-atlantic { --src: url("../logos/the-atlantic.svg?v=c3bf238a02"); --r: 2.8624; --h: 27px; }
.lg-polymarket { --src: url("../logos/polymarket.svg?v=e3be4bfd89"); --r: 5.4226; --h: 24px; }
.lg-google { --src: url("../logos/google.svg?v=0e7718afdd"); --r: 3.1864; --h: 28.6px; }
.lg-citadel { --src: url("../logos/citadel.svg?v=102516bfde"); --r: 8.1724; --h: 17.8px; }
.lg-palantir { --src: url("../logos/palantir.png?v=e8525143a2"); --r: 4.1463; --h: 25px; }
.lg-university-of-oxford { --src: url("../logos/university-of-oxford.svg?v=edfc037051"); --r: 3.3519; --h: 27.9px; }
.lg-university-of-cambridge { --src: url("../logos/university-of-cambridge.svg?v=7ac1df3911"); --r: 4.7234; --h: 23.5px; }
.lg-goldman-sachs { --src: url("../logos/goldman-sachs.svg?v=c88e7f1cb9"); --r: 2.4000; --h: 32.9px; }
.lg-mckinsey-and-company { --src: url("../logos/mckinsey-and-company.svg?v=69adb25f55"); --r: 3.2075; --h: 28.5px; }
.lg-bank-of-england { --src: url("../logos/bank-of-england.svg?v=ef6dc16f7a"); --r: 4.0339; --h: 25.4px; }
.lg-google-deepmind { --src: url("../logos/google-deepmind.svg?v=a03b4870b2"); --r: 4.3150; --h: 24.5px; }
.lg-cern { --src: url("../logos/cern.svg?v=8bcff84449"); --r: 1.0114; --h: 36px; }
.lg-ucl { --src: url("../logos/ucl.svg?v=4f605d6afe"); --r: 3.5652; --h: 21px; }
.lg-downing-street { --src: url("../logos/downing-street.svg?v=0253935686"); --r: 1.0000; --h: 28px; }
@media (max-width: 40rem) { .lg { height: calc(var(--h) * 0.8); } }

/* A dark band in both themes, so it takes the dark palette. */
.end {
  --p-yellow: var(--pd-yellow); --p-blue: var(--pd-blue); --p-pink: var(--pd-pink); --p-green: var(--pd-green);
  --accent: var(--p-blue);
  margin-top: var(--section); background: var(--end-bg); color: var(--white); transition: background-color 300ms ease;
}
.cta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; padding-block: clamp(3.5rem, 1.5rem + 6vw, 8rem); }
.footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding-block: 2rem 2.5rem; border-top: 1px solid #222326; font-size: 0.875rem; color: #8b8e95; }
.footer svg { width: 1.5rem; fill: var(--white); }
.footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.footer a { transition: color var(--fast) ease; }
.footer a:hover { color: var(--white); }
.footer-x, .footer-in { display: inline-flex; vertical-align: -0.15em; padding: 0.3125rem; margin: -0.3125rem; }
.footer .footer-x svg, .footer .footer-in svg { width: 0.875rem; fill: currentColor; }
.footer-pair { white-space: nowrap; }
.footer-pair a + a { margin-left: 2rem; }
.footer-pair .footer-in { margin-left: calc(2rem - 0.3125rem); }
.footer-co { flex-basis: 100%; font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }

@media (max-width: 56rem) {
  .fc-rail { grid-auto-columns: calc((100% - 0.75rem) / 2.2); }
}
@container (max-width: 22rem) {
  .mm-note.mm-yellow { max-width: 11ch; }
}
@media (max-width: 40rem) {
  :root {
    --text-lede: 1rem; --text-h2: 2rem; --section: 2.75rem; --nav-h: 3.75rem;
    /* "Superhuman" is 5.16em wide, and its line keeps 0.1em clear on the right, so this fills the width up to 30rem. */
    --text-hero: clamp(2.75rem, (100vw - 2 * var(--pad)) / 5.3, 5.25rem);
  }
  body { font-size: 0.875rem; }
  .hero .lede { margin-block: 1rem 2.5rem; }
  .fc-board { margin-top: auto; }
  .fc-rail { grid-auto-columns: max(60%, 12rem); }
  .fc-card { padding: 0.875rem 1rem 1rem; }
  .fc-q { font-size: 0.9375rem; }
  .fc-p { font-size: 2rem; }
  .fc-meta { column-gap: 0.5rem; }
  .fc-live { gap: 0.3125rem; }
  .tr-line { font-size: 0.875rem; }
  .lead-in { margin-top: 1.25rem; }
  .section .lede, .band .lede { margin-top: 0.75rem; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .split .body { padding-top: 0; font-size: 1rem; }
  .careers { margin-top: 1.5rem; padding: 1.25rem; border-radius: 1.25rem; }
  .careers .arrow { margin-top: 1rem; }
  .team { padding-top: 1.25rem; }
  .press-band { margin-top: 1.5rem; }
  .press-row { gap: 1rem; padding-block: 0.875rem; }
  .press-label { font-size: 0.6875rem; }
  .mission { padding-block: 2.25rem; }
  .mm { margin-top: 1rem; }
  .cta { padding-block: 2.5rem; gap: 1.25rem; }
  .footer { padding-block: 1.5rem 2rem; }

  .calls-head { display: none; }
  .call-inner { padding-bottom: 1.25rem; }
  .call-body blockquote { font-size: 1rem; }
  .call summary { grid-template-columns: auto auto 1fr auto; column-gap: 1rem; padding-block: 0.75rem; }
  .call .q { grid-row: 1; grid-column: 1 / 4; padding: 0 1rem 0.375rem 0; font-size: 0.9375rem; line-height: 1.3; }
  .call .q small { margin-top: 0.125rem; font-size: 0.75rem; }
  .call .toggle { grid-row: 1; grid-column: 4; align-self: start; margin-top: 0.25rem; }
  .call .n { font-size: 1.125rem; }
  .call .m { grid-row: 2; grid-column: 1; }
  .call .c { grid-row: 2; grid-column: 2; }
  .call .r { grid-row: 2; grid-column: 3 / -1; font-size: 1rem; }
  .call .n > [aria-hidden]::after { margin-left: 0.3rem; font-size: 0.75rem; letter-spacing: 0; }
  .call .m > [aria-hidden]::after { content: "Mantic"; }
  .call .c > [aria-hidden]::after { content: "Crowd"; }
  .call .r::before { content: "Result"; content: "Result" / ""; margin-right: 0.3rem; font-size: 0.75rem; color: var(--grey-500); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal > *, .js .mm-num, .js .mm-to, .js .mm-note { opacity: 1 !important; transform: none !important; }
  .js .mm-box { clip-path: none !important; }
  .js .steps li::before { transform: none !important; }
  .marquee { overflow-x: auto; }
  .marquee::before, .marquee::after { content: none; }
  .marquee-track > li[aria-hidden] { display: none; }
  .team-list { overflow: visible; }
  .team-list .marquee-track { width: auto; flex-wrap: wrap; }
  .js .mm-wires .draw { stroke-dashoffset: 0 !important; }
  .js .mc-line { stroke-dashoffset: 0 !important; }
  .js .mc-s li { opacity: 1 !important; }
  .js .pm-bar i { transform: none !important; }
  html { scroll-behavior: auto; }
}