/* ============================================================
   AI Agents page — scoped styles (does not affect other pages)
   Reuses theme tokens from page.css (:root variables)
   ============================================================ */

/* --sweep: green-arc length (0–1) for the Real-time sync gauge. Registered as a
   typed <number> so the conic-gradient + knob/cap transforms update cleanly when
   JS animates it. Browsers without @property still work (value jumps, no tween). */
@property --sweep {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.57;
}

/* TESTING: html/body overflow-x guard temporarily removed so the real
   horizontal-overflow source is visible. Re-add before shipping:
   html, body { overflow-x: hidden; max-width: 100%; } */

.ai-agents-hero {
  padding-bottom: 2.5rem;
}
/* Figma hero background: linear-gradient(180deg,#FAFFEE 0%, #EAFFFA 100%) */
.ai-agents-hero.avento-hero::before {
  background: linear-gradient(180deg, #faffee 0%, #eafffa 100%);
}

/* ---- Hero green gradient text — Figma: 90deg #137861 0%, #197859 52.4%, #3C9A50 100% (static) ---- */
.ai-hero-head h1 .green {
  background: linear-gradient(90deg, #137861 0%, #197859 52.4%, #3c9a50 100%);
  background-size: auto;   /* override shared 200% animated gradient */
  animation: none;         /* Figma gradient is static */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.ai-hero-content {
  padding-top: 60px;
}

/* Figma Frame1618871312: tag → heading → body, 20px gap between each */
/* tag pill: 470×45, padding 12px 30px, white, 1px #E6E6E6, radius 500px */
.ai-agents-hero .thunder-tag {
  padding: 0.75rem 1.875rem;   /* 12px 30px */
  margin-bottom: 1.25rem;      /* 20px gap to heading (Figma) */
}
/* tag text: Roboto 18px/21px, weight 400, #141B34 */
.ai-agents-hero .thunder-tag span {
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-18); /* 18px */
  line-height: 1.3125rem;            /* 21px */
}
/* tag dot: 8×8 #141B34 */
.ai-agents-hero .thunder-tag .dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--av-color-text);
  border-radius: 50%;
  flex: 0 0 auto;
}

.ai-hero-head {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: auto;
  margin-bottom: 1.25rem;  /* 20px gap to body (Figma) */
}
/* heading: "Meet Your Team of" + "AI Agents", 46px/54px weight 600, 5px gap */
.ai-hero-head h1 {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 2.875rem;       /* 46px */
  line-height: 3.375rem;     /* 54px */
  color: var(--av-color-text);
  margin-bottom: 0;
}
.ai-hero-head h1 .green {
  margin-left: 0.3125rem;    /* 5px gap between the two runs (Figma) */
}
/* body: 783px, Roboto 20px/36px weight 400, centered #141B34 */
.ai-hero-text {
  max-width: 48.9375rem;     /* 783px */
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-20); /* 20px */
  line-height: 2.25rem;      /* 36px */
  margin-bottom: 2.5rem;
}

/* ============================================================
   Hero stage — EXACT Figma layout (1420×658 design box).
   Every child is absolutely positioned with left/top/width as a
   percentage of the stage, computed from Figma coords minus the
   250px content-column offset. aspect-ratio keeps top% honest.
   ============================================================ */
.ai-hero-stage {
  position: relative;
  width: 100%;
  max-width: 88.75rem;        /* 1420px */
  margin: 0.5rem auto 0;
  aspect-ratio: 1420 / 658;   /* makes top% map to the design height */
}

/* ---- green gradient disc: 4 nested circles (564×564 @ 428,94) ---- */
.ai-hero-disc {
  position: absolute;
  left: 30.14%;               /* 428/1420 */
  top: 14.29%;                /* 94/658 */
  width: 39.72%;              /* 564/1420 */
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.ai-hero-disc span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1;
  background: linear-gradient(90deg, #137861 0%, #197859 52.4%, #3c9a50 100%);
}
.ai-hero-disc .d1 { width: 77.48%; opacity: 1; }    /* 436.97/564 */
.ai-hero-disc .d2 { width: 84.22%; opacity: 0.3; }  /* 475.08/564 */
.ai-hero-disc .d3 { width: 91.89%; opacity: 0.15; } /* 518.27/564 */
.ai-hero-disc .d4 { width: 100%;   opacity: 0.1; }  /* 564/564 */

/* ---- robot: 272×192 @ 574,0 (top of stage, above the disc) ---- */
/* wrapper carries the layout position + the cursor-tracking tilt */
.ai-hero-robot-wrap {
  position: absolute;
  left: 40.42%;               /* 574/1420 */
  top: 0;
  width: 19.15%;              /* 272/1420 */
  z-index: 1;
  transform-origin: 50% 80%;  /* pivot near the body, so it "leans" */
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.ai-hero-robot {
  display: block;
  width: 100%;
  height: auto;
}
.blink { animation: aiBlink 3.5s ease-in-out infinite; }
@keyframes aiBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---- AI Super Agent chat card: 563×388 @ 429,192 ---- */
.ai-chat-card {
  position: absolute;
  left: 30.21%;               /* 429/1420 */
  top: 29.18%;                /* 192/658 */
  width: 39.65%;              /* 563/1420 */
  z-index: 2;
  background: #ffffff;
  border-radius: 0.625rem;    /* 10px */
  box-shadow: 0 1.5625rem 1.5625rem rgba(0, 0, 0, 0.1); /* 0 25px 25px */
  overflow: hidden;
}
/* header bar: 80px, padding 20px 40px, #FBF9F7 */
.ai-chat-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 2.5rem;
  background: #fbf9f7;
}
.ai-chat-logo {
  width: 2.5rem;              /* 40px */
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ai-chat-logo img { width: 100%; height: 100%; object-fit: contain; }
/* title: Roboto 600 22px/26px #000 */
.ai-chat-title {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 1.375rem;        /* 22px */
  line-height: 1.625rem;      /* 26px */
  color: #000000;
  margin-right: auto;
}
/* time pill: white, 1px #E6E6E6, radius 500px, padding 12px 20px, 14px #141B34 */
.ai-chat-time {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-14);
  color: var(--av-color-text);
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 500px;
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}
/* body: fixed viewport window showing the latest ~3 messages. The inner track
   holds all bubbles and is scrolled up smoothly (transform) so messages glide
   instead of jumping. */
.ai-chat-body {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  height: 17.5rem;            /* ~3 messages tall */
  overflow: hidden;
}
/* the scrolling track — bottom-anchored, holds every bubble */
.ai-chat-track {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* bubbles: rounded corners, soft shadow, text 14px #555 (Figma) */
.ai-bubble {
  font-family: Roboto, sans-serif;
  font-size: var(--av-font-size-14);
  line-height: 1.45;
  color: #555555;
  padding: 0.875rem 1.25rem;
  border-radius: 0.625rem;     /* 10px rounded */
  box-shadow: 0 4px 14px rgba(20, 27, 52, 0.06);
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.ai-bubble-in   { background: #f6f6f6; margin-right: auto; }
.ai-bubble-agent{ background: #e8f3ee; color: #2c3445; margin-right: auto; }
.ai-bubble-out  { background: #f6f6f6; margin-left: auto; text-align: right; }

/* a fresh bubble fades in; a scrolled-off bubble fades out */
.ai-bubble-enter { opacity: 0; }
.ai-bubble-dim   { opacity: 0; }

/* rich agent cards (confirmation / done): mint bg + green left accent bar */
.ai-bubble-rich,
.ai-bubble-agent:has(.ai-rich) {
  background: #e8f3ee;
  border-left: 4px solid #157860;
  border-radius: 0 0.625rem 0.625rem 0;
  padding: 1rem 1.125rem;
  max-width: 88%;
}
.ai-rich { display: flex; flex-direction: column; gap: 0.625rem; }
.ai-rich-line { color: #3a4256; }
.ai-rich-line b { color: #157860; font-weight: var(--av-font-weight-600); }
.ai-rich-note {
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  color: #555555;
  line-height: 1.5;
}
.ai-rich-note b { color: #141b34; }
.ai-rich-actions { display: flex; gap: 0.625rem; margin-top: 0.125rem; flex-wrap: wrap; }
.ai-rich-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 0.5rem;
  font-weight: var(--av-font-weight-500);
  color: #157860;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
/* the simulated click: button presses in, then turns solid green */
.ai-rich-btn.is-pressed { transform: scale(0.94); }
.ai-rich-btn.is-clicked {
  background: #157860;
  border-color: #157860;
  color: #ffffff;
}

/* fake cursor that moves to and clicks the "Yes, Create" button */
.ai-chat-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}
.ai-chat-cursor svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.ai-chat-cursor.is-tapping { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.8); }
.ai-rich-done {
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  color: #555555;
  line-height: 1.6;
}
.ai-rich-done b { color: #141b34; }

/* ---- 50k+ users badge: 203×119 @ 90,104 ---- */
.ai-users-card {
  position: absolute;
  left: 6.34%;                /* 90/1420 */
  top: 15.81%;                /* 104/658 */
  width: 14.3%;               /* 203/1420 */
  z-index: 3;
  background: #ffffff;
  border-radius: 0.625rem;    /* 10px */
  box-shadow: 0 1.5625rem 1.5625rem rgba(0, 0, 0, 0.1);
  padding: 1.25rem;           /* 20px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem;             /* 15px */
}
.ai-users-avatars { display: flex; }
.ai-users-avatars img {
  width: 2.8125rem;           /* 45px */
  height: 2.8125rem;
  border-radius: 50%;
  border: 3px solid #fbf9f7;
  object-fit: cover;
  margin-left: -0.9375rem;    /* overlap */
}
.ai-users-avatars img:first-child { margin-left: 0; }
.ai-users-label {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);
  line-height: 1.1875rem;     /* 19px */
  color: #000000;
  white-space: nowrap;
}

/* ---- Try Saying card: 319×281 @ 1132,31 ---- */
.ai-try-card {
  position: absolute;
  left: 79.72%;               /* 1132/1420 */
  top: 4.71%;                 /* 31/658 */
  width: 22.46%;              /* 319/1420 */
  z-index: 3;
  background: #ffffff;
  border-radius: 0.625rem;    /* 10px */
  box-shadow: 0 1.5625rem 1.5625rem rgba(0, 0, 0, 0.1);
  padding: 1.25rem 0 1.25rem 1.25rem; /* 20px 0 20px 20px */
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;             /* 15px */
}
/* title: Roboto 600 14px/16px #000 */
.ai-try-title {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: var(--av-font-size-14);
  line-height: 1rem;
  color: #000000;
}
.ai-try-item {
  display: flex;
  align-items: center;
  gap: 0.9375rem;             /* 15px */
}
/* check: 25px gradient circle with white tick */
.ai-try-check {
  flex: 0 0 auto;
  width: 1.5625rem;           /* 25px */
  height: 1.5625rem;
  border-radius: 50%;
  background: linear-gradient(90deg, #137861 0%, #197859 52.4%, #3c9a50 100%);
  position: relative;
}
.ai-try-check::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 0.375rem;
  height: 0.625rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
/* item text: Roboto 14px/25px #555 */
.ai-try-text {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-14);
  line-height: 1.5625rem;     /* 25px */
  color: #555555;
}
/* divider line: 2px #F6F6F6 */
.ai-try-line {
  display: block;
  height: 0;
  border-top: 2px solid #f6f6f6;
  width: 87.5%;               /* 279/319 */
}

/* ---- Connectors: 138×100 vectors ---- */
.ai-conn {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
/* left vector @ 294,131 */
.ai-conn-left {
  left: 20.7%;                /* 294/1420 */
  top: 19.91%;                /* 131/658 */
  width: 9.72%;               /* 138/1420 */
  height: auto;
}
/* right vector @ 993,131 (mirrored in Figma; the asset is already the
   correct right-side shape, so no flip needed) */
.ai-conn-right {
  left: 69.93%;               /* 993/1420 */
  top: 19.91%;                /* 131/658 */
  width: 9.72%;
  height: auto;
}

/* ---------------------- Trusted by (Figma "logos" band, 158px) ----------- */
.ai-trusted {
  padding: 3.125rem 0 0;        /* title sits ~50px below the section above */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Figma 1px rgba(0,0,0,.1) */
}
/* title: Roboto 600 16px / 22px (140%) #141B34, centred */
.ai-trusted-title {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: var(--av-font-size-16); /* 16px */
  line-height: 1.375rem;             /* 22px = 140% */
  color: var(--av-color-text);
  margin-bottom: 1.875rem;           /* ~30px gap to the logos (Figma) */
}
.ai-trusted .carousel-container {
  margin-bottom: 3.125rem;           /* breathing room before the bottom rule */
}
/* Figma: logos centred, 70px gap (35px each side), 30px tall, grayscale */
.ai-trusted .ccard {
  margin: 0 2.1875rem;               /* 35px each side ≈ 70px gap */
}
.ai-trusted .ccard img {
  height: 1.875rem;                  /* 30px per Figma */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
}

/* ---------------------- Stop chasing -------------------- */
.ai-stop-section {
  position: relative;
  padding: 5rem 0;
  margin-bottom: 1.25rem;
}
.ai-stop-section .features-head {
  margin-bottom: 3.75rem;   /* 60px header→comparison gap (Figma) */
  font-weight: var(--av-font-weight-600);
  line-height: 3.0625rem;   /* 49px (Figma 42px/49px) */
}
/* Figma tag pills on this page use #F6F6F6 bg, no border */
.ai-stop-section .thunder-tag,
.ai-human-section .thunder-tag {
  background: #f6f6f6;
  border: none;
}
/* Figma Frame2147225000: row, space-between, 21px gap, 1419px wide.
   Two 579px columns each centred in their space, vertical divider between. */
.ai-compare {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.3125rem; /* 21px */
  width: 100%;
  max-width: 88.6875rem; /* 1419px */
  margin: 0 auto;
}
.ai-compare-col {
  width: 36.1875rem; /* 579px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
}
/* cons aligned to the right edge (toward center divider) */
.ai-compare-cons {
  align-items: flex-end;
}
.ai-compare-pros {
  align-items: flex-start;
}
.ai-compare-item {
  display: flex;
  align-items: center;
  gap: 0.9375rem; /* 15px */
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);
  line-height: 2rem; /* 32px */
  color: var(--av-color-text);
}
.ai-compare-text { white-space: nowrap; }

/* center vertical divider — 1px, fading at both ends */
.ai-compare-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 47.79%, #ffffff 100%);
  flex: 0 0 auto;
}

/* per-row horizontal fade lines (460px in Figma) */
.ai-compare-line {
  display: block;
  width: 28.75rem; /* 460px */
  max-width: 100%;
  height: 1px;
  align-self: flex-end;
  background: linear-gradient(90deg, #ffffff 0%, #e6e6e6 70%);
}
/* pros side: fade mirrored — Figma: 90deg #E6E6E6 70%, #FFF 100% */
.ai-compare-line-rev {
  align-self: flex-start;
  background: linear-gradient(90deg, #e6e6e6 70%, #ffffff 100%);
}

.ai-mark {
  flex: 0 0 auto;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* CSS-drawn check (green) */
.ai-mark-check::after {
  content: "";
  width: 0.4375rem;
  height: 0.75rem;
  border: solid var(--av-color-primary);
  border-width: 0 0.1875rem 0.1875rem 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* CSS-drawn cross — Figma red #FF5959 */
.ai-mark-cross::before,
.ai-mark-cross::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 0.125rem;
  background: #ff5959;
  border-radius: 1px;
}
.ai-mark-cross::before { transform: rotate(45deg); }
.ai-mark-cross::after { transform: rotate(-45deg); }

/* ============================================================
   Human-Level AI Agents — EXACT Figma layout (1420×724 stage).
   Full-width gradient band; inner stage holds absolute children
   positioned by % of the design box (Figma coords − 250px col).
   ============================================================ */
.ai-human-section {
  position: relative;
  width: 100%;
  /* Figma band bg: linear-gradient(180deg,#FAFFEE,#EAFFFA) with a white
     fade at the bottom 30% */
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 70%, #ffffff 100%),
    linear-gradient(180deg, #faffee 0%, #eafffa 100%);
  overflow: hidden;
}
.ai-human-stage {
  position: relative;
  width: 100%;
  max-width: 88.75rem;        /* 1420px */
  margin: 0 auto;
  aspect-ratio: 1420 / 724;
}

/* ---- connector vectors ---- */
.ai-hv { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.ai-hv-left  { left: 9.72%;  top: 53.59%; width: 24.08%; }  /* 342 @ 138,388 */
.ai-hv-rtop  { left: 64.79%; top: 19.89%; width: 26.2%;  }  /* 372 @ 920,144 */
.ai-hv-rblow { left: 66.2%;  top: 53.87%; width: 22.68%; }  /* 322 @ 940,390 */

/* ---- Center: disc + robot ---- */
.ai-human-center { position: static; }
/* green concentric disc: 4 nested circles 281/325/375/425, op 1/.3/.15/.1 */
.ai-human-disc {
  position: absolute;
  left: 35.07%;               /* 498/1420 (Ellipse2025 @748 → −250) */
  top: 13.81%;                /* 100/724 */
  width: 29.93%;              /* 425/1420 */
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}
.ai-human-disc span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1;
  background: linear-gradient(90deg, #137861 0%, #197859 52.4%, #3c9a50 100%);
}
.ai-human-disc .hd1 { width: 66.12%; opacity: 1; }    /* 281/425 (solid core) */
.ai-human-disc .hd2 { width: 76.47%; opacity: 0.3; }  /* 325/425 */
.ai-human-disc .hd3 { width: 88.24%; opacity: 0.15; } /* 375/425 */
.ai-human-disc .hd4 { width: 100%;   opacity: 0.1; }  /* 425/425 */
.ai-human-robot {
  position: absolute;
  left: 32.39%;               /* 460/1420 */
  top: 27.76%;                /* 201/724 */
  width: 35.21%;              /* 500/1420 */
  height: auto;
  z-index: 2;
}

/* ---- Left column ---- */
.ai-human-left {
  position: absolute;
  left: 0;
  top: 15.33%;                /* 111/724 */
  width: 32.39%;              /* 460/1420 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5625rem;             /* 25px */
}
/* tag pill: 340×43 white border #E6E6E6 radius 500px */
.ai-human-tagpill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1.875rem; /* 11px 30px ≈ 43px tall */
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 500px;
}
.ai-human-tagpill .dot {
  width: 0.5rem; height: 0.5rem;
  background: var(--av-color-text);
  border-radius: 50%;
  flex: 0 0 auto;
}
.ai-human-tagpill span:last-child {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);
  line-height: 1.1875rem;
  color: var(--av-color-text);
  white-space: nowrap;
}
/* heading: Roboto 600 32px/50px */
.ai-human-head {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 2rem;            /* 32px */
  line-height: 3.125rem;      /* 50px */
  color: var(--av-color-text);
  margin: 0;
  max-width: 26.125rem;       /* 418px */
}
/* copy: Roboto 20px/36px */
.ai-human-copy {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-20);
  line-height: 2.25rem;       /* 36px */
  color: var(--av-color-text);
  margin: 0;
  max-width: 28.5625rem;      /* 457px */
}
/* group label: Roboto 600 18px/21px */
.ai-human-grouplabel {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: var(--av-font-size-18);
  line-height: 1.3125rem;
  color: var(--av-color-text);
}
/* pills: white, 1px #E6E6E6, radius 500px, padding 10px 20px, gap 10px */
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;              /* 10px */
  padding: 0.625rem 1.25rem;  /* 10px 20px */
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 500px;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);
  line-height: 1.1875rem;
  color: var(--av-color-text);
  white-space: nowrap;
}
.ai-pill img { width: 1rem; height: 1rem; flex: 0 0 auto; } /* 16px plus icon */

/* ---- Right column ---- */
.ai-human-right {
  position: absolute;
  left: 67.61%;               /* 960/1420 */
  top: 18.92%;                /* 137/724 */
  width: 32.39%;              /* 460/1420 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5625rem;             /* 25px */
}

/* ============================================================
   AI Agent Features — Figma Frame 2147225071 (top 2862, 1420 wide)
   ============================================================ */
.ai-features-section {
  position: relative;
  padding: 5rem 0 6.25rem;
}
/* header: tag → title, 60px gap (Figma column gap) */
.ai-features-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.75rem;     /* 60px gap to the grid */
}
/* tag pill on this page uses #FBF9F7 bg, no border */
.ai-features-tag {
  background: #fbf9f7;
  border: none;
  margin: 0 0 1.5625rem 0;    /* 25px tag→title (Figma: title at top 70, tag 45) */
}
.ai-features-title {
  margin: 0;
  font-weight: var(--av-font-weight-600);
  line-height: 3.0625rem;     /* 49px */
}

/* grid: 4 columns, 20px gaps, 1420 wide; cards 340×254 */
.ai-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;               /* 20px */
  max-width: 88.75rem;        /* 1420px */
  margin: 0 auto;
}
/* card: #FBF9F7, radius 10px, padding 30px, internal gap 15px */
.ai-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;             /* 15px */
  padding: 1.875rem;          /* 30px */
  min-height: 15.875rem;      /* 254px */
  background: #fbf9f7;
  border-radius: 0.625rem;    /* 10px */
  box-shadow: 0 0 0 #000000;  /* no bar by default; animates on hover */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* hover: black bottom bar + subtle lift (applies to every card) */
.ai-feature-card:hover {
  box-shadow: 0 4px 0 #000000;
  transform: translateY(-2px);
}
/* icon: 52×52 */
.ai-feature-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ai-feature-icon img { width: 100%; height: 100%; object-fit: contain; }
/* title: Roboto 500 24px/28px, letter-spacing -0.32px */
.ai-feature-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: 1.5rem;          /* 24px */
  line-height: 1.75rem;       /* 28px */
  letter-spacing: -0.32px;
  color: var(--av-color-text);
}
/* body: Roboto 16px/28px */
.ai-feature-desc {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);
  line-height: 1.75rem;       /* 28px */
  color: var(--av-color-text);
}

/* ============================================================
   Super Agents Stats — Figma Group 2147225004 (1420×450 card)
   ============================================================ */
.ai-stats-section {
  position: relative;
  padding: 1.25rem 0 3.75rem;
}
.ai-stats-card {
  position: relative;
  width: 100%;
  max-width: 88.75rem;        /* 1420px */
  margin: 0 auto;
  aspect-ratio: 1420 / 450;
  border-radius: 0.625rem;    /* 10px */
  overflow: hidden;
  background: linear-gradient(180deg, #faffee 0%, #eafffa 100%);
}
/* faint vertical grid lines — Figma "Lines": vertical dashed lines, 7.09px
   wide on a ~69px pitch (62px gap), multiply blend at 20%. Built so the line
   thickness stays crisp regardless of card width. The thin dashed line image
   (6th-section-lines.png, 1×448) is tiled vertically for the dash pattern and
   placed at 69px horizontal intervals via the repeating-linear gradient mask. */
/* Figma "Lines": a centred row of vertical dashed lines, 62px gap, 20% opacity,
   multiply blend. Each line animates independently (alternating up/down). */
.ai-stats-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 62px;                  /* Figma gap */
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
  overflow: hidden;
}
/* each vertical dashed line — taller than the card so the drift never reveals
   an edge; the dash pattern is a repeating gradient down its length */
.ai-stats-line {
  flex: 0 0 auto;
  width: 1px;                 /* crisp hairline (Figma line is ~7px box, 1px stroke) */
  height: 140%;               /* overscan top & bottom for the drift */
  background-image: repeating-linear-gradient(
    180deg, #157860 0 8px, transparent 8px 16px
  );
  will-change: transform;
}
/* alternating directions; per-line delay via --d for a natural wave */
.ai-stats-line.up   { animation: aiLineUp   5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ai-stats-line.down { animation: aiLineDown 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes aiLineUp {
  0%, 100% { transform: translateY(-6%); }
  50%      { transform: translateY(6%); }
}
@keyframes aiLineDown {
  0%, 100% { transform: translateY(6%); }
  50%      { transform: translateY(-6%); }
}
/* honour reduced-motion: hold the lines still */
@media (prefers-reduced-motion: reduce) {
  .ai-stats-line { animation: none; }
}
/* separate robot images at the card edges (Figma: 329×420 / 339×420) */
.ai-stats-robot {
  position: absolute;
  top: 6.67%;                 /* 30/450 */
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ai-stats-robot-left  { left: 0;  width: 23.17%; }  /* 329/1420 */
.ai-stats-robot-right { right: 0; width: 23.87%; }  /* 339/1420 */
/* bottom white fade — Figma Rectangle 31291: 120px, opacity .85 */
.ai-stats-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26.67%;             /* 120/450 */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%);
  opacity: 0.85;
  border-radius: 0 0 0.625rem 0.625rem;
  z-index: 1;
  pointer-events: none;
}
/* centred content: number → sub (gap 10) then button (gap 20) */
.ai-stats-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;               /* 20px */
  text-align: center;
}
.ai-stats-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;              /* 10px */
}
/* number: Roboto 600 100px/100px */
.ai-stats-number {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 6.25rem;         /* 100px */
  line-height: 6.25rem;       /* 100px */
  color: var(--av-color-text);
  white-space: nowrap;
}
/* sub: Roboto 20px/36px */
.ai-stats-sub {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-20);
  line-height: 2.25rem;       /* 36px */
  color: var(--av-color-text);
}
/* button: 194×44, #141B34, radius 500px, text 14px/500 #FFF */
.ai-stats-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;            /* 44px */
  padding: 0 1.5rem;
  background: var(--av-color-text);
  border-radius: 500px;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-14);
  line-height: 1rem;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.ai-stats-btn:hover { opacity: 0.9; color: #ffffff; }

/* ============================================================
   Next-Generation Agentic Platform — Figma top 4493 (1420 wide)
   ============================================================ */
.ai-platform-section {
  position: relative;
  padding: 3.75rem 0 6.25rem;
}
/* header: title block (left) + lead paragraph (right), space-between */
.ai-platform-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5625rem;            /* 25px */
  max-width: 88.75rem;       /* 1420px */
  margin: 0 auto 1.75rem;
}
.ai-platform-headleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5625rem;            /* 25px */
}
/* tag pill #FFFFFF border #E6E6E6 (Technology) */
.ai-platform-tag {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  margin: 0;
}
.ai-platform-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 2rem;           /* 32px */
  line-height: 3.125rem;     /* 50px */
  color: var(--av-color-text);
}
.ai-platform-lead {
  margin: 0;
  max-width: 37.0625rem;     /* 593px */
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-20);
  line-height: 2.25rem;      /* 36px */
  text-align: right;
  color: var(--av-color-text);
}

/* two panels: 961 + 460, sharing a 1px border */
.ai-platform-grid {
  display: grid;
  grid-template-columns: minmax(0, 961fr) minmax(0, 460fr);
  max-width: 88.75rem;       /* 1420px */
  margin: 0 auto;
}
.ai-analytics-panel,
.ai-performers-panel {
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
.ai-analytics-panel {
  border-radius: 0.625rem 0 0 0.625rem;
  border-right: none;
  padding: 1.875rem;         /* 30px */
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
.ai-performers-panel {
  border-radius: 0 0.625rem 0.625rem 0;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;              /* 20px */
}

/* ---- Left panel ---- */
.ai-analytics-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
}
.ai-analytics-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;              /* 20px */
  max-width: 25.1875rem;     /* 403px */
}
.ai-analytics-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: 1.5rem;         /* 24px */
  line-height: 1.75rem;
  letter-spacing: -0.32px;
  color: var(--av-color-text);
}
.ai-analytics-desc {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: var(--av-font-size-16);
  line-height: 1.75rem;      /* 28px */
  color: var(--av-color-text);
}
/* Get Started button: 142×44 #141B34 radius 500px */
.ai-analytics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1.5rem;
  background: var(--av-color-text);
  border-radius: 500px;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-14);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.ai-analytics-btn:hover { opacity: 0.9; color: #ffffff; }
/* 42% block, right-aligned */
.ai-analytics-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  text-align: right;
  flex: 0 0 auto;
}
.ai-analytics-percent {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: 9.375rem;       /* 150px */
  line-height: 11rem;        /* 176px */
  letter-spacing: -0.32px;
  color: var(--av-color-text);
}
.ai-analytics-percent-label {
  font-family: Roboto, sans-serif;
  font-size: 1.5rem;         /* 24px */
  line-height: 1.75rem;
  color: var(--av-color-text);
}
/* progress bars: 16 bars (38×51), 15px gap. Green ones grow in sequentially. */
.ai-analytics-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.9375rem;            /* 15px */
  height: 3.1875rem;        /* 51px */
}
.ai-bar {
  flex: 1 1 0;
  min-width: 0.5rem;         /* never collapse to a thin line */
  height: 100%;
  border-radius: 2px;
}
.ai-bar-fill {
  background: linear-gradient(90deg, #137861 0%, #197859 52.4%, #3c9a50 100%);
}
.ai-bar-empty {
  background: #f6f6f6;
  border: 1px solid #e6e6e6;
}
/* animated state: green bars start collapsed (height 0) then grow, staggered */
.ai-platform-section.is-animated .ai-bar-fill {
  transform-origin: bottom;
  animation: aiBarFill 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--bd, 0s);
}
@keyframes aiBarFill {
  0%   { transform: scaleY(0); opacity: 0.4; }
  100% { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-platform-section.is-animated .ai-bar-fill { animation: none; }
}
.ai-analytics-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
}
.ai-analytics-foot-title {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: 1.5rem;         /* 24px */
  line-height: 1.75rem;
  letter-spacing: -0.32px;
  color: var(--av-color-text);
}
.ai-analytics-foot-sub {
  font-family: Roboto, sans-serif;
  font-size: var(--av-font-size-16);
  line-height: 1.75rem;
  color: var(--av-color-text);
}

/* ---- Right panel: Top Performers ---- */
.ai-performers-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-600);
  font-size: 1.5rem;         /* 24px */
  line-height: 1.75rem;
  color: var(--av-color-text);
}
.ai-performers-list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;            /* 15px */
}
.ai-performer {
  display: flex;
  align-items: center;
  gap: 1.25rem;              /* 20px */
  border-radius: 0.625rem;
  transition: background 0.25s ease, transform 0.25s ease;
}
/* hover: subtle tint + nudge, avatar scales up (ongoing interaction) */
.ai-performer:hover {
  background: #f7faf8;
  transform: translateX(4px);
}
.ai-performer:hover .ai-performer-avatar {
  transform: scale(1.08);
}
.ai-performer-avatar { transition: transform 0.25s ease; }

/* entry cascade: rows slide in from the right, staggered, when scrolled in */
.ai-platform-section.is-animated .ai-performer {
  animation: aiRowIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--rd, 0s);
}
@keyframes aiRowIn {
  0%   { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* "You Crushed It!" pops in after the bars finish */
.ai-platform-section.is-animated .ai-analytics-foot-title {
  animation: aiPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.75s;     /* after the 8 bars (≈0.07s×8 + fill) */
}
@keyframes aiPop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-platform-section.is-animated .ai-performer,
  .ai-platform-section.is-animated .ai-analytics-foot-title { animation: none; }
}
/* rank: Roboto 400 18px/21px, width 15px */
.ai-performer-rank {
  width: 0.9375rem;          /* 15px */
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-18);
  line-height: 1.3125rem;    /* 21px */
  color: var(--av-color-text);
  flex: 0 0 auto;
}
/* Ellipse 2028: 55×55 circle. The PNG has a baked-in white ring + shadow, so
   we zoom the background past 100% to crop that padding out and show just the
   photo filling the circle, then add the clean 2px border + subtle shadow. */
/* Ellipse 2028 (Figma): 55×55 circle, 2px #FFFFFF border, photo fills it.
   Clean — no drop shadow / halo. */
.ai-performer-avatar {
  width: 3.4375rem;          /* 55px */
  height: 3.4375rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;    /* photo fills the circle, no over-zoom */
}
.ai-performer-name {
  flex: 1 1 auto;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-18);
  line-height: 1.3125rem;
  color: var(--av-color-text);
}
.ai-performer-score {
  flex: 0 0 auto;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-18);
  line-height: 1.3125rem;
  color: var(--av-color-text);
}

/* ============================================================
   Next-Gen Agentic Platform — lower bento cards
   (Reflection / Zero Data Retention / Real-time sync) + the
   bottom Real-Time Visibility row. Sits under .ai-platform-grid
   and continues the shared 1px #E6E6E6 bordered bento block.
   No animation here yet (added later) except the existing
   count-up hook reused for the sync gauge value.
   ============================================================ */

/* shared card surface */
.ai-bento-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
}
.ai-bento-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-24);   /* 24px */
  line-height: 1.75rem;                /* 28px */
  letter-spacing: -0.02rem;            /* -0.32px */
  color: var(--av-color-text);
}
.ai-bento-text {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-16);   /* 16px */
  line-height: 1.75rem;                /* 28px */
  color: var(--av-color-text);
}
.ai-bento-copy {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                       /* 10px */
}
.ai-bento-copy--center { text-align: center; align-items: center; }

/* --- middle row: 3 cards, shares the platform border block --- */
.ai-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 481fr) minmax(0, 460fr) minmax(0, 479fr);
  max-width: 88.75rem;                 /* 1420px */
  margin: 0 auto;
}
/* collapse the doubled inner borders so the block reads as one grid */
.ai-bento-grid .ai-bento-card { border-top: none; border-right: none; }
.ai-bento-grid .ai-bento-card:last-child { border-right: 1px solid #e6e6e6; }

.ai-bento-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.875rem;                   /* 30px */
  min-height: 20.5rem;                 /* ~433px feel, fluid */
}
.ai-bento-reflection { border-radius: 0 0 0 0.625rem; }

/* Reflection visual (Figma Group 2147225006, 239.56×231.11):
   - faint dashed vertical-line grid across the whole card (reflection-bg-line)
   - centred hexagon stage: light outline hexagon (reflection-Polygon-bg) with a
     smaller solid green hexagon (reflection-Polygon) + "a" logo nested inside,
     and four #E6E6E6 node dots at the hexagon's side-vertices with labels
     (Thinking / Plan / Execute / Reflect) just outside. */
.ai-reflection-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 13.75rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* faint thin DASHED vertical lines across the whole card (Figma "Lines").
   Built as individual line elements (evenly spread) so alternate columns can
   drift in opposite vertical directions. Kept very light/subtle like the design. */
.ai-reflection-bg {
  position: absolute;
  inset: 0;                            /* span the WHOLE card (behind text + hexagon) */
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 0.5rem;
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  overflow: hidden;                    /* contain the drifting line ends */
  z-index: 0;
  /* vertical fade (Figma): lines blur/fade out toward the TOP (behind the text)
     and become clearer lower down near the hexagon. */
  -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 28%, #000 55%);
          mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.25) 28%, #000 55%);
}
/* keep the text + hexagon above the background lines */
.ai-bento-reflection .ai-bento-copy,
.ai-bento-reflection .ai-reflection-visual { position: relative; z-index: 1; }
.ai-reflection-bgline {
  flex: 0 0 1px;
  align-self: stretch;
  /* dashed look via a repeating gradient down the 1px-wide line */
  background-image: repeating-linear-gradient(
    to bottom, #141b34 0 5px, transparent 5px 11px
  );
  /* extend beyond the box so the drift never reveals a hard end */
  margin: -20% 0;
  will-change: transform;
}
/* alternate columns drift in opposite directions, slow & continuous */
.ai-reflection-bgline.is-up   { animation: aiReflectLineUp   6s ease-in-out infinite; }
.ai-reflection-bgline.is-down { animation: aiReflectLineDown 6s ease-in-out infinite; }
@keyframes aiReflectLineUp {
  0%, 100% { transform: translateY(4%); }
  50%      { transform: translateY(-4%); }
}
@keyframes aiReflectLineDown {
  0%, 100% { transform: translateY(-4%); }
  50%      { transform: translateY(4%); }
}
/* hexagon stage: fixed ~240px composite, holds SVG wireframe + green hex + labels */
.ai-reflection-stage {
  position: relative;
  width: 15rem;                        /* ≈239.56px */
  max-width: 92%;
  aspect-ratio: 240 / 232;
}
/* SVG wireframe (outer hexagon + spokes + corner dots) fills the stage exactly,
   so the dots land precisely on the hexagon corners. */
.ai-reflection-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
/* solid green hexagon + logo, centred over the wireframe. Sized so its corners
   meet the spoke-line ends (≈50% of the stage width). */
.ai-reflection-poly {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.ai-reflection-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* labels sit just inside each corner dot (Thinking/Plan top, Execute/Reflect bottom) */
.ai-reflection-node {
  position: absolute;
  z-index: 2;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-12);
  line-height: 0.875rem;
  text-transform: capitalize;
  color: #696d6e;
  white-space: nowrap;
}
/* dots are at viewBox (66,22)/(174,22)/(66,210)/(174,210) → 27.5%/72.5% × 9.5%/90.5%.
   Labels sit just outside each dot with a small gap (margin) so the text never
   touches the node. Left-side labels (tl/bl) sit left of their dot; right-side
   labels (tr/br) sit right of their dot. */
.ai-reflection-node--tl { top: 9.5%;  right: 76%; margin-right: 0.5rem; transform: translateY(-50%); }
.ai-reflection-node--tr { top: 9.5%;  left: 76%;  margin-left: 0.5rem;  transform: translateY(-50%); }
.ai-reflection-node--bl { top: 90.5%; right: 76%; margin-right: 0.5rem; transform: translateY(-50%); }
.ai-reflection-node--br { top: 90.5%; left: 76%;  margin-left: 0.5rem;  transform: translateY(-50%); }

/* ---- Sequential node highlight ----
   Each node (dot + its label) lights up in turn: Thinking → Plan → Execute →
   Reflect, looping forever. One 8s cycle = 4 nodes × 2s; each node is "active"
   for ~1.6s of its 2s slot. Stagger via animation-delay on data-node index.
   Label colour/weight lift + dot fill+scale when active. */
.ai-reflection-node {
  transition: color 0.4s ease, font-weight 0.4s ease;
}
.ai-reflection-dot {
  transform-box: fill-box;             /* scale around the dot's own centre */
  transform-origin: center;
  transition: fill 0.4s ease;
}
/* shorthand FIRST (it resets animation-delay to 0), then override the delay per
   node below so each one is staggered by 2s. */
.ai-reflection-node[data-node] { animation: aiReflectNode 8s ease-in-out infinite; }
.ai-reflection-dot[data-node]  { animation: aiReflectDot  8s ease-in-out infinite; }
/* Sequence is CLOCKWISE around the hexagon: Thinking (TL, 1st) → Plan (TR, 2nd)
   → Reflect (BR, 3rd) → Execute (BL, 4th). data-node indices are
   0=Thinking 1=Plan 2=Execute 3=Reflect, so Reflect(3) fires before Execute(2). */
.ai-reflection-node[data-node="0"],
.ai-reflection-dot[data-node="0"]  { animation-delay: 0s; }   /* Thinking — 1st */
.ai-reflection-node[data-node="1"],
.ai-reflection-dot[data-node="1"]  { animation-delay: 2s; }   /* Plan — 2nd */
.ai-reflection-node[data-node="3"],
.ai-reflection-dot[data-node="3"]  { animation-delay: 4s; }   /* Reflect — 3rd */
.ai-reflection-node[data-node="2"],
.ai-reflection-dot[data-node="2"]  { animation-delay: 6s; }   /* Execute — 4th */
@keyframes aiReflectNode {
  0%      { color: #696d6e; }
  6%, 20% { color: var(--av-color-primary, #12715b); }   /* active window */
  26%, 100% { color: #696d6e; }
}
@keyframes aiReflectDot {
  0%      { fill: #e0e0e0; transform: scale(1); }
  6%, 20% { fill: #12715b; transform: scale(1.45); }     /* active window */
  26%, 100% { fill: #e0e0e0; transform: scale(1); }
}

/* Respect reduced-motion: no drifting lines, no node cycling. */
@media (prefers-reduced-motion: reduce) {
  .ai-reflection-bgline.is-up,
  .ai-reflection-bgline.is-down,
  .ai-reflection-node[data-node],
  .ai-reflection-dot[data-node] { animation: none; }
}

/* Zero Data Retention: green vertical-line gradient background (Figma "Lines" +
   "Rectangle 4" baked into retention-bg.png, 458×355) anchored to the card
   bottom, with the shield centered on top. */
.ai-bento-retention { overflow: hidden; }
.ai-retention-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82%;                         /* 355/433 of the card */
  background: url("../images/imgsssss/retention-bg.png") no-repeat center bottom;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}
.ai-retention-visual {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
}
.ai-retention-visual img {
  width: 11.875rem;                    /* 190px */
  max-width: 60%;
  height: auto;
}

/* Real-time sync (Figma): wavy green header at the top + a ring gauge
   (green arc on a #F6F6F6 track) with a knob dot at the arc end + value. */
.ai-bento-sync {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
/* wavy green header (Vector 1, 479×191) anchored to the very top, full width */
.ai-sync-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
/* keep the copy above the header */
.ai-bento-sync .ai-bento-copy { position: relative; z-index: 1; }
.ai-sync-visual {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more breathing room so the gauge clears the wavy header */
  margin-top: 4.375rem;
  padding-bottom: 0.625rem;
}
/* gauge: 228px square holding the base disc, ring, inner disc, knob and value.
   --sweep = green arc length (0–1 of the circle); JS updates it live. --bottom is
   the FIXED bottom anchor; --top (the moving knob end) = --bottom − --sweep. Set
   on the gauge so the ring AND knob both inherit them. Default 0.58 = original. */
.ai-sync-gauge {
  /* Green fills the LEFT (Figma). --bottom = FIXED bottom anchor (≈6 o'clock).
     --top = MOVING knob end, going counterclockwise UP the left = --bottom +
     --sweep. Bigger value → bigger --sweep → knob climbs toward the top. */
  --sweep: 0.57;
  --bottom: 0.50;
  --top: calc(var(--bottom) + var(--sweep));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14.25rem;                     /* 228px */
  height: 14.25rem;
}
/* base light disc (Figma Ellipse 17, 227px #F6F6F6) under the whole gauge */
.ai-sync-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f6f6f6;
  z-index: 0;
}
/* ring: gray #F6F6F6 track with a green arc. The green's BOTTOM end is FIXED at
   --bottom (≈58% of the circle, clockwise from the top ≈ bottom-right). The green
   extends from there COUNTERCLOCKWISE up to its TOP end (where the knob sits),
   whose position = --bottom − --sweep. So as the counter rises the green fills up
   (the knob/top end climbs toward & past the top); as it falls the green empties
   (the knob slides back down toward the fixed bottom). */
/* SVG ring: gray track + green arc with ROUND linecaps so both ends are smoothly
   rounded and MERGED with the stroke (no detached cap blob). The green arc length
   = --sweep of the circle; it's anchored at the bottom and grows up the LEFT.
   r=50 in a 120 viewBox → circumference C = 2π·50 = 314.159. */
.ai-sync-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.ai-sync-track {
  fill: none;
  stroke: #f6f6f6;
  stroke-width: 13;                     /* ≈25px on the 228px gauge */
}
/* green arc: pathLength=100, default origin at 3 o'clock going CLOCKWISE. The
   bottom (6 o'clock) is at 25. Clockwise from the bottom goes UP the LEFT (6→9→12),
   so the green fills the LEFT, anchored at the bottom, length = --sweep. ROUND caps
   give clean merged ends (no detached blob). */
.ai-sync-arc {
  fill: none;
  stroke: #2f8f5a;
  stroke-width: 13;
  stroke-linecap: round;               /* clean rounded ends, no blob */
  stroke-dasharray: calc(var(--sweep) * 100) 100;
  /* a positive dashoffset shifts the dash start backward along the path; to start
     the dash at the bottom (position 25) we offset by −25 (i.e. +75). */
  stroke-dashoffset: -25;
}
/* inner disc (Figma Ellipse 20, 157px = 68.9% of 228). A lighter disc sits inside
   the ring; the #F6F6F6 base shows as a band around it and a visible thin border
   defines the "internal circle" around the value, like the Figma. */
.ai-sync-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68.9%;                        /* 157/228 */
  height: 68.9%;
  border-radius: 50%;
  background: url("../images/imgsssss/real-time-event-bg.png") no-repeat center / cover, #f6f6f6;
  /* light band separating the inner disc from the gauge ring (no border) */
  box-shadow: 0 0 0 0.875rem #fbfbfb;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* knob (Figma Ellipse 26, ~30px) sits on the green arc's MOVING TOP end (--top).
   It climbs as the green fills and slides back as it empties; bottom is fixed.
   The translateY MUST match the SVG arc radius: r=50 in a 120 viewBox rendered at
   228px → 50·228/120 = 95px = 5.9375rem (so the knob sits ON the arc, not outside
   it). Sized to sit neatly on the ring stroke per Figma. */
.ai-sync-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.75rem;                      /* 28px — small, proportional to the ring */
  height: 1.75rem;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--top) * 360deg))
    translateY(-6.353rem)              /* = SVG arc radius (r53.5 → 101.65px) */
    rotate(calc(var(--top) * -360deg));
  z-index: 3;
}
.ai-sync-value {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
}
.ai-sync-num {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-700);
  font-size: 2.375rem;                 /* 38px */
  line-height: 2.5rem;                 /* 40px */
  color: var(--av-color-text);
}
.ai-sync-label {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-16);
  line-height: 1.1875rem;
  color: var(--av-color-text);
}

/* --- bottom row: Real-Time Visibility (copy / chart / milestones) --- */
.ai-bento-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  max-width: 88.75rem;
  margin: 0 auto;
}
.ai-bento-row .ai-bento-card { border-top: none; border-right: none; }
.ai-bento-row .ai-bento-card:last-child { border-right: 1px solid #e6e6e6; }
.ai-visibility-copy { border-radius: 0 0 0 0.625rem; }
.ai-visibility-panel { border-radius: 0 0 0.625rem 0; }

.ai-visibility-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;             /* left-aligned title + text */
  gap: 0.625rem;                       /* 10px (Figma Frame 2147225092) */
  padding: 1.875rem;                   /* 30px */
}
/* paragraph fills the card width (Figma text block 403px) and wraps naturally */
.ai-visibility-copy .ai-bento-text { max-width: 25.1875rem; }   /* 403px */
/* chart card: faint vertical dashed bg lines + a chart stack (gradient area
   fill + green line curve + end dot) anchored to the bottom. */
.ai-visibility-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;           /* chart sticks to the bottom of the card */
  padding: 0;
  overflow: hidden;
}
/* faint dashed vertical-line grid (Figma "Lines"). Built as individual line
   elements (evenly spread) so alternate columns can drift in opposite vertical
   directions (odd up / even down) — reuses the Reflection card's keyframes. */
.ai-chart-bg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 0.5rem;
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  overflow: hidden;                    /* contain the drifting line ends */
  z-index: 0;
}
.ai-chart-bgline {
  flex: 0 0 1px;
  align-self: stretch;
  background-image: repeating-linear-gradient(
    to bottom, #141b34 0 5px, transparent 5px 11px
  );
  margin: -20% 0;                      /* extend beyond the box so drift never shows an end */
  will-change: transform;
}
.ai-chart-bgline.is-up   { animation: aiReflectLineUp   6s ease-in-out infinite; }
.ai-chart-bgline.is-down { animation: aiReflectLineDown 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ai-chart-bgline.is-up,
  .ai-chart-bgline.is-down { animation: none; }
}
/* the chart sits at the bottom, full width. The gradient fill (578×175) defines
   the stack height; the line curve (578×116) overlays top-aligned so it traces
   the fill's crest (both are 578px wide → identical horizontal scale). */
.ai-chart-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  align-self: flex-end;
}
/* inline chart SVG: fills the stack width; the curve scales to the card while the
   stroke/dot stay crisp (vector-effect: non-scaling-stroke). */
.ai-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* The green line draws on LEFT→RIGHT via stroke-dash. pathLength=1 normalises the
   dash maths; the path starts fully hidden (offset 1) and the .is-drawn class
   reveals it. The area fill wipes in with a left→right clip, and the dot fades in
   once the line reaches it. */
.ai-chart-curve {
  pathLength: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;                 /* hidden until drawn */
}
.ai-chart-area {
  clip-path: inset(0 100% 0 0);         /* hidden (clipped from the right) */
}
/* the dot rides the line via offset-path (same curve as .ai-chart-curve). It
   starts hidden; once drawn it pops in, then travels along the line in a loop. */
.ai-chart-dot {
  opacity: 0;
  offset-path: path("M 0,112 C 2.3,111.0 9.3,108.0 14,106 C 18.7,104.0 23.3,102.0 28,100 C 32.7,98.0 37.3,96.0 42,94 C 46.7,92.0 51.3,90.2 56,88 C 60.7,85.8 65.3,83.3 70,81 C 74.7,78.7 79.3,76.3 84,74 C 88.7,71.7 93.3,69.5 98,67 C 102.7,64.5 107.3,61.7 112,59 C 116.7,56.3 121.3,54.2 126,51 C 130.7,47.8 135.3,43.8 140,40 C 144.7,36.2 149.3,32.3 154,28 C 158.7,23.7 163.3,18.3 168,14 C 172.7,9.7 177.3,4.3 182,2 C 186.7,-0.3 191.3,-0.8 196,0 C 200.7,0.8 205.3,4.2 210,7 C 214.7,9.8 219.3,13.2 224,17 C 228.7,20.8 233.3,26.0 238,30 C 242.7,34.0 247.3,37.5 252,41 C 256.7,44.5 261.3,48.3 266,51 C 270.7,53.7 275.3,56.0 280,57 C 284.7,58.0 289.3,57.7 294,57 C 298.7,56.3 303.3,55.0 308,53 C 312.7,51.0 317.3,47.8 322,45 C 326.7,42.2 331.3,38.5 336,36 C 340.7,33.5 345.3,31.7 350,30 C 354.7,28.3 359.3,26.7 364,26 C 368.7,25.3 373.3,25.8 378,26 C 382.7,26.2 387.3,26.3 392,27 C 396.7,27.7 401.3,28.8 406,30 C 410.7,31.2 415.3,32.0 420,34 C 424.7,36.0 429.3,39.0 434,42 C 438.7,45.0 443.3,48.3 448,52 C 452.7,55.7 457.3,60.5 462,64 C 466.7,67.5 471.3,71.0 476,73 C 480.7,75.0 485.3,75.8 490,76 C 494.7,76.2 499.3,75.2 504,74 C 508.7,72.8 513.3,70.8 518,69 C 522.7,67.2 527.3,65.2 532,63 C 536.7,60.8 541.3,58.5 546,56 C 550.7,53.5 555.3,50.7 560,48 C 564.7,45.3 571.0,41.7 574,40 C 577.0,38.3 577.3,38.3 578,38");
  offset-rotate: 0deg;                  /* keep the dot upright, don't rotate */
  offset-distance: 0%;                  /* starts at the line's left start */
}
/* reveal when the section scrolls into view */
.ai-chart-svg.is-drawn .ai-chart-curve {
  animation: aiChartDraw 1.6s ease-out forwards;
}
.ai-chart-svg.is-drawn .ai-chart-area {
  animation: aiChartFillWipe 1.6s ease-out forwards;
}
/* dot: pop in after the line arrives, then loop travelling along the line */
.ai-chart-svg.is-drawn .ai-chart-dot {
  animation:
    aiChartDotIn 0.4s ease-out 1.45s both,
    aiChartDotRide 6s ease-in-out 1.85s infinite;
}
@keyframes aiChartDraw     { to { stroke-dashoffset: 0; } }
@keyframes aiChartFillWipe { to { clip-path: inset(0 0 0 0); } }
/* pop-in (scale via SVG-safe transform on the fill box) */
.ai-chart-dot { transform-box: fill-box; transform-origin: center; }
@keyframes aiChartDotIn  { 0% { opacity: 0; transform: scale(0); }
                           60% { opacity: 1; transform: scale(1.25); }
                           100% { opacity: 1; transform: scale(1); } }
/* travel back and forth along the line, looping */
@keyframes aiChartDotRide {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 100%; }
  100% { offset-distance: 0%; }
}
/* reduced-motion: show the final state immediately, no draw-on, dot rests */
@media (prefers-reduced-motion: reduce) {
  .ai-chart-curve { stroke-dashoffset: 0; }
  .ai-chart-area  { clip-path: inset(0 0 0 0); }
  .ai-chart-dot   { opacity: 1; offset-distance: 100%; }
}
/* milestones panel (Figma): full-bleed #F6F6F6 header band (stats) + milestone
   rows below. No inner padding on the panel itself — the header is edge-to-edge
   and the rows get their own padding. */
.ai-visibility-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}
/* header band: #F6F6F6, 87px tall, 1px bottom border, full width */
.ai-visibility-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 5.4375rem;                   /* 87px */
  padding: 0 1.25rem;                  /* 20px sides */
  background: #f6f6f6;
  border-bottom: 1px solid #e6e6e6;
}
.ai-visibility-stat { display: flex; flex-direction: column; gap: 0.3125rem; }
.ai-visibility-stat--right { align-items: flex-end; text-align: right; }
/* "14,40k" 24px/700 ; "50" 16px/500 + polygon */
.ai-visibility-stat-num {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-700);
  font-size: var(--av-font-size-24);   /* 24px */
  line-height: 1.75rem;                /* 28px */
  color: var(--av-color-text);
}
.ai-visibility-stat--right .ai-visibility-stat-num {
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-16);   /* 50 = 16px/500 */
  line-height: 1.1875rem;
}
/* green hexagon marker (agent-polygen.png, 15×13) next to "50" */
.ai-visibility-poly {
  width: 0.9375rem;                    /* 15px */
  height: auto;
  display: inline-block;
}
.ai-visibility-stat-label {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-12);   /* 12px */
  line-height: 0.875rem;
  color: var(--av-color-text);
}
/* milestone rows: #F6F6F6 bg, 1px border, radius 4px, whole-row opacity fade */
.ai-visibility-milestones {
  list-style: none;
  margin: 0;
  padding: 1.25rem;                    /* 20px */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                        /* 20px between rows (Figma rows 60px apart) */
}
.ai-visibility-milestone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 2.5rem;                      /* 40px */
  padding: 0 0.9375rem;                /* 15px sides */
  border: 1px solid #e6e6e6;
  border-radius: 0.25rem;              /* 4px */
  background: #f6f6f6;
}
.ai-visibility-milestone.is-faded  { opacity: 0.6; }   /* row 2 */
.ai-visibility-milestone.is-faded2 { opacity: 0.3; }   /* row 3 */
/* label + value both 12px/500 #141B34 */
.ai-visibility-milestone-label,
.ai-visibility-milestone-value {
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-500);
  font-size: var(--av-font-size-12);   /* 12px */
  line-height: 0.875rem;
  color: var(--av-color-text);
}
/* values on completed rows are struck through; the "Next milestone" value isn't */
.ai-visibility-milestone.is-faded  .ai-visibility-milestone-value,
.ai-visibility-milestone.is-faded2 .ai-visibility-milestone-value {
  text-decoration: line-through;
}

/* ============================================================
   Ready to Transform (CTA) — Figma Frame 1000004921 (top 5204)
   ============================================================ */
.ai-cta-section {
  position: relative;
  padding: 5rem 0 0;
  overflow: hidden;
}
/* header: title → text, 25px gap, centred, max 939px */
.ai-cta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5625rem;             /* 25px */
  max-width: 58.6875rem;      /* 939px */
  margin: 0 auto;
  text-align: center;
}
/* title: Roboto 400 42px/49px #000 */
.ai-cta-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-42);  /* 42px */
  line-height: 3.0625rem;             /* 49px */
  color: #000000;
  max-width: 42.875rem;               /* 686px */
}
/* text: Roboto 400 20px/36px #555 */
.ai-cta-text {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-weight: var(--av-font-weight-400);
  font-size: var(--av-font-size-20);  /* 20px */
  line-height: 2.25rem;               /* 36px */
  color: #555555;
}
/* dashboard mockup: centred, soft green-tinted glow + white bottom fade */
.ai-cta-visual {
  position: relative;
  width: 100%;
  max-width: 62.625rem;      /* 1002px (Figma sva width) */
  margin: 2.5rem auto 0;
}
.ai-cta-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.625rem;
  filter: drop-shadow(0 -20px 75px #f6f6f6);
}
/* white fade so the mockup melts into the page bottom */
.ai-cta-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%);
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The hero stage scales fluidly (all positions/sizes are %), so it stays
   pixel-proportional from the design width down to tablet automatically. */

/* Human-Level AI Agents: the absolute layout is designed for the full 1420px
   content width; below that the side columns get cramped and the right-column
   text/labels clip. Stack into the clean centred vertical layout until there's
   room for the full design (≤1419px) so it never breaks. */
@media (max-width: 1419.98px) {
  .ai-human-section { padding: 2.5rem 0 3.75rem; overflow-x: clip; }
  .ai-human-stage {
    aspect-ratio: auto;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding: 0 1.25rem;
  }
  .ai-hv { display: none; }
  .ai-human-center {
    position: relative;
    order: 1;
    width: min(18rem, 80vw);
    aspect-ratio: 1;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ai-human-disc {
    position: absolute;
    inset: 0;
    left: 0; right: 0; top: 0; bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
  }
  .ai-human-robot {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 90%;
    height: auto;
    margin: 0 auto;
  }
  .ai-human-left {
    position: static;
    width: 100%;
    order: 2;
    align-items: center;
    gap: 1.25rem;
  }
  .ai-human-head, .ai-human-copy { max-width: 100%; }
  .ai-human-right {
    position: static;
    width: 100%;
    order: 3;
    align-items: center;
  }
  .ai-human-tagpill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .ai-human-tagpill span:last-child { white-space: normal; }
  .ai-pill { max-width: 100%; white-space: normal; text-align: center; }
  .ai-human-left[data-aos],
  .ai-human-right[data-aos],
  .ai-human-disc[data-aos],
  .ai-human-robot[data-aos] {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 991.98px) {
  .ai-hero-head h1 { font-size: 2.25rem; }

  /* Below tablet: drop the absolute design layout and stack the cards so the
     text stays readable. The stage becomes a normal vertical flow. */
  .ai-hero-stage {
    aspect-ratio: auto;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1rem;
  }
  .ai-hero-disc,
  .ai-conn { display: none; }
  .ai-hero-robot-wrap {
    position: static;
    width: 13rem;
    order: 1;
    margin-bottom: -1.75rem;
    transform: none !important;   /* no tilt on stacked mobile layout */
  }
  .ai-chat-card {
    position: static;
    width: 100%;
    order: 2;
  }
  /* header: tighter padding + let the title shrink so the time pill never
     overlaps it on narrow cards */
  .ai-chat-head {
    gap: 0.625rem;
    padding: 1rem 1.25rem;
  }
  .ai-chat-title {
    font-size: 1.125rem;        /* 18px */
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ai-chat-time {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
  }
  .ai-try-card {
    position: static;
    width: 100%;
    order: 3;
  }
  .ai-users-card {
    position: static;
    width: auto;
    order: 4;
  }

  /* Human section: drop the absolute design layout and stack vertically. */
  .ai-human-section { padding: 2.5rem 0 3.75rem; overflow-x: clip; }
  .ai-human-stage {
    aspect-ratio: auto;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding: 0 1.25rem;
  }
  .ai-hv { display: none; }
  /* center block: square, centred, disc behind + robot on top, both contained */
  .ai-human-center {
    position: relative;
    order: 1;
    width: min(18rem, 80vw);
    aspect-ratio: 1;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* center the disc with inset (not transform) so AOS's zoom-in transform on
     this element can't knock it off-centre and bleed past the viewport */
  .ai-human-disc {
    position: absolute;
    inset: 0;
    left: 0; right: 0; top: 0; bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
  }
  .ai-human-robot {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 90%;
    height: auto;
    margin: 0 auto;
  }
  .ai-human-left {
    position: static;
    width: 100%;
    order: 2;
    align-items: center;
    gap: 1.25rem;
  }
  .ai-human-head, .ai-human-copy { max-width: 100%; }
  .ai-human-right {
    position: static;
    width: 100%;
    order: 3;
    align-items: center;
  }
  /* let pills/tag wrap instead of forcing the stage wider than the viewport */
  .ai-human-tagpill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .ai-human-tagpill span:last-child { white-space: normal; }
  .ai-pill { max-width: 100%; white-space: normal; text-align: center; }

  /* Neutralise AOS transforms on the stacked items — off-canvas slide/zoom
     would otherwise push content past the viewport (horizontal scroll). */
  .ai-human-left[data-aos],
  .ai-human-right[data-aos],
  .ai-human-disc[data-aos],
  .ai-human-robot[data-aos] {
    transform: none !important;
    opacity: 1 !important;
  }
  /* hard guard: stage clips any sub-pixel/disc bleed so the page never scrolls */
  .ai-human-stage { overflow-x: clip; }

  /* Features grid: 4 → 2 columns on tablet */
  .ai-features-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats: scale the big number down with the card */
  .ai-stats-number { font-size: clamp(2.5rem, 11vw, 6.25rem); line-height: 1.1; }

  /* Platform: stack header + panels */
  .ai-platform-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .ai-platform-lead { text-align: left; max-width: 100%; }
  .ai-platform-grid { grid-template-columns: 1fr; }
  .ai-analytics-panel {
    border-radius: 0.625rem 0.625rem 0 0;
    border-right: 1px solid #e6e6e6;
    border-bottom: none;
  }
  /* lower bento cards follow, so the performers panel is no longer the last
     card — drop its bottom rounding (handled by the final bento card). */
  .ai-performers-panel { border-radius: 0; }
  .ai-analytics-percent { font-size: clamp(4rem, 16vw, 9.375rem); line-height: 1.1; }
  /* bars: smaller gap so they stay wide rounded bars, not thin lines */
  .ai-analytics-bars { gap: 0.5rem; }

  /* lower bento: 3 cards → single column, full-width stacked block */
  .ai-bento-grid { grid-template-columns: 1fr; }
  .ai-bento-grid .ai-bento-card {
    border-right: 1px solid #e6e6e6;
    border-radius: 0;
  }
  .ai-bento-reflection { border-radius: 0; }

  /* bottom Real-Time Visibility row → single column */
  .ai-bento-row { grid-template-columns: 1fr; }
  .ai-bento-row .ai-bento-card {
    border-right: 1px solid #e6e6e6;
    border-radius: 0;
  }
  .ai-visibility-copy { border-radius: 0; }
  /* last card in the whole bento block gets the bottom rounding */
  .ai-bento-row .ai-bento-card:last-child { border-radius: 0 0 0.625rem 0.625rem; }
  /* center the visuals when stacked full-width */
  .ai-reflection-visual { min-height: 13rem; }
  .ai-visibility-chart img { width: 100%; }
}

/* Stop-Chasing comparison: stack to one column at ≤991px. The two-column
   layout needs ~1000px+; below that the 579px columns get cramped and the
   (nowrap) pros text was being clipped on the right at tablet widths. */
@media (max-width: 991.98px) {
  .ai-compare {
    flex-direction: column;
    gap: 1.25rem;
    max-width: 32rem;
  }
  .ai-compare-divider { display: none; }
  .ai-compare-col { width: 100%; }
  /* both columns left-aligned when stacked */
  .ai-compare-cons { align-items: stretch; }
  .ai-compare-pros {
    align-items: stretch;
    padding-top: 1.25rem;
    border-top: 0.0625rem solid var(--av-color-border-color);
  }
  /* cons: icon on left like pros for readability when stacked */
  .ai-compare-cons .ai-compare-item {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  /* let text wrap so nothing is ever clipped */
  .ai-compare-text { white-space: normal; }
  .ai-compare-line { width: 100%; align-self: stretch; }
}

@media (max-width: 767.98px) {
  .ai-trusted .ccard {
    margin: 0 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .ai-hero-head { white-space: normal; }
  .ai-hero-head h1 { font-size: 1.625rem; line-height: 1.3; white-space: normal; }
  .ai-hero-text { font-size: var(--av-font-size-16); line-height: 1.6; }
  /* chat header: tightest layout for very small cards */
  .ai-chat-head { gap: 0.5rem; padding: 0.875rem 1rem; }
  .ai-chat-logo { width: 2rem; height: 2rem; }
  .ai-chat-title { font-size: var(--av-font-size-16); }
  .ai-chat-time { font-size: 0.75rem; padding: 0.4375rem 0.625rem; }
  /* composites scale fluidly, never exceeding the viewport */
  .ai-hero-stage { width: 100%; }
  .ai-hero-robot-wrap { width: 11rem; }
  .ai-human-center { width: min(15rem, 78vw); aspect-ratio: 1; height: auto; }
  .ai-human-head { font-size: var(--av-font-size-28); line-height: 1.3; }
  .ai-human-copy { font-size: var(--av-font-size-16); line-height: 1.6; }
  /* prevent any horizontal overflow on very small screens */
  .ai-compare-text { font-size: var(--av-font-size-14); }

  /* Features grid: single column on phones */
  .ai-features-grid { grid-template-columns: 1fr; }
  .ai-feature-card { min-height: 0; }
  .ai-features-title { font-size: var(--av-font-size-28); line-height: 1.25; }

  /* Stats: let the card grow taller so the content fits on phones */
  .ai-stats-card { aspect-ratio: auto; min-height: 16rem; }
  .ai-stats-content { position: relative; left: auto; top: auto; transform: none; padding: 3rem 1rem; }
  .ai-stats-sub { font-size: var(--av-font-size-16); line-height: 1.6; }
  /* robots become faint side accents so they don't crowd the text on phones */
  .ai-stats-robot { top: auto; bottom: 0; opacity: 0.5; }
  .ai-stats-robot-left  { width: 38%; }
  .ai-stats-robot-right { width: 40%; }

  /* CTA: smaller title + body on phones */
  .ai-cta-title { font-size: var(--av-font-size-28); line-height: 1.25; }
  .ai-cta-text { font-size: var(--av-font-size-16); line-height: 1.6; }

  /* Platform: stack the 42% block under the analytics copy on phones */
  .ai-platform-title { font-size: var(--av-font-size-28); line-height: 1.25; }
  .ai-analytics-row { flex-direction: column; align-items: flex-start; }
  .ai-analytics-right { align-items: flex-start; text-align: left; }
  .ai-analytics-foot { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .ai-performer-name { font-size: var(--av-font-size-16); }
  /* bars: tighter gap + shorter on phones so they read as bars, not lines */
  .ai-analytics-bars { gap: 0.375rem; height: 2.75rem; }
  .ai-bar { min-width: 0.375rem; }

  /* tag pills must wrap and never exceed the viewport */
  .ai-agents-hero .thunder-tag,
  .ai-human-tagpill {
    max-width: 100%;
    white-space: normal;
  }
  .ai-agents-hero .thunder-tag span,
  .ai-human-tagpill span:last-child { white-space: normal; }

  /* lower bento cards: tighter padding + smaller titles on phones */
  .ai-bento-card { padding: 1.25rem; min-height: 0; }
  .ai-bento-title { font-size: var(--av-font-size-20); line-height: 1.4; }
  .ai-bento-reflection .ai-reflection-visual { min-height: 11rem; }
  /* sync gauge: keep the 228px composite intact (knob/cap/ring offsets are fixed
     to that size) and scale the WHOLE gauge down proportionally so it fits narrow
     cards without the knob drifting off the ring. */
  .ai-sync-gauge { transform: scale(0.82); transform-origin: center; }
  .ai-sync-visual { margin-top: 2.5rem; }
  .ai-sync-num { font-size: var(--av-font-size-24); }
  /* milestones stack their label/value on very narrow screens if needed */
  .ai-visibility-stat-num { font-size: var(--av-font-size-20); }
}

/* Per-section guard against horizontal scroll on the AI page. Uses `clip`
   (not `hidden`) so it contains any off-canvas AOS slide-in (e.g. fade-left
   leaves a +30px translateX before it triggers) WITHOUT creating a scroll
   container — so sticky/anchor scrolling is unaffected. This replaces the old
   global html/body overflow-x:hidden hack. */
.ai-agents-hero,
.ai-trusted,
.ai-stop-section,
.ai-human-section,
.ai-features-section,
.ai-stats-section,
.ai-platform-section,
.ai-cta-section {
  overflow-x: clip;
  max-width: 100%;
}
.ai-chat-title { min-width: 0; }
/* ensure the human stage + its children never exceed the viewport width */
.ai-human-stage,
.ai-human-stage * { box-sizing: border-box; }
.ai-human-head { overflow-wrap: anywhere; }