/* Agent page: Native Agent MCP capabilities and install guide.
   Section shells, headings and labels come from product-clean.css. */
.agent-page {
  --agent-ink: #252838;
  --agent-muted: #767b89;
  --agent-line: #ebedf2;
  --agent-soft: #f7f7fb;
  --agent-accent: var(--brand-primary, #563aff);
  --agent-accent-soft: var(--brand-soft, #f4f3ff);
}
#how-it-works, #capabilities, #control { scroll-margin-top: 9.375rem; }
.agent-page :is(.agent-flow, .agent-cap-grid, .agent-options, .agent-control__list) li,
.agent-page :is(.agent-flow__agents, .agent-flow__tools, .agent-flow__browser ul, .agent-cap__methods, .agent-option__list) li { margin: 0; line-height: 1.5; }

.agent-flow code, .agent-cap code, .agent-verify code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
}

/* 01 How it works */
.agent-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-flow__node {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--agent-line);
  border-radius: var(--ba-radius-card, .75rem);
  background: #fff;
}
.agent-flow__node + .agent-flow__node::before {
  content: "";
  position: absolute;
  top: 2.15rem;
  left: -2.5rem;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--agent-line), var(--agent-accent));
}
.agent-flow__node + .agent-flow__node::after {
  content: "";
  position: absolute;
  top: calc(2.15rem - 3px);
  left: -.45rem;
  border: 3.5px solid transparent;
  border-left: 5px solid var(--agent-accent);
}
.agent-flow__node--bridge { border-color: color-mix(in srgb, var(--agent-accent) 35%, #fff); background: var(--agent-accent-soft); }
.agent-flow__step {
  color: var(--agent-accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.agent-flow__node h3 { margin: .5rem 0 .375rem; color: var(--agent-ink); font-size: 1.125rem; line-height: 1.4; }
.agent-flow__node > p { margin: 0; color: var(--agent-muted); font-size: .875rem; line-height: 1.7; }
.agent-flow__agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: auto 0 0;
  padding: 1.25rem 0 0;
  list-style: none;
}
.agent-flow__agents li {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: var(--agent-ink);
  font-size: .8125rem;
  white-space: nowrap;
}
.agent-flow__agents img { width: 1.375rem; height: 1.375rem; border-radius: .3rem; object-fit: contain; flex: none; }
.agent-flow__sub { margin: 1.25rem 0 .5rem !important; color: var(--agent-ink) !important; font-size: .75rem !important; font-weight: 600; }
.agent-flow__tools { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.agent-flow__tools code {
  display: block;
  padding: .4rem .625rem;
  border-radius: .45rem;
  background: #fff;
  color: var(--agent-accent);
  overflow-wrap: anywhere;
}
.agent-flow__browser {
  margin-top: auto;
  padding-top: 1.25rem;
}
.agent-flow__browser img { display: block; width: auto; height: 1.75rem; }
.agent-flow__browser ul { display: flex; flex-wrap: wrap; gap: .375rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.agent-flow__browser li {
  padding: .25rem .625rem;
  border: 1px solid var(--agent-line);
  border-radius: 999px;
  color: var(--agent-muted);
  font-size: .75rem;
}

/* 02 Capabilities */
.agent-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.agent-cap {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--agent-line);
  border-radius: var(--ba-radius-card, .75rem);
  background: #fff;
}
.agent-cap__icon, .agent-control__icon, .agent-verify__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .6rem;
  background: var(--agent-accent-soft);
  color: var(--agent-accent);
}
.agent-cap__icon svg, .agent-control__icon svg, .agent-verify__icon svg { width: 1.25rem; height: 1.25rem; }
.agent-cap h3 { margin: 1rem 0 .375rem; color: var(--agent-ink); font-size: 1.0625rem; line-height: 1.4; }
.agent-cap p { margin: 0; color: var(--agent-muted); font-size: .875rem; line-height: 1.7; }
.agent-cap__methods { display: flex; flex-wrap: wrap; gap: .375rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; }
.agent-cap__methods code {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: .375rem;
  background: var(--agent-soft);
  color: #4b4f60;
}

/* Shared screenshot frame */
.agent-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--agent-line);
  border-radius: var(--ba-radius-stage, 1rem);
  background: var(--agent-soft);
}
.agent-shot img { display: block; width: 100%; height: auto; }

/* 03 Safety and control */
.agent-control__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.agent-control__copy .overview-heading { margin-bottom: 1.75rem; }
.agent-control__list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.agent-control__list li { display: flex; gap: .875rem; align-items: flex-start; }
.agent-control__list h3 { margin: .125rem 0 .25rem; color: var(--agent-ink); font-size: 1rem; line-height: 1.4; }
.agent-control__list p { margin: 0; color: var(--agent-muted); font-size: .875rem; line-height: 1.7; }

/* 04 Compatible assistants, connector setup and a copyable Skill prompt. */
/* The section already has --product-space above its heading. Subtract that
   padding so the eyebrow lands just below the fixed navigation. */
#install { scroll-margin-top: calc(6.75rem - var(--product-space)); }
.agent-install__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.agent-install__prompt, .agent-install__builtin {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--agent-line);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 48, 89, .025);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.agent-install__prompt::before, .agent-install__builtin::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: min(65%, 18rem);
  height: 16rem;
  border-bottom-right-radius: inherit;
  background-image: linear-gradient(#e9ebf1 1px, transparent 1px), linear-gradient(90deg, #e9ebf1 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(ellipse at bottom right, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at bottom right, #000, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.agent-install__prompt:focus-within, .agent-install__builtin:focus-within {
  border-color: #b5a3f5;
  box-shadow: 0 .75rem 2rem rgba(86, 58, 255, .1);
}
@media (hover: hover) and (pointer: fine) {
  .agent-install__prompt:hover, .agent-install__builtin:hover {
    transform: translateY(-4px);
    border-color: #b5a3f5;
    box-shadow: 0 .75rem 2rem rgba(86, 58, 255, .1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-install__prompt, .agent-install__builtin { transition: none; }
  .agent-install__prompt:hover, .agent-install__builtin:hover { transform: none; }
}
.agent-install__compat { min-height: 6.75rem; min-width: 0; margin: 0 0 1.25rem; padding: 1rem 0; border-top: 1px solid var(--agent-line); border-bottom: 1px solid var(--agent-line); }
.agent-install__clients { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem .625rem; margin: 0; padding: 0; list-style: none; }
.agent-page .agent-install__clients li { flex: 0 0 auto; display: grid; justify-items: center; align-content: start; gap: .5rem; min-width: 0; margin: 0; padding: 0; color: #6e7191; font-size: .6875rem; line-height: 1.4; text-align: center; }
.agent-install__clients li > span { white-space: nowrap; }
.agent-install__clients img { display: block; width: 2rem; height: 2rem; border-radius: .625rem; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px #e3e7ee; }
.agent-install__builtin-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.agent-install__builtin-brand strong { display: block; color: var(--agent-ink); font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.agent-install__builtin-brand span { display: block; margin-top: .25rem; color: var(--agent-muted); font-size: .6875rem; line-height: 1.5; }
.agent-install__builtin-brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.agent-install__builtin h3 { margin: 1rem 0; color: var(--agent-ink); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.4; letter-spacing: -.025em; }
.agent-install__chat-path { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: auto 0 0; padding-top: 1.25rem; color: #6b50dc; font-size: .875rem; line-height: 1.5; font-weight: 500; }
.agent-install__nowrap { white-space: nowrap; }
.agent-install__explanation { min-height: 3.6em; margin: 0 0 1.25rem; color: var(--agent-muted); font-size: .875rem; line-height: 1.8; text-wrap: pretty; }
.agent-install__guide-link { display: inline-flex; gap: .6rem; align-items: center; margin: 1.25rem 0 0; color: var(--agent-accent); font-size: .875rem; line-height: 1.5; font-weight: 500; text-decoration: none; }
.agent-install__guide-link:hover { text-decoration: underline; }
.agent-install__prompt { min-width: 0; }
.agent-install__prompt-heading { min-height: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.agent-option__tag { color: var(--agent-accent); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; }
.agent-install__channel { color: #8a859b; font-size: .6875rem; }
.agent-install__prompt h3 { margin: 1rem 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -.025em; line-height: 1.4; color: var(--agent-ink); }
.agent-install__note { min-height: 3.6em; margin: 1rem 0 0; font-size: .75rem; line-height: 1.8; color: #928d9f; }
.agent-install__prompt > .agent-install__guide-link { align-self: flex-start; margin-top: auto; padding-top: 1.25rem; }
.agent-install__other { grid-column: 1 / -1; padding: 1rem 1.25rem; border: 1px solid var(--agent-line); border-radius: .875rem; background: #faf9fd; }
.agent-install__other summary { color: #625c70; font-size: .8125rem; line-height: 1.5; font-weight: 500; cursor: pointer; }
.agent-install__other[open] summary { margin-bottom: .75rem; }
.agent-install__other summary:focus-visible { outline: 3px solid #b9adff; outline-offset: 4px; }
.agent-install__other p { margin: 0; color: var(--agent-muted); font-size: .8125rem; line-height: 1.8; }

.agent-code, .agent-chat-preview { display: flex; flex-direction: column; min-height: 14rem; overflow: hidden; border: 1px solid #e3e0ef; border-radius: 1rem; background: #fff; }
.agent-code pre {
  flex: 1;
  margin: 0;
  padding: 1.5rem;
  overflow-x: hidden;
  border: 0;
  background: transparent;
  color: #494156;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.85;
  white-space: normal;
  overflow-wrap: anywhere;
}
.agent-code__url { word-break: break-all; }
.agent-code code { font: inherit; color: inherit; background: none; }
.agent-code__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #eeecf3; background: #fcfbff; }
.agent-code__footer > span { color: #928a9e; font-size: .6875rem; line-height: 1.6; }
.agent-code__copy, .agent-install__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .6rem 1rem;
  border: 0;
  border-radius: .625rem;
  background: var(--agent-accent);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}
.agent-code__copy > svg, .agent-install__download > svg { display: block; flex: 0 0 1rem; width: 1rem; height: 1rem; }
.agent-code__copy:hover, .agent-install__download:hover { background: #4830dd; }
.agent-install__download { color: #fff; text-decoration: none; }
.agent-install__download:visited { color: #fff; }
.agent-install__split-actions { display: inline-flex; flex-shrink: 0; align-self: center; overflow: hidden; border-radius: .625rem; background: var(--agent-accent); }
.agent-install__split-actions > .agent-install__download, .agent-install__split-actions > .agent-code__copy { border-radius: 0; padding-inline: .75rem; white-space: nowrap; }
.agent-install__split-actions > .agent-code__copy { position: relative; }
.agent-install__split-actions > .agent-code__copy::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 1px; background: rgba(255, 255, 255, .4); }
.agent-install__split-actions:focus-within { outline: 3px solid #b9adff; outline-offset: 4px; }
.agent-code__copy:focus-visible, .agent-install__download:focus-visible, .agent-code pre:focus-visible, .agent-install__guide-link:focus-visible { outline: 3px solid #b9adff; outline-offset: 4px; }

.agent-chat-preview__body { flex: 1; padding: 1.25rem 1.5rem; }
.agent-chat-preview__label { display: block; margin-bottom: .75rem; color: var(--agent-muted); font-size: .6875rem; line-height: 1.5; }
.agent-chat-preview__task { margin: 0; padding: .75rem 1rem; border: 1px solid #eaecf2; border-radius: .75rem .75rem .25rem .75rem; background: #f8f9fb; color: #494156; font-size: .9375rem; line-height: 1.8; }
@media (min-width: 992px) {
  html:lang(en) .agent-install__prompt h3, html:lang(en) .agent-install__builtin h3 { min-height: 2.8em; }
  html:lang(en) .agent-install__explanation { min-height: 5.4em; }
  html:lang(en) .agent-code, html:lang(en) .agent-chat-preview { min-height: 16rem; }
}
/* Both cards share the same content tracks. Wrapping a logo label or a footer
   note must resize its partner row as well, including the inner button bar. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 992px) {
    .agent-install__grid { row-gap: 0; }
    .agent-install__prompt, .agent-install__builtin {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 8;
      row-gap: 0;
    }
    .agent-install__explanation, .agent-install__compat, .agent-install__note,
    html:lang(en) .agent-install__explanation,
    html:lang(en) .agent-install__prompt h3, html:lang(en) .agent-install__builtin h3 { min-height: 0; }
    .agent-code, .agent-chat-preview,
    html:lang(en) .agent-code, html:lang(en) .agent-chat-preview {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: 0;
      min-height: 0;
    }
    .agent-install__other { margin-top: 1.5rem; }
  }
}

@media (max-width: 991px) {
  .agent-flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .agent-flow__node + .agent-flow__node::before { top: -1.5rem; left: 2.15rem; width: 1px; height: 1.5rem; background: linear-gradient(180deg, var(--agent-line), var(--agent-accent)); }
  .agent-flow__node + .agent-flow__node::after { top: -.45rem; left: calc(2.15rem - 3px); border: 3.5px solid transparent; border-top: 5px solid var(--agent-accent); }
  .agent-flow__agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-control__inner, .agent-install__grid { grid-template-columns: 1fr; }
  .agent-install__prompt { min-width: 0; }
  .agent-install__explanation, .agent-install__note { min-height: 0; }
  .agent-code, .agent-chat-preview { min-height: 0; }
}
@media (max-width: 767px) {
  .agent-flow__agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-cap-grid { grid-template-columns: 1fr; }
  .agent-flow__node, .agent-cap { padding: 1.25rem; }
}

@media (max-width: 479px) {
  .agent-install__prompt, .agent-install__builtin { padding: 1.25rem; border-radius: 1rem; }
  .agent-install__grid { gap: 1rem; }
  .agent-install__clients { justify-content: space-around; }
  .agent-install__prompt-heading { flex-wrap: wrap; gap: .5rem; }
  .agent-code pre { padding: 1.25rem; }
  .agent-code__footer { align-items: flex-start; flex-direction: column; }
  .agent-code__copy, .agent-install__download { width: 100%; gap: .25rem; font-size: .75rem; }
  .agent-install__split-actions { align-self: stretch; width: 100%; }
  .agent-install__split-actions > .agent-code__copy, .agent-install__split-actions > .agent-install__download { flex: 1 1 auto; width: auto; min-width: 0; padding-inline: .25rem; }
}

/* Hero quick start: copy one prompt to an AI assistant (the full guide stays
   in the install section). Light card with a white prompt box, as in common
   CLI install pages. */
.agent-hero-prompt {
  width: min(100%, 42rem);
  margin: 1.75rem auto 0;
  padding: 1.5rem 1.75rem 1.25rem;
  border-radius: 1.25rem;
  background: #f4f4f8;
  text-align: center;
}
.overview-product-hero p.agent-hero-prompt__lead { margin: 0 0 1rem; color: #5f6475; font-size: .875rem; line-height: 1.7; text-wrap: pretty; }
.agent-hero-prompt__box {
  padding: .875rem 1.125rem 1rem;
  border-radius: .75rem;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(31, 35, 64, .05);
}
.agent-hero-prompt__label { display: block; margin-bottom: .375rem; color: #9a98a8; font-size: .75rem; }
.agent-hero-prompt__box pre {
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: #303446;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.7;
  white-space: pre-wrap;
}
.agent-hero-prompt__box pre:focus-visible { outline: 3px solid #b9adff; outline-offset: 4px; border-radius: .25rem; }
.agent-hero-prompt__box code { font: inherit; color: inherit; background: none; }
.agent-hero-prompt__copy { margin-top: 1rem; padding-inline: 1.5rem; border-radius: 999px; }
.overview-product-hero p.agent-hero-prompt__done { margin: 1rem 0 0; color: #6c7183; font-size: .8125rem; line-height: 1.7; }
.agent-hero-prompt__done > span[aria-hidden] { color: #3aa776; font-weight: 700; }
.agent-hero-prompt__done a { color: var(--agent-accent, #563aff); text-decoration: none; }
.agent-hero-prompt__done a:hover { text-decoration: underline; }

/* Supported AI agents, directly under the hero. */
.agent-hero-clients { padding: clamp(2.25rem, 4vw, 3rem) 1.25rem; background: #f8f9fb; }
.agent-hero-clients__inner { width: min(100%, 60rem); margin: 0 auto; text-align: center; }
.agent-hero-clients__title { margin: 0 0 1.5rem; color: #252838; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; }
.agent-hero-clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agent-hero-clients__list li { display: flex; flex-direction: column; align-items: center; gap: .625rem; margin: 0; color: #4a4f60; font-size: .8125rem; }
.agent-hero-clients__list img {
  width: 2.75rem;
  height: 2.75rem;
  padding: .5rem;
  box-sizing: border-box;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 35, 64, .08);
  object-fit: contain;
}
@media (max-width: 767px) {
  .agent-hero-prompt { padding: 1.25rem 1rem 1rem; }
  .agent-hero-clients__list { gap: 1rem 1.5rem; }
  .agent-hero-clients__list li { width: 5.5rem; }
}