/* lp11 final screens (loader + result) — ported from no.truecompanion.info
   All rules scoped under .lp11-step so they cannot leak into the quiz steps.
   Tailwind rem values are hardcoded in px, because the host page sets
   html{font-size:62.5%} which would otherwise shrink every rem-based utility. */

.lp11-step {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  max-width: none;
  overflow-y: auto;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.lp11-step img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
}

.lp11-step a { color: inherit; text-decoration: none; }
.lp11-step h2 { font-size: inherit; font-weight: inherit; }

/* loader screen: brand orange background */
.lp11-step.js-quiz-main-step-timer { background-color: #f07d29; }
/* grey caption is unreadable on orange */
.lp11-step.js-quiz-main-step-timer .text-lp11dark-200 { color: #fff; }

/* layout utilities */
.lp11-step .hidden { display: none; }
.lp11-step .flex { display: flex; }
.lp11-step .flex-col { flex-direction: column; }
.lp11-step .items-center { align-items: center; }
.lp11-step .justify-center { justify-content: center; }
.lp11-step .justify-between { justify-content: space-between; }
.lp11-step .h-full { height: 100%; }
.lp11-step .w-full { width: 100%; }
.lp11-step .max-w-sm { max-width: 384px; }
.lp11-step .mx-auto { margin-left: auto; margin-right: auto; }
.lp11-step .relative { position: relative; }
.lp11-step .absolute { position: absolute; }
.lp11-step .fixed { position: fixed; }
.lp11-step .z-20 { z-index: 20; }

/* spacing */
.lp11-step .p-6 { padding: 24px; }
.lp11-step .pt-4 { padding-top: 16px; }
.lp11-step .px-4 { padding-left: 16px; padding-right: 16px; }
.lp11-step .py-2 { padding-top: 8px; padding-bottom: 8px; }
.lp11-step .py-\[14px\] { padding-top: 14px; padding-bottom: 14px; }
.lp11-step .mb-4 { margin-bottom: 16px; }
.lp11-step .mb-10 { margin-bottom: 40px; }
.lp11-step .mb-16 { margin-bottom: 64px; }
.lp11-step .mb-\[34px\] { margin-bottom: 34px; }

/* sizes / positions */
.lp11-step .w-\[292px\] { width: 292px; }
.lp11-step .h-\[249px\] { height: 249px; }
.lp11-step .w-\[312px\] { width: 312px; }
.lp11-step .h-\[312px\] { height: 312px; }
.lp11-step .w-\[120\%\] { width: 120%; }
.lp11-step .h-\[120\%\] { height: 120%; }
.lp11-step .w-\[76px\] { width: 76px; }
.lp11-step .h-\[76px\] { height: 76px; }
.lp11-step .top-\[-10px\] { top: -10px; }
.lp11-step .left-\[-10px\] { left: -10px; }
.lp11-step .top-\[61px\] { top: 61px; }
.lp11-step .right-\[43px\] { right: 43px; }
.lp11-step .left-\[65px\] { left: 65px; }
.lp11-step .bottom-\[110px\] { bottom: 110px; }
.lp11-step .top-\[50\%\] { top: 50%; }
.lp11-step .left-\[50\%\] { left: 50%; }
.lp11-step .translate-y-\[-50\%\] { transform: translate(-50%, -50%); }

/* radius / background */
.lp11-step .rounded-lg { border-radius: 8px; }
.lp11-step .rounded-2xl { border-radius: 16px; }
.lp11-step .rounded-full { border-radius: 9999px; }
.lp11-step .bg-cover { background-size: cover; }
.lp11-step .bg-no-repeat { background-repeat: no-repeat; }
.lp11-step .bg-lp11near { background-image: url(bg-near-min.jpg); }
.lp11-step .bg-lp11white { background-color: #fff; }
.lp11-step .bg-lp11white-20 { background-color: #fff3; }

/* typography */
.lp11-step .italic { font-style: italic; }
.lp11-step .text-button1 { font-size: 15px; font-weight: 600; letter-spacing: .015em; line-height: 20px; }
.lp11-step .text-headline01 { font-size: 52px; font-weight: 800; letter-spacing: -.005em; line-height: 65px; }
.lp11-step .text-headline5 { font-size: 24px; font-weight: 600; line-height: 36px; }
.lp11-step .text-headline6 { font-size: 20px; font-weight: 600; line-height: 28px; }
.lp11-step .text-headline7 { font-size: 15px; font-weight: 500; letter-spacing: .005em; line-height: 24px; }
.lp11-step .text-lp11white { color: #fff; }
.lp11-step .text-lp11black { color: #000; }
.lp11-step .text-lp11dark-200 { color: rgb(149 162 175); }
.lp11-step .text-lp11earth { color: rgb(255 245 17); }

/* opacity / transitions */
.lp11-step .transition-opacity { transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
.lp11-step .opacity-100 { opacity: 1; }
.lp11-step .\!opacity-100 { opacity: 1 !important; }

/* stacking: the animated background sits behind the content of the final step */
.lp11-step .animate-lp11bg { z-index: 0; }
.lp11-step .p-6 > div > img,
.lp11-step h2,
.lp11-step .animate-lp11circle,
.lp11-step a { position: relative; z-index: 1; }

/* final screen: headline sits on a white card, like the CTA button */
.lp11-step.final-step h2 {
  background-color: #fff;
  color: #000;
  border-radius: 8px;
  padding: 12px 16px;
}

.lp11-step.final-step h2 .text-lp11earth { color: #f07d29; }

/* speech bubble tail under the "You" point */
.lp11-step .point:after {
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 10px;
  border-style: solid;
  content: "";
  height: 0;
  left: 19px;
  position: absolute;
  top: 36px;
  width: 0;
  border-color: #fff;
  border-left-color: transparent;
  border-right-color: transparent;
}

/* animations */
@keyframes lp11bg {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
  75% { transform: translate(-5%); }
  to { transform: translateY(0); }
}
.lp11-step .animate-lp11bg { animation: lp11bg 1.5s linear; }

@keyframes lp11button {
  0% { box-shadow: 0 0 #ffffff80; }
  to { box-shadow: 0 0 0 8px #ffffff03; }
}
.lp11-step .animate-lp11button { animation: lp11button .75s linear infinite; }

@keyframes lp11circle {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  to { transform: scale(1); }
}
.lp11-step .animate-lp11circle { animation: lp11circle 1.5s; }

@keyframes lp11point {
  0% { transform: rotate(0); }
  25% { transform: rotate(7deg); }
  50% { transform: rotate(0); }
  75% { transform: rotate(-7deg); }
  to { transform: rotate(0); }
}
.lp11-step .animate-lp11point { animation: lp11point .5s 2.5s; }