/* ─────────────────────────────────────────────────────────────
   Grove MCP — page-specific styles
   Loaded after /capabilities/capability.css so it can reuse the
   design tokens (--grove-*, --t-*, --sp-*) and component classes
   (.g-nav, .g-btn, .cap-hero, etc.).
   ───────────────────────────────────────────────────────────── */

/* ─────────── Hero variant — developer / dark canopy ─────────── */
.mcp-hero {
  position: relative;
  background: var(--grove-9);
  color: #fff;
  padding: 96px 28px 80px;
  overflow: hidden;
}
.mcp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(174,203,172,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 10%, rgba(46,105,91,0.35) 0%, transparent 50%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 36px);
  pointer-events: none;
}
.mcp-hero__inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
}
.mcp-hero__crumbs {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--t-mono); font-size: 11px; color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.mcp-hero__crumbs a { color: rgba(255,255,255,0.75); }
.mcp-hero__crumbs a:hover { color: var(--grove-2); }
.mcp-hero__crumbs i { font-size: 10px; color: rgba(255,255,255,0.4); }
.mcp-hero__crumbs .current { color: #fff; }

.mcp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font: 500 12px/1 var(--ff-mono);
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.mcp-pill__badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--grove-2);
  color: var(--grove-9);
  font: 700 9px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.mcp-pill__text { display: inline-flex; align-items: center; gap: 6px; }
.mcp-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grove-2);
  box-shadow: 0 0 0 0 rgba(174,203,172,0.7);
  animation: mcpDotPulse 2.4s infinite;
}
@keyframes mcpDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(174,203,172,0.55); }
  70% { box-shadow: 0 0 0 9px rgba(174,203,172,0); }
  100% { box-shadow: 0 0 0 0 rgba(174,203,172,0); }
}

.mcp-hero__title {
  font: var(--t-display-2);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  color: #fff;
}
.mcp-hero__title em {
  font-style: italic;
  color: var(--grove-2);
}
.mcp-hero__sub {
  font: var(--t-body-lg);
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  max-width: 540px;
  margin: 0 0 32px;
  line-height: 1.55;
}
.mcp-hero__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.mcp-hero__ctas .g-btn--primary { background: #fff; color: var(--grove-9); }
.mcp-hero__ctas .g-btn--primary:hover { background: var(--grove-2); }
.mcp-hero__ctas .g-btn--ghost {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.mcp-hero__ctas .g-btn--ghost:hover { background: rgba(255,255,255,0.06); }

/* ─────────── Hero terminal/chat panel ─────────── */
.mcp-hero__panel {
  position: relative;
  background: #0a1a16;
  border: 1px solid rgba(174,203,172,0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 12px 24px -8px rgba(0,0,0,0.4);
  font: 400 13px/1.45 var(--ff-mono);
  color: rgba(255,255,255,0.82);
}
.mcp-hero__panel-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.mcp-hero__panel-chrome .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.mcp-hero__panel-chrome .dot:nth-child(1) { background: #FCA5A5; }
.mcp-hero__panel-chrome .dot:nth-child(2) { background: #FCD34D; }
.mcp-hero__panel-chrome .dot:nth-child(3) { background: #86EFAC; }
.mcp-hero__panel-chrome-label {
  margin-left: 12px;
  font: 500 11px/1 var(--ff-mono);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.mcp-hero__panel-chrome-tag {
  margin-left: auto;
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grove-2);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(174,203,172,0.08);
}

.mcp-term {
  padding: 18px 18px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
  /* Locked to the worst-case content size (3 expanded tools at peak)
     so the surrounding hero doesn't reflow as tools fade between
     expanded and collapsed states. When tools collapse and the reply
     lands, the reply flex-grows to fill the remaining space so the
     panel doesn't look hollow. */
  min-height: 600px;
}
.mcp-term__row {
  display: flex; gap: 10px; align-items: flex-start;
}
/* The first prompt row is always visible — the cycle should never start
   on an empty terminal. Tool calls and the reply animate in on top. */
.mcp-term__row-prompt { opacity: 1; }
.mcp-term__caret {
  flex-shrink: 0;
  color: var(--grove-2);
  font: 600 13px/1.45 var(--ff-mono);
}
.mcp-term__user {
  color: rgba(255,255,255,0.95);
  flex: 1;
}
.mcp-term__user .cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--grove-2);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: mcpBlink 1s steps(2) infinite;
}
@keyframes mcpBlink { 50% { opacity: 0; } }

.mcp-term__tool {
  background: rgba(174,203,172,0.06);
  border: 1px solid rgba(174,203,172,0.18);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    padding 240ms ease,
    gap 240ms ease;
}
.mcp-term__tool-head {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--grove-2);
}
.mcp-term__tool-head .ph,
.mcp-term__tool-head .spin {
  font-size: 12px;
}
.mcp-term__tool-name {
  color: #fff;
  font: 600 12px/1.3 var(--ff-mono);
  letter-spacing: -0.005em;
  text-transform: none;
}
.mcp-term__tool-args {
  color: rgba(255,255,255,0.55);
  font: 400 11.5px/1.45 var(--ff-mono);
  padding-left: 10px;
  border-left: 1px solid rgba(174,203,172,0.18);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 240ms ease,
    opacity 200ms ease;
}
.mcp-term__tool-args .k { color: var(--grove-2); }
.mcp-term__tool-args .s { color: #FCD34D; }
.mcp-term__tool-args .n { color: #86EFAC; }
.mcp-term__tool-result {
  color: rgba(255,255,255,0.78);
  font: 400 12px/1.5 var(--ff-mono);
  padding-top: 0;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 0 dashed rgba(174,203,172,0);
  transition:
    max-height 240ms ease,
    opacity 200ms ease,
    padding-top 200ms ease,
    margin-top 200ms ease,
    border-top-width 200ms ease;
}
.mcp-term__tool-result strong { color: var(--grove-2); font-weight: 600; }

/* State: live (running with spinner) — head + args visible, no result yet */
.mcp-term__tool.is-live {
  opacity: 1;
  transform: translateY(0);
}
.mcp-term__tool.is-live .mcp-term__tool-args {
  max-height: 80px;
  opacity: 1;
}

/* State: done — head + args + result visible */
.mcp-term__tool.is-done {
  opacity: 1;
  transform: translateY(0);
}
.mcp-term__tool.is-done .mcp-term__tool-args {
  max-height: 80px;
  opacity: 1;
}
.mcp-term__tool.is-done .mcp-term__tool-result {
  max-height: 80px;
  opacity: 1;
  padding-top: 6px;
  margin-top: 2px;
  border-top-width: 1px;
  border-top-color: rgba(174,203,172,0.12);
}

/* State: collapsed — head only (args + result hidden). Triggered when the
   final reply is returned; the answer should dominate, not the plumbing. */
.mcp-term__tool.is-collapsed {
  opacity: 1;
  transform: translateY(0);
  padding: 7px 12px;
  gap: 0;
}
.mcp-term__tool.is-collapsed .mcp-term__tool-args,
.mcp-term__tool.is-collapsed .mcp-term__tool-result {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  margin-top: 0;
  border-top-width: 0;
}

/* Status indicators: spinner (live) and check (done/collapsed) right-aligned */
.mcp-term__tool-status--live,
.mcp-term__tool-status--done {
  margin-left: auto;
  opacity: 0;
  transition: opacity 180ms ease;
}
.mcp-term__tool.is-live .mcp-term__tool-status--live { opacity: 1; }
.mcp-term__tool.is-done .mcp-term__tool-status--done,
.mcp-term__tool.is-collapsed .mcp-term__tool-status--done { opacity: 1; }

/* For the carousel — direct check icons (no status spans) right-align too */
.mcp-term__tool-head > i:last-child { margin-left: auto; }

.mcp-term__reply {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 14px 16px;
  color: rgba(255,255,255,0.92);
  font: 400 13.5px/1.6 var(--ff-sans);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}
/* When the answer appears, push it to the bottom of the panel so the
   collapsed pills at top + reply at bottom feel balanced — instead of
   leaving a big empty void underneath. */
.mcp-term__reply.is-visible {
  opacity: 1;
  transform: translateY(0);
  margin-top: auto;
}
.mcp-term__reply strong { color: #fff; }
.mcp-term__reply ul { margin: 6px 0 0; padding-left: 18px; }
.mcp-term__reply li { margin: 2px 0; }
.mcp-term__reply code {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  background: rgba(0,0,0,0.3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--grove-2);
}

.mcp-term__spin {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid var(--grove-2);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mcpSpin 0.7s linear infinite;
}
@keyframes mcpSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mcp-term__tool { transition: none; opacity: 1; transform: none; padding: 7px 12px; gap: 0; }
  .mcp-term__tool-args,
  .mcp-term__tool-result { display: none; }
  .mcp-term__tool-status--live { display: none; }
  .mcp-term__tool-status--done { opacity: 1; }
  .mcp-term__reply { transition: none; opacity: 1; transform: none; }
  .mcp-term__user .cursor { animation: none; opacity: 0; }
  .mcp-term__spin { animation: none; border-top-color: var(--grove-2); }
}

/* ─────────── Multi-demo carousel ──────────────────────────────
   The MCP-index hero rotates through one real use case per MCP
   (Checklist, Workpapers, Questionnaire, Delivery). One demo is
   `.is-active` at a time; JS drives the rotation + step choreography. */
.mcp-term--carousel {
  position: relative;
  /* Same rationale as .mcp-term — lock the panel so swapping demos
     and step transitions don't cause the hero to reflow. Slightly
     taller than the single-demo case to accommodate the demo label
     row at the top of each demo. */
  min-height: 620px;
  padding: 0;
}
.mcp-term__demo {
  position: absolute;
  inset: 18px 18px 22px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.mcp-term__demo.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mcp-term__demo-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grove-2);
  padding: 5px 10px 5px 9px;
  background: rgba(174,203,172,0.1);
  border: 1px solid rgba(174,203,172,0.18);
  border-radius: 999px;
  align-self: flex-start;
}
.mcp-term__demo-label .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--grove-2);
}

@media (prefers-reduced-motion: reduce) {
  .mcp-term__demo { transition: none; }
  /* Without JS or reduced motion, show the first demo by default. */
  .mcp-term--carousel .mcp-term__demo--1 { opacity: 1; transform: none; }
}

/* ─────────── Section heading bar (re-used) ─────────── */
.mcp-section { padding: 96px 28px; }
.mcp-section--paper { background: var(--bg-app); }
.mcp-section--canopy {
  background: var(--grove-9); color: #fff;
  position: relative; overflow: hidden;
}
.mcp-section--canopy::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 32px);
  pointer-events: none;
}
.mcp-section--understory { background: var(--grove-1); }
.mcp-section__inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
}
.mcp-section__head {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 12px;
  margin-bottom: 56px;
}
.mcp-section__head--left {
  align-items: flex-start; text-align: left;
}
.mcp-section__head h2 {
  font: var(--t-h1);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0; color: var(--grove-9);
}
.mcp-section--canopy .mcp-section__head h2 { color: #fff; }
.mcp-section--canopy .g-eyebrow { color: var(--grove-2); }
.mcp-section__head em { font-style: italic; color: var(--grove-7); }
.mcp-section--canopy .mcp-section__head em { color: var(--grove-2); }
.mcp-section__head p {
  font: var(--t-body-lg);
  color: var(--fg-3);
  max-width: 580px;
  margin: 0;
  line-height: 1.55;
}
.mcp-section--canopy .mcp-section__head p { color: rgba(255,255,255,0.7); }

/* ─────────── Product family grid ─────────── */
.mcp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.mcp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  min-height: 240px;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.mcp-card--link {
  color: inherit; text-decoration: none;
}
.mcp-card--link:hover {
  border-color: var(--grove-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.mcp-card--link:hover .mcp-card__arrow {
  transform: translateX(3px);
  color: var(--grove-8);
}
.mcp-card--soon { background: var(--grove-05); border-style: dashed; border-color: var(--grove-2); }
.mcp-card--soon .mcp-card__icon { background: rgba(1,68,55,0.05); color: var(--grove-6); }

.mcp-card__head {
  display: flex; align-items: center; gap: 12px;
}
.mcp-card__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--grove-1);
  color: var(--grove-8);
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.mcp-card__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 4px;
  border-radius: 999px;
  font: 600 9px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-left: auto;
}
.mcp-card__tag--live {
  background: var(--grove-1);
  color: var(--grove-8);
}
.mcp-card__tag--live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grove-7);
  box-shadow: 0 0 0 0 rgba(46,105,91,0.4);
  animation: mcpDotPulse 2.4s infinite;
}
.mcp-card__tag--soon {
  background: rgba(0,0,0,0.05);
  color: var(--fg-3);
}
.mcp-card__num {
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grove-6);
}
.mcp-card__title {
  font: var(--t-h3);
  font-size: 22px;
  margin: 0; color: var(--grove-9);
  letter-spacing: -0.005em;
}
.mcp-card__desc {
  font: var(--t-body);
  font-size: 15px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.55;
}
.mcp-card__tools {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.mcp-card__chip {
  font: 500 11px/1 var(--ff-mono);
  padding: 4px 8px;
  background: var(--bg-app);
  color: var(--fg-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
}
.mcp-card--soon .mcp-card__chip {
  background: transparent;
  border-color: rgba(1,68,55,0.15);
  color: var(--fg-4);
}
.mcp-card__foot {
  display: flex; align-items: center;
  margin-top: auto; padding-top: 6px;
}
.mcp-card__cta {
  font: 500 13.5px/1 var(--ff-sans);
  color: var(--grove-8);
  display: inline-flex; align-items: center; gap: 6px;
}
.mcp-card__arrow {
  color: var(--fg-5);
  transition: transform var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

/* ─────────── Quick-connect snippet block ─────────── */
.mcp-connect {
  background: #0a1a16;
  border: 1px solid rgba(174,203,172,0.15);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.mcp-connect__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.mcp-connect__tabs {
  display: inline-flex; gap: 4px;
}
.mcp-connect__tab {
  font: 500 12px/1 var(--ff-sans);
  padding: 7px 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.mcp-connect__tab:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); }
.mcp-connect__tab[aria-selected="true"] {
  background: rgba(174,203,172,0.12);
  color: var(--grove-2);
}

.mcp-connect__copy {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--ff-mono);
  padding: 7px 10px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.mcp-connect__copy:hover { color: var(--grove-2); background: rgba(174,203,172,0.08); }
.mcp-connect__copy i { font-size: 13px; }
.mcp-connect__copy[data-copied="true"] { color: var(--grove-2); }
.mcp-connect__copy[data-copied="true"] i::before { content: "\f0e6"; /* check */ }

.mcp-connect__panels { padding: 0; }
.mcp-connect__panel { display: none; }
.mcp-connect__panel[hidden] { display: none !important; }
.mcp-connect__panel:not([hidden]) { display: block; }
.mcp-connect__panel-blurb {
  padding: 14px 18px 4px;
  font: 400 12.5px/1.5 var(--ff-sans);
  color: rgba(255,255,255,0.7);
}
.mcp-connect__panel-blurb strong { color: #fff; }
.mcp-connect__panel-blurb code {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  background: rgba(0,0,0,0.3);
  color: var(--grove-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.mcp-connect__code {
  padding: 6px 18px 18px;
  font: 400 12.5px/1.6 var(--ff-mono);
  color: rgba(255,255,255,0.85);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}
.mcp-connect__code .cmt { color: rgba(255,255,255,0.4); }
.mcp-connect__code .k   { color: var(--grove-2); }
.mcp-connect__code .s   { color: #FCD34D; }
.mcp-connect__code .v   { color: #86EFAC; }

/* ─────────── Feature row — "why MCP" ─────────── */
.mcp-why {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 8px;
}
.mcp-why__item {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.mcp-section--canopy .mcp-why__item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.mcp-why__icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--grove-1);
  color: var(--grove-8);
  display: grid; place-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}
.mcp-section--canopy .mcp-why__icon {
  background: rgba(174,203,172,0.12);
  color: var(--grove-2);
}
.mcp-why__item h3 { font: var(--t-h4); margin: 0; color: var(--grove-9); }
.mcp-section--canopy .mcp-why__item h3 { color: #fff; }
.mcp-why__item p {
  font-size: 15px; color: var(--fg-3); margin: 0; line-height: 1.55;
}
.mcp-section--canopy .mcp-why__item p { color: rgba(255,255,255,0.7); }
.mcp-why__example {
  margin-top: 6px;
  font: 400 12px/1.5 var(--ff-mono);
  color: var(--fg-4);
  padding: 8px 10px;
  background: var(--bg-app);
  border-radius: 4px;
}
.mcp-section--canopy .mcp-why__example {
  background: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.6);
}
.mcp-why__example::before {
  content: "› ";
  color: var(--grove-7);
}
.mcp-section--canopy .mcp-why__example::before { color: var(--grove-2); }

/* ─────────── Tools reference cards ─────────── */
.mcp-tools {
  display: flex; flex-direction: column; gap: 16px;
}
.mcp-tool {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mcp-tool__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-1);
}
.mcp-tool__name {
  font: 600 17px/1.2 var(--ff-mono);
  color: var(--grove-9);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 12px;
}
.mcp-tool__name i {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--grove-1);
  color: var(--grove-8);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.mcp-tool__desc {
  margin: 4px 0 0;
  font: var(--t-body);
  font-size: 14.5px;
  color: var(--fg-3);
  line-height: 1.5;
}
.mcp-tool__head-tag {
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--grove-1);
  color: var(--grove-8);
}

.mcp-tool__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.mcp-tool__col { padding: 18px 24px; }
.mcp-tool__col + .mcp-tool__col {
  border-left: 1px solid var(--border-1);
}
.mcp-tool__col-label {
  font: 600 10px/1 var(--ff-mono);
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.mcp-tool__params {
  display: flex; flex-direction: column;
  gap: 10px;
}
.mcp-tool__param {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-3);
}
.mcp-tool__param:last-child { border-bottom: 0; padding-bottom: 0; }
.mcp-tool__param-name {
  font: 600 13px/1.3 var(--ff-mono);
  color: var(--grove-9);
}
.mcp-tool__param-meta {
  font: 500 11px/1 var(--ff-mono);
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mcp-tool__param-meta--req { color: var(--grove-7); }
.mcp-tool__param-type {
  grid-column: 1 / -1;
  font: 400 12px/1.45 var(--ff-mono);
  color: var(--fg-3);
}
.mcp-tool__param-type code {
  background: var(--bg-app);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--grove-8);
}

.mcp-tool__code {
  background: #0a1a16;
  color: rgba(255,255,255,0.85);
  font: 400 12px/1.55 var(--ff-mono);
  padding: 14px 16px;
  border-radius: 6px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}
.mcp-tool__code .k { color: var(--grove-2); }
.mcp-tool__code .s { color: #FCD34D; }
.mcp-tool__code .n { color: #86EFAC; }
.mcp-tool__code .c { color: rgba(255,255,255,0.4); }

/* ─────────── Trust / security row ─────────── */
.mcp-trust {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.mcp-trust__item {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.mcp-trust__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--grove-1);
  color: var(--grove-8);
  display: grid; place-items: center;
  font-size: 18px;
}
.mcp-trust__item h3 {
  font: var(--t-h4); margin: 0 0 4px;
  color: var(--grove-9);
}
.mcp-trust__item p {
  font-size: 14.5px; color: var(--fg-3);
  margin: 0; line-height: 1.55;
}
.mcp-trust__item code {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  background: var(--bg-app);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--grove-8);
}

/* ─────────── How-it-works numbered row ─────────── */
.mcp-steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.mcp-step {
  display: flex; flex-direction: column; gap: 8px;
}
.mcp-step__num {
  font: var(--t-display-2);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  color: var(--grove-2);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.mcp-step h3 {
  font: var(--t-h4);
  font-size: 18px;
  margin: 0;
  color: var(--grove-9);
}
.mcp-step p {
  font-size: 14.5px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.55;
}
.mcp-step code {
  font-family: var(--ff-mono);
  font-size: 12px;
  background: var(--bg-app);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--grove-8);
}

/* ─────────── Endpoint info chip ─────────── */
.mcp-endpoint {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  font: 500 12px/1.2 var(--ff-mono);
  color: var(--fg-2);
  margin-top: 18px;
}
.mcp-endpoint__label {
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--grove-7);
  padding: 4px 8px;
  background: var(--grove-1);
  border-radius: 4px;
}
.mcp-endpoint__url { color: var(--grove-9); }
.mcp-endpoint .ph { color: var(--fg-4); font-size: 14px; }

/* ─────────── Footnote/example callout row ─────────── */
.mcp-examples {
  display: grid; gap: 10px;
}
.mcp-example {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 12px; align-items: start;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(174,203,172,0.18);
  border-radius: var(--r-sm);
  font: 400 14px/1.55 var(--ff-sans);
  color: rgba(255,255,255,0.88);
}
.mcp-example i {
  color: var(--grove-2);
  font-size: 16px;
  margin-top: 2px;
}
.mcp-example em { color: var(--grove-2); font-style: italic; }
.mcp-example code {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  background: rgba(0,0,0,0.3);
  color: var(--grove-2);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ─────────── Install method cards (one-click + CLI) ─────────── */
.mcp-install {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
}
.mcp-install__card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color var(--dur-fast, 160ms) ease,
              box-shadow var(--dur-fast, 160ms) ease;
}
.mcp-install__card--featured {
  border-color: var(--grove-2);
  box-shadow: 0 0 0 3px rgba(174,203,172,0.18);
}
.mcp-install__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mcp-install__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.mcp-install__icon img {
  display: block;
  width: 26px; height: 26px;
}
.mcp-install__icon--claude,
.mcp-install__icon--codex,
.mcp-install__icon--cursor {
  background: #fff;
  border: 1px solid var(--border-1);
  color: #111;
}
.mcp-install__title-block { flex: 1; min-width: 0; }
.mcp-install__type {
  display: block;
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grove-7);
  margin-bottom: 4px;
}
.mcp-install__title {
  font: var(--t-h4);
  font-size: 18px;
  margin: 0;
  color: var(--grove-9);
  letter-spacing: -0.005em;
}
.mcp-install__badge {
  margin-left: auto;
  font: 600 9px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--grove-1);
  color: var(--grove-8);
  white-space: nowrap;
}
.mcp-install__desc {
  font: var(--t-body);
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.55;
}
.mcp-install__cmd {
  background: #0a1a16;
  color: rgba(255,255,255,0.9);
  font: 400 12.5px/1.7 var(--ff-mono);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  position: relative;
}
.mcp-install__cmd .c { color: rgba(255,255,255,0.4); }
.mcp-install__cmd .k { color: var(--grove-2); }
.mcp-install__cmd .v { color: #FCD34D; }
.mcp-install__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}
.mcp-install__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font: 500 13.5px/1 var(--ff-sans);
  background: var(--grove-9);
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast, 160ms) ease, transform var(--dur-fast, 160ms) ease;
}
.mcp-install__btn:hover { background: var(--grove-7); color: #fff; transform: translateY(-1px); }
.mcp-install__btn i { font-size: 14px; }
.mcp-install__btn--ghost {
  background: transparent;
  color: var(--grove-9);
  border: 1px solid var(--border-2);
}
.mcp-install__btn--ghost:hover { background: var(--bg-app); color: var(--grove-9); }
.mcp-install__btn[data-copied="true"] {
  background: var(--grove-2);
  color: var(--grove-9);
}
.mcp-install__btn[data-copied="true"] i::before { content: "\f0e6"; /* check */ }
.mcp-install__hint {
  font: 400 12px/1.4 var(--ff-sans);
  color: var(--fg-4);
  margin: 0;
}

/* Beta-access banner above install cards — text on the left, CTA on the right */
.mcp-beta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--grove-1);
  border: 1px solid var(--grove-2);
  border-left: 4px solid var(--grove-7);
  border-radius: 8px;
  margin-bottom: 32px;
}
.mcp-beta__text {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1;
  min-width: 260px;
}
.mcp-beta__text i {
  color: var(--grove-8);
  font-size: 22px;
  margin-top: 1px;
  flex-shrink: 0;
}
.mcp-beta__text p {
  font: var(--t-body);
  font-size: 14.5px;
  color: var(--fg-2);
  margin: 0;
  line-height: 1.55;
}
.mcp-beta__text strong { color: var(--grove-9); }
.mcp-beta .g-btn { flex-shrink: 0; white-space: nowrap; }

/* Supported-software line under the install cards */
.mcp-install__supported {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  margin: 28px 0 0;
  font: var(--t-body);
  font-size: 14.5px;
  color: var(--fg-3);
}
.mcp-install__supported i { color: var(--grove-7); font-size: 16px; }
.mcp-install__supported strong { color: var(--grove-9); }

/* ─────────── Compact tool summary (3 chips in a row) ─────────── */
.mcp-tools-summary {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mcp-tools-summary li {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 14px;
  align-items: start;
}
.mcp-tools-summary i {
  width: 32px; height: 32px;
  background: var(--grove-1);
  color: var(--grove-8);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 16px;
}
.mcp-tools-summary code {
  font: 600 13.5px/1.3 var(--ff-mono);
  color: var(--grove-9);
  display: block;
  margin-bottom: 4px;
  background: none;
  padding: 0;
}
.mcp-tools-summary p {
  font: 400 13.5px/1.5 var(--ff-sans);
  color: var(--fg-3);
  margin: 0;
}

/* Sub-heading inside a section (above the prompts grid) */
.mcp-subhead {
  margin: 56px 0 22px;
  padding-top: 24px;
  border-top: 1px solid var(--border-2);
}
.mcp-subhead h3 {
  font: var(--t-h3);
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--grove-9);
  letter-spacing: -0.005em;
}
.mcp-subhead p {
  font: var(--t-body);
  font-size: 15px;
  color: var(--fg-3);
  margin: 0;
  max-width: 640px;
  line-height: 1.55;
}

/* ─────────── Hero screenshot panel (explainer pages) ─────────── */
.mcp-hero__shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 12px 24px -8px rgba(0,0,0,0.4);
  background: #fff;
  line-height: 0;
}
.mcp-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────── Setup walkthrough — alternating image + copy ─────────── */
.mcp-walk {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.mcp-walk__step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.mcp-walk__step--no-image {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.mcp-walk__step--no-image .mcp-walk__num { justify-content: center; }
.mcp-walk__step--reverse .mcp-walk__copy { order: 2; }
.mcp-walk__step--reverse .mcp-walk__media { order: 1; }
.mcp-walk__num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 11px/1 var(--ff-mono);
  color: var(--grove-7);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.mcp-walk__num-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--grove-2);
  color: var(--grove-9);
  font: 700 12px/1 var(--ff-mono);
}
.mcp-walk__copy h3 {
  font: var(--t-h3);
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--grove-9);
  letter-spacing: -0.012em;
}
.mcp-walk__copy p {
  font: var(--t-body);
  font-size: 15.5px;
  color: var(--fg-3);
  margin: 0 0 14px;
  line-height: 1.6;
}
.mcp-walk__copy p:last-child { margin-bottom: 0; }
.mcp-walk__copy code {
  font-family: var(--ff-mono);
  font-size: 13px;
  background: var(--bg-app);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--grove-8);
}
.mcp-walk__copy a {
  color: var(--grove-8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mcp-walk__copy a:hover { color: var(--grove-9); }
.mcp-walk__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-2);
  display: block;
  cursor: zoom-in;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mcp-walk__media img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.mcp-walk__media img:focus-visible {
  outline: 2px solid var(--grove-7);
  outline-offset: 4px;
}

/* ─────────── Click-to-zoom overlay ─────────── */
.mcp-zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 18, 14, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  cursor: zoom-out;
  animation: mcpZoomFade 180ms ease;
}
.mcp-zoom[data-open="true"] { display: flex; }
.mcp-zoom__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  cursor: zoom-out;
  display: block;
}
.mcp-zoom__close {
  position: absolute;
  top: 24px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 18px;
  transition: background 160ms ease;
}
.mcp-zoom__close:hover { background: rgba(255,255,255,0.22); }
.mcp-zoom__close:focus-visible {
  outline: 2px solid var(--grove-2);
  outline-offset: 2px;
}
@keyframes mcpZoomFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-zoom { animation: none; }
  .mcp-walk__media img,
  .mcp-walk__media img:hover { transition: none; transform: none; }
}
@media (max-width: 720px) {
  .mcp-zoom { padding: 16px; }
  .mcp-zoom__close { top: 12px; right: 14px; }
}
.mcp-walk__media-stack {
  display: grid;
  gap: 14px;
}
.mcp-walk__caption {
  font: 400 12.5px/1.5 var(--ff-sans);
  color: var(--fg-4);
  margin-top: 12px;
  font-style: italic;
}
.mcp-walk__step .mcp-connect { margin-top: 18px; }

/* ─────────── Mobile ─────────── */
@media (max-width: 980px) {
  .mcp-hero { padding: 64px 20px 56px; }
  .mcp-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .mcp-hero__title { font-size: clamp(36px, 8vw, 56px); }
  .mcp-section { padding: 64px 20px; }
  .mcp-section__head { margin-bottom: 36px; }
  .mcp-grid { grid-template-columns: 1fr; }
  .mcp-why { grid-template-columns: 1fr; }
  .mcp-tool__body { grid-template-columns: 1fr; }
  .mcp-tool__col + .mcp-tool__col { border-left: 0; border-top: 1px solid var(--border-1); }
  .mcp-trust { grid-template-columns: 1fr; }
  .mcp-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .mcp-endpoint { width: 100%; flex-wrap: wrap; }
  .mcp-walk { gap: 56px; }
  .mcp-walk__step { grid-template-columns: 1fr; gap: 28px; }
  .mcp-walk__step--reverse .mcp-walk__copy { order: 1; }
  .mcp-walk__step--reverse .mcp-walk__media { order: 2; }
  .mcp-tools-summary { grid-template-columns: 1fr; }
  .mcp-install { grid-template-columns: 1fr; gap: 16px; }
  .mcp-beta { align-items: flex-start; }
  .mcp-beta .g-btn { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
  .mcp-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mcp-term { padding: 14px; }
  .mcp-tool__head { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
  .mcp-tool__head-tag { justify-self: start; }
  .mcp-tool__col { padding: 14px 18px; }
}
@media (max-width: 480px) {
  .mcp-steps { grid-template-columns: 1fr; }
}