/* Founders deck: a fixed 16:9 frame, six slides, autoplay controls. Monochrome, Grants-page tokens.
   Type and spacing inside the frame are in cqw (frame-width units), so a slide keeps its
   composition at every width, the way a slide does and a web section does not.
   All custom properties are scoped to #founders-deck (not :root/body) so they cannot override
   the site's own design tokens of the same name (--bg, --surface, --hair, --sans, --mono, --ease, --max, --pad). */

#founders-deck {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --t-slide: 1.2s;
  --t-out: 1.2s;
  --t-dot: 1.2s;
  --stagger: 90ms;
  --max: 1180px;
  --pad: 32px;

  --ink: #1d1d1f;
  --ink-2: #636367;
  --ink-3: #86868b;
  --hair: rgba(0, 0, 0, 0.11);
  --fill: rgba(0, 0, 0, 0.04);
  --fill-2: rgba(0, 0, 0, 0.08);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  --grain-opacity: 0.8;

  --ctl-bg: #ededf0;
  --ctl-dot: #b4b4b9;
  --ctl-track: #cfcfd4;
  --ctl-fill: #1d1d1f;
  --ctl-btn: #ededf0;
  --ctl-icon: #1d1d1f;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #founders-deck {
    color-scheme: dark;
    --ink: #f2f0ec;
    --ink-2: #9c9c9f;
    --ink-3: #6e6e73;
    --hair: rgba(242, 240, 236, 0.14);
    --fill: rgba(242, 240, 236, 0.03);
    --fill-2: rgba(242, 240, 236, 0.06);
    --grain-opacity: 0.8;
    --ctl-bg: #1c1c1e;
    --ctl-dot: #5a5a5e;
    --ctl-track: #4a4a4e;
    --ctl-fill: #f2f0ec;
    --ctl-btn: #1c1c1e;
    --ctl-icon: #f2f0ec;
  }
}

html[data-theme="dark"] #founders-deck {
  color-scheme: dark;
  --ink: #f2f0ec;
  --ink-2: #9c9c9f;
  --ink-3: #6e6e73;
  --hair: rgba(242, 240, 236, 0.14);
  --fill: rgba(242, 240, 236, 0.03);
  --fill-2: rgba(242, 240, 236, 0.06);
  --grain-opacity: 0.8;
  --ctl-bg: #1c1c1e;
  --ctl-dot: #5a5a5e;
  --ctl-track: #4a4a4e;
  --ctl-fill: #f2f0ec;
  --ctl-btn: #1c1c1e;
  --ctl-icon: #f2f0ec;
}

/* Section shell */

.deck {
  max-width: var(--max);
  margin: 0 auto;
  padding-block: 56px 48px;
  padding-inline: var(--pad);
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.deck:focus-visible {
  outline: 1px solid var(--hair);
  outline-offset: 8px;
}

/* The frame: one fixed 16:9 surface with a grain and an inner ring */

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 0;
}

.deck__track {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Slide: fills the frame; head at top, visual in the middle, title and body on one baseline at the bottom */

.slide {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 3.6cqw 4cqw 4cqw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2.4cqw;
  opacity: 0;
  visibility: hidden;
  filter: blur(14px);
  transform: scale(1.015);
  will-change: opacity, filter, transform;
  transition:
    opacity var(--t-out) var(--ease-fluid),
    filter var(--t-out) var(--ease-fluid),
    transform var(--t-out) var(--ease-fluid),
    visibility 0s linear var(--t-out);
}

/* Dissolve: the outgoing slide softens and fades while the incoming one sharpens into place */
.slide.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: none;
  transition:
    opacity var(--t-slide) var(--ease-fluid),
    filter var(--t-slide) var(--ease-fluid),
    transform var(--t-slide) var(--ease-fluid),
    visibility 0s linear 0s;
}

/* Reveal: inside the sharpened slide, each part settles in turn; --i sets its place in the order */
.slide.is-active .in {
  animation: rise calc(var(--t-slide) * 1.2) var(--ease-fluid) both;
  animation-delay: calc(0.15s + var(--i, 0) * var(--stagger));
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.2cqw); }
  to { opacity: 1; transform: none; }
}

.slide__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 1cqw;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.slide__head p {
  margin: 0;
}

.slide__head b {
  font-weight: 500;
  color: var(--ink);
  margin-right: 1.2em;
}

.slide__main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 2.4cqw;
  min-height: 0;
}

.slide__visual {
  min-height: 0;
  display: grid;
  align-content: center;
}

.slide__foot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2cqw 4cqw;
  align-items: end;
}

.slide__title {
  margin: 0;
  font-size: 5cqw;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.slide__body {
  margin: 0;
  font-size: 1.55cqw;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}

.slide__body strong {
  color: var(--ink);
  font-weight: 500;
}

.slide__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 1px;
}

.slide__link:hover {
  border-bottom-color: var(--ink);
}

/* 03: why now — the wall of consumers that now speak MCP */

.wall {
  margin: 0;
  font-size: 3.4cqw;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  max-width: 78%;
}

.wall span {
  color: var(--ink);
}

/* 02: one source, five hand-built pipes. Type set in the SVG's own space so geometry holds at every width. */

.pipes {
  width: 100%;
  height: auto;
  max-height: 100%;
  font-family: var(--sans);
}

.pipes .pipes__src { fill: var(--ink); }
.pipes .pipes__line { stroke: var(--ink-3); stroke-width: 1; opacity: 0.7; }
.pipes .pipes__rule { stroke: var(--hair); stroke-width: 1; }
.pipes .pipes__dest { fill: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pipes .pipes__meta { fill: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; }
.pipes .pipes__cost { fill: var(--ink-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }

/* 01: the flow — one filled shape (Minimal), everything else is type and hairline */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 2cqw;
}

.flow__col {
  display: grid;
  gap: 0.6cqw;
  align-content: center;
}

.flow__col p { margin: 0; }

.flow__label {
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4cqw !important;
}

.flow__big {
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.flow__meta {
  font-size: 1.15cqw;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.flow__out {
  display: flex;
  align-items: baseline;
  gap: 0.9cqw;
  font-size: 2.3cqw;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.flow__out small {
  font-size: 1.1cqw;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.flow__line {
  display: block;
  width: 7cqw;
  height: 1px;
  background: var(--ink-3);
  opacity: 0.7;
}

.flow__core {
  padding: 1.7cqw 3.2cqw;
  border-radius: 1.3cqw;
  background: var(--ink);
  color: var(--surface);
  font-size: 2cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dblist {
  margin: 3cqw 0 0;
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--ink-3);
}

/* 04: the walkthrough fills the frame edge to edge; no head, no caption.
   A ring drawn over it keeps the canvas edge visible against a white stage. */

.slide--demo {
  padding: 0;
}

.demo {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  transform: translateZ(0);
  isolation: isolate;
}

.demo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hair);
  pointer-events: none;
  z-index: 2;
}

/* The engine fits a 1600x900 frame after subtracting a 44px toolbar it draws below;
   the toolbar is hidden here, so the mount is grown by that 44px, split above and below. */
.demo__mount {
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: calc(100% + 44px);
}

.demo [data-om-starter="animations-v2"] { background: #ffffff !important; }
.demo [data-om-starter="animations-v2"] > div + div { display: none !important; }
.demo [data-om-starter="animations-v2"] svg { box-shadow: none !important; max-width: none; }

.demo__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.4s var(--ease);
}

.demo:has([data-demo-state="live"]) .demo__poster {
  opacity: 0;
  pointer-events: none;
}



.demo__caption {
  position: absolute;
  left: 1.6cqw;
  right: 1.6cqw;
  bottom: 1.4cqw;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.06em;
  color: #9c9c9f;
}

/* 05: the figures are the slide */

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.figure {
  padding-right: 2cqw;
  border-left: 1px solid var(--hair);
  padding-left: 1.8cqw;
}

.figure__value {
  display: block;
  font-size: 7.4cqw;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.figure__value small {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.08em;
}

.figure__label {
  display: block;
  margin-top: 1.2cqw;
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Team slide (currently commented out in company.html): three people in a row */

.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3cqw;
  list-style: none;
  padding: 0;
  margin: 0;
}

.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head photo" "bio bio";
  align-items: start;
  align-content: start;
  column-gap: 1.2cqw;
  row-gap: 0.9cqw;
  padding-top: 1.4cqw;
  border-top: 1px solid var(--hair);
}

.person__head {
  grid-area: head;
  display: grid;
  gap: 0.5cqw;
  align-content: start;
}

.person__photo {
  grid-area: photo;
  position: relative;
  width: 13cqw;
  aspect-ratio: 700 / 880;
  border-radius: 0.6cqw;
  overflow: hidden;
  background: var(--fill);
}

.person__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person__photo--placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--hair);
}

.person__mark {
  width: 4.5cqw;
  height: 4.5cqw;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1.4cqw;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.person__name {
  margin: 0;
  font-size: 1.6cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.person__role {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.person__bio {
  grid-area: bio;
  margin: 0;
  font-size: 1.1cqw;
  line-height: 1.5;
  color: var(--ink-2);
}

.slide--team .slide__main {
  grid-template-rows: minmax(0, 1fr);
}

/* 06: the address is the visual; copy sits beside it, the booking link is the second action */

.address {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  max-width: 100%;
}

.address__mail {
  font-family: var(--sans);
  font-size: 3.2cqw;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.address__mail:hover { color: var(--ink-2); }

.address__copy {
  position: relative;
  appearance: none;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--fill);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s, color 0.2s;
}

.address__copy:hover { background: var(--fill-2); color: var(--ink); }
.address__copy:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.address__copy svg { width: 1.5cqw; height: 1.5cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.address__copy.is-copied { color: var(--ink); border-color: var(--ink); }

.address__copied {
  position: absolute;
  left: calc(100% + 1cqw);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.95cqw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  pointer-events: none;
}

.slide__actions {
  margin: 1.6cqw 0 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.slide__btn {
  display: inline-block;
  padding: 0.9cqw 1.6cqw;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.3cqw;
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}

.slide__btn:hover { opacity: 0.85; }

/* Controls */

.deck__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.ctl__pill {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 64px;
  padding-inline: 40px;
  border-radius: 999px;
  background: var(--ctl-bg);
}

.ctl__dot {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ctl-dot);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width var(--t-dot) var(--ease-fluid), background-color var(--t-dot) var(--ease-fluid);
}

.ctl__dot:focus-visible {
  outline: 1px solid var(--hair);
  outline-offset: 3px;
}

.ctl__dot.is-active {
  width: 44px;
  background: var(--ctl-track);
  cursor: default;
}

.ctl__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--ctl-fill);
  transition: width var(--t-dot) var(--ease-fluid);
}

.ctl__dot.is-active .ctl__fill {
  animation: deck-fill calc(var(--interval, 7000ms) - var(--t-dot)) linear var(--t-dot) forwards;
}

.deck.is-paused .ctl__fill,
.deck.is-hover .ctl__fill {
  animation-play-state: paused;
}

.deck.is-ended .ctl__dot.is-active {
  width: 10px;
  background: var(--ctl-dot);
  cursor: pointer;
}

.deck.is-ended .ctl__fill {
  animation: none;
  width: 0;
}

@keyframes deck-fill {
  from { width: 0; }
  to { width: 100%; }
}

.ctl__toggle {
  appearance: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  margin: 0;
  padding: 0;
  background: var(--ctl-btn);
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: 0;
  transition: background-color 0.2s;
}

.ctl__toggle:active {
  background: var(--ctl-track);
}

.ctl__toggle:focus-visible {
  outline: 1px solid var(--hair);
  outline-offset: 4px;
}

.ctl__toggle svg {
  width: 22px;
  height: 22px;
  fill: var(--ctl-icon);
}

.ctl__toggle .ico-play { display: none; }
.deck.is-paused .ctl__toggle .ico-pause { display: none; }
.deck.is-paused .ctl__toggle .ico-play { display: block; }

/* Narrow frames: portrait slide, single column, larger type per width */

@container (max-width: 700px) {
  .slide { padding: 6cqw 6cqw 7cqw; gap: 4cqw; }
  .slide__head { font-size: 2.4cqw; }
  .slide__main { gap: 4cqw; }
  .slide__foot { grid-template-columns: 1fr; gap: 3cqw; }
  .slide__title { font-size: 8.6cqw; }
  .slide__body { font-size: 3.6cqw; }
  .wall { font-size: 6cqw; max-width: 100%; }
  .flow { grid-template-columns: 1fr; justify-items: start; gap: 3cqw; }
  .flow__line { width: 1px; height: 6cqw; margin-left: 0.4cqw; }
  .flow__label { font-size: 2.2cqw; }
  .flow__big { font-size: 7cqw; }
  .flow__meta { font-size: 2.8cqw; }
  .flow__out { font-size: 5cqw; gap: 2cqw; }
  .flow__out small { font-size: 2.6cqw; }
  .flow__core { font-size: 4.4cqw; padding: 3cqw 6cqw; border-radius: 3cqw; }
  .dblist { display: none; }
  .slide.slide--demo { padding: 0; }
  .demo__caption { font-size: 2.4cqw; left: 4cqw; bottom: 3.4cqw; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5cqw 0; }
  .figure__value { font-size: 13cqw; }
  .figure__label { font-size: 2.3cqw; margin-top: 2.4cqw; }
  .figure { padding-left: 3.6cqw; }
  .team { grid-template-columns: 1fr; gap: 3cqw; }
  .person { grid-template-columns: 10cqw 1fr; grid-template-areas: "photo head"; column-gap: 4cqw; row-gap: 0; padding-top: 2.8cqw; align-items: center; }
  .person__photo { width: 10cqw; height: 10cqw; aspect-ratio: auto; }
  .person__photo img { object-fit: cover; }
  .person__mark { width: 4.4cqw; height: 4.4cqw; font-size: 1.6cqw; }
  .person__head { gap: 0.3cqw; }
  .person__name { font-size: 3.8cqw; margin: 0; }
  .person__role { font-size: 2.3cqw; }
  .person__bio { display: none; }
  .address { gap: 3cqw; }
  .address__mail { font-size: 5.6cqw; }
  .address__copy { width: 8cqw; height: 8cqw; }
  .address__copy svg { width: 3.4cqw; height: 3.4cqw; }
  .address__copied { font-size: 2.2cqw; left: calc(100% + 2cqw); }
  .slide__actions { gap: 4cqw; margin-top: 3cqw; }
  .slide__btn { font-size: 3cqw; padding: 2cqw 3.6cqw; }

  /* Team slide: three photo rows must also fit the short 16:9 frame, so they sit tighter than the default */
  .slide--team { padding: 4cqw 5cqw 4.5cqw; gap: 1.5cqw; }
  .slide--team .slide__main { gap: 1.5cqw; }
  .slide--team .team { gap: 1cqw; }
  .slide--team .person { padding-top: 1cqw; }
}

@media (max-width: 860px) {
  .deck { padding-inline: 20px; }
  .frame { aspect-ratio: 4 / 5; border-radius: 14px; }
  .ctl__pill { padding-inline: 22px; gap: 16px; height: 56px; }
  .ctl__dot.is-active { width: 28px; }
  .ctl__toggle { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: none; }
  .slide.is-active .in { animation: none; }
  .ctl__dot, .ctl__fill { transition: none; }
}