/* ============================================================================
   /mcp — Figma 2N553Cls5WgWmoHrH1EVVv, section 3248:24061.
   Desktop 3248:24062 (1512x8305), mobile 3248:83310 (393x9756).
   Needs atlas-tokens.css. Chrome (bar, navbar, footer, mobile menu) is the
   shared set and is NOT styled here.

   Built 28 Aug 2026, replacing the hand-built staging page that carried its
   styles inline, ran on the legacy .nav-glass navbar and shipped titled
   "STAGING: STAGING. Mcp".
   ========================================================================= */

.mpx-hero, .mpx-steps, .mpx-desks, .mpx-cards,
.mpx-prompts, .mpx-connector, .mpx-faq, .mpx-close {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}
/* [hidden] is only display:none at UA strength; our own display rules beat
   it, and the tab panels are hidden by that attribute. */
.mpx-steps [hidden] { display: none !important; }

/* shared ---------------------------------------------------------------- */
.mpx-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; margin: 0 auto; padding: 6px 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: rgba(255,255,255,.72);
}
.mpx-eyebrow--dark { color: rgba(13,13,13,.72); }
.mpx-eyebrow__dot {
  width: 16px; height: 16px; flex: none; border-radius: 5px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.mpx-eyebrow--dark .mpx-eyebrow__dot {
  background: rgba(13,13,13,.10); box-shadow: inset 0 0 0 1px rgba(13,13,13,.14);
}

.mpx-fade {
  background: linear-gradient(120.95deg, #FFFFFF 63%, rgba(255,255,255,.35) 93.18%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard: background-clip:text gives a descender no paint and slices it
     flat, so push the paint box down and take the space back */
  padding-bottom: .2em; margin-bottom: -.2em;
}
.mpx-fade--dark {
  background: linear-gradient(120.95deg, #0D0D0D 63%, #CECECE 93.18%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mpx-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; box-sizing: border-box;
  border-radius: 100px;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.mpx-btn--lime {
  background: var(--af-lime);
  /* explicit: a lime label on a lime pill is invisible, not subtle */
  color: var(--af-lime-ink, #001D21);
  box-shadow: 2px 14px 24px rgba(38,63,66,.12);
}
.mpx-btn--ghost {
  background: rgba(255,255,255,.10); color: #FFFFFF;
  font-weight: var(--w-medium);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.mpx-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .mpx-btn--lime:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .mpx-btn--ghost:hover { background: rgba(255,255,255,.16); }
}
.mpx-chev {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
          mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
  transition: transform var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .mpx-btn:hover .mpx-chev { transform: translateX(3px); } }

/* the copy button, shared by the step URLs and the prompt cards ---------- */
.mpx-copy__btn {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--af-lime);
  transition: transform var(--t-instant) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.mpx-copy__ico {
  width: 18px; height: 18px;
  background: var(--af-lime-ink, #001D21);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V5a2 2 0 0 1 2-2h10'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M5 15V5a2 2 0 0 1 2-2h10'/></svg>") center / contain no-repeat;
}
.mpx-copy__btn.is-copied { background: #7CB1AC; }
.mpx-copy__btn.is-copied .mpx-copy__ico {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}
.mpx-copy__btn.is-failed { background: #E5C07B; }
.mpx-copy__btn:active { transform: scale(.94); }

/* --- BAND 1, hero — 3248:24069 ---------------------------------------- */
.mpx-hero { background: #FFFFFF; }
.mpx-hero__bg {
  position: absolute; inset: 0 0 30px 0; z-index: -3;
  background: url("/assets/mcp/mcp-hero.webp") center / cover no-repeat;
}
.mpx-hero__glow {
  position: absolute; left: -600px; top: 12px; width: 1693px; height: 956px;
  z-index: -2; border-radius: 50%; background: #051F1D; filter: blur(150px);
  opacity: .55; pointer-events: none;
}
.mpx-hero__wash {
  position: absolute; inset: 0; z-index: -1;
  /* 89.8deg is left-to-right: opaque behind the copy, clear over the globe */
  background: linear-gradient(89.8deg, rgba(5,31,29,.90) 0%, rgba(5,31,29,.62) 38%, rgba(5,31,29,.06) 76%, rgba(5,31,29,0) 100%);
}
.mpx-hero__inner { padding: 10px 10px 0; }
.mpx-hero__page {
  max-width: 1432px; margin: 0 auto; padding: 120px 30px 0; min-height: 750px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mpx-hero__col { display: flex; flex-direction: column; gap: 32px; max-width: 1200px; }
.mpx-hero__eyebrow {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #FFFFFF;
}
.mpx-hero__h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 110px; letter-spacing: -3.3px; color: #FFFFFF;
}
.mpx-hero__h1 span { display: block; }
.mpx-hero__lede {
  margin: 0; max-width: 560px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: rgba(255,255,255,.78);
}
.mpx-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mpx-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin: 0 0 40px; padding: 0; list-style: none;
}
.mpx-hero__stats li {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22);
}
.mpx-stat__k { font-family: var(--font-alt); font-weight: var(--w-regular); font-size: 14px; color: rgba(255,255,255,.72); }
.mpx-stat__v { font-family: var(--font-alt); font-weight: var(--w-semi); font-size: 32px; line-height: 1.2; letter-spacing: -.96px; color: #FFFFFF; }

/* --- BAND 2, the tabbed steps — 3248:44532 ---------------------------- */
.mpx-steps {
  background: linear-gradient(180deg, #FFFFFF 52.74%, #EBEDF2 92.52%);
  padding: 120px 40px;
}
.mpx-steps__container { max-width: 1432px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.mpx-steps__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mpx-steps__h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #0D0D0D;
}
.mpx-steps__h2 span { display: block; }

.mpx-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 6px; border-radius: 999px;
  background: rgba(13,13,13,.05);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.06);
}
.mpx-tab {
  padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 18px; letter-spacing: -.36px; color: rgba(13,13,13,.5);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mpx-tab[aria-selected="true"] { background: var(--af-lime); color: var(--af-lime-ink, #001D21); }
@media (hover: hover) { .mpx-tab:not([aria-selected="true"]):hover { color: #0D0D0D; } }
.mpx-tab:focus-visible { outline: 2px solid var(--af-lime-ink, #001D21); outline-offset: 2px; }

.mpx-steps__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.mpx-step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 32px;
  background: linear-gradient(0deg, #FFFFFF 30%, rgba(143,188,185,.32) 100%), #FFFFFF;
}
.mpx-step__n {
  align-self: flex-start; padding: 8px 12px; border-radius: 57px;
  background: rgba(5,63,59,.10);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px; color: #053F3B;
}
.mpx-step__t {
  margin: 12px 0 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.68px; letter-spacing: -.72px; color: #0D0D0D;
}
.mpx-step__d {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px; color: #3F4547;
}
.mpx-copy {
  display: flex; align-items: center; gap: 12px; margin: auto 0 0;
  padding: 8px 8px 8px 16px; border-radius: 16px;
  background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(13,13,13,.07);
}
.mpx-copy code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; color: #3F4547; scrollbar-width: none;
}
.mpx-copy code::-webkit-scrollbar { display: none; }

/* --- BAND 3, the desks image — 3248:157273 ---------------------------- */
.mpx-desks {
  background: linear-gradient(180deg, #0F0F0F 0%, #0D0D0D 100%);
  padding: 120px 40px; min-height: 800px;
}
.mpx-desks__bg {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/mcp/mcp-desks.webp") center / cover no-repeat;
  /* The file fades the photo out at both ends into the band colour. The
     bottom stop is early on purpose: the source image has a second hero
     baked into its lower edge (cropped off at export, but the last of it
     still ghosts), and the fade finishes it off. */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 94%);
          mask: linear-gradient(180deg, transparent 0, #000 22%, #000 68%, transparent 94%);
}
.mpx-desks__content {
  max-width: 1432px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.mpx-desks__h2 {
  margin: 16px 0 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #FFFFFF;
}
.mpx-desks__h2 span { display: block; }
.mpx-desks .mpx-eyebrow { margin: 0; }
.mpx-desks__lede {
  margin: 0; max-width: 440px; text-align: right;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: rgba(255,255,255,.66);
}

/* --- BAND 4, three feature cards — 3248:157302 ------------------------ */
.mpx-cards { background: linear-gradient(180deg, #0F0F0F 0%, #0D0D0D 100%); padding: 0 40px 120px; }
.mpx-cards__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1432px; margin: 0 auto; padding: 0; list-style: none;
}
.mpx-card {
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 460px; padding: 24px; border-radius: 32px;
  /* 3248:204152 fill, read from the node: #1F1F1F -> #151515, not a flat grey */
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}
.mpx-card--swirl { background: linear-gradient(180deg, #13524E 0%, #0E3B38 100%); }
.mpx-card--chat  { background: linear-gradient(180deg, #12403C 0%, #0D2725 100%); }
.mpx-card__art { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.mpx-card--swirl .mpx-card__art {
  background: url("/assets/mcp/mcp-card-swirl.webp") center / cover no-repeat;
  border-radius: 20px; align-items: flex-end; padding: 20px;
}
.mpx-card--chat .mpx-card__art { flex-direction: column; justify-content: center; gap: 12px; }
.mpx-card__text h3 {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 32px; line-height: 1.15; letter-spacing: -.96px; color: #FFFFFF;
}
.mpx-card__text p {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 16px; line-height: 22px; color: rgba(255,255,255,.62);
}
.mpx-card__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 20px; letter-spacing: -.4px; color: rgba(255,255,255,.86);
}
.mpx-card__chip b { color: #FFFFFF; font-weight: var(--w-semi); }
.mpx-card__chip i { width: 8px; height: 8px; border-radius: 50%; background: #A9E86A; box-shadow: 0 0 0 4px rgba(169,232,106,.20); }
/* Client logo tiles — 3248:219630. The four marks are exported SVG in the
   fragment; only the plate is CSS.

   DO NOT build this plate from the node JSON. The wrapper's fills read as
   "white 10% + a 20% grey gradient", which over this dark card computes to a
   barely-there smudge. The frame also carries a GLASS effect, and the FILE
   RENDERS the plate at #363636 -> #2D2E2F. Those are measured off the render
   of 3248:204152 (which includes the card fill behind it) and they are what
   ships. Same trap as the nav "Only $5 To Start" badge. */
.mpx-logos {
  display: grid; grid-template-columns: repeat(2, 104px); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.mpx-logos__tile {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: linear-gradient(180deg, #363636 0%, #2D2E2F 100%);
  /* the lit rim is the frame's LINEAR_DODGE inner shadow; the drop shadow is
     7.2/19.2/15.12 rgba(0,0,0,.08) straight off the node */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.055),
              7.2px 19.2px 15.12px rgba(0,0,0,.08);
  color: #FFFFFF;
}
.mpx-logos__mark { width: 64px; height: 64px; flex: none; display: block; }

/* the dot field across the top of the card (3248:216569) — 1-2 levels of
   contrast in the reference, so it is a CSS pattern, not a 1687px export.
   Declared deviation, see MCP-SPEC.md. */
.mpx-card--logos::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 300px;
  background-image: radial-gradient(rgba(255,255,255,.05) 1.1px, transparent 1.1px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  pointer-events: none;
}
.mpx-card--logos .mpx-card__art { position: relative; }

.mpx-bubble {
  margin: 0; padding: 14px 18px; border-radius: 18px; max-width: 92%;
  font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: 20px; line-height: 26px; letter-spacing: -.4px;
}
.mpx-bubble--ask { align-self: flex-end; background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); }
.mpx-bubble--ans { align-self: flex-start; background: rgba(124,177,172,.16); color: rgba(255,255,255,.88); position: relative; padding-left: 40px; }
.mpx-bubble--ans b { color: #FFFFFF; font-weight: var(--w-semi); }
.mpx-bubble--ans i { position: absolute; left: 16px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: #A9E86A; }

/* --- BAND 5, the prompts — 3248:294923 -------------------------------- */
.mpx-prompts { background: #0D0D0D; padding: 120px 40px; text-align: center; }
.mpx-prompts__bg {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124,177,172,.10), transparent 70%);
}
.mpx-prompts__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 40px; }
.mpx-prompts__h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #FFFFFF;
}
.mpx-prompts__lede { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.62); }
.mpx-prompts__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 1432px; margin: 0 auto; padding: 0; list-style: none; text-align: left;
}
.mpx-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 16px 16px 24px; border-radius: 20px;
  background: #171717; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.mpx-prompt p {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 20px; line-height: 1.3; letter-spacing: -.4px; color: #FFFFFF;
}

/* --- BAND 6, the connector — 3248:254003 ------------------------------ */
.mpx-connector {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  padding: 120px 40px; text-align: center;
}
.mpx-connector__bg {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/mcp/mcp-waves.webp") center 40% / cover no-repeat;
  opacity: .85;
  /* In the file the wave band lives around the heading and lede and has gone
     to flat white by the list. Ours ran at full strength the whole way down,
     which is what put a teal streak through every 2px row gap. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.12) 62%, transparent 74%);
          mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.12) 62%, transparent 74%);
}
.mpx-connector__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 40px; }
.mpx-connector__h2 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #0D0D0D;
}
.mpx-connector__h2 span { display: block; }
.mpx-connector__lede { margin: 0 auto; max-width: 620px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(13,13,13,.62); }

.mpx-caps { position: relative; z-index: 0; width: 100%; max-width: 800px; margin: 0 auto 40px; text-align: left; }

/* In the Figma the wave art has faded to flat white by the time the list
   starts - sampled 254-255 in the 2px row gaps. Without this veil our
   background asset is still saturated here and every gap reads as a teal
   streak across the list. */
.mpx-caps::before {
  content: ''; position: absolute; inset: -140px -50vw; z-index: -1;
  background: radial-gradient(60% 62% at 50% 52%, #FFFFFF 42%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
/* belt and braces: the 2px gaps are white in the reference, so back them */
.mpx-caps__list { background: #FFFFFF; border-radius: 16px; }

/* 3248:254005 / 3248:254006, positioned off the 800px list as in the file:
   right coin x=+713 y=+74, left coin x=-134 y=+677 from the list's top-left. */
.mpx-caps__coin { position: absolute; z-index: -1; pointer-events: none; user-select: none; }
.mpx-caps__coin--r { left: 713px; top: 74px; width: 215px; height: 208px; }
.mpx-caps__coin--l { left: -134px; top: 677px; width: 216px; height: 228px; }
/* below the desktop grid they collide with the rows */
@media (max-width: 1180px) { .mpx-caps__coin { display: none; } }

/* the header pill — 3248:274354. Its own rounded pill, NOT welded to the list:
   the rows below are separate 16px cards sitting 2px apart. */
.mpx-caps__head {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 2px; height: 56px; padding: 4px 16px; box-sizing: border-box;
  border-radius: 16px;
  background: rgba(118,151,148,.10);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: #3F4547;
}
/* GLASS on the node. The blur has to live on a pseudo-element — putting
   backdrop-filter on .mpx-caps__head makes it a backdrop root and the frost
   then samples nothing. Same fix as the navbar. */
.mpx-caps__head::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  pointer-events: none;
}
/* 1px INSIDE gradient stroke, transparent -> white at 20%. border-color cannot
   take a gradient, so mask-composite it. */
.mpx-caps__head::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(153,153,153,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.mpx-caps__eye {
  width: 20px; height: 20px; flex: none;
  background: url("/assets/mcp/cap-eye.svg") center / contain no-repeat;
}

.mpx-caps__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

/* rows zebra #FBFBFB / #FFFFFF by position; an OPEN row is always #FBFBFB so
   the white chip bar inside it still reads as a separate surface even when the
   row's turn in the zebra would have been white. */
.mpx-cap { border-radius: 16px; background: #FFFFFF; }
.mpx-cap:nth-child(odd) { background: #FBFBFB; }
.mpx-cap[data-open="true"] { background: #FBFBFB; }

.mpx-cap__q {
  width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: 200px 1fr 52px; align-items: center; gap: 24px;
  padding: 8px; border: 0; background: none; cursor: pointer; text-align: left;
  border-radius: 16px;
}
.mpx-cap__q:focus-visible { outline: 2px solid #7CB1AC; outline-offset: -2px; }
.mpx-cap__t {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: #3F4547;
}
/* the description is #3F4547 at NODE opacity .6 in Figma, not a lighter fill */
.mpx-cap__d {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px; color: rgba(63,69,71,.6);
}
.mpx-cap__pm {
  width: 52px; height: 52px; justify-self: end; border-radius: 12px;
  background: #F0F5F5 url("/assets/mcp/cap-plus.svg") center / 20px 20px no-repeat;
  transition: background-color var(--t-fast) var(--e-out);
}
.mpx-cap[data-open="true"] .mpx-cap__pm { background-image: url("/assets/mcp/cap-minus.svg"); }
@media (hover: hover) and (pointer: fine) { .mpx-cap__q:hover .mpx-cap__pm { background-color: #E4EDED; } }

/* grid-template-rows 0fr -> 1fr animates; height:auto does not. No [hidden]
   here on purpose — an author display rule beats it and the panel would show. */
.mpx-cap__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--e-out);
}
.mpx-cap[data-open="true"] .mpx-cap__wrap { grid-template-rows: 1fr; }
/* The clipping element must have NO padding of its own. .mpx-cap__chips carries
   16px padding, and a border-box can never be shorter than its own padding, so
   using the bar as the direct grid item floors the collapsed track at 32px and
   every closed row renders 40px too tall. This bare div is the clipper. */
.mpx-cap__inner { overflow: hidden; min-height: 0; }

.mpx-cap__chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 8px 8px; padding: 16px 12px; box-sizing: border-box;
  border-radius: 16px; background: #FFFFFF; list-style: none;
}
.mpx-cap__chips li {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; color: rgba(63,69,71,.6);
}
/* 3248:339183 — exported. The check is knocked OUT of the #7CB1AC disc, so it
   reads as the white bar behind it. Do not redraw this as a plain circle. */
.mpx-cap__chips li::before {
  content: ''; width: 16px; height: 16px; flex: none;
  background: url("/assets/mcp/cap-tick.svg") center / contain no-repeat;
}

/* --- BAND 7, FAQ — 3248:62904 ---------------------------------------- */
.mpx-faq { background: linear-gradient(180deg, #FFFFFF 0%, #EFF1F4 100%); padding: 120px 40px; }
.mpx-faq__dots { position: absolute; inset: 0; z-index: -2; opacity: .5; pointer-events: none;
  background: url("/assets/comp/comp-bg-dots.webp") center / cover no-repeat; }
.mpx-faq__puzzle { position: absolute; z-index: -1; width: 350px; height: 350px; pointer-events: none;
  background: url("/assets/mcp/mcp-puzzle.webp") center / contain no-repeat; }
.mpx-faq__puzzle--l { left: -80px; top: 50%; }
.mpx-faq__puzzle--r { right: -70px; top: 44%; transform: rotate(18deg); }
.mpx-faq__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
.mpx-faq__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #0D0D0D; }
.mpx-faq__h2 span { display: block; }
.mpx-faq__list { width: 100%; max-width: 720px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mpx-faq__row { border-radius: 20px; background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px rgba(13,13,13,.06), 0 8px 24px rgba(38,63,66,.05); overflow: hidden; }
.mpx-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 20px; line-height: 1.3; letter-spacing: -.4px; color: #0D0D0D;
}
.mpx-faq__pm { position: relative; width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(124,177,172,.16); }
.mpx-faq__pm::before, .mpx-faq__pm::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: #0D0D0D;
  transform: translate(-50%, -50%); transition: opacity var(--t-fast) var(--e-out);
}
.mpx-faq__pm::before { width: 14px; height: 1.6px; }
.mpx-faq__pm::after  { width: 1.6px; height: 14px; }
.mpx-faq__row[data-open="true"] .mpx-faq__pm::after { opacity: 0; }
/* grid-template-rows animates; height:auto does not */
.mpx-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--e-out); }
.mpx-faq__a > p { overflow: hidden; margin: 0; padding: 0 24px; }
.mpx-faq__row[data-open="true"] .mpx-faq__a { grid-template-rows: 1fr; }
.mpx-faq__row[data-open="true"] .mpx-faq__a > p { padding-bottom: 24px; }
.mpx-faq__a p { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(13,13,13,.66); }

/* --- BAND 8, the closer — 3248:83251 --------------------------------- */
.mpx-close {
  background: linear-gradient(180deg, #303030 0%, #0D0D0D 55%, #051F1D 100%);
  padding: 140px 40px 0;
  /* CLIP: __bg and __glow are taller than the section and would spill over
     the footer, washing its link columns out. Same trap as the competitions
     closer. */
  overflow: clip;
}
.mpx-close__bg { position: absolute; inset: 0 0 auto 0; height: 1080px; z-index: -2; opacity: .5; pointer-events: none;
  background: url("/assets/mcp/mcp-closer.webp") center top / cover no-repeat; }
.mpx-close__glow { position: absolute; left: 50%; top: 120px; width: 1693px; height: 956px; margin-left: -846px;
  z-index: -1; border-radius: 50%; background: #051F1D; filter: blur(190px); opacity: .8; pointer-events: none; }
.mpx-close__container { max-width: 1488px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 48px; padding-bottom: 140px; }
.mpx-close__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mpx-close__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #FFFFFF; }
.mpx-close__h2 span { display: block; }
.mpx-close__lede { margin: 0; max-width: 560px; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.66); }
.mpx-close__proof { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.mpx-close__proof li { font-family: var(--font-display); font-weight: var(--w-medium); font-size: 14px; color: rgba(255,255,255,.6); }
.mpx-close__proof li + li::before { content: '· '; color: rgba(255,255,255,.3); }

/* ============================================================================
   Below the 1512 design width.
   ========================================================================= */
@media (max-width: 1200px) {
  .mpx-hero__h1 { font-size: 84px; line-height: 84px; letter-spacing: -2.5px; }
  .mpx-prompts__h2, .mpx-connector__h2, .mpx-close__h2 { font-size: 64px; line-height: 64px; letter-spacing: -1.92px; }
  .mpx-steps__h2, .mpx-desks__h2, .mpx-faq__h2 { font-size: 52px; line-height: 54px; }
  .mpx-cap__q { grid-template-columns: 180px 1fr 44px; }
}
@media (max-width: 900px) {
  .mpx-hero__inner { padding: 8px 8px 0; }
  .mpx-hero__page { padding: 72px 16px 0; min-height: 0; gap: 56px; }
  .mpx-hero__h1 { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .mpx-hero__lede { font-size: 16px; line-height: 24px; }
  .mpx-hero__stats { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .mpx-steps, .mpx-prompts, .mpx-connector, .mpx-faq { padding: 72px 24px; }
  .mpx-desks { padding: 72px 24px; min-height: 0; }
  .mpx-cards { padding: 0 24px 72px; }
  .mpx-close { padding: 96px 24px 0; }
  .mpx-steps__h2, .mpx-desks__h2, .mpx-faq__h2,
  .mpx-prompts__h2, .mpx-connector__h2, .mpx-close__h2 { font-size: 38px; line-height: 40px; letter-spacing: -1.14px; }
  .mpx-desks__content { flex-direction: column; }
  .mpx-desks__lede { text-align: left; max-width: none; }
  .mpx-steps__list, .mpx-cards__row, .mpx-prompts__grid { grid-template-columns: 1fr; }
  .mpx-tabs { width: 100%; }
  .mpx-tab { flex: 1 1 auto; font-size: 16px; padding: 10px 14px; }
  .mpx-card { min-height: 0; }
  .mpx-card__text h3 { font-size: 24px; }
  .mpx-prompt p { font-size: 17px; }
  /* the toggle is 52px now (Figma 3248:339067), not 44 */
  .mpx-cap__q { grid-template-columns: 1fr 52px; row-gap: 4px; gap: 12px; }
  /* place ALL THREE cells. Placing only the toggle let auto-placement drop it
     into column 1 and shove the title into the 52px column, where it wrapped
     to three lines and was clipped. */
  .mpx-cap__t  { grid-column: 1; grid-row: 1; }
  .mpx-cap__d  { grid-column: 1; grid-row: 2; }
  .mpx-cap__pm { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .mpx-cap__chips { gap: 10px 14px; padding: 14px 12px; }
  .mpx-faq__q { font-size: 17px; padding: 18px; }
  .mpx-faq__puzzle { display: none; }
  .mpx-btn { width: 100%; }
  .mpx-hero__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mpx-btn, .mpx-chev, .mpx-faq__a, .mpx-copy__btn, .mpx-tab { transition: none; }
}

/* ---------------------------------------------------------------------------
   STEP / CARD GRIDS: STOP min-content FROM SETTING THE TRACK, 18 Sep 2026.

   `grid-template-columns: 1fr` is `minmax(auto, 1fr)`, and that `auto` minimum
   is the item's min-content width. Each step contains
   `<code>https://mcp.atlasfunded.com/api/mcp</code>`, whose min-content is
   371px, so the single mobile column resolved to 419.016px inside a 345px
   container and `overflow: clip` cut the step off — identically at 360, 393,
   414 and 430. The Gemini tab is worse: `gemini mcp add --transport http atlas
   https://mcp.atlasfunded.com/api/mcp` has a min-content width of 691px.

   `minmax(0, 1fr)` lets the track be narrower than its content, and the
   `overflow-wrap` below makes the snippet break instead of demanding the room.
   ------------------------------------------------------------------------ */
.mpx-steps__list,
.mpx-cards__row,
.mpx-prompts__grid,
.mpx-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpx-prompts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpx-steps__list > *,
.mpx-cards__row > *,
.mpx-prompts__grid > *,
.mpx-hero__stats > * { min-width: 0; }

.mpx-copy { min-width: 0; }
.mpx-copy code { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

@media (max-width: 900px) {
  .mpx-steps__list,
  .mpx-cards__row,
  .mpx-hero__stats { grid-template-columns: minmax(0, 1fr); }
  .mpx-prompts__grid { grid-template-columns: minmax(0, 1fr); }
}