/* ==========================================================================
   QPoint About page — load after site.css.
   ========================================================================== */

.qp-about-hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  /* no bottom glow: it would end in a hard edge against the next section */
  background: radial-gradient(50% 80% at 92% 10%, rgb(179 224 255 / .6), transparent 70%), radial-gradient(40% 70% at 5% 0%, rgb(213 239 255 / .9), transparent 70%), var(--qp-navy-50); }
.qp-about-hero h1 { max-width: 15em; }
.qp-about-hero .qp-lead { max-width: 38em; }

/* Who we are */
.qp-about-prose > p { font-size: 1.125rem; line-height: 1.7; color: var(--qp-navy-950); margin-bottom: 1.25rem; }

/* What we aspire: dark green framed panel (homepage look) */
.qp-about-panel { background: radial-gradient(60% 70% at 100% 0%, rgb(43 183 139 / .28), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgb(43 183 139 / .14), transparent 70%), var(--qp-green-900); color: #fff; border-radius: var(--qp-radius-panel); padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); }
.qp-about-panel .qp-h2-sm { color: #fff; }
.qp-about-panel p { font-size: 1.125rem; line-height: 1.7; color: #fff; }

.qp-about-poll { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.375rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); transform: rotate(-1.5deg); }
.qp-about-poll__q { height: .5625rem; width: 70%; border-radius: 999px; background: var(--qp-navy-200); margin-bottom: .25rem; }
.qp-about-poll__row { display: grid; grid-template-columns: 5.5rem 1fr 2.75rem; align-items: center; gap: .75rem; font-size: .9375rem; font-weight: 600; color: var(--qp-navy-800); }
.qp-about-poll__bar { position: relative; height: .625rem; border-radius: 999px; background: var(--qp-navy-100); overflow: hidden; }
.qp-about-poll__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--qp-green-300); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--qp-ease) .3s; }
.qp-about-poll__row.is-top .qp-about-poll__bar::after { background: var(--qp-green-500); }
.qp-about-poll__row.is-top { color: var(--qp-green-700); }
.qp-about-poll__pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--qp-navy-500); }
.qp-about-poll__row.is-top .qp-about-poll__pct { color: var(--qp-green-700); }
.is-visible .qp-about-poll__bar::after, html:not(.qp-js) .qp-about-poll__bar::after { transform: scaleX(1); }
.qp-about-sign { margin-top: 1.5rem; padding-left: .25rem; }
.qp-about-sign figcaption { font-size: 1rem; color: #fff; }
.qp-about-sign__role { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: .125rem; }
.qp-about-sign strong { font-size: 1.25rem; color: #fff; font-weight: 700; }

/* What we care about most */
.qp-about-value { position: relative; padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .875rem; color: var(--qp-navy-950); }
.qp-about-value__n { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--qp-navy-100); }
.qp-about-value__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--qp-navy-950); margin: .25rem 0 0; }

/* Who are our users: use-case tags */
.qp-tone-green { --tone-50: var(--qp-green-50);  --tone-200: var(--qp-green-200);  --tone-700: var(--qp-green-700); }
.qp-tone-sky { --tone-50: var(--qp-sky-50);    --tone-200: var(--qp-sky-200);    --tone-700: var(--qp-sky-700); }
.qp-tone-violet { --tone-50: var(--qp-violet-50); --tone-200: var(--qp-violet-200); --tone-700: var(--qp-violet-700); }
.qp-tone-amber { --tone-50: var(--qp-amber-50);  --tone-200: var(--qp-amber-200);  --tone-700: var(--qp-amber-800); }
.qp-tone-pink { --tone-50: var(--qp-pink-50);   --tone-200: var(--qp-pink-200);   --tone-700: var(--qp-pink-700); }
.qp-tone-indigo { --tone-50: var(--qp-indigo-50); --tone-200: var(--qp-indigo-200); --tone-700: var(--qp-indigo-700); }
.qp-about-tags { display: flex; flex-wrap: wrap; gap: .625rem; }
.qp-about-tags li { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.125rem; border-radius: 999px; background: var(--tone-50); border: 1px solid var(--tone-200); color: var(--tone-700); font-weight: 600; font-size: 1rem; }

/* Bank account details: quiet block under "Who we are and what we do" */

/* We missed something -> Contact us */
.qp-about-contact { padding-bottom: clamp(3rem, 7vw, 6rem); background: linear-gradient(to bottom, transparent 40%, var(--qp-navy-100)); }
.qp-about-contact__card { display: flex; align-items: center; gap: 1.25rem 1.5rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--qp-radius-panel); background: radial-gradient(60% 120% at 0% 0%, var(--qp-green-100), transparent 70%), #fff; box-shadow: 0 1px 2px rgba(19, 21, 39, .06), 0 24px 48px -36px rgba(19, 21, 39, .4); color: var(--qp-navy-950); }
.qp-about-contact__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.025em; color: var(--qp-navy-950); margin: 0 0 .375rem; }
.qp-about-contact__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; }
.qp-about-contact__btn .bi { transition: transform .2s var(--qp-ease); }
.qp-about-contact__btn:hover .bi { transform: translateX(3px); }
@media (max-width: 767.98px) {
  .qp-about-contact__card { flex-direction: column; align-items: flex-start; }
  .qp-about-contact__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .qp-about-poll__bar::after { transition: none; transform: scaleX(1); } }

/* "We missed something" + the contact form (it stays on the About page until /contact is redesigned): the contact
   page's dark green frame (contact.css) with the section's text on the left and the form card on the right */
.qp-about-form { padding-bottom: clamp(3rem, 7vw, 6rem); background: linear-gradient(to bottom, transparent 40%, var(--qp-navy-100)); scroll-margin-top: 1rem; }
.qp-about-form .qp-contact-intro h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; color: #fff; margin: 1rem 0 0; }
.qp-about-form .qp-contact-intro .qp-icon-tile { background: rgb(255 255 255 / .12); color: var(--qp-green-200); }

/* sections of the article that the page has no block for: plain text */
.qp-about-extra .qp-about-prose > :last-child { margin-bottom: 0; }