/* ==========================================================================
   QPoint homepage styles — load after site.css.

   4. Hero
   6. How it works
   7. AI + logic
   8. Use cases (dark green)
   9. Features, teams, testimonial, FAQ
   ========================================================================== */

/* 4. Hero ---------------------------------------------------------------- */
.qp-hero {
  background:
    radial-gradient(50% 70% at 92% 18%, rgb(179 224 255 / .7), transparent 70%),
    radial-gradient(40% 55% at 60% 100%, rgb(173 224 201 / .45), transparent 70%),
    radial-gradient(35% 50% at 0% 0%, rgb(213 239 255 / .9), transparent 70%),
    var(--qp-navy-50);
}
.qp-hero h1 { font-size: clamp(2.875rem, 2rem + 3.6vw, 5.25rem); line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--qp-navy-950); }
/* Rotating hero word. Every word sits invisibly in the same grid cell, so the slot is always as wide
   as the longest word: the headline never re-wraps and the page never jumps. */
.qp-rotator { display: inline-grid; justify-items: start; vertical-align: bottom; }
.qp-rotator > * { grid-area: 1 / 1; white-space: nowrap; }
.qp-rotator__ghost { visibility: hidden; }
.qp-rotator__caret { display: inline-block; width: .06em; height: .82em; margin-left: .04em; vertical-align: -.04em; background: var(--qp-green-500); border-radius: 1px; }
.qp-rotator__live .qp-rotator__caret { animation: qp-blink 1s step-end infinite; }
.qp-rotator.is-typing .qp-rotator__live .qp-rotator__caret { animation: none; }
.qp-js .qp-rotator:not(.is-ready) .qp-rotator__live .qp-rotator__caret { visibility: hidden; }
.qp-badge-new { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; padding: .375rem .875rem .375rem .375rem; font-size: .875rem; font-weight: 500; color: var(--qp-navy-950); box-shadow: var(--qp-shadow-card); }
.qp-badge-new .badge { background: var(--qp-green-500); font-weight: 600; }
.qp-checks .bi { color: var(--qp-green-600); }

/* Live survey visual */
.qp-live { position: relative; height: 38.75rem; }
.qp-live__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qp-live__lines path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 8; animation: qp-flow 2.4s linear infinite; transition: stroke-opacity .6s; }
.qp-builder { position: absolute; left: 50%; top: 44%; width: 80%; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--qp-navy-200); border-radius: 1rem; box-shadow: 0 34px 70px -32px rgb(0 57 88 / .45); overflow: hidden; z-index: 2; animation: qp-float 7s ease-in-out infinite; }
.qp-builder__bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--qp-navy-200); font-size: .8125rem; font-weight: 600; }
.qp-builder__dots { display: flex; gap: .375rem; }
.qp-builder__dots span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--qp-navy-200); }
.qp-builder__live { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; font-size: .6875rem; color: #fff; background: var(--qp-green-500); padding: .1875rem .5625rem; border-radius: 999px; }
.qp-builder__live .qp-dot { background: #fff; }
.qp-builder__side { width: 8.25rem; flex: 0 0 auto; border-right: 1px solid var(--qp-navy-200); padding: .875rem .625rem; background: var(--qp-navy-50); font-size: .8125rem; }
.qp-builder__side .qp-q { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: .375rem; }
.qp-builder__side .qp-q.is-active { background: #fff; border: 1px solid var(--qp-green-200); font-weight: 600; }
.qp-builder__side .qp-q .qp-icon-tile { width: 1.375rem; height: 1.375rem; border-radius: .375rem; font-size: .75rem; }
.qp-builder__main { padding: 1.375rem 1.25rem 1.25rem; }
.qp-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .1875rem; }
.qp-scale span { border: 1px solid var(--qp-navy-200); border-radius: .375rem; padding: .4375rem 0; text-align: center; font-size: .75rem; transition: background .3s, color .3s, border-color .3s; }
.qp-scale span.is-picked { background: var(--qp-green-500); border-color: var(--qp-green-500); color: #fff; font-weight: 700; }
.qp-results { position: absolute; right: .375rem; bottom: 7.25rem; width: 14.375rem; background: #fff; border: 1px solid var(--qp-navy-200); border-radius: .875rem; box-shadow: 0 18px 36px -18px rgb(0 57 88 / .4); padding: .875rem 1rem; z-index: 3; }
.qp-results__bars { display: flex; align-items: flex-end; gap: .1875rem; height: 3rem; }
.qp-results__bars span { flex: 1; border-radius: 3px 3px 0 0; transition: height .8s var(--qp-ease); }
.qp-person { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .375rem; opacity: 0; }
.qp-person.is-shown { opacity: 1; animation: qp-pop .7s var(--qp-ease) both; }
.qp-person.is-shown.is-alt { animation-name: qp-pop-alt; }
.qp-person img { border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid #fff; box-shadow: 0 8px 18px -10px rgba(19, 21, 39, .4); transition: box-shadow .4s; }
.qp-person.is-hot img { box-shadow: 0 0 0 4px rgb(0 154 115 / .35), 0 8px 18px -10px rgba(19, 21, 39, .4); }
.qp-person__chip { background: #fff; color: var(--qp-navy-950); border-radius: 999px; padding: .1875rem .625rem; font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(19, 21, 39, .3); transition: background .4s, color .4s; }
.qp-person.is-hot .qp-person__chip { background: var(--qp-green-500); color: #fff; }
@media (max-width: 575.98px) {
  .qp-live { height: 30rem; }
  .qp-builder { width: 94%; }
  .qp-builder__side { display: none; }
  .qp-results { right: 0; bottom: 1rem; width: 12rem; }
  .qp-person:nth-of-type(n+5) { display: none; }
}

/* 6. How it works ---------------------------------------------------------- */
.qp-how { background: linear-gradient(180deg, #fff 0%, var(--qp-navy-50) 100%); }
.qp-step { overflow: hidden; }
.qp-step__art { position: relative; height: 13.75rem; overflow: hidden; }
.qp-step__art--green { background: radial-gradient(70% 90% at 20% 0%, var(--qp-green-100), transparent 70%), var(--qp-navy-50); }
.qp-step__art--sky { background: radial-gradient(70% 90% at 80% 0%, var(--qp-cyan-100), transparent 70%), var(--qp-navy-50); }
.qp-step__art--violet { background: radial-gradient(70% 90% at 50% 0%, var(--qp-violet-100), transparent 70%), var(--qp-navy-50); }
.qp-step__art .qp-mini { position: absolute; left: 1.75rem; right: 1.75rem; background: #fff; border-radius: .875rem; padding: .75rem .875rem; box-shadow: 0 14px 30px -18px rgba(19, 21, 39, .35); }
.qp-step__share { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
.qp-step__share span { background: #fff; border-radius: .75rem; padding: .75rem .375rem; display: flex; flex-direction: column; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; color: var(--qp-navy-950); box-shadow: 0 10px 22px -16px rgba(19, 21, 39, .4); animation: qp-bob 5s ease-in-out infinite; }
.qp-step__share span:nth-child(2) { animation-delay: -1.6s; }
.qp-step__share span:nth-child(3) { animation-delay: -3.2s; }
.qp-step__share .bi { font-size: 1.375rem; }
.qp-bars { display: flex; align-items: flex-end; gap: .4375rem; flex: 1 1 auto; }
.qp-bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--qp-green-200); }
.qp-stars { color: var(--qp-amber-400); }
.qp-bob { animation: qp-bob 5s ease-in-out infinite; }

/* 7. AI + logic -------------------------------------------------------------- */
.qp-panel { border-radius: 1.75rem; padding: clamp(1.75rem, 4vw, 2.75rem); height: 100%; overflow: hidden; }
.qp-panel h3 { font-size: clamp(1.625rem, 1rem + 1.4vw, 2.25rem); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.qp-panel--ai { background: radial-gradient(80% 70% at 0% 0%, var(--qp-green-100), transparent 70%), var(--qp-green-50); }
.qp-panel--logic { background: radial-gradient(70% 70% at 100% 0%, rgb(117 206 170 / .45), transparent 70%), var(--qp-green-500); color: #fff; }
.qp-panel--logic h3, .qp-panel--logic p { color: #fff; }
.qp-panel__tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; padding: .375rem .75rem; border-radius: 999px; }
.qp-panel--ai .qp-panel__tag { background: #fff; color: var(--qp-green-800); }
.qp-panel--logic .qp-panel__tag { background: var(--qp-green-700); color: #fff; }
.qp-ai-box { background: #fff; border-radius: 1.25rem; padding: 1.125rem; box-shadow: 0 24px 50px -30px rgb(0 38 30 / .45); }
.qp-ai-prompt { display: flex; align-items: center; gap: .625rem; border: 1.5px solid var(--qp-green-200); border-radius: .75rem; padding: .625rem .625rem .625rem .875rem; }
.qp-ai-card { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--qp-navy-200); border-radius: .75rem; padding: .75rem .875rem; transition: opacity .45s var(--qp-ease), transform .45s var(--qp-ease); }
.qp-ai-card.is-hidden { opacity: 0; transform: translateY(12px); }
.qp-ai-card .qp-icon-tile { width: 2rem; height: 2rem; border-radius: .5625rem; font-size: .875rem; font-weight: 700; }
.qp-caret { display: inline-block; width: 3px; height: 1em; background: currentColor; vertical-align: -.12em; margin-left: 2px; animation: qp-blink 1s step-end infinite; }
.qp-tab { font-size: .875rem; border-radius: 999px; padding: .5rem .875rem; border: 1.5px solid; background: transparent; transition: background .25s, color .25s, border-color .25s; }
.qp-panel--logic .qp-tab { color: #fff; border-color: var(--qp-green-300); }
.qp-panel--logic .qp-tab[aria-selected="true"] { background: #fff; color: var(--qp-green-700); border-color: #fff; font-weight: 700; }
.qp-logic-pane { height: 20.75rem; display: flex; flex-direction: column; justify-content: center; gap: .625rem; }
.qp-qcard { background: #fff; color: var(--qp-navy-950); border-radius: .875rem; padding: .875rem 1rem; box-shadow: 0 14px 30px -16px rgb(0 38 30 / .45); display: flex; flex-direction: column; gap: .375rem; }
.qp-qcard small { font-size: .75rem; font-weight: 600; color: var(--qp-navy-600); }
.qp-qcard strong { font-size: 1rem; }
.qp-qcard.is-skipped { opacity: .35; flex-direction: row; justify-content: space-between; align-items: center; }
.qp-qcard.is-skipped strong { text-decoration: line-through; }
.qp-qcard.is-shown { box-shadow: 0 0 0 2px var(--qp-green-100), 0 14px 30px -16px rgb(0 38 30 / .45); }
.qp-answer { align-self: flex-start; font-size: .8125rem; font-weight: 600; background: var(--qp-green-100); color: var(--qp-green-800); padding: .25rem .625rem; border-radius: .5rem; }
.qp-rule { align-self: center; font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: 999px; background: var(--qp-green-700); color: #fff; }
.qp-score { background: var(--qp-green-100); color: var(--qp-green-900); border-radius: .875rem; padding: .875rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.qp-fade-in { animation: qp-rise-sm .6s var(--qp-ease) both; }

/* 8. Use cases (dark green) ---------------------------------------------------- */
.qp-usecases__panel { background: radial-gradient(60% 70% at 100% 0%, rgb(43 183 139 / .28), transparent 70%), var(--qp-green-900); color: var(--qp-green-50); border-radius: var(--qp-radius-panel); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
.qp-usecases__panel .qp-h2, .qp-usecases__panel h3 { color: #fff; }
.qp-usecases__panel p { color: #fff; }
.qp-usecases__panel a:not(.qp-example) { color: var(--qp-green-300); font-weight: 600; text-decoration: none; }
.qp-usecases .qp-tab { display: inline-flex; align-items: center; gap: .4375rem; color: var(--qp-green-50); border-color: var(--qp-green-400); }
.qp-usecases .qp-tab[aria-selected="true"] { background: var(--qp-green-500); border-color: var(--qp-green-500); color: #fff; font-weight: 700; }
.qp-usecases__tabs { flex-wrap: wrap; }
.qp-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) {
  .qp-examples { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -1.5rem; padding: 0 1.5rem .25rem; scroll-padding-inline: 1.5rem; }
  .qp-examples::-webkit-scrollbar { display: none; }
  .qp-examples__item { scroll-snap-align: start; }
  .qp-examples { cursor: grab; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .qp-examples.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}
.qp-example { background: var(--qp-green-50); border-radius: var(--qp-radius-card); padding: 1.375rem; display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: var(--qp-green-900); height: 100%; transition: transform .2s var(--qp-ease), box-shadow .2s; }
.qp-example:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .5); color: var(--qp-green-900); }
.qp-example__meta { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qp-green-700); }
.qp-example .qp-icon-tile { width: 1.875rem; height: 1.875rem; border-radius: .5rem; background: var(--qp-green-500); color: #fff; font-size: .9375rem; }
.qp-example__try { align-self: flex-start; display: inline-flex; align-items: center; gap: .375rem; border: 1.5px solid var(--qp-green-900); border-radius: 999px; padding: .375rem .875rem; font-size: .875rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.qp-example:hover .qp-example__try { background: var(--qp-green-500); border-color: var(--qp-green-500); color: #fff; }
.qp-chart { background: #fff; color: var(--qp-navy-800); border-radius: 1.375rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.qp-chart__plot { position: relative; height: 11.875rem; }
.qp-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qp-chart__axis { stroke: var(--qp-navy-200); }
.qp-chart__grid { stroke: var(--qp-navy-100); }
.qp-chart__line { stroke: var(--qp-green-500); }
.qp-chart__clip { transition: width .7s var(--qp-ease); }
.qp-chart__head { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; transition: left .7s var(--qp-ease), top .7s var(--qp-ease), opacity .3s; }
.qp-chart__dot { width: .875rem; height: .875rem; border-radius: 50%; background: var(--qp-green-500); border: 3px solid #fff; box-shadow: 0 0 0 4px rgb(0 154 115 / .2); }
.qp-chart__bubble { position: absolute; bottom: calc(100% + .5rem); left: 50%; translate: -50% 0; width: max-content; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; padding: .1875rem .625rem .1875rem .1875rem; border-radius: 999px; background: var(--qp-green-900); color: #fff; }
.qp-chart__bubble img { width: 1.375rem; height: 1.375rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.qp-chart__breakdown { border-left: 1px solid var(--qp-navy-200); }
@media (max-width: 991.98px) { .qp-chart__breakdown { border-left: 0; border-top: 1px solid var(--qp-navy-200); padding-top: 1.5rem; } }
.qp-hbar { height: .625rem; border-radius: .3125rem; background: var(--qp-navy-100); overflow: hidden; }
.qp-hbar span { display: block; height: 100%; border-radius: inherit; transition: width .6s var(--qp-ease), background .3s; }
.qp-status { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; padding: .25rem .625rem; border-radius: 999px; background: var(--qp-green-100); color: var(--qp-green-800); transition: background .3s, color .3s; }
.qp-status.is-ready { background: var(--qp-green-500); color: #fff; }

/* 9. Features, teams, testimonial, GDPR, FAQ ----------------------------------- */
.qp-teams {
  background:
    radial-gradient(50% 70% at 100% 50%, rgb(199 203 255 / .35), transparent 70%),
    radial-gradient(40% 60% at 0% 0%, rgb(173 224 201 / .45), transparent 70%),
    var(--qp-navy-100);
}
.qp-team-card { padding: 1.625rem; display: flex; flex-direction: column; gap: .75rem; text-decoration: none; color: var(--qp-navy-950); height: 100%; }

/* FAQ follows the white testimonial section, so fade in from white */
.qp-faq { --qp-faq-from: #fff; }

/* 10. Live examples ("See it in action"): kept from the current site, in the new look.
   A browser window in the style of the hero's survey window: tabs as pills, address bar, the live survey below
   (the QPoint widget puts its iframe into .qp-browser__example). ---------------------------------------- */
.qp-tryit { background: linear-gradient(180deg, var(--qp-navy-50) 0%, #fff 100%); }
.qp-browser { background: #fff; border: 1px solid var(--qp-navy-200); border-radius: 1.25rem; box-shadow: 0 34px 70px -32px rgb(0 57 88 / .35); overflow: hidden; }
.qp-browser__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .875rem 1rem; border-bottom: 1px solid var(--qp-navy-200); background: var(--qp-navy-50); }
.qp-browser__tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.qp-browser .qp-tab { color: var(--qp-navy-800); border-color: var(--qp-navy-200); background: #fff; font-weight: 600; }
.qp-browser .qp-tab:hover { border-color: var(--qp-green-300); color: var(--qp-green-700); }
.qp-browser .qp-tab[aria-selected="true"] { background: var(--qp-green-500); border-color: var(--qp-green-500); color: #fff; }
.qp-browser__bar { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; border-bottom: 1px solid var(--qp-navy-200); }
.qp-browser__address { flex: 1 1 auto; min-width: 0; padding: .4375rem .875rem; border-radius: 999px; background: var(--qp-navy-100); font-size: .8125rem; color: var(--qp-navy-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-browser__address .bi { color: var(--qp-green-600); margin-right: .375rem; }
.qp-browser__btn { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--qp-navy-700); font-size: 1.0625rem; transition: background .2s, color .2s; }
.qp-browser__btn:hover { background: var(--qp-green-50); color: var(--qp-green-700); }
.qp-browser__btn:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--qp-focus); }
.qp-browser__body { background: var(--qp-navy-50); }
.qp-browser__example iframe { display: block; min-height: 300px; border: 0; }
@media (max-width: 767.98px) {
  .qp-browser__head .qp-builder__dots { display: none; }
  .qp-browser__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .qp-browser__tabs::-webkit-scrollbar { display: none; }
  .qp-browser .qp-tab { white-space: nowrap; }
  .qp-browser__bar { display: none; }
}
.qp-tryit__cta { padding-top: clamp(2.5rem, 5vw, 4rem); }
.qp-tryit__cta h2 { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; color: var(--qp-navy-950); }