/* coinstats.app/mcp/ — components unique to the MCP landing.
 * Everything else (header, hero glows, badges, stats, use cases, the dark .mcp
 * band, comparison table, CTA, FAQ, footer) comes from the shared styles.css /
 * api-site.css / v2.css / subpage.css copies, same as every /api/ sub-page. */

/* ---------- Agent icon sprite ---------- */
.aic { width: 18px; height: 18px; flex-shrink: 0; fill: currentcolor; }
.aic--claude, .aic--claude-code { color: #d97757; }
.aic--vscode { color: #0a7acc; }

/* ---------- Hero ---------- */
.mhero { text-align: center; padding-bottom: 24px; }
.mhero .wrap { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 1; }
.mhero__title { max-width: 16ch; margin: 38px auto 0; }
.mhero .hero__sub { max-width: 60ch; margin: 18px auto 0; }

.atabs-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: -12px 0 -14px; padding: 12px 24px 18px; }
.atabs-scroll::-webkit-scrollbar { display: none; }
.atabs { display: flex; gap: 4px; width: max-content; margin: 0 auto; padding: 5px; border-radius: var(--cs-r-pill);
  background: rgb(255 255 255 / 72%); border: 1px solid rgb(62 53 91 / 10%); box-shadow: 0 4px 12px rgb(62 53 91 / 8%); }
.atab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--cs-r-pill);
  background: transparent; color: var(--cs-text-subtle); font: 500 14px/1 var(--cs-font-body); cursor: pointer; white-space: nowrap;
  transition: background .2s var(--cs-ease), color .2s var(--cs-ease), box-shadow .2s var(--cs-ease); }
.atab:hover { color: var(--cs-purple-ink); }
.atab[aria-selected="true"] { background: #fff; color: var(--cs-purple-ink); box-shadow: 0 2px 10px rgb(62 53 91 / 14%); }
.atab .aic { width: 16px; height: 16px; }

.achip { display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; vertical-align: bottom; }
.achip__ic { display: inline-flex; align-items: center; justify-content: center; width: 1.08em; height: 1.08em; border-radius: .26em;
  background: #fff; box-shadow: 0 6px 18px rgb(62 53 91 / 14%); transform: rotate(-4deg); }
.achip__ic .aic { width: .66em; height: .66em; }
.achip__name { background: var(--cs-gradient-heading-warm); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.apanels { width: 100%; max-width: 640px; margin-top: 30px; }
.apanel { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: apanelIn .28s var(--cs-ease); }
/* Every panel ships visible in the HTML (crawlers, no-JS); with JS only the active one shows. */
.js .apanel:not(.is-active) { display: none; }
@keyframes apanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .apanel { animation: none; } }
.apanel__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.apanel__hint { font-size: 14px; color: var(--cs-text-subtle); max-width: 52ch; }
.apanel__hint code, .msteps code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; background: var(--cs-surface-lilac); color: var(--cs-purple-ink); padding: 1px 6px; border-radius: 6px; }


.msteps { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 20px;
  background: #fff; border: 1px solid rgb(62 53 91 / 8%); box-shadow: var(--cs-shadow-card); counter-reset: mstep; }
.msteps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--cs-text); }
.msteps li::before { counter-increment: mstep; content: counter(mstep); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--cs-gradient-icon); color: #fff; font-size: 12px; font-weight: 700; }

.mcode { width: 100%; text-align: left; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #4a3f6b 0%, var(--cs-purple-ink) 100%); box-shadow: 0 18px 40px rgb(62 53 91 / 22%); }
.mcode__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px;
  border-bottom: 1px solid rgb(255 255 255 / 10%); font-size: 12px; color: rgb(255 255 255 / 60%); }
.mcode pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; color: #fff; font: 14px/1.65 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.mcode pre .c { color: rgb(255 255 255 / 45%); }

.mcopy { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; border: 0; border-radius: var(--cs-r-pill);
  cursor: pointer; font: 600 13px/1 var(--cs-font-body); background: rgb(255 255 255 / 14%); color: #fff; transition: background .15s; }
.mcopy:hover { background: rgb(255 255 255 / 22%); }
.mcopy .ic { width: 14px; height: 14px; background: currentcolor; }
.mcopy.copied .ic { -webkit-mask-image: url(assets/icons/check.svg); mask-image: url(assets/icons/check.svg); }
.mcopy--light { background: var(--cs-surface-lilac); color: var(--cs-purple-ink); }
.mcopy--light:hover { background: rgb(147 93 235 / 16%); }

.murl { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 18px; padding: 6px 6px 6px 18px; border-radius: var(--cs-r-pill);
  border: 1px dashed rgb(62 53 91 / 22%); background: rgb(255 255 255 / 60%); }
.murl code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px ui-monospace, "SF Mono", Menlo, monospace; color: var(--cs-purple-ink); }
.mhero .tpilot { margin-top: 22px; width: auto; max-width: 100%; justify-content: center; }

@media (max-width: 560px) {
  .apanel__cta { width: 100%; flex-direction: column; }
  .atabs-scroll { margin-inline: -20px; padding-inline: 20px; }
}

/* ---------- Chat demo ---------- */
.chat { max-width: 920px; margin: 8px auto 0; border-radius: 24px; overflow: hidden; background: #fff;
  border: 1px solid rgb(62 53 91 / 10%); box-shadow: 0 30px 80px rgb(62 53 91 / 16%); text-align: left; }
.chat__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgb(62 53 91 / 8%); }
.chat__bar .d { width: 11px; height: 11px; border-radius: 50%; background: #e7e3ef; }
.chat__ttl { margin-left: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cs-purple-ink); }
.chat__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cs-green); }
.chat__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 0 3px rgb(52 179 73 / 18%); }
.chat__chips { display: flex; gap: 8px; padding: 14px 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgb(62 53 91 / 8%); background: var(--cs-surface-lilac); }
.chat__chips::-webkit-scrollbar { display: none; }
.chat__chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--cs-r-pill);
  border: 1px solid rgb(62 53 91 / 12%); background: #fff; color: var(--cs-purple-ink); font: 500 13px/1 var(--cs-font-body); cursor: pointer; transition: all .2s var(--cs-ease); }
.chat__chip .ic { width: 14px; height: 14px; background: currentcolor; }
.chat__chip.active { background: var(--cs-purple-ink); border-color: var(--cs-purple-ink); color: #fff; }
.chat__log { min-height: 430px; padding: 24px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 86%; font-size: 15px; line-height: 1.55; animation: msgIn .3s var(--cs-ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
.msg--user { align-self: flex-end; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--cs-purple-ink); color: #fff; }
.msg--ai { align-self: flex-start; display: flex; gap: 12px; }
.msg__av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fff5f0; border: 1px solid #f6dccf; }
.msg__av .aic { width: 18px; height: 18px; }
.msg__body { display: flex; flex-direction: column; gap: 10px; color: var(--cs-text); min-width: 0; }
.tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px;
  background: var(--cs-surface-lilac); border: 1px solid rgb(147 93 235 / 18%); font: 500 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--cs-purple-ink); }
.tool__spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgb(147 93 235 / 25%); border-top-color: var(--cs-magenta); animation: spin .7s linear infinite; }
.tool.done .tool__spin { display: none; }
.tool__ok { display: none; color: var(--cs-green); font-weight: 700; }
.tool.done .tool__ok { display: inline; }
.tool__ms { color: var(--cs-text-subtle); }
@keyframes spin { to { transform: rotate(360deg); } }
.acard { border: 1px solid rgb(62 53 91 / 10%); border-radius: 16px; overflow: hidden; background: #fff; }
.acard__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 10px; }
.acard__k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-text-subtle); font-weight: 600; }
.acard__v { font-family: var(--cs-font-display); font-size: 26px; font-weight: 700; color: var(--cs-purple-ink); }
.acard__row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 9px 16px; border-top: 1px solid rgb(62 53 91 / 6%); font-size: 14px; }
.acard__row b { font-weight: 600; color: var(--cs-purple-ink); }
.acard__row span { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--cs-green); }
.neg { color: var(--cs-red); }
.chat__input { display: flex; align-items: center; gap: 10px; margin: 8px 18px 18px; padding: 10px 10px 10px 18px; border-radius: 16px;
  border: 1px solid rgb(62 53 91 / 12%); color: var(--cs-text-subtle); font-size: 14px; }
.chat__input { transition: border-color .15s, box-shadow .15s; }
.chat__input:focus-within { border-color: rgb(147 93 235 / 55%); box-shadow: 0 0 0 4px rgb(147 93 235 / 12%); }
.chat__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--cs-text-strong, var(--cs-purple-ink)); text-overflow: ellipsis; }
.chat__input input::placeholder { color: var(--cs-text-subtle); opacity: 1; }
.chat__send { flex-shrink: 0; border: 0; padding: 0; cursor: pointer; transition: transform .15s, filter .15s; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-gradient-button); }
.chat__send .ic { width: 16px; height: 16px; background: #fff; }
@media (max-width: 640px) { .chat__log { min-height: 440px; padding: 18px 14px 6px; } .msg { max-width: 100%; } .acard__row { gap: 10px; font-size: 13px; } }

/* ---------- Prompt library ---------- */
.prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
@media (max-width: 980px) { .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prompts { grid-template-columns: minmax(0, 1fr); } }
.pcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fff; text-align: left;
  border: 1px solid rgb(62 53 91 / 8%); box-shadow: var(--cs-shadow-card); }
.pcard__tag { align-self: flex-start; padding: 4px 10px; border-radius: var(--cs-r-pill); background: var(--cs-surface-lilac); color: var(--cs-purple); font-size: 12px; font-weight: 600; }
.pcard__t { font-family: var(--cs-font-display); font-size: 19px; font-weight: 600; color: var(--cs-purple-ink); }
.pcard__p { flex: 1; padding: 12px 14px; border-radius: 14px; background: var(--cs-surface-lilac); color: var(--cs-text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pcard__p::before { content: "“"; } .pcard__p::after { content: "”"; }
.pcard__act { display: flex; flex-wrap: wrap; gap: 8px; }
.pbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; border: 1px solid rgb(62 53 91 / 12%);
  background: #fff; color: var(--cs-purple-ink); font: 600 13px/1 var(--cs-font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.pbtn:hover { background: var(--cs-surface-lilac); border-color: rgb(147 93 235 / 30%); }
.pbtn .aic { width: 14px; height: 14px; }
.pbtn .ic { width: 14px; height: 14px; background: currentcolor; }
.pbtn.copied .ic { -webkit-mask-image: url(assets/icons/check.svg); mask-image: url(assets/icons/check.svg); color: var(--cs-green); }

/* ---------- What is a crypto MCP ---------- */
.whatis .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .whatis .wrap { grid-template-columns: 1fr; gap: 36px; } }
.whatis__copy h2 { font-family: var(--cs-font-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; color: var(--cs-purple-ink); }
.whatis__copy h2 b { background: var(--cs-gradient-heading-warm); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.whatis__copy p { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--cs-text); }
.whatis__copy p a { color: var(--cs-purple); text-decoration: underline; text-underline-offset: 3px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .vs { grid-template-columns: 1fr; } }
.vs__col { padding: 22px; border-radius: 22px; border: 1px solid rgb(62 53 91 / 8%); background: #fff; }
.vs__col--win { background: linear-gradient(180deg, #fff 0%, #fff6f1 100%); border-color: rgb(255 147 50 / 35%); box-shadow: 0 18px 40px rgb(255 96 133 / 14%); }
.vs__h { font-family: var(--cs-font-display); font-size: 18px; font-weight: 700; color: var(--cs-purple-ink); }
.vs__sub { font-size: 13px; color: var(--cs-text-subtle); margin-top: 2px; }
.vs__list { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vs__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--cs-text); }
.vs__list .ic { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.vs__col--lose .ic { background: #b8b3c4; }
.vs__col--win .ic { background: var(--cs-green); }
.vs__time { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(62 53 91 / 8%); font-size: 13px; color: var(--cs-text-subtle); }
.vs__time b { color: var(--cs-purple-ink); font-size: 15px; }

/* ---------- Tool catalog ---------- */
/* Masonry: the groups hold 4-10 tools, so equal-height grid rows left large holes. */
.tools { columns: 3 300px; column-gap: 18px; margin-top: 8px; }
.tools .tgroup { break-inside: avoid; margin-bottom: 18px; }
.tgroup { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgb(62 53 91 / 8%); box-shadow: var(--cs-shadow-card); text-align: left; }
.tgroup__hd { display: flex; align-items: center; gap: 12px; }
.tgroup__ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-gradient-icon); }
.tgroup__ic .ic { width: 19px; height: 19px; background: #fff; }
.tgroup__t { font-family: var(--cs-font-display); font-size: 19px; font-weight: 700; color: var(--cs-purple-ink); }
.tgroup__n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cs-text-subtle); }
.tgroup__d { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--cs-text); }
.tgroup__list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tgroup__list code { padding: 5px 9px; border-radius: 8px; background: var(--cs-surface-lilac); color: var(--cs-purple-ink); font: 500 12px ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- Clients grid ---------- */
.clients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
@media (max-width: 980px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.client { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px; border-radius: 20px; background: #fff;
  border: 1px solid rgb(62 53 91 / 8%); cursor: pointer; font: inherit; color: var(--cs-purple-ink); transition: transform .2s var(--cs-ease), border-color .2s var(--cs-ease), box-shadow .2s var(--cs-ease); }
.client:hover { transform: translateY(-3px); border-color: rgb(229 72 255 / 40%); box-shadow: 0 14px 30px rgb(62 53 91 / 12%); }
.client .aic { width: 30px; height: 30px; }
.client__n { font-family: var(--cs-font-display); font-weight: 600; font-size: 16px; }
.client__m { font-size: 12px; color: var(--cs-text-subtle); }

/* ---------- Explore other landings ---------- */
.explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
@media (max-width: 980px) { .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .explore { grid-template-columns: minmax(0, 1fr); } }
.xcard { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: #fff; text-align: left;
  border: 1px solid rgb(62 53 91 / 8%); transition: transform .2s var(--cs-ease), box-shadow .2s var(--cs-ease); }
.xcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(62 53 91 / 12%); }
.xcard__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-gradient-icon); }
.xcard__ic .ic { width: 20px; height: 20px; background: #fff; }
.xcard__t { font-family: var(--cs-font-display); font-weight: 700; font-size: 17px; color: var(--cs-purple-ink); }
.xcard__d { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--cs-text); }
.xcard__arrow { position: absolute; top: 18px; right: 18px; width: 16px; height: 16px; background: var(--cs-text-subtle); }

/* ---------- Security band (dark .mcp) ---------- */
.mcp .secl { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.mcp .secl li { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 15px; line-height: 1.5; color: var(--cs-text); }
.mcp .secl .ic { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; background: var(--cs-magenta); }
.mcp .secl b { color: var(--cs-purple-ink); }

/* ---------- Header "New" pill ---------- */
.hdr__new { margin-left: 6px; padding: 2px 7px; border-radius: var(--cs-r-pill); background: var(--cs-gradient-button); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }

/* ---------- FAQ answers ---------- */
.faq__a a { color: var(--cs-purple); text-decoration: underline; text-underline-offset: 3px; }
.faq__a code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: var(--cs-surface-lilac); color: var(--cs-purple-ink); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* ---------- Provider-branded connect buttons ----------
   (.api-scoped to beat the shared `.api a { color: inherit }` rule.)
   Same idea as higgsfield.ai/mcp: the button wears the client's own brand
   color with a white logo, a 12px "key" radius, and a pressed-key inset so it
   reads as "open this in Claude/Cursor/…" rather than a generic CoinStats CTA. */
.api .xbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 26px; border-radius: 14px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 17px/1 var(--cs-font-body); color: #fff; background: var(--xbtn-bg, #1a1a1a);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 28%), 0 6px 10px -2px var(--xbtn-glow, rgb(0 0 0 / 20%)), 0 22px 30px -12px var(--xbtn-glow, rgb(0 0 0 / 22%));
  transition: transform .15s var(--cs-ease), box-shadow .15s var(--cs-ease), filter .15s var(--cs-ease); }
.xbtn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.xbtn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 28%), 0 3px 6px -2px var(--xbtn-glow, rgb(0 0 0 / 20%)); }
.xbtn:focus-visible { outline: 3px solid rgb(147 93 235 / 45%); outline-offset: 3px; }
.xbtn .aic { width: 22px; height: 22px; color: currentcolor; }
.xbtn--claude { --xbtn-bg: #d97757; --xbtn-glow: rgb(217 119 87 / 45%); }
.xbtn--chatgpt { --xbtn-bg: #0d0d0d; --xbtn-glow: rgb(13 13 13 / 30%); }
.xbtn--cursor { --xbtn-bg: #141414; --xbtn-glow: rgb(20 20 20 / 30%); }
.xbtn--vscode { --xbtn-bg: #0078d4; --xbtn-glow: rgb(0 120 212 / 40%); }
.api .xbtn--ghost { --xbtn-bg: #fff; color: var(--cs-purple-ink); box-shadow: inset 0 -3px 0 rgb(62 53 91 / 12%), 0 0 0 1px rgb(62 53 91 / 12%), 0 10px 24px -12px rgb(62 53 91 / 25%); }
.xbtn--ghost:hover { filter: none; background: var(--cs-surface-lilac); }
@media (max-width: 560px) { .apanel__cta .xbtn { width: 100%; } }

/* Prompt-card mini versions */
.api .pbtn--claude, .api .pbtn--chatgpt { color: #fff; border-color: transparent; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 25%); }
.pbtn--claude { background: #d97757; }
.pbtn--chatgpt { background: #0d0d0d; }
.pbtn--claude:hover { background: #cf6b4a; border-color: transparent; }
.pbtn--chatgpt:hover { background: #2a2a2a; border-color: transparent; }
.pbtn--claude .aic, .pbtn--chatgpt .aic { color: #fff; }

/* ---------- Review fixes ---------- */
/* Balanced wrapping so headings/intros don't strand a single word on the last line. */
.wsec-head h2, .wsec-head p, .cta__title, .cta__sub, .mhero .hero__sub, .whatis__copy h2 { text-wrap: balance; }
.pbtn--icon { padding: 8px 10px; }
/* The hero already ends with breathing room; the shared #demo top padding doubled it. */
body.api #demo.sec--lilac { padding-top: 64px; }
/* When the tab bar is wider than its scroller (phones), the bar's shadow is cut
   with hard edges at the scroller's sides. Fading the sides hides the cut and
   hints that the row scrolls. The fade sits inside the scroller's side padding,
   so on desktop (no overflow) it never touches the bar. */
.atabs-scroll { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }

/* ---------- Feedback pass (Gev) ---------- */
.chat__send:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Clickable things must look clickable: hover backgrounds on the agent tabs and demo chips. */
.atab:hover:not([aria-selected="true"]) { background: rgb(62 53 91 / 7%); color: var(--cs-purple-ink); }
.atab:active:not([aria-selected="true"]) { background: rgb(62 53 91 / 11%); }
.atab:focus-visible, .chat__chip:focus-visible { outline: 2px solid rgb(147 93 235 / 55%); outline-offset: 2px; }
.chat__chip:hover:not(.active) { background: #fff; border-color: rgb(147 93 235 / 45%); color: var(--cs-purple); box-shadow: 0 4px 12px rgb(62 53 91 / 8%); }

/* Tighter vertical rhythm than the /api/ pages: 104px per side stacked into
   ~208px of empty space between every section. */
body.api main > .sec { padding-top: 60px; padding-bottom: 60px; }
body.api #demo.sec--lilac { padding-top: 48px; }
.api .wsec-head h2, .api .sec__head .sec__title { margin-top: 14px; margin-bottom: 12px; }
.api .wsec-head { margin-bottom: 36px; }
@media (max-width: 768px) {
  body.api main > .sec { padding-top: 48px; padding-bottom: 48px; }
  .api .wsec-head { margin-bottom: 28px; }
}
/* Only things you can click should react to hover. Prompt cards and use-case
   cards aren't links, so they don't lift (their buttons still do). */
.api .ucard:hover { transform: none; }
/* Phones: keep the demo title bar on one line (drop the window dots). */
@media (max-width: 480px) {
  .chat__bar .d { display: none; }
  .chat__ttl { margin-left: 0; white-space: nowrap; font-size: 12.5px; }
  .chat__live { white-space: nowrap; }
}