/* Qtell page "why-qtell". Generated by docs/website/convert-page.py from the page mockup;
   do not edit by hand. Markup: framework/pages/why-qtell/. */
/* 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-why-qtell {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  --inv-cta-b: #3f5472;
  --inv-cta-c: #2f7280;
}
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell {
  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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(*, *::before, *::after) { box-sizing: border-box; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(ul, ol) { padding: 0; list-style: none; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(li) { margin: 0; padding-left: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell li::before, .qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell li::after { content: none; display: none; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h1, h2, h3, h4) { font-family: inherit; font-weight: 700; line-height: normal; letter-spacing: inherit; text-transform: none; color: inherit; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h1) { font-size: 2em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h2) { font-size: 1.5em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h3) { font-size: 1.17em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(h4) { font-size: 1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell span { font-weight: inherit; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(svg) { max-width: none; }
/* the theme forces max-width: 100% on images; the mockup has none */
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell button { all: revert; background-color: buttonface !important; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell summary { list-style: none; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell summary::-webkit-details-marker { display: none; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell details[open] summary svg { transform: rotate(45deg); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(a) { color: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(a:hover) { color: var(--qtell-accent-ink); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell :where(:focus-visible) { outline: 3px solid var(--qtell-teal-700); outline-offset: 3px; }

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s1 { position: relative; overflow: hidden; padding: clamp(60px,8.5vw,116px) 0 clamp(52px,7vw,92px); background: var(--qtell-white); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s2 { position: absolute; inset: 0; pointer-events: none; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s5 { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s6 { 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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s7 { width: 8px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s8 { height: 13px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s9 { fill: var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s10 { margin-top: 22px; max-width: 18ch; font-size: clamp(38px,5.4vw,72px); line-height: 1.03; letter-spacing: -.045em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s11 { margin-top: 26px; max-width: 60ch; font-size: clamp(18px,1.7vw,21px); line-height: 1.55; color: var(--qtell-purple-900); font-weight: 500; text-wrap: pretty; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s12 { 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; margin-top: 36px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s13 { padding: clamp(52px,7vw,92px) 0; background: var(--qtell-background-soft); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s14 { 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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s15 { flex: 1 1 360px; min-width: 0; max-width: 500px; position: sticky; top: var(--qtell-sticky-offset); align-self: flex-start; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s16 { margin-top: 18px; font-size: clamp(28px,3.2vw,40px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s17 { flex: 1 1 440px; min-width: 0; max-width: 660px; display: flex; flex-direction: column; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s18 { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--qtell-border-soft); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s19 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--qtell-purple-700); color: var(--qtell-teal-400); display: grid; place-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s20 { width: 21px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s21 { height: 21px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s22 { margin-top: 9px; font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; color: var(--qtell-purple-900); font-size: clamp(16.5px,1.45vw,18.5px); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s23 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--qtell-purple-100); color: var(--qtell-purple-700); display: grid; place-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s24 { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--qtell-border-soft); border-bottom: 1px solid var(--qtell-border-soft); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s25 { padding: clamp(52px,7vw,92px) 0; background: var(--qtell-white); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s26 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s27 { max-width: 880px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s28 { margin-top: 20px; font-size: clamp(20px,2vw,26px); line-height: 1.42; letter-spacing: -.015em; font-weight: 600; color: var(--qtell-purple-700); text-wrap: pretty; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s29 { margin-top: clamp(40px,5vw,64px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; align-items: stretch; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s30 { 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-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s31 { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s32 { width: 14px; height: 14px; border-radius: 4px; background: var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s33 { width: 14px; height: 29px; border-radius: 4px; background: var(--qtell-purple-200); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s34 { width: 14px; height: 44px; border-radius: 4px; background: var(--qtell-purple-200); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s35 { margin-top: 10px; font-size: clamp(21px,1.9vw,25px); line-height: 1.22; letter-spacing: -.02em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s36 { font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; font-size: 16px; color: var(--qtell-purple-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s37 { margin-top: auto; padding-top: 10px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s38 { display: inline-flex; font-size: 15.5px; font-weight: 700; color: var(--qtell-accent-ink); text-decoration: none; text-underline-offset: 4px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s39 { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px,3vw,36px); border-radius: 24px; background: var(--qtell-purple-700); border: 1px solid var(--qtell-purple-700); box-shadow: 0 30px 50px -40px var(--qtell-shadow-color); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s40 { width: 14px; height: 29px; border-radius: 4px; background: var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s41 { width: 14px; height: 44px; border-radius: 4px; background: color-mix(in srgb, var(--qtell-white) 22%, transparent); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s42 { margin-top: 10px; font-size: clamp(21px,1.9vw,25px); line-height: 1.22; letter-spacing: -.02em; font-weight: 700; color: var(--qtell-white); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s43 { font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; font-size: 16px; color: var(--qtell-purple-100); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s44 { display: inline-flex; font-size: 15.5px; font-weight: 700; color: var(--qtell-teal-400); text-decoration: none; text-underline-offset: 4px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s45 { width: 14px; height: 44px; border-radius: 4px; background: var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s46 { 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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s47 { flex: 1 1 360px; min-width: 0; max-width: 500px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s48 { flex: 1.2 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s49 { 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-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s50 { margin-top: 6px; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; color: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s51 { font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; font-size: 16px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s52 { margin-top: auto; padding-top: 6px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s53 { max-width: 880px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s54 { margin-top: clamp(36px,4.5vw,60px); display: flex; flex-wrap: wrap; gap: 32px clamp(32px,5vw,72px); align-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s55 { flex: 1 1 380px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s56 { --i: 0; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px; border-radius: 18px; border: 1px solid transparent; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s57 { 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-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s58 { width: 20px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s59 { height: 20px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s60 { margin-top: 8px; font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; font-size: 16.5px; color: var(--qtell-purple-900); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s61 { --i: 1; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px; border-radius: 18px; border: 1px solid transparent; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s62 { --i: 2; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px; border-radius: 18px; border: 1px solid transparent; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s63 { --i: 3; cursor: pointer; display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px; border-radius: 18px; border: 1px solid transparent; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s64 { flex: 1.1 1 440px; min-width: 0; max-width: 600px; position: relative; aspect-ratio: 50/30; container-type: inline-size; border-radius: 24px; background: linear-gradient(135deg,var(--qtell-blend-light),var(--qtell-purple-100)); overflow: hidden; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s65 { position: absolute; inset: 0; font-size: calc(100cqw / 50); line-height: 1.3; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s66 { position: absolute; left: 2.4em; right: 2.4em; top: 2.2em; display: flex; gap: .5em; padding: .4em; border-radius: 999px; background: color-mix(in srgb, var(--qtell-white) 70%, transparent); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s67 { --i: 0; cursor: pointer; flex: 1; text-align: center; padding: .6em 0; border-radius: 999px; font-size: 1.15em; font-weight: 700; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s68 { --i: 1; cursor: pointer; flex: 1; text-align: center; padding: .6em 0; border-radius: 999px; font-size: 1.15em; font-weight: 700; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s69 { --i: 2; cursor: pointer; flex: 1; text-align: center; padding: .6em 0; border-radius: 999px; font-size: 1.15em; font-weight: 700; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s70 { --i: 3; cursor: pointer; flex: 1; text-align: center; padding: .6em 0; border-radius: 999px; font-size: 1.15em; font-weight: 700; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s71 { --i: 0; position: absolute; left: 2.4em; right: 2.4em; top: 6.6em; bottom: 2.4em; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s72 { align-self: flex-end; max-width: 30em; padding: .9em 1.2em; border-radius: 1.1em 1.1em .3em 1.1em; background: #efe8f2; font-size: 1.3em; color: var(--qtell-purple-900); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s73 { background: var(--qtell-white); border: 1px solid var(--qtell-app-border); border-radius: 1em; box-shadow: 0 1em 2em -1.6em color-mix(in srgb, var(--qtell-purple-700) 50%, transparent); padding: 1.4em 1.6em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s74 { font-size: 1.05em; font-weight: 700; color: var(--qtell-app-text-muted); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s75 { margin-top: .4em; font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; color: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s76 { margin-top: 1em; display: flex; flex-wrap: wrap; gap: .5em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s77 { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--qtell-app-teal-tint); color: var(--qtell-accent-ink); font-size: 1em; font-weight: 700; white-space: nowrap; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s78 { --i: 1; position: absolute; left: 2.4em; right: 2.4em; top: 6.6em; bottom: 2.4em; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s79 { background: var(--qtell-white); border: 1px solid var(--qtell-app-border); border-radius: 1em; box-shadow: 0 1em 2em -1.6em color-mix(in srgb, var(--qtell-purple-700) 50%, transparent); padding: 1.1em 1.3em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s80 { display: flex; align-items: center; gap: 1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s81 { width: .8em; height: .8em; border-radius: 50%; background: var(--qtell-app-alert); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s82 { font-size: 1.3em; font-weight: 700; color: var(--qtell-purple-900); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s83 { margin-left: auto; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s84 { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--qtell-app-alert-tint); color: var(--qtell-app-alert); font-size: 1em; font-weight: 700; white-space: nowrap; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s85 { width: .8em; height: .8em; border-radius: 50%; background: var(--qtell-accent-ink); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s86 { width: .8em; height: .8em; border-radius: 50%; background: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s87 { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em; border-radius: 999px; background: var(--qtell-app-surface-alt); color: var(--qtell-purple-700); font-size: 1em; font-weight: 700; white-space: nowrap; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s88 { --i: 2; position: absolute; left: 2.4em; right: 2.4em; top: 6.6em; bottom: 2.4em; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s89 { margin-top: 1em; display: flex; flex-direction: column; gap: .9em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s90 { display: grid; grid-template-columns: minmax(0,1fr) 11em 3em; align-items: center; gap: 1em; font-size: 1.2em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s91 { color: var(--qtell-purple-900); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s92 { height: .8em; border-radius: .3em; background: var(--qtell-app-surface-alt); overflow: hidden; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s93 { display: block; height: 100%; width: 61%; background: var(--qtell-purple-700); transform-origin: left; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s94 { font-weight: 700; text-align: right; color: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s95 { display: block; height: 100%; width: 27%; background: var(--qtell-purple-700); transform-origin: left; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s96 { display: block; height: 100%; width: 12%; background: var(--qtell-purple-700); transform-origin: left; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s97 { --i: 3; position: absolute; left: 2.4em; right: 2.4em; top: 6.6em; bottom: 2.4em; display: flex; flex-direction: column; justify-content: center; gap: 1.1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s98 { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--qtell-app-surface-alt); color: var(--qtell-purple-700); display: grid; place-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s99 { width: 1.1em; height: 1.1em; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s100 { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--qtell-teal-600); color: var(--qtell-white); display: grid; place-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s101 { padding: clamp(52px,7vw,92px) 0; background: linear-gradient(135deg,var(--qtell-blend-light),var(--qtell-purple-100)); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s102 { flex: 1 1 380px; min-width: 0; max-width: 540px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s103 { flex: 1 1 420px; min-width: 0; max-width: 600px; display: flex; flex-direction: column; border-top: 1px solid var(--qtell-purple-200); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s104 { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--qtell-purple-200); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s105 { flex: none; margin-top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--qtell-purple-700); color: var(--qtell-teal-400); display: grid; place-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s106 { width: 16px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s107 { height: 16px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s108 { font-size: clamp(16px,1.4vw,18px); line-height: 1.6; color: var(--qtell-purple-600); text-wrap: pretty; font-size: 16.5px; color: var(--qtell-purple-900); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s109 { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s110 { margin: clamp(40px,5vw,64px) auto 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 32px clamp(28px,4vw,56px); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s111 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 26px; border-top: 3px solid var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s112 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); margin-bottom: clamp(40px,5vw,64px); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s113 { max-width: 820px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s114 { margin-top: 18px; font-size: clamp(32px,4vw,50px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s115 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: 48px 0; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s116 { padding-right: clamp(0px,4vw,64px); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s117 { display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--qtell-teal-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s118 { margin-top: 24px; font-size: clamp(20px,2vw,26px); line-height: 1.42; letter-spacing: -.015em; font-weight: 600; color: var(--qtell-purple-700); text-wrap: pretty; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s119 { 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; margin-top: 28px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s120 { padding-left: clamp(0px,4vw,64px); border-left: 1px solid var(--qtell-border-soft); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s121 { display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s122 { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s123 { 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-purple-700); background: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s124 { margin-top: 3px; color: var(--qtell-teal-400); display: inline-flex; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s125 { width: 14px; height: 14px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s126 { font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--qtell-white); text-wrap: pretty; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s127 { 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); margin-left: 18px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s128 { margin-top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--qtell-purple-200); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s129 { font-size: 16px; line-height: 1.55; font-weight: 600; color: var(--qtell-purple-900); text-wrap: pretty; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s130 { 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); margin-left: 36px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s131 { padding: clamp(52px,7vw,92px) 0; background: linear-gradient(135deg,var(--qtell-purple-100),var(--qtell-blend-light)); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s132 { 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-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s133 { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s134 { font-size: clamp(20px,2.2vw,28px); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; color: var(--qtell-purple-600); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s135 { margin-top: 18px; max-width: 22ch; font-size: clamp(30px,3.8vw,48px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-s136 { 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; margin-top: 32px; }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-h1:hover { background: var(--qtell-purple-800); color: var(--qtell-white); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-h2:hover { text-decoration: underline; color: var(--qtell-purple-700); }
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-h3:hover { text-decoration: underline; color: var(--qtell-white); }

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

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

@media (max-width:560px){.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqt {grid-template-columns:minmax(0,1fr)!important}
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wqf,
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wqg {grid-template-columns:minmax(0,1fr)!important}
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wqg>li {min-height:0!important}
}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wql {opacity:0;transform:translateY(1em);transition:opacity .45s ease,transform .45s ease;pointer-events:none}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="0"] .wq-wql[data-k="0"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="1"] .wq-wql[data-k="1"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="2"] .wq-wql[data-k="2"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="3"] .wq-wql[data-k="3"] {opacity:1;transform:none}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqtab {color:var(--qtell-purple-600);transition:background .3s,color .3s}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="0"] .wq-wqtab[data-k="0"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="1"] .wq-wqtab[data-k="1"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="2"] .wq-wqtab[data-k="2"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="3"] .wq-wqtab[data-k="3"] {background:var(--qtell-purple-700);color:var(--qtell-white)}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqs {transition:background .3s,border-color .3s,box-shadow .3s}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqs:hover {background:var(--qtell-white)}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="0"] .wq-wqs[data-k="0"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="1"] .wq-wqs[data-k="1"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="2"] .wq-wqs[data-k="2"],
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="3"] .wq-wqs[data-k="3"] {background:var(--qtell-white);border-color:var(--qtell-purple-300)!important;box-shadow:0 20px 40px -32px var(--qtell-shadow-color)}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqb {transform-origin:left}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqw[data-sel="2"] .wq-wqb {animation:wq-wqbar .8s ease both}

.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqp {animation:wq-wqpl 1.6s ease-out infinite}

@media (prefers-reduced-motion:reduce){.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wql,
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqs,
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqtab {transition:none}
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqb,
.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqp {animation:none!important}
}

@media (max-width:1000px){.qtell-pg-why-qtell.qtell-pg-why-qtell.qtell-pg-why-qtell .wq-wqsk {position:relative!important;top:auto!important}
}

@keyframes wq-wqbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wq-wqpl{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--qtell-teal-600) 50%, transparent)}100%{box-shadow:0 0 0 .6em color-mix(in srgb, var(--qtell-teal-600) 0%, transparent)}}