/* =====================================================================
   QA Madness - AI Product Testing landing page
   ---------------------------------------------------------------------
   SCOPING RULE: every selector is prefixed with `.ai-product-testing`
   (the page's <main> wrapper) so nothing here can affect other templates.
   The shared redesign header chrome lives in ai-product-testing-header.css
   (a scoped mirror of the homepage header). Design tokens (--h-*) are
   defined there on body.ai-product-testing-page; both files load together.
   Enqueued only on page-ai-product-testing.php.
   ===================================================================== */

/* ---------- Fonts (self-hosted, shipped with the theme) ---------- */
@font-face {
  font-family: "GT Sectra Display";
  src: url("../../fonts/GTSectraDisplaySuper.woff2") format("woff2"),
       url("../../fonts/GTSectraDisplaySuper.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Anchor scrolling ---------- */
/* In-page CTAs (hero "Get an estimate" + panel "Talk to an AI QA specialist")
   target #ai-cta. Smooth-scroll and offset the landing by the fixed header
   (min-height 72px, see ai-product-testing-header.css) so the "...Is It Tested
   and Safe to Release?" heading isn't tucked under the bar. This file is
   enqueued only on this page, so scoping to html is safe. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Wrapper base ---------- */
.ai-product-testing {
  /* Phase 2: tokens read from assets/styles/shared/tokens.css with the
     original literal kept as a var() fallback. Values unchanged. */
  --ai-band: var(--ds-band, #0c0b13);
  --ai-band-alt: var(--ds-band-alt, #110d1a);
  /* Shared palette mirrored from the Accessibility Audit styles (aa-page.css). */
  --aa-purple: var(--ds-purple, #7d51f1);
  --aa-purple-light: var(--ds-purple-light, #cbb9f9);
  --aa-purple-dark: var(--ds-purple-dark, #5336a1);
  --aa-green: var(--ds-green-solid, #00cca6);
  --aa-light-green: var(--ds-green-light, #68dcc7);
  --aa-dark-green: var(--ds-green-dark, #00886f);
  --aa-white: var(--ds-white-soft, #f9f7ff);
  font-family: var(--h-font, "Noto Sans", Arial, sans-serif);
  color: var(--h-text, #fff);
  background: var(--h-bg, #08080d);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;
}
.ai-product-testing *,
.ai-product-testing *::before,
.ai-product-testing *::after { box-sizing: border-box; }
.ai-product-testing img { max-width: 100%; height: auto; }
.ai-product-testing h1,
.ai-product-testing h2,
.ai-product-testing h3,
.ai-product-testing h4 {
  margin: 0;
  color: var(--h-text, #fff);
  font-family: var(--h-font, "Noto Sans", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.14;
}
.ai-product-testing p { margin: 0; }
.ai-product-testing a { color: inherit; }

/* ---------- Layout primitives ---------- */
.ai-product-testing .ai-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 19px;
}
.ai-product-testing .ai-container--narrow { max-width: 880px; }

.ai-product-testing .ai-section { padding: 80px 0; position: relative; }
.ai-product-testing .ai-section--tight { padding: 40px 0; }

/* "What is" -> "Common Questions": two-tone alternating band (#14101D then
   #08070e), following the section order in page-ai-product-testing.php
   (what-is, layer, fit, covers, how, process, case, finding, testimonials, faq). */
.ai-product-testing .ai-whatis  { background: #14101d; }
.ai-product-testing .ai-layer   { background: #08070e; }
.ai-product-testing .ai-fit     { background: #14101d; }
.ai-product-testing .ai-covers  { background: #08070e; }
.ai-product-testing .ai-how     { background: #14101d; }
.ai-product-testing .ai-process { background: #08070e; }
.ai-product-testing .ai-case    { background: #14101d; }
/* Case Snapshot + "What a Finding Looks Like" intentionally share #14101D. */
.ai-product-testing .ai-finding { background: #14101d; }
.ai-product-testing .ai-testi   { background: #08070e; }
.ai-product-testing .ai-faq     { background: #14101d; }
.ai-product-testing .ai-cta     { background: var(--ai-band-alt); }

/* ---------- Shared: eyebrow, section head, accents ---------- */
.ai-product-testing .ai-eyebrow {
  margin: 0 0 14px;
  color: var(--h-green, #3fe3b6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ai-product-testing .ai-section__head {
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
}
.ai-product-testing .ai-section__head .ai-h { font-size: 42px; letter-spacing: -0.01em; }
.ai-product-testing .ai-section__sub {
  margin-top: 16px;
  color: var(--h-muted, #cccbd2);
  font-size: 17px;
}
/* Force the sans face on section headings. The parent SCSS library leaks
   `h1,h2:not(.noto-font){font-family:GTSectraDisplaySuper}` globally; this rule
   (0,2,0) out-specifies it so headings render in the intended sans. The hero
   opts back into serif via `.ai-hero .ai-h` (0,3,0). Accent spans set their own
   face and are unaffected. */
.ai-product-testing .ai-h { font-size: 42px; font-family: var(--h-font, "Noto Sans", Arial, sans-serif); }
.ai-product-testing .ai-accent-green,
.ai-product-testing .ai-accent-purple {
  font-family: var(--h-serif, "GT Sectra Display", Georgia, serif);
  font-style: italic;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ai-product-testing .ai-accent-green { background-image: var(--h-green-grad, linear-gradient(135deg, #45e6ba, #16bc8f)); }
.ai-product-testing .ai-accent-purple { background-image: var(--h-purple-grad-soft, linear-gradient(135deg, #b9a6ff, #8e6cff)); }
/* Solid accents (upright, same sans face as the heading) - no gradient/italic. */
.ai-product-testing .ai-accent-plain { color: var(--aa-purple, #7d51f1); }
.ai-product-testing .ai-accent-plain-green { color: var(--aa-green, #00cca6); }

/* ---------- Buttons ---------- */
.ai-product-testing .ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ai-product-testing .ai-btn--green { background: var(--h-green-grad, linear-gradient(135deg, #45e6ba, #16bc8f)); color: #08130f; }
.ai-product-testing .ai-btn--green:hover { transform: translateY(-1px); }
.ai-product-testing .ai-btn--ghost { background: transparent; border-color: var(--h-border-strong, rgba(255,255,255,0.16)); color: #fff; }
.ai-product-testing .ai-btn--ghost:hover { border-color: #fff; }
.ai-product-testing .ai-btn--text { background: transparent; border-color: transparent; color: #fff; padding: 14px 8px; }
.ai-product-testing .ai-btn--text:hover { color: var(--h-lilac, #cbbcff); }
.ai-product-testing .ai-btn--lilac { background: rgba(203, 188, 255, 0.14); border-color: rgba(203, 188, 255, 0.45); color: var(--h-lilac, #cbbcff); }
.ai-product-testing .ai-btn--lilac:hover { background: rgba(203, 188, 255, 0.22); border-color: var(--h-lilac, #cbbcff); }
.ai-product-testing .ai-btn svg { flex: none; }

/* Hero CTAs use the homepage .home-btn hover animation (ported from css/home.css):
   on hover the gap between label and trailing arrow widens so the button stretches
   rightward and the arrow slides — no vertical lift. The green button also fades in
   a lighter gradient highlight toward the arrow, like .home-btn--green. */
.ai-product-testing .ai-hero__ctas .ai-btn {
  justify-content: flex-start;
  transition: transform 0.35s ease, box-shadow 0.3s ease, opacity 0.25s ease,
              background 0.35s ease, color 0.2s ease, border-color 0.2s ease,
              gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-product-testing .ai-hero__ctas .ai-btn svg:last-child {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-product-testing .ai-hero__ctas .ai-btn:hover { gap: 24px; }
.ai-product-testing .ai-hero__ctas .ai-btn:hover svg:last-child { transform: translateX(2px); }
.ai-product-testing .ai-hero__ctas .ai-btn--green {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ai-product-testing .ai-hero__ctas .ai-btn--green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(69, 230, 186, 0) 35%, rgba(69, 230, 186, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.5s ease 0.18s;
}
.ai-product-testing .ai-hero__ctas .ai-btn--green:hover::after { opacity: 1; }
.ai-product-testing .ai-hero__ctas .ai-btn--green:hover { transform: none; }

/* ---------- Check glyph ---------- */
.ai-product-testing .ai-check { flex: none; color: var(--h-green, #3fe3b6); }

/* ---------- Rich text ---------- */
.ai-product-testing .ai-rte { color: var(--h-muted, #cccbd2); font-size: 16px; }
.ai-product-testing .ai-rte p { margin: 0 0 14px; }
.ai-product-testing .ai-rte p:last-child { margin-bottom: 0; }
.ai-product-testing .ai-rte strong { color: #fff; }
.ai-product-testing .ai-rte a { color: var(--h-lilac, #cbbcff); }

/* =====================================================================
   HERO
   ===================================================================== */
.ai-product-testing .ai-hero {
  padding: 172px 0 96px;
  overflow: hidden;
  background: #08070d;
}
/* Built-in aurora background (bright purple mass upper-right sweeping toward
   centre, lilac highlight mid-right, teal glow lower-left corner) reproducing the
   design reference. Used unless a background image is set on the section, via ACF
   `qmai_hero_bg` or the theme asset hero-bg.* (.ai-hero--has-bg hides this). */
.ai-product-testing .ai-hero::before {
  content: "";
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(52% 56% at 88% 8%, rgba(110, 63, 224, 0.68), transparent 60%),
    radial-gradient(46% 50% at 66% 56%, rgba(168, 140, 255, 0.42), transparent 62%),
    radial-gradient(58% 50% at 50% 72%, rgba(83, 54, 161, 0.48), transparent 66%),
    radial-gradient(44% 48% at 3% 97%, rgba(22, 160, 133, 0.40), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.ai-product-testing .ai-hero--has-bg { background-image: var(--qmai-hero-bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.ai-product-testing .ai-hero--has-bg::before { display: none; }
.ai-product-testing .ai-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 432px;
  gap: 56px;
  align-items: start;
}
.ai-product-testing .ai-hero__eyebrow { color: var(--h-green, #3fe3b6); }

/* Headline: high-contrast serif; accent renders as a teal-to-purple gradient. */
.ai-product-testing .ai-hero .ai-h {
  font-family: var(--h-serif, "GT Sectra Display", Georgia, serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: 0;
}
.ai-product-testing .ai-hero__accent {
  font-family: var(--h-serif, "GT Sectra Display", Georgia, serif);
  font-style: normal;
  background-image: linear-gradient(96deg, #3fd7e6 0%, #6f8cff 46%, #9a6cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ai-product-testing .ai-hero__text {
  margin-top: 26px;
  max-width: 560px;
  color: var(--h-muted, #cccbd2);
  font-size: 17px;
  line-height: 1.65;
}
.ai-product-testing .ai-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 34px; }
.ai-product-testing .ai-hero__features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 56px 0 0;
  padding: 0;
  max-width: 620px;
}
/* Match the homepage hero stat cards (.home-hcard): solid dark-plum surface,
   no light border, subtle drop shadow, larger radius. Text stays centered. */
.ai-product-testing .ai-hero__feature {
  padding: 24px 21px;
  border: 0;
  border-radius: var(--h-radius-lg, 22px);
  background: rgba(21, 17, 30, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.ai-product-testing .ai-hero__feature-title { font-weight: 700; font-size: 16px; color: var(--h-lilac, #cbbcff); margin-bottom: 8px; }
.ai-product-testing .ai-hero__feature-text { color: var(--h-muted, #cccbd2); font-size: 13.5px; line-height: 1.5; }

/* ---------- Glass example panel ---------- */
.ai-product-testing .ai-hero__panel {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid rgba(142, 108, 255, 0.35);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(21, 17, 30, 0.5) 0%, rgba(83, 54, 161, 0.5) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-product-testing .ai-hero__panel-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.ai-product-testing .ai-hero__panel-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--h-green, #3fe3b6);
  animation: ai-dot-pulse 2s ease-out infinite;
}
@keyframes ai-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 227, 182, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(63, 227, 182, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 227, 182, 0); }
}
.ai-product-testing .ai-hero__panel-title { font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 18px; color: #fff; }
.ai-product-testing .ai-hero__panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ai-product-testing .ai-hero__panel-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--h-muted, #cccbd2); font-size: 14px; line-height: 1.45; }
/* Content-width (so the gap-stretch hover animation shows) but centered in the
   panel. Scoped through .ai-hero__panel to out-specify the ported .home-btn
   display:inline-flex; width:fit-content keeps it shrink-wrapped as it stretches. */
.ai-product-testing .ai-hero__panel .ai-hero__panel-cta { margin: 24px auto 0; display: flex; width: fit-content; }
.ai-product-testing .ai-hero__panel-note { margin-top: 14px; text-align: center; color: var(--h-muted, #6f6f80); font-size: 12px; }

/* ---------- Cycling chat animation ---------- */
.ai-product-testing .ai-chat {
  position: relative;
  min-height: 300px;
  margin-bottom: 24px;
}
.ai-product-testing .ai-chat__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.ai-product-testing .ai-chat__stage.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s linear 0s;
}
/* Each step is hidden until JS adds .is-shown, then eases into place. Entrance
   direction differs per message type: user slides in from the right, the AI
   response from the left, the detection alert from the bottom. */
.ai-product-testing .ai-chat [data-chat-step] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.ai-product-testing .ai-chat__msg--user[data-chat-step]  { transform: translateX(32px); }
.ai-product-testing .ai-chat__msg--ai[data-chat-step]    { transform: translateX(-32px); }
.ai-product-testing .ai-chat__alert[data-chat-step]      { transform: translateY(20px); }
.ai-product-testing .ai-chat [data-chat-step].is-shown { opacity: 1; transform: none; }
.ai-product-testing .ai-chat__msg { display: flex; flex-direction: column; gap: 6px; max-width: 82%; }
.ai-product-testing .ai-chat__msg--user { align-self: flex-end; align-items: flex-end; text-align: right; }
.ai-product-testing .ai-chat__msg--ai { align-self: flex-start; align-items: flex-start; }
.ai-product-testing .ai-chat__who { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ai-product-testing .ai-chat__msg--user .ai-chat__who { color: var(--h-lilac, #cbbcff); }
.ai-product-testing .ai-chat__msg--ai .ai-chat__who { color: var(--h-muted-2, #9a97a8); }
.ai-product-testing .ai-chat__bubble {
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-product-testing .ai-chat__msg--user .ai-chat__bubble { background: #0d0a1e; border-top-right-radius: 4px; }
.ai-product-testing .ai-chat__msg--ai .ai-chat__bubble { background: #17132a; border-top-left-radius: 4px; }
.ai-product-testing .ai-chat__alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
}
.ai-product-testing .ai-chat__alert-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.ai-product-testing .ai-chat__alert-body { display: flex; flex-direction: column; gap: 2px; }
.ai-product-testing .ai-chat__alert-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.ai-product-testing .ai-chat__alert-text { font-size: 12.5px; color: var(--h-muted, #cccbd2); }
.ai-product-testing .ai-chat__alert--red { background: rgba(226, 74, 99, 0.14); border: 1px solid rgba(226, 74, 99, 0.4); }
.ai-product-testing .ai-chat__alert--red .ai-chat__alert-ico { background: #e2506a; }
.ai-product-testing .ai-chat__alert--red .ai-chat__alert-tag { color: #ff9db0; }
.ai-product-testing .ai-chat__alert--amber { background: rgba(230, 168, 60, 0.14); border: 1px solid rgba(230, 168, 60, 0.4); }
.ai-product-testing .ai-chat__alert--amber .ai-chat__alert-ico { background: #e6a83c; }
.ai-product-testing .ai-chat__alert--amber .ai-chat__alert-tag { color: #ffd07a; }
.ai-product-testing .ai-chat__alert--purple { background: rgba(142, 108, 255, 0.16); border: 1px solid rgba(142, 108, 255, 0.4); }
.ai-product-testing .ai-chat__alert--purple .ai-chat__alert-ico { background: var(--h-purple, #8e6cff); }
.ai-product-testing .ai-chat__alert--purple .ai-chat__alert-tag { color: #c3b1ff; }

/* =====================================================================
   LOGO STRIP  (auto-scrolling marquee, reused from the homepage clients band)
   ===================================================================== */
.ai-product-testing .ai-logos {
  text-align: center;
  background: #1a1a22;
  min-height: 146px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ai-product-testing .ai-logos .ai-logos__title { color: var(--h-muted, #cccbd2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.ai-product-testing .ai-logos__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.ai-product-testing .ai-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aiLogosScroll 45s linear infinite;
}
.ai-product-testing .ai-logos__marquee:hover .ai-logos__track { animation-play-state: paused; }
/* Gap lives on the items (not `gap`) so translateX(-50%) loops seamlessly. */
.ai-product-testing .ai-logos__item {
  flex: none;
  margin-right: clamp(38px, 4.8vw, 77px);
  display: flex;
  align-items: center;
}
.ai-product-testing .ai-logos__item img {
  height: 27px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.7);
  transition: opacity 0.2s ease;
}
.ai-product-testing .ai-logos__item img:hover { opacity: 0.9; }
.ai-product-testing .ai-logos__track--text .ai-logos__item { color: var(--h-muted-2, #6f6f80); font-size: 16px; font-weight: 700; white-space: nowrap; }
@keyframes aiLogosScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-product-testing .ai-logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .ai-product-testing .ai-logos__track--text .ai-logos__item { white-space: normal; }
}

/* =====================================================================
   WHAT IS  (full-width lead, then 2-col text + comparison table)
   ===================================================================== */
.ai-product-testing .ai-whatis__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 34px 64px;
  align-items: start;
}
.ai-product-testing .ai-whatis__head { grid-column: 1 / -1; max-width: 820px; }
.ai-product-testing .ai-whatis__head .ai-h { font-size: 46px; margin-bottom: 26px; }
/* Lead + body copy render white on this section (per design). */
.ai-product-testing .ai-whatis__lead { font-size: 16px; }
.ai-product-testing .ai-whatis__lead,
.ai-product-testing .ai-whatis__text .ai-rte { color: var(--aa-white, #f9f7ff); }
.ai-product-testing .ai-whatis__text { align-self: start; }
.ai-product-testing .ai-whatis__text .ai-rte { font-size: 15.5px; }

/* Comparison table (real <table>). Borders are drawn on the CELLS, not on the
   table element, so every outer edge is a single correctly-coloured line (gray
   around the label + deterministic area, dark-purple around the AI column) with
   no doubling, and all four table corners round via the corner cells. */
.ai-product-testing .ai-whatis__table-wrap { overflow-x: auto; padding: 2px; }
.ai-product-testing .ai-whatis__table {
  width: 100%;
  min-width: 420px;
  border-collapse: separate;
  border-spacing: 0;
}
.ai-product-testing .ai-whatis__table th,
.ai-product-testing .ai-whatis__table td {
  padding: 15px 16px;
  text-align: center;
  vertical-align: middle;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Gray outline (label + deterministic area) + internal grid, built from cells. */
.ai-product-testing .ai-whatis__corner,
.ai-product-testing .ai-whatis__ch { border-top: 1px solid var(--h-border, rgba(255,255,255,0.1)); }
.ai-product-testing .ai-whatis__corner,
.ai-product-testing .ai-whatis__rh { border-left: 1px solid var(--h-border, rgba(255,255,255,0.1)); }
.ai-product-testing .ai-whatis__ch,
.ai-product-testing .ai-whatis__cd { border-left: 1px solid var(--h-border, rgba(255,255,255,0.1)); }
.ai-product-testing .ai-whatis__table tbody th,
.ai-product-testing .ai-whatis__table tbody td { border-top: 1px solid var(--h-border, rgba(255,255,255,0.1)); }
.ai-product-testing .ai-whatis__table tbody tr:last-child .ai-whatis__rh,
.ai-product-testing .ai-whatis__table tbody tr:last-child .ai-whatis__cd { border-bottom: 1px solid var(--h-border, rgba(255,255,255,0.1)); }

/* Column + row header text. */
.ai-product-testing .ai-whatis__ch { color: var(--h-muted, #cccbd2); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-product-testing .ai-whatis__rh { color: var(--aa-purple-light, #cbb9f9); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-product-testing .ai-whatis__cd { color: var(--aa-white, #f9f7ff); }

/* Highlighted AI column: dark-purple box, purple header, light-purple cells.
   Its own borders double as the table's right/top/bottom edge here, so there is
   no gray table border underneath to show through. */
.ai-product-testing .ai-whatis__ch--ai,
.ai-product-testing .ai-whatis__ca {
  border-left: 1.5px solid var(--aa-purple-dark, #5336a1);
  border-right: 1.5px solid var(--aa-purple-dark, #5336a1);
  background: transparent;
  color: var(--aa-purple-light, #cbb9f9);
  font-weight: 700;
}
.ai-product-testing .ai-whatis__ch--ai {
  color: var(--aa-purple, #7d51f1);
  border-top: 1.5px solid var(--aa-purple-dark, #5336a1);
}
.ai-product-testing .ai-whatis__table tbody tr:last-child .ai-whatis__ca { border-bottom: 1.5px solid var(--aa-purple-dark, #5336a1); }

/* Rounded corners (outer table + the AI box). */
.ai-product-testing .ai-whatis__corner { border-top-left-radius: 14px; }
.ai-product-testing .ai-whatis__ch--ai { border-top-right-radius: 14px; }
.ai-product-testing .ai-whatis__table tbody tr:last-child .ai-whatis__rh { border-bottom-left-radius: 14px; }
.ai-product-testing .ai-whatis__table tbody tr:last-child .ai-whatis__ca { border-bottom-right-radius: 14px; }

/* =====================================================================
   LAYER  (full-width lead, 2-col copy + cards, then LLM banner)
   ===================================================================== */
.ai-product-testing .ai-layer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: 30px 56px;
  align-items: start;
}
.ai-product-testing .ai-layer__head { grid-column: 1 / -1; max-width: 900px; }
.ai-product-testing .ai-layer__head .ai-h { font-size: 46px; margin-bottom: 24px; }
.ai-product-testing .ai-layer__lead { font-size: 16px; color: var(--aa-white, #f9f7ff); }
.ai-product-testing .ai-layer__text { align-self: start; }
.ai-product-testing .ai-layer__text .ai-rte { color: var(--aa-white, #f9f7ff); font-size: 15.5px; }
.ai-product-testing .ai-layer__text .ai-rte strong { color: var(--aa-white, #f9f7ff); }

/* Cards: icon tile + title/subtitle + badge; first is green (this page). */
.ai-product-testing .ai-layer__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ai-product-testing .ai-layer__card {
  display: flex; gap: 18px; align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.09));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.ai-product-testing .ai-layer__card--green {
  border-color: rgba(0, 204, 166, 0.5);
  background: linear-gradient(180deg, rgba(0, 204, 166, 0.07), rgba(0, 204, 166, 0.015));
}
.ai-product-testing .ai-layer__card-ico {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.ai-product-testing .ai-layer__card--green .ai-layer__card-ico { background: linear-gradient(135deg, #45e6ba, #00886f); }
.ai-product-testing .ai-layer__card--purple .ai-layer__card-ico { background: linear-gradient(135deg, #9170ff, #5336a1); }
.ai-product-testing .ai-layer__card-ico img { width: 22px; height: 22px; object-fit: contain; }
/* Full-tile icons: the SVG already includes its rounded colour tile, so drop the
   gradient background here and let the image fill the 46x46 box (no double tile). */
.ai-product-testing .ai-layer__card--green .ai-layer__card-ico--tile,
.ai-product-testing .ai-layer__card--purple .ai-layer__card-ico--tile { background: none; }
.ai-product-testing .ai-layer__card-ico--tile img { width: 100%; height: 100%; }
.ai-product-testing .ai-layer__card-body { flex: 1 1 auto; min-width: 0; }
.ai-product-testing .ai-layer__card-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.ai-product-testing .ai-layer__card--green .ai-layer__card-title { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-layer__card-text { color: var(--h-muted, #cccbd2); font-size: 13.5px; }
/* Badge pill (green "this page" / purple "QA Madness"). */
.ai-product-testing .ai-layer__badge {
  flex: none;
  align-self: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ai-product-testing .ai-layer__card--green .ai-layer__badge { color: var(--aa-green, #00cca6); border-color: rgba(0, 204, 166, 0.6); }
.ai-product-testing .ai-layer__card--purple .ai-layer__badge { color: var(--aa-purple-light, #cbb9f9); border-color: var(--aa-purple, #7d51f1); }
.ai-product-testing a.ai-layer__badge:hover { background: rgba(125, 81, 241, 0.14); }
.ai-product-testing .ai-layer__card--green a.ai-layer__badge:hover { background: rgba(0, 204, 166, 0.12); }

/* "We integrate LLMs" banner - gradient (teal -> blue -> purple) on dark. */
.ai-product-testing .ai-layer__llm {
  grid-column: 1 / -1;
  margin-top: 30px;
  padding: 34px 38px;
  border-radius: 20px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.08));
  background:
    radial-gradient(38% 120% at 26% 0%, rgba(0, 204, 166, 0.35), transparent 60%),
    radial-gradient(40% 130% at 52% 30%, rgba(60, 90, 230, 0.35), transparent 62%),
    radial-gradient(46% 140% at 74% 40%, rgba(125, 81, 241, 0.32), transparent 64%),
    #14131b;
}
.ai-product-testing .ai-layer__llm-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ai-product-testing .ai-layer__llm-body { color: var(--h-muted, #cccbd2); font-size: 14px; line-height: 1.6; }
.ai-product-testing .ai-layer__llm-body a { color: var(--aa-green, #00cca6); font-weight: 700; text-decoration: none; }
.ai-product-testing .ai-layer__llm-body a:hover { text-decoration: underline; }

/* =====================================================================
   FIT  (2x2 cards: gradient icon tile + toned title + description)
   ===================================================================== */
.ai-product-testing .ai-fit__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ai-product-testing .ai-fit__card {
  padding: 26px 28px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.09));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.ai-product-testing .ai-fit__card--purple { border-color: rgba(125, 81, 241, 0.45); }
.ai-product-testing .ai-fit__card--green { border-color: rgba(0, 204, 166, 0.45); background: rgba(13, 26, 24, .5); }
.ai-product-testing .ai-fit__card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ai-product-testing .ai-fit__ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
}
.ai-product-testing .ai-fit__card--purple .ai-fit__ico { background: linear-gradient(135deg, #9170ff, #5336a1); }
.ai-product-testing .ai-fit__card--green .ai-fit__ico { background: linear-gradient(135deg, #45e6ba, #00886f); }
.ai-product-testing .ai-fit__ico img { width: 22px; height: 22px; object-fit: contain; }
/* Full-tile icons: the SVG already includes its rounded colour tile, so drop the
   gradient background here and let the image fill the 44x44 box (no double tile). */
.ai-product-testing .ai-fit__card--green .ai-fit__ico--tile,
.ai-product-testing .ai-fit__card--purple .ai-fit__ico--tile { background: none; }
.ai-product-testing .ai-fit__ico--tile img { width: 100%; height: 100%; }
.ai-product-testing .ai-fit__card-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.ai-product-testing .ai-fit__card--purple .ai-fit__card-title { color: var(--aa-purple, #7d51f1); }
.ai-product-testing .ai-fit__card--green .ai-fit__card-title { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-fit__card-text { color: var(--h-muted, #cccbd2); font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   COVERS  (3-col grid; each card has a purple pill badge)
   ===================================================================== */
.ai-product-testing .ai-covers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ai-product-testing .ai-covers__card {
  padding: 26px 26px 28px;
  border: 1px solid var(--aa-line, var(--aa-purple-dark));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.028);
}
.ai-product-testing .ai-covers__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border: 1px solid var(--aa-purple);
  border-radius: 999px;
  background: rgba(21, 17, 30, 0.5);
  color: var(--aa-purple);
  font-size: 12px;
  font-weight: 700;
}
.ai-product-testing .ai-covers__card-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.ai-product-testing .ai-covers__card-text { color: var(--aa-white, #cccbd2); font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   HOW  (3-col grid, green outlined pill badges + footnote box)
   ===================================================================== */
.ai-product-testing .ai-how__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ai-product-testing .ai-how__card {
  padding: 26px 26px 28px;
  border: 1px solid var(--aa-dark-green);
  border-radius: 18px;
  background: rgba(13, 26, 24, 0.5);
}
.ai-product-testing .ai-how__badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--aa-dark-green);
  background: transparent;
  color: var(--aa-green, #00cca6);
  font-size: 12px;
  font-weight: 700;
}
.ai-product-testing .ai-how__card-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.ai-product-testing .ai-how__card-text { color: var(--aa-white, #cccbd2); font-size: 14px; line-height: 1.55; }
.ai-product-testing .ai-how__note {
  margin-top: 26px;
  padding: 22px 28px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
}
.ai-product-testing .ai-how__note .ai-rte { color: var(--h-muted, #cccbd2); font-size: 14px; line-height: 1.6; }
.ai-product-testing .ai-how__note .ai-rte strong { color: #fff; }

/* =====================================================================
   PROCESS  (vertical timeline: tone badge + card, alternating purple/green)
   ===================================================================== */
.ai-product-testing .ai-process__list { list-style: none; margin: 0; padding: 0; max-width: 1120px; margin-inline: auto; display: grid; gap: 16px; }
.ai-product-testing .ai-process__step { display: flex; gap: 16px; align-items: stretch; }
/* Number badge: tall rounded rect, tone-coloured, with a connector to the next. */
.ai-product-testing .ai-process__num {
  position: relative;
  flex: none;
  width: 76px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: #fff; font-weight: 700; font-size: 20px;
}
.ai-product-testing .ai-process__step--purple .ai-process__num { background: var(--aa-purple-dark, #7d51f1); color: #cbb9f9; }
.ai-product-testing .ai-process__step--green .ai-process__num { background: var(--aa-dark-green, #00cca6); color: #68dcc7; }
/* Connector line bridging one badge to the next - a colour gradient that fades
   from this step's tone to the next step's tone (matches the homepage "Process"
   cards; vertical here since this timeline stacks top-to-bottom). */
.ai-product-testing .ai-process__step:not(:last-child) .ai-process__num::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px;
}
.ai-product-testing .ai-process__step--purple:not(:last-child) .ai-process__num::after {
  background: linear-gradient(to bottom, rgba(125, 81, 241, 0.6), rgba(0, 204, 166, 0.6));
}
.ai-product-testing .ai-process__step--green:not(:last-child) .ai-process__num::after {
  background: linear-gradient(to bottom, rgba(0, 204, 166, 0.6), rgba(125, 81, 241, 0.6));
}
/* Content card. */
.ai-product-testing .ai-process__body {
  flex: 1 1 auto; min-width: 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--h-border, rgba(255,255,255,0.07));
}
.ai-product-testing .ai-process__step-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ai-product-testing .ai-process__step--purple .ai-process__step-title { color: var(--aa-purple-light, #cbb9f9); }
.ai-product-testing .ai-process__step--green .ai-process__step-title { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-process__step-text { color: var(--aa-white, #cccbd2); font-size: 15px; line-height: 1.55; }
.ai-product-testing .ai-process__step-note { margin-top: 12px; font-size: 12px; font-weight: 500; }
.ai-product-testing .ai-process__step--purple .ai-process__step-note { color: var(--aa-purple ); }
.ai-product-testing .ai-process__step--green .ai-process__step-note { color: var(--aa-green ); }

/* =====================================================================
   CASE  (stat cards + gradient outcome box)
   ===================================================================== */
.ai-product-testing .ai-eyebrow--muted { color: var(--h-text, #fff); }
.ai-product-testing .ai-case__stats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ai-product-testing .ai-case__stat {
  padding: 26px 22px; text-align: center;
  border: 1px solid var(--h-border, rgba(255,255,255,0.09));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.ai-product-testing .ai-case__stat--purple { border-color: rgba(125, 81, 241, 0.4); }
.ai-product-testing .ai-case__stat--green { border-color: rgba(0, 204, 166, 0.4); background-color: rgba(13, 26, 24, .5); }
.ai-product-testing .ai-case__stat-value { display: block; font-size: 40px; font-weight: 700; line-height: 1; }
.ai-product-testing .ai-case__stat--purple .ai-case__stat-value { color: #8e6cff; }
.ai-product-testing .ai-case__stat--green .ai-case__stat-value { color: #3fe3b6; }
.ai-product-testing .ai-case__stat-label { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--h-muted, #cccbd2); }
.ai-product-testing .ai-case__stat-label strong { color: #fff; font-weight: 700; }
.ai-product-testing .ai-case__outcome {
  padding: 26px 32px;
  border-radius: 18px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.08));
  background:
    radial-gradient(38% 130% at 18% 45%, rgba(0, 204, 166, 0.3), transparent 60%),
    radial-gradient(42% 140% at 40% 25%, rgba(60, 90, 230, 0.3), transparent 62%),
    radial-gradient(48% 150% at 60% 45%, rgba(125, 81, 241, 0.24), transparent 64%),
    #100e17;
}
.ai-product-testing .ai-case__outcome-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ai-product-testing .ai-case__outcome-body { color: var(--h-muted, #cccbd2); font-size: 14px; line-height: 1.6; }

/* =====================================================================
   FINDING  (stacked cards: header + 4-column table)
   ===================================================================== */
.ai-product-testing .ai-finding__list { display: grid; gap: 24px; }
.ai-product-testing .ai-finding__card {
  border: 1px solid var(--h-border, rgba(255,255,255,0.09));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.ai-product-testing .ai-finding__head { text-align: center; padding: 24px 20px 20px; }
.ai-product-testing .ai-finding__mode { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.ai-product-testing .ai-finding__dot { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-finding__sev {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px; font-weight: 600;
}
.ai-product-testing .ai-finding__sev--amber { color: #FCC31E; border-color: rgb(168, 130, 20); background-color: rgba(32, 28, 17, .5);}
.ai-product-testing .ai-finding__sev--red { color: #E62D54; border-color: rgba(153, 30, 56, 0.7); background-color: rgba(29, 17, 20, .5);}
.ai-product-testing .ai-finding__sev--green { color: var(--aa-light-green, #68dcc7); border-color: rgba(0, 204, 166, 0.6); }
.ai-product-testing .ai-finding__table { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--h-border, rgba(255,255,255,0.08)); }
.ai-product-testing .ai-finding__col { padding: 20px 22px 24px; border-left: 1px solid var(--h-border, rgba(255,255,255,0.08)); text-align: center; }
.ai-product-testing .ai-finding__col:first-child { border-left: 0; }
.ai-product-testing .ai-finding__col-head { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-muted, #8b8a92); }
.ai-product-testing .ai-finding__col--actual .ai-finding__col-head { color: #ff7d95; }
.ai-product-testing .ai-finding__col--expected .ai-finding__col-head { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-finding__col-val { margin: 0; color: var(--h-muted, #cccbd2); font-size: 14px; line-height: 1.5; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.ai-product-testing .ai-testi__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ai-product-testing .ai-testi__card {
  padding: 30px 32px;
  border: 1px solid var(--h-border, rgba(255,255,255,0.09));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}
.ai-product-testing .ai-testi__card--purple { border-color: rgba(125, 81, 241, 0.4); }
.ai-product-testing .ai-testi__card--green { border-color: rgba(0, 204, 166, 0.4); background-color: rgba(13, 26, 24, .5 ); }
/* Star rating in a dark pill; stars take the card tone. */
.ai-product-testing .ai-testi__stars {
  display: inline-flex; gap: 5px;
  margin-bottom: 20px;
  padding: 7px 15px;
  border: 1px solid;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.ai-product-testing .ai-testi__card--purple .ai-testi__stars { color: #8e6cff; border-color: var(--aa-purple-dark)}
.ai-product-testing .ai-testi__card--green .ai-testi__stars { color: var(--aa-green, #00cca6); border-color: var(--aa-dark-green)}
.ai-product-testing .ai-testi__quote { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--aa-white , #cccbd2); }
.ai-product-testing .ai-testi__author { display: flex; align-items: center; gap: 14px; }
.ai-product-testing .ai-testi__avatar { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.ai-product-testing .ai-testi__meta { display: flex; flex-direction: column; }
.ai-product-testing .ai-testi__name { font-weight: 700; font-size: 15px; color: #fff; }
.ai-product-testing .ai-testi__role { color: var(--aa-white, #8b8a92); font-size: 13px; }

/* =====================================================================
   FAQ  (divider-separated rows; open question turns green)
   ===================================================================== */
.ai-product-testing .ai-faq__list { display: grid; gap: 0; }
.ai-product-testing .ai-faq__item {
  border-bottom: 1px solid var(--h-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  transition: background 0.2s ease;
}
.ai-product-testing .ai-faq__item.is-open { background: rgba(255, 255, 255, 0.02); }
.ai-product-testing .ai-faq__q-wrap { margin: 0; font-size: inherit; font-weight: inherit; }
.ai-product-testing .ai-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 24px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 700; color: #fff; text-align: left;
  transition: color 0.25s ease;
}
.ai-product-testing .ai-faq__item.is-open .ai-faq__q { color: var(--aa-green, #00cca6); }
.ai-product-testing .ai-faq__icon { flex: none; display: inline-flex; color: var(--h-muted, #cccbd2); transition: color 0.2s ease; }
/* Highlight the toggle icon on hover, and use the light green for the open cross. */
.ai-product-testing .ai-faq__q:hover .ai-faq__icon { color: var(--aa-light-green, #68dcc7); }
.ai-product-testing .ai-faq__item.is-open .ai-faq__icon { color: var(--aa-light-green, #68dcc7); }
.ai-product-testing .ai-faq__icon-close { display: none; }
.ai-product-testing .ai-faq__item.is-open .ai-faq__icon-arrow { display: none; }
.ai-product-testing .ai-faq__item.is-open .ai-faq__icon-close { display: inline-block; }
.ai-product-testing .ai-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-product-testing .ai-faq__item.is-open .ai-faq__a { grid-template-rows: 1fr; }
/* Padding stays constant (never toggled with .is-open) so opening/closing can't
   snap the content box or shift alignment. The grid row height animates the reveal,
   while the inner fades and drifts so the text flows out and disappears smoothly. */
.ai-product-testing .ai-faq__a-inner {
  overflow: hidden; min-height: 0;
  padding: 0 24px 26px;
  color: var(--h-muted, #cccbd2); font-size: 15px; line-height: 1.6;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-product-testing .ai-faq__item.is-open .ai-faq__a-inner { opacity: 1; transform: translateY(0); }

/* =====================================================================
   FINAL CTA  (glass form card + trust points)
   ===================================================================== */
.ai-product-testing .ai-cta__card {
  margin-top: 8px;
  padding: 38px 40px 34px;
  border-radius: 26px;
  border: 1px solid rgba(142, 108, 255, 0.35);
  background: linear-gradient(135deg, rgba(21, 17, 30, 0.5) 0%, rgba(83, 54, 161, 0.5) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-product-testing .ai-cta__notice { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.ai-product-testing .ai-cta__notice--ok { background: rgba(0, 204, 166, 0.14); border: 1px solid rgba(0, 204, 166, 0.4); color: var(--aa-light-green, #68dcc7); }
.ai-product-testing .ai-cta__notice--err { background: rgba(230, 45, 84, 0.14); border: 1px solid rgba(230, 45, 84, 0.4); color: #ff7d95; }
.ai-product-testing .ai-cta__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ai-product-testing .ai-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.ai-product-testing .ai-cta__field { display: flex; flex-direction: column; gap: 8px; }
.ai-product-testing .ai-cta__field--wide { grid-column: 1 / -1; }
.ai-product-testing .ai-cta__field label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aa-purple-light, #cbb9f9); }
.ai-product-testing .ai-cta__req { color: #ff7d95; }
.ai-product-testing .ai-cta__field input,
.ai-product-testing .ai-cta__field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 8, 20, 0.55);
  color: #fff;
  font: inherit;
  font-size: 15px;
}
.ai-product-testing .ai-cta__field textarea { resize: vertical; min-height: 110px; }
.ai-product-testing .ai-cta__field input::placeholder,
.ai-product-testing .ai-cta__field textarea::placeholder { color: var(--h-muted-2, #8b8a92); }
.ai-product-testing .ai-cta__field input:focus,
.ai-product-testing .ai-cta__field textarea:focus {
  outline: none;
  border-color: var(--aa-purple, #7d51f1);
  background: #0c0a18;
  box-shadow: 0 0 0 3px rgba(125, 81, 241, 0.25);
}
/* Autofill: WebKit repaints the field with its own bg + text colour, wiping our
   dark styling. Mask the bg with an inset box-shadow, force the text/caret colour,
   and defer the native bg repaint with a very long transition. */
.ai-product-testing .ai-cta__field input:-webkit-autofill,
.ai-product-testing .ai-cta__field textarea:-webkit-autofill,
.ai-product-testing .ai-cta__field input:-webkit-autofill:hover,
.ai-product-testing .ai-cta__field textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0c0a18 inset;
  box-shadow: 0 0 0 1000px #0c0a18 inset;
  border-color: rgba(255, 255, 255, 0.12);
  transition: background-color 100000s ease-in-out 0s;
}
.ai-product-testing .ai-cta__field input:-webkit-autofill:focus,
.ai-product-testing .ai-cta__field textarea:-webkit-autofill:focus {
  border-color: var(--aa-purple, #7d51f1);
  -webkit-box-shadow: 0 0 0 1000px #0c0a18 inset, 0 0 0 3px rgba(125, 81, 241, 0.25);
  box-shadow: 0 0 0 1000px #0c0a18 inset, 0 0 0 3px rgba(125, 81, 241, 0.25);
}
/* Inline validation (Figma: error state = red label + red field + message). */
.ai-product-testing .ai-cta__field.has-error label { color: #ff6b85; }
.ai-product-testing .ai-cta__field.has-error input,
.ai-product-testing .ai-cta__field.has-error textarea {
  border-color: #e62d54;
  background: rgba(230, 45, 84, 0.08);
}
.ai-product-testing .ai-cta__field.has-error input:focus,
.ai-product-testing .ai-cta__field.has-error textarea:focus {
  border-color: #e62d54;
  box-shadow: 0 0 0 3px rgba(230, 45, 84, 0.25);
}
.ai-product-testing .ai-cta__field.has-error input::placeholder,
.ai-product-testing .ai-cta__field.has-error textarea::placeholder { color: rgba(255, 125, 149, 0.7); }

/* JS status live-region (generic error / success, only shown when non-empty). */
.ai-product-testing .ai-cta__status { width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center; }
.ai-product-testing .ai-cta__status[hidden] { display: none; }
.ai-product-testing .ai-cta__status.is-success { background: rgba(10, 8, 20, 0.72); border: 1px solid rgba(203, 185, 249, 0.3); color: #e7defb; }
.ai-product-testing .ai-cta__status.is-error { background: rgba(230, 45, 84, 0.14); border: 1px solid rgba(230, 45, 84, 0.55); color: #ff7d95; }

/* Mandatory PII-processing consent checkbox (purple accent to match the CTA). */
.ai-product-testing .ai-cta__field--consent { margin-top: 22px; }
.ai-product-testing .ai-cta__consent {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.ai-product-testing .ai-cta__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ai-product-testing .ai-cta__consent-box {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 8, 20, 0.55); position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-product-testing .ai-cta__consent-box::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg); opacity: 0; transition: opacity 0.12s ease;
}
.ai-product-testing .ai-cta__consent input:checked ~ .ai-cta__consent-box {
  background: var(--aa-purple, #7d51f1); border-color: var(--aa-purple, #7d51f1);
}
.ai-product-testing .ai-cta__consent input:checked ~ .ai-cta__consent-box::after { opacity: 1; }
.ai-product-testing .ai-cta__consent input:focus-visible ~ .ai-cta__consent-box {
  outline: 2px solid var(--aa-purple, #7d51f1); outline-offset: 2px;
}
.ai-product-testing .ai-cta__consent-label {
  font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: rgba(255, 255, 255, 0.85);
}
.ai-product-testing .ai-cta__consent-label a {
  color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
.ai-product-testing .ai-cta__field--consent.has-error .ai-cta__consent-box { border-color: #e62d54; }
.ai-product-testing .ai-cta__field--consent.has-error .ai-cta__consent-label { color: #ff7d95; }

.ai-product-testing .ai-btn--purple-solid { background: linear-gradient(135deg, #8b5cf6, #6d3fe0); color: #fff; }
.ai-product-testing .ai-btn--purple-solid:hover { transform: translateY(-1px); }
.ai-product-testing .ai-cta__turnstile { margin: 18px 0 4px; }
.ai-product-testing .ai-cta__btn { width: 100%; margin-top: 26px; font-size: 16px; padding: 16px 32px; }
/* In-flight state: grey/dim the button + spinner (the SVG arrow is hidden). */
.ai-product-testing .ai-cta__btn.is-loading {
  background: linear-gradient(135deg, #5b4b86, #4a3d7e);
  color: rgba(255, 255, 255, 0.7);
  cursor: progress;
}
.ai-product-testing .ai-cta__btn.is-loading:hover { transform: none; }
.ai-product-testing .ai-cta__btn.is-loading svg { display: none; }
.ai-product-testing .ai-cta__btn.is-loading::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qmaiBtnSpin 0.7s linear infinite;
}
@keyframes qmaiBtnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ai-product-testing .ai-cta__btn.is-loading::after { animation: none; }
}

/* Result icons: only the arrow shows at rest; loading swaps in the spinner
   (above); success/error swap in an animated check / cross (right side). */
.ai-product-testing .ai-cta__btn-ico--check,
.ai-product-testing .ai-cta__btn-ico--cross { display: none; }
.ai-product-testing .ai-cta__btn.is-success .ai-cta__btn-ico--arrow,
.ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--arrow { display: none; }
.ai-product-testing .ai-cta__btn.is-success .ai-cta__btn-ico--check,
.ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--cross { display: inline-block; }

/* Success keeps the purple button (check draws in); error turns red with a cross. */
.ai-product-testing .ai-cta__btn.is-success,
.ai-product-testing .ai-cta__btn.is-error { cursor: default; opacity: 1; color: #fff; }
.ai-product-testing .ai-cta__btn.is-success:hover,
.ai-product-testing .ai-cta__btn.is-error:hover { transform: none; }
.ai-product-testing .ai-cta__btn.is-error { background: linear-gradient(135deg, #ff6b6b, #e5484d); }

.ai-product-testing .ai-cta__btn-ico--check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.ai-product-testing .ai-cta__btn.is-success .ai-cta__btn-ico--check { animation: qmaiIcoPop 0.32s ease; }
.ai-product-testing .ai-cta__btn.is-success .ai-cta__btn-ico--check path { animation: qmaiIcoDraw 0.4s ease 0.05s forwards; }
.ai-product-testing .ai-cta__btn-ico--cross .ai-x1,
.ai-product-testing .ai-cta__btn-ico--cross .ai-x2 { stroke-dasharray: 16; stroke-dashoffset: 16; }
.ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--cross { animation: qmaiIcoPop 0.32s ease; }
.ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--cross .ai-x1 { animation: qmaiIcoDraw 0.2s ease forwards; }
.ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--cross .ai-x2 { animation: qmaiIcoDraw 0.2s ease 0.16s forwards; }
@keyframes qmaiIcoDraw { to { stroke-dashoffset: 0; } }
@keyframes qmaiIcoPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ai-product-testing .ai-cta__btn-ico--check path,
  .ai-product-testing .ai-cta__btn-ico--cross .ai-x1,
  .ai-product-testing .ai-cta__btn-ico--cross .ai-x2 { stroke-dashoffset: 0; animation: none; }
  .ai-product-testing .ai-cta__btn.is-success .ai-cta__btn-ico--check,
  .ai-product-testing .ai-cta__btn.is-error .ai-cta__btn-ico--cross { animation: none; }
}
.ai-product-testing .ai-cta__note { margin-top: 16px; text-align: center; color: var(--aa-purple-light, #cbb9f9); font-size: 13px; }
.ai-product-testing .ai-cta__shortcode { text-align: left; }

/* Trust points below the card. */
.ai-product-testing .ai-cta__points {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
}
.ai-product-testing .ai-cta__points li { display: inline-flex; align-items: center; gap: 8px; color: var(--h-muted, #cccbd2); font-size: 13.5px; }
.ai-product-testing .ai-cta__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aa-green, #00cca6); flex: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  /* minmax(0,1fr) (not plain 1fr) so the single column can shrink below its
     content's intrinsic width — otherwise a wide child (panel/chat) forces the
     column past the viewport and .ai-hero's overflow:hidden clips the text. */
  .ai-product-testing .ai-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ai-product-testing .ai-hero .ai-h { font-size: 46px; }
  .ai-product-testing .ai-hero__panel { max-width: 560px; }
  .ai-product-testing .ai-chat { min-height: 330px; }
  .ai-product-testing .ai-whatis__inner,
  .ai-product-testing .ai-layer__inner { grid-template-columns: 1fr; gap: 36px; }
  .ai-product-testing .ai-fit__grid { grid-template-columns: repeat(2, 1fr); }
  .ai-product-testing .ai-covers__grid,
  .ai-product-testing .ai-how__grid { grid-template-columns: repeat(2, 1fr); }
  .ai-product-testing .ai-case__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ai-product-testing .ai-section { padding: 56px 0; }
  .ai-product-testing .ai-hero { padding: 132px 0 64px; }
  /* Mobile hero background: use the dedicated portrait image (hero-bg-mobile.*)
     when present; it overrides the desktop image at this breakpoint. */
  .ai-product-testing .ai-hero--has-bg-mobile { background-image: var(--qmai-hero-bg-mobile); background-size: cover; background-position: center; background-repeat: no-repeat; }
  .ai-product-testing .ai-hero--has-bg-mobile::before { display: none; }
  /* No dedicated mobile image: the wide desktop hero-bg cropped to `cover` on a
     narrow viewport only shows its dark centre. Drop it here and reveal the
     portrait aurora (::before) below instead. Drop a hero-bg-mobile.* asset in
     assets/images/ai-product-testing/ to override this with a real image. */
  .ai-product-testing .ai-hero--has-bg:not(.ai-hero--has-bg-mobile) { background-image: none; }
  .ai-product-testing .ai-hero--has-bg:not(.ai-hero--has-bg-mobile)::before { display: block; }
  /* Interim portrait aurora (purple flowing vertically down the right), shown
     until a hero-bg-mobile.* image is added. */
  .ai-product-testing .ai-hero::before {
    inset: -60px;
    background:
      radial-gradient(72% 20% at 90% 15%, rgba(110, 63, 224, 0.60), transparent 62%),
      radial-gradient(96% 24% at 76% 45%, rgba(150, 112, 255, 0.52), transparent 60%),
      radial-gradient(100% 22% at 42% 60%, rgba(83, 54, 161, 0.48), transparent 66%),
      radial-gradient(60% 16% at 88% 80%, rgba(90, 60, 200, 0.28), transparent 60%);
    filter: blur(50px);
  }
  .ai-product-testing .ai-hero .ai-h { font-size: clamp(52px, 16vw, 68px); }
  .ai-product-testing .ai-section__head { margin-bottom: 36px; }
  .ai-product-testing .ai-section__head .ai-h,
  .ai-product-testing .ai-h { font-size: 30px; }
  /* FAQ questions read larger on mobile per the design (bigger than the 18px used
     at desktop, to dominate each stacked row). */
  .ai-product-testing .ai-faq__q { font-size: 20px; padding: 22px 20px; }
  .ai-product-testing .ai-fit__grid,
  .ai-product-testing .ai-covers__grid,
  .ai-product-testing .ai-how__grid,
  .ai-product-testing .ai-testi__grid { grid-template-columns: 1fr; }
  /* "For your team" cards: the 2x2 checkerboard (purple/green/green/purple) flattens
     to purple/green/green/purple in one column. Swap the last two so the single
     column alternates purple/green/purple/green per the design. Desktop unchanged. */
  .ai-product-testing .ai-fit__card:nth-child(3) { order: 2; }
  .ai-product-testing .ai-fit__card:nth-child(4) { order: 1; }
  /* "Covers" cards: the 3-column grid source order puts Edge cases before Output;
     the single mobile column should read Output before Edge cases per the design.
     Swap those two (keep Regression last). Multi-column layouts keep source order. */
  .ai-product-testing .ai-covers__card:nth-child(4) { order: 5; }
  .ai-product-testing .ai-covers__card:nth-child(5) { order: 4; }
  .ai-product-testing .ai-covers__card:nth-child(6) { order: 6; }
  /* Finding table: stack the 4 columns with horizontal dividers. */
  .ai-product-testing .ai-finding__table { grid-template-columns: 1fr; }
  .ai-product-testing .ai-finding__col { border-left: 0; border-top: 1px solid var(--h-border, rgba(255,255,255,0.08)); }
  .ai-product-testing .ai-finding__col:first-child { border-top: 0; }
  .ai-product-testing .ai-hero__features { grid-template-columns: 1fr 1fr; }
  .ai-product-testing .ai-hero__ctas .ai-btn--green { width: 100%; }
  /* Mobile hero is a single centered column (desktop two-column stays left). */
  .ai-product-testing .ai-hero__main { text-align: center; }
  .ai-product-testing .ai-hero__text { margin-left: auto; margin-right: auto; text-align: left; }
  .ai-product-testing .ai-hero__ctas { justify-content: center; }
  /* Full-width mobile CTA centers its label (override the desktop-animation flex-start). */
  .ai-product-testing .ai-hero__ctas .ai-btn { justify-content: center; }
  /* Panel CTA: its nowrap label is wider than the narrow panel body, so the
     desktop `width: fit-content; margin: auto` overflows right instead of
     centering. Go full-width, center the label, and shrink the font so the
     one-line label fits the panel body. */
  .ai-product-testing .ai-hero__panel .ai-hero__panel-cta { width: 100%; justify-content: center; font-size: 16px; }
  .ai-product-testing .ai-hero__features { margin-left: auto; margin-right: auto; }
  .ai-product-testing .ai-chat { min-height: 350px; }
  .ai-product-testing .ai-process__num { width: 48px; font-size: 16px; border-radius: 12px; }
  .ai-product-testing .ai-process__body { padding: 18px 18px; }
  .ai-product-testing .ai-cta__card { padding: 26px 22px; }
  .ai-product-testing .ai-cta__grid { grid-template-columns: 1fr; }
  /* Layer cards: let the badge wrap below the text on narrow screens. */
  .ai-product-testing .ai-layer__card { flex-wrap: wrap; gap: 14px; }
  .ai-product-testing .ai-layer__card-body { flex-basis: calc(100% - 64px); }
  .ai-product-testing .ai-layer__badge { margin-left: 64px; }
  .ai-product-testing .ai-layer__llm { padding: 24px 22px; }

  /* ---------- "What is" section (mobile) ---------- */
  /* Copy is centered on mobile (desktop keeps its two-column left-aligned grid). */
  .ai-product-testing .ai-whatis__head { text-align: center; }
  .ai-product-testing .ai-whatis__head .ai-h { font-size: 40px; }
  .ai-product-testing .ai-whatis__lead,
  .ai-product-testing .ai-whatis__text .ai-rte { text-align: center; }

  /* Comparison table restructures from a scrolling grid into stacked blocks: each
     row label becomes a centered heading spanning full width, with the
     deterministic + AI values side-by-side beneath it. Every value sits in its own
     box (gray for deterministic, purple for AI) instead of the shared column grid. */
  .ai-product-testing .ai-whatis__table-wrap { overflow-x: visible; padding: 0; }
  .ai-product-testing .ai-whatis__table { display: block; width: 100%; min-width: 0; }
  .ai-product-testing .ai-whatis__table thead,
  .ai-product-testing .ai-whatis__table tbody { display: block; }
  .ai-product-testing .ai-whatis__table thead tr,
  .ai-product-testing .ai-whatis__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .ai-product-testing .ai-whatis__table thead tr { grid-template-areas: "det ai"; }
  .ai-product-testing .ai-whatis__table tbody tr { grid-template-areas: "label label" "det ai"; row-gap: 10px; margin-top: 26px; }
  .ai-product-testing .ai-whatis__corner { display: none; }
  .ai-product-testing .ai-whatis__table .ai-whatis__ch { grid-area: det; }
  .ai-product-testing .ai-whatis__table .ai-whatis__ch--ai { grid-area: ai; }
  .ai-product-testing .ai-whatis__table .ai-whatis__rh { grid-area: label; }
  .ai-product-testing .ai-whatis__table .ai-whatis__cd { grid-area: det; }
  .ai-product-testing .ai-whatis__table .ai-whatis__ca { grid-area: ai; }

  /* Reset the desktop cell-edge borders + corner radii, then re-box each cell. */
  .ai-product-testing .ai-whatis__table thead th,
  .ai-product-testing .ai-whatis__table thead td,
  .ai-product-testing .ai-whatis__table tbody th,
  .ai-product-testing .ai-whatis__table tbody td { border: 0; border-radius: 0; }
  /* Row label -> centered uppercase heading, no box. */
  .ai-product-testing .ai-whatis__table .ai-whatis__rh { color: var(--h-muted, #9a99a6); text-align: center; padding: 2px 0 4px; }
  /* Deterministic value + header: gray box. */
  .ai-product-testing .ai-whatis__table .ai-whatis__ch,
  .ai-product-testing .ai-whatis__table .ai-whatis__cd { border: 1px solid var(--h-border, rgba(255,255,255,0.14)); border-radius: 12px; }
  /* AI value + header: purple box (overrides the gray for the shared .ai-whatis__ch). */
  .ai-product-testing .ai-whatis__table .ai-whatis__ch--ai,
  .ai-product-testing .ai-whatis__table .ai-whatis__ca { border: 1.5px solid var(--aa-purple-dark, #5336a1); border-radius: 12px; }
}
@media (max-width: 480px) {
  .ai-product-testing .ai-case__stats { grid-template-columns: 1fr; }
  /* Single mobile column groups the count stats (11, 4, 3) and puts the percentage
     (23%) last per the design. Source order is 11, 4, 23%, 3, so swap the last two.
     Each stat keeps its own tone (23% purple, 3 green) since tone rides the class. */
  .ai-product-testing .ai-case__stat:nth-child(3) { order: 4; }
  .ai-product-testing .ai-case__stat:nth-child(4) { order: 3; }
  .ai-product-testing .ai-hero__features { grid-template-columns: 1fr; }
  .ai-product-testing .ai-chat { min-height: 300px; }
}

/* ---------- Focus + reduced motion ---------- */
.ai-product-testing a:focus-visible,
.ai-product-testing button:focus-visible {
  outline: 2px solid var(--h-purple, #8e6cff);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .ai-product-testing *,
  .ai-product-testing *::before,
  .ai-product-testing *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}