/* ── read and write ─────────────────────────────────────── added section ─
   The write tools (changelog, 22 Jul 2026) and a media slot for the MCP in
   use. The window is drawn — a picture of the product until a recording
   exists; see the comment on the <figure>. */
.zr-mcpw__list{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.zr-mcpw__list li{ display:flex; gap:10px; padding:12px 14px; border:1px solid #EDF1F7; border-radius:12px; background:#fff; }
.zr-mcpw__list i{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:#E8F0FE; color:var(--zr-blue); }
.zr-mcpw__list i svg{ width:14px; height:14px; }
.zr-mcpw__list b{ display:block; font-size:14px; font-weight:500; color:var(--mc-ink); }
.zr-mcpw__list span{ display:block; margin-top:2px; font-size:12.5px; line-height:18px; color:var(--mc-dim); }
.zr-mcpw__safe{ margin:18px 0 0; max-width:435px; font-size:13.5px; line-height:21px; color:var(--mc-dim); }
.zr-mcpw__media{ margin:0; min-width:0; }
.zr-mcpw__media figcaption{ margin:12px 0 0; text-align:center; font-size:13px; color:var(--mc-dim); }
.zr-mcpw__media video{ display:block; width:100%; border-radius:18px; }
.zr-mcpw__win{
  overflow:hidden; border-radius:18px; background:#0F1117; color:#E6E8EE;
  box-shadow:0 30px 60px -28px rgba(16,49,110,.45), 0 0 0 1px rgba(255,255,255,.06);
}
.zr-mcpw__bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.zr-mcpw__dots{ display:flex; gap:6px; }
.zr-mcpw__dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14); }
.zr-mcpw__bar span{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; background:rgba(34,181,115,.14); color:#7DD3A7; font-size:12px; font-weight:500; }
.zr-mcpw__bar span i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.zr-mcpw__body{ display:flex; flex-direction:column; gap:14px; padding:20px; }
.zr-mcpw__user{ align-self:flex-end; max-width:88%; padding:10px 14px; border-radius:12px 12px 4px 12px; background:rgba(255,255,255,.09); font-size:13.5px; line-height:21px; color:#fff; }
.zr-mcpw__tools{ display:flex; flex-direction:column; gap:6px; }
.zr-mcpw__tool{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); font-size:12.5px; color:rgba(255,255,255,.8); }
.zr-mcpw__tool b{ font-family:'Geist Mono', ui-monospace, monospace; font-size:12px; font-weight:500; color:#8FB4FF; }
.zr-mcpw__tool em{ margin-left:auto; font-style:normal; font-size:12px; color:rgba(255,255,255,.5); }
.zr-mcpw__tool svg{ width:12px; height:12px; color:#7DD3A7; flex:0 0 auto; }
.zr-mcpw__ai{ font-size:13.5px; line-height:21px; color:rgba(255,255,255,.86); }
.zr-mcpw__ai b{ font-weight:600; color:#fff; }
.zr-mcpw__ai p{ margin:0 0 8px; }
.zr-mcpw__ai p:last-child{ margin:0; }

/* ── REST API ───────────────────────────────────────────── added section ─ */
.zr-api{ background:linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 30%, #F6F8FC 70%, #FFFFFF 100%); }
.zr-api__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; max-width:820px; margin:0 auto clamp(28px,3vw,44px); }
.zr-api__head .zr-mcp__eyebrow{ margin-bottom:10px; }
.zr-api__sub{ margin:12px 0 0; font-size:15.5px; line-height:24px; color:var(--mc-dim); text-wrap:pretty; }
.zr-api__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:start; }
.zr-api__code{ overflow:hidden; border-radius:18px; background:#0F1117; color:#E6E8EE; box-shadow:0 30px 60px -28px rgba(16,49,110,.45), 0 0 0 1px rgba(255,255,255,.06); }
.zr-api__tabs{ display:flex; align-items:center; gap:4px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.zr-api__tabs span{ padding:6px 12px; border-radius:8px; font-size:12.5px; color:rgba(255,255,255,.55); }
.zr-api__tabs span.is-on{ background:rgba(255,255,255,.09); color:#fff; }
.zr-api__tabs em{ margin-left:auto; font-style:normal; font-family:'Geist Mono', ui-monospace, monospace; font-size:12px; color:rgba(255,255,255,.5); }
.zr-api__code pre{ margin:0; padding:18px 20px; font-family:'Geist Mono', ui-monospace, monospace; font-size:12.5px; line-height:21px; color:#D7DEE8; white-space:pre; overflow-x:auto; }
.zr-api__code pre + pre{ border-top:1px dashed rgba(255,255,255,.1); }
.zr-api__code .k{ color:#8FB4FF; } .zr-api__code .s{ color:#7DD3A7; } .zr-api__code .c{ color:rgba(255,255,255,.4); } .zr-api__code .b{ color:#FBBF77; }
.zr-api__label{ display:block; padding:12px 20px 0; font-family:'Geist Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.zr-api__side{ display:flex; flex-direction:column; gap:14px; }
.zr-api__drawers{ list-style:none; margin:0; padding:6px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; border:1px solid #EDF1F7; border-radius:16px; background:#fff; }
.zr-api__drawers li{ display:flex; gap:10px; padding:12px; border-radius:11px; background:#F8FAFD; }
.zr-api__drawers i{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:#E8F0FE; color:var(--zr-blue); }
.zr-api__drawers i svg{ width:14px; height:14px; }
.zr-api__drawers b{ display:block; font-size:13.5px; font-weight:500; color:var(--mc-ink); }
.zr-api__drawers span{ display:block; margin-top:2px; font-size:12px; line-height:17px; color:var(--mc-dim); }
.zr-api__limits{ width:100%; border-collapse:collapse; border:1px solid #EDF1F7; border-radius:16px; overflow:hidden; background:#fff; }
.zr-api__limits th, .zr-api__limits td{ padding:11px 16px; text-align:left; font-size:13.5px; border-bottom:1px solid #F2F5F9; }
.zr-api__limits th{ font-family:'Geist Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9AA1AC; font-weight:500; background:#FAFBFD; }
.zr-api__limits td:last-child, .zr-api__limits th:last-child{ text-align:right; font-family:'Geist Mono', ui-monospace, monospace; }
.zr-api__limits tr:last-child td{ border-bottom:0; }
.zr-api__limits td{ color:var(--mc-body); }
.zr-api__note{ margin:0; font-size:13px; line-height:20px; color:var(--mc-dim); }
.zr-api__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
@media (max-width:1040px){
  .zr-api__grid{ grid-template-columns:minmax(0,1fr); }
  .zr-mcpw__list{ grid-template-columns:minmax(0,1fr); }
  .zr-mcpw__safe{ max-width:none; }
}
@media (max-width:620px){
  .zr-api__drawers{ grid-template-columns:minmax(0,1fr); }
}

/* ── the client set-ups ───────────────────────────────────────────────────
   Four copy-paste cards. Each code block is a real <button> with the same
   clipboard contract as the endpoint pill: async first, hidden textarea
   behind it, and the tick only on a reported success. */
.zr-clients{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:clamp(28px,3vw,44px); }
.zr-client{ display:flex; flex-direction:column; gap:10px; padding:22px 20px; background:#fff; border:1px solid #EDF1F7; border-radius:16px; box-shadow:0 6px 16px -6px rgba(31,36,41,.05); }
.zr-client__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zr-client__top b{ font-size:16px; font-weight:500; color:var(--mc-ink); }
.zr-client p{ margin:0; font-size:13.5px; line-height:20px; color:var(--mc-dim); flex:1 1 auto; }
.zr-client p code{ font-family:'Geist Mono', ui-monospace, monospace; font-size:12.5px; color:var(--mc-body); }
.zr-client__code{
  display:flex; align-items:flex-start; gap:10px; width:100%; padding:12px;
  border:1px solid #E8EEF7; border-radius:10px; background:#0F1117;
  font:inherit; text-align:left; cursor:pointer;
  transition:border-color .16s var(--zr-ease-out-quad), background .16s var(--zr-ease-out-quad);
}
.zr-client__code:hover{ border-color:#C9D6F2; }
.zr-client__code code{
  flex:1 1 auto; min-width:0; white-space:pre-wrap; word-break:break-word;
  font-family:'Geist Mono', ui-monospace, monospace; font-size:11.5px; line-height:18px; color:#D7DEE8;
}
.zr-client__code svg{ width:16px; height:16px; flex:0 0 auto; color:#8A93A3; margin-top:1px; }
.zr-client__code .zr-menu__tick{ display:none; }
.zr-client__code.is-copied{ border-color:#1F7A4D; }
.zr-client__code.is-copied code{ color:#7DD3A7; }
.zr-client__code.is-copied .zr-menu__copy{ display:none; }
.zr-client__code.is-copied .zr-menu__tick{ display:block; color:#7DD3A7; }
@media (max-width:1040px){ .zr-clients{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .zr-clients{ grid-template-columns:minmax(0,1fr); } }

/* ══════════════════════════════════════════════════════════════════════════
   MCP HERO — the same frame every other page now uses
   One screen tall on desktop, 20px from all four edges (the nav's layout box
   is 104px, so the lift is 84 and the card's top edge lands at 20), and the
   star sized against the card's height instead of its width. The star used
   to be positioned so its box ran to 101% of the card and the idle scale
   pushed it past 104 — which is what cropped it. It is now anchored to the
   right with a real inset and can breathe without touching an edge.
   ══════════════════════════════════════════════════════════════════════════ */
.zr-mcp__hero{
  --mc-lift:84px;
  margin:20px; margin-top:calc(-1 * var(--mc-lift));
  padding-top:calc(var(--mc-lift) + clamp(28px,3.2vw,60px));
  display:grid; align-content:center;
}
@media (min-width:900px){
  .zr-mcp__hero{ min-height:calc(100svh - 40px); }
  @supports not (height:100svh){ .zr-mcp__hero{ min-height:calc(100vh - 40px); } }
}
.zr-mcp__star{
  left:auto; top:50%;
  right:clamp(8px,3vw,64px);
  width:auto; height:min(82%, 760px);
  aspect-ratio:1132 / 1077;
  translate:0 -50%;
}
@media (max-width:1040px){
  .zr-mcp__star{ right:-6%; height:min(64%, 520px); top:44%; }
}
@media (max-width:620px){
  .zr-mcp__hero{ margin:12px; margin-top:-80px; padding-top:calc(80px + 36px); min-height:0; }
  .zr-mcp__star{ right:-14%; height:340px; top:30%; }
}