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

.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s1 { position: relative; overflow: hidden; padding: clamp(72px,10vw,140px) 0 clamp(64px,8.5vw,112px); background: var(--qtell-white); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s2 { position: absolute; inset: 0; pointer-events: none; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-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-about.qtell-pg-about.qtell-pg-about .ab-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-about.qtell-pg-about.qtell-pg-about .ab-s5 { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s6 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--qtell-accent-ink); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s7 { width: 8px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s8 { height: 13px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s9 { fill: var(--qtell-teal-600); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s10 { margin-top: 28px; font-size: clamp(20px,2vw,26px); font-weight: 700; color: var(--qtell-purple-700); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s11 { margin-top: 18px; max-width: 22ch; 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-about.qtell-pg-about.qtell-pg-about .ab-s12 { position: relative; max-width: 1080px; margin: clamp(48px,6vw,80px) auto 0; padding: 0 clamp(20px,5vw,48px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 24px clamp(32px,5vw,72px); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s13 { padding-top: 20px; border-top: 2px solid var(--qtell-purple-700); font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-900); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s14 { padding-top: 20px; border-top: 2px solid var(--qtell-teal-600); font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-900); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s15 { padding: clamp(64px,8.5vw,112px) 0; background: var(--qtell-background-soft); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s16 { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-wrap: wrap; gap: 24px clamp(40px,7vw,120px); align-items: flex-start; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s17 { flex: 1 1 340px; max-width: 460px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s18 { margin-top: 18px; font-size: clamp(32px,4vw,50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s19 { flex: 1.4 1 420px; min-width: 0; max-width: 680px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s20 { margin-top: 0; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s21 { margin-top: 20px; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s22 { margin-top: 32px; padding: 4px 0 4px 24px; border-left: 3px solid var(--qtell-teal-600); font-size: clamp(21px,2vw,26px); line-height: 1.4; letter-spacing: -.015em; font-weight: 700; color: var(--qtell-purple-700); text-wrap: balance; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s23 { margin-top: 28px; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-600); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s24 { margin-top: 20px; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-900); font-weight: 700; text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s25 { margin-top: 28px; font-size: clamp(21px,2vw,26px); line-height: 1.65; color: var(--qtell-purple-700); font-weight: 700; text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s26 { padding: clamp(64px,8.5vw,112px) 0; background: var(--qtell-white); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s27 { position: relative; overflow: hidden; padding: clamp(64px,8.5vw,112px) 0; background: var(--qtell-purple-700); color: var(--qtell-white); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s28 { position: absolute; width: 50vmax; height: 50vmax; left: -20vmax; bottom: -30vmax; border-radius: 50%; background: radial-gradient(closest-side,color-mix(in srgb,var(--qtell-teal-600) 35%,transparent),transparent); pointer-events: none; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s29 { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-wrap: wrap; gap: 24px clamp(40px,7vw,120px); align-items: flex-start; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s30 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--qtell-teal-400); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s31 { margin-top: 18px; font-size: clamp(32px,4vw,50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--qtell-white); text-wrap: balance; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s32 { margin-top: 0; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-100); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s33 { margin-top: 32px; padding: 4px 0 4px 24px; border-left: 3px solid var(--qtell-teal-400); font-size: clamp(21px,2vw,26px); line-height: 1.4; letter-spacing: -.015em; font-weight: 700; color: var(--qtell-white); text-wrap: balance; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s34 { margin-top: 28px; font-size: clamp(17px,1.5vw,19px); line-height: 1.65; color: var(--qtell-purple-100); text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s35 { position: relative; overflow: hidden; padding: clamp(80px,11vw,140px) 0; background: linear-gradient(125deg,var(--qtell-purple-700) 0%,var(--inv-cta-b) 60%,var(--inv-cta-c) 100%); color: var(--qtell-white); }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s36 { position: absolute; width: 60vmax; height: 60vmax; right: -28vmax; bottom: -36vmax; border-radius: 50%; background: radial-gradient(closest-side,color-mix(in srgb,var(--qtell-teal-600) 55%,transparent),transparent); pointer-events: none; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s37 { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s38 { width: 18px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s39 { height: 30px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s40 { margin-top: 28px; font-size: clamp(34px,5vw,62px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; max-width: 18ch; text-wrap: balance; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s41 { margin-top: 24px; max-width: 56ch; font-size: clamp(17px,1.6vw,20px); line-height: 1.6; text-wrap: pretty; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s42 { margin-top: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 18px 30px; border-radius: 999px; background: var(--qtell-teal-600); color: var(--qtell-purple-900); font-weight: 700; font-size: 17px; text-decoration: none; transition: background .2s; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-s43 { height: 18px; }
.qtell-pg-about.qtell-pg-about.qtell-pg-about .ab-h1:hover { background: var(--qtell-teal-400); color: var(--qtell-purple-900); }

/* The mockup's own animation / interaction / responsive rules */
@media (min-width: 900px) { .qtell-pg-about.qtell-pg-about.qtell-pg-about #story > div > div:first-child, .qtell-pg-about.qtell-pg-about.qtell-pg-about #why > div > div:first-child { position: sticky; top: var(--qtell-sticky-offset); } }