/* ==========================================================================
   Products → Business AI agents (the agent suite)
   Light catalogue: hairline rules, domain groups, one plain sentence per agent.
   ========================================================================== */

.products .agents {
  --ag-ink: var(--ink, #0B1B33);
  --ag-ink-2: var(--ink-2, #3A4A63);
  --ag-ink-3: var(--ink-3, #5B6B84);
  --ag-line: var(--line, #DCE3EE);
  --ag-accent: var(--accent1, #2563EB);
  display: block;
  padding: 3rem 3rem 1rem;
  background: var(--surface, #fff);
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  font-family: var(--read, Inter, system-ui, sans-serif);
  color: var(--ag-ink);
}

/* ---- intro ---- */
.products .agents-head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 40rem;
  margin: 0 0 2.5rem;
}
.products .agents .agents-kicker {
  margin: 0;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ag-accent);
}
.products .agents .agents-title {
  margin: 0;
  font-family: inherit;
  font-style: normal;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ag-ink);
}
.products .agents .agents-lede {
  margin: 0;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ag-ink-2);
}

/* ---- domain groups: heading on the left, three agents on the right ---- */
.products .agents-group {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem 0 2rem;
  border-top: 1px solid var(--ag-line);
}
.products .agents .agents-domain {
  margin: 0;
  padding-top: .1rem;
  font-family: inherit;
  font-style: normal;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ag-ink);
}

.products .agents-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.25rem;
  margin: 0;
}
.products .agent { min-width: 0; }

.products .agents .agent-name {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ag-ink);
}
.products .agents .agent-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .9rem;
  border: 1px solid var(--ag-line);
  border-radius: 8px;
  color: var(--ag-ink-2);
}
.products .agents .agent-icon { display: block; width: 20px; height: 20px; }
.products .agents .agent-ar {
  display: inline-block;
  margin-inline-start: .35em;
  font-family: "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ag-ink-3);
  unicode-bidi: isolate;
}
.products .agents .agent-desc {
  margin: .35rem 0 0;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ag-ink-2);
  max-width: 34ch;
}

/* ---- tablet: heading above, agents stay in a row of three ---- */
@media (max-width: 1000px) {
  .products .agents { padding: 2.25rem 2rem .5rem; }
  .products .agents-group { grid-template-columns: 1fr; gap: 1.25rem; }
  .products .agents-list { gap: 0 1.75rem; }
}

/* ---- phone / narrow tablet: a plain list, icon beside the text ---- */
@media (max-width: 760px) {
  .products .agents { padding: 1.75rem 1.25rem .25rem; border-radius: 12px; }
  .products .agents-head { margin-bottom: 1.75rem; }
  .products .agents .agents-lede { font-size: 1rem; }
  .products .agents-group { gap: .25rem; padding: 1.5rem 0 1rem; }
  .products .agents-list { grid-template-columns: 1fr; }
  .products .agent {
    position: relative;
    padding: 1rem 0 1rem 3.25rem;
  }
  .products .agent + .agent { border-top: 1px solid var(--ag-line); }
  .products .agents .agent-mark { position: absolute; left: 0; top: 1rem; margin: 0; }
  .products .agents .agent-desc { max-width: none; }
}

/* Gemini 3D icons (owner's choice) */
.products .agents .agent-mark--img { width: 3.25rem; height: 3.25rem; border: 0; border-radius: 12px; overflow: hidden; background: #F1F5FB; }
.products .agents .agent-logo { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .products .agent { padding-left: 4.25rem; } }