/* ============================================================
   ASHEN THRONE - /mcp  (connect your ChatGPT / Claude)

   Page-specific layout ONLY. landing/theme.css owns every token,
   the webfont import and the shared .site-header / .site-footer /
   .eyebrow primitives; seo.css owns the article column. Classes
   are namespaced mcp-* so nothing here can collide.
   Layout modelled on higgsfield.ai/mcp: client cards with numbered
   steps and one button each, a "how does it work" strip, the tool
   grid, example prompts, FAQ.
   ============================================================ */

.mcp-hero { text-align: center; padding: 8px 0 24px; }
.mcp-hero h1 { max-width: 820px; margin: 8px auto 12px; }
.mcp-hero .seo-tagline { max-width: 680px; margin: 0 auto 18px; }
.mcp-url {
  display: inline-block; font-family: var(--font-mono); font-size: 0.95rem;
  color: var(--accent); background: var(--panel); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 6px; user-select: all; word-break: break-all;
}

.mcp-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 28px 0 8px; }
.mcp-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px;
}
.mcp-card h2 { margin: 0; font-size: 1.35rem; }
.mcp-card .mcp-card-sub { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 4px; }
.mcp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 10px; }
/* The step marker is POSITIONED, not a flex sibling.
   `display: flex` on the li looks like the obvious way to sit the numbered
   circle beside the text, and it is fine right up until the copy contains
   inline markup. Flexbox turns EVERY child into a flex item: each <strong>
   becomes its own blockified item and each run of text between them becomes
   another, so a step reading
     Open <strong>Settings</strong>, then <strong>Connectors</strong>, ...
   becomes seven items on one nowrap row that cannot break. Measured on the
   live page at a 375px viewport: the li laid out 439px wide inside a 279px
   parent and the document scrolled 595px against a 375px client width, i.e.
   220px of horizontal overflow across the whole page.
   A hanging indent keeps the identical look, lets the text wrap as ordinary
   inline content, and cannot be broken by adding emphasis to the copy. */
.mcp-steps li {
  counter-increment: step; position: relative;
  padding-left: 38px; min-height: 26px;
  font-size: 0.95rem; line-height: 1.45;
}
.mcp-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04121a; font-family: var(--font-chrome); font-weight: 700; font-size: 0.9rem;
}
/* The card CTA rides the house plate anatomy (.mcp-btn is in theme.css's
   family list), in the same shape as .seo-cta-btn.

   THE DOUBLED SELECTOR IS LOAD-BEARING, not tidiness. `.seo-container a`
   in seo.css is specificity (0,1,1) and a bare `.mcp-btn` is (0,1,0), so
   the blanket link rule WON: it painted the label `var(--accent)` on a
   fill that was also `var(--accent)`, i.e. cyan on cyan. The button
   rendered as a blank cyan slab, stayed clickable, logged nothing, and
   only showed its text on :hover. This is the same class the /cup page was
   fixed for (verify-cup-landing.js SS A bans a blanket anchor rule); it
   recurred here because mcp.css was written outside the plate family.
   Never give this button a bare single-class colour rule again.

   No background / border / border-radius on the host: the fill is
   --plate-fill under the clip, and the edge is the ::after ring, because a
   real border is amputated at a clipped corner. Glow is a drop-shadow
   filter, never box-shadow, which would paint the rectangle the clip just
   removed. */
.seo-container .mcp-btn,
.mcp-btn {
  --bc: 8px;
  --plate-edge: linear-gradient(180deg, #b9ecff, #4fc3f7 50%, #1f7fb0);
  --plate-fill: linear-gradient(180deg, #7fdaff, #4fc3f7 58%, #2a9ad2);
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 22px;
  color: #06101a;
  font-family: var(--font-chrome); font-weight: 700;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-bottom: none;
  background: var(--plate-edge);
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(79, 195, 247, 0.30));
  transition: filter 0.15s, transform 0.08s;
}
.seo-container .mcp-btn:hover,
.mcp-btn:hover {
  background: var(--plate-edge);
  filter: brightness(1.1) drop-shadow(0 0 14px rgba(79, 195, 247, 0.5));
}
.seo-container .mcp-btn:active { transform: translateY(1px); }
.mcp-note { color: var(--text-dim); font-size: 0.85rem; margin: 6px 0 0; }
.mcp-note code { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); }

.mcp-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0 8px; }
.mcp-how div { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.mcp-how strong { display: block; color: var(--gold-hot); font-family: var(--font-chrome); letter-spacing: 1px; margin-bottom: 6px; }

.mcp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.mcp-tools div { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; font-size: 0.92rem; line-height: 1.4; }
.mcp-tools strong { display: block; color: var(--text); margin-bottom: 4px; }
.mcp-tools .mcp-vip { display: block; color: var(--gold-hot); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1px; margin-bottom: 4px; }

.mcp-prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 16px 0 8px; padding: 0; list-style: none; }
.mcp-prompts li { background: var(--bg-dark); border-left: 3px solid var(--accent); padding: 10px 14px; font-size: 0.95rem; }

@media (max-width: 640px) {
  .mcp-card { padding: 18px 16px; }
  .mcp-btn { align-self: stretch; text-align: center; }
}