/* ai-agent.html: the AI agent page, in the homepage's language (31 Oct 2026).
   Hero on the AI band (.ih.dark.ai-band) with the conversation and the settings card as the stage, larger than on the homepage,
   flanked by frosted cards with what happened in Boostapp; the owner's four abilities as conversations; the settings card open;
   the calendar it works in; three steps; the FAQ panel; the closing. Shared pieces come from site.css. */

/* ---------- Hero: the AI band, its glows placed for a taller section (the lime behind the stage, Claude's terracotta in the corner) ---------- */
.agh.ai-band::before {
  background: radial-gradient(30% 26% at 50% 70%, rgba(186, 253, 79, .24), transparent 72%), radial-gradient(30% 30% at 4% 98%, rgba(217, 119, 87, .42), transparent 70%),
    radial-gradient(24% 22% at 96% 3%, rgba(186, 253, 79, .12), transparent 70%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.6px) 0 0 / 26px 26px;
}
.agh .ih-copy > .label.co { margin-bottom: 22px; }
.agh .ih-title { max-width: 13em; }

/* The stage: the conversation and the settings in the middle, the membership it read and the class it moved on the sides.
   Under 1180px the two cards drop under the conversation, side by side; on phones, one under the other */
.ags { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 640px; margin: clamp(44px, 5vw, 72px) auto 0; text-align: start; }
.ags .ag { grid-column: 1 / -1; order: -1; margin-bottom: 16px; }
.ags .st-card { position: relative; align-self: start; }
.ags-mem { order: 1; }
@media (min-width: 1180px) {
  .ags { display: block; max-width: none; }
  .ags .ag { width: 600px; margin: 0 auto; }
  .ags .st-card { position: absolute; width: 232px; }
  .ags-mem { top: 70px; inset-inline-end: 0; }
  .ags-cal { top: 236px; inset-inline-start: 0; }
}
@media (max-width: 599px) { .ags { grid-template-columns: minmax(0, 1fr); } }

/* the conversation, larger than on the homepage */
.ags .ag-chat { padding: 18px 18px 26px; border-radius: 26px; }
.ags .ag-head b { font-size: 16.5px; }
.ags .ag-head small { font-size: 13.5px; }
.ags .ag-av { width: 44px; height: 44px; }
.ags .ag-av svg { width: 24px; height: 24px; }
.ags .ag-msgs { gap: 12px; }
.ags .ag-msgs .b { padding: 11px 15px; border-radius: 18px; font-size: 16.5px; }
.ags .ag-msgs .them { border-start-start-radius: 5px; }
.ags .ag-msgs .me { border-start-end-radius: 5px; }
.ags .ag-act { font-size: 13.5px; }
.ags .ag-link b { font-size: 15px; }
.ags .ag-link small { font-size: 13px; }
.ags .ag-link em { font-size: 13.5px; }
.ags .ag-set { padding: 18px 20px 20px; border-radius: 22px; }
.ags .ag-set-h b { font-size: 16px; }
.ags .ag-k { font-size: 13px; }
.ags .ag-docs li { height: 32px; font-size: 13.5px; }
.ags .ag-ins { font-size: 14.5px; }
@media (max-width: 599px) {
  .ags .ag-msgs .b { font-size: 15.5px; }
  .ags .ag-chat { padding: 14px 14px 22px; }
}

/* the membership it read: the punch card's ten entries, two left, about to end (the product's amber) */
.ags .st-card { padding: 16px 16px 17px; }
.st-card .agm-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.agm-who > i, .agc-who > i, .in-mem-who > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FCEDF2; color: #B0003C;
  font-size: 13px; font-weight: 700; font-style: normal; }
.agm-who b, .in-mem-who b { display: block; font-size: 15px; line-height: 1.3; }
.agm-who small, .in-mem-who small { display: block; font-size: 12.5px; line-height: 1.4; }
.st-card .agm-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.agm-dots i { height: 8px; border-radius: 4px; background: #DADADF; }
.agm-dots i.left { background: #2B7ECE; } /* the trainee app's blue for what's left */
.st-card .agm-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 14.5px; }
.agm-f em { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #FFF4DB; color: #8A5A08; font-size: 12px; font-weight: 700; font-style: normal; white-space: nowrap; }
.agm-f em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FFB020; }

/* the class it moved in the calendar: from 07:00 to 08:15, in the calendar's own pink */
.st-card .agc-who { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; font-size: 14px; color: var(--ink-2); }
.agc-who > i { width: 28px; height: 28px; font-size: 12px; }
.agc-who b { color: #000; }
.ags-cal .cl-c { height: 50px; }
.ags-cal .cl-c > b { font-size: 13px; }
.ags-cal .cl-m { font-size: 12px; }
.agc-from { opacity: .5; }
.agc-from > b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.agc-to-arrow { display: grid; place-items: center; height: 24px; color: var(--ink-2); }
.agc-to { box-shadow: inset 0 0 0 1.5px rgba(176, 0, 60, .55); }
.st-card .agc-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #1A7F4B; }

/* ---------- What it does: four abilities, each a short conversation ---------- */
.ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab { display: grid; grid-template-rows: auto 1fr; gap: 24px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: var(--paper-2); }
.ab-copy { display: grid; gap: 10px; align-content: start; }
.ab-copy p { max-width: 32em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.ab .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-chat { align-content: start; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 26px 50px -36px rgba(0, 0, 0, .35); }
.ab-chat.ag-msgs .b { font-size: 15.5px; }
.ab-chat .ag-act .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.ab-chat .ag-link > i .ic { width: 18px; height: 18px; }
.ab-src { display: flex; align-items: center; gap: 6px; justify-self: end; font-size: 13px; color: var(--ink-2); }
.ab-done { justify-self: center; margin-top: 2px; }
@media (max-width: 899px) { .ab-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .ab { border-radius: 22px; } .ab-chat { padding: 14px; } }

/* a line of description under a feature title, 18px like the site's descriptions */
.feat-lead { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- What it knows and how it talks: the settings card open, and how an instruction sounds ---------- */
.kn { position: relative; display: grid; }
.kn .ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kn-set { display: grid; gap: 12px; width: calc(100% - 44px); justify-self: start; padding: 22px 24px 26px; border-radius: 26px; background: #fff; color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 80px -44px rgba(0, 0, 0, .4); }
.kn-h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.kn-h > i:first-child { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #000; color: #fff; }
.kn-h > i:first-child .ic { width: 20px; height: 20px; }
.kn-h span { display: grid; min-width: 0; }
.kn-h b { font-size: 17px; font-weight: 800; }
.kn-h small { font-size: 13px; color: var(--ink-2); }
.kn-h small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: #25D366; vertical-align: 1px; }
.kn-h .toggle { flex: none; margin-inline-start: auto; }
.kn-k { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.kn-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kn-docs li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 58px; padding: 10px 12px; border-radius: 14px; background: #F4F4F6; }
.kn-docs li > i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--ink-2); }
.kn-docs b { font-size: 14.5px; line-height: 1.3; }
.kn-docs small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.kn-docs li.add { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); }
.kn-docs li.add > i { background: #F4F4F6; }
.kn-docs li.add b { grid-row: span 2; font-weight: 600; }
.kn-ins { padding: 14px 16px; border-radius: 14px; background: #F4F4F6; font-size: 15px; line-height: 1.75; color: #333; }
.kn-ins::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: #000; }
.kn-try { position: relative; z-index: 2; justify-self: end; width: min(340px, 78%); margin-top: -26px; padding: 14px 14px 16px; border-radius: 22px; background: #fff; color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 30px 60px -24px rgba(0, 0, 0, .45); }
.kn-try-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.kn-try .ag-av { width: 28px; height: 28px; }
.kn-try .ag-av svg { width: 16px; height: 16px; }
.kn-try .ag-msgs .b { font-size: 14.5px; }
@media (max-width: 599px) {
  .kn-set { width: 100%; padding: 18px 16px 20px; border-radius: 22px; }
  .kn-docs { grid-template-columns: minmax(0, 1fr); }
  .kn-try { width: 88%; }
}

/* ---------- It works inside Boostapp: the calendar with the class it moved, and the membership it reads ---------- */
.in-stage { position: relative; isolation: isolate; container: ins / inline-size; height: 520px; overflow: hidden; border-radius: 28px;
  background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.in-win { top: 34px; bottom: -40px; inset-inline-start: 34px; inset-inline-end: -70px; }
.in-win .win-main { gap: 14px; }
/* site.css hides .pd-nav inside any container under 760px (an unscoped rule for the homepage's products window); the sidebar stays here */
.in-win .pd-nav { display: flex; }
.in-pill { display: grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; }
.in-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -4px -8px 0; }
.in-hit { box-shadow: inset 0 0 0 1.5px #E6004F; }
.in-toast { position: absolute; z-index: 3; top: 18px; inset-inline-end: 22px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: #0B0B0C; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); }
.in-toast .ic { width: 17px; height: 17px; fill: none; stroke: #18E588; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-mem { bottom: 22px; inset-inline-end: 22px; width: 264px; }
.in-mem-who { display: flex; align-items: center; gap: 10px; }
.in-mem-who small { color: #1A7F4B; font-weight: 600; }
.st-card .in-mem-k { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.in-mem-k b { color: #000; }
.in-mem.st-card .agm-dots { margin-top: 8px; }
@container ins (max-width: 479px) {
  .in-win { inset-inline-start: 16px; inset-inline-end: -40px; top: 70px; }
  .in-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-cols .cl-col:first-child { display: none; } /* tomorrow (29) next to the sidebar, with the class that moved */
  .in-toast { top: 16px; inset-inline-end: 16px; inset-inline-start: 16px; justify-content: center; font-size: 13px; }
  .in-mem { bottom: 16px; inset-inline-end: 16px; width: calc(100% - 32px); }
}

/* ---------- How to start: three steps stay in a row on tablets ---------- */
@media (min-width: 640px) and (max-width: 899px) { .steps2.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps2.s3 li { padding: 20px 18px 22px; } }
.ag-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; }
.ag-more p { font-size: 18px; color: var(--ink-2); }

/* a Hebrew prefix and the Latin word after it stay on one line */
.nw { white-space: nowrap; }