/* Qtell persona-page elements: AI plugin demo, product screen chrome, metric
   story row, capability accordion, before/after story, pricing ladder, stacked
   pricing rows, logo marquee. Hand-authored layout CSS for the shortcodes in
   framework/visual-composer-*.php; the generated visual markup/colours for the
   product screens and before/after animation live in qtell-persona-visuals.css.
   Uses --qtell-* design-system tokens throughout; see qtell-design-system.css. */

/* ==========================================================================
   Fixed percentage steps (avoids inline style="" on generated bar markup)
   ========================================================================== */

.qtell-pct-0 { --qtell-pct: 0%; }
.qtell-pct-5 { --qtell-pct: 5%; }
.qtell-pct-10 { --qtell-pct: 10%; }
.qtell-pct-15 { --qtell-pct: 15%; }
.qtell-pct-20 { --qtell-pct: 20%; }
.qtell-pct-25 { --qtell-pct: 25%; }
.qtell-pct-30 { --qtell-pct: 30%; }
.qtell-pct-35 { --qtell-pct: 35%; }
.qtell-pct-40 { --qtell-pct: 40%; }
.qtell-pct-45 { --qtell-pct: 45%; }
.qtell-pct-50 { --qtell-pct: 50%; }
.qtell-pct-55 { --qtell-pct: 55%; }
.qtell-pct-60 { --qtell-pct: 60%; }
.qtell-pct-65 { --qtell-pct: 65%; }
.qtell-pct-70 { --qtell-pct: 70%; }
.qtell-pct-75 { --qtell-pct: 75%; }
.qtell-pct-80 { --qtell-pct: 80%; }
.qtell-pct-85 { --qtell-pct: 85%; }
.qtell-pct-90 { --qtell-pct: 90%; }
.qtell-pct-95 { --qtell-pct: 95%; }
.qtell-pct-100 { --qtell-pct: 100%; }

/* ==========================================================================
   AI Plugin Demo
   ========================================================================== */

.qtell-aidemo-intro { margin: 0 auto; }

.qtell-aidemo-lead {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-display);
  text-wrap: balance;
  color: var(--qtell-accent-ink);
}

.qtell-aidemo-text {
  max-width: 60ch;
  margin-top: var(--qtell-flow-xs);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-aidemo {
  position: relative;
  margin: var(--qtell-editorial-block-gap) auto 0;
  max-width: 1080px;
  aspect-ratio: 98 / 38;
  container-type: inline-size;
}

.qtell-aidemo-stage {
  position: absolute;
  inset: 0;
  font-size: calc(100cqw / 98);
  line-height: 1.3;
}

.qtell-aidemo-window {
  position: absolute;
  left: 0;
  top: 0;
  width: 60em;
  height: 38em;
  border-radius: 1.6em;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 2.4em 4.8em -3em color-mix(in srgb, var(--qtell-purple-700) 45%, transparent);
}

.qtell-aidemo-titlebar {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 3.6em;
  padding: 0 1.4em;
  border-bottom: 1px solid var(--qtell-app-border);
}

.qtell-aidemo-dot {
  width: .9em;
  height: .9em;
  border-radius: 50%;
  background: var(--qtell-purple-200);
}

.qtell-aidemo-title {
  margin-left: .6em;
  font-family: var(--qtell-font-heading);
  font-size: 1.2em;
  font-weight: 700;
  color: var(--qtell-purple-600);
  white-space: nowrap;
}

.qtell-aidemo-prompt {
  margin: 1.6em 0 0 4em;
  font-family: var(--qtell-font-heading);
  font-size: 2.8em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-aidemo-inputbar {
  position: relative;
  margin: 1.6em 4em 1.6em;
  height: 12.6em;
  border-radius: 1.4em;
  border: 1px solid var(--qtell-app-border);
  background: var(--qtell-white);
  box-shadow: 0 .8em 2em -1.6em color-mix(in srgb, var(--qtell-purple-700) 35%, transparent);
}

.qtell-aidemo-placeholder {
  position: absolute;
  left: 1.8em;
  top: 1.6em;
  font-size: 1.5em;
  font-weight: 500;
  color: var(--qtell-app-text-muted);
  white-space: nowrap;
}

.qtell-aidemo-folder {
  position: absolute;
  left: 1.6em;
  bottom: 1.6em;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 1.25em;
  font-weight: 500;
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-aidemo-folder svg { width: 1.5em; height: 1.5em; flex: none; color: var(--qtell-purple-600); }

.qtell-aidemo-plus {
  position: absolute;
  left: 21.4em;
  top: 20.6em;
  width: 3.2em;
  height: 3.2em;
  border-radius: .7em;
  background: var(--qtell-app-surface-alt);
  display: grid;
  place-items: center;
  color: var(--qtell-purple-900);
  z-index: 2;
}

.qtell-aidemo-plus svg { width: 1.5em; height: 1.5em; }

.qtell-aidemo-panel {
  position: absolute;
  width: 18em;
  padding: .6em;
  border-radius: 1em;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 1.6em 3em -1.6em color-mix(in srgb, var(--qtell-purple-700) 40%, transparent);
  z-index: 3;
}

.qtell-aidemo-panel--attach { left: 21.4em; top: 24.4em; }
.qtell-aidemo-panel--plugins { left: 39.8em; top: 18em; }
.qtell-aidemo-panel--chats { left: 58.2em; top: 2.5em; width: 20em; }

.qtell-aidemo-row {
  display: flex;
  align-items: center;
  gap: .8em;
  height: 3.2em;
  padding: 0 1em;
  border-radius: .6em;
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-aidemo-row span {
  font-size: 1.3em;
  font-weight: 500;
}

.qtell-aidemo-row--sm { height: 2.95em; }

.qtell-aidemo-row--highlight { background: color-mix(in srgb, var(--qtell-purple-100) 60%, transparent); }

.qtell-aidemo-row svg { width: 1.5em; height: 1.5em; flex: none; color: var(--qtell-purple-600); }

.qtell-aidemo-row svg:last-child { margin-left: auto; width: 1.3em; height: 1.3em; color: var(--qtell-app-text-muted); }

.qtell-aidemo-divider {
  height: 1px;
  margin: .5em .4em;
  background: var(--qtell-app-border);
}

.qtell-aidemo-callout {
  position: absolute;
  left: 78.8em;
  top: 14em;
  width: 18em;
  padding: 1em 1.1em;
  border-radius: .7em;
  background: var(--qtell-purple-900);
  z-index: 4;
  line-height: 1.4;
}

.qtell-aidemo-callout-text {
  font-size: 1.15em;
  font-weight: 500;
  color: var(--qtell-white);
}

.qtell-aidemo-callout-label {
  margin-top: .5em;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--qtell-purple-300);
}

.qtell-aidemo-footnote {
  margin-top: var(--qtell-flow-sm);
  text-align: center;
  font-size: 15px;
  color: var(--qtell-purple-600);
}

/* Sequential pop-in, fired once by .is-in on the .qtell-aidemo wrapper (JS adds it
   on scroll-into-view); fixed delay-step classes avoid inline style="" per element */
.qtell-aidemo-pop {
  opacity: 0;
  transform: scale(.94) translateY(6px);
  transform-origin: top left;
}

.qtell-aidemo.is-in .qtell-aidemo-pop {
  animation: qtell-aidemo-popin .4s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--qtell-aidemo-delay, 0s);
}

.qtell-aidemo-delay-3 { --qtell-aidemo-delay: .3s; }
.qtell-aidemo-delay-6 { --qtell-aidemo-delay: .6s; }
.qtell-aidemo-delay-12 { --qtell-aidemo-delay: 1.2s; }
.qtell-aidemo-delay-15 { --qtell-aidemo-delay: 1.5s; }
.qtell-aidemo-delay-22 { --qtell-aidemo-delay: 2.2s; }
.qtell-aidemo-delay-26 { --qtell-aidemo-delay: 2.6s; }
.qtell-aidemo-delay-33 { --qtell-aidemo-delay: 3.3s; }
.qtell-aidemo-delay-37 { --qtell-aidemo-delay: 3.7s; }

@keyframes qtell-aidemo-popin {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qtell-aidemo-pop { opacity: 1; transform: none; animation: none !important; }
}

@media (max-width: 900px) {
  .qtell-aidemo-stage { aspect-ratio: 60 / 46; }
  .qtell-aidemo-window { width: 100%; }
  .qtell-aidemo-panel--chats,
  .qtell-aidemo-callout { display: none; }
}

/* ==========================================================================
   Product Screen (reusable app-window chrome, swappable content)
   ========================================================================== */

.qtell-pscreen {
  position: relative;
  aspect-ratio: 88 / 58;
  container-type: inline-size;
  overflow: hidden;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  box-shadow: 0 40px 80px -40px var(--qtell-shadow-color);
}

.qtell-pscreen--radius-both { border-radius: 20px; }
.qtell-pscreen--radius-left { border-radius: 20px 0 0 20px; border-right: 0; }
.qtell-pscreen--radius-right { border-radius: 0 20px 20px 0; border-left: 0; }
.qtell-pscreen--radius-none { border-radius: 0; }

.qtell-pv2.pv2-scr {
  position: absolute;
  inset: 0;
  /* em-unit scale for every pv2-sNNN rule below, tied to .qtell-pscreen's 88/58 aspect-ratio */
  font-size: calc(100cqw / 88);
  display: grid;
  grid-template-columns: 7.4em minmax(0, 1fr);
  grid-template-rows: 5.4em minmax(0, 1fr);
  overflow: hidden;
  line-height: 1.35;
}

/* (0,3,0) specificity to beat qtell-persona-visuals.css's
   .qtell-pv2.qtell-pv2.qtell-pv2 :where(div) { padding: 0 } reset. */
.qtell-pscreen-content.qtell-pscreen-content.qtell-pscreen-content {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 2.4em 2.8em;
}

.qtell-pscreen-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* screen-intelligence-panel: the header (title + "Watching N systems") and the
   All/Risks/Opportunities/Changes filter-pill row were authored for a wider
   sticky column than the reusable qtell_product_screen chrome provides at
   50/50 split widths; let both wrap instead of clipping at narrower widths. */
.qtell-pscreen-content .pv2-s228,
.qtell-pscreen-content .pv2-s231 {
  flex-wrap: wrap;
  row-gap: .5em;
}

/* ==========================================================================
   Metric Story Row (text one side, auto-cycling bar-chart card the other)
   ========================================================================== */

.qtell-mstory-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qtell-flow-2xl) var(--qtell-editorial-split-gap);
}

.qtell-mstory-row--reverse { flex-direction: row-reverse; }

.qtell-mstory-text {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 580px;
}

.qtell-mstory-para {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-mstory-media {
  flex: 1.1 1 440px;
  min-width: 0;
  max-width: 600px;
}

.qtell-mstory-card {
  position: relative;
  border-radius: 24px;
  padding: 32px;
  background: linear-gradient(135deg, var(--qtell-blend-light), var(--qtell-purple-100));
  overflow: hidden;
}

.qtell-mstory-cardhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.qtell-mstory-cardlabel {
  font-family: var(--qtell-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--qtell-app-text-muted);
}

.qtell-mstory-cardvalue {
  font-family: var(--qtell-font-heading);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--qtell-purple-700);
}

/* Horizontal bars: a fixed-max-height card so it doesn't have to be measured live */
.qtell-mstory-bars--horizontal {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 16px 32px -26px var(--qtell-shadow-color);
  padding: 20px 22px;
}

.qtell-mstory-hrow {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr) 4em;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}

.qtell-mstory-hlabel {
  font-family: var(--qtell-font-heading);
  font-weight: 600;
  color: var(--qtell-purple-900);
}

.qtell-mstory-htrack {
  height: 12px;
  border-radius: 5px;
  background: var(--qtell-app-surface-alt);
  overflow: hidden;
}

.qtell-mstory-hbar {
  display: block;
  height: 100%;
  width: var(--qtell-pct, 50%);
  background: var(--qtell-purple-700);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.qtell-mstory-hbar--overflow { background: var(--qtell-app-alert); }

.qtell-mstory-hrow.is-current .qtell-mstory-hbar,
.qtell-mstory-card.is-in .qtell-mstory-hbar { transform: scaleX(1); }

.qtell-mstory-hvalue {
  font-family: var(--qtell-font-heading);
  font-weight: 800;
  text-align: right;
  color: var(--qtell-purple-700);
}

.qtell-mstory-hrow.is-current .qtell-mstory-hlabel,
.qtell-mstory-hrow.is-current .qtell-mstory-hvalue { color: var(--qtell-accent-ink); }

/* Vertical bars: forecasting-style columns + dashed projection trend line */
.qtell-mstory-bars--vertical {
  position: relative;
  margin-top: 16px;
  height: 12em;
  display: flex;
  align-items: flex-end;
  gap: 1.2em;
  padding: 0 .4em;
  border-bottom: 1px solid var(--qtell-app-border);
  border-radius: 16px 16px 0 0;
  background: var(--qtell-white);
}

.qtell-mstory-vbar {
  flex: 1;
  height: var(--qtell-pct, 50%);
  border-radius: .4em .4em 0 0;
  background: var(--qtell-purple-700);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.qtell-mstory-card.is-in .qtell-mstory-vbar { transform: scaleY(1); }

.qtell-mstory-vbar--projected {
  background: repeating-linear-gradient(135deg, var(--qtell-purple-700) 0 .4em, var(--qtell-purple-600) .4em .8em);
}

.qtell-mstory-vbar.is-current { outline: 2px solid var(--qtell-teal-500); outline-offset: -2px; }

.qtell-mstory-trend {
  position: absolute;
  left: .4em;
  right: .4em;
  bottom: 30%;
  height: 2px;
  border-top: 3px dashed var(--qtell-teal-600);
}

.qtell-mstory-legend {
  display: flex;
  gap: 1.4em;
  margin-top: 14px;
  font-size: 14px;
  color: var(--qtell-purple-600);
}

.qtell-mstory-legend-item { display: flex; align-items: center; gap: .5em; }

.qtell-mstory-legend-item::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--qtell-purple-700);
}

.qtell-mstory-legend-item--dashed::before {
  background: none;
  border-top: 3px dashed var(--qtell-teal-600);
}

@media (prefers-reduced-motion: reduce) {
  .qtell-mstory-hbar, .qtell-mstory-vbar { transition: none; transform: scaleX(1) scaleY(1) !important; }
}

/* ==========================================================================
   Roadmap (qtell_change_list layout="roadmap": first step filled, rest outlined,
   progressively indented)
   ========================================================================== */

.qtell-roadmap-grid { align-items: stretch; }

.qtell-roadmap-head {
  padding-right: clamp(0px, 4vw, 64px);
}

.qtell-editorial .qtell-roadmap-text {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--qtell-border-soft);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-roadmap-head .qtell-roadmap-btn {
  margin-top: var(--qtell-flow-lg);
}

/* Full-width intro variant: label + heading span the container above the
   two-column row, instead of sitting inside the (narrower) left column */
.qtell-roadmap-intro {
  max-width: 820px;
  margin-bottom: var(--qtell-editorial-block-gap);
}

.qtell-roadmap {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  max-width: 600px;
  padding-left: clamp(0px, 4vw, 64px);
  border-left: 1px solid var(--qtell-border-soft);
}

.qtell-roadmap-bar {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--qtell-purple-700);
}

.qtell-roadmap > ol {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qtell-editorial .qtell-roadmap-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--qtell-border-soft);
  background: var(--qtell-white);
}

.qtell-roadmap-step--1 { margin-left: 18px; }
.qtell-roadmap-step--2 { margin-left: 36px; }
.qtell-roadmap-step--3 { margin-left: 54px; }
.qtell-roadmap-step--4 { margin-left: 72px; }

.qtell-editorial .qtell-roadmap-step--filled {
  border-color: var(--qtell-purple-700);
  background: var(--qtell-purple-700);
}

.qtell-roadmap-marker {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--qtell-purple-200);
  display: inline-flex;
}

.qtell-roadmap-step--filled .qtell-roadmap-marker {
  border: 0;
  color: var(--qtell-teal-400);
}

.qtell-roadmap-marker svg { width: 14px; height: 14px; }

.qtell-editorial .qtell-roadmap-label {
  font-family: var(--qtell-font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: var(--qtell-weight-semibold);
  text-wrap: pretty;
  color: var(--qtell-purple-900);
}

.qtell-editorial .qtell-roadmap-step--filled .qtell-roadmap-label {
  color: var(--qtell-white);
}

.qtell-editorial .qtell-roadmap-item-text {
  grid-column: 2;
  margin-top: 4px;
  font-family: var(--qtell-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-editorial .qtell-roadmap-step--filled .qtell-roadmap-item-text {
  color: var(--qtell-purple-100);
}

@media (max-width: 900px) {
  .qtell-roadmap {
    padding-left: 0;
    border-left: 0;
    max-width: 100%;
  }
  .qtell-roadmap-step--1,
  .qtell-roadmap-step--2,
  .qtell-roadmap-step--3,
  .qtell-roadmap-step--4 { margin-left: 0; }
}

/* ==========================================================================
   Change List — columns (qtell_change_list layout="columns": shared intro,
   then 2+ side-by-side sub-panels, each with its own short filled-first
   status list and right-aligned status labels)
   ========================================================================== */

.qtell-changecols-intro { max-width: 52em; }

.qtell-changecols {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px 0;
}

.qtell-changecol {
  padding-right: clamp(0px, 4vw, 64px);
}

.qtell-changecol + .qtell-changecol {
  padding-left: clamp(0px, 4vw, 64px);
  padding-right: 0;
  border-left: 1px solid var(--qtell-border-soft);
}

.qtell-changecol-bar {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--qtell-purple-700);
}

.qtell-changecol-bar--teal { background: var(--qtell-teal-600); }

.qtell-editorial .qtell-changecol-heading {
  margin-top: 24px;
  font-family: var(--qtell-font-heading);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: var(--qtell-weight-display);
  text-wrap: balance;
  color: var(--qtell-purple-700);
}

.qtell-editorial .qtell-changecol-text {
  margin-top: 18px;
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-changecol-list.qtell-changecol-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qtell-editorial .qtell-changecol-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--qtell-border-soft);
  background: var(--qtell-white);
  font-family: var(--qtell-font-body);
  font-size: 14px;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-purple-900);
}

.qtell-editorial .qtell-changecol-row--filled {
  border-color: var(--qtell-purple-700);
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
}

.qtell-changecol-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--qtell-purple-200);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qtell-changecol-row--filled .qtell-changecol-marker {
  border: 0;
  color: var(--qtell-teal-400);
}

.qtell-changecol-marker svg { width: 14px; height: 14px; }

.qtell-changecol-label { flex: 1 1 auto; }

.qtell-editorial .qtell-changecol-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-teal-700);
  white-space: nowrap;
}

.qtell-changecol-row--filled .qtell-changecol-status { color: var(--qtell-teal-400); }

.qtell-changecol-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qtell-teal-600);
  flex: none;
}

/* ==========================================================================
   Capability Accordion (vertical trigger list, progress underline, screen swap)
   ========================================================================== */

.qtell-capacc {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--qtell-editorial-col-gap);
  align-items: center;
}

.qtell-capacc--reverse { direction: rtl; }
.qtell-capacc--reverse > * { direction: ltr; }

.qtell-capacc-para {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-capacc-list {
  margin-top: var(--qtell-editorial-block-gap);
  display: flex;
  flex-direction: column;
}

.qtell-capacc-item {
  border-top: 1px solid var(--qtell-border-soft);
}

.qtell-capacc-item:last-child { border-bottom: 1px solid var(--qtell-border-soft); }

.qtell-capacc-trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  background: none !important;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--qtell-font-heading);
}

.qtell-capacc-trigger-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--qtell-app-surface-alt);
  color: var(--qtell-purple-600);
}

.qtell-capacc-trigger-icon svg { width: 19px; height: 19px; }

.qtell-capacc-trigger-label {
  font-size: var(--qtell-type-item-title);
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-purple-900);
}

.qtell-capacc-item.is-active .qtell-capacc-trigger-icon {
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
}

.qtell-capacc-item.is-active .qtell-capacc-trigger-label { color: var(--qtell-purple-700); }

.qtell-capacc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.qtell-capacc-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--qtell-teal-600);
  transform-origin: left;
}

.qtell-capacc-progress-fill.is-running {
  animation-name: qtell-capacc-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes qtell-capacc-fill {
  from { width: 0%; }
  to { width: 100%; }
}

.qtell-capacc-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .35s ease;
}

.qtell-capacc-item.is-active .qtell-capacc-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.qtell-capacc-panel-text {
  overflow: hidden;
  margin: 0;
  padding-bottom: 18px;
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose-sm);
  line-height: 1.6;
  color: var(--qtell-purple-600);
}

.qtell-capacc-media { min-width: 0; }

.qtell-capacc-frame {
  position: relative;
  aspect-ratio: 88 / 58;
}

.qtell-capacc-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}

.qtell-capacc-screen.is-active { opacity: 1; visibility: visible; }

.qtell-capacc-screen-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .qtell-capacc { grid-template-columns: minmax(0, 1fr); }
  .qtell-capacc--reverse { direction: ltr; }
  .qtell-capacc-media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .qtell-capacc-progress-fill.is-running { animation: none; width: 100%; }
}

/* ==========================================================================
   Before/After Story
   ========================================================================== */

.qtell-beforeafter-row {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--qtell-flow-2xl) var(--qtell-editorial-split-gap);
}

.qtell-beforeafter-row--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.qtell-beforeafter-row--reverse .qtell-beforeafter-text { order: 2; }
.qtell-beforeafter-row--reverse .qtell-beforeafter-media { order: 1; }

@media (max-width: 900px) {
  .qtell-beforeafter-row,
  .qtell-beforeafter-row--reverse {
    grid-template-columns: minmax(0, 1fr);
  }
  .qtell-beforeafter-row--reverse .qtell-beforeafter-text,
  .qtell-beforeafter-row--reverse .qtell-beforeafter-media {
    order: initial;
  }
}

.qtell-beforeafter-text {
  min-width: 0;
}

.qtell-beforeafter-para {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-beforeafter-media {
  min-width: 0;
}

.qtell-beforeafter-media .stc {
  width: 100%;
}

/* ==========================================================================
   Marketing page: channel-to-revenue flow + lead-scoring visuals
   ========================================================================== */

.qtell-channelflow-media,
.qtell-leadscore-media {
  min-width: 0;
  width: 100%;
}

.qtell-channelflow-media .stc,
.qtell-leadscore-media .stc {
  width: 100%;
}

/* Beats the parent theme's .page-content ul { margin: 0 0 20px 10px } (meant for
   bulleted lists elsewhere on the site), which was zeroing this grid's top margin
   and adding a stray 10px left margin. */
.qtell-beforeafter-text .qtell-mini-feature-grid {
  margin: var(--qtell-flow-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 22px 28px;
}

/* Beats the parent theme's .page-content ul li { padding-left: 20px; margin-bottom: 10px }
   (meant for bulleted lists elsewhere on the site) at higher specificity. */
.qtell-mini-feature-grid .qtell-mini-feature {
  margin-bottom: 0;
  padding: 14px 0 0;
  border-top: 2px solid var(--qtell-teal-600);
}

.qtell-editorial .qtell-mini-feature-title {
  font-family: var(--qtell-font-heading);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-purple-700);
}

.qtell-editorial .qtell-mini-feature-text {
  margin-top: 6px;
  font-family: var(--qtell-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-leadscore-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px var(--qtell-editorial-split-gap);
}

.qtell-leadscore-head {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 540px;
}

.qtell-leadscore-text {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 620px;
  padding-top: 34px;
}

.qtell-editorial .qtell-leadscore-intro {
  font-family: var(--qtell-font-body);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.45;
  letter-spacing: -.01em;
  font-weight: var(--qtell-weight-semibold);
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

@media (min-width: 1000px) {
  .qtell-leadscore-head {
    position: sticky;
    top: 32px;
  }
}

/* ==========================================================================
   Pricing Ladder
   ========================================================================== */

.qtell-ladder-heading {
  text-align: center;
  margin: 0 auto;
}

.qtell-ladder {
  margin: var(--qtell-editorial-block-gap) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  align-items: end;
}

.qtell-ladder-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
  border-radius: 20px 20px 6px 6px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  border-bottom: 6px solid var(--qtell-purple-300);
}

.qtell-ladder-step--0 { min-height: 160px; border-bottom-color: var(--qtell-purple-300); }
.qtell-ladder-step--1 { min-height: 210px; border-bottom-color: var(--qtell-purple-500); }
.qtell-ladder-step--2 { min-height: 260px; border-bottom-color: var(--qtell-purple-700); }
.qtell-ladder-step--3,
.qtell-ladder-step--4,
.qtell-ladder-step--5 {
  min-height: 310px;
  background: var(--qtell-purple-700);
  border: 0;
  border-bottom: 6px solid var(--qtell-teal-600);
}

.qtell-ladder-eyebrow {
  font-family: var(--qtell-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--qtell-accent-ink);
}

.qtell-ladder-step--3 .qtell-ladder-eyebrow,
.qtell-ladder-step--4 .qtell-ladder-eyebrow,
.qtell-ladder-step--5 .qtell-ladder-eyebrow { color: var(--qtell-teal-400); }

.qtell-ladder-label {
  font-family: var(--qtell-font-heading);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qtell-purple-700);
}

.qtell-ladder-step--3 .qtell-ladder-label,
.qtell-ladder-step--4 .qtell-ladder-label,
.qtell-ladder-step--5 .qtell-ladder-label { color: var(--qtell-white); }

.qtell-ladder-rule {
  display: block;
  margin-top: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--qtell-purple-300), var(--qtell-teal-600));
}

.qtell-ladder-footnote {
  margin-top: 16px;
  text-align: center;
  font-family: var(--qtell-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--qtell-purple-600);
}

/* ==========================================================================
   Pricing Cards: stacked full-width layout
   ========================================================================== */

.qtell-pricing-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qtell-pricing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px var(--qtell-flow-2xl);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  border: 1px solid var(--qtell-border-soft);
  background: var(--qtell-white);
}

.qtell-pricing-row-featured {
  border: 2px solid var(--qtell-purple-700);
  box-shadow: 0 30px 60px -40px var(--qtell-shadow-color);
}

.qtell-pricing-row-dark {
  border: 0;
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
}

.qtell-pricing-row-lead {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}

.qtell-pricing-row-dark .qtell-pricing-row-lead { max-width: none; }

.qtell-pricing-row-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

.qtell-pricing-row-title {
  font-family: var(--qtell-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qtell-accent-ink);
}

.qtell-pricing-row-dark .qtell-pricing-row-title { color: var(--qtell-teal-400); }

.qtell-pricing-row-price {
  font-family: var(--qtell-font-heading);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--qtell-purple-700);
}

.qtell-pricing-row-dark .qtell-pricing-row-price { color: var(--qtell-white); }

.qtell-pricing-row-period {
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--qtell-purple-600);
  margin-left: 4px;
}

.qtell-pricing-row-tagline {
  margin-top: 12px;
  font-family: var(--qtell-font-heading);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--qtell-purple-700);
}

.qtell-pricing-row-dark .qtell-pricing-row-tagline { color: var(--qtell-white); }

.qtell-pricing-row-desc {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--qtell-purple-900);
}

.qtell-pricing-row-dark .qtell-pricing-row-desc { color: var(--qtell-purple-100); }

.qtell-pricing-row-upgrade {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--qtell-accent-ink);
}

.qtell-pricing-row-cta {
  margin-top: 20px;
  align-self: flex-start;
}

.qtell-pricing-row-features {
  flex: 1.5 1 420px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px 28px;
  align-content: start;
}

@media (max-width: 640px) {
  .qtell-pricing-row { flex-direction: column; }
}

/* ==========================================================================
   Logo Marquee
   ========================================================================== */

.qtell-marquee {
  margin-top: var(--qtell-editorial-block-gap);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qtell-marquee-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--qtell-black) 8%, var(--qtell-black) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--qtell-black) 8%, var(--qtell-black) 92%, transparent);
}

.qtell-marquee-track {
  display: flex;
  width: max-content;
  animation: qtell-marquee-left 38s linear infinite;
}

.qtell-marquee-row--right .qtell-marquee-track {
  animation-name: qtell-marquee-right;
}

.qtell-marquee-row:hover .qtell-marquee-track {
  animation-play-state: paused;
}

.qtell-marquee-list {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 7px;
  list-style: none;
}

.qtell-marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--qtell-radius-full);
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  box-shadow: 0 8px 20px -16px var(--qtell-shadow-color);
  white-space: nowrap;
}

.qtell-marquee-pill-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--qtell-purple-600);
}

.qtell-marquee-pill-icon svg { width: 16px; height: 16px; }

.qtell-marquee-pill-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qtell-marquee-pill-name {
  font-family: var(--qtell-font-heading);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--qtell-purple-900);
}

@keyframes qtell-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes qtell-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Reduced motion: static wrapped grid instead of scrolling; only the first
   (non-duplicate, aria-hidden="false") list in each row is shown */
@media (prefers-reduced-motion: reduce) {
  .qtell-marquee-row { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .qtell-marquee-track { animation: none; width: auto; }
  .qtell-marquee-list { flex-wrap: wrap; }
  .qtell-marquee-list[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Entity Rollup Story (Enterprise persona page)
   Fixed animation, fires once via .is-in (same IntersectionObserver trigger
   as the AI plugin demo / before-after story); markup in
   framework/persona-visuals/entity-rollup-story.html.
   ========================================================================== */

.qtell-entroll-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qtell-flow-2xl) var(--qtell-editorial-split-gap);
}

/* ==========================================================================
   Governance card-deck illustrations (qtell_card_deck visual= one of
   qtell_governance_deck_visual_options(): Definitions / Permissions /
   Across systems / Audit). Static markup in
   framework/persona-visuals/deck-governance-*.html, wrapped in .qtell-pv2
   (reset from the generated qtell-persona-visuals.css); layout rules below
   are hand-authored, matching the .qtell-deck-media 220px card frame in
   qtell-design-system.css.
   ========================================================================== */

/* Outer gradient frame the mockup wraps every governance illustration in,
   matching Platform's own .pv-s1/.pv-s2 pattern — baked into each
   deck-governance-*.html partial as .qtell-gdeck-frame > .qtell-gdeck.
   qtell-persona-visuals.css resets padding on every div inside .qtell-pv2
   at (0,3,0) specificity (.qtell-pv2.qtell-pv2.qtell-pv2 :where(div)) — these
   rules must match or exceed that to keep their own padding. */
.qtell-gdeck-frame.qtell-gdeck-frame.qtell-gdeck-frame {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--qtell-blend-light) 0%, var(--qtell-purple-100) 100%);
  padding: 16px;
}

.qtell-gdeck.qtell-gdeck.qtell-gdeck {
  height: 100%;
  border-radius: 12px;
  background: color-mix(in srgb, var(--qtell-white) 55%, transparent);
  border: 1px solid var(--qtell-border-soft);
  padding: 12px;
}

.qtell-gdeck-title.qtell-gdeck-title.qtell-gdeck-title {
  font-family: var(--qtell-font-body);
  font-size: 11.5px;
  font-weight: var(--qtell-weight-strong);
  letter-spacing: .02em;
  color: var(--qtell-purple-700);
}

/* All qtell-gdeck-* rules below that set padding/margin are bumped to (0,3,0)
   specificity (class repeated 3x) to beat qtell-persona-visuals.css's
   .qtell-pv2.qtell-pv2.qtell-pv2 :where(p, span, div) { margin: 0; padding: 0 }
   reset — every element here is a <p>, <span> or <div>, all in that :where() list. */
.qtell-gdeck-pill.qtell-gdeck-pill.qtell-gdeck-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  color: var(--qtell-purple-900);
  font-family: var(--qtell-font-body);
  font-size: 11px;
  font-weight: var(--qtell-weight-strong);
  white-space: nowrap;
  box-shadow: 0 4px 10px -6px var(--qtell-shadow-color);
}

.qtell-gdeck-pill--sm.qtell-gdeck-pill--sm.qtell-gdeck-pill--sm { padding: 5px 8px; font-size: 10.5px; }

.qtell-gdeck-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qtell-teal-600);
  flex: none;
}

/* Definitions */
.qtell-gdeck-defs.qtell-gdeck-defs.qtell-gdeck-defs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
}

.qtell-gdeck-meaning.qtell-gdeck-meaning.qtell-gdeck-meaning {
  font-family: var(--qtell-font-body);
  font-size: 10px;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-teal-700);
}

/* Permissions */
.qtell-gdeck-rows.qtell-gdeck-rows.qtell-gdeck-rows {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qtell-gdeck-permrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qtell-gdeck-permline {
  flex: 1 1 0;
  min-width: 6px;
  height: 1px;
  border-top: 1px dashed var(--qtell-purple-300);
}

.qtell-gdeck-permtag.qtell-gdeck-permtag.qtell-gdeck-permtag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 8px;
  font-family: var(--qtell-font-body);
  font-size: 10.5px;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-white);
  white-space: nowrap;
}

.qtell-gdeck-permtag svg { width: 12px; height: 12px; }
.qtell-gdeck-permtag--allow { background: var(--qtell-teal-600); }
.qtell-gdeck-permtag--deny { background: var(--qtell-purple-700); }

/* Across systems */
.qtell-gdeck-crosssystem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qtell-gdeck-sources,
.qtell-gdeck-outcomes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.qtell-gdeck-sep {
  width: 1px;
  height: 12px;
  background: var(--qtell-purple-300);
}

.qtell-gdeck-shield.qtell-gdeck-shield.qtell-gdeck-shield {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--qtell-purple-700);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--qtell-teal-600) 25%, transparent);
  color: var(--qtell-teal-400);
}

.qtell-gdeck-shield svg { width: 19px; height: 19px; }

.qtell-gdeck-tag.qtell-gdeck-tag.qtell-gdeck-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
  font-family: var(--qtell-font-body);
  font-size: 10.5px;
  font-weight: var(--qtell-weight-strong);
  white-space: nowrap;
}

/* Audit */
.qtell-gdeck-rows--audit.qtell-gdeck-rows--audit.qtell-gdeck-rows--audit { margin-top: 10px; gap: 6px; }

.qtell-gdeck-auditrow.qtell-gdeck-auditrow.qtell-gdeck-auditrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  font-size: 10.5px;
}

.qtell-gdeck-auditlabel.qtell-gdeck-auditlabel.qtell-gdeck-auditlabel {
  font-family: var(--qtell-font-body);
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-gdeck-auditvalue.qtell-gdeck-auditvalue.qtell-gdeck-auditvalue {
  font-family: var(--qtell-font-body);
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-teal-700);
}

.qtell-entroll-row--reverse { flex-direction: row-reverse; }

.qtell-entroll-text {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 600px;
}

.qtell-entroll-para {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-prose);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-entroll-para--lead {
  font-weight: 600;
  color: var(--qtell-heading, var(--qtell-purple-700));
}

.qtell-entroll-plain-col {
  max-width: 620px;
}

.qtell-entroll-media {
  flex: 1 1 400px;
  min-width: 0;
  max-width: 560px;
}

.qtell-entroll-stage {
  position: relative;
  aspect-ratio: 52 / 44;
  font-size: clamp(8px, 1vw, 10.8px);
  line-height: 1.3;
}

.qtell-entroll-erx { animation: none; }
.is-in .qtell-entroll-erx {
  animation-name: var(--qtell-entroll-an);
  animation-duration: var(--qtell-entroll-du, .55s);
  animation-delay: var(--qtell-entroll-d, 0s);
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  animation-fill-mode: both;
}

/* Per-element stagger delays for the fixed animation timeline */
.qtell-entroll-d1 { --qtell-entroll-d: .1s; }
.qtell-entroll-d2 { --qtell-entroll-d: .6s; }
.qtell-entroll-d3 { --qtell-entroll-d: 1.0s; }
.qtell-entroll-d4 { --qtell-entroll-d: 1.22s; }
.qtell-entroll-d5 { --qtell-entroll-d: 1.44s; }
.qtell-entroll-d6 { --qtell-entroll-d: 1.66s; }
.qtell-entroll-d7 { --qtell-entroll-d: 1.88s; }
.qtell-entroll-d8 { --qtell-entroll-d: 2.10s; }
.qtell-entroll-d9 { --qtell-entroll-d: 2.32s; }
.qtell-entroll-d10 { --qtell-entroll-d: 2.54s; }
.qtell-entroll-d11 { --qtell-entroll-d: 2.76s; }
.qtell-entroll-d12 { --qtell-entroll-d: 3.7s; }
.qtell-entroll-d13 { --qtell-entroll-d: 4.1s; }
.qtell-entroll-d14 { --qtell-entroll-d: 4.3s; }
.qtell-entroll-d15 { --qtell-entroll-d: 4.5s; }
.qtell-entroll-d16 { --qtell-entroll-d: 3.3s; }

.qtell-entroll-bubble {
  position: absolute;
  border-radius: 1.2em;
  padding: 1em 1.4em;
  font-size: 1.25em;
  font-weight: 600;
}

.qtell-entroll-bubble--question {
  --qtell-entroll-an: qtell-entroll-pop;
  right: 0;
  top: 0;
  max-width: 40em;
  border-radius: 1.2em 1.2em .3em 1.2em;
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
  box-shadow: 0 1em 2em -1.4em color-mix(in srgb, var(--qtell-purple-700) 60%, transparent);
}

.qtell-entroll-card {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 1.2em;
  background: var(--qtell-white);
}

.qtell-entroll-card--check {
  --qtell-entroll-an: qtell-entroll-pop;
  top: 5.6em;
  padding: 1.3em 1.5em;
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 1.2em 2.4em -1.8em color-mix(in srgb, var(--qtell-purple-700) 45%, transparent);
}

.qtell-entroll-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qtell-entroll-check-label {
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qtell-app-text-muted);
}

.qtell-entroll-check-count {
  --qtell-entroll-an: qtell-entroll-pop;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--qtell-accent-ink);
}

.qtell-entroll-check-grid {
  margin-top: 1em;
  display: grid;
  grid-template-columns: 15em repeat(3, minmax(0, 1fr));
  gap: .5em;
  align-items: center;
}

.qtell-entroll-check-col {
  font-size: 1em;
  font-weight: 700;
  color: var(--qtell-app-text-muted);
  text-align: center;
}

.qtell-entroll-check-row-label {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-entroll-swatch {
  width: .8em;
  height: .8em;
  border-radius: .2em;
  flex: none;
}

.qtell-entroll-swatch--a { background: var(--qtell-purple-700); }
.qtell-entroll-swatch--b { background: var(--qtell-purple-500); }
.qtell-entroll-swatch--c { background: var(--qtell-purple-300); }

.qtell-entroll-check-cell {
  --qtell-entroll-an: qtell-entroll-fade;
  height: 2.4em;
  border-radius: .6em;
  display: grid;
  place-items: center;
  color: var(--qtell-accent-ink);
}

.qtell-entroll-tick {
  --qtell-entroll-an: qtell-entroll-pop;
  display: inline-flex;
}

.qtell-entroll-tick svg { width: 1em; height: 1em; }

.qtell-entroll-card--answer {
  --qtell-entroll-an: qtell-entroll-rise;
  top: 22.6em;
  padding: 1.5em 1.7em;
  border: 1.5px solid var(--qtell-purple-700);
  box-shadow: 0 2em 4em -2.4em color-mix(in srgb, var(--qtell-purple-700) 55%, transparent);
}

.qtell-entroll-answer-head {
  display: flex;
  align-items: center;
  gap: .6em;
}

.qtell-entroll-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .9em;
  border-radius: 999px;
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
  font-size: 1.05em;
  font-weight: 800;
}

.qtell-entroll-answer-badge-icon {
  display: inline-flex;
  color: var(--qtell-teal-400);
}

.qtell-entroll-answer-badge-icon svg { width: 1em; height: 1em; }

.qtell-entroll-answer-title {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--qtell-purple-600);
}

.qtell-entroll-answer-rows {
  margin-top: 1.1em;
  display: flex;
  flex-direction: column;
  gap: .7em;
}

.qtell-entroll-answer-row {
  display: grid;
  grid-template-columns: 13.5em minmax(0, 1fr) 4.2em;
  align-items: center;
  gap: 1em;
  font-size: 1.1em;
}

.qtell-entroll-answer-name {
  font-weight: 600;
  color: var(--qtell-purple-900);
  white-space: nowrap;
}

.qtell-entroll-answer-track {
  height: 1em;
  border-radius: .3em;
  background: var(--qtell-app-surface-alt);
  overflow: hidden;
}

.qtell-entroll-answer-fill {
  --qtell-entroll-an: qtell-entroll-grow;
  display: block;
  height: 100%;
  width: var(--qtell-pct, 100%);
  transform-origin: left;
  transform: scaleX(0);
}

.qtell-entroll-answer-fill--a { background: var(--qtell-purple-700); }
.qtell-entroll-answer-fill--b { background: var(--qtell-purple-500); }
.qtell-entroll-answer-fill--c { background: var(--qtell-purple-300); }

.qtell-entroll-answer-value {
  font-weight: 800;
  color: var(--qtell-purple-700);
  text-align: right;
}

.qtell-entroll-answer-total {
  margin-top: 1em;
  padding-top: .9em;
  border-top: 1px solid var(--qtell-app-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.qtell-entroll-answer-total span:first-child {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--qtell-purple-600);
}

.qtell-entroll-answer-total-value {
  font-size: 1.8em;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--qtell-purple-700);
}

@keyframes qtell-entroll-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes qtell-entroll-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qtell-entroll-rise {
  from { opacity: 0; transform: translateY(1.4em); }
  to { opacity: 1; transform: none; }
}

@keyframes qtell-entroll-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.qtell-entroll-bubble,
.qtell-entroll-card { opacity: 0; }
.is-in .qtell-entroll-bubble,
.is-in .qtell-entroll-card { opacity: 1; }

@media (max-width: 760px) {
  .qtell-entroll-stage { font-size: clamp(7px, 2.6vw, 9px); }
}

@media (prefers-reduced-motion: reduce) {
  .qtell-entroll-erx,
  .qtell-entroll-bubble,
  .qtell-entroll-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .qtell-entroll-answer-fill { transform: scaleX(1) !important; }
}

/* ==========================================================================
   Persona Hero (centred text-only hero with soft blob background)
   ========================================================================== */

.qtell-persona-hero {
  position: relative;
  overflow: hidden;
}

.qtell-persona-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qtell-persona-hero-blob {
  position: absolute;
  border-radius: 50%;
}

.qtell-persona-hero-blob--left {
  width: 64vmax;
  height: 64vmax;
  left: -26vmax;
  top: -38vmax;
  background: radial-gradient(closest-side, var(--qtell-purple-200), transparent);
}

.qtell-persona-hero-blob--right {
  width: 58vmax;
  height: 58vmax;
  right: -28vmax;
  top: -20vmax;
  background: radial-gradient(closest-side, var(--qtell-blend-light), transparent);
}

.qtell-section.qtell-persona-hero {
  padding-top: clamp(60px, 8.5vw, 116px);
  padding-bottom: clamp(52px, 7vw, 92px);
}

.qtell-persona-hero-inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--qtell-editorial-gutter);
}

.qtell-persona-hero-inner--wide {
  max-width: 1060px;
}

.qtell-persona-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qtell-persona-hero .qtell-persona-hero-heading {
  max-width: 18ch;
  margin-top: 22px;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-display);
  font-weight: var(--qtell-weight-display);
  line-height: 1.03;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: var(--qtell-purple-700);
}

.qtell-persona-hero .qtell-persona-hero-heading.qtell-persona-hero-heading--20ch {
  max-width: 20ch;
}

.qtell-persona-hero .qtell-persona-hero-lead {
  margin-top: 26px;
  max-width: 60ch;
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-hero-lead);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--qtell-purple-900);
}

.qtell-persona-hero .qtell-persona-hero-btn {
  margin-top: 36px;
}

/* Optional stacked statement lines above the heading (closing-CTA use) */
.qtell-persona-hero-pretext {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
}

.qtell-persona-hero-pretext p {
  margin: 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--qtell-purple-600);
}

/* H2 variant (mid-page closing CTA) shares the hero layout at a smaller scale */
.qtell-persona-hero .qtell-persona-hero-heading.qtell-persona-hero-heading--h2 {
  max-width: 22ch;
  margin-top: 18px;
  font-size: var(--qtell-type-cta-h2);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.qtell-persona-hero--gradient .qtell-persona-hero-inner {
  max-width: 900px;
}

.qtell-persona-hero--gradient .qtell-persona-hero-btn {
  margin-top: 32px;
}

/* Diagonal gradient background (closing CTA), in place of the soft blobs */
.qtell-section.qtell-persona-hero.qtell-persona-hero--gradient {
  padding-top: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 92px);
  background: linear-gradient(135deg, var(--qtell-purple-100), var(--qtell-blend-light));
}

/* ==========================================================================
   Activity Feed (text one side, a stacked feed of cards the other: plain
   status pills, alert-dot conditions, or a connected timeline of steps)
   ========================================================================== */

.qtell-afeed-media {
  position: relative;
  border-radius: 24px;
  padding: 32px;
  background: linear-gradient(135deg, var(--qtell-blend-light), var(--qtell-purple-100));
  overflow: hidden;
}

.qtell-afeed-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qtell-afeed-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 16px 32px -26px var(--qtell-shadow-color);
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.qtell-afeed.is-in .qtell-afeed-card {
  opacity: 1;
  transform: none;
}

.qtell-afeed-card:nth-child(1) { transition-delay: 0ms; }
.qtell-afeed-card:nth-child(2) { transition-delay: 130ms; }
.qtell-afeed-card:nth-child(3) { transition-delay: 260ms; }
.qtell-afeed-card:nth-child(4) { transition-delay: 390ms; }
.qtell-afeed-card:nth-child(5) { transition-delay: 520ms; }
.qtell-afeed-card:nth-child(6) { transition-delay: 650ms; }

.qtell-afeed-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
  display: grid;
  place-items: center;
  font-family: var(--qtell-font-heading);
  font-size: 14px;
  font-weight: 800;
}

.qtell-afeed-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--qtell-radius-full);
  background: var(--qtell-app-teal-tint);
  color: var(--qtell-accent-ink);
  font-family: var(--qtell-font-heading);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.qtell-afeed-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qtell-teal-600);
}

.qtell-afeed-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--qtell-app-alert);
}

.qtell-afeed.is-in .qtell-afeed-card--alert .qtell-afeed-dot {
  animation: qtell-afeed-pulse 1.6s ease-out infinite;
}

.qtell-afeed-card--alert:nth-child(1) .qtell-afeed-dot { animation-delay: 0.5s; }
.qtell-afeed-card--alert:nth-child(2) .qtell-afeed-dot { animation-delay: 0.63s; }
.qtell-afeed-card--alert:nth-child(3) .qtell-afeed-dot { animation-delay: 0.76s; }
.qtell-afeed-card--alert:nth-child(4) .qtell-afeed-dot { animation-delay: 0.89s; }
.qtell-afeed-card--alert:nth-child(5) .qtell-afeed-dot { animation-delay: 1.02s; }
.qtell-afeed-card--alert:nth-child(6) .qtell-afeed-dot { animation-delay: 1.15s; }

@keyframes qtell-afeed-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qtell-app-alert) 45%, transparent); }
  100% { box-shadow: 0 0 0 0.7em color-mix(in srgb, var(--qtell-app-alert) 0%, transparent); }
}

.qtell-afeed-dot--done {
  background: var(--qtell-teal-600);
  color: var(--qtell-white);
  display: grid;
  place-items: center;
}

.qtell-afeed-dot--done svg { width: 12px; height: 12px; }

.qtell-afeed-body {
  min-width: 0;
}

.qtell-afeed-title {
  font-family: var(--qtell-font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--qtell-purple-900);
}

.qtell-afeed-subtitle {
  margin-top: 2px;
  font-family: var(--qtell-font-body);
  font-size: 14px;
  color: var(--qtell-purple-600);
}

.qtell-afeed-eyebrow {
  font-family: var(--qtell-font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--qtell-app-text-muted);
}

.qtell-afeed-value {
  margin-left: auto;
  flex: none;
  font-family: var(--qtell-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--qtell-purple-900);
}

/* Timeline variant: a connecting rail behind the avatar column */
.qtell-afeed-list--timeline {
  position: relative;
}

.qtell-afeed-list--timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 21px;
  bottom: 21px;
  width: 2px;
  background: var(--qtell-purple-200);
}

.qtell-afeed-list--timeline .qtell-afeed-card {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 16px;
}

.qtell-afeed-list--timeline .qtell-afeed-body {
  flex: 1 1 auto;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: 0 16px 32px -26px var(--qtell-shadow-color);
}

@media (prefers-reduced-motion: reduce) {
  .qtell-afeed-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .qtell-afeed.is-in .qtell-afeed-card--alert .qtell-afeed-dot {
    animation: none;
  }
}

@media (max-width: 760px) {
  .qtell-afeed-title { font-size: 16px; }
}

/* ==========================================================================
   Fanning Card Deck (overlapping sticky cards that fan out on scroll/click)
   ========================================================================== */

.qtell-fandeck {
  margin-top: var(--qtell-flow-2xl);
  display: flex;
  align-items: stretch;
  padding: 12px 0 24px;
}

.qtell-fandeck > li {
  position: relative;
  min-width: 0;
  flex: 0 0 calc((100% + 4 * 84px) / 5);
  display: flex;
  flex-direction: column;
  padding: 10px 10px 26px;
  border-radius: 26px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  box-shadow: -18px 20px 40px -28px var(--qtell-shadow-color);
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

.qtell-fandeck[data-ready] > li {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qtell-fandeck > li + li {
  margin-left: -84px;
}

/* Positional stagger (offset, fan-out distance, transition delay, stacking
   order): fixed per-position rules avoid an inline style="" on generated markup */
.qtell-fandeck > li:nth-child(1) { z-index: 1; }
.qtell-fandeck > li:nth-child(2) { z-index: 2; margin-top: 14px; transition-delay: 70ms; }
.qtell-fandeck > li:nth-child(3) { z-index: 3; margin-top: 28px; transition-delay: 140ms; }
.qtell-fandeck > li:nth-child(4) { z-index: 4; margin-top: 42px; transition-delay: 210ms; }
.qtell-fandeck > li:nth-child(5) { z-index: 5; margin-top: 56px; transition-delay: 280ms; }
.qtell-fandeck > li:nth-child(6) { z-index: 6; margin-top: 70px; transition-delay: 350ms; }

.qtell-fandeck:not([data-open]) > li:nth-child(1) { transform: translateX(0); }
.qtell-fandeck:not([data-open]) > li:nth-child(2) { transform: translateX(-170px); }
.qtell-fandeck:not([data-open]) > li:nth-child(3) { transform: translateX(-340px); }
.qtell-fandeck:not([data-open]) > li:nth-child(4) { transform: translateX(-510px); }
.qtell-fandeck:not([data-open]) > li:nth-child(5) { transform: translateX(-680px); }
.qtell-fandeck:not([data-open]) > li:nth-child(6) { transform: translateX(-850px); }

@media (hover: hover) and (min-width: 1100px) {
  .qtell-fandeck > li:hover,
  .qtell-fandeck > li:focus-visible {
    z-index: 30 !important;
    transform: translateY(-12px);
    box-shadow: 0 34px 60px -30px var(--qtell-shadow-color);
  }
}

.qtell-fandeck > li[data-active] {
  z-index: 20 !important;
  transform: translateY(-12px);
  box-shadow: 0 34px 60px -30px var(--qtell-shadow-color);
}

.qtell-fandeck-visual {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--qtell-blend-light) 0%, var(--qtell-purple-100) 100%);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qtell-fandeck-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
  box-shadow: 0 16px 30px -16px var(--qtell-shadow-color);
}

.qtell-fandeck-icon svg { width: 34px; height: 34px; }

.qtell-editorial .qtell-fandeck-title {
  margin: 22px 16px 0;
  font-family: var(--qtell-font-heading);
  font-size: clamp(20px, 1.8vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--qtell-purple-700);
  text-wrap: balance;
}

.qtell-fandeck-text {
  margin: 10px 16px 0;
  font-family: var(--qtell-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--qtell-purple-600);
  text-wrap: pretty;
}

@media (max-width: 1099px) {
  .qtell-fandeck {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 5vw, 48px);
    margin-left: calc(-1 * clamp(20px, 5vw, 48px));
    margin-right: calc(-1 * clamp(20px, 5vw, 48px));
    padding-left: clamp(20px, 5vw, 48px) !important;
    padding-right: clamp(20px, 5vw, 48px) !important;
    scrollbar-width: none;
  }
  .qtell-fandeck > li {
    flex: 0 0 270px;
    scroll-snap-align: start;
    margin-top: 0 !important;
    transform: none !important;
  }
  .qtell-fandeck > li + li {
    margin-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qtell-fandeck > li {
    transform: none !important;
    transition: none;
  }
}

/* ==========================================================================
   Checklist Section (sticky heading beside a plain icon + text list)
   ========================================================================== */

.qtell-checklist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qtell-flow-xl) var(--qtell-editorial-split-gap);
  align-items: flex-start;
}

.qtell-checklist-grid--reverse {
  flex-direction: row-reverse;
}

.qtell-checklist-head {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 500px;
}

@media (min-width: 1000px) {
  .qtell-checklist-head {
    position: sticky;
    top: var(--qtell-sticky-offset);
  }
}

.qtell-editorial .qtell-checklist-heading {
  margin: var(--qtell-flow-xs) 0 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

/* "large" heading variant: a real H2 at the Why Qtell "One Governed
   Understanding" section's specific size (smaller than the standard
   .qtell-ed-heading editorial H2 used elsewhere) */
.qtell-editorial .qtell-checklist-heading--large {
  font-size: var(--qtell-type-banner-heading);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Qtell Icon Grid: optional smaller "statement" heading size (Why Qtell
   "Managed for you" section), instead of the element's default large H2 */
.qtell-editorial .qtell-icon-grid-heading {
  margin: var(--qtell-flow-sm) 0 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

.qtell-checklist {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Beats the parent theme's `.page-content ul { margin-left: 10px }` and `.page-content ul li { padding-left: 20px }`,
   which would inset the whole list and every row by 10px/20px. */
.qtell-section .qtell-checklist.qtell-checklist {
  margin-left: 0;
  padding-left: 0;
}

.qtell-section .qtell-checklist .qtell-checklist-item {
  padding-left: 0;
}

.qtell-checklist-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid var(--qtell-border-soft);
}

.qtell-checklist > .qtell-checklist-item:last-child {
  border-bottom: 1px solid var(--qtell-border-soft);
}

.qtell-checklist-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--qtell-purple-100);
  color: var(--qtell-purple-700);
}

.qtell-checklist-icon svg {
  width: 21px;
  height: 21px;
}

.qtell-checklist-item--accent .qtell-checklist-icon {
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
}

.qtell-editorial .qtell-checklist-text {
  margin: 0;
  margin-top: 9px;
  font-family: var(--qtell-font-body);
  font-size: var(--qtell-type-panel-text);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-900);
}

/* Round-tile variant ("Govern every AI application"): compact list on a diagonal gradient. The grid centres its two
   columns, the head is a little wider, the list has a top rule and every row a bottom rule in border-strong, tiles
   are 30px circles and the text is 16.5px with no top offset. */
.qtell-checklist-section--gradient {
  background: linear-gradient(135deg, var(--qtell-blend-light), var(--qtell-purple-100));
}

.qtell-checklist-section--circle .qtell-checklist-grid {
  gap: 40px var(--qtell-editorial-split-gap);
  align-items: center;
}

.qtell-checklist-section--circle .qtell-checklist-head {
  flex-basis: 380px;
  max-width: 540px;
}

.qtell-editorial .qtell-checklist-section--circle .qtell-checklist-heading {
  margin-top: 20px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.42;
  letter-spacing: -0.015em;
}

.qtell-checklist.qtell-checklist--circle {
  flex-basis: 420px;
  max-width: 600px;
  border-top: 1px solid var(--qtell-purple-200);
}

.qtell-checklist--circle .qtell-checklist-item {
  gap: 16px;
  padding: 20px 0;
  border-top: 0;
  border-bottom: 1px solid var(--qtell-purple-200);
}

.qtell-checklist--circle .qtell-checklist-item:last-child {
  border-bottom: 1px solid var(--qtell-purple-200);
}

.qtell-checklist--circle .qtell-checklist-icon {
  margin-top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
}

.qtell-checklist--circle .qtell-checklist-icon svg {
  width: 16px;
  height: 16px;
}

.qtell-editorial .qtell-checklist--circle .qtell-checklist-text {
  margin-top: 0;
  font-size: 16.5px;
}

/* Icons in the mockups are drawn with a 1.8 stroke; the library's default is 2 */
.qtell-checklist-icon svg {
  stroke-width: 1.8;
}

@media (max-width: 900px) {
  .qtell-checklist-head {
    position: relative;
    top: auto;
    max-width: 100%;
  }
  .qtell-checklist-grid--reverse {
    flex-direction: column;
  }
}

/* ==========================================================================
   Hub Cards (centred intro + card grid linking out to other pages)
   ========================================================================== */

.qtell-hubcards-intro {
  max-width: 880px;
  margin: 0 auto;
}

.qtell-editorial .qtell-hubcards-heading {
  margin: var(--qtell-flow-sm) 0 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

.qtell-hubcards-grid {
  margin-top: var(--qtell-editorial-block-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.qtell-hubcards-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 24px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
  box-shadow: 0 30px 50px -40px var(--qtell-shadow-color);
}

.qtell-hubcards-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 44px;
}

.qtell-hubcards-bar {
  width: 14px;
  border-radius: 4px;
}

.qtell-hubcards-bar--short { height: 14px; }
.qtell-hubcards-bar--mid { height: 29px; }
.qtell-hubcards-bar--tall { height: 44px; }

.qtell-hubcards-bar-c--muted { background: var(--qtell-purple-200); }
.qtell-hubcards-bar-c--teal { background: var(--qtell-teal-600); }

.qtell-editorial .qtell-hubcards-title {
  margin-top: 10px;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-card-title-lg);
  font-weight: var(--qtell-weight-display);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--qtell-purple-700);
}

.qtell-editorial .qtell-hubcards-text {
  font-family: var(--qtell-font-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-hubcards-linkwrap {
  margin-top: auto;
  line-height: normal;
  padding-top: 10px;
}

.qtell-editorial a.qtell-hubcards-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: normal;
  font-family: var(--qtell-font-heading);
  font-size: 15.5px;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-accent-ink);
  text-decoration: none;
  text-underline-offset: 4px;
}

.qtell-editorial a.qtell-hubcards-link:hover {
  text-decoration: underline;
  color: var(--qtell-purple-700);
}

/* Featured card: dark purple fill, white/teal text, border-strong bars turn translucent white */
.qtell-hubcards-card--featured {
  background: var(--qtell-purple-700);
  border-color: var(--qtell-purple-700);
}

.qtell-hubcards-card--featured .qtell-hubcards-bar-c--muted {
  background: color-mix(in srgb, var(--qtell-white) 22%, transparent);
}

.qtell-editorial .qtell-hubcards-card--featured .qtell-hubcards-title {
  color: var(--qtell-white);
}

.qtell-editorial .qtell-hubcards-card--featured .qtell-hubcards-text {
  color: var(--qtell-purple-100);
}

.qtell-editorial .qtell-hubcards-card--featured a.qtell-hubcards-link {
  color: var(--qtell-teal-400);
}

.qtell-editorial .qtell-hubcards-card--featured a.qtell-hubcards-link:hover {
  color: var(--qtell-white);
}

/* ==========================================================================
   Hub Grid (text beside a 2x2 icon-card grid linking out to other pages)
   ========================================================================== */

.qtell-hubgrid-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qtell-flow-xl) var(--qtell-editorial-split-gap);
  align-items: center;
}

.qtell-hubgrid-grid--reverse {
  flex-direction: row-reverse;
}

.qtell-hubgrid-head {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 500px;
}

.qtell-editorial .qtell-hubgrid-heading {
  margin: var(--qtell-flow-sm) 0 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

.qtell-hubgrid-cards {
  flex: 1.2 1 460px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.qtell-hubgrid-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--qtell-white);
  border: 1px solid var(--qtell-border-soft);
}

.qtell-hubgrid-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
}

.qtell-hubgrid-icon svg {
  width: 21px;
  height: 21px;
}

.qtell-editorial .qtell-hubgrid-title {
  margin-top: 6px;
  font-family: var(--qtell-font-heading);
  font-size: 21px;
  font-weight: var(--qtell-weight-display);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--qtell-purple-700);
}

.qtell-editorial .qtell-hubgrid-text {
  font-family: var(--qtell-font-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-600);
}

.qtell-hubgrid-linkwrap {
  margin-top: auto;
  line-height: normal;
  padding-top: 6px;
}

.qtell-editorial a.qtell-hubgrid-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: normal;
  font-family: var(--qtell-font-heading);
  font-size: 15.5px;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-accent-ink);
  text-decoration: none;
  text-underline-offset: 4px;
}

.qtell-editorial a.qtell-hubgrid-link:hover {
  text-decoration: underline;
  color: var(--qtell-purple-700);
}

@media (max-width: 560px) {
  .qtell-hubgrid-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Process Tabs (numbered list synced with a tab-strip + swappable panel)
   ========================================================================== */

.qtell-ptabs-intro {
  max-width: 880px;
}

.qtell-editorial .qtell-ptabs-heading {
  margin: var(--qtell-flow-sm) 0 0;
  font-family: var(--qtell-font-heading);
  font-size: var(--qtell-type-lead);
  font-weight: var(--qtell-weight-semibold);
  line-height: 1.42;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--qtell-purple-700);
}

.qtell-ptabs {
  margin-top: var(--qtell-editorial-intro-gap);
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 5vw, 72px);
  align-items: center;
}

.qtell-ptabs-list {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 560px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qtell-ptabs-step {
  cursor: pointer;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: none;
  transition: background 0.2s, border-color 0.2s;
}

.qtell-ptabs-step:hover,
.qtell-ptabs-step:focus-visible {
  border-color: var(--qtell-border-soft);
}

.qtell-ptabs-step[aria-pressed="true"] {
  background: var(--qtell-white);
  border-color: var(--qtell-border-soft);
  box-shadow: 0 20px 40px -32px var(--qtell-shadow-color);
}

.qtell-ptabs-num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--qtell-purple-700);
  color: var(--qtell-teal-400);
  display: grid;
  place-items: center;
}

.qtell-ptabs-num svg {
  width: 20px;
  height: 20px;
}

.qtell-editorial .qtell-ptabs-step-text {
  margin: 0;
  margin-top: 8px;
  font-family: var(--qtell-font-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--qtell-purple-900);
}

/* Visual panel: tab-strip + swappable screen content */
.qtell-ptabs-panel {
  flex: 1.1 1 440px;
  min-width: 0;
  max-width: 600px;
  position: relative;
  aspect-ratio: 50 / 30;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--qtell-blend-light), var(--qtell-purple-100));
  overflow: hidden;
  padding: clamp(20px, 4.8cqw, 40px);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.qtell-ptabs-tabstrip {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--qtell-white) 70%, transparent);
}

.qtell-editorial .qtell-ptabs-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 999px;
  font-family: var(--qtell-font-heading);
  font-size: 15px;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-purple-600);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.qtell-ptabs-tab[data-active] {
  background: var(--qtell-purple-700);
  color: var(--qtell-white);
}

.qtell-ptabs-screens {
  position: relative;
  flex: 1;
  margin-top: 20px;
}

.qtell-ptabs-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s, visibility 0.35s;
}

.qtell-ptabs-screen[data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.qtell-ptabs-bubble {
  align-self: flex-end;
  max-width: 78%;
  padding: 14px 18px;
  border-radius: 18px 18px 4px 18px;
  background: var(--qtell-app-lavender);
  color: var(--qtell-purple-900);
  font-family: var(--qtell-font-body);
  font-size: 15px;
}

.qtell-ptabs-answer,
.qtell-ptabs-card {
  background: var(--qtell-white);
  border: 1px solid var(--qtell-app-border);
  border-radius: 16px;
  box-shadow: 0 16px 32px -26px var(--qtell-shadow-color);
  padding: 18px 20px;
}

.qtell-editorial .qtell-ptabs-answer-label {
  margin: 0;
  font-family: var(--qtell-font-body);
  font-size: 14px;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-app-text-muted);
}

.qtell-editorial .qtell-ptabs-answer-value {
  margin: 6px 0 0;
  font-family: var(--qtell-font-heading);
  font-size: 21px;
  font-weight: var(--qtell-weight-strong);
  letter-spacing: -0.02em;
  color: var(--qtell-purple-700);
}

.qtell-ptabs-pills {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qtell-ptabs-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--qtell-app-teal-tint);
  color: var(--qtell-accent-ink);
  font-family: var(--qtell-font-heading);
  font-size: 13px;
  font-weight: var(--qtell-weight-display);
  white-space: nowrap;
}

.qtell-ptabs-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qtell-ptabs-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.qtell-ptabs-dot--risk { background: var(--qtell-app-alert); }
.qtell-ptabs-dot--opportunity { background: var(--qtell-accent-ink); }
.qtell-ptabs-dot--change { background: var(--qtell-purple-700); }

.qtell-editorial .qtell-ptabs-card-title {
  margin: 0;
  font-family: var(--qtell-font-heading);
  font-size: 18px;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-purple-900);
}

.qtell-ptabs-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--qtell-font-heading);
  font-size: 13px;
  font-weight: var(--qtell-weight-display);
  white-space: nowrap;
}

.qtell-ptabs-tag--risk { background: var(--qtell-app-alert-tint); color: var(--qtell-app-alert); }
.qtell-ptabs-tag--opportunity { background: var(--qtell-app-teal-tint); color: var(--qtell-accent-ink); }
.qtell-ptabs-tag--change { background: var(--qtell-purple-100); color: var(--qtell-purple-700); }

.qtell-ptabs-card--wide {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qtell-ptabs-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qtell-ptabs-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40% 44px;
  align-items: center;
  gap: 14px;
}

.qtell-editorial .qtell-ptabs-bar-label {
  font-family: var(--qtell-font-body);
  font-size: 14.5px;
  color: var(--qtell-purple-900);
}

.qtell-ptabs-bar-track {
  height: 10px;
  border-radius: 6px;
  background: var(--qtell-purple-100);
  overflow: hidden;
}

.qtell-ptabs-bar-fill {
  display: block;
  height: 100%;
  width: var(--qtell-pct, 50%);
  background: var(--qtell-purple-700);
}

.qtell-editorial .qtell-ptabs-bar-value {
  font-family: var(--qtell-font-heading);
  font-size: 14.5px;
  font-weight: var(--qtell-weight-display);
  text-align: right;
  color: var(--qtell-purple-700);
}

.qtell-ptabs-actionicon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--qtell-purple-100);
  color: var(--qtell-purple-700);
}

.qtell-ptabs-actionicon svg {
  width: 17px;
  height: 17px;
}

.qtell-ptabs-actionicon--done {
  background: var(--qtell-teal-600);
  color: var(--qtell-white);
}

@media (max-width: 1100px) {
  .qtell-ptabs-panel {
    min-height: calc((100vw - 40px) * 0.62);
  }
}

@media (max-width: 760px) {
  .qtell-ptabs-bar-row {
    grid-template-columns: minmax(0, 1fr) 30% 36px;
  }
}

/* ==========================================================================
   Detail Columns (independent topic columns, top border + eyebrow + text)
   ========================================================================== */

.qtell-detailcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(var(--qtell-flow-2xl), 4vw, 64px);
}

.qtell-detailcol {
  display: flex;
  flex-direction: column;
  padding-top: var(--qtell-flow-md);
  border-top: 2px solid var(--qtell-purple-700);
}

/* Two classes: must beat .qtell-section h2 (0,1,1) */
.qtell-detailcol .qtell-detailcol-heading {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-heading);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-purple-700);
  text-wrap: balance;
}

.qtell-detailcol-para {
  margin-top: var(--qtell-flow-sm);
  font-family: var(--qtell-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--qtell-foreground-muted);
  text-wrap: pretty;
}

.qtell-detailcol-para--lead {
  margin-top: var(--qtell-flow-sm);
}

.qtell-detailcol-para--strong {
  font-weight: var(--qtell-weight-strong);
  color: var(--qtell-foreground);
}

.qtell-detailcols-footnote {
  margin-top: clamp(var(--qtell-flow-2xl), 6vw, 72px);
  padding-top: var(--qtell-flow-sm);
  border-top: 1px solid var(--qtell-border-soft);
  font-family: var(--qtell-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--qtell-foreground-muted);
}

/* ==========================================================================
   Pricing Hero (eyebrow + heading + lead + bold price statement + sub-line)
   ========================================================================== */

.qtell-pricing-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(var(--qtell-flow-2xl), 5vw, 64px);
}

.qtell-pricing-hero .qtell-editorial-container {
  position: relative;
}

.qtell-pricing-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qtell-pricing-hero-center .qtell-section-label {
  justify-content: center;
}

/* Two classes: must beat .qtell-section h1 (0,1,1) */
.qtell-pricing-hero .qtell-pricing-hero-heading {
  margin-top: var(--qtell-flow-sm);
  max-width: 20ch;
  font-family: var(--qtell-font-heading);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: var(--qtell-weight-display);
  color: var(--qtell-purple-700);
  text-wrap: balance;
}

.qtell-pricing-hero-lead {
  margin-top: var(--qtell-flow-lg);
  max-width: 62ch;
  font-family: var(--qtell-font-body);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--qtell-foreground-muted);
  text-wrap: pretty;
}

.qtell-pricing-hero-statement {
  margin-top: var(--qtell-flow-xl);
  font-family: var(--qtell-font-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--qtell-weight-strong);
  letter-spacing: -0.02em;
  color: var(--qtell-purple-700);
}

.qtell-pricing-hero-subline {
  margin-top: 10px;
  font-family: var(--qtell-font-body);
  font-size: 16px;
  font-weight: var(--qtell-weight-semibold);
  color: var(--qtell-accent-ink);
}

/* ==========================================================================
   About Hero — optional CTA button (qtell_about_hero btn_text/btn_url),
   used on the persona pages' text-only hero where no image/tour visual is
   wanted; button sits centred below the lead paragraph.
   ========================================================================== */

.qtell-about-hero .qtell-about-hero-btn {
  margin-top: var(--qtell-flow-lg);
}