/* ==========================================================================
   MCP                                Figma yxS12YXqOnX0RmudmUW4DW · 1:1431
   Hero, "Connect in two minutes" and the prompt gallery. The trust block and
   the testimonial marquee below them are the homepage's Wall of Love section
   reused verbatim with this page's copy — the comp draws the same thing.
   ========================================================================== */
.zr-mcp{
  --mc-hair : #E4E9F0;
  --mc-ink  : #1F2328;
  --mc-body : #525252;
  --mc-dim  : #7A8494;
  font-family:var(--zr-font);
}
.zr-mcp *, .zr-mcp *::before, .zr-mcp *::after{ box-sizing:border-box; }
.zr-mcp__wrap{ width:min(1260px, 100%); margin:0 auto; padding-inline:var(--zr-pad); }

/* ── hero ─────────────────────────────────────────────────────────────────
   Figma 9921:22915 — a 1880x980 card, white in the top-right corner falling
   to #D3F0F5 in the bottom-left, a field of sparkles over it, and the big
   four-point star bleeding off the top-right. The gradient is the comp's
   verbatim; the sparkles and the star are built below so they can move. */
.zr-mcp__hero{
  position:relative; isolation:isolate;
  margin:20px; padding:clamp(48px,5vw,84px) clamp(20px,3vw,48px) clamp(56px,5.5vw,90px);
  border-radius:var(--zr-r-lg); overflow:clip;
  background:linear-gradient(204.48deg, #FFFFFF 23.31%, #D3F0F5 89.15%);
}
/* the nav sits over it, as it does on the homepage */
.zr-mcp__hero{ margin-top:-104px; padding-top:calc(104px + clamp(48px,5vw,84px)); }

/* ── hero backdrop ────────────────────────────────────────────────────────
   Two layers under the copy: the sparkle field (Figma paints it as a grain
   texture; here each speck is a node so it can twinkle, same trick as the
   homepage MCP card) and the star. Everything that moves animates transform
   and opacity only, so the whole backdrop stays on the compositor. */
.zr-mcp__bg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; border-radius:inherit;
}

/* the sparkles thin out away from the star — dust thrown off it, and it
   keeps specks from crawling under the headline */
.zr-mcp__sparks{
  position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(118% 108% at 74% 40%, #000 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,0) 86%);
          mask-image:radial-gradient(118% 108% at 74% 40%, #000 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,0) 86%);
}
.zr-mcp__spark{
  position:absolute; border-radius:50%;
  background:rgb(var(--sp));
  opacity:0;
  /* opacity-only, so the ~200 nodes stay on the cheap path */
  animation:mcp-spark var(--d) ease-in-out var(--delay) infinite;
}
@keyframes mcp-spark{
  0%, 100% { opacity:calc(var(--a) * .1); }
  50%      { opacity:var(--a); }
}

/* one speck in nineteen is a cross-glint instead of a dot */
.zr-mcp__spark--glint{ background:none; animation-name:mcp-glint-lite; }
.zr-mcp__spark--glint::before,
.zr-mcp__spark--glint::after{
  content:''; position:absolute; left:50%; top:50%; translate:-50% -50%;
}
.zr-mcp__spark--glint::before{ width:100%; height:1px; background:linear-gradient(90deg, transparent, rgb(var(--sp)) 50%, transparent); }
.zr-mcp__spark--glint::after { width:1px; height:100%; background:linear-gradient(180deg, transparent, rgb(var(--sp)) 50%, transparent); }
@keyframes mcp-glint-lite{
  0%, 100% { opacity:0;                   scale:.4; }
  46%      { opacity:0;                   scale:.4; }
  62%      { opacity:var(--a);            scale:1;  }
  82%      { opacity:calc(var(--a) * .2); scale:.7; }
}

/* ── the big star ─────────────────────────────────────────────────────────
   The export is already turned 30°, so nothing here rotates it. Its visible
   tips sit in a 954.69 box centred at (577.35, 498.69) of the 1132x1077
   artboard; the comp puts that centre at (1345.66, 478.66) of the 1880x980
   card. Hence the odd percentages — `left/top` park the card point and
   `translate` backs off by where the centre falls inside the art. All of it
   is proportional, so the star keeps its spot at any width. */
.zr-mcp__star{
  --tx:-56%; --ty:6%;           /* where the run starts, on its own box */
  --tx2:-63%; --ty2:8%;         /* the trail starts a touch further back */
  position:absolute;
  left:71.578%; top:48.843%;
  width:60.21%;                 /* 1132 / 1880 */
  aspect-ratio:1132 / 1077;
  translate:-51.003% -46.304%;  /* kept off `transform`, which the kids use */
}
.zr-mcp__star span{ position:absolute; inset:0; display:block; transform-origin:50% 50%; }
.zr-mcp__star img { display:block; width:100%; height:100%; }

/* it starts small around the middle-left of the card and crosses to its spot
   fast — the curve spends most of its speed early and the rest of the run
   easing down, so it lands rather than stops */
.zr-mcp__star-body{ animation:mcp-star-in 2100ms cubic-bezier(.19,.9,.22,1) both; }
@keyframes mcp-star-in{
  0%   { opacity:0;  transform:translate(var(--tx),var(--ty)) scale(.38); }
  22%  { opacity:.9; }
  100% { opacity:1;  transform:translate(0,0) scale(1); }
}

/* a second copy on a slower curve trails the first and burns off — reads as
   speed without animating a blur on a 1000px layer */
.zr-mcp__star-trail{ animation:mcp-star-trail 2700ms cubic-bezier(.19,.9,.22,1) both; }
@keyframes mcp-star-trail{
  0%   { opacity:0;   transform:translate(var(--tx2),var(--ty2)) scale(.34); }
  14%  { opacity:.36; }
  100% { opacity:0;   transform:translate(0,0) scale(1.12); }
}

/* once it lands it keeps breathing, slowly and off any round number so the
   turn, the swell and the fade never line up twice */
.zr-mcp__star-body img{ animation:mcp-star-idle 19s ease-in-out 2100ms infinite; }
@keyframes mcp-star-idle{
  0%, 100% { transform:rotate(0deg)   scale(1);    opacity:1;   }
  50%      { transform:rotate(5.5deg) scale(1.05); opacity:.87; }
}

@media (prefers-reduced-motion: reduce){
  .zr-mcp__spark{ animation:none; opacity:calc(var(--a) * .8); }
  .zr-mcp__spark--glint{ opacity:var(--a); scale:1; }
  .zr-mcp__star-trail{ display:none; }
  .zr-mcp__star-body,
  .zr-mcp__star-body img{ animation:none; }
}

.zr-mcp__hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,578px) minmax(0,1fr);
  gap:clamp(32px,4vw,64px); align-items:center;
  width:min(1260px,100%); margin:0 auto;
}
.zr-mcp__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }

/* the endpoint pill — the same control as the nav menu's, at hero scale */
.zr-mcp__endpoint{
  display:inline-flex; align-items:center; gap:10px;
  height:34px; padding:0 12px 0 15px;
  border:1px solid var(--mc-hair); border-radius:10px; background:#fff;
  font:inherit; font-size:13.5px; color:var(--mc-body); cursor:pointer;
  white-space:nowrap;
  transition:border-color .16s var(--zr-ease-out-quad), color .16s var(--zr-ease-out-quad);
}
.zr-mcp__endpoint:hover{ border-color:#C9D6F2; color:var(--mc-ink); }
.zr-mcp__endpoint svg{ width:16px; height:16px; flex:0 0 auto; color:#9AA1AC; }
.zr-mcp__endpoint .zr-menu__tick{ display:none; }
.zr-mcp__endpoint.is-copied{ border-color:#BFE5CD; color:#0F9D58; }
.zr-mcp__endpoint.is-copied .zr-menu__copy{ display:none; }
.zr-mcp__endpoint.is-copied .zr-menu__tick{ display:block; color:#16A34A; }

.zr-mcp__h1{
  margin:0; text-wrap:balance;
  font-size:clamp(34px,4.4vw,56px); font-weight:500; line-height:1.2;
  letter-spacing:-.032em;
  background:var(--zr-head-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.zr-mcp__lede{ margin:0; max-width:515px; font-size:16px; line-height:26px; color:var(--mc-body); text-wrap:pretty; }
.zr-mcp__cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; }
.zr-mcp__btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding-inline:24px; border-radius:10px;
  font-size:15px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background .16s linear, box-shadow .16s linear, border-color .16s linear;
}
.zr-mcp__btn svg{ width:20px; height:20px; flex:0 0 auto; }
.zr-mcp__btn--primary{
  border:0; background:var(--zr-blue); color:#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.35);
}
.zr-mcp__btn--primary:hover{ background:#0D55DD; box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.5); }
.zr-mcp__btn--ghost{
  border:1px solid var(--mc-hair); background:#fff; color:var(--mc-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.zr-mcp__btn--ghost:hover{ border-color:#C9D6F2; background:#FAFBFD; }
.zr-mcp__btn:active{ translate:0 1px; }

/* ── the hero mock: a results panel with a prompt bar under it ─────────── */
.zr-mcp__mock{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.zr-mcp__panel{
  padding:21px; background:#fff;
  border:1px solid #EDF1F7; border-radius:16px;
  box-shadow:0 18px 40px -18px rgba(16,49,110,.22);
}
.zr-mcp__checked{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.zr-mcp__engines{ display:flex; }
.zr-mcp__engines i{
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(16,49,110,.18);
}
.zr-mcp__engines i + i{ margin-left:-10px; }
.zr-mcp__engines svg{ width:15px; height:15px; }
.zr-mcp__checked b{ font-size:14px; font-weight:500; color:var(--mc-ink); }
.zr-mcp__said{ margin:0 0 16px; font-size:14px; line-height:22px; color:var(--mc-body); }

/* the sources table */
.zr-mcp__tbl{ width:100%; border:1px solid #EDF1F7; border-radius:12px; overflow:hidden; }
.zr-mcp__tbl table{ width:100%; border-collapse:collapse; }
.zr-mcp__tbl th{
  padding:12px 16px; text-align:left; background:#FAFBFD;
  border-bottom:1px solid #EDF1F7;
  font-size:12.5px; font-weight:500; color:var(--mc-dim); white-space:nowrap;
}
.zr-mcp__tbl td{
  padding:12px 16px; border-bottom:1px solid #F2F5F9;
  font-size:13px; line-height:20px; color:var(--mc-body); vertical-align:middle;
}
.zr-mcp__tbl tr:last-child td{ border-bottom:0; }
.zr-mcp__src{ display:flex; align-items:center; gap:10px; min-width:0; }
.zr-mcp__src i{ display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto; }
.zr-mcp__src svg{ width:18px; height:18px; }
/* a favicon stand-in: the site's initial on its own colour. The comp uses
   real favicons, which are not assets this repo has — and drawing five brand
   marks from memory would put wrong logos next to named companies. */
.zr-mcp__fav{
  border-radius:6px; background:var(--fav, #9AA1AC); color:#fff;
  font-size:11px; font-weight:600; line-height:1; font-style:normal;
}
.zr-mcp__src span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zr-mcp__tag{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:8px;
  background:#F3F4F6; font-size:12px; font-weight:500; color:var(--mc-body); white-space:nowrap;
}
.zr-mcp__tbl td:last-child{ text-align:right; }

/* the prompt bar */
.zr-mcp__bar{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:#fff;
  border:1px solid #EDF1F7; border-radius:16px;
  box-shadow:0 12px 30px -16px rgba(16,49,110,.18);
}
.zr-mcp__bar p{ flex:1 1 auto; min-width:0; margin:0; font-size:14.5px; line-height:22px; color:var(--mc-ink); }
.zr-mcp__bar i{
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto;
  border-radius:11px; background:#F4F7FC; color:var(--mc-dim);
}
.zr-mcp__bar i.is-send{ background:var(--zr-blue); color:#fff; }
.zr-mcp__bar svg{ width:20px; height:20px; }

/* ── connect in two minutes ───────────────────────────────────────────── */
.zr-mcp__sec{ padding-block:clamp(56px,6vw,96px); }
.zr-mcp__h2{
  margin:0 0 8px; text-align:center; text-wrap:balance;
  font-size:clamp(26px,3.1vw,40px); font-weight:500; line-height:1.24;
  letter-spacing:-.028em; color:var(--mc-ink);
}
.zr-steps3{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px; margin-top:clamp(28px,3vw,44px);
}
.zr-step3{ display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; }
.zr-step3__art{
  display:grid; place-items:center; width:150px; height:150px; margin-bottom:32px;
  color:var(--zr-blue);
}
.zr-step3__art svg{ width:100%; height:100%; display:block; }
.zr-step3 b{ font-size:20px; font-weight:500; line-height:29px; color:var(--mc-ink); }
.zr-step3 p{ margin:8px 0 0; font-size:15px; line-height:24px; color:var(--mc-dim); text-wrap:pretty; }
.zr-mcp__sec-cta{ display:flex; justify-content:center; margin-top:clamp(28px,3vw,40px); }

/* ── what can you do ──────────────────────────────────────────────────── */
.zr-mcp__do{
  display:grid; grid-template-columns:minmax(0,475px) minmax(0,625px);
  gap:clamp(40px,6vw,100px); align-items:start;
}
.zr-mcp__eyebrow{
  margin:0 0 14px; font-family:'Geist Mono', ui-monospace, monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--zr-blue);
}
.zr-mcp__do-h{
  margin:0; text-wrap:balance;
  font-size:clamp(26px,2.8vw,36px); font-weight:500; line-height:1.22;
  letter-spacing:-.028em; color:var(--mc-ink);
}
.zr-mcp__do-p{ margin:16px 0 0; max-width:435px; font-size:15.5px; line-height:24px; color:var(--mc-dim); text-wrap:pretty; }
.zr-mcp__do-rail{ display:flex; flex-direction:column; gap:32px; }

.zr-ability{
  padding:32px; background:#fff;
  border:1px solid #EDF1F7; border-radius:18px;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
}
.zr-ability b{ display:block; font-size:20px; font-weight:500; line-height:29px; color:var(--mc-ink); }
.zr-ability p{ margin:14px 0 0; font-size:15px; line-height:24px; color:var(--mc-dim); text-wrap:pretty; }

/* the copyable example prompt */
.zr-ability__prompt{
  display:flex; align-items:center; gap:12px; width:100%; margin-top:24px;
  padding:13px; border:1px solid #E8EEF7; border-radius:10px;
  background:#FAFBFE; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .16s var(--zr-ease-out-quad), background .16s var(--zr-ease-out-quad);
}
.zr-ability__prompt:hover{ border-color:#C9D6F2; background:#F4F8FF; }
.zr-ability__prompt span{
  flex:1 1 auto; min-width:0;
  font-size:14px; line-height:21px; color:var(--mc-body);
}
.zr-ability__prompt svg{ width:20px; height:20px; flex:0 0 auto; color:#9AA1AC; }
.zr-ability__prompt .zr-menu__tick{ display:none; }
.zr-ability__prompt.is-copied{ border-color:#BFE5CD; background:#F3FBF6; }
.zr-ability__prompt.is-copied span{ color:#0F7A45; }
.zr-ability__prompt.is-copied .zr-menu__copy{ display:none; }
.zr-ability__prompt.is-copied .zr-menu__tick{ display:block; color:#16A34A; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .zr-mcp__hero-grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  /* stacked, the card grows tall and a star sized off its width strands
     itself mid-air. Hang it off the top-right corner instead, which is the
     read the comp gives it, and shorten the run to match the bigger box. */
  .zr-mcp__star{
    left:70%; top:0;
    /* sized off the viewport, not the card: a flat percentage that reads
       right on a phone is a wall of colour on a 1000px tablet */
    width:calc(168px + 65.5vw);
    translate:-51.003% -24%;
    --tx:-30%; --ty:5%; --tx2:-34%; --ty2:7%;
  }
  .zr-mcp__sparks{
    -webkit-mask-image:radial-gradient(120% 62% at 72% 16%, #000 0%, rgba(0,0,0,.58) 48%, rgba(0,0,0,0) 88%);
            mask-image:radial-gradient(120% 62% at 72% 16%, #000 0%, rgba(0,0,0,.58) 48%, rgba(0,0,0,0) 88%);
  }
  .zr-mcp__copy{ align-items:center; text-align:center; }
  .zr-mcp__lede{ max-width:560px; }
  .zr-mcp__cta{ justify-content:center; }
  .zr-mcp__do{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .zr-mcp__do-p{ max-width:none; }
}
@media (max-width:820px){
  .zr-steps3{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .zr-step3__art{ width:120px; height:120px; margin-bottom:22px; }
  /* the table is the one thing that cannot shrink gracefully — let it scroll */
  .zr-mcp__tbl{ overflow-x:auto; }
  .zr-mcp__tbl table{ min-width:440px; }
}
@media (max-width:620px){
  .zr-mcp__hero{ margin:12px; margin-top:-92px; padding-top:calc(92px + 40px); }
  .zr-ability{ padding:22px; }
  .zr-mcp__panel{ padding:16px; }
}