@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6500693f48c2f4aed2719ed6_Outfit-Light.woff') format('woff');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6500693ff7231ad6bc05e7f3_Outfit-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6500693f919e8c55df5f34db_Outfit-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6500693f45c1062f90a59a2e_Outfit-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6500693f43a5608db70c8391_Outfit-Bold.woff') format('woff');
}

/* Kpler Crew — scoped styles for Webflow and the standalone preview. */
.kpler-crew {
  --ink: #29333c;
  --muted: #5e6a75;
  --coral: #ff5349;
  --cream: #fff9ee;
  --accent: #f1554d;
  --tint: #ffe4e3;
  font-family: Outfit, Arial, sans-serif;
  color: var(--ink);
  font-size: 18px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  background: #fff;
  position: relative;
  isolation: isolate;
  overflow: clip
}

.kpler-crew * {
  box-sizing: border-box
}

.kpler-crew [hidden] {
  display: none !important
}

.kpler-crew h1,
.kpler-crew h2,
.kpler-crew h3,
.kpler-crew p,
.kpler-crew blockquote,
.kpler-crew dl,
.kpler-crew dd {
  margin: 0
}

.kpler-crew h1,
.kpler-crew h2,
.kpler-crew h3 {
  font-weight: 500
}

.kpler-crew button,
.kpler-crew input {
  font: inherit
}

.kpler-crew button,
.kpler-crew a {
  -webkit-tap-highlight-color: transparent
}

.kpler-crew button {
  cursor: pointer;
  color: inherit
}

.kpler-crew a {
  color: inherit;
  text-decoration: none
}

.kpler-crew button {
  border: 0;
  background: none
}

.kpler-crew button:disabled {
  cursor: wait
}

.kpler-crew :focus-visible {
  outline: 3px solid #4785c5;
  outline-offset: 5px
}

.kpler-crew img {
  display: block;
  max-width: 100%
}

.kpler-crew em {
  font-style: normal;
  color: #f1554d
}

.kpler-crew .cq-mobile {
  display: none
}

.kpler-crew .cq-logo {
  display: block;
  width: 94px;
  flex-shrink: 0
}

.kpler-crew .cq-logo img {
  width: 91px;
  height: auto
}

.kpler-crew .cq-textured {
  position: relative;
  background-color: var(--cream);
  background-image: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead7a25e16686df683d288_bd790.svg'), url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead79a7b3b902d3393ea26_7b174.svg'), url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead7992d620dc989c00680_5eb4a.svg');
  background-position: calc(100% + 300px) 40%, -350px 20%, 50% -450px;
  background-size: 1060px 960px, 1060px 960px, 960px 800px;
  background-repeat: no-repeat
}

.kpler-crew .cq-textured:before,
.kpler-crew .cq-result-hero:after,
.kpler-crew .cq-result-summary:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead7c2c3847ced88b7b175_noise.png');
  opacity: .055;
  mix-blend-mode: multiply;
  z-index: 0
}

.kpler-crew .cq-textured>* {
  position: relative
}

.kpler-crew .cq-landing-hero {
  padding: 46px 40px 64px;
  text-align: center
}

.kpler-crew .cq-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #29333c1a;
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px
}

.kpler-crew .cq-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral)
}

.kpler-crew .cq-landing h1 {
  font-size: 58px;
  line-height: 1.2;
  letter-spacing: .58px;
  margin: 12px auto 20px;
  max-width: 1200px
}

.kpler-crew .cq-intro {
  font-size: 20px;
  line-height: 30px;
  color: var(--muted);
  max-width: 1090px;
  margin: auto
}

.kpler-crew .cq-crew-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 68px 0 48px
}

.kpler-crew .cq-landing-character {
  width: 200px;
  outline-offset: 8px
}

.kpler-crew .cq-landing-character h2 {
  font-size: 22px;
  line-height: 36px;
  margin-top: 14px
}

.kpler-crew .cq-landing-character p {
  font-size: 13px;
  letter-spacing: .78px;
  text-transform: uppercase;
  line-height: 17px;
  margin-top: 4px;
  white-space: nowrap
}

.kpler-crew .cq-character {
  display: block;
  position: relative;
  margin: auto
}

.kpler-crew .cq-stage {
  width: 180px;
  height: 180px
}

.kpler-crew .cq-stage:before {
  content: "";
  position: absolute;
  width: 86%;
  height: 86%;
  top: 5%;
  left: 7%;
  background: var(--character-tint);
  border-radius: 50%
}

.kpler-crew .cq-character-fallback {
  display: block;
  position: absolute;
  inset: 0
}

.kpler-crew .cq-character-fallback>img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.kpler-crew .cq-lottie {
  position: absolute;
  inset: 0;
  opacity: 0
}

.kpler-crew .cq-lottie svg {
  display: block
}

.kpler-crew .is-loaded .cq-lottie {
  opacity: 1
}

.kpler-crew .is-loaded .cq-character-fallback {
  visibility: hidden
}

.kpler-crew .cq-connie {
  position: absolute;
  inset: 8% 5% 0;
  display: block
}

.kpler-crew .cq-connie>span {
  position: absolute;
  display: block
}

.kpler-crew .cq-connie>span img {
  width: 100%;
  height: 100%;
  overflow: visible
}

.kpler-crew .cq-connie-brand {
  color: #fff;
  font-size: 9px;
  left: 30%;
  top: 28%;
  transform: rotate(26.57deg) scaleY(.8) skewX(-36.87deg);
  font-weight: 600
}

.kpler-crew .cq-connie-by {
  color: #fff;
  font-size: 4px;
  left: 53%;
  top: 43%;
  transform: rotate(26.57deg) scaleY(.8) skewX(-36.87deg)
}

.kpler-crew .cq-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--coral);
  border: 1px solid var(--coral);
  border-radius: 99px;
  padding: 10px 24px;
  color: white;
  font-size: 18px;
  line-height: 1.6;
  transition: background .18s, transform .18s
}

.kpler-crew .cq-button:hover {
  background: #e8443b;
  transform: translateY(-1px)
}

.kpler-crew .cq-button span {
  font-size: 26px;
  line-height: 1
}

.kpler-crew .cq-start {
  font-size: 20px
}

.kpler-crew .cq-meta {
  margin-top: 16px;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted)
}

.kpler-crew .cq-how {
  padding: 96px max(40px, calc((100% - 1280px)/2)) 112px;
  background: #fff
}

.kpler-crew .cq-how>h2 {
  text-align: center;
  font-size: 40px;
  line-height: 52px;
  margin-bottom: 48px
}

.kpler-crew .cq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px
}

.kpler-crew .cq-step {
  background: var(--cream);
  border-radius: 20px;
  padding: 28px
}

.kpler-crew .cq-step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px
}

.kpler-crew .cq-step-top>span {
  border-radius: 50%;
  background: #f1554d;
  color: white;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600
}

.kpler-crew .cq-step-top>div {
  background: white;
  border: 1px solid #f1554d2e;
  border-radius: 18px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px -4px #f1554d2e
}

.kpler-crew .cq-step-top img {
  width: 40px;
  height: 40px
}

.kpler-crew .cq-step h3 {
  font-size: 26px;
  line-height: 34px;
  margin-bottom: 14px
}

.kpler-crew .cq-step p {
  font-size: 17px;
  line-height: 26px;
  color: var(--muted)
}

.kpler-crew .cq-dots {
  display: none
}

.kpler-crew.is-quizzing .cq-exit {
  display: block;
  margin-left: auto;
  font-size: 16px;
  color: var(--muted)
}

.kpler-crew .cq-quiz {
  min-height: 100vh;
  padding: 132px max(40px, calc((100% - 1280px)/2)) 96px
}

.kpler-crew .cq-progress-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.kpler-crew .cq-progress p {
  color: #f1554d;
  letter-spacing: 1.12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  line-height: 18px
}

.kpler-crew .cq-segments {
  display: flex;
  gap: 8px
}

.kpler-crew .cq-segments i {
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 3px;
  background: #29333c1a
}

.kpler-crew .cq-segments i.is-active {
  background: #f1554d
}

.kpler-crew .cq-back {
  color: var(--muted);
  padding: 0;
  font-size: 16px
}

.kpler-crew .cq-back-desktop {
  position: absolute;
  left: 0;
  top: 8px
}

.kpler-crew .cq-back-mobile {
  display: none
}

.kpler-crew .cq-quiz h1 {
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: .36px;
  max-width: 860px;
  text-align: center;
  margin: 72px auto 56px
}

.kpler-crew .cq-quiz h1:focus {
  outline: none
}

.kpler-crew .cq-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1180px;
  margin: auto
}

.kpler-crew .cq-answer {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  border: 2px solid #29333c1a;
  background: white;
  border-radius: 20px;
  min-height: 120px;
  padding: 28px;
  font-size: 20px;
  line-height: 28px;
  transition: background .15s, border-color .15s, transform .15s
}

.kpler-crew .cq-answer>span:first-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--cream);
  font-size: 18px;
  font-weight: 600
}

.kpler-crew .cq-answer:hover,
.kpler-crew .cq-answer.is-selected {
  border-color: var(--coral);
  background: #fff8f5
}

.kpler-crew .cq-answer.is-selected {
  transform: scale(.99)
}

.kpler-crew .cq-quiz-hint {
  text-align: center;
  margin-top: 100px;
  color: var(--muted);
  font-size: 16px
}

.kpler-crew .cq-result-hero {
  height: 518px;
  background: var(--tint);
  position: relative;
  overflow: hidden;
  text-align: center
}

.kpler-crew .cq-result-arc {
  position: absolute;
  left: 50%;
  top: -512px;
  width: max(2400px, 156.25vw);
  height: 820px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent)
}

.kpler-crew .cq-result-heading {
  position: relative;
  z-index: 1;
  padding-top: 32px;
  color: white
}

.kpler-crew .cq-result-heading .cq-pill {
  color: var(--ink)
}

.kpler-crew .cq-result-heading h1 {
  font-size: 52px;
  line-height: 60px;
  font-weight: 600;
  margin: 12px 0
}

.kpler-crew .cq-result-heading>p {
  font-size: 19px;
  line-height: 26px;
  font-weight: 500
}

.kpler-crew .cq-hero-character {
  width: 264px;
  height: 300px;
  z-index: 1
}

.kpler-crew .cq-result-hero>.cq-character {
  margin-top: 27px
}

.kpler-crew [data-animation=reveal] .cq-lottie {
  inset: -20px -70px -8px
}

.kpler-crew .cq-result-summary {
  position: relative;
  background: var(--tint);
  padding: 0 max(24px, calc((100% - 1152px)/2))
}

.kpler-crew .cq-result-card {
  position: relative;
  background: white;
  text-align: center;
  border-radius: 32px 32px 0 0;
  padding: 56px 28px 64px;
  min-height: 379px
}

.kpler-crew .cq-result-card h2 {
  font-size: 28px;
  line-height: 38px;
  max-width: 880px;
  margin: auto
}

.kpler-crew .cq-traits {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 22px 0
}

.kpler-crew .cq-traits span {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--accent);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .96px;
  font-weight: 600
}

.kpler-crew .cq-result-actions {
  display: flex;
  justify-content: center;
  gap: 16px
}

.kpler-crew .cq-button-outline {
  background: white;
  border-color: #29333c26;
  color: var(--ink)
}

.kpler-crew .cq-button-outline:hover {
  background: var(--cream)
}

.kpler-crew .cq-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 13px;
  color: var(--muted)
}

.kpler-crew .cq-share button {
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #29333c1a;
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--ink)
}

.kpler-crew .cq-share img {
  height: 16px;
  width: 16px
}

.kpler-crew .cq-retake {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted)
}

.kpler-crew .cq-business {
  padding: 56px 24px;
  max-width: 1072px;
  margin: auto;
  display: grid;
  grid-template-columns: 460fr 500fr;
  gap: 64px
}

.kpler-crew .cq-eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .96px;
  margin-bottom: 16px
}

.kpler-crew .cq-business h2 {
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 16px
}

.kpler-crew .cq-business-copy>p:not(.cq-eyebrow):not(.cq-fun) {
  color: var(--muted);
  font-size: 17px;
  line-height: 27px
}

.kpler-crew .cq-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 24px
}

.kpler-crew .cq-facts dt {
  font-size: 11px;
  letter-spacing: .88px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px
}

.kpler-crew .cq-facts dd {
  font-size: 16px;
  line-height: 23px
}

.kpler-crew .cq-text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  font-size: inherit;
  text-align: inherit
}

.kpler-crew .cq-facts button {
  color: var(--accent)
}

.kpler-crew .cq-fun {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tint);
  font-size: 15px;
  line-height: 22px;
  margin-top: 24px
}

.kpler-crew .cq-stats {
  align-self: start;
  background: var(--accent);
  color: #fff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 20%, transparent)
}

.kpler-crew .cq-stats-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 22px
}

.kpler-crew .cq-stats-title>span:last-child {
  padding: 3px 8px;
  background: #fff;
  border-radius: 30px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .4px;
  white-space: nowrap
}

.kpler-crew .cq-stat {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  text-align: left;
  color: white;
  margin: 0 0 22px;
  padding: 0
}

.kpler-crew .cq-stat:last-child {
  margin: 0
}

.kpler-crew .cq-stat-number {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #ffffff1f;
  border: 1px solid #ffffff33;
  border-radius: 14px;
  display: grid;
  place-items: center
}

.kpler-crew .cq-stat-main {
  flex: 1
}

.kpler-crew .cq-stat-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px
}

.kpler-crew .cq-stat-heading strong {
  font-weight: 500
}

.kpler-crew .cq-stat-heading>span {
  font-size: 13px
}

.kpler-crew .cq-meter {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(to right, #ffffff 0 7%, transparent 7% 8%);
  width: var(--score);
  margin: 7px 0
}

.kpler-crew .cq-stat-copy {
  display: block;
  font-size: 13px;
  line-height: 18px
}

.kpler-crew .cq-mobile-solutions {
  display: none
}

.kpler-crew .cq-raffle-wrap {
  padding: 0 24px 72px
}

.kpler-crew .cq-raffle {
  max-width: 1024px;
  margin: auto;
  padding: 48px 48px 48px 56px;
  border: 1px solid #ff534933;
  border-radius: 20px;
  background: linear-gradient(100deg, #ffe4e3, #fff3e8);
  box-shadow: 0 0 12px #ff53492e, 0 16px 24px #ff534947;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

.kpler-crew .cq-raffle .cq-pill {
  font-size: 12px;
  letter-spacing: .96px;
  color: var(--coral);
  padding: 6px 12px;
  line-height: 16px;
  border: 0
}

.kpler-crew .cq-raffle h2 {
  font-size: 30px;
  line-height: 38px;
  margin: 16px 0
}

.kpler-crew .cq-raffle p {
  font-size: 18px;
  line-height: 26px;
  font-weight: 500
}

.kpler-crew .cq-raffle-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px
}

.kpler-crew .cq-raffle-actions .cq-text-link {
  font-size: 14px
}

.kpler-crew .cq-toolkit {
  background: #fff;
  border-radius: 16px;
  min-height: 280px;
  display: grid;
  align-items: center;
  padding: 20px;
  box-shadow: 0 8px 24px #ff53491f
}

.kpler-crew .cq-toolkit img {
  width: 100%;
  height: auto
}

.kpler-crew .cq-rest {
  padding: 80px 24px 96px
}

.kpler-crew .cq-rest>h2 {
  font-size: 28px;
  line-height: 38px;
  text-align: center;
  margin-bottom: 32px
}

.kpler-crew .cq-other-grid {
  max-width: 1024px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.kpler-crew .cq-other-card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  transition: transform .2s
}

.kpler-crew .cq-other-card:hover {
  transform: translateY(-4px)
}

.kpler-crew .cq-other-card .cq-stage {
  width: 130px;
  height: 130px
}

.kpler-crew .cq-other-card h3 {
  font-size: 18px;
  line-height: 26px;
  margin: 10px 0
}

.kpler-crew .cq-other-card p {
  font-size: 11px;
  letter-spacing: .55px;
  color: var(--accent);
  text-transform: uppercase
}

.kpler-crew .cq-other-card blockquote {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
  margin-top: 10px
}

.kpler-crew .cq-dialog {
  border: 0;
  padding: 0;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: 24px;
  color: var(--ink);
  background: white;
  box-shadow: 0 24px 100px #0003;
  overflow: auto
}

.kpler-crew .cq-dialog::backdrop {
  background: #29333c80;
  backdrop-filter: blur(14px)
}

.kpler-crew .cq-modal-close {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 28px;
  z-index: 3;
  color: var(--muted);
  width: 36px;
  height: 36px
}

.kpler-crew .cq-mystery {
  background: var(--cream);
  text-align: center;
  padding: 32px 32px 28px
}

.kpler-crew .cq-mystery-crew {
  display: flex;
  justify-content: center;
  gap: 8px;
  filter: blur(2px);
  opacity: .6
}

.kpler-crew .cq-mystery .cq-character {
  width: 84px;
  height: 96px;
  margin: 0
}

.kpler-crew .cq-mystery>span {
  display: inline-block;
  background: #f1554d;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 30px;
  padding: 5px 16px;
  margin-top: 28px
}

.kpler-crew .cq-modal-body {
  padding: 28px 40px 32px
}

.kpler-crew .cq-modal-body h2 {
  font-size: 32px;
  line-height: 43px;
  text-align: center
}

.kpler-crew .cq-modal-intro {
  font-size: 18px;
  color: var(--muted);
  text-align: center;
  margin: 8px 0 20px
}

.kpler-crew .cq-preview-form>label:first-child {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 500
}

.kpler-crew .cq-preview-form input[type=email] {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f2f4f6;
  color: var(--ink)
}

.kpler-crew .cq-preview-form input::placeholder {
  color: #8c98a3
}

.kpler-crew .cq-consent {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
  margin: 20px 0
}

.kpler-crew .cq-consent input {
  appearance: auto;
  accent-color: var(--coral);
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 1px 0 0
}

.kpler-crew .cq-consent a {
  text-decoration: underline
}

.kpler-crew .cq-preview-form .cq-button {
  width: 100%;
  font-size: 20px
}

.kpler-crew .cq-preview-note {
  display: block;
  font-size: 11px;
  text-align: center;
  margin-top: 12px;
  color: var(--muted)
}

.kpler-crew .cq-form-error,
.kpler-crew .cq-form-pending {
  padding: 16px;
  background: var(--cream);
  border-radius: 8px;
  font-size: 16px
}

.kpler-crew .cq-result-preview {
  height: 100vh;
  background: var(--tint);
  position: relative;
  overflow: hidden
}

.kpler-crew .cq-preview-arc {
  height: 45vh;
  border-radius: 0 0 50% 50%;
  background: var(--accent)
}

.kpler-crew .cq-preview-avatar {
  position: absolute;
  top: 30vh;
  left: calc(50% - 132px)
}

.kpler-crew .cq-preview-card {
  position: absolute;
  top: 65vh;
  left: 15%;
  width: 70%;
  height: 40vh;
  background: white;
  border-radius: 24px
}

.kpler-crew .cq-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: #29333c;
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  max-width: calc(100vw - 32px);
  width: max-content;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s
}

.kpler-crew .cq-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0)
}

@media(min-width:768px) and (max-width:1200px) {
  .kpler-crew .cq-landing h1 {
    font-size: 48px
  }

  .kpler-crew .cq-crew-row {
    gap: 20px
  }

  .kpler-crew .cq-business {
    gap: 32px
  }

  .kpler-crew .cq-raffle {
    gap: 32px;
    padding: 40px
  }
}

@media(max-width:767px) {
  .kpler-crew {
    font-size: 16px
  }

  .kpler-crew .cq-desktop {
    display: none
  }

  .kpler-crew .cq-mobile {
    display: block
  }

  .kpler-crew .cq-logo {
    width: 75.2px
  }

  .kpler-crew .cq-logo img {
    width: 73px
  }

  .kpler-crew .cq-landing-hero {
    padding: 32px 20px 48px
  }

  .kpler-crew .cq-pill {
    font-size: 13px;
    line-height: 17px;
    padding: 6px 12px
  }

  .kpler-crew .cq-pill i {
    display: none
  }

  .kpler-crew .cq-landing h1 {
    font-size: 34px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 16px auto
  }

  .kpler-crew .cq-intro {
    font-size: 16px;
    line-height: 24px
  }

  .kpler-crew .cq-crew-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 32px 0 32px
  }

  .kpler-crew .cq-landing-character {
    width: auto
  }

  .kpler-crew .cq-stage {
    width: 120px;
    height: 120px
  }

  .kpler-crew .cq-landing-character h2 {
    font-size: 18px;
    line-height: 23px;
    margin-top: 6px
  }

  .kpler-crew .cq-landing-character p {
    display: none
  }

  .kpler-crew .cq-start {
    width: 100%;
    font-size: 20px;
    padding: 10px 20px
  }

  .kpler-crew .cq-meta {
    font-size: 13px
  }

  .kpler-crew .cq-how {
    padding: 48px 0 56px
  }

  .kpler-crew .cq-how>h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 16px
  }

  .kpler-crew .cq-carousel {
    display: flex;
    overflow: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 20px;
    gap: 12px
  }

  .kpler-crew .cq-carousel::-webkit-scrollbar {
    display: none
  }

  .kpler-crew .cq-step {
    flex: 0 0 272px;
    padding: 24px 20px;
    scroll-snap-align: center
  }

  .kpler-crew .cq-step-top>div {
    width: 50px;
    height: 50px;
    border-radius: 16px
  }

  .kpler-crew .cq-step-top img {
    width: 32px;
    height: 32px
  }

  .kpler-crew .cq-step h3 {
    font-size: 22px;
    line-height: 29px;
    margin-top: 20px
  }

  .kpler-crew .cq-step p {
    font-size: 15px;
    line-height: 23px
  }

  .kpler-crew .cq-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px
  }

  .kpler-crew .cq-dots i {
    height: 6px;
    width: 6px;
    border-radius: 5px;
    background: #ffd2cf
  }

  .kpler-crew .cq-dots i.is-active {
    width: 20px;
    background: var(--coral)
  }

  .kpler-crew .cq-textured {
    background-image: url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead79bbd5797cf07ca61ea_8aa46.svg'), url('https://cdn.prod.website-files.com/64fc9df6b4daf05c9edad27a/6aead79aaad7d955d46a2f54_6feed.svg');
    background-position: calc(100% + 200px) 300px, -300px -50px;
    background-size: 520px 520px, 520px 480px
  }

  .kpler-crew.is-quizzing .cq-exit {
    font-size: 15px
  }

  .kpler-crew .cq-quiz {
    padding: 73px 20px 40px;
    min-height: 100dvh
  }

  .kpler-crew .cq-progress-row {
    display: block
  }

  .kpler-crew .cq-progress p {
    text-align: left;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px
  }

  .kpler-crew .cq-segments {
    gap: 6px
  }

  .kpler-crew .cq-segments i {
    width: auto;
    flex: 1;
    height: 5px
  }

  .kpler-crew .cq-back-desktop {
    display: none
  }

  .kpler-crew .cq-quiz h1 {
    font-size: 26px;
    line-height: 34px;
    text-align: left;
    letter-spacing: 0;
    margin: 20px 0
  }

  .kpler-crew .cq-answers {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .kpler-crew .cq-answer {
    min-height: 80px;
    padding: 18px;
    gap: 14px;
    font-size: 16px;
    line-height: 22px;
    border-radius: 16px
  }

  .kpler-crew .cq-answer>span:first-child {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 15px
  }

  .kpler-crew .cq-back-mobile {
    display: block;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 500
  }

  .kpler-crew .cq-quiz-hint {
    display: none
  }

  .kpler-crew .cq-result-hero {
    height: 350px
  }

  .kpler-crew .cq-result-arc {
    width: 900px;
    height: 560px;
    top: -340px
  }

  .kpler-crew .cq-result-heading {
    padding-top: 32px
  }

  .kpler-crew .cq-result-heading .cq-pill {
    font-size: 13px;
    line-height: 21px;
    padding: 5px 12px
  }

  .kpler-crew .cq-result-heading h1 {
    font-size: 32px;
    line-height: 38px;
    margin: 8px 0
  }

  .kpler-crew .cq-result-heading>p {
    font-size: 16px;
    line-height: 22px
  }

  .kpler-crew .cq-hero-character {
    width: 150px;
    height: 180px
  }

  .kpler-crew .cq-result-hero>.cq-character {
    margin-top: 34px
  }

  .kpler-crew [data-animation=reveal] .cq-lottie {
    inset: -12px -38px -4px
  }

  .kpler-crew .cq-result-summary {
    padding: 0
  }

  .kpler-crew .cq-result-card {
    padding: 22px 20px 28px;
    min-height: 0;
    border-radius: 28px 28px 0 0
  }

  .kpler-crew .cq-result-card h2 {
    font-size: 20px;
    line-height: 26px
  }

  .kpler-crew .cq-traits {
    gap: 8px 6px;
    flex-wrap: wrap;
    margin: 12px 0
  }

  .kpler-crew .cq-traits span {
    font-size: 10.5px;
    line-height: 16px;
    letter-spacing: .63px;
    padding: 4px 6px;
    white-space: nowrap
  }

  .kpler-crew .cq-result-actions {
    flex-direction: column;
    gap: 12px
  }

  .kpler-crew .cq-result-actions .cq-button {
    font-size: 18px;
    padding: 7px 16px
  }

  .kpler-crew .cq-share {
    display: none
  }

  .kpler-crew .cq-retake {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    margin-top: 12px
  }

  .kpler-crew .cq-business {
    display: block;
    padding: 8px 20px 48px
  }

  .kpler-crew .cq-eyebrow {
    font-size: 12px;
    margin-bottom: 12px
  }

  .kpler-crew .cq-business h2 {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 12px
  }

  .kpler-crew .cq-business-copy>p:not(.cq-eyebrow):not(.cq-fun) {
    font-size: 16px;
    line-height: 24px
  }

  .kpler-crew .cq-stats,
  .kpler-crew .cq-facts,
  .kpler-crew .cq-fun {
    display: none
  }

  .kpler-crew .cq-mobile-solutions {
    display: grid;
    gap: 12px;
    margin-top: 16px
  }

  .kpler-crew .cq-mobile-solutions :is(button, a) {
    background: var(--cream);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    text-align: left;
    gap: 12px
  }

  .kpler-crew .cq-mobile-solutions strong {
    display: block;
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    margin-bottom: 2px
  }

  .kpler-crew .cq-mobile-solutions small {
    display: block;
    font-size: 13px;
    line-height: 17px;
    color: var(--muted)
  }

  .kpler-crew .cq-mobile-solutions :is(button, a)>span:last-child {
    color: var(--coral);
    font-size: 22px
  }

  .kpler-crew .cq-raffle-wrap {
    padding: 0 20px 48px
  }

  .kpler-crew .cq-raffle {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-radius: 16px
  }

  .kpler-crew .cq-toolkit {
    order: -1;
    min-height: 196px;
    width: 100%;
    padding: 8px
  }

  .kpler-crew .cq-raffle h2 {
    font-size: 22px;
    line-height: 28px;
    margin: 12px 0
  }

  .kpler-crew .cq-raffle p {
    font-size: 16px;
    line-height: 24px
  }

  .kpler-crew .cq-raffle-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px
  }

  .kpler-crew .cq-raffle-actions .cq-button {
    width: 100%;
    font-size: 18px;
    padding: 7px 14px
  }

  .kpler-crew .cq-rest {
    padding: 40px 0 48px
  }

  .kpler-crew .cq-rest>h2 {
    text-align: left;
    padding: 0 20px;
    font-size: 24px;
    line-height: 31px;
    margin-bottom: 20px
  }

  .kpler-crew .cq-other-card {
    flex: 0 0 272px;
    scroll-snap-align: center;
    padding: 24px 16px
  }

  .kpler-crew .cq-other-card p,
  .kpler-crew .cq-other-card blockquote {
    display: none
  }

  .kpler-crew .cq-other-card h3 {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 0
  }

  .kpler-crew .cq-dialog {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    border-radius: 24px 24px 0 0
  }

  .kpler-crew .cq-mystery {
    padding: 24px 20px 18px
  }

  .kpler-crew .cq-mystery .cq-character {
    width: 60px;
    height: 72px
  }

  .kpler-crew .cq-mystery>span {
    margin-top: 12px;
    font-size: 13px
  }

  .kpler-crew .cq-modal-body {
    padding: 20px 20px max(24px, env(safe-area-inset-bottom))
  }

  .kpler-crew .cq-modal-body h2 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 600
  }

  .kpler-crew .cq-modal-intro {
    font-size: 16px;
    line-height: 24px;
    margin: 12px 0
  }

  .kpler-crew .cq-consent {
    font-size: 12px;
    line-height: 18px;
    margin: 12px 0
  }

  .kpler-crew .cq-preview-note {
    font-size: 10px
  }

  .kpler-crew .cq-preview-form .cq-button {
    font-size: 20px;
    padding: 9px 16px
  }

  .kpler-crew .cq-preview-avatar {
    left: calc(50% - 75px)
  }
}

@media(prefers-reduced-motion:reduce) {
  .kpler-crew * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important
  }
}

.kpler-crew .cq-stat-number img {
  width: 24px;
  height: 24px;
  object-fit: contain
}

.kpler-crew .cq-stat-number {
  width: 48px;
  height: 48px;
  flex-basis: 48px
}

/* Utility header belongs only to the active quiz, not the Webflow site shell. */
.kpler-crew .cq-quiz-header {
  display: none;
  position: absolute;
  inset: 0 0 auto;
  height: 84px;
  padding: 0 48px;
  align-items: center;
  justify-content: space-between;
  z-index: 5
}

.kpler-crew.is-quizzing .cq-quiz-header {
  display: flex
}

.kpler-crew.is-gated .cq-quiz-header {
  visibility: hidden
}

.kpler-crew .cq-exit {
  font-size: 16px;
  color: var(--muted)
}

.kpler-crew .cq-result-actions .cq-button,
.kpler-crew .cq-raffle-actions .cq-button {
  padding: 7px 20px
}

.kpler-crew .cq-share button {
  border-radius: 99px;
  gap: 6px
}

.kpler-crew [data-action=copy] {
  min-width: 107px;
  font-weight: 500
}

.kpler-crew .cq-retake {
  font-weight: 500;
  line-height: 20px
}

.kpler-crew .cq-facts>div {
  border-top: 1px solid #29333c1a;
  padding: 18px 0
}

.kpler-crew .cq-facts dt {
  font-weight: 600;
  line-height: 15px;
  margin-bottom: 6px
}

@media(max-width:767px) {
  .kpler-crew .cq-quiz-header {
    height: 61px;
    padding: 16px 20px
  }

  .kpler-crew .cq-exit {
    font-size: 15px
  }

  .kpler-crew .cq-retake {
    line-height: 18px
  }
}

/* Raw HTML HubSpot gate; iframe forms retain their HubSpot-configured styles. */
.kpler-crew [data-hubspot-target] .hs-form-field {
  margin-bottom: 16px
}

.kpler-crew [data-hubspot-target] label {
  font-size: 14px;
  display: block;
  margin-bottom: 6px
}

.kpler-crew [data-hubspot-target] input[type=email] {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dce1e5;
  border-radius: 8px;
  padding: 12px 16px;
  background: #f2f4f6
}

.kpler-crew [data-hubspot-target] input[type=submit] {
  width: 100%;
  border: 0;
  border-radius: 99px;
  background: var(--coral);
  color: white;
  padding: 10px 20px;
  font: inherit;
  cursor: pointer
}

.kpler-crew [data-hubspot-target] .hs-error-msgs {
  font-size: 13px;
  color: #b42318;
  list-style: none;
  padding: 0
}

.kpler-crew [data-hubspot-target] .legal-consent-container {
  font-size: 13px;
  line-height: 19px
}

.kpler-crew [data-hubspot-target] .inputs-list {
  list-style: none;
  padding: 0;
  margin: 12px 0
}

.kpler-crew [data-hubspot-target] .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 19px;
  font-size: 13px
}

.kpler-crew [data-hubspot-target] input[type=checkbox] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--coral)
}

.kpler-crew [data-hubspot-target] label a {
  text-decoration: underline
}

.kpler-crew [data-hubspot-target] .hs-recaptcha {
  margin-bottom: 16px
}