/* Qtell page "ai-integrations". Generated by docs/website/convert-page.py from the page mockup;
   do not edit by hand. Markup: framework/pages/ai-integrations/. */
/* Base rules for this page's converted mockup sections, scoped to the wrapper so nothing leaks to the rest of the
   site. Three classes (0,3,0) beat the parent theme's element rules (.qtell-section h2, .page-content ul li,
   svg{width:100%}); the generated class rules below share that specificity and win by order. */
.qtell-pg-ai-integrations {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  --inv-cta-b: #3f5472;
  --inv-cta-c: #2f7280;
}
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations {
  font-family: var(--qtell-font-body);
  color: var(--qtell-purple-900);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  text-align: start;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(*, *::before, *::after) { box-sizing: border-box; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(ul, ol) { padding: 0; list-style: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(li) { margin: 0; padding-left: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations li::before, .qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations li::after { content: none; display: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h1, h2, h3, h4) { font-family: inherit; font-weight: 700; line-height: normal; letter-spacing: inherit; text-transform: none; color: inherit; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h1) { font-size: 2em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h2) { font-size: 1.5em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h3) { font-size: 1.17em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(h4) { font-size: 1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations span { font-weight: inherit; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(b, strong) { font-weight: bolder; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(svg) { max-width: none; }
/* the theme forces max-width: 100% on images; the mockup has none */
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(img) { max-width: none; }
/* The theme styles every <button> (padding, 30px radius, white text, teal background forced with !important). Back to
   the browser default; generated classes set what the mockup sets (backgrounds with !important so they beat the theme's). */
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations button { all: revert; background-color: buttonface !important; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations summary { list-style: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations summary::-webkit-details-marker { display: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations details[open] summary svg { transform: rotate(45deg); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(a) { color: var(--qtell-purple-700); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(a:hover) { color: var(--qtell-accent-ink); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations :where(:focus-visible) { outline: 3px solid var(--qtell-teal-700); outline-offset: 3px; }

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s1 { position: relative; overflow: hidden; padding: clamp(56px,8vw,108px) 0 clamp(52px,7vw,92px); background: var(--qtell-white); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s2 { position: absolute; inset: 0; pointer-events: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s3 { position: absolute; width: 64vmax; height: 64vmax; left: -26vmax; top: -38vmax; border-radius: 50%; background: radial-gradient(closest-side,var(--qtell-purple-200),transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s4 { position: absolute; width: 58vmax; height: 58vmax; right: -28vmax; top: -20vmax; border-radius: 50%; background: radial-gradient(closest-side,var(--qtell-blend-light),transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s5 { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s6 { max-width: 880px; display: flex; flex-direction: column; align-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s7 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qtell-accent-ink); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s8 { width: 8px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s9 { height: 13px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s10 { fill: var(--qtell-teal-600); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s11 { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 36px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s12 { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--qtell-purple-700); white-space: nowrap; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s13 { width: 26px; height: 26px; object-fit: contain; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s14 { width: 26px; height: 26px; object-fit: contain; flex: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s15 { margin-top: 22px; max-width: 20ch; font-size: clamp(36px,4.8vw,62px); margin-top: 32px; line-height: 1.04; letter-spacing: -.045em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s16 { margin-top: 24px; max-width: 62ch; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-900); font-weight: 500; text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s17 { margin-top: 14px; max-width: 62ch; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s18 { margin-top: 32px; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--qtell-purple-700); color: var(--qtell-white); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s19 { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); margin-top: clamp(48px,6vw,80px); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s20 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); max-width: 1040px; margin: 0 auto; text-align: left; gap: 20px clamp(20px,3vw,36px); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s21 { padding-top: 18px; border-top: 3px solid var(--qtell-teal-600); font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--qtell-purple-900); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s22 { margin-top: 32px; font-size: clamp(19px,1.8vw,23px); line-height: 1.45; letter-spacing: -.01em; font-weight: 600; color: var(--qtell-purple-700); text-wrap: pretty; text-align: center; max-width: 40ch; margin-left: auto; margin-right: auto; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s23 { padding: clamp(52px,7vw,92px) 0; background: var(--qtell-background-soft); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s24 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s25 { max-width: 820px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s26 { margin-top: 18px; font-size: clamp(32px,4vw,50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s27 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); margin-top: clamp(36px,4.5vw,56px); display: flex; flex-wrap: wrap; gap: 40px clamp(40px,6vw,96px); align-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s28 { flex: 1.1 1 440px; min-width: 0; max-width: 600px; container-type: inline-size; border-radius: 28px; background: linear-gradient(135deg,var(--qtell-blend-light),var(--qtell-purple-100)); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s29 { font-size: calc(100cqw / 50); line-height: 1.3; padding: 2.6em 2.4em; display: flex; flex-direction: column; align-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s30 { position: relative; width: 100%; height: 6.4em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s31 { --i: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 1.1em; background: var(--qtell-white); border: 1.5px solid var(--qtell-purple-700); box-shadow: 0 1.4em 2.6em -1.8em color-mix(in srgb, var(--qtell-purple-700) 60%, transparent); font-size: 1.6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s32 { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s33 { width: 1.6em; height: 1.6em; object-fit: contain; flex: none; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s34 { font-weight: 800; letter-spacing: -.01em; color: var(--qtell-purple-900); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s35 { --i: 1; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 1.1em; background: var(--qtell-white); border: 1.5px solid var(--qtell-purple-700); box-shadow: 0 1.4em 2.6em -1.8em color-mix(in srgb, var(--qtell-purple-700) 60%, transparent); font-size: 1.6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s36 { --i: 2; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 1.1em; background: var(--qtell-white); border: 1.5px solid var(--qtell-purple-700); box-shadow: 0 1.4em 2.6em -1.8em color-mix(in srgb, var(--qtell-purple-700) 60%, transparent); font-size: 1.6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s37 { --i: 3; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 1.1em; background: var(--qtell-white); border: 1.5px solid var(--qtell-purple-700); box-shadow: 0 1.4em 2.6em -1.8em color-mix(in srgb, var(--qtell-purple-700) 60%, transparent); font-size: 1.6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s38 { display: flex; gap: .5em; margin-top: 1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s39 { --i: 0; width: .7em; height: .7em; border-radius: 50%; background: #d8cfdc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s40 { --i: 1; width: .7em; height: .7em; border-radius: 50%; background: #d8cfdc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s41 { --i: 2; width: .7em; height: .7em; border-radius: 50%; background: #d8cfdc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s42 { --i: 3; width: .7em; height: .7em; border-radius: 50%; background: #d8cfdc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s43 { margin-top: 1em; width: 2px; height: 3em; background: repeating-linear-gradient(180deg,var(--qtell-teal-600) 0 .5em,transparent .5em 1em); background-size: 2px 1em; animation: ai-aiflow 1.2s linear infinite; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s44 { width: 100%; padding: 1.8em; border-radius: 1.2em; background: var(--qtell-purple-700); box-shadow: 0 2em 3.4em -2.2em color-mix(in srgb, var(--qtell-purple-700) 80%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s45 { display: flex; align-items: center; gap: .6em; color: var(--qtell-teal-400); font-size: 1.1em; font-weight: 800; letter-spacing: .1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s46 { width: 1.2em; height: 1.2em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s47 { margin-top: 1em; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s48 { display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: .7em; background: color-mix(in srgb, var(--qtell-white) 10%, transparent); color: var(--qtell-white); font-size: 1.2em; font-weight: 700; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s49 { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--qtell-teal-600); color: var(--qtell-white); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s50 { width: .85em; height: .85em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s51 { flex: 1 1 400px; min-width: 0; max-width: 560px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s52 { margin-top: 0px; font-size: clamp(19px,1.8vw,23px); line-height: 1.45; letter-spacing: -.01em; font-weight: 600; color: var(--qtell-purple-700); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s53 { margin-top: 20px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s54 { margin-top: 14px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s55 { margin-top: 24px; padding-left: 18px; border-left: 3px solid var(--qtell-teal-600); font-size: clamp(18px,1.6vw,20px); line-height: 1.5; font-weight: 700; color: var(--qtell-purple-700); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s56 { padding: clamp(52px,7vw,92px) 0; background: var(--qtell-white); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s57 { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s58 { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qtell-accent-ink); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s59 { margin-top: 18px; font-size: clamp(30px,3.6vw,46px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; max-width: 24ch; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s60 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); margin-top: clamp(40px,5vw,64px); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s61 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px clamp(40px,5vw,80px); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s62 { min-width: 0; display: flex; flex-direction: column; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s63 { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--qtell-app-alert-tint); color: var(--qtell-app-alert); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s64 { margin-top: 14px; font-size: clamp(20px,2vw,25px); line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s65 { margin-top: 22px; padding: clamp(14px,2vw,22px); border-radius: 20px; background: var(--qtell-background-soft); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s66 { width: 100%; height: auto; display: block; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s67 { stroke: #d8cfdc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s68 { stroke: #e3a9b9; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s69 { fill: var(--qtell-white); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s70 { stroke: var(--qtell-app-border); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s71 { fill: var(--qtell-purple-900); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s72 { fill: #c98ea0; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s73 { fill: var(--qtell-purple-700); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s74 { stroke: #f1d3dc; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s75 { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--qtell-purple-700) 14%, transparent)); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s76 { fill: var(--qtell-app-alert-tint); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s77 { stroke: var(--qtell-app-alert); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s78 { margin-top: 20px; display: flex; flex-direction: column; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s79 { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; padding: 12px 0; font-size: 15.5px; line-height: 1.55; color: var(--qtell-purple-900); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s80 { margin-top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--qtell-app-alert-tint); color: var(--qtell-app-alert); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s81 { width: 11px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s82 { height: 11px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s83 { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--qtell-border-soft); font-size: 15.5px; line-height: 1.55; color: var(--qtell-purple-900); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s84 { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--qtell-purple-700); color: var(--qtell-teal-400); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s85 { stroke: var(--qtell-teal-600); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s86 { stroke: #5fd3c4; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s87 { filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--qtell-teal-600) 18%, transparent)); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s88 { fill: var(--qtell-purple-600); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s89 { fill: var(--qtell-app-text-muted); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s90 { fill: #f3fbfa; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s91 { margin-top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--qtell-teal-600); color: var(--qtell-white); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s92 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-wrap: wrap; gap: 40px clamp(40px,6vw,96px); align-items: flex-start; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s93 { flex: 1 1 360px; min-width: 0; max-width: 480px; position: sticky; top: var(--qtell-sticky-offset); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s94 { flex: 1.3 1 440px; min-width: 0; max-width: 660px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s95 { font-size: clamp(20px,2vw,25px); line-height: 1.45; letter-spacing: -.015em; font-weight: 600; color: var(--qtell-purple-700); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s96 { margin-top: 18px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s97 { margin-top: clamp(28px,3.5vw,40px); padding: clamp(22px,3vw,32px) 0; border-top: 2px solid var(--qtell-purple-700); border-bottom: 1px solid var(--qtell-border-soft); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s98 { display: flex; align-items: center; gap: 12px; font-size: clamp(20px,2vw,25px); line-height: 1.35; letter-spacing: -.015em; font-weight: 700; color: var(--qtell-purple-700); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s99 { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--qtell-teal-600); color: var(--qtell-white); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s100 { width: 13px; height: 13px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s101 { margin-top: 16px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s102 { margin-top: clamp(24px,3vw,36px); padding-left: 18px; border-left: 3px solid var(--qtell-teal-600); font-size: clamp(18px,1.6vw,21px); line-height: 1.5; font-weight: 700; color: var(--qtell-purple-700); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s103 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-wrap: wrap; gap: 40px clamp(40px,6vw,96px); align-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s104 { flex: 1 1 420px; min-width: 0; max-width: 580px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s105 { margin-top: 22px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s106 { margin-top: 14px; font-size: clamp(17px,1.5vw,19px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; color: var(--qtell-purple-900); font-weight: 600; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s107 { flex: 1.1 1 440px; min-width: 0; max-width: 600px; padding: clamp(22px,3vw,34px); border-radius: 24px; background: linear-gradient(135deg,var(--qtell-blend-light),var(--qtell-purple-100)); display: flex; flex-direction: column; gap: 12px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s108 { font-size: 16px; font-weight: 700; color: var(--qtell-purple-700); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s109 { --i: 0; align-self: flex-start; background: var(--qtell-white); color: var(--qtell-purple-900); border-radius: 18px 18px 18px 4px; max-width: 88%; padding: 14px 18px; border: 1px solid var(--qtell-border-soft); font-size: 16px; line-height: 1.45; font-weight: 600; box-shadow: 0 14px 28px -22px var(--qtell-shadow-color); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s110 { --i: 1; align-self: flex-end; background: var(--qtell-purple-700); color: var(--qtell-white); border-color: var(--qtell-purple-700); border-radius: 18px 18px 4px 18px; max-width: 88%; padding: 14px 18px; border: 1px solid var(--qtell-border-soft); font-size: 16px; line-height: 1.45; font-weight: 600; box-shadow: 0 14px 28px -22px var(--qtell-shadow-color); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s111 { --i: 2; align-self: flex-start; background: var(--qtell-white); color: var(--qtell-purple-900); border-radius: 18px 18px 18px 4px; max-width: 88%; padding: 14px 18px; border: 1px solid var(--qtell-border-soft); font-size: 16px; line-height: 1.45; font-weight: 600; box-shadow: 0 14px 28px -22px var(--qtell-shadow-color); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s112 { --i: 3; align-self: flex-end; background: var(--qtell-purple-700); color: var(--qtell-white); border-color: var(--qtell-purple-700); border-radius: 18px 18px 4px 18px; max-width: 88%; padding: 14px 18px; border: 1px solid var(--qtell-border-soft); font-size: 16px; line-height: 1.45; font-weight: 600; box-shadow: 0 14px 28px -22px var(--qtell-shadow-color); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s113 { margin-top: 28px; display: inline-flex; font-size: 16px; font-weight: 700; color: var(--qtell-accent-ink); text-decoration: none; text-underline-offset: 4px; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s114 { font-size: calc(100cqw / 50); line-height: 1.3; padding: 2.4em; display: flex; flex-direction: column; gap: 1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s115 { align-self: flex-start; padding: 1em 1.3em; border-radius: 1.1em 1.1em 1.1em .3em; background: var(--qtell-white); border: 1px solid var(--qtell-app-border); font-size: 1.25em; font-weight: 600; color: var(--qtell-purple-900); box-shadow: 0 1em 2em -1.6em color-mix(in srgb, var(--qtell-purple-700) 50%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s116 { padding: 1.4em 1.6em; border-radius: 1.2em; background: var(--qtell-purple-700); box-shadow: 0 2em 3.4em -2.2em color-mix(in srgb, var(--qtell-purple-700) 80%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s117 { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s118 { width: 5em; height: auto; color: var(--qtell-white); display: block; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s119 { color: var(--qtell-teal-400); font-size: 1em; font-weight: 800; letter-spacing: .1em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s120 { margin-top: 1.2em; display: flex; flex-direction: column; gap: .6em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s121 { --i: 0; display: grid; grid-template-columns: 1.8em minmax(0,1fr); gap: .8em; align-items: center; padding: .7em .9em; border-radius: .8em; background: color-mix(in srgb, var(--qtell-white) 10%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s122 { width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--qtell-teal-600); color: var(--qtell-white); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s123 { font-size: 1.15em; color: var(--qtell-white); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s124 { --i: 1; display: grid; grid-template-columns: 1.8em minmax(0,1fr); gap: .8em; align-items: center; padding: .7em .9em; border-radius: .8em; background: color-mix(in srgb, var(--qtell-white) 10%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s125 { width: 1.8em; height: 1.8em; border-radius: 50%; background: #e8b4c2; color: var(--qtell-app-alert); display: grid; place-items: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s126 { width: .9em; height: .9em; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s127 { --i: 2; display: grid; grid-template-columns: 1.8em minmax(0,1fr); gap: .8em; align-items: center; padding: .7em .9em; border-radius: .8em; background: color-mix(in srgb, var(--qtell-white) 10%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s128 { --i: 3; display: grid; grid-template-columns: 1.8em minmax(0,1fr); gap: .8em; align-items: center; padding: .7em .9em; border-radius: .8em; background: color-mix(in srgb, var(--qtell-white) 10%, transparent); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s129 { align-self: flex-end; display: inline-flex; align-items: center; gap: .6em; padding: 1em 1.3em; border-radius: 1.1em 1.1em .3em 1.1em; background: var(--qtell-white); border: 1.5px solid var(--qtell-teal-600); font-size: 1.25em; font-weight: 700; color: var(--qtell-accent-ink); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s130 { padding: clamp(52px,7vw,92px) 0; background: linear-gradient(135deg,var(--qtell-blend-light),var(--qtell-purple-100)); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s131 { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s132 { margin-top: 18px; font-size: clamp(32px,4vw,50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; max-width: 20ch; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-s133 { max-width: 60ch; }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-h1:hover { background: var(--qtell-purple-800); color: var(--qtell-white); }
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-h2:hover { text-decoration: underline; color: var(--qtell-purple-700); }

/* The mockup's own animation / interaction / responsive rules */
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations h1,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations h2,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations h3,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations h4,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations p,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations ul,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations ol {margin:0}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations ul,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations ol {padding:0;list-style:none}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aiq {animation:ai-aiin .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .3s)}

@media (max-width:900px){.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aisk {position:relative!important;top:auto!important}
}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aisw {opacity:0;animation:ai-aisw 10s ease infinite;animation-delay:calc(var(--i) * 2.5s)}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aidot {animation:ai-aidot 10s steps(1) infinite;animation-delay:calc(var(--i) * 2.5s)}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aich {animation:ai-aich 8s ease infinite;animation-delay:calc(var(--i) * .5s)}

@media (prefers-reduced-motion:reduce){.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aisw,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aidot,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .aih,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aich,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .aiqq,
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aiq {animation:none!important}
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aisw {opacity:0}
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-aisw[style*="--i:0"] {opacity:1}
}

@media (max-width:860px){.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-oug {grid-template-columns:minmax(0,1fr)!important}
}

.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-ouf {animation:ai-ouflow 1s linear infinite}

@media (prefers-reduced-motion:reduce){.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations .ai-ouf {animation:none}
}

@keyframes ai-aiflow{to{background-position:0 1em}}
@keyframes ai-aiflow{to{background-position:0 1em}}
@keyframes ai-aiin{from{opacity:0;transform:translateY(10px)}}
@keyframes ai-aisw{0%{opacity:0;transform:translateY(.6em) scale(.96)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-.6em) scale(.96)}}
@keyframes ai-aidot{0%{background:var(--qtell-purple-700)}25%,100%{background:#d8cfdc}}
@keyframes ai-aich{0%{opacity:0;transform:translateX(-.6em)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ai-ouflow{to{stroke-dashoffset:-11}}
/* The selected AI (from the URL hash): a teal ring that pulses twice and then stays. All four logos always show; with no hash they look equal. */
.qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations [data-ai][data-selected="true"] { border-radius: 999px; outline: 2px solid var(--qtell-teal-600); outline-offset: 8px; animation: qtell-ai-pulse 1.6s ease-out 2; }
@keyframes qtell-ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .35); } 100% { box-shadow: 0 0 0 16px rgba(20, 184, 166, 0); } }
@media (prefers-reduced-motion: reduce) { .qtell-pg-ai-integrations.qtell-pg-ai-integrations.qtell-pg-ai-integrations [data-ai][data-selected="true"] { animation: none; } }