/* MCP Connectors page — dark glass + neon, matched to the homepage aesthetic
   (node-network canvas bg, glassmorphism cards, orange-glow hovers, neon sparklines).
   Scoped under .xr-mcp. */

.xr-mcp {
  position: relative;
  background: linear-gradient(145deg, #2A1F4F 0%, #312260 50%, #342669 100%);
  color: rgba(255,255,255,0.7);
  overflow: hidden;
}
/* full-bleed so the dark canvas meets the header/footer with no white gutter */
.xr-mcp { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.xr-mcp .wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.xr-mcp section { padding: clamp(40px, 6vw, 64px) 0; position: relative; z-index: 1; }

/* Node-network canvas background */
.xr-mcp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.xr-mcp-bg canvas { display: block; width: 100%; height: 100%; }
/* let the hero receive mouse for the orange link-glow */
.xr-mcp .hero { pointer-events: auto; }

.xr-mcp h1, .xr-mcp h2, .xr-mcp h3, .xr-mcp h4 { color: #fff; }
.xr-mcp .eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #F7941D; font-weight: 600; margin: 0 0 14px; }
.xr-mcp h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 500; margin: 0 0 .4em; }
.xr-mcp p { color: rgba(255,255,255,0.72); }
.xr-mcp b { color: #fff; }
.xr-mcp code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; color: #E8E3F3; }

/* Hero */
.xr-mcp .hero { padding: clamp(72px,9vw,110px) 0 clamp(48px,6vw,72px); }
.xr-mcp .hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 500; margin: 0 0 .35em; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.xr-mcp .hero .lede { font-size: 1.18rem; color: rgba(255,255,255,0.88); max-width: 56ch; margin: 0; }
.xr-mcp .rule { height: 3px; width: 56px; margin: 26px 0 0; background: linear-gradient(90deg, #F7941D, #F15A29); border-radius: 3px; box-shadow: 0 0 16px rgba(247,148,29,.6); }

/* Neon sparkline */
.xr-spark { display: block; overflow: visible; }
.xr-spark path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(247,148,29,.7)) drop-shadow(0 0 14px rgba(241,90,41,.4)); }
.xr-spark .spark-line { stroke: url(#xrSparkGrad); }
.xr-spark .spark-line-blue { stroke: #6873B7; filter: drop-shadow(0 0 6px rgba(104,115,183,.8)); }
.xr-hero-spark { margin-top: 28px; width: 100%; max-width: 520px; height: 56px; }
.xr-card-spark { width: 100%; height: 34px; margin-top: 16px; opacity: .9; }

/* Pills */
.xr-mcp .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.xr-mcp .pill { font-size: .8rem; font-weight: 600; color: #fff; background: rgba(104,115,183,0.18); border: 1px solid rgba(104,115,183,0.35); border-radius: 999px; padding: 5px 12px; }

/* Glass cards */
.xr-mcp .card, .xr-mcp .tier, .xr-mcp .form-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.xr-mcp .card { padding: 22px 24px; margin-bottom: 14px; display: flex; gap: 16px; align-items: flex-start; }
.xr-mcp .card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); border-color: rgba(104,115,183,0.4); box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 22px rgba(104,115,183,.25); }
.xr-mcp .card .body { flex: 1; min-width: 0; }
.xr-mcp .card .name { font-weight: 600; color: #fff; font-size: 1.08rem; }
.xr-mcp .card .desc { color: rgba(255,255,255,0.66); font-size: .95rem; margin-top: 3px; }
.xr-mcp .card .url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: #8d97d6; margin-top: 8px; word-break: break-all; }

/* Status tags */
.xr-mcp .tag { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; align-self: flex-start; }
.xr-mcp .tag.live { background: rgba(0,184,120,0.18); color: #4ee3a8; border: 1px solid rgba(0,184,120,.4); box-shadow: 0 0 12px rgba(0,184,120,.35); }
.xr-mcp .tag.built { background: rgba(247,148,29,0.18); color: #ffb964; border: 1px solid rgba(247,148,29,.4); }
.xr-mcp .tag.soon { background: rgba(104,115,183,0.2); color: #b8c0ef; border: 1px solid rgba(104,115,183,.4); }

.xr-mcp .note { margin-top: 18px; font-size: .92rem; color: rgba(255,255,255,0.72); background: rgba(104,115,183,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; }

/* Pain grid */
.xr-mcp .pains { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; margin-top: 6px; }
.xr-mcp .pain h3 { font-size: 1.05rem; color: #fff; margin: 0 0 .3em; font-weight: 700; }
.xr-mcp .pain p { margin: 0; color: rgba(255,255,255,0.62); font-size: .95rem; }
.xr-mcp .pain .fix { color: rgba(255,255,255,0.85); margin-top: .5em; }
.xr-mcp .pain .fix b { color: #ffb964; }
@media (max-width: 620px) { .xr-mcp .pains { grid-template-columns: 1fr; } }

/* Tiers */
.xr-mcp .tiers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 720px) { .xr-mcp .tiers { grid-template-columns: 1fr; } }
.xr-mcp .tier { padding: 24px 22px; display: flex; flex-direction: column; }
.xr-mcp .tier:hover { transform: translateY(-4px); box-shadow: 0 10px 34px rgba(0,0,0,.3); }
.xr-mcp .tier.feature { border-color: rgba(247,148,29,0.55); box-shadow: 0 0 28px rgba(247,148,29,.2); }
.xr-mcp .tier .badge { align-self: flex-start; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg,#F7941D,#F15A29); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; box-shadow: 0 0 14px rgba(247,148,29,.5); }
.xr-mcp .tier h3 { font-size: 1.15rem; margin: 0 0 2px; }
.xr-mcp .tier .for { font-size: .82rem; color: rgba(255,255,255,0.55); margin: 0 0 14px; }
.xr-mcp .price { font-size: 1.45rem; font-weight: 700; color: #fff; }
.xr-mcp .price small { font-size: .78rem; font-weight: 500; color: rgba(255,255,255,0.55); }
.xr-mcp .mo { font-size: .86rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.xr-mcp .tier ul { list-style: none; margin: 14px 0 0; padding: 0; font-size: .9rem; color: rgba(255,255,255,0.82); }
.xr-mcp .tier li { padding: 5px 0 5px 22px; position: relative; }
.xr-mcp .tier li::before { content: "\2713"; position: absolute; left: 0; color: #ffb964; font-weight: 700; }

/* Steps */
.xr-mcp .steps { counter-reset: s; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 6px; }
@media (max-width: 620px) { .xr-mcp .steps { grid-template-columns: 1fr; } }
.xr-mcp .step { position: relative; padding-left: 46px; }
.xr-mcp .step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg,#342669,#6873B7); color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px rgba(104,115,183,.5); }
.xr-mcp .step b { color: #fff; }
.xr-mcp .step p { margin: .2em 0 0; font-size: .94rem; color: rgba(255,255,255,0.6); }

/* Form */
.xr-mcp .form-card { padding: 32px; }
.xr-mcp .sub { color: rgba(255,255,255,0.6); margin: .2em 0 22px; font-size: 1rem; }
.xr-mcp form { display: grid; gap: 16px; max-width: 520px; }
.xr-mcp label { display: block; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.xr-mcp .reqd { color: #ffb964; }
.xr-mcp input[type=email], .xr-mcp input[type=text], .xr-mcp input[type=url], .xr-mcp select {
  width: 100%; font: inherit; font-size: .95rem; color: #fff; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; padding: 11px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.xr-mcp input::placeholder { color: rgba(255,255,255,0.4); }
.xr-mcp select option { color: #222; }
.xr-mcp input:focus, .xr-mcp select:focus { border-color: #F7941D; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(247,148,29,.2); }
.xr-mcp .radios { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.xr-mcp .radios label { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: .93rem; margin: 0; color: rgba(255,255,255,0.85); }
.xr-mcp .radios input { accent-color: #F7941D; }
.xr-mcp button[type=submit] { justify-self: start; font: inherit; font-weight: 600; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(90deg, #F7941D, #F15A29); border: 0; border-radius: 10px; padding: 13px 28px; margin-top: 4px; box-shadow: 0 4px 20px rgba(247,148,29,.35); transition: transform .3s ease, box-shadow .3s ease; }
.xr-mcp button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(247,148,29,.55); }

/* Gravity Forms on the dark MCP page (overrides the light global GF styling) */
.xr-mcp .gform_wrapper .gfield_label,
.xr-mcp .gform_wrapper legend.gfield_label { color: rgba(255,255,255,0.85); font-weight: 600; }
.xr-mcp .gform_wrapper .gfield_required { color: #ffb964; }
.xr-mcp .gform_wrapper .gform_required_legend { color: rgba(255,255,255,0.5); }
.xr-mcp .gform_wrapper input[type=text],
.xr-mcp .gform_wrapper input[type=email],
.xr-mcp .gform_wrapper input[type=tel],
.xr-mcp .gform_wrapper input[type=url],
.xr-mcp .gform_wrapper input[type=number],
.xr-mcp .gform_wrapper textarea,
.xr-mcp .gform_wrapper select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: 9px;
}
.xr-mcp .gform_wrapper input::placeholder, .xr-mcp .gform_wrapper textarea::placeholder { color: rgba(255,255,255,0.4); }
.xr-mcp .gform_wrapper select option { color: #222; }
.xr-mcp .gform_wrapper input:focus, .xr-mcp .gform_wrapper textarea:focus, .xr-mcp .gform_wrapper select:focus {
  border-color: #F7941D; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(247,148,29,0.2); outline: none;
}
.xr-mcp .gform_wrapper .gchoice label, .xr-mcp .gform_wrapper .gfield_radio label, .xr-mcp .gform_wrapper .gfield_checkbox label { color: rgba(255,255,255,0.85); font-weight: 500; }
.xr-mcp .gform_wrapper input[type=radio], .xr-mcp .gform_wrapper input[type=checkbox] { accent-color: #F7941D; }
.xr-mcp .gform_wrapper .gfield_description, .xr-mcp .gform_wrapper .gform_fileupload_rules { color: rgba(255,255,255,0.55); }
.xr-mcp .gform_wrapper .gform_footer input[type=submit],
.xr-mcp .gform_wrapper .gform_footer button {
  background: linear-gradient(90deg, #F7941D, #F15A29); color: #fff; border: 0; border-radius: 10px;
  padding: 13px 28px; font-weight: 600; font-size: 1rem; cursor: pointer; width: auto;
  box-shadow: 0 4px 20px rgba(247,148,29,0.35); transition: transform .3s ease, box-shadow .3s ease;
}
.xr-mcp .gform_wrapper .gform_footer input[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(247,148,29,0.55); }
.xr-mcp .gform_wrapper .gform_confirmation_message { color: #fff; font-size: 1.05rem; }
.xr-mcp .gform_wrapper .validation_message, .xr-mcp .gform_wrapper .gfield_validation_message { color: #ffb1a0; background: transparent; border: 0; padding: 4px 0 0; }
.xr-mcp .gform_wrapper .gfield_error input, .xr-mcp .gform_wrapper .gfield_error textarea, .xr-mcp .gform_wrapper .gfield_error select { border-color: #f15a29; }

/* Dark-style GF validation messages on the MCP page (default is white -> clashes) */
.xr-mcp .gform_wrapper .gform_validation_errors {
  background: rgba(241,90,41,0.12); border: 1px solid rgba(241,90,41,0.5); border-radius: 10px; box-shadow: none;
}
.xr-mcp .gform_wrapper .gform_validation_errors h2,
.xr-mcp .gform_wrapper .gform_submission_error { color: #ffb1a0; }
.xr-mcp .gform_wrapper .gfield_validation_message,
.xr-mcp .gform_wrapper .validation_message {
  background: rgba(241,90,41,0.12); border: 1px solid rgba(241,90,41,0.5); color: #ffb1a0; border-radius: 8px;
}