/* The /mcp page's CSS, scoped to .mcp-page so it and the site's Webflow styles for the nav and footer never meet. */
@font-face { font-family: 'Geist Pixel'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/GeistPixel-Regular.woff2) format('woff2'); }
/* The site's Webflow CSS styles bare elements page-wide (p, a, headings, images…). Inside the page they go back to the
   browser defaults the demo is built on, and the page's own rules (all more specific) take it from there */
.mcp-page { line-height: normal; letter-spacing: normal; }
/* The page stacks on its own, so nothing in it (the intro's input sits at z-index 20) ever covers the site's nav and its
   open menu (z-index 10 on tablets and phones) */
.mcp-page { isolation: isolate; }
.mcp-page :where(p, a, h1, h2, h3, h4, strong, b, em, small, ul, ol, li, button, img, video, figure, blockquote, label, input) { all: revert; }
.mcp-page * { margin: 0; padding: 0; box-sizing: border-box; }
.mcp-page {
  --ink: #141414;
  --black: #000;
  --label-primary: rgba(9,10,12,0.9);
  --label-muted: #787878;
  --gray-300: #d2d5da;
  --gray-200: #d8dadf;
  --gray-500: #6a7281;
  --gray-950: #090a0c;
  --green: #00ff1a;
  --green-copy: #1aff00;
  --surface-glass: rgba(255,255,255,0.7);
  --shadow-float: 0 4px 92px 0 rgba(0,0,0,0.1);
  /* Everything is Geist, at the weights the original faces used (Bricolage / Instrument Sans / Inter / Outfit), except
     Figma's Geist Pixel notes: "MCP server access requires an approved Mothership account.", "Now available in", "Powered by" */
  /* Geist has no Chinese glyphs: Chinese falls back to the platform's CJK face at the same size and weight */
  --font-cjk: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'Geist', var(--font-cjk);
  --font-ui: 'Geist', var(--font-cjk);
  --font-geist: 'Geist', var(--font-cjk);
  --font-pixel: 'Geist Pixel', 'Geist', var(--font-cjk);
  --font-logo: 'Geist', var(--font-cjk);
  --content: 1120px;
  --gutter: 24px;
  --bg-inset: 50px; /* photo backgrounds (examples, desk/dock slider) stop this far short of the viewport edges */
  /* Shared border shine (hero input + MCP URL boxes): Figma Chat/Composer 245:1442 stroke stops */
  --shine-stops: #fff 0%, #fff 17.8%, #747474 59.5%, #00e1ff 66.6%, #00ff1a 71.6%, #fff 100%;
  --shine-speed: 0.75s;
  /* The shine with its white stretches clear, for beams that run over a gray rim (URL box, paginator) */
  --beam-stops: rgba(116,116,116,0) 0%, rgba(116,116,116,0) 17.8%, #747474 59.5%, #00e1ff 66.6%, #00ff1a 71.6%, rgba(0,255,26,0) 100%;
}
.mcp-page {
  font-family: var(--font-ui);
  background: #fff;
  color: var(--label-primary);
  -webkit-font-smoothing: antialiased;
  
  overflow-x: clip;
}
.mcp-page a { color: inherit; text-decoration: none; }
.mcp-page button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mcp-page img { display: block; }
/* ── Demo bar ── */
/* Viewport switcher: Desktop is the page itself; Tablet and Mobile load the page again in a frame at that width */
/* Inside the frame (?embed=1): no demo bar, so the page starts at the top */
/* ── Icons (from icons.json) ── */
.mcp-page .ic { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; }
.mcp-page .ic svg { width: 100%; height: 100%; display: block; }
.mcp-page .ic-24 { width: 24px; height: 24px; }
/* ── Shared chat pieces ── */
.mcp-page .cursor-block { width: 30px; height: 30px; border-radius: 2px; background: #000; animation: mcp-blink 1.1s steps(1) infinite; }
.mcp-page .cursor-block.is-light { background: #fff; }
@keyframes mcp-blink { 50% { opacity: 0; } }
.mcp-page .agent-tag { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--label-primary); white-space: nowrap; }
.mcp-page .on-dark .agent-tag { color: rgba(255,255,255,0.9); }
/* "Your AI agent": a gray → black sweep runs through the icon and the label as one band, on repeat.
   The icon is masked to its shape; the label uses background-clip:text. Both read one --sweep-x. */
@property --sweep-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
/* --sweep-a is the base, --sweep-b the narrow band: mostly black with a gray band (white with gray on dark) */
.mcp-page .agent-tag.is-shimmer { --sweep-a: #141414; --sweep-b: #9a9a9a; --sweep-w: 240px; animation: mcp-agent-sweep 2.4s linear infinite; }
.mcp-page .on-dark .agent-tag.is-shimmer { --sweep-a: #fff; --sweep-b: #6f6f6f; }
.mcp-page .agent-tag.is-shimmer .ic, .mcp-page .agent-tag.is-shimmer .tag-label {
  /* tight band: mostly the base colour, with a narrow peak (~24% of the 240px cycle) */
  background: linear-gradient(90deg, var(--sweep-a) 0%, var(--sweep-a) 38%, var(--sweep-b) 50%, var(--sweep-a) 62%, var(--sweep-a) 100%) repeat-x;
  background-size: var(--sweep-w) 100%;
}
.mcp-page .agent-tag.is-shimmer .ic { background-position: var(--sweep-x) 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* label starts 28px in (20px icon + 8px gap), so offset its band to line up with the icon's */
.mcp-page .agent-tag.is-shimmer .tag-label { background-position: calc(var(--sweep-x) - 28px) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes mcp-agent-sweep { to { --sweep-x: var(--sweep-w); } }
.mcp-page .page-bubble {
  display: inline-flex; padding: 22px 32px;
  border-radius: 36px 36px 10px 36px;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 48px;
 
}
/* Figma 343:4462 / 343:4393 / 343:6088: the green bubbles glow — a 40px drop shadow in their own green at 40% */
.mcp-page .page-bubble.is-green { background: var(--green); color: #000; box-shadow: 0 4px 40px rgba(0,255,26,0.4); }
/* User bubbles (black): rise in from below, overshoot slightly, settle */
@keyframes mcp-bubble-in {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  55%  { opacity: 1; transform: translateY(-14px) scale(1.01); animation-timing-function: ease-in-out; }
  78%  { transform: translateY(5px) scale(1); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: none; }
}
.mcp-page .display {
  font-family: var(--font-display); font-weight: 600;
  font-size: 64px; line-height: 67px; letter-spacing: -0.04em; color: var(--ink); /* Figma 311:853: tracking -2.56px at 64px */
}
.mcp-page .on-dark .display { color: #fff; }
/* Same column as the hero's chat thread: the chat card is min(1440px, page - gutters), its thread is
   min(1000px, card - 65px rail - 48px) centred in the area right of the rail. So bubbles end and headlines
   start exactly where the hero's do. */
.mcp-page .exchange {
  --app: min(1440px, 100% - 2 * var(--gutter)); --col: min(1000px, var(--app) - 113px);
  width: var(--col); margin: 0 auto 0 calc((100% - var(--app)) / 2 + 65px + (var(--app) - 65px - var(--col)) / 2);
  display: flex; flex-direction: column; gap: 40px;
}
.mcp-page .exchange-user { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* "Sent by you" under user bubbles (Figma: Medium 14, right-aligned, 8px below) */
.mcp-page .sent-by { font-size: 14px; font-weight: 500; color: var(--label-primary); white-space: nowrap; }
.mcp-page .on-dark .sent-by { color: #fff; }
.mcp-page .exchange-agent { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.mcp-page .exchange-agent .display { max-width: 1040px; }
/* Bracket title: label sits in the gap of a thin outline that drops into the content */
.mcp-page .bracket { position: relative; display: flex; flex-direction: column; align-items: center; }
.mcp-page .bracket-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 22px; line-height: 32px; font-weight: 500; text-align: center; }
/* Figma: the white sections' labels ("Here's an example of what customers ask", "Available on your computer and your phone") are SemiBold; the dark ones stay Medium */
.mcp-page :is(.examples, .devices) .bracket-label { font-weight: 600; }
.mcp-page .bracket-lines { position: absolute; left: 50%; transform: translateX(-50%); top: 24px; pointer-events: none; }
.mcp-page .bracket-lines img { width: 100%; height: 100%; }
/* Agent logo stack: Grok bot, ChatGPT, Claude */
.mcp-page .agent-stack { display: flex; align-items: center; }
.mcp-page .agent-stack > * { flex-shrink: 0; margin-right: -10px; }
.mcp-page .agent-stack > *:last-child { margin-right: 0; }
/* Staggered: the tiles are translucent, so each lower tile is cut away under the next (rounded, 10px overlap)
   and the stack reads first-at-bottom, last-on-top */
.mcp-page .agent-stack > :not(:last-child) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cmask id='m'%3E%3Crect width='34' height='34' fill='white'/%3E%3Crect x='24' width='34' height='34' rx='8' fill='black'/%3E%3C/mask%3E%3Crect width='34' height='34' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cmask id='m'%3E%3Crect width='34' height='34' fill='white'/%3E%3Crect x='24' width='34' height='34' rx='8' fill='black'/%3E%3C/mask%3E%3Crect width='34' height='34' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.mcp-page .agent-stack .grok { padding: 4px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.27); background: rgba(255,255,255,0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; }
.mcp-page .agent-stack .grok img { width: 24px; height: 24px; }
.mcp-page .agent-stack.is-dark .grok { background: rgba(59,59,59,0.6); }
.mcp-page .agent-stack .mark { width: 34px; height: 34px; }
/* VS Code mark: four masked layers, as authored in Figma */
/* MCP URL box (Figma 381:4943 hero, 381:4973 closing CTA — the same box in both): on #fcfcfb, a mid gray 1px rim
   with a green comet running round it once every 4s, black offset shadow; a 30% globe, the URL in Medium 16, Copy.
   Wider and roomier than Figma's 275×40 (316×44, 8px around Copy) so the button's wider "Copied" state still clears
   the URL and the rim; never wider than its column on small screens */
.mcp-page .mcp-url {
  position: relative; overflow: hidden; width: 316px; max-width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* The box itself is the persistent gray 1px rim; the comet runs over it */
  padding: 8px 8px 8px 14px; background: #878787; box-shadow: 4px 4px 0 0 #000;
}
/* The comet: four stacked dashes on the rim sharing one head, each longer and fainter, so the tail fades out behind it */
.mcp-page .rim-comet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mcp-page .rim-comet path { fill: none; stroke: #00ff44; stroke-width: 1px; }
.mcp-page .rim-comet path:nth-of-type(2) { opacity: 0.6; }
.mcp-page .rim-comet path:nth-of-type(3) { opacity: 0.3; }
.mcp-page .rim-comet path:nth-of-type(4) { opacity: 0.12; }
@media (prefers-reduced-motion: reduce) {
  .mcp-page :is(.rim-comet, .cf-comet) { display: none; }
}
@keyframes mcp-beam { to { transform: rotate(360deg); } }
/* the paginator's shine */
.mcp-page .mcp-url .surface { position: absolute; inset: 1px; background: #fcfcfb; }
/* 1px shine border */
.mcp-page .mcp-url .url { position: relative; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: rgba(9,10,12,0.9); white-space: nowrap; }
.mcp-page .mcp-url .url .ic { width: 16px; height: 16px; color: rgba(0,0,0,0.3); flex-shrink: 0; }
.mcp-page .mcp-url .copy-btn { font-weight: 600; }
/* Figma: Geist SemiBold 12 */
.mcp-page .copy-btn { position: relative; background: var(--ink); color: #fff; font-family: var(--font-geist); font-size: 12px; line-height: 16px; padding: 5px 12px; border-radius: 0; min-width: 54px; }
/* Figma 288:5276: 54×26 */
.mcp-page .copy-btn:hover { background: #000; }
/* Copy feedback: the send-button tap, then "Copy" lifts out and "Copied ✓" rises in (the typed words' motion),
   the button turns accent green and the URL box's rim flashes green with it */
.mcp-page [data-copy] { transition: background-color 0.25s ease, color 0.25s ease, min-width 0.3s cubic-bezier(.2,.7,.2,1); }
/* The button is sized by "Copy" alone; "Copied" sits over it and the button widens to fit it (--done-w, set on click) */
.mcp-page [data-copy].is-copied { min-width: var(--done-w, 0px); }
.mcp-page .copy-stack { position: relative; display: inline-flex; justify-content: center; }
.mcp-page .copy-stack .lbl-done { position: absolute; left: 50%; top: 0; bottom: 0; translate: -50% 0; }
.mcp-page .copy-stack .lbl { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  transition: opacity 0.22s ease, transform 0.38s cubic-bezier(.2,.7,.2,1), filter 0.22s ease; }
.mcp-page .copy-stack .lbl-done { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.mcp-page .copy-stack .lbl-done svg { width: 0.95em; height: 0.85em; }
.mcp-page .is-copied .copy-stack .lbl-copy { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.mcp-page .is-copied .copy-stack .lbl-done { opacity: 1; transform: none; filter: none; }
.mcp-page .copy-btn.is-copied, .mcp-page .copy-btn.is-copied:hover { background: var(--green); color: #000; }
.mcp-page .copy-green.is-copied { background: #fff; }
.mcp-page [data-copy].is-tapped { animation: mcp-copy-tap 0.34s cubic-bezier(.3,.7,.4,1); }
@keyframes mcp-copy-tap {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(9,10,12,0.28); }
  35%  { transform: scale(0.88); box-shadow: 0 0 0 3px rgba(9,10,12,0.18); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(9,10,12,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(9,10,12,0); }
}
.mcp-page .mcp-url { transition: background-color 0.3s ease, transform 0.2s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s cubic-bezier(.2,.7,.3,1); }
/* Hover: the box lifts 2px up-left as its hard shadow grows to 6px, like a raised key; Copy turns green only
   when the pointer is on the button itself */
@media (hover: hover) {
  .mcp-page .mcp-url:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #000; }
  .mcp-page .mcp-url .copy-btn:hover:not(.is-copied) { background: var(--green); color: #000; }
}
.mcp-page .mcp-url:has(.copy-btn.is-copied) { background: var(--green); }
.mcp-page .pixel-note { font-family: var(--font-pixel); font-size: 12px; color: var(--label-muted); text-align: center; }
/* Signup links: in the connect note, under the examples, after the app tiles and under setup step 3. They take
   the colour of the text around them, so they read on the white sections and the black ones */
.mcp-page .signup-link { color: inherit; font-family: var(--font-pixel); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; transition: opacity 0.15s; }
.mcp-page .signup-link:hover { opacity: 0.7; }
/* An inline-block keeps the link's underline off the arrow (and the space before it) */
.mcp-page .signup-arrow { display: inline-block; white-space: pre; text-decoration: none; }
.mcp-page .signup-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* The address in a sentence keeps its tiny copy button on its line */
.mcp-page .mcp-addr { white-space: nowrap; }
/* "Copy" after the address: an underlined word like Sign up */
.mcp-page .copy-tiny { margin: 0 0 0 1ch; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: color 0.15s; }
.mcp-page .copy-tiny[hidden] { display: none; }
/* The other copy buttons, the slideshows' dots and pause buttons, and the topic arrows render invisible in their places
   (data-wait), so nothing moves when the script wires them up and shows them. Not [hidden], which the site's CSS takes
   out of the layout */
.mcp-page [data-wait] { visibility: hidden; }
.mcp-page .copy-tiny:hover { color: rgba(9,10,12,0.9); }
.mcp-page .copy-tiny:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* The sign-up reminders under the topics, the desk/dock slider, the app tiles and setup step 3 (Figma 455:15815): two
   tight lines of 12px pixel type in secondary ink, the middle words fainter, Sign up and Copy underlined words */
.mcp-page .signup-note { font-family: var(--font-pixel); font-size: 12px; line-height: normal; text-align: center; color: rgba(9,10,12,0.6); }
.mcp-page .signup-faint { color: rgba(9,10,12,0.4); }
.mcp-page .signup-note :is(.signup-link, .copy-tiny) { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; text-underline-offset: auto; }
.mcp-page .chat-time .ts-ic { display: none; }
/* tablet and phone only */
/* ── Hero ── */
.mcp-page .hero { position: relative; padding: 143px 0 120px; overflow: hidden; }
/* The clip is placed so the cube sits dead centre in the viewport. The cube is high in the frame,
   so the space above the clip is a sky fill built from the clip's top edge (sampled across 0–8s),
   lightening upward so the nav's black logo and labels stand out, and the clip's top edge fades into it */
.mcp-page .hero-bg {
  --sky-h: 0px;
  position: absolute; left: 0; right: 0; top: -164px; height: 986px; overflow: hidden;
  /* Sky only above the clip (plus the clip's faded top edge); white below, should the clip end early */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0) var(--sky-h)) top / 100% calc(var(--sky-h) + 64px) no-repeat,
    linear-gradient(to right, #7dabb5, #97afb9 16.7%, #90a9b4 33.3%, #799ead 50%, #7a9fad 66.7%, #829fab 83.3%, #598c9c) top / 100% calc(var(--sky-h) + 64px) no-repeat,
    #fff;
}
/* The cube, 53.5% across and 33% down the clip, lands on the viewport's centre. The clip is the hero's width plus 7.5%
   so the cube can be centred, and wide enough that the cube fills 60% of the screen (up to 300px); past 1000px it's 50%
   bigger. It's placed here rather than by script so placing it never moves it, and without JavaScript it still shows
   framed; the script keeps the same numbers (VW, VH, CX and CY in mcp-page.js) for the fade and the intro. .hero-bg
   starts 164px above the hero, and --cube-y, the cube's centre in the hero, comes from the script's viewport height
   once it runs */
.mcp-page .hero-bg video {
  position: absolute; left: 50%; top: calc(var(--cube-y, 50svh) + 164px);
  width: max(100% / 0.93, min(300vw, 1500px)); aspect-ratio: 1536 / 672;
  translate: -53.5% -33%; transform-origin: 53.5% 33%; object-fit: fill;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 120px), transparent);
  mask: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 120px), transparent);
}
@media (min-width: 1001px) { .mcp-page .hero-bg video { width: calc(max(100% / 0.93, min(300vw, 1500px)) * 1.5); } }
/* Hidden until the script has placed it (is-placed): it sets the sky above the clip, and on tablets and phones the
   intro's zoom on the cube, so the first frame shown is the intro's own rather than the clip at rest, then a jump.
   A start that fails sets the intro to done (abandonMcpPage), which shows it where the CSS puts it */
@media (scripting: enabled) { .mcp-page .hero:not([data-intro="done"]) .hero-bg video:not(.is-placed) { visibility: hidden; } }
/* After the intro the clip, its sky and the fade glide up together so the cube's top shows above the chat
   (--cube-lift is set with the clip placement) */
.mcp-page .hero-bg { transition: transform 0.9s cubic-bezier(.16,1,.3,1); }
.mcp-page .hero[data-intro="done"] .hero-bg { transform: translateY(var(--cube-lift, 0px)); transition-delay: 0.12s; }
/* Tablets and phones zoom the clip in on the cube through the intro (--intro-zoom, script); it starts zoomed and eases
   back out with the clip's lift as the chat comes in */
.mcp-page .hero:not([data-intro="done"]) .hero-bg video.is-placed { scale: var(--intro-zoom, 1); }
.mcp-page .hero:not([data-intro="done"]) .hero-bg { height: var(--intro-bg-h, 986px) !important; }
.mcp-page .hero[data-intro="done"] .hero-bg video.is-placed { transition: scale 0.9s cubic-bezier(.16,1,.3,1) 0.12s; }
/* White fade over the video: fully white by the chat card's vertical middle, solid white below.
   Placed by script against the chat (which doesn't move), so the lift never shifts it. */
@property --fade-len { syntax: '<length>'; inherits: false; initial-value: 536px; }
.mcp-page .hero-fade { --fade-len: var(--fade-len-done, 536px); position: absolute; left: 0; right: 0; top: 286px; height: 536px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff var(--fade-len), #fff); }
/* During the intro (only the input over the clip) the fade starts 35% of its length lower and runs 25% shorter, so more
   of the cube shows; it glides into its chat position, with the clip's lift, once the reply comes in. Only then: as the
   script first places it on load it goes straight there, rather than sliding down from too high */
.mcp-page .hero:not([data-intro="done"]) .hero-fade { translate: 0 var(--fade-drop, 0px); --fade-len: var(--fade-len-intro, 536px); }
.mcp-page .hero[data-intro="done"] .hero-fade { transition: translate 0.9s cubic-bezier(.16,1,.3,1) 0.12s, --fade-len 0.9s cubic-bezier(.16,1,.3,1) 0.12s; }
/* The card's chrome (glass, border, shadow, rail) fades to white behind the connect block;
   --fade-start/--fade-end are measured from the card top in JS. Content stays fully opaque. */
.mcp-page .chat-app {
  --fade-start: 100%; --fade-end: 100%;
  --chrome-fade: linear-gradient(to bottom, #000 var(--fade-start), transparent var(--fade-end));
  position: relative; margin: 0 auto;
  width: min(1440px, calc(100% - 2 * var(--gutter))); min-height: 830px;
  display: flex; border-radius: 16px;
}
.mcp-page .chat-app::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--gray-300); background: rgba(255,255,255,0.6);
  backdrop-filter: blur(90px); -webkit-backdrop-filter: blur(90px); box-shadow: var(--shadow-float);
  -webkit-mask: var(--chrome-fade); mask: var(--chrome-fade);
}
.mcp-page .chat-app > * { position: relative; }
/* Centred drop shadow on its own layer (the chrome's mask would clip it), fading out with the chrome */
.mcp-page .chat-app { isolation: isolate; }
.mcp-page .chat-app > .chat-shadow {
  position: absolute; inset: -120px; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, #000 calc(var(--fade-start) + 120px), transparent calc(var(--fade-end) + 120px));
  mask: linear-gradient(to bottom, #000 calc(var(--fade-start) + 120px), transparent calc(var(--fade-end) + 120px));
}
.mcp-page .chat-shadow::before { content: ""; position: absolute; inset: 120px; border-radius: 16px; box-shadow: 0 0 64px rgba(0,0,0,0.16); }
.mcp-page .chat-app > .hero-pause { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--gray-300); border-radius: 8px; background: rgba(255,255,255,0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #000; cursor: pointer; transition: background-color 0.2s ease; }
.mcp-page .hero-pause:hover { background: rgba(255,255,255,0.85); }
.mcp-page .hero-pause:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.mcp-page .hero-pause .ic { width: 9px; height: 10px; }
.mcp-page .hero-pause .ic-play { width: 10px; margin-left: 1px; }
.mcp-page .hero-pause:not(.is-paused) .ic-play, .mcp-page .hero-pause.is-paused .ic-pause { display: none; }
.mcp-page .chat-rail { width: 65px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; border-radius: 16px 0 0 16px; background: rgba(0,0,0,0.03); border-right: 1px solid rgba(9,10,12,0.2); -webkit-mask: var(--chrome-fade); mask: var(--chrome-fade); }
.mcp-page .avatar { width: 26px; height: 26px; border-radius: 13px; background: #e7e3da; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--gray-950); }
.mcp-page .chat-convo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mcp-page .chat-convo { --thread-w: min(1000px, calc(100% - 48px)); }
.mcp-page .chat-thread { width: var(--thread-w); container-type: inline-size; display: flex; flex-direction: column; gap: 40px; padding-top: 49px; }
.mcp-page .timestamp { text-align: center; font-size: 13px; font-weight: 500; }
.mcp-page .hero-user { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mcp-page .hero-user .sent-by { font-size: 13px; font-weight: 600; transition: opacity 0.4s ease; }
/* Figma 245:969: SemiBold 13 */
.mcp-page .hero:not([data-intro="done"]) .hero-user .sent-by { opacity: 0; }
.mcp-page .hero[data-intro="done"] .hero-user .sent-by { transition-delay: 0.85s; }
.mcp-page .hero { --hero-bubble-w: 576px; }
/* two lines of the question: "…book, and" / "track freight using AI chat?" */
.mcp-page .hero-user .page-bubble { width: var(--hero-bubble-w); text-wrap: balance; }
/* where it needs three lines, no word left alone on the last */
.mcp-page .hero-reply { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; }
.mcp-page .hero-reply > .agent-tag, .mcp-page .setup .exchange-agent > .agent-tag { font-size: 13px; font-weight: 600; }
/* Figma 245:969: SemiBold 13 */
.mcp-page .hero-reply > .agent-tag { color: rgba(9,10,12,0.9); }
/* Two lines in Geist at 72px: "Yes. Connect Mothership to" fits the first in the 1000px column; narrower threads scale the type down to keep it there */
/* "Connect Mothership" (and the closing CTA headline): once the headline has typed, a single iridescent band sweeps across it, left to right
   (an upright band).
   Its colours are the hero clip's: the cube's teal and steel blue catching the sunset's peach and sand.
   The text is painted by the gradient throughout (ink either side of the band), so nothing swaps colour.
   On top of the band: a soft glow in its colours and a tight RGB split, both riding along with it */
.mcp-page .iri-fill {
  background: linear-gradient(90deg, var(--iri-ink, var(--ink)) 0 44%, #2f5a5c 46.5%, #4a6f8a 48.25%, #8ea5a7 50%, #d2b293 51.75%, #a8907a 53%, var(--iri-ink, var(--ink)) 56.5% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* RGB split riding the band: a soft (blurred) red and cyan copy of the words sit just behind them, pulled a hair apart along the line,
   and a mask the same shape as the band (moving with it) shows them only where it is passing */
.mcp-page .iri { position: relative; z-index: 0; }
.mcp-page .iri::before, .mcp-page .iri::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; line-height: normal; white-space: nowrap; pointer-events: none; /* normal: the inline box's own height, so the copies sit on the words */
  -webkit-mask: linear-gradient(90deg, transparent 44%, #000 48%, #000 52.5%, transparent 56.5%) 100% 0 / 300% 100%;
  mask: linear-gradient(90deg, transparent 44%, #000 48%, #000 52.5%, transparent 56.5%) 100% 0 / 300% 100%;
}
.mcp-page .iri::before { color: rgba(255,40,60,0.8); translate: -0.017em 0; filter: blur(1.5px); }
.mcp-page .iri::after { color: rgba(0,200,255,0.8); translate: 0.017em 0; filter: blur(1.5px); }
.mcp-page .hero.is-answered .iri-fill, .mcp-page .cta .display.is-typed .iri-fill { animation: mcp-iri-wave 2.7s cubic-bezier(.45,0,.25,1) 0.32s both; }
/* Glow: a blurred copy painted with the band's colours only (clear either side), moving with it, behind everything */
.mcp-page .iri-glow { position: absolute; left: 0; top: 0; z-index: -2; pointer-events: none; }
.mcp-page .iri-glow::before {
  content: attr(data-text); display: block; line-height: normal; white-space: nowrap;
  background: linear-gradient(90deg, transparent 44%, #2f5a5c 46.5%, #4a6f8a 48.25%, #8ea5a7 50%, #d2b293 51.75%, #a8907a 53%, transparent 56.5%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(0.16em); opacity: 0.85;
}
.mcp-page .hero.is-answered .iri-glow::before, .mcp-page .cta .display.is-typed .iri-glow::before { animation: mcp-iri-wave 2.7s cubic-bezier(.45,0,.25,1) 0.32s both; }
.mcp-page .hero.is-answered .iri::before, .mcp-page .cta .display.is-typed .iri::before { animation: mcp-iri-split-red 2.7s cubic-bezier(.45,0,.25,1) 0.32s both; }
.mcp-page .hero.is-answered .iri::after, .mcp-page .cta .display.is-typed .iri::after { animation: mcp-iri-split-cyan 2.7s cubic-bezier(.45,0,.25,1) 0.32s both; }
/* The hero's sweep runs 25% faster than the CTA's (2.7s × 0.75) */
.mcp-page .hero.is-answered .iri-fill, .mcp-page .hero.is-answered .iri-glow::before, .mcp-page .hero.is-answered .iri::before, .mcp-page .hero.is-answered .iri::after { animation-duration: 2.025s; }
/* 85% → 15%: the band is just touching the first letter at the start and just past the last at the end, so none of the
   sweep is spent off the words; it starts with the MCP server block's fade-in (0.32s after the headline types) */
@keyframes mcp-iri-wave { from { background-position: 85% 0; } to { background-position: 15% 0; } }
/* As the band travels the two copies trade places: red starts below-left and cyan above-right, and they end swapped */
@keyframes mcp-iri-split-red { from { -webkit-mask-position: 85% 0; mask-position: 85% 0; translate: -0.017em 0; } to { -webkit-mask-position: 15% 0; mask-position: 15% 0; translate: 0.017em 0; } }
@keyframes mcp-iri-split-cyan { from { -webkit-mask-position: 85% 0; mask-position: 85% 0; translate: 0.017em 0; } to { -webkit-mask-position: 15% 0; mask-position: 15% 0; translate: -0.017em 0; } }
/* Phones break the two words over two lines, which one-line copies can't follow: the band plays without the split */
@media (max-width: 720px) {
  .mcp-page .iri::before, .mcp-page .iri::after, .mcp-page .iri-glow { display: none; }
}
.mcp-page .iri.is-wrapped::before, .mcp-page .iri.is-wrapped::after, .mcp-page .iri.is-wrapped .iri-glow { display: none; }
/* any width where the words wrap (set by script) */
@media (prefers-reduced-motion: reduce) {
  .mcp-page .iri-fill, .mcp-page .iri::before, .mcp-page .iri::after, .mcp-page .iri-glow::before { animation: none !important; }
}
.mcp-page .hero-reply h1 { font-family: var(--font-display); font-weight: 600; font-size: min(72px, 7.2cqi); line-height: 1.04; letter-spacing: -0.04em; color: var(--ink); }
/* Connect frame: thin outline whose top/bottom edges open around the label and "Powered by" */
/* Spans the chat column: headline's left edge to the bubble's right edge */
.mcp-page .hero-connect { width: var(--thread-w); margin: 110px auto 56px; display: flex; flex-direction: column; }
.mcp-page .cf-edge { display: flex; align-items: stretch; gap: 24px; }
.mcp-page .cf-edge .cf-line { flex: 1; min-width: 24px; border: 0 solid rgba(0,0,0,0.2); }
/* frame lines at 20% (in the colour: the glitch animates opacity) */
.mcp-page .cf-edge.is-top .cf-line { margin-top: 16px; border-top-width: 1px; }
/* the lead's middle */
.mcp-page .br-mobile { display: none; }
/* Figma 313:6803: three stacked, open-bottom outlines behind the frame's top edge (Figma 40/20/10% black, halved here) */
.mcp-page .hero-connect { position: relative; }
.mcp-page .cf-stack { position: absolute; left: 0; right: 0; top: calc(10.5px - 16px - 75px); height: 75px; pointer-events: none; }
.mcp-page .cf-stack { display: none; }
/* Hidden for now; delete this line to bring the stacked outlines back */
/* A black comet runs the frame's lines on both sides at once, from "Powered by" out along the bottom, up the side and
   in along the top to the lead, every 2s. Paths are traced from the lines by script, which also runs the dash offsets
   (Web Animations, in px); four stacked dashes of growing length and falling opacity make the soft tail. */
.mcp-page .cf-comet { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.mcp-page .cf-comet path { fill: none; stroke: #000; stroke-width: 1px; }
.mcp-page .cf-comet path:nth-of-type(4n+2) { opacity: 0.5; }
.mcp-page .cf-comet path:nth-of-type(4n+3) { opacity: 0.25; }
.mcp-page .cf-comet path:nth-of-type(4n+4) { opacity: 0.1; }
.mcp-page .cf-comet:not(.is-double) path.is-follow { visibility: hidden; }
/* the second comet only shows on loops picked for two */
@media (prefers-reduced-motion: reduce), (max-width: 1079px) {
  .mcp-page .cf-comet { display: none; }
}
/* desktop only: no comets on tablet or phone */
.mcp-page .cf-tab { position: absolute; left: 50%; height: 25px; translate: -50% 0; border: 1px solid #000; border-bottom: 0; }
.mcp-page .cf-tab:nth-child(1) { bottom: 0; width: 84.5%; opacity: 0.2; }
.mcp-page .cf-tab:nth-child(2) { bottom: 25px; width: 73.45%; opacity: 0.1; }
.mcp-page .cf-tab:nth-child(3) { bottom: 50px; width: 64.8%; opacity: 0.05; }
.mcp-page .cf-edge.is-bottom .cf-line { margin-bottom: 21px; border-bottom-width: 1px; }
.mcp-page .cf-edge .cf-line:first-child { border-left-width: 1px; }
.mcp-page .cf-edge .cf-line:last-child { border-right-width: 1px; }
.mcp-page .cf-edge .lead { font-size: 22px; font-weight: 600; line-height: 32px; text-align: center; }
/* Figma 343:3268: Medium 20 */
/* Figma 388:5040: the note sits 6px under the lead (2px under its 32px line box), the URL box 20px under the note */
.mcp-page .cf-body { position: relative; padding: 2px 25px 64px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
/* Side lines as their own layers, so the frame can glitch without moving the content */
.mcp-page .cf-body::before, .mcp-page .cf-body::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.2); pointer-events: none; }
.mcp-page .cf-body::before { left: 0; }
.mcp-page .cf-body::after { right: 0; }
/* Glitch: each frame piece idles, then jumps a pixel or two, flickers and splits cyan/green for a moment.
   Pieces run on different cycles so the frame never glitches all at once. */
@keyframes mcp-frame-glitch {
  0%, 84%, 100% { transform: none; opacity: 1; filter: none; }
  85% { transform: translate(3px, 0); filter: drop-shadow(-2px 0 #00e1ff) drop-shadow(2px 0 #00ff1a); }
  86% { transform: translate(-2px, 1px); opacity: 0.45; }
  87% { transform: translate(1px, -1px) scaleX(1.01); filter: drop-shadow(2px 0 #00e1ff); }
  88% { transform: none; opacity: 1; filter: none; }
  92% { transform: translate(-1px, 0); opacity: 0.3; filter: drop-shadow(1px 0 #00ff1a); }
  93% { transform: none; opacity: 1; filter: none; }
}
.mcp-page .hero.is-answered .cf-line, .mcp-page .hero.is-answered .cf-body::before, .mcp-page .hero.is-answered .cf-body::after {
  animation: mcp-frame-glitch 4.2s steps(1, end) infinite;
}
.mcp-page .hero.is-answered .cf-edge.is-top .cf-line:first-child { animation-duration: 3.7s; animation-delay: -0.6s; }
.mcp-page .hero.is-answered .cf-edge.is-top .cf-line:last-child { animation-duration: 4.6s; animation-delay: -2.1s; }
.mcp-page .hero.is-answered .cf-body::before { animation-duration: 5.3s; animation-delay: -1.4s; }
.mcp-page .hero.is-answered .cf-body::after { animation-duration: 3.9s; animation-delay: -3.2s; }
.mcp-page .hero.is-answered .cf-edge.is-bottom .cf-line:first-child { animation-duration: 4.9s; animation-delay: -0.2s; }
.mcp-page .hero.is-answered .cf-edge.is-bottom .cf-line:last-child { animation-duration: 4.1s; animation-delay: -2.7s; }
/* Same glitch on the stacked outlines, but flickering through filter so their 20/10/5% opacity holds;
   positive delays let the top-down reveal finish before the first glitch */
@keyframes mcp-tab-glitch {
  0%, 84%, 100% { transform: none; filter: none; }
  85% { transform: translate(3px, 0); filter: drop-shadow(-2px 0 #00e1ff) drop-shadow(2px 0 #00ff1a); }
  86% { transform: translate(-2px, 1px); filter: opacity(0.45); }
  87% { transform: translate(1px, -1px) scaleX(1.01); filter: drop-shadow(2px 0 #00e1ff); }
  88% { transform: none; filter: none; }
  92% { transform: translate(-1px, 0); filter: opacity(0.3) drop-shadow(1px 0 #00ff1a); }
  93% { transform: none; filter: none; }
}
.mcp-page .hero.is-answered .cf-tab { animation: mcp-tab-glitch 4.4s steps(1, end) infinite; }
.mcp-page .hero.is-answered .cf-tab:nth-child(1) { animation-duration: 4.4s; animation-delay: 0.9s; }
.mcp-page .hero.is-answered .cf-tab:nth-child(2) { animation-duration: 3.8s; animation-delay: 1.7s; }
.mcp-page .hero.is-answered .cf-tab:nth-child(3) { animation-duration: 5.1s; animation-delay: 2.6s; }
.mcp-page .connect-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; }
/* so the URL box caps at the frame's inner width on phones */
/* Figma 274:2278: lead sentence SemiBold, the rest Regular */
.mcp-page .available { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* Figma's desktop row: a 636px strip with 61px fades at each edge, logos spaced 54px apart */
.mcp-page .marquee { --edge-fade: linear-gradient(90deg, transparent, #000 min(61px, 10%), #000 calc(100% - min(61px, 10%)), transparent); width: min(636px, 100%); overflow: hidden; -webkit-mask-image: var(--edge-fade); mask-image: var(--edge-fade); }
.mcp-page .marquee-track { display: flex; width: max-content; animation: mcp-marquee 25s linear infinite; }
.mcp-page .marquee-set { display: flex; gap: 54px; padding-right: 54px; }
@keyframes mcp-marquee { to { transform: translateX(-50%); } }
/* Stops under the pointer (the hero's pause button holds it with the page's other loops) */
.mcp-page .marquee:hover .marquee-track { animation-play-state: paused; }
.mcp-page .agent-logo { display: flex; align-items: center; gap: 5px; font-family: var(--font-geist); font-weight: 500; font-size: 13.96px; color: #141414; white-space: nowrap; }
.mcp-page .agent-logo > img { width: 20px; height: 20px; }
.mcp-page .agent-logo > img.wordmark { width: auto; }
.mcp-page .powered { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mcp-page .powered-mark { display: block; width: 154.0019px; height: 12.9618px; }
/* Figma 390:5821: the Mothership SI logo, at its own size */
/* Hero intro: composer types the question, then hands off to the chat */
.mcp-page .intro-composer {
  /* Vertically centered on the cube: the video box is 986px tall at top -164px (center 329px), cropped
     to cover at 1344×768, and the cube's center sits ~0.6% above the frame's middle */
  --composer-h: 113px;
  position: absolute; z-index: 20; left: 50%; width: min(1077px, calc(100% - 2 * var(--gutter))); height: var(--composer-h);
  top: calc(var(--cube-y, 329px) - var(--composer-h) / 2); /* --cube-y: the cube's centre, set with the video placement */
  transform: translateX(-50%); display: flex; align-items: center; gap: 24px; padding: 16px 16px 16px 36px;
  border-radius: 9999px; background: rgba(255,255,255,0.8); border: 6px solid rgba(255,255,255,0.36);
  backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
}
/* Rotating shine on the composer border, using the Figma Chat/Composer (245:1442) stroke gradient:
   white 0–17.8% → #747474 59.5% → #00e1ff 66.6% → #00ff1a 71.6% → white 100% */
@property --shine-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mcp-page .intro-composer, .mcp-page .scene-a .composer { --bw: 1.5px; border-width: var(--bw); border-color: transparent; background-clip: padding-box; }
.mcp-page .intro-composer::before, .mcp-page .scene-a .composer::before, .mcp-page .scene-ask .composer::before {
  content: ""; position: absolute; inset: calc(-1 * var(--bw)); padding: var(--bw); border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--shine-angle), var(--shine-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mcp-shine var(--shine-speed) linear infinite;
}
@keyframes mcp-shine { to { --shine-angle: 360deg; } }
.mcp-page .intro-composer .typed .word, .mcp-page .scene .composer .typed .word { display: inline-block; white-space: pre; animation: mcp-word-in 0.16s cubic-bezier(.2,.7,.2,1) both; }
.mcp-page .intro-composer .typed .word.is-bold, .mcp-page .scene .composer .typed .word.is-bold { font-weight: 700; }
@keyframes mcp-word-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.mcp-page .intro-composer .plus, .mcp-page .scene .composer .plus { width: 35px; height: 35px; }
/* Figma Chat/Composer (245:1442) scaled ×1.95: 36px circle send → 70px, 16px arrow → 31px */
.mcp-page .intro-composer .send, .mcp-page .scene .composer .send { width: 70px; height: 70px; border-radius: 50%; }
.mcp-page .intro-composer .send img, .mcp-page .scene .composer .send img { width: 31px; height: 31px; }
.mcp-page .intro-composer .typed, .mcp-page .scene .composer .typed { flex: 1; min-width: 0; font-size: 39px; font-weight: 500; letter-spacing: -0.02em; color: #000; white-space: nowrap; overflow: hidden; }
/* -2% on the desktop input; phones keep normal spacing */
/* The intro's question stays on one line on desktops: 37px at full width (39px clipped its question mark), and smaller
   as the window narrows so the whole question still fits the input (about 23 font-sizes wide) */
.mcp-page .intro-composer .typed { font-size: min(37px, (100vw - 259px) / 23); }
.mcp-page .intro-composer .caret, .mcp-page .scene .composer .caret { display: inline-block; width: 2.5px; height: 38px; background: #000; vertical-align: -7px; margin-left: 2px; animation: mcp-blink 0.9s steps(1) infinite; }
.mcp-page .intro-composer.is-typing .caret, .mcp-page .scene .composer.is-typing .caret { animation: none; }
.mcp-page .send { width: 72px; height: 72px; border-radius: 18px; background: var(--gray-950); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mcp-page .send img { width: 32px; height: 32px; }
.mcp-page .hero[data-intro="start"] .intro-composer { opacity: 0; transform: translate(-50%, 24px); }
/* Entrance: rise from slightly below, overshoot a touch, settle */
.mcp-page .hero[data-intro="composer"] .intro-composer { animation: mcp-composer-in 0.9s both; }
@keyframes mcp-composer-in {
  0%   { opacity: 0; transform: translate(-50%, 28px) scale(0.97); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  55%  { opacity: 1; transform: translate(-50%, -5px) scale(1.004); animation-timing-function: ease-in-out; }
  78%  { transform: translate(-50%, 1.5px) scale(1); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
/* Send tap: press in, spring back, with a soft ring */
.mcp-page .intro-composer .send.is-pressed, .mcp-page .scene .composer .send.is-pressed { animation: mcp-send-tap 0.34s cubic-bezier(.3,.7,.4,1); }
@keyframes mcp-send-tap {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(9,10,12,0.28); }
  35%  { transform: scale(0.86); background: #000; box-shadow: 0 0 0 4px rgba(9,10,12,0.18); }
  70%  { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(9,10,12,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(9,10,12,0); }
}
/* Exit: small lift, then sink and fade as the chat grows out of the same spot */
/* The input starts leaving (.is-leaving) a beat before the chat comes in (data-intro="done") */
.mcp-page .hero[data-intro] .intro-composer.is-leaving, .mcp-page .hero[data-intro="done"] .intro-composer { animation: mcp-composer-out 0.5s both; pointer-events: none; }
@keyframes mcp-composer-out {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); animation-timing-function: cubic-bezier(.3,.7,.4,1); }
  30%  { opacity: 1; transform: translate(-50%, -6px) scale(1.015); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  100% { opacity: 0; transform: translate(-50%, 14px) scale(0.9); }
}
/* Chat card: fades in while growing from small to full size, out of the input's position */
.mcp-page .chat-app { transform-origin: 50% 100px; /* the input's center, relative to the card top */ transition: opacity 0.6s ease 0.12s, transform 0.95s cubic-bezier(.22,1.12,.36,1) 0.12s; }
.mcp-page .hero:not([data-intro="done"]) .chat-app { opacity: 0; transform: scale(0.82); transition-delay: 0s; }
/* Chrome still paints the glass's backdrop blur under opacity: 0, smearing the video during the intro */
.mcp-page .hero:not([data-intro="done"]) .chat-app { visibility: hidden; }
/* ...with a bounce: overshoot, dip, settle. Opacity on the card or its glass layer switches off the
   backdrop blur, so the card only scales, the glass keeps its blur and fades in just its tint and border,
   and the contents fade on their own */
.mcp-page .hero[data-intro="done"] .chat-app { transition: none; animation: mcp-chat-in 0.6s 0.12s backwards; }
.mcp-page .hero[data-intro="done"] .chat-app::before { animation: mcp-chat-glass 0.33s 0.12s backwards; }
.mcp-page .hero[data-intro="done"] .chat-app > * { animation: mcp-chat-fade 0.33s 0.12s backwards; }
@keyframes mcp-chat-glass { from { background-color: rgba(255,255,255,0); border-color: transparent; } }
@keyframes mcp-chat-in {
  0%   { transform: scale(0.82); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  55%  { transform: scale(1.025); animation-timing-function: ease-in-out; }
  78%  { transform: scale(0.995); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); }
}
@keyframes mcp-chat-fade { from { opacity: 0; } }
/* Connect block comes in only after the agent's answer has finished typing, top to bottom */
/* Top down: the three stacked outlines drop in one by one (top first, quickly), then the frame, then its content */
.mcp-page .hero:not(.is-answered) .hero-connect { opacity: 0; }
.mcp-page .hero.is-answered .hero-connect { transition: opacity 0.15s ease; }
.mcp-page .cf-tab { transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.16,1,.3,1); }
.mcp-page .hero:not(.is-answered) .cf-tab { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }
.mcp-page .hero.is-answered .cf-tab:nth-child(3) { transition-delay: 0s; }
.mcp-page .hero.is-answered .cf-tab:nth-child(2) { transition-delay: 0.1s; }
.mcp-page .hero.is-answered .cf-tab:nth-child(1) { transition-delay: 0.2s; }
.mcp-page .hero-connect > .cf-edge, .mcp-page .cf-body > * { transition: opacity 0.6s ease, translate 0.9s cubic-bezier(.16,1,.3,1); }
.mcp-page .cf-body { transition: opacity 0.4s ease; }
/* carries the side lines */
.mcp-page .hero:not(.is-answered) .hero-connect > .cf-edge, .mcp-page .hero:not(.is-answered) .cf-body > * { opacity: 0; translate: 0 -16px; transition-delay: 0s; }
.mcp-page .hero:not(.is-answered) .cf-body { opacity: 0; transition-delay: 0s; }
.mcp-page .hero.is-answered .cf-edge.is-top, .mcp-page .hero.is-answered .cf-body { transition-delay: 0.32s; }
.mcp-page .hero.is-answered .cf-body > :nth-child(1) { transition-delay: 0.44s; }
.mcp-page .hero.is-answered .cf-body > :nth-child(2) { transition-delay: 0.56s; }
.mcp-page .hero.is-answered .cf-body > :nth-child(3) { transition-delay: 0.68s; }
.mcp-page .hero.is-answered .cf-edge.is-bottom { transition-delay: 0.8s; }
.mcp-page .hero-reply { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.mcp-page .hero:not([data-intro="done"]) .hero-user .page-bubble { opacity: 0; }
.mcp-page .hero:not([data-intro="done"]) .hero-reply { opacity: 0; transform: translateY(16px); }
.mcp-page .hero[data-intro="done"] .hero-user .page-bubble { animation: mcp-bubble-in 0.75s 0.3s both; }
.mcp-page .hero[data-intro="done"] .hero-reply { transition-delay: 0.7s; }
/* ── Features ── */
.mcp-page .features { padding: 80px 0; }
/* ── Examples ── */
.mcp-page .examples { position: relative; padding-bottom: 80px; }
.mcp-page .examples .bracket-lines { width: min(1000px, 100% - 2 * var(--bg-inset)); height: 157px; }
.mcp-page .examples-stage { position: relative; margin-top: 53px; overflow: hidden; }
/* The warehouse photo (and its cursor grid) fills the stage behind the topics window. The photos are 120px taller than
   that box and drift down through it as the page scrolls (--bg-shift, set by script from -60px to 60px), so they move a
   little slower than the window */
/* Same width as the desk/dock slider below: up to 1548px, stopping --bg-inset short of the viewport edges (full width on phones) */
.mcp-page .examples-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: min(1548px, 100% - 2 * var(--bg-inset)); margin: 0 auto; overflow: hidden; pointer-events: none; }
/* Desktop: end the photos 2px short of the stage, under its white fade, so the zooming photo layer's edge can't show as a line */
@media (min-width: 1001px) { .mcp-page .examples-bg { bottom: 2px; } }
/* The zoom below scales the drift too, so its origin follows the drift: each photo pushes in toward its own centre */
.mcp-page .examples-photo, .mcp-page .examples-alt, .mcp-page .examples-shade, .mcp-page .examples-live { position: absolute; left: 0; top: -60px; transform: translateY(var(--bg-shift, 0px)); transform-origin: 50% calc(50% + var(--bg-shift, 0px)); width: 100%; height: calc(100% + 120px); object-fit: cover; }
/* At rest each photo slowly pushes in toward its centre while its topic is up, from rest each time it comes back (script
   restarts it). A photo's scroll-swap copies run the same zoom in step, so they line up with the photo under them */
.mcp-page :is(.examples-photo, .examples-alt, .examples-shade, .examples-live) { animation: mcp-bg-kb 12s linear forwards; }
@keyframes mcp-bg-kb { from { scale: 1; } to { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) {
  .mcp-page :is(.examples-photo, .examples-alt, .examples-shade, .examples-live) { animation: none; }
}
/* full-bleed, edge to edge */
/* Figma 343:7605 / 343:7606: three photos, one per topic in turn. The next one fades in over the last as its topic comes up
   (lower ones stay up underneath, so the crossfade never shows the warehouse through) */
.mcp-page .examples-alt { opacity: 0; transition: opacity 0.7s cubic-bezier(.22,1,.36,1); }
.mcp-page .examples-alt.is-on { opacity: 1; }
/* While the page is scrolling, the current photo swaps for its Figma-shaded version (Section 3, 373:4784–4786),
   in fast and back out once the scroll settles */
.mcp-page .examples-shade { opacity: 0; transition: opacity 0.45s ease; }
.mcp-page .examples-shade.is-on { opacity: 1; transition-duration: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .mcp-page :is(.examples-shade, .examples-live) { display: none; }
}
/* With WebGPU the scroll swap is drawn live instead: the same screen, plus the slider's ripple rolling out from the
   topics window (script); the baked PNGs above stay as the fallback */
.mcp-page .examples-live { opacity: 0; transition: opacity 0.45s ease; }
.mcp-page .examples-live.is-on { opacity: 1; transition-duration: 0.12s; }
.mcp-page .examples-bg.has-live-shade .examples-shade { display: none; }
/* ── Topics (Figma 432:2437): a 1050×569 chat window 108px down the photo, the topics in a sidebar beside the chat.
   The photo fades to white from 324px down (Gradient for BG) and the window's lower part fades with it (Gradient for
   UI); the paginator sits 13px under the window ── */
.mcp-page .examples-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0) 324px, #fff 764px); }
.mcp-page .topics { position: relative; z-index: 2; width: min(1050px, 100% - 2 * var(--gutter)); height: 569px; margin: 108px auto 107px; display: flex; gap: 16px; padding: 12px; background: rgba(255,255,255,0.9); background-clip: padding-box; border: 4px solid rgba(255,255,255,0.36); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); backdrop-filter: blur(68px); -webkit-backdrop-filter: blur(68px); }
/* Gradient for UI (432:2486): a white fade over the window's lower part, from 433px down the photo and white just above
   the window's bottom edge, so the edge, its border and shadow are hidden in it; the paginator sits on top */
.mcp-page .examples-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 433px; bottom: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 234px); }
.mcp-page .topics-side { flex: none; width: 271px; display: flex; flex-direction: column; }
.mcp-page .topics-agent { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(9,10,12,0.9); white-space: nowrap; }
.mcp-page .topics-agent .agent-stack.is-dark { display: none; }
.mcp-page .topics-label { margin: 40px 0 9px; padding: 0 12px; font-size: 14px; font-weight: 500; color: rgba(9,10,12,0.45); }
.mcp-page .topics-list { display: flex; flex-direction: column; gap: 9px; }
.mcp-page .topic { padding: 8px 12px; border: 0; border-radius: 8px; background: none; text-align: left; font-family: var(--font-geist); font-size: 18px; line-height: 23px; font-weight: 600; letter-spacing: -0.02em; color: #141414; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease; }
.mcp-page .topic:hover:not(.is-active) { background: rgba(255,255,255,0.55); }
.mcp-page .topic.is-active { background: #fff; cursor: default; }
.mcp-page .topic:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.mcp-page .topics-steps { display: none; }
.mcp-page .topics-chat { flex: 1; min-width: 0; position: relative; background: #fff; border-radius: 8px; overflow: hidden; }
.mcp-page .topics-body { height: 100%; padding: 69px 32px; }
.mcp-page .topic-convo { display: flex; flex-direction: column; gap: 10px; }
.mcp-page .topic-convo[hidden] { display: none; }
.mcp-page .topic-convo .user-turn { align-self: flex-end; max-width: 454px; display: flex; flex-direction: column; align-items: flex-end; gap: 5.9px; }
.mcp-page .topic-convo .chat-bubble { padding: 12.14px 18.22px; border-radius: 20.24px 20.24px 7.08px 20.24px; font-size: 20px; line-height: 1.3; letter-spacing: normal; }
.mcp-page .topic-convo .sent { font-size: 14.75px; color: #808080; }
.mcp-page .topic-convo .agent-msg { gap: 23.57px; max-width: 496px; }
/* Desktop shows just the star, still and 35% gray; tablets and phones show "Your AI agent" with the page's sweep */
@media (min-width: 1001px) {
  .mcp-page .topic-convo .agent-tag { animation: none; }
  .mcp-page .topic-convo .agent-tag .ic { width: 20px; height: 20px; background: rgba(9,10,12,0.35); }
  .mcp-page .topic-convo .agent-tag .tag-label { display: none; }
}
.mcp-page .topic-convo .agent-msg .body { gap: 7.86px; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; color: #141414; margin-top: -15.57px; }
.mcp-page .topic-convo .agent-msg .body > p:empty { display: none; }
.mcp-page .topic-convo .row { align-self: flex-start; padding: 8px 11px; background: #efefef; border: 1.48px solid #eaeaea; border-radius: 11.8px; }
/* Book a shipment hands off to the dashboard: a card with the quote and a button, in after the reply has typed */
.mcp-page .topic-convo .handoff { cursor: default; align-self: flex-start; width: min(100%, 340px); display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; background: #fff; border: 1.48px solid #eaeaea; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); color: #141414; text-decoration: none; letter-spacing: -0.01em; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(.2,.7,.2,1), visibility 0.4s; }
.mcp-page .topic-convo .handoff-label { font-size: 13px; color: #808080; }
.mcp-page .topic-convo .handoff-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.mcp-page .topic-convo .handoff-meta { font-size: 14px; line-height: 1.35; color: #5c5c5c; }
.mcp-page .topic-convo .handoff-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 9999px; background: #141414; color: #fff; font-size: 14px; font-weight: 600; }
.mcp-page .topic-convo .handoff-btn .ic { width: 14px; height: 14px; }
.mcp-page .topic-convo .agent-msg.is-typing .handoff { opacity: 0; translate: 0 8px; visibility: hidden; transition-duration: 0s; }
/* Get delivery receipts and See invoices (and the autopilot receipts card) attach a PDF: the top of its first page, then its name with a download mark, in after the reply has typed */
.mcp-page :is(.topic-convo, .ap-card) .file-card { align-self: flex-start; width: min(100%, 340px); display: flex; flex-direction: column; background: #fff; border: 1.48px solid #eaeaea; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); overflow: hidden; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(.2,.7,.2,1), visibility 0.4s; }
.mcp-page :is(.topic-convo, .ap-card) .file-preview { display: block; width: 100%; height: 132px; object-fit: cover; object-position: top; border-bottom: 1.48px solid #eaeaea; }
.mcp-page :is(.topic-convo, .ap-card) .file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mcp-page :is(.topic-convo, .ap-card) .file-badge { flex: none; padding: 3px 5px; border-radius: 4px; background: #e5322d; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.mcp-page :is(.topic-convo, .ap-card) .file-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-page :is(.topic-convo, .ap-card) .file-dl { flex: none; width: 18px; height: 18px; color: #5c5c5c; }
/* A bundle (See invoices' three PDFs) is a stack: two sheets peek out above the first one, each a white edge over a gray rim */
.mcp-page :is(.topic-convo, .ap-card) .file-card.is-bundle { margin-top: 14px; overflow: visible; box-shadow: 0 -7px 0 -4px #fff, 0 -7px 0 -2.5px #e2e2e2, 0 -14px 0 -8px #fff, 0 -14px 0 -6.5px #e2e2e2, 0 4px 14px rgba(0,0,0,0.05); }
.mcp-page :is(.topic-convo, .ap-card) .file-card.is-bundle .file-preview { border-radius: 14.5px 14.5px 0 0; }
.mcp-page :is(.topic-convo, .ap-card) .file-card.is-bundle .file-badge { background: #141414; }
/* Track a shipment's map card: the route map, then the trip with a green in-transit dot and its status under it */
.mcp-page .topic-convo .file-card.is-map .file-preview { object-position: center; }
.mcp-page .topic-convo .track-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #54e04d; box-shadow: 0 0 0 4px rgba(84,224,77,0.25); }
.mcp-page .topic-convo .track-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mcp-page .topic-convo .track-meta { font-size: 13px; color: #5c5c5c; }
.mcp-page .topic-convo .agent-msg.is-typing .file-card { opacity: 0; translate: 0 8px; visibility: hidden; transition-duration: 0s; }
.mcp-page .topic-convo .dot { width: 18px; height: 18px; border-radius: 2.95px; background: #000; }
.mcp-page .topic-convo .dot.is-inline { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 1.3px; margin-left: 3px; vertical-align: baseline; }
.mcp-page .topic-convo.is-in .chat-bubble { animation: mcp-bubble-in 0.6s 0.05s both; }
.mcp-page .topic-convo.is-in .sent { animation: mcp-chat-fade 0.3s 0.4s both; }
.mcp-page .topics-composer { display: none; }
/* Thinking, as the old example cards did: before each reply the star works and a random line runs the "Your AI agent"
   sweep for a second. On desktop two stars take turns on a 1.6s loop, never visible together: each rises in from below,
   holds, then drifts up and fades as the next arrives. Tablets and phones keep their "Your AI agent" tag over the line */
.mcp-page .topic-convo .sparks { position: relative; display: none; width: 20px; height: 20px; }
.mcp-page .topic-convo .spark { width: 20px; height: 20px; color: rgba(9,10,12,0.35); transition: color 0.3s ease; }
.mcp-page .topic-convo .spark.is-next { position: absolute; inset: 0; opacity: 0; }
.mcp-page .topic-convo .agent-msg.is-thinking .spark { color: #141414; animation: mcp-spark-think 1.6s infinite; }
.mcp-page .topic-convo .agent-msg.is-thinking .spark:not(.is-next) { animation-delay: -0.24s; }
.mcp-page .topic-convo .agent-msg.is-thinking .spark.is-next { animation-delay: 0.56s; }
@keyframes mcp-spark-think {
  0%        { transform: translateY(10px); opacity: 0; animation-timing-function: cubic-bezier(.25,1,.5,1); }
  15%, 30%  { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.5,0,.75,0); }
  45%, 100% { transform: translateY(-10px); opacity: 0; }
}
.mcp-page .topic-convo .agent-tag.think { display: none; font-size: 15px; }
.mcp-page .topic-convo .agent-msg.is-thinking .agent-tag.think { display: flex; animation: mcp-think-in 0.3s ease-out both, mcp-agent-sweep 2.4s linear infinite; }
.mcp-page .topic-convo .agent-tag.think .tag-label { display: inline; background-position: var(--sweep-x) 0; }
@keyframes mcp-think-in { from { opacity: 0; transform: translateY(4px); } }
@media (min-width: 1001px) {
  .mcp-page .topic-convo .sparks { display: block; }
  .mcp-page .topic-convo .agent-msg > .agent-tag { display: none; }
}
.mcp-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The section's gray cursor grid, mirrored on top of the window (and of the phone's screen on smaller screens) */
.mcp-page .topics-grid { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; }
.mcp-page .topics-chat > .topics-grid { display: none; }
/* The paginator is the slider's, six dots long, 13px under the window */
.mcp-page .stage-nav.topics-nav { z-index: 4; margin-top: -94px; }
/* The topics window's white bottom fade (.examples-stage::before) reaches under its controls; the note sits above it */
.mcp-page :is(.examples, .devices) > .signup-note { position: relative; z-index: 4; margin-top: 24px; padding: 0 var(--gutter); }
/* Under the desk/dock slider the note comes first, where the controls were, and the controls follow it */
.mcp-page .devices > .signup-note { margin-top: 28px; }
.mcp-page .devices > .signup-note + .stage-nav { margin-top: 24px; }
/* ── Devices ── */
.mcp-page .devices-head { padding: 80px 0; }
.mcp-page .devices { position: relative; padding-bottom: 103px; }
.mcp-page .devices .bracket-lines { width: min(908px, 100% - 2 * var(--bg-inset)); height: 150px; }
/* Figma 343:3448: light gray (#d0d0d0) lines that draw in top to bottom once the bracket has faded in
   (the "Here's an example of what customers ask" bracket over the examples does the same) */
.mcp-page :is(.examples, .devices) .bracket-lines { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65,0,.35,1) 0.25s; }
.mcp-page :is(.examples, .devices) .bracket:is(.is-visible, :not(.reveal)) .bracket-lines { clip-path: inset(0 0 -2px 0); }
@media (prefers-reduced-motion: reduce) {
  .mcp-page :is(.examples, .devices) .bracket-lines { transition: none; }
}
.mcp-page :is(.examples, .devices) .bracket-copy { position: relative; width: min(760px, calc(100% - 48px)); margin: 24px auto 0; text-align: center; font-size: 22px; line-height: 32px; font-weight: 500; }
.mcp-page .stage-wrap { position: relative; width: min(1548px, 100% - 2 * var(--bg-inset)); margin: 52.5px auto 0; aspect-ratio: 1548 / 857; overflow: hidden; }
.mcp-page .stage { position: absolute; left: 0; top: 0; width: 1548px; height: 857px; transform-origin: 0 0; transform: translateX(var(--stage-x, 0px)) scale(var(--stage-scale, 1)); }
.mcp-page .scene { position: absolute; inset: 0; }
.mcp-page .scene .photo { position: absolute; inset: 0; width: 1548px; height: 857px; }
/* Ken Burns: each slide's photo eases in toward its centre (100% → 108%) across its time on screen
   (--kb = slide duration + the crossfade), carrying on through the crossfade so it never snaps */
.mcp-page .scene .photo { transform-origin: 50% 50%; }
.mcp-page .scene:is(.is-active, .is-prev) .photo { animation: mcp-ken-burns var(--kb, 6s) linear forwards; }
.mcp-page .devices:has(.stage-nav:is(.is-paused, .is-idle, .is-held)) .scene .photo { animation-play-state: paused; }
@keyframes mcp-ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } }
.mcp-page .scene .photo img, .mcp-page .scene .photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dock photo sits where Figma placed it (Rectangle 38, 362:14814: 127.55% × 127.71%, offset up and left); the shader host draws it at this box */
.mcp-page :is(.scene-ask, .scene-c) .photo img.source { left: -3%; top: -27.72%; width: 127.55%; height: 127.71%; }
/* Each slide shows Figma's own shaded render (373:4752 desk, 373:4751 dock) until the live shader takes over, and in its place
   where WebGPU isn't available; the colour photo underneath is only the shader's input */
.mcp-page .scene .photo img.source { visibility: hidden; }
.mcp-page .scene .photo canvas { opacity: 0; }
.mcp-page .scene .photo.is-shaded canvas { opacity: 1; }
.mcp-page .scene .photo.is-shaded img { visibility: hidden; }
/* Slides (driven by the paginator script): the incoming slide fades in over the outgoing one, which stays put
   underneath until it's covered, so two slides never show through each other. Its chat UI rises in as it lands. */
.mcp-page .scene { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.mcp-page .scene.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.mcp-page .scene.is-prev { z-index: 1; opacity: 1; visibility: visible; transition: none; }
.mcp-page .scene .composer { translate: 0 16px; }
.mcp-page .scene-b .desk-window { translate: -50% 32px; }
.mcp-page .scene-c .phone { translate: 0 72px; }
.mcp-page .scene .composer, .mcp-page .scene-b .desk-window, .mcp-page .scene-c .phone { transition: translate 0.9s cubic-bezier(.16,1,.3,1) 0.15s; }
.mcp-page .scene:is(.is-active, .is-prev) .composer, .mcp-page .scene-c:is(.is-active, .is-prev) .phone { translate: 0 0; }
.mcp-page .scene-b:is(.is-active, .is-prev) .desk-window { translate: -50% 0; }
.mcp-page .scene.is-prev :is(.composer, .desk-window, .phone) { transition: none; }
/* Paginator (Apple-style): dots in a pill, the current one stretches and fills over the slide's duration;
   play/pause beside it */
.mcp-page .stage-nav { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }
/* Same build as the MCP URL box: sharp white box, 1px gray rim with the rotating shine beam over it,
   black offset shadow. Dots are squares; the current one stretches into a bar that fills black. */
.mcp-page .stage-dots, .mcp-page .stage-play {
  --beam: 200px; position: relative; overflow: hidden; height: 44px; border-radius: 0;
  background: var(--gray-300); box-shadow: 4px 4px 0 0 #000;
}
.mcp-page .stage-dots::before, .mcp-page .stage-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--beam); height: var(--beam); margin: calc(var(--beam) / -2) 0 0 calc(var(--beam) / -2);
  background: conic-gradient(var(--beam-stops)); animation: mcp-beam calc(var(--shine-speed) * 2) linear infinite; pointer-events: none;
}
.mcp-page .stage-dots::after, .mcp-page .stage-play::after { content: ""; position: absolute; inset: 1px; background: #fff; pointer-events: none; transition: background-color 0.2s ease; }
.mcp-page .stage-dots { display: flex; align-items: center; gap: 12px; padding: 0 18px; }
.mcp-page .stage-dot { position: relative; z-index: 1; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 0; background: rgba(9,10,12,0.22); overflow: hidden; cursor: pointer; transition: width 0.5s cubic-bezier(.4,0,.25,1), background-color 0.3s ease; }
.mcp-page .stage-dot::before { content: ""; position: absolute; inset: -12px -6px; }
.mcp-page .stage-dot:hover:not(.is-active) { background: rgba(9,10,12,0.45); }
.mcp-page .stage-dot.is-active { width: 44px; background: rgba(9,10,12,0.12); cursor: default; }
.mcp-page .stage-dot .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #000; }
.mcp-page .stage-dot.is-active .fill { animation: mcp-dot-fill var(--slide-dur, 6s) linear forwards; }
.mcp-page .stage-nav:is(.is-paused, .is-idle, .is-held) .stage-dot.is-active .fill { animation-play-state: paused; }
@keyframes mcp-dot-fill { from { width: 8px; } to { width: 100%; } }
.mcp-page .stage-play::before { content: none; }
/* plain gray rim: the shine plays on the dots box only */
/* Paused: the shine fades away, leaving the plain gray rim */
.mcp-page .stage-dots::before { transition: opacity 0.3s ease; }
.mcp-page .stage-nav.is-paused .stage-dots::before { opacity: 0; }
.mcp-page .stage-play { display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; border: 0; color: #000; cursor: pointer; }
.mcp-page .stage-play:hover::after { background: #f2f2f2; }
.mcp-page .stage-play .ic { position: relative; z-index: 1; width: 14px; height: 16px; }
.mcp-page .stage-play .ic-pause { width: 12px; }
.mcp-page .stage-nav:not(.is-paused) .stage-play .ic-play, .mcp-page .stage-nav.is-paused .stage-play .ic-pause { display: none; }
.mcp-page .stage-play .ic-play { margin-left: 2px; }
.mcp-page .stage-dot:focus-visible, .mcp-page .stage-play:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
/* Slide 1 input: the hero composer at the same artboard size — frosted pill, rotating shine rim, typed question, round send */
.mcp-page .scene-a .composer { position: absolute; left: 250px; top: 372px; width: 1077px; height: 113px; display: flex; align-items: center; gap: 24px; padding: 16px 16px 16px 36px; border-radius: 9999px; background: rgba(255,255,255,0.8); border-style: solid; backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
/* Slide 3 input: Figma Mobile/Chat/Composer (343:4359) — 732 wide, 24px corners, a 3px shine rim, the question in two
   Medium lines on top, plus + round 72px send below, centred on the dock photo */
.mcp-page .scene-ask .composer {
  --k: 1.7727; --bw: 3px; position: absolute; left: 408px; top: 50%; transform: translateY(-50%); width: 732px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text text" "plus send"; align-items: center;
  row-gap: 24px; column-gap: 21px;
  padding: 37px 16px 16px 36px; border-radius: 24px;
  background: rgba(255,255,255,0.9); border: var(--bw) solid transparent; background-clip: padding-box;
  backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.mcp-page .scene-ask .composer .typed { grid-area: text; align-self: start; flex: none; line-height: 1.25; min-height: 2.5em; white-space: normal; letter-spacing: normal; }
.mcp-page .scene-ask .composer .typed .word.is-bold { font-weight: inherit; }
/* the first line is no longer bold (Figma 343:4363) */
.mcp-page .scene-ask .composer .caret { height: 42px; vertical-align: -9px; }
.mcp-page .scene-ask .composer .plus { grid-area: plus; width: 36px; height: 36px; }
.mcp-page .scene-ask .composer .send { grid-area: send; width: 72px; height: 72px; }
.mcp-page .scene-ask .composer .send img { width: 32px; height: 32px; }
/* Before the first word: "Reply…" placeholder behind the caret, send disabled (20%, like the phone composer's) */
.mcp-page .scene-ask .composer .typed { position: relative; }
.mcp-page .scene-ask .composer .placeholder { position: absolute; left: 6px; top: 0; font-weight: 400; color: var(--gray-500); pointer-events: none; }
.mcp-page .scene-ask .composer:not(.is-empty) .placeholder { display: none; }
.mcp-page .scene-ask .composer .send { transition: opacity 0.25s ease; }
.mcp-page .scene-ask .composer.is-empty .send { opacity: 0.2; }
/* Slide 2: Figma Chat window / Desktop (343:4257) — 968px window, 20px type, the reply composer full width */
.mcp-page .desk-window { position: absolute; left: 50%; top: 102px; width: 968px; height: 634px; display: flex; overflow: hidden; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; }
.mcp-page .desk-window .rail { width: 57px; background: #f6f6f4; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; }
.mcp-page .desk-window .convo { flex: 1; display: flex; flex-direction: column; }
.mcp-page .desk-window .thread { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 16px 32px 0; overflow: hidden; }
.mcp-page .chat-bubble { background: #000; color: #fff; border-radius: 20px 20px 7px 20px; padding: 12px 18px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.mcp-page .agent-msg { display: flex; flex-direction: column; gap: 16px; }
.mcp-page .agent-msg .body { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.mcp-page .agent-msg .box { background: #efefef; border: 1px solid #eaeaea; border-radius: 8px; padding: 16px; white-space: pre-line; }
.mcp-page .desk-window .user-turn { display: flex; justify-content: flex-end; }
.mcp-page .desk-window .chat-bubble { padding: 12px 18px; border-radius: 20px 20px 7px 20px; font-size: 20px; letter-spacing: normal; }
.mcp-page .desk-window .agent-msg { width: 653px; gap: 16px; }
.mcp-page .desk-window .agent-msg .agent-tag { gap: 8px; font-size: 14px; }
.mcp-page .desk-window .agent-msg .agent-tag .ic { width: 20px; height: 20px; }
.mcp-page .desk-window .agent-msg .body { gap: 5.3px; font-size: 20px; }
.mcp-page .desk-window .agent-msg .box { width: var(--box-w, auto); padding: 16px; border-width: 1px; border-radius: 8px; font-size: 20px; }
.mcp-page .desk-window .agent-msg .box-row:empty { display: none; }
.mcp-page .desk-window .user-turn .sent { display: none; }
.mcp-page .desk-window .dot { width: 15.65px; height: 15.65px; border-radius: 1.3px; background: #000; animation: mcp-blink 1.1s steps(1) infinite; }
/* Slide 2 plays like the page's other exchanges: the question bounces in, then "Your AI agent", then the reply types
   word by word with an inline square caret (script), and the resting square takes over */
.mcp-page .desk-window:not(.is-replying) .chat-bubble, .mcp-page .desk-window:not(.is-replying) .agent-tag { opacity: 0; }
.mcp-page .desk-window.is-replying .chat-bubble { animation: mcp-bubble-in 0.75s 0.45s both; }
.mcp-page .desk-window.is-replying .agent-tag { animation: mcp-ap-label-in 0.3s ease-out 1.05s backwards, mcp-agent-sweep 2.4s linear infinite; }
.mcp-page .desk-window .dot.is-inline { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 3px; vertical-align: baseline; animation: none; }
.mcp-page .composer-sm { height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 9999px; background: #fff; border: 1px solid var(--gray-200); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); }
.mcp-page .composer-sm .plus { width: 18px; height: 18px; }
.mcp-page .composer-sm .placeholder { flex: 1; font-size: 15px; color: var(--gray-500); }
.mcp-page .tool-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #f2f2f2; border: 1px solid #d9d9d9; font-size: 13px; font-weight: 500; color: #000; }
.mcp-page .tool-chip img { width: 7px; height: 7px; }
.mcp-page .send-sm { width: 36px; height: 36px; border-radius: 18px; background: var(--gray-950); opacity: 0.2; display: flex; align-items: center; justify-content: center; }
.mcp-page .send-sm img { width: 16px; height: 16px; }
.mcp-page .desk-window .composer-area { display: flex; justify-content: center; padding: 0 24px 20px; }
.mcp-page .desk-window .composer-sm { width: 100%; }
/* Slide 4 phone: Figma "Phone / Hero chat" (324:7790), 488×806, centred and running off the bottom of the frame;
   one white status + title block casting a shadow over the chat, a 514px chat body, then the reply composer */
.mcp-page .phone { position: absolute; left: 530px; top: 222px; width: 488px; height: 806px; padding: 8.2px 6px; border-radius: 64.4px; background: #0d0a1a; box-shadow: 0 41px 82px rgba(26,13,51,0.28); display: flex; }
.mcp-page .phone .screen { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 57.6px; overflow: hidden; }
.mcp-page .phone .topbar { position: relative; z-index: 1; background: #fff; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); }
.mcp-page .phone .status { display: flex; align-items: center; padding: 19.2px 35.6px 8.2px; color: #000; }
.mcp-page .phone .status b { flex: 1; font-size: 19.2px; font-weight: 600; }
.mcp-page .phone .status span { font-size: 13.7px; }
.mcp-page .phone .app-head { padding: 11px 24.7px 13.7px; }
.mcp-page .phone .app-head .agent-tag { color: #000; }
.mcp-page .phone .agent-tag { gap: 11px; font-size: 19.2px; }
.mcp-page .phone .agent-tag .ic { width: 27.4px; height: 27.4px; }
.mcp-page .phone .screen > .body { flex: none; height: 514px; padding: 20px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
/* Figma 324:7799 */
.mcp-page .phone .chat-scroll { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.mcp-page .phone .chat-scroll > * { width: 100%; }
.mcp-page .phone .chat-scroll > .agent-msg.is-tight { width: 427.7px; }
/* Figma 324:7812: the phone's reply composer — "Reply…" over plus, the Mothership chip and a dimmed send */
.mcp-page .phone .composer-area { padding: 0 16.45px 27.4px; }
.mcp-page .phone .composer-lg { height: 130.2px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16.45px; padding: 11px 11px 11px 24.7px; border-radius: 32.9px; background: #fff; border: 1.37px solid var(--gray-200); filter: drop-shadow(0 2.74px 5.48px rgba(0,0,0,0.05)); }
.mcp-page .phone .composer-lg .placeholder { font-size: 20.56px; color: var(--gray-500); }
.mcp-page .phone .composer-lg .row { display: flex; align-items: flex-end; justify-content: space-between; }
.mcp-page .phone .composer-lg .tools { display: flex; align-items: center; gap: 16.45px; }
.mcp-page .phone .composer-lg .plus { width: 24.7px; height: 24.7px; }
.mcp-page .phone .composer-lg .tool-chip { gap: 8.2px; padding: 5.5px 13.7px 5.5px 11px; border-width: 1.37px; font-size: 17.8px; }
.mcp-page .phone .composer-lg .tool-chip img { width: 9.6px; height: 9.6px; }
.mcp-page .phone .composer-lg .send-sm { width: 49.35px; height: 49.35px; border-radius: 24.7px; }
.mcp-page .phone .composer-lg .send-sm img { width: 21.9px; height: 21.9px; }
.mcp-page .phone .agent-msg { gap: 21.9px; }
.mcp-page .phone .agent-msg .body { gap: 7.3px; padding: 0; font-size: 23.3px; }
.mcp-page .phone .agent-msg .box { padding: 21.9px; border-width: 1.4px; border-radius: 11px; font-size: 20.6px; }
.mcp-page .phone .agent-msg.is-tight { width: 427.7px; gap: 11px; }
.mcp-page .phone .agent-msg.is-tight .body { letter-spacing: -0.01em; }
/* Figma I324:7811;210:137: -1% */
.mcp-page .phone .user-turn { display: flex; justify-content: flex-end; }
.mcp-page .phone .chat-bubble { width: 315.3px; padding: 16.4px 24.7px; border-radius: 27.4px 27.4px 9.6px 27.4px; font-size: 23.3px; }
.mcp-page .phone .cursor-block { width: 13.7px; height: 13.7px; margin-top: 3.7px; }
/* Slide 4 plays like the page's other exchanges once the phone has risen in: the bubble bounces in,
   then "Your AI agent", then the reply types (script) and the cursor block takes over */
.mcp-page .phone:not(.is-replying) .user-turn .chat-bubble, .mcp-page .phone:not(.is-replying) .agent-msg.is-tight .agent-tag { opacity: 0; }
.mcp-page .phone.is-replying .user-turn .chat-bubble { animation: mcp-bubble-in 0.75s 0.7s both; }
.mcp-page .phone.is-replying .agent-msg.is-tight .agent-tag { animation: mcp-ap-label-in 0.3s ease-out 1.3s backwards, mcp-agent-sweep 2.4s linear infinite; }
/* ── Dark sections ── */
.mcp-page .on-dark { background: #000; color: rgba(255,255,255,0.9); }
/* Cursor grid (script below): a canvas of square cells that light up with a dithered fill under the pointer
   and ripple out on click. In the hero it sits over the video and fade, under the input and chat; in the dark
   sections it sits just above the section's own background, under everything else. */
.mcp-page .cursor-grid { position: absolute; left: 0; top: 0; pointer-events: none; }
.mcp-page .on-dark { position: relative; isolation: isolate; }
.mcp-page .on-dark > .cursor-grid { z-index: -1; }
/* White sections: a soft gray grid under everything in the section */
.mcp-page .has-soft-grid { position: relative; isolation: isolate; }
.mcp-page .has-soft-grid > .cursor-grid { z-index: -1; }
/* Hero: the gray grid takes over where the video fades to white (--fade-a/--fade-b follow the fade) */
.mcp-page .hero > .cursor-grid.is-soft { -webkit-mask: linear-gradient(to bottom, transparent var(--fade-a, 50%), #000 var(--fade-b, 60%)); mask: linear-gradient(to bottom, transparent var(--fade-a, 50%), #000 var(--fade-b, 60%)); }
.mcp-page .hero:not([data-intro="done"]) > .cursor-grid.is-soft { -webkit-mask: linear-gradient(to bottom, transparent var(--fade-a-intro, 50%), #000 var(--fade-b-intro, 60%)); mask: linear-gradient(to bottom, transparent var(--fade-a-intro, 50%), #000 var(--fade-b-intro, 60%)); }
.mcp-page .setup-bg { z-index: -2; }
/* The chat card's frosted glass blurs the hero's gray grid away, so a copy of it is drawn above the glass (under the
   card's content), lined up with the hero; it fades out with the glass so the hero's own grid takes over below */
.mcp-page .chat-app > .chat-grid { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; -webkit-mask: var(--chrome-fade); mask: var(--chrome-fade); }
.mcp-page .chat-grid > .cursor-grid { -webkit-mask: linear-gradient(to bottom, transparent var(--fade-a, 50%), #000 var(--fade-b, 60%)); mask: linear-gradient(to bottom, transparent var(--fade-a, 50%), #000 var(--fade-b, 60%)); }
.mcp-page .hero:not([data-intro="done"]) .chat-grid > .cursor-grid { -webkit-mask: linear-gradient(to bottom, transparent var(--fade-a-intro, 50%), #000 var(--fade-b-intro, 60%)); mask: linear-gradient(to bottom, transparent var(--fade-a-intro, 50%), #000 var(--fade-b-intro, 60%)); }
.mcp-page .autopilot { padding: 120px 0; display: flex; flex-direction: column; align-items: center; gap: 80px; }
/* A one-line label in the bracket's gap; the bracket starts at the label's middle and ends exactly on the box's top
   border, not across it */
.mcp-page .autopilot .bracket { height: 129px; justify-content: center; }
.mcp-page .autopilot .bracket-lines { width: min(1053px, calc(100% - 2 * var(--gutter))); top: 65.5px; height: 76.5px; }
.mcp-page .autopilot .bracket-label { line-height: 30px; color: rgba(255,255,255,0.9); }
.mcp-page .ap-box { position: relative; width: min(var(--content), calc(100% - 2 * var(--gutter))); margin: 13px auto 0; border: 1px solid rgba(209,209,209,0.3); padding: 80px 51px 80px 92px; display: flex; flex-direction: column; gap: 36px; }
.mcp-page .ap-row { display: flex; gap: 24px; align-items: flex-start; }
.mcp-page .ap-title { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; font-size: 22px; line-height: 32px; font-weight: 500; color: rgba(255,255,255,0.9); }
.mcp-page .ap-title .ic { width: 24px; height: 24px; color: #fff; }
.mcp-page .ap-card { width: 536px; flex-shrink: 0; background: #1d1d1d; border: 1px solid #2b2b2b; box-shadow: 10px 10px 0 0 #141414; /* opaque so the cursor grid doesn't show through */ padding: 38px 24px 50px 22px; display: flex; flex-direction: column; gap: 12px; }
.mcp-page .ap-card .user-turn { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mcp-page .ap-card .chat-bubble { width: 300px; background: var(--green); color: #000; font-size: 17px; border-radius: 12px 12px 7px 12px; }
.mcp-page .ap-card .sent { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: #b0b0b0; }
.mcp-page .ap-card .ap-routine { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: #b0b0b0; }
.mcp-page .ap-card .ap-routine .ic { width: 16px; height: 16px; }
/* The receipts card's PDF stack keeps the chat's dark-on-white type, and waits out each reply's typing */
.mcp-page .ap-card .file-card { font-family: var(--font-geist); color: #141414; transition: opacity 0.4s ease, translate 0.5s cubic-bezier(.2,.7,.2,1), visibility 0.4s; }
.mcp-page .ap-card .agent-msg p.tw:not(.is-typed) + .file-card { opacity: 0; translate: 0 8px; visibility: hidden; transition-duration: 0s; }
/* same type as "Your AI agent" */
.mcp-page .ap-card .agent-msg { gap: 13px; }
.mcp-page .ap-card .agent-msg .agent-tag { opacity: 0.5; }
.mcp-page .ap-card .agent-msg p { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.34px; color: #fff; }
.mcp-page .ap-note { width: 162px; flex-shrink: 0; margin: 7px 0 0 11px; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.42); }
/* Each card holds three examples: click it (or a dot) for the next; the dots are the slider paginator in miniature */
.mcp-page .ap-card.is-carousel { cursor: pointer; }
/* Hover: the MCP URL box's raised-key lift in dark — the card moves 2px up-left as its hard shadow grows by 2px */
.mcp-page .ap-card { transition: transform 0.2s cubic-bezier(.2,.7,.3,1), box-shadow 0.2s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) {
  .mcp-page .ap-card.is-carousel:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 0 #141414; }
}
.mcp-page .ap-card :is(.user-turn, .ap-routine), .mcp-page .ap-card .agent-msg { transition: opacity 0.2s ease, transform 0.25s ease; }
.mcp-page .ap-card.is-switching :is(.user-turn, .ap-routine), .mcp-page .ap-card.is-switching .agent-msg { opacity: 0; transform: translateY(-6px); }
/* Example dots: the slider paginator's square dots at a tiny size, no box, pinned to the card's bottom-right corner;
   light on the dark card, the current one a white bar */
.mcp-page .ap-card.is-carousel { position: relative; }
.mcp-page .ap-dots { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 5px; }
.mcp-page .ap-dot { position: relative; width: 4px; height: 4px; padding: 0; border: 0; border-radius: 0; background: rgba(255,255,255,0.3); cursor: pointer; transition: width 0.4s cubic-bezier(.4,0,.25,1), background-color 0.3s ease; }
.mcp-page .ap-dot::before { content: ""; position: absolute; inset: -8px -3px; }
.mcp-page .ap-dot:hover:not(.is-active) { background: rgba(255,255,255,0.6); }
/* Figma 343:4486: the current dot is a 16×4 outline with a white bar inside that fills over 3s — the autoplay timer */
.mcp-page .ap-dot.is-active { width: 16px; background: transparent; box-shadow: inset 0 0 0 1px #fff; cursor: default; }
.mcp-page .ap-dot::after { content: ""; position: absolute; left: 1px; top: 0.5px; height: 3px; width: 0; background: #fff; }
.mcp-page .ap-dots.is-timing .ap-dot.is-active::after { animation: mcp-ap-timer 4.5s linear forwards; }
@keyframes mcp-ap-timer { to { width: calc(100% - 2px); } }
.mcp-page .ap-dot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* The pause button after the dots: white like them, a play icon while paused; none for reduced motion, which never plays */
.mcp-page .ap-pause { position: relative; display: flex; align-items: center; justify-content: center; width: 10px; height: 10px; margin-left: 5px; padding: 0; border: 0; background: none; color: rgba(255,255,255,0.6); cursor: pointer; transition: color 0.2s ease; }
.mcp-page .ap-pause::before { content: ""; position: absolute; inset: -8px; }
.mcp-page .ap-pause:hover { color: #fff; }
.mcp-page .ap-pause:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.mcp-page .ap-pause > span { display: flex; width: 8px; height: 9px; }
.mcp-page .ap-pause svg { width: 100%; height: 100%; display: block; }
.mcp-page .ap-dots:not(.is-paused) .ap-pause .ic-play, .mcp-page .ap-dots.is-paused .ap-pause .ic-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .mcp-page .ap-pause { display: none; } }
.mcp-page .apps { padding: 60px 0 92px; }
.mcp-page .apps .exchange { gap: 80px; }
/* Figma 422:15463: the three tiles share their borders in one 1000px strip, with "and many more" as its bottom row and
   one offset shadow under the lot */
.mcp-page .apps-strip { width: min(1000px, 100%); margin: 0 auto; box-shadow: 10px 10px 0 rgba(53,53,53,0.25); }
.mcp-page .apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* …and on the black sections the same in white */
.mcp-page :is(.apps, .setup) .signup-note { color: rgba(255,255,255,0.6); }
.mcp-page :is(.apps, .setup) .signup-faint { color: rgba(255,255,255,0.4); }
.mcp-page :is(.apps, .setup) .copy-tiny:hover { color: #fff; }
/* Each tile is frosted like the setup steps box: a translucent fill with a background blur over the cursor grid.
   Its wordmark, a rule and the tools built on the app stack 32px apart; the launch mark sits in the top-right corner */
.mcp-page .app-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 40px 24px;
  border: 1px solid rgba(209,209,209,0.3); background: rgba(255,255,255,0.01);
  backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); transition: border-color 0.2s, background-color 0.2s;
}
.mcp-page .app-tile + .app-tile { border-left: 0; }
.mcp-page .app-tile:hover { background-color: rgba(255,255,255,0.07); }
/* The app's link covers the whole tile; a tool from another company (Cursor) sits above it with its own link */
.mcp-page .app-tile a { color: inherit; text-decoration: none; }
.mcp-page .app-tile .app-link { display: flex; }
.mcp-page .app-tile .app-link img { width: auto; height: 40px; }
.mcp-page .app-tile .app-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mcp-page .app-tile .app-link:focus-visible { outline: none; }
.mcp-page .app-tile:has(.app-link:focus-visible) { outline: 2px solid #fff; outline-offset: -3px; }
.mcp-page .app-tile .app-more > a { position: relative; z-index: 2; }
.mcp-page .app-tile .app-more > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mcp-page .app-tile .app-more > a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mcp-page .app-tile .app-rule { align-self: stretch; height: 1px; background: rgba(209,209,209,0.3); }
.mcp-page .app-tile .app-more { display: flex; align-items: center; gap: 32px; }
.mcp-page .app-tile .app-more > :is(span, a) { display: flex; align-items: center; gap: 12px; font-family: var(--font-geist); font-weight: 500; font-size: 13.96px; line-height: 18px; color: #fff; white-space: nowrap; }
.mcp-page .app-tile .app-more img { width: auto; height: 20px; }
.mcp-page .app-tile .launch { position: absolute; right: 16px; top: 16px; width: 20px; height: 20px; color: #fff; }
/* Figma 439:5904: "and many more" and four more apps' marks, centred in the strip's bottom row */
.mcp-page .apps-many { display: flex; align-items: center; justify-content: center; gap: 42px; padding: 24px; border: 1px solid rgba(209,209,209,0.3); border-top: 0; background: rgba(255,255,255,0.01); backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); font-family: var(--font-geist); font-weight: 500; font-size: 13.96px; line-height: 18px; color: #fff; }
.mcp-page .apps-many-logos { display: flex; align-items: center; gap: 42px; }
.mcp-page .apps-many-logos img { width: 30px; height: 30px; }
.mcp-page .setup { position: relative; padding: 96px 0; overflow: hidden; }
.mcp-page .setup-bg { position: absolute; left: 0; right: 0; top: -198px; height: 1282px; pointer-events: none; overflow: hidden; }
/* Ken Burns: a 13.35s drift in toward the cube and back out, on a loop */
.mcp-page .setup-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; animation: mcp-setup-kb 13.35s ease-in-out infinite alternate; }
@keyframes mcp-setup-kb { from { transform: scale(1); } to { transform: scale(1.1); } }
.mcp-page .setup-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 7.584%, #000 85.393%); }
.mcp-page .setup .exchange { position: relative; gap: 80px; }
/* Logos in front of a one-line note; the bracket starts at the note's middle and drops onto the steps box */
.mcp-page .setup .bracket { height: 129px; justify-content: center; }
.mcp-page .setup .bracket-label { line-height: 30px; }
.mcp-page .setup .bracket-label .note { white-space: nowrap; }
.mcp-page .setup .bracket-lines { width: 783px; height: 63.5px; top: 65.5px; }
.mcp-page .steps { position: relative; border: 1px solid rgba(209,209,209,0.3); background: rgba(255,255,255,0.01); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); padding: 64px 56px; display: flex; align-items: stretch; gap: 20px; }
.mcp-page .step { flex: 1; min-width: 0; }
/* Figma 343:7594: an arrow between steps, level with the middle of the cards (139.5px up from the bottom) */
.mcp-page .step-arrow { flex-shrink: 0; align-self: flex-end; width: 25px; height: 279px; margin-right: -1px; }
.mcp-page .step { position: relative; display: flex; flex-direction: column; gap: 16px; }
.mcp-page .step .num { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 67px; letter-spacing: -0.02em; color: #fff; }
.mcp-page .step .what { font-size: 16px; font-weight: 500; color: #fff; max-width: 236px; }
.mcp-page .step:not(:first-child) .what { max-width: none; }
.mcp-page .step-card { flex: 1; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 13px; font-family: var(--font-geist); color: #fff; }
.mcp-page .step-card.is-center { align-items: center; }
/* Figma 288:5067: the URL in its own outlined field */
.mcp-page .step-card .url-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-family: var(--font-geist); font-size: 16px; font-weight: 400; line-height: 20px; }
.mcp-page .step-card .url-row .ic { width: 16px; height: 16px; }
.mcp-page .copy-green { background: var(--green-copy); color: #000; font-family: var(--font-ui); font-weight: 500; font-size: 16px; padding: 5px 12px; border-radius: 0; min-width: 0; }
.mcp-page .copy-green:hover { filter: brightness(1.1); }
.mcp-page .step-card .section-label { padding: 0 0 8px 11px; font-size: 12px; font-weight: 600; line-height: 16px; opacity: 0.5; }
.mcp-page .nav-item { display: flex; align-items: center; gap: 16px; padding: 18px 12px; border-radius: 8px; font-size: 18px; line-height: 24px; }
.mcp-page .nav-item .ic { width: 22px; height: 22px; }
.mcp-page .nav-item.is-active { background: rgba(255,255,255,0.1); border-radius: 4px; }
.mcp-page .step-cursor { position: absolute; width: 34px; height: 54px; pointer-events: none; }
.mcp-page .step-cursor img { position: absolute; inset: -1.93% -9.13% -9.65% -9.13%; width: auto; height: auto; }
.mcp-page .auth { flex: none; justify-content: flex-start; gap: 21px; padding: 20px 16px; }
/* Figma 288:5358 */
.mcp-page .auth > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.mcp-page .auth .eyebrow { font-size: 12px; font-weight: 600; line-height: 16px; opacity: 0.3; }
.mcp-page .auth h3 { font-size: 18px; font-weight: 400; line-height: 24px; max-width: 227px; color: rgba(255,255,255,0.8); }
.mcp-page .auth .fine { font-size: 10px; line-height: 12px; color: #5a5a5a; }
.mcp-page .auth .account { background: rgba(255,255,255,0.05); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.mcp-page .auth .account b { font-size: 12px; font-weight: 600; line-height: 16px; color: rgba(255,255,255,0.8); }
.mcp-page .auth .actions { display: flex; justify-content: flex-end; gap: 8px; opacity: 0.5; }
.mcp-page .auth .actions .btn { display: inline-flex; align-items: center; font-family: var(--font-geist); font-size: 14px; font-weight: 600; line-height: 18px; height: 32px; padding: 0 12px; border-radius: 4px; background: rgba(255,255,255,0.14); color: #fff; }
/* ── Closing CTA + footer ── */
.mcp-page .cta { padding: 160px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.mcp-page .cta .display { color: #000; --iri-ink: #000; text-wrap: balance; max-width: 790px; } /* Figma 311:853: two lines */
/* Figma 245:969; the hero's iridescent band, RGB split and glow sweep it once it has typed */
/* Figma Closing CTA (311:852): headline, "Powered by" 24px under it, then 96px down the square Sign up block and the URL box
   with its note 14px under it, 32px apart */
.mcp-page .cta .actions { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; justify-content: center; margin-top: 72px; }
.mcp-page .cta .url-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mcp-page .signup { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 22px 0 20px; border-radius: 0; background: #000; color: #fff; font-family: var(--font-geist); font-weight: 600; font-size: 16px; transition: background 0.15s; }
.mcp-page .signup:hover { background: #222; }
.mcp-page .signup img { width: 14px; height: 14px; }
/* ── Scroll reveal (below the hero): fade up as each block enters the viewport ── */
.mcp-page .reveal { opacity: 0; translate: 0 48px; transition: opacity 0.5s cubic-bezier(.25,.1,.25,1) var(--reveal-delay, 0s), translate 0.7s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0s); }
.mcp-page .reveal.is-visible { opacity: 1; translate: 0 0; }
/* AI replies type in word by word; a square caret leads each new word */
.mcp-page .tw { position: relative; }
.mcp-page .tw .tw-w { visibility: hidden; }
.mcp-page .tw .tw-w.is-on { visibility: visible; animation: mcp-tw-in 0.2s ease-out both; }
@keyframes mcp-tw-in { from { opacity: 0; } }
.mcp-page .tw-caret { position: absolute; left: 0; top: 0; border-radius: 2px; background: currentColor; opacity: 0; pointer-events: none; }
.mcp-page .tw-caret.is-on { opacity: 1; }
.mcp-page .tw:not(.is-typed) + .cursor-block { visibility: hidden; animation: none; }
/* blink restarts "on" at hand-off */
/* data-tw-keep (closing CTA): no square under the line; the caret stays after the last word, headline-square size, and blinks */
.mcp-page [data-tw-keep] { --tw-caret: 30px; }
.mcp-page .tw-caret.is-resting { animation: mcp-blink 1.1s steps(1) infinite; }
/* User bubbles (black and green) use the bounce instead of the plain fade-up */
.mcp-page .page-bubble.reveal { translate: none; transition: none; }
.mcp-page .sent-by.reveal { translate: none; transition: opacity 0.4s ease calc(var(--reveal-delay, 0s) + 0.5s); }
.mcp-page .page-bubble.reveal.is-visible { animation: mcp-bubble-in 0.75s var(--reveal-delay, 0s) both; }
.mcp-page .ap-row.reveal .ap-card .chat-bubble { opacity: 0; }
/* In order: bubble bounces in, then "Sent by you", then "Your AI agent", then the reply types (tw-delay 1.15s) */
.mcp-page .ap-row.reveal:not(.is-visible) .ap-card :is(.sent, .ap-routine), .mcp-page .ap-row.reveal:not(.is-visible) .ap-card .agent-msg .agent-tag { opacity: 0; }
.mcp-page .ap-row.reveal.is-visible .ap-card .ap-routine { animation: mcp-ap-label-in 0.3s ease-out calc(var(--reveal-delay, 0s) + 0.35s) both; }
.mcp-page .ap-row.reveal.is-visible .ap-card .sent { animation: mcp-ap-label-in 0.3s ease-out calc(var(--reveal-delay, 0s) + 0.75s) both; }
.mcp-page .ap-row.reveal.is-visible .ap-card .agent-msg .agent-tag { animation: mcp-ap-label-in 0.3s ease-out calc(var(--reveal-delay, 0s) + 0.95s) both; }
@keyframes mcp-ap-label-in { from { opacity: 0; transform: translateY(4px); } }
.mcp-page .ap-row.reveal.is-visible .ap-card .chat-bubble { animation: mcp-bubble-in 0.75s calc(var(--reveal-delay, 0s) + 0.35s) both; }
.mcp-page .cursor-block.reveal { opacity: 1; translate: none; visibility: hidden; transition: visibility 0s linear calc(var(--reveal-delay, 0s) + 0.5s); }
.mcp-page .cursor-block.reveal.is-visible { visibility: visible; }
/* ── Responsive ── */
@media (max-width: 1180px) {
  .mcp-page .ap-row { flex-wrap: wrap; }
  .mcp-page .ap-card { width: min(536px, 100%); }
  .mcp-page .ap-box { padding: 80px 56px; }
  /* the desktop's 92px title column no longer applies once the rows wrap */
  .mcp-page .ap-note { width: 100%; max-width: 536px; margin-left: 244px; }
}
@media (max-width: 1000px) {
  .mcp-page .steps { flex-direction: column; }
  .mcp-page .step-arrow { display: none; }
  /* Figma Built (768) 343:13290 */
  .mcp-page .cta .display { font-size: 52px; line-height: 58px; letter-spacing: -0.02em; max-width: 676px; }
  /* Figma Built (768) 351:1998: the tiles stack in one 673px column, still sharing their borders */
  /* wider than the headline column above it: it shares that column's right edge and runs 48px from each side, as in Figma */
  .mcp-page .apps .exchange { --strip: min(673px, 100vw - 96px); }
  /* the row of more apps comes out of the strip again and sits 48px under it (the section stacks its parts 80px apart),
     so the strip and the row each lay out on their own and the shadow goes back to the tiles */
  .mcp-page .apps-strip { display: contents; }
  .mcp-page :is(.apps-grid, .apps-many) { width: var(--strip); margin-left: calc(100% - var(--strip)); }
  .mcp-page .apps-grid { grid-template-columns: minmax(0, 1fr); box-shadow: 10px 10px 0 rgba(53,53,53,0.25); }
  .mcp-page .apps-many { margin-top: -32px; padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mcp-page .app-tile .app-rule { background: rgba(209,209,209,0.15); }
  .mcp-page .app-tile + .app-tile { border-left: 1px solid rgba(209,209,209,0.3); border-top: 0; }
  .mcp-page .app-tile .app-rule { align-self: flex-start; width: 248px; }
  .mcp-page .examples > .signup-note { bottom: 8px; }
  .mcp-page .bracket-lines { display: none; }
  .mcp-page :is(.setup, .autopilot) .bracket { height: auto; }
  .mcp-page .ap-title { width: 100%; }
  .mcp-page .ap-note { margin-left: 0; }
  /* Intro input on tablets and phones: Figma Mobile/Chat/Composer (370:3355 / 368:734) at its own size — the question on
     top, plus and a round send below (no tool chip in the intro), 24px corners, a 3px shine rim, send at 20% until typing */
  .mcp-page .intro-composer {
    --bw: 3px; --composer-h: 251px; /* room for two lines of the 39px question */
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text text" "plus send";
    align-items: center; row-gap: 24px; column-gap: 24px; padding: 37px 16px 16px 36px; border-radius: 24px;
    background: rgba(255,255,255,0.9); box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }
  .mcp-page .intro-composer .typed { grid-area: text; align-self: start; font-size: 39px; line-height: 1.25; letter-spacing: normal; white-space: normal; }
  .mcp-page .intro-composer .caret { height: 42px; vertical-align: -9px; }
  .mcp-page .intro-composer .plus { grid-area: plus; width: 36px; height: 36px; }
  .mcp-page .intro-composer .send { grid-area: send; width: 72px; height: 72px; border-radius: 50%; transition: opacity 0.25s ease; }
  .mcp-page .intro-composer .send img { width: 32px; height: 32px; }
  .mcp-page .intro-composer.is-empty .send { opacity: 0.2; }
  /* Hero, Figma Built (768) 351:1608: the card 666px wide 114px down; the thread 42px in from each side of the
     conversation, 24px top padding, 32px apart; a 472px bubble; the headline at 46/52 */
  /* Tablets and phones: the card and everything under it sit 40px higher; the clip stays put (script) */
  .mcp-page .hero { padding-top: 74px; --hero-video-hold: 40px; }
  .mcp-page .chat-app { width: min(666px, calc(100% - 2 * var(--gutter))); }
  .mcp-page .chat-convo { --thread-w: calc(100% - 84px); }
  .mcp-page .chat-thread { padding-top: 24px; gap: 32px; }
  .mcp-page .hero { --hero-bubble-w: 472px; }
  .mcp-page .hero-reply > .agent-tag { margin-bottom: -8px; }
  /* 12px over the headline, which keeps 20px to the cursor */
  .mcp-page .hero-reply h1 { font-size: 46px; line-height: 52px; }
  /* Connect block (Figma 370:3625): no frame — the lead in Medium 18 over two lines, the note 6px under it in two
     lines, the URL box 20px under that, then the copy, the logos and "Powered by" 56px apart */
  .mcp-page .hero-connect { margin: 48px auto 0; }
  .mcp-page .cf-edge { gap: 0; justify-content: center; }
  .mcp-page .cf-edge .cf-line, .mcp-page .cf-body::before, .mcp-page .cf-body::after { display: none; }
  .mcp-page .br-mobile { display: inline; }
  .mcp-page .cf-edge .lead { font-size: 18px; line-height: 23px; }
  .mcp-page .cf-body { padding: 6px 0 56px; gap: 56px; }
  .mcp-page .connect-block .pixel-note { max-width: 219px; }
  /* Devices slider, Figma 473:17260: a taller 668×950 frame (photos crop to cover, the wide overlays shrink to the visible
     width) with the tablet input on screen — the intro's 39px question, 36px plus, 72px send — 79px in from each side */
  .mcp-page .stage-wrap { aspect-ratio: 668 / 950; }
  .mcp-page .scene-a .composer, .mcp-page .scene-ask .composer {
    --k: calc(1 / var(--stage-scale, 1)); --bw: calc(1.5px * var(--k));
    left: 0; right: 0; margin: 0 auto; width: calc(var(--stage-vis, 1548) * 1px - 158px * var(--k));
    top: 50%; transform: translateY(-50%); height: auto; min-height: calc(251px * var(--k));
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text text" "plus send";
    align-items: center; row-gap: calc(24px * var(--k)); column-gap: calc(24px * var(--k));
    padding: calc(37px * var(--k)) calc(16px * var(--k)) calc(16px * var(--k)) calc(36px * var(--k)); border-radius: calc(24px * var(--k));
  }
  .mcp-page .scene-a .composer .typed, .mcp-page .scene-ask .composer .typed { grid-area: text; align-self: start; font-size: calc(39px * var(--k)); line-height: 1.25; letter-spacing: normal; min-height: 0; white-space: normal; }
  .mcp-page .scene-a .composer .caret, .mcp-page .scene-ask .composer .caret { width: calc(1.5px * var(--k)); height: calc(42px * var(--k)); vertical-align: calc(-9px * var(--k)); }
  .mcp-page .scene-a .composer .plus, .mcp-page .scene-ask .composer .plus { grid-area: plus; width: calc(36px * var(--k)); height: calc(36px * var(--k)); }
  .mcp-page .scene-a .composer .send, .mcp-page .scene-ask .composer .send { grid-area: send; width: calc(72px * var(--k)); height: calc(72px * var(--k)); }
  .mcp-page .scene-a .composer .send img, .mcp-page .scene-ask .composer .send img { width: calc(32px * var(--k)); height: calc(32px * var(--k)); }
  /* Slide 2's desk window (Figma 470:16042): 536×634 on screen, 141px down the photo and centred. It's sized in screen
     pixels and scaled back by the stage's scale, so it doesn't shrink with the photo. A 57px rail; the desktop composer
     (697px) runs off its right edge; the question 88px down on the right, the reply 30px in from the rail, the
     shipments as three cards */
  .mcp-page .desk-window { --k: calc(1 / var(--stage-scale, 1)); width: 536px; height: 634px; top: calc(141.5px * var(--k)); transform-origin: 50% 0; scale: var(--k); }
  .mcp-page .desk-window .rail { flex: none; background: #f5f5f5; }
  .mcp-page .desk-window .convo { min-width: 0; } /* the wide composer runs off the edge without widening the thread */
  .mcp-page .desk-window .thread { justify-content: flex-start; gap: 23px; padding: 87px 23px 0 30px; }
  .mcp-page .desk-window .user-turn { flex-direction: column; align-items: flex-end; gap: 5.9px; }
  .mcp-page .desk-window .chat-bubble { padding: 12.1px 18.2px; border-radius: 20.2px 20.2px 7.1px 20.2px; font-size: 20.24px; }
  .mcp-page .desk-window .user-turn .sent { display: block; font-size: 14.75px; color: #808080; }
  .mcp-page .desk-window .agent-msg { width: 394px; gap: 7.86px; }
  .mcp-page .desk-window .agent-msg .agent-tag { gap: 0; font-size: 0; }
  .mcp-page .desk-window .agent-msg .body { gap: 7.86px; font-size: 18px; line-height: normal; letter-spacing: -0.02em; }
  .mcp-page .desk-window .agent-msg .box { width: auto; display: flex; flex-direction: column; gap: 7.86px; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal; }
  .mcp-page .desk-window .agent-msg .box-row { padding: 8px 11px; border: 1.48px solid #eaeaea; border-radius: 11.8px; background: #efefef; font-size: 15px; }
  .mcp-page .desk-window .agent-msg > .dot { width: 17.7px; height: 17.7px; border-radius: 2.95px; margin-top: 15.7px; }
  .mcp-page .desk-window .composer-area { justify-content: flex-start; padding: 0 0 21px 53px; }
  .mcp-page .desk-window .composer-sm { flex: none; width: 697px; }
  /* Closing CTA (Figma 343:13288): the buttons 64px under "Powered by" */
  .mcp-page .cta .actions { margin-top: 40px; }
}
/* Tablet only (Figma Built (768) 351:1859, 432:2508): each bracket label and its copy sit on the slider's left edge, left-aligned */
@media (min-width: 721px) and (max-width: 1000px) {
  .mcp-page :is(.examples, .devices) .bracket { width: min(668px, 100% - 2 * var(--bg-inset)); margin: 0 auto; align-items: flex-start; }
  .mcp-page :is(.examples, .devices) .bracket-label { margin-left: -8px; }
  .mcp-page :is(.examples, .devices) .bracket-copy { --w: min(668px, 100% - 2 * var(--bg-inset)); width: var(--w); margin-top: 16px; padding-right: max(0px, calc(var(--w) - 529px)); text-align: left; }
  .mcp-page .stage-wrap { margin-top: 44px; }
  /* A copy inside its bracket takes the bracket's width, so it starts under the label like the one outside */
  .mcp-page .bracket > .bracket-copy { --w: 100%; }
  /* Figma Built (768) 351:1941: each autopilot row (title, card, copy) is 600px wide and centred in the box */
  .mcp-page .ap-row { width: min(600px, 100%); margin-inline: auto; }
  .mcp-page .ap-row .ap-card { width: 100%; }
  /* Figma Built (768) 351:2098: step 1's address and Copy button sit on the card's left, 17px in */
  .mcp-page .step-card.is-center { align-items: flex-start; padding: 14px 17px; }
  /* The exchanges keep 48px each side, so the agent's reply starts where the bubble ends on the right (Figma Built
     (768)); its heading wraps as before. The setup exchange keeps its own column */
  .mcp-page section:not(.setup) > .exchange { width: calc(100% - 96px); margin: 0 auto; }
  .mcp-page section:not(.setup) > .exchange .exchange-agent .display { max-width: calc(100% - 65px); }
}
@media (max-width: 720px) {
  /* Figma Built (375) 351:2638: narrower tiles, closer together, and the marks under their label */
  .mcp-page :is(.apps-grid, .apps-many) { width: 100%; margin-left: 0; }
  .mcp-page .app-tile { gap: 20px; padding: 24px 16px; }
  .mcp-page .app-tile .app-rule { align-self: stretch; width: auto; }
  .mcp-page .apps-many { flex-direction: column; gap: 18px; }
  .mcp-page { --gutter: 16px; --bg-inset: var(--gutter); }
  .mcp-page .hero { padding: 76px 0 64px; }
  .mcp-page .chat-app { min-height: 0; }
  .mcp-page .chat-rail { display: none; }
  /* No rail on phones: the hero thread is the card less 48px, centred */
  .mcp-page .exchange { width: calc(100% - 2 * var(--gutter) - 48px); margin: 0 auto; }
  .mcp-page .chat-convo { --thread-w: calc(100% - 48px); }
  .mcp-page .chat-app { width: calc(100% - 2 * var(--gutter)); }
  .mcp-page .chat-thread { padding: 24px 0 32px; gap: 32px; }
  /* Figma Built (375) 370:4613: the sparkle on the left of the timestamp row (no rail here), the timestamp on the right;
     a 28/36 bubble, 14/24 padding, 24px corners (8px at the tail) */
  .mcp-page .chat-time { display: flex; align-items: center; justify-content: space-between; }
  .mcp-page .chat-time .ts-ic { display: block; width: 20px; height: 20px; }
  .mcp-page .hero-user .page-bubble { width: auto; max-width: 279px; font-size: 28px; line-height: 36px; padding: 14px 24px; border-radius: 24px 24px 8px 24px; }
  .mcp-page .hero-connect { margin: 0 auto; }
  /* Desk/dock slider, Figma Built (375) 368:1703: edge to edge, 375×669, photos cropped to cover */
  .mcp-page .stage-wrap { width: 100%; aspect-ratio: 375 / 669; }
  /* Slide 2's desk window on phones (Figma 473:17338): 328×558, 36px down. No rail, just its star top left; the
     question on the right in a 196px bubble, the reply 266px wide, both at 13px; the composer on two lines (Reply over
     the plus, the tool chip and send) */
  .mcp-page .desk-window { width: 328px; height: 558px; top: calc(35.6px * var(--k)); }
  .mcp-page .desk-window .rail { position: absolute; left: 17.5px; top: 15px; z-index: 1; width: auto; padding: 0; background: none; }
  .mcp-page .desk-window .rail .avatar { display: none; }
  .mcp-page .desk-window .thread { gap: 0; padding: 46px 15px 0 14px; }
  .mcp-page .desk-window .user-turn { align-self: flex-end; width: 196px; }
  .mcp-page .desk-window .chat-bubble { width: 100%; font-size: 13.16px; }
  .mcp-page .desk-window .user-turn .sent { font-size: 12px; }
  .mcp-page .desk-window .agent-msg { width: 266px; }
  .mcp-page .desk-window .agent-msg .body { font-size: 13px; }
  .mcp-page .desk-window .agent-msg .box-row { font-size: 13px; }
  .mcp-page .desk-window .agent-msg > .dot { margin-top: 12.1px; }
  .mcp-page .desk-window .composer-area { padding: 0 16px 15px 14px; }
  .mcp-page .desk-window .composer-sm { width: 100%; height: 90px; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "ph ph ph ph" "plus chip . send"; align-content: space-between; align-items: center; column-gap: 12px; padding: 16px 8px 8px 11px; border-radius: 17px; }
  .mcp-page .desk-window .composer-sm .placeholder { grid-area: ph; }
  .mcp-page .desk-window .composer-sm .plus { grid-area: plus; }
  .mcp-page .desk-window .composer-sm .tool-chip { grid-area: chip; }
  .mcp-page .desk-window .composer-sm .send-sm { grid-area: send; }
  /* Slide 4's phone (Figma 473:17396): 341px wide on screen, 115px down and centred, running off the bottom of the
     photo; everything in it at 70% of the tablet phone (16.3px messages), as it's scaled as a whole */
  .mcp-page .phone { --k: calc(1 / var(--stage-scale, 1)); height: 943px; top: calc(115px * var(--k)); transform-origin: 50% 0; scale: calc(0.6988 * var(--k)); }
  .mcp-page .phone .screen > .body { height: 683px; } /* 477px on screen, so the composer falls just under the photo */
  .mcp-page .examples-bg { width: 100%; }
  /* Slide inputs on phones: exactly the hero's mobile composer on screen (question on top, plus + send below, 24px
     corners, 1px shine), sized by dividing by the artboard's scale, 20px in from the slide's edges, centred */
  .mcp-page .scene-a .composer, .mcp-page .scene-ask .composer {
    --k: calc(1 / var(--stage-scale, 1)); --bw: calc(1px * var(--k));
    left: 0; right: 0; margin: 0 auto; width: calc(var(--stage-vis, 1548) * 1px - 64px * var(--k)); /* 32px in from each side */
    top: 50%; transform: translateY(-50%); height: auto; min-height: calc(230px * var(--k)); /* as tall as the hero's */
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text text" "plus send";
    align-items: center; row-gap: calc(14px * var(--k)); column-gap: calc(12px * var(--k));
    padding: calc(20px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)) calc(20px * var(--k)); border-radius: calc(24px * var(--k));
  }
  .mcp-page .scene-a .composer .typed, .mcp-page .scene-ask .composer .typed { grid-area: text; align-self: start; font-size: calc(36px * var(--k)); line-height: 1.25; letter-spacing: normal; min-height: 0; white-space: normal; }
  .mcp-page .scene-a .composer .caret, .mcp-page .scene-ask .composer .caret { width: calc(1.5px * var(--k)); height: calc(39px * var(--k)); vertical-align: calc(-8px * var(--k)); }
  .mcp-page .scene-a .composer .plus, .mcp-page .scene-ask .composer .plus { grid-area: plus; width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
  .mcp-page .scene-a .composer .send, .mcp-page .scene-ask .composer .send { grid-area: send; width: calc(48px * var(--k)); height: calc(48px * var(--k)); }
  .mcp-page .scene-a .composer .send img, .mcp-page .scene-ask .composer .send img { width: calc(22px * var(--k)); height: calc(22px * var(--k)); }
  /* Closing CTA (Figma 351:2790): 47px down, the headline at 42/50, the buttons 62px under "Powered by", 129px below them */
  .mcp-page .cta { padding: 47px 16px 129px; }
  .mcp-page .cta .display { font-size: 42px; line-height: 50px; max-width: none; } /* Figma Built (375) 343:14773 */
  .mcp-page .cta .actions { margin-top: 38px; }
  /* The hero URL box is only the frame's inner width here, so the URL drops to 13px (6px after the globe, 12px left pad,
     8px minimum before Copy) and the wider "Copied" still clears the URL and the rim */
  .mcp-page .hero-connect .mcp-url { padding-left: 12px; gap: 8px; }
  .mcp-page .hero-connect .mcp-url .url { font-size: 13px; gap: 6px; }
  /* Shorter stacked outlines on phones: 14px each, still flush and 16px above the frame */
  .mcp-page .cf-stack { top: calc(10.5px - 16px - 42px); height: 42px; }
  .mcp-page .cf-tab { height: 14px; }
  .mcp-page .cf-tab:nth-child(2) { bottom: 14px; }
  .mcp-page .cf-tab:nth-child(3) { bottom: 28px; }
  /* Phones: the same composer at phone size — 36px question, 22px plus, 48px send */
  .mcp-page .intro-composer {
    --composer-h: 274px; /* room for four lines of the 36px question: 20 + 4 × 45 + 14 + 48 + 12 */
    row-gap: 14px; column-gap: 12px; padding: 20px 12px 12px 20px;
  }
  .mcp-page .chat-app { transform-origin: 50% 183px; }
  .mcp-page .intro-composer .typed { grid-area: text; align-self: start; font-size: 36px; line-height: 1.25; /* phones: 36px (desktop 39px) */ letter-spacing: normal; white-space: normal; }
  .mcp-page .intro-composer .caret { height: 39px; vertical-align: -8px; }
  .mcp-page .intro-composer .plus { grid-area: plus; width: 22px; height: 22px; }
  .mcp-page .intro-composer .send { grid-area: send; width: 48px; height: 48px; }
  .mcp-page .intro-composer .send img { width: 22px; height: 22px; }
  .mcp-page .page-bubble { font-size: 24px; line-height: 30px; padding: 14px 20px; border-radius: 24px 24px 8px 24px; }
  .mcp-page .display { font-size: 38px; line-height: 42px; }
  .mcp-page .bracket-label { font-size: 17px; line-height: 24px; flex-wrap: wrap; justify-content: center; }
  .mcp-page :is(.examples, .devices) .bracket-copy { font-size: 18px; line-height: 27px; }
  /* Figma 455:15852: the slider's copy centred on 24px lines, 313px wide */
  .mcp-page .devices .bracket-copy { width: min(313px, 100% - 2 * var(--gutter)); line-height: 24px; }
  .mcp-page .ap-box { padding: 40px 20px; }
  .mcp-page .ap-card .chat-bubble { width: auto; max-width: 300px; }
  .mcp-page .setup .bracket-label { line-height: 24px; }
  .mcp-page .setup .bracket-label .note { white-space: normal; }
  .mcp-page .steps { padding: 32px 20px; }
}
/* Simplified Chinese (?lang=zh-CN here, the zh-CN locale on the marketplace page) */
/* Negative tracking crowds Chinese characters, so nothing tracks tighter than normal */
.mcp-page:lang(zh-CN) * { letter-spacing: normal !important; }
/* Boxes sized to fit the English copy size to the Chinese text instead (the hero bubble keeps its width as a cap) */
.mcp-page:lang(zh-CN) .hero-user .page-bubble { width: auto; max-width: var(--hero-bubble-w); }
.mcp-page:lang(zh-CN) .ap-card .agent-msg { width: auto !important; }
/* The Chinese dock photo frames its shipper higher, so its crop starts lower to keep his head in the slide */
.mcp-page:lang(zh-CN) :is(.scene-ask, .scene-c) .photo img.source { top: -10%; }
/* Tablets and phones (Figma 432:2514): the chat is a phone rising out of the top of the photo, the topics a row of
   buttons under it that scrolls sideways off the right edge, and the photo darkens to black at the bottom */
@media (max-width: 1000px) {
  .mcp-page .examples-stage { margin-top: 44px; }
  /* The black fade spans the photo behind the slider, not the white beside it */
  .mcp-page .examples-stage::after { width: min(1548px, 100% - 2 * var(--bg-inset)); margin: 0 auto; background: linear-gradient(to bottom, rgba(0,0,0,0) calc(100% - 339px), #000); }
  .mcp-page .topics { width: min(668px, 100% - 2 * var(--bg-inset)); height: auto; margin: 0 auto; padding: 0 0 34px; flex-direction: column; gap: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mcp-page .examples-stage::before { content: none; }
  .mcp-page .topics > .topics-grid { display: none; }
  .mcp-page .topics-chat > .topics-grid { display: block; }
  .mcp-page .topics-chat { order: -1; flex: none; width: min(488px, 100% - 26px); margin: 0 auto; display: flex; flex-direction: column; padding-top: 13px; border: 8px solid #0d0a1a; border-top: 0; border-radius: 0 0 54px 54px; box-shadow: 0 41px 82px rgba(26,13,51,0.28); }
  /* The conversation is centred in the screen, so a short one uses its space; a reply taller than the screen keeps its
     end in view and the question runs up out of the top, as a chat scrolls (the auto margins give way once there's no
     room) */
  .mcp-page .topics-body { flex: none; height: 535px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; overflow: hidden; }
  .mcp-page .topic-convo { gap: 28px; margin-block: auto; }
  .mcp-page .topic-convo .user-turn { max-width: 73%; }
  .mcp-page .topic-convo .chat-bubble { padding: 16.4px 24.7px; border-radius: 27.4px 27.4px 9.6px 27.4px; font-size: 23.3px; }
  .mcp-page .topic-convo .sent { display: none; }
  .mcp-page .topic-convo .agent-msg { gap: 16.4px; max-width: 359px; }
  /* Figma 432:2553: a 21px star and 14.9px label */
  .mcp-page .topic-convo .agent-tag { gap: 8.5px; font-size: 14.88px; }
  .mcp-page .topic-convo .agent-tag .ic { width: 21.3px; height: 21.3px; }
  .mcp-page .topic-convo .agent-msg .body { margin-top: -8.2px; gap: 8.2px; font-size: 23.3px; letter-spacing: -0.01em; }
  /* Cards in a reply (quotes, invoices) at 75% of the reply's size, so a list doesn't crowd the screen */
  .mcp-page .topic-convo .row { padding: 7.5px 10.5px; border-radius: 7.5px; font-size: 0.75em; white-space: nowrap; }
  /* The handoff card at 75%, like the cards in the other replies, so the question above it stays in view */
  .mcp-page .topic-convo .handoff { width: auto; gap: 1px; padding: 10.5px 12px 12px; border-radius: 13.5px; }
  .mcp-page .topic-convo .handoff-label { font-size: 11.25px; }
  .mcp-page .topic-convo .handoff-title { font-size: 14.25px; }
  .mcp-page .topic-convo .handoff-meta { font-size: 12px; }
  .mcp-page .topic-convo .handoff-btn { gap: 7px; margin-top: 9px; padding: 7.5px 12px; font-size: 12px; }
  .mcp-page .topic-convo .handoff-btn .ic { width: 12px; height: 12px; }
  .mcp-page .topic-convo .dot { width: 22px; height: 22px; border-radius: 2.7px; }
  .mcp-page .topics-composer { display: flex; flex-direction: column; justify-content: space-between; height: 125px; margin: 0 12px 12px; padding: 22px 12px 11px; border: 1.37px solid #d8dadf; border-radius: 35px; background: #fff; box-shadow: 0 2.74px 11px rgba(0,0,0,0.05); }
  .mcp-page .topics-composer .placeholder { padding-left: 1px; font-size: 20.56px; color: #6a7281; }
  .mcp-page .topics-composer .row { display: flex; align-items: center; justify-content: space-between; }
  .mcp-page .topics-composer .tools { display: flex; align-items: center; gap: 16.4px; }
  .mcp-page .topics-composer .plus { width: 25px; height: 25px; }
  .mcp-page .topics-composer .tool-chip { gap: 8px; padding: 6px 10px; border: 0; background: #f1f1f1; font-size: 16px; }
  .mcp-page .topics-composer .tool-chip img { width: 10px; height: 10px; }
  .mcp-page .topics-composer .send-sm { width: 49px; height: 49px; border-radius: 50%; }
  .mcp-page .topics-composer .send-sm img { width: 22px; height: 22px; }
  /* Under the phone: the topics as a row of words (the active one bold and white), then "Any AI agent" and arrows that
     step through them, centred */
  .mcp-page .topics-side { width: min(488px, 100% - 26px); margin: 0 auto; padding: 0 8px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; }
  .mcp-page .topics-agent { order: 3; margin-top: 47px; color: #fff; }
  .mcp-page .topics-agent .agent-stack { display: none; }
  .mcp-page .topics-agent .agent-stack.is-dark { display: flex; }
  .mcp-page .topics-label { order: 1; flex: 0 0 100%; margin: 33px 0 0; padding: 0; color: rgba(255,255,255,0.5); }
  /* scrolls across the whole photo (100cqw, the window's width), starting in line with the label, so every topic can
     move into view from edge to edge */
  .mcp-page .topics { container-type: inline-size; }
  .mcp-page .topics-list { order: 2; position: relative; flex: none; flex-direction: row; gap: 17px; width: 100cqw; margin: 5px calc((100% - 100cqw) / 2) 0; padding: 0 calc((100cqw - 100%) / 2); overflow-x: auto; scrollbar-width: none; }
  .mcp-page .topics-list::-webkit-scrollbar { display: none; }
  .mcp-page .topic { flex: none; padding: 0; border-radius: 0; font-weight: 500; color: rgba(255,255,255,0.8); transition: color 0.2s ease; }
  .mcp-page .topic:hover:not(.is-active) { background: none; color: #fff; }
  .mcp-page .topic.is-active { background: none; font-weight: 600; color: #fff; }
  .mcp-page .topic:focus-visible { outline-color: #fff; }
  .mcp-page .topics-steps { order: 4; display: flex; gap: 24px; margin-top: 47px; }
  .mcp-page .topics-step { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid #ccc; background: #fff; color: #000; box-shadow: 4px 4px 0 rgba(255,255,255,0.27); cursor: pointer; transition: background-color 0.2s ease; }
  .mcp-page .topics-step:hover { background: #f2f2f2; }
  .mcp-page .topics-step:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .mcp-page .topics-step .ic { width: 16px; height: 16px; }
  .mcp-page .stage-nav.topics-nav { margin-top: 28px; }
}
/* Phones (Figma 432:2611): a smaller phone, its chat at the 375 frame's sizes */
@media (max-width: 720px) {
  .mcp-page .examples-stage::after { width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) calc(100% - 205px), #000); }
  .mcp-page .topics { padding-bottom: 20px; }
  .mcp-page .topics-chat { width: min(317px, 100% - 26px); padding-top: 0; }
  .mcp-page .topics-body { height: 384px; }
  .mcp-page .topic-convo { gap: 20px; }
  .mcp-page .topic-convo .user-turn { max-width: 84%; }
  .mcp-page .topic-convo .chat-bubble { font-size: 16px; }
  .mcp-page .topic-convo .agent-msg { gap: 12px; max-width: none; }
  .mcp-page .topic-convo .agent-tag { gap: 6.5px; font-size: 11.44px; }
  .mcp-page .topic-convo .agent-tag .ic { width: 16.3px; height: 16.3px; }
  .mcp-page .topic-convo .agent-msg .body { margin-top: -6px; gap: 6px; font-size: 17px; }
  /* each card on one line in the narrow screen */
  .mcp-page .topic-convo .row { padding: 6px 8px; border-radius: 6px; font-size: 12px; }
  .mcp-page .topic-convo .handoff { gap: 1px; padding: 7.5px 9px 9px; border-radius: 10.5px; }
  /* the reply already says "your dashboard", so the card drops its label to leave the question in view */
  .mcp-page .topic-convo .handoff-label { display: none; }
  .mcp-page .topic-convo .handoff-title { font-size: 12px; }
  .mcp-page .topic-convo .handoff-meta { font-size: 9.75px; }
  .mcp-page .topic-convo .handoff-btn { gap: 5px; margin-top: 6px; padding: 5px 9px; font-size: 9.75px; }
  .mcp-page .topic-convo .handoff-btn .ic { width: 10px; height: 10px; }
  .mcp-page .topic-convo .dot { width: 16px; height: 16px; border-radius: 2px; }
  .mcp-page .topics-composer { height: 87px; padding: 15.6px 10px 10px; border-width: 0.97px; border-radius: 24.8px; }
  .mcp-page .topics-composer .placeholder { font-size: 14.56px; }
  .mcp-page .topics-composer .tools { gap: 11.6px; }
  .mcp-page .topics-composer .plus { width: 17px; height: 17px; }
  .mcp-page .topics-composer .tool-chip { gap: 5.7px; padding: 4.2px 7.1px; font-size: 11.33px; }
  .mcp-page .topics-composer .tool-chip img { width: 7px; height: 7px; }
  .mcp-page .topics-composer .send-sm { width: 35px; height: 35px; }
  .mcp-page .topics-composer .send-sm img { width: 16px; height: 16px; }
  /* Figma 432:2611: the words at 16px, 9px under the phone and 33px in from the photo's edge; the agent and arrows
     64px below, centred on the photo */
  .mcp-page .topics-side { width: 100%; padding: 0; }
  .mcp-page .topics-label { padding-left: 33px; }
  /* the photo runs the full width of the screen here, so the row does too */
  .mcp-page .topics-list { width: 100vw; margin-inline: calc((100% - 100vw) / 2); padding-inline: calc((100vw - 100%) / 2 + 33px); }
  .mcp-page .topics-label { margin-top: 9px; }
  .mcp-page .topic { font-size: 16px; line-height: 20px; }
  .mcp-page :is(.topics-agent, .topics-steps) { margin-top: 64px; }
}
/* ── Endless loops hold while nobody can see them: any one of them makes the browser draw a frame on every vsync.
   mcp-page.js marks a loop's element is-offscreen while it's off screen. !important, because several loops set the
   animation shorthand, which resets the play state and can outrank a plain pause ── */
.mcp-page .is-offscreen, .mcp-page .is-offscreen::before, .mcp-page .is-offscreen::after { animation-play-state: paused !important; }
/* …and these are on screen but can't be seen: the intro's input once it has faded out, the slides not on show
   (visibility: hidden doesn't stop an animation), and the dots' beam while their slideshow is paused or off screen */
.mcp-page .hero[data-intro="done"] .intro-composer::before, .mcp-page .hero[data-intro="done"] .intro-composer .caret { animation-play-state: paused; }
.mcp-page .scene:not(.is-active, .is-prev) .composer::before, .mcp-page .scene:not(.is-active, .is-prev) .composer .caret, .mcp-page .scene:not(.is-active, .is-prev) .agent-tag { animation-play-state: paused !important; }
.mcp-page .stage-nav:is(.is-paused, .is-idle) .stage-dots::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mcp-page *, .mcp-page *::before, .mcp-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* The dot fill is the slideshow's timer, so it keeps its real duration */
  .mcp-page .stage-dot.is-active .fill { animation-duration: var(--slide-dur, 6s) !important; }
  .mcp-page .scene .photo { animation: none !important; }
  /* Turned on while the page is open, the cursor grids stop where they are, so they go */
  .mcp-page .cursor-grid { display: none; }
}