/* ===== AI assistants page — the pieces the shared stylesheet does not already have.
   Built only from the tokens in styles.css (:root): no new colours, radii or easing.
   Same pattern as analytics/analytics.css. Direction A of the design canvas (MKT-1945); its layout
   rules are scoped under .v-a. ===== */

/* ---------- shared: hero pieces ---------- */
.ai-hero-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;color:var(--ink-600);font-size:14px}
.ai-hero-note img{width:18px;height:18px}
.ai-hero-note .dot{width:4px;height:4px;border-radius:var(--r-pill);background:var(--ink-400)}
.ai-hero-note b{font-weight:600;color:var(--ink)}

/* the chat window on a light ground: same player as the homepage #dev band, lighter frame */
.ai-stack{min-width:0;display:flex;flex-direction:column;gap:14px}
.ai-stack-light .stack-tab{background:var(--white);border-color:var(--gray-200);color:var(--ink-600)}
.ai-stack-light .stack-tab:hover{border-color:var(--gray-300);color:var(--ink)}
.ai-stack-light .stack-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.ai-stack-light .sc{border-color:var(--gray-200);box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 48px -24px rgba(16,24,40,.28)}
.ai-stack .stack-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ai-stack .stack-tab img{width:16px;height:16px;flex:none}
.ai-stack-light .stack-tab.is-on img[src*="chatgpt"]{filter:invert(1)}
.ai-stack .stack-win{height:var(--stack-h,520px)}

/* ---------- shared: logo strip ---------- */
.ai-logos{padding-bottom:var(--section-gap)}
.ai-logos-t{text-align:center;font-size:14px;font-weight:600;color:var(--ink-500);letter-spacing:.02em}
.ai-logo-row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:40px;margin-top:22px;overflow:hidden}
/* one row only: drop logos from the end as the row narrows */
@media (max-width:1180px){.ai-logo-row img:nth-child(n+6){display:none}}
@media (max-width:767px){.ai-logo-row{justify-content:center;gap:28px}.ai-logo-row img:nth-child(n+4){display:none}}
.ai-logo-row img{height:22px;width:auto;opacity:.7;filter:grayscale(1)}

/* ---------- shared: section head variants ---------- */
.ai-head-center{margin:0 auto;align-items:center;text-align:center}
.ai-sec-gap{margin-top:48px}

/* ---------- "Ask it things like…": the prompt + result card (A and B) ---------- */
.ai-ask-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.ai-ask-shot{background:var(--admin-page);border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);padding:18px 18px 0;display:flex;justify-content:center;margin-top:auto}
.ai-ask-foot{padding:12px 20px 14px}
.ai-ask-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px 10px 0 0;display:block;
  box-shadow:0 -1px 0 var(--gray-200),0 10px 24px -14px rgba(16,24,40,.35)}
.ai-ask-body{padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px}
.ai-goal{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.ai-bubble{align-self:flex-start;background:var(--peach);color:var(--ink);font-size:15px;line-height:23px;padding:11px 15px;border-radius:16px 16px 16px 4px}
.ai-done{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--success-fg)}
.ai-also{margin-top:28px;text-align:center;color:var(--ink-600);font-size:15px}
.ai-also b{color:var(--ink);font-weight:600}

/* ---------- Connect ---------- */
.ai-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:36px}
.ai-tab{font-family:inherit;font-size:15px;font-weight:600;min-height:44px;padding:10px 20px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--gray-200);background:var(--white);color:var(--ink-600);display:inline-flex;align-items:center;gap:8px;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.ai-tab img{width:18px;height:18px}
.ai-tab:hover{border-color:var(--gray-300);color:var(--ink)}
.ai-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ai-tab[aria-selected="true"] img[src*="chatgpt"]{filter:invert(1)}
.ai-tab:focus-visible{outline:2px solid var(--focus-border);outline-offset:2px}
.ai-panel{margin-top:28px}
.ai-panel:focus-visible{outline:2px solid var(--focus-border);outline-offset:6px;border-radius:var(--r-card)}
.ai-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ai-step{padding:22px;display:flex;flex-direction:column;gap:14px}
.ai-step-n{width:28px;height:28px;border-radius:var(--r-pill);background:var(--orange-100);color:var(--orange);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center}
.ai-step-t{font-size:17px;font-weight:600;line-height:24px}
.ai-step-b{font-size:15px;line-height:23px;color:var(--ink-600)}
.ai-step-b b{color:var(--ink);font-weight:600}
/* the little UI each step points at */
.ai-mini{margin-top:auto;background:var(--paper);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ai-mini-row{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--gray-200);border-radius:9px;padding:8px 10px;color:var(--ink-600)}
.ai-mini-row.is-hi{border-color:var(--focus-border);color:var(--ink);font-weight:600;box-shadow:0 0 0 3px var(--focus-ring)}
.ai-mini-row .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-url{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.ai-copy{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--gray-300);background:var(--white);color:var(--ink);
  border-radius:7px;padding:0 10px;min-height:32px;cursor:pointer;flex:none}
.ai-copy:hover{border-color:var(--ink-400)}
.ai-copy.is-done{background:var(--success-bg);border-color:var(--success-bg);color:var(--success-fg)}
.ai-mini-allow{display:flex;gap:6px;margin-top:2px}
.ai-mini-allow span{flex:1;text-align:center;border-radius:8px;padding:7px 0;font-weight:600;font-size:12.5px;border:1px solid var(--gray-300);background:var(--white)}
.ai-mini-allow span.is-go{background:var(--orange);border-color:var(--orange);color:#fff}
.ai-done-bar{margin-top:20px;display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 22px;border-radius:var(--r-card);background:var(--white);border:1px dashed var(--gray-300)}
.ai-done-bar p{font-size:15px;line-height:23px;color:var(--ink-600)}
.ai-done-bar p b{color:var(--ink);font-weight:600}
.ai-dev{padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.ai-dev-logos{display:flex;gap:10px;flex-wrap:wrap}
.ai-dev-logos span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gray-200);border-radius:var(--r-pill);padding:7px 14px;font-size:14px;font-weight:500}
.ai-dev-logos img{width:16px;height:16px}

/* the setup block runs into the trust section: three quarters of the usual gap */
#connect{padding-bottom:calc(var(--section-gap) * .75)}

/* ---------- Trust band: small on purpose ---------- */
.ai-trust{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:32px 36px;
  background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-window)}
.ai-trust-h{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.ai-trust-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ai-trust-list li{display:flex;gap:12px;font-size:15px;line-height:23px;color:var(--ink-600)}
.ai-trust-list li b{color:var(--ink);font-weight:600}
.ai-trust-list .ico-sm{width:28px;height:28px;color:var(--orange)}
.ai-consent{background:var(--paper);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ai-consent-top{display:flex;align-items:center;gap:10px;padding:2px 4px 8px}
.ai-consent-top img{width:26px;height:26px}
.ai-consent-top b{display:block;font-size:14px}
.ai-consent-top span{color:var(--ink-600);font-size:12.5px}
.ai-perm{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--gray-200);border-radius:10px;padding:9px 12px}
.ai-perm .grow{min-width:0}
.ai-perm b{display:block;font-weight:500;color:var(--ink)}
.ai-perm span{display:block;color:var(--ink-600);font-size:12px}
.ai-box{width:18px;height:18px;border-radius:5px;flex:none;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.ai-box svg{transition:opacity .2s linear,transform .3s var(--ease)}
/* shipped state is ticked; the script un-ticks and plays them in one by one */
.ai-consent.is-anim .ai-box{background:var(--white);border:1.5px solid var(--gray-300)}
.ai-consent.is-anim .ai-box svg{opacity:0;transform:scale(.4)}
.ai-consent.is-anim .ai-perm.is-on .ai-box{background:var(--orange);border-color:var(--orange)}
.ai-consent.is-anim .ai-perm.is-on .ai-box svg{opacity:1;transform:none}

/* ---------- Build it in chat, measure it in OptiMonk ---------- */

/* ---------- FAQ (same component as pricing/) ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:64px;align-items:start}
.faq-head{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.faq details{border-top:1px solid var(--gray-300)}
.faq details:last-child{border-bottom:1px solid var(--gray-300)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;
  font-size:17px;font-weight:600;line-height:25px;cursor:pointer;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 20px;color:var(--ink-500);transition:transform 200ms var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg);color:var(--orange)}
.faq summary:focus-visible{outline:2px solid var(--focus-border);outline-offset:4px;border-radius:6px}
.faq .ans{padding:0 44px 22px 0;color:var(--ink-600);font-size:15px;line-height:24px}

/* =====================================================================
   A · Sister page — the Analytics layout: copy left, chat right
   ===================================================================== */
.v-a #hero .wrap.ai-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center;text-align:left}
.v-a .ai-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.v-a .ai-hero-copy h1{margin-top:14px}
.v-a .ai-hero-copy h1 .line{display:inline}
.v-a .ai-hero-copy h1 .line+.line::before{content:" "}
.v-a .ai-hero-copy .hero-lead{max-width:520px;margin-top:20px}
.v-a .ai-hero-cta{margin-top:32px;justify-content:flex-start}
.v-a .ai-where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.v-a .ai-where-card{padding:28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.v-a .ai-where-card .ico-well{color:var(--orange)}
.v-a .ai-where-card .card-title{margin-top:6px}
.v-a .ai-where-ink{position:absolute;right:-26px;bottom:-30px;width:130px;opacity:.14;pointer-events:none}
.v-a .ai-asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}

/* ---------- breakpoints (same three steps as styles.css) ---------- */
@media (max-width:1180px){
}
@media (max-width:1023px){
  .v-a #hero .wrap.ai-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .v-a .ai-where,.v-a .ai-asks,.ai-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-trust,.ai-dev,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
}
@media (max-width:767px){
  .v-a .ai-where,.v-a .ai-asks,.ai-steps{grid-template-columns:minmax(0,1fr)}
  .ai-hero-cta{width:100%;flex-direction:column;align-items:stretch}
  .ai-hero-cta .btn{width:100%}
  .ai-trust{padding:24px 20px;gap:24px}
  .ai-done-bar{padding:16px}
  .faq .ans{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
}