.site-header {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.logo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--logo-header-height-mobile-small);
  background-image: url("../assets/graphics/header-bg-mobile-small.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.logo-header__logo {
  width: var(--logo-primary-width-mobile-small);
  height: var(--logo-primary-height-mobile-small);
}

.logo-header__logo--intro-mark {
  width: var(--logo-mark-width-mobile-small);
  height: var(--logo-mark-height-mobile-small);
}

.mark-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--mark-header-height-mobile-small);
  background-image: url("../assets/graphics/header-bg-mobile-small.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mark-header__logo {
  width: var(--logo-mark-width-mobile-small);
  height: var(--logo-mark-height-mobile-small);
}

.mark-header__logo--collapse {
  width: var(--logo-primary-width-mobile-small);
  height: var(--logo-primary-height-mobile-small);
}

.mark-header--email-collapse-ready {
  --focus-header-start-height: var(--logo-header-height-mobile-small);
  --focus-header-end-height: var(--mark-header-height-mobile-small);
  height: var(--focus-header-start-height);
}

.mark-header--email-collapse-running {
  animation: focusHeaderCollapse 820ms cubic-bezier(.42, 0, .18, 1) 160ms both;
}

.mark-header--email-collapse-ready .mark-header__logo {
  visibility: visible;
}

.mark-header--email-collapse-running .mark-header__logo {
  visibility: visible;
}

.module-header--logo-transition {
  --focus-header-start-height: var(--logo-header-height-mobile-small);
  --focus-header-end-height: var(--mark-header-height-mobile-small);
  height: var(--focus-header-start-height);
}

.module-header--logo-transition.module-header--logo-transition-running {
  animation: focusHeaderCollapse 820ms cubic-bezier(.42, 0, .18, 1) 160ms both;
}

.mark-header--completion-logo-transition {
  --completion-header-start-height: var(--mark-header-height-mobile-small);
  --completion-header-end-height: var(--logo-header-height-mobile-small);
  height: var(--completion-header-start-height);
  animation: completionHeaderExpand 920ms cubic-bezier(.42, 0, .18, 1) both;
}

.mark-header--completion-logo-transition .mark-header__logo {
  width: var(--logo-primary-width-mobile-small);
  height: var(--logo-primary-height-mobile-small);
}

.mark-header--completion-logo-transition .mark-header__logo[src$="mf-logo-mark.svg"] {
  width: var(--logo-mark-width-mobile-small);
  height: var(--logo-mark-height-mobile-small);
}

.mark-header--completion-logo-transition .module-header__step,
.mark-header--completion-logo-transition .module-header__name {
  visibility: visible;
  opacity: 1;
  animation: completionHeaderLabelFadeOut 520ms cubic-bezier(.42, 0, .18, 1) 0ms forwards;
}

html:not(.fonts-ready) .mark-header--completion-logo-transition .module-header__step,
html:not(.fonts-ready) .mark-header--completion-logo-transition .module-header__name {
  visibility: visible;
}

html.fonts-ready .mark-header--completion-logo-transition .module-header__step,
html.fonts-ready .mark-header--completion-logo-transition .module-header__name {
  animation: completionHeaderLabelFadeOut 520ms cubic-bezier(.42, 0, .18, 1) 0ms forwards;
}

.reality-rating-guide-page--staged .mark-header--completion-logo-transition .module-header__step,
.reality-rating-guide-page--staged .mark-header--completion-logo-transition .module-header__name {
  visibility: visible;
  opacity: 1;
  animation: completionHeaderLabelFadeOut 520ms cubic-bezier(.42, 0, .18, 1) 0ms forwards;
}

.header-progress--completion-transition {
  overflow: hidden;
  animation: completionProgressTrackExit 520ms cubic-bezier(.42, 0, .18, 1) 120ms forwards;
}

.module-header--logo-transition .module-header__step,
.module-header--logo-transition .module-header__name {
  visibility: visible;
  opacity: 1;
  animation: none;
}

.module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .module-header__step,
.module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .module-header__name,
.module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .mark-header__logo {
  visibility: visible;
  opacity: 1;
  animation: none;
}

.module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) + .header-progress,
.module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) + .header-progress .header-progress__fill {
  visibility: visible;
  opacity: 1;
}

.email-page .module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .module-header__step,
.email-page .module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .module-header__name,
.email-page .module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .mark-header__logo {
  visibility: visible;
  opacity: 1;
  animation: none !important;
  transition: none !important;
}

.email-page .module-header:not(.module-header--logo-transition):not(.mark-header--completion-logo-transition) .mark-header__logo {
  display: block;
  flex: 0 0 auto;
  transform: none !important;
  will-change: auto;
}

.header-progress--focus-transition {
  opacity: 0;
  overflow: hidden;
  background: transparent;
  animation: focusHeaderLabelFadeIn 220ms ease-out 860ms forwards;
}

.header-progress--focus-transition::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-progress-track);
  content: "";
  animation: focusHeaderTrackBuild 1000ms cubic-bezier(.42, 0, .18, 1) 760ms forwards;
}

.header-progress--focus-transition .header-progress__fill {
  position: relative;
  z-index: 1;
  display: block;
}

.header-progress {
  position: relative;
  width: 100%;
  height: var(--header-progress-height-mobile);
  background: var(--color-progress-track);
}

.header-progress--spacer {
  background: transparent;
}

.header-progress__fill {
  width: 0;
  height: 100%;
  background: var(--stage-onboarding);
  transition: width 380ms ease-out;
}

.header-progress__fill--stage-1 {
  background: var(--stage-1);
}

.header-progress__fill--stage-2 {
  background: var(--stage-2);
}

.header-progress__fill--stage-3 {
  background: var(--stage-3);
}

.header-progress__fill--stage-4 {
  background: var(--stage-4);
}

.header-progress__fill--stage-5 {
  background: var(--stage-5);
}

.module-header__step,
.module-header__name {
  position: absolute;
  top: 50%;
  font-family: var(--font-body);
  font-size: var(--module-header-label-font-size-mobile-small);
  line-height: 1;
  transform: translateY(-50%);
}

.module-header__step {
  left: var(--layout-padding-mobile-small);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-figma-normal);
}

.module-header__name {
  right: var(--layout-padding-mobile-small);
  color: var(--stage-onboarding);
  font-weight: var(--font-weight-figma-semibold);
}

.module-header--stage-1 .module-header__name {
  color: var(--stage-1);
}

.module-header--stage-2 .module-header__name {
  color: var(--stage-2);
}

.module-header--stage-3 .module-header__name {
  color: var(--stage-3);
}

.module-header--stage-4 .module-header__name {
  color: var(--stage-4);
}

.module-header--stage-5 .module-header__name {
  color: var(--stage-5);
}

@keyframes focusHeaderCollapse {
  0% {
    height: var(--focus-header-start-height);
  }

  100% {
    height: var(--focus-header-end-height);
  }
}

@keyframes completionHeaderExpand {
  from {
    height: var(--completion-header-start-height);
  }

  to {
    height: var(--completion-header-end-height);
  }
}

@keyframes completionHeaderLabelFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes completionProgressTrackExit {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes focusHeaderLabelFadeIn {
  100% {
    opacity: 1;
  }
}

@keyframes focusHeaderTrackBuild {
  100% {
    width: 100%;
  }
}

.site-header--logo {
  display: flex;
  align-items: center;
}

.site-header--steps {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header--mobile-small-bg {
  background-image: url("../assets/graphics/header-bg-mobile-small.png");
}

.site-header--mobile-medium-bg {
  background-image: url("../assets/graphics/header-bg-mobile-medium.png");
}

.site-header--tablet-bg {
  background-image: url("../assets/graphics/header-bg-tablet.png");
}

@media (min-width: 375px) {
  .site-header--responsive-bg {
    background-image: url("../assets/graphics/header-bg-mobile-medium.png");
  }
}

@media (max-width: 374.98px) {
  .site-header--responsive-bg {
    background-image: url("../assets/graphics/header-bg-mobile-small.png");
  }
}

@media (min-width: 768px) {
  .site-header--responsive-bg {
    background-image: url("../assets/graphics/header-bg-tablet.png");
  }
}

.mark-header.mark-header--email-collapse-ready,
.mark-header.module-header--logo-transition {
  height: var(--focus-header-start-height);
}

.progress {
  display: flex;
  align-items: center;
  width: 100%;
}

.progress__bar {
  position: relative;
  width: 100%;
  height: var(--progress-bar-height);
  overflow: hidden;
  background: var(--color-progress-track);
}

.progress__fill {
  width: 0;
  height: 100%;
  background: var(--stage-onboarding);
}

.progress__fill--onboarding {
  background: var(--stage-onboarding);
}

.progress__fill--stage-1 {
  background: var(--stage-1);
}

.progress__fill--stage-2 {
  background: var(--stage-2);
}

.progress__fill--stage-3 {
  background: var(--stage-3);
}

.progress__fill--stage-4 {
  background: var(--stage-4);
}

.progress__fill--stage-5 {
  background: var(--stage-5);
}

.option-button,
.system-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--option-radius);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: var(--font-weight-option-default);
  text-align: center;
}

.option-button:focus,
.option-button:focus-visible,
.category-button:focus,
.category-button:focus-visible,
.statement-button:focus,
.statement-button:focus-visible,
.rating-button:focus,
.rating-button:focus-visible,
.system-button:focus,
.system-button:focus-visible {
  outline: none;
}

.option-button {
  overflow: hidden;
  height: var(--option-height-mobile-small);
  color: var(--color-text-primary);
  background: var(--color-white);
  border-color: var(--color-primary-border-soft);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  transition:
    background-color 420ms ease-out,
    border-color 420ms ease-out,
    box-shadow 420ms ease-out,
    color 420ms ease-out;
}

.option-button:hover,
.option-button.is-keyboard-hover {
  border-color: var(--color-brand-purple);
  box-shadow: 0 0 15px var(--color-purple-shadow);
  transition-duration: 0ms;
}

.option-button.is-neutral-hover:hover,
.option-button.is-neutral-hover.is-keyboard-hover {
  color: var(--color-text-primary);
  background: var(--color-white);
  border-color: var(--color-primary-border-soft);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  transition-duration: 0ms;
}

.option-button:active,
.option-button.is-keyboard-pressed {
  color: var(--color-white);
  background: var(--color-selected);
  border-color: var(--color-brand-purple);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.option-button.is-selected {
  color: var(--color-white);
  background: var(--color-selected);
  border-color: var(--color-brand-purple);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.option-button.is-main-category {
  transition:
    background-color 420ms ease-out,
    border-color 420ms ease-out,
    box-shadow 420ms ease-out,
    color 420ms ease-out;
}

.option-button.is-main-category:hover,
.option-button.is-main-category.is-keyboard-hover {
  color: var(--color-text-primary);
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary-shadow-strong);
  font-weight: var(--font-weight-option-default);
  transition-duration: 0ms;
}

.option-button.is-main-category:active,
.option-button.is-main-category.is-keyboard-pressed,
.option-button.is-main-category.is-selected {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.option-button.is-selected.is-removable.is-removable-ready:hover,
.option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover {
  color: var(--color-cancel);
  background: var(--color-white);
  border-color: var(--color-cancel);
  box-shadow: 0 0 10px var(--color-cancel-shadow);
  transition-duration: 0ms;
}

.option-button.is-selected.is-removable.is-removable-ready:active {
  color: var(--color-cancel);
  background: var(--color-white);
  border-color: var(--color-cancel);
  box-shadow: none;
}

.option-button.is-cancel {
  color: var(--color-cancel);
  border-color: var(--color-cancel);
  box-shadow: 0 0 10px var(--color-cancel-shadow);
  font-weight: var(--font-weight-option-selected);
}

.option-button__label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.text-bracket {
  color: var(--color-brand-purple);
  font-weight: inherit;
}

.option-button.is-selected .text-bracket,
.option-button.is-main-category.is-selected .text-bracket,
.category-button .text-bracket,
.category-button:active .text-bracket {
  color: currentColor;
}

.option-button__icon {
  position: absolute;
  right: 12px;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
}

.option-button__counter {
  position: absolute;
  right: 8px;
  z-index: 3;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
  pointer-events: none;
}

.option-button__check {
  position: absolute;
  right: 8px;
  z-index: 3;
  display: none;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
  background: transparent url("../assets/icons/check-white.svg") center / contain no-repeat;
  pointer-events: none;
}

.option-button.is-selected .option-button__check {
  display: block;
}

.statement-buttons {
  --statement-inset: var(--layout-padding-mobile-small);
  --statement-icon-size: 20px;
  --statement-well-width: calc(var(--statement-icon-size) + (var(--statement-inset) * 2));
  --statement-padding-block: 12px;
  --statement-line-height: calc(var(--option-line-height-mobile-small) * 1.1);
  gap: 14px;
}

.statement-button {
  --statement-accent: var(--color-primary-border-soft);
  --statement-circle-icon: url("../assets/icons/circle-blue.svg");
  justify-content: flex-start;
  align-items: center;
  height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
  min-height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
  padding:
    var(--statement-padding-block)
    calc(var(--statement-well-width) + var(--statement-inset))
    var(--statement-padding-block)
    var(--statement-inset);
  border-radius: var(--input-radius-mobile-small);
  color: var(--color-text-primary);
  text-align: left;
  background: var(--color-white);
  border-color: var(--color-primary-border-soft);
  box-shadow: 0 0 10px var(--color-input-shadow);
  overflow: hidden;
}

.statement-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--statement-well-width);
  bottom: 0;
  width: 1px;
  background: var(--statement-accent);
  opacity: 1;
  pointer-events: none;
}

.statement-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--statement-inset);
  z-index: 2;
  width: var(--statement-icon-size);
  height: var(--statement-icon-size);
  border: 0;
  border-radius: 999px;
  background: transparent var(--statement-circle-icon) center / contain no-repeat;
  opacity: 0.25;
  transform: translateY(-50%);
  pointer-events: none;
}

.statement-button .option-button__label {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: block;
  width: 100%;
  line-height: var(--statement-line-height);
  transform: none;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.statement-button:hover,
.statement-button.is-keyboard-hover {
  --statement-accent: var(--color-brand-purple);
  --statement-circle-icon: url("../assets/icons/circle-purple.svg");
  color: var(--color-text-primary);
  background: var(--color-white);
  border-color: var(--color-brand-purple);
  box-shadow: 0 0 15px var(--color-purple-shadow);
}

.statement-button:hover::before,
.statement-button.is-keyboard-hover::before {
  opacity: 1;
}

.statement-button:hover::after,
.statement-button.is-keyboard-hover::after {
  opacity: 1;
}

.statement-button:active,
.statement-button.is-keyboard-pressed,
.statement-button.is-selected {
  --statement-accent: var(--color-white);
  --statement-circle-icon: none;
  color: var(--color-white);
  background: var(--color-selected);
  border-color: var(--color-brand-purple);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.statement-button.is-selected::before,
.statement-button:active::before,
.statement-button.is-keyboard-pressed::before {
  opacity: 0.5;
}

.statement-button.is-selected::after,
.statement-button:active::after,
.statement-button.is-keyboard-pressed::after {
  border: 2px solid var(--statement-accent);
  background: transparent;
  opacity: 1;
}

.statement-button .option-button__check {
  top: 50%;
  right: var(--statement-inset);
  z-index: 3;
  width: var(--statement-icon-size);
  height: var(--statement-icon-size);
  transform: translateY(-50%);
}

.option-button.is-selected.is-removable::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  width: 17px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-selected);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 1;
  transition: background-color 420ms ease-out;
}

.option-button.is-selected.is-removable::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  z-index: 2;
  width: 8px;
  height: 20px;
  background: var(--color-selected);
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 30%,
    rgba(0, 0, 0, 0.7) 65%,
    #000000 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 30%,
    rgba(0, 0, 0, 0.7) 65%,
    #000000 100%
  );
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 1;
  transition: background-color 420ms ease-out;
}

.option-button.is-selected.is-removable.is-removable-ready:hover::after,
.option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover::after {
  background: var(--color-white);
  transition-duration: 0ms;
}

.option-button.is-selected.is-removable.is-removable-ready:hover::before,
.option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover::before {
  background: var(--color-white);
  transition-duration: 0ms;
}

.option-button__counter--soft {
  opacity: 0.25;
  transition: opacity 420ms ease-out;
}

.option-button.is-main-category:hover .option-button__counter--soft,
.option-button.is-main-category.is-keyboard-hover .option-button__counter--soft {
  opacity: 1;
  transition-duration: 0ms;
}

.option-button__counter--hover {
  display: none;
}

.option-button:not(.is-main-category):hover .option-button__counter--main,
.option-button:not(.is-main-category).is-keyboard-hover .option-button__counter--main {
  display: none;
}

.option-button:not(.is-main-category):hover .option-button__counter--hover,
.option-button:not(.is-main-category).is-keyboard-hover .option-button__counter--hover {
  display: block;
}

.option-button__cancel {
  display: none;
  position: absolute;
  right: 8px;
  z-index: 3;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
  pointer-events: none;
}

.option-button.is-selected.is-removable.is-removable-ready:hover .option-button__counter,
.option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover .option-button__counter {
  display: none;
}

.option-button.is-selected.is-removable.is-removable-ready:hover .option-button__cancel,
.option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover .option-button__cancel {
  display: block;
}

.focus-module {
  transition: opacity 180ms ease, transform 220ms ease;
}

.focus-module.is-opening .option-button {
  transition: transform 320ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.focus-module.is-opening .option-button.is-selected {
  z-index: 2;
}

.focus-module.is-refinement-animating .option-button {
  transition: opacity 240ms ease, transform 320ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.focus-refinement-gap {
  width: 100%;
  height: 6px;
  flex: 0 0 auto;
}

.category-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--system-button-height-mobile-small);
  border: 1px solid var(--color-primary);
  border-radius: var(--system-button-radius);
  color: var(--color-white);
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: var(--font-weight-option-selected);
  text-align: center;
  transition:
    background-color 420ms ease-out,
    border-color 420ms ease-out,
    box-shadow 420ms ease-out,
    color 80ms ease-out;
}

.category-button:hover,
.category-button.is-keyboard-hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-white);
  box-shadow: 0 0 15px var(--color-primary-shadow-strong);
  font-weight: var(--font-weight-option-default);
  transition-duration: 0ms;
}

.category-button:active,
.category-button.is-keyboard-pressed {
  border-color: var(--color-primary);
  color: var(--color-white);
  background: var(--color-primary);
  box-shadow: none;
}

.category-button__icon {
  position: absolute;
  left: 12px;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
  background: transparent url("../assets/icons/arrow-back-white.svg") center / contain no-repeat;
}

.category-button:hover .category-button__icon,
.category-button.is-keyboard-hover .category-button__icon {
  background: transparent url("../assets/icons/arrow-back-cyan.svg") center / contain no-repeat;
}

.category-button:active .category-button__icon,
.category-button.is-keyboard-pressed .category-button__icon {
  background: transparent url("../assets/icons/arrow-back-white.svg") center / contain no-repeat;
}

.category-button__label {
  display: block;
  transform: translateY(1px);
}

.is-hidden {
  display: none !important;
}

.system-button {
  height: var(--system-button-height-mobile-small);
  border-color: var(--color-disabled-border-soft);
  border-radius: var(--system-button-radius);
  color: var(--color-text-muted);
  background: var(--color-surface-disabled);
  box-shadow: 0 0 10px var(--color-input-shadow);
  font-weight: var(--font-weight-ui-inactive);
}

.system-button.is-active {
  border-color: var(--color-primary);
  color: var(--color-white);
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  font-weight: var(--font-weight-ui-active);
}

.system-button.is-active:hover,
.system-button.is-active.is-keyboard-hover {
  border-color: var(--color-brand-purple);
  background: var(--color-brand-purple);
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
  font-weight: var(--font-weight-ui-hover);
}

@media (hover: none), (pointer: coarse) {
  .option-button:hover,
  .option-button.is-main-category:hover,
  .option-button.is-neutral-hover:hover {
    color: var(--color-text-primary);
    background: var(--color-white);
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 0 10px var(--color-primary-shadow-soft);
    font-weight: var(--font-weight-option-default);
    transition-duration: 420ms;
  }

  .option-button.is-selected:hover,
  .option-button.is-main-category.is-selected:hover,
  .option-button.is-selected.is-removable.is-removable-ready:hover {
    color: var(--color-white);
    background: var(--color-selected);
    border-color: var(--color-brand-purple);
    box-shadow: none;
    font-weight: var(--font-weight-option-selected);
  }

  .statement-button:hover {
    --statement-accent: var(--color-primary-border-soft);
    --statement-circle-icon: url("../assets/icons/circle-blue.svg");
    color: var(--color-text-primary);
    background: var(--color-white);
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 0 10px var(--color-input-shadow);
  }

  .statement-button:hover::after {
    opacity: 0.25;
  }

  .statement-button:hover::before {
    opacity: 1;
  }

  .statement-button.is-selected:hover {
    --statement-accent: var(--color-white);
    --statement-circle-icon: none;
    color: var(--color-white);
    background: var(--color-selected);
    border-color: var(--color-brand-purple);
    box-shadow: none;
  }

  .statement-button.is-selected:hover::after {
    opacity: 1;
  }

  .option-button.is-main-category.is-selected:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .option-button.is-selected.is-removable.is-removable-ready:hover::after,
  .option-button.is-selected.is-removable.is-removable-ready:hover::before {
    background: var(--color-selected);
    transition-duration: 420ms;
  }

  .option-button.is-main-category:hover .option-button__counter--soft {
    opacity: 0.25;
    transition-duration: 420ms;
  }

  .option-button:not(.is-main-category):hover .option-button__counter--main,
  .option-button.is-selected.is-removable.is-removable-ready:hover .option-button__counter {
    display: block;
  }

  .option-button:not(.is-main-category):hover .option-button__counter--hover,
  .option-button.is-selected.is-removable.is-removable-ready:hover .option-button__cancel {
    display: none;
  }

  .category-button:hover {
    border-color: var(--color-primary);
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-shadow-soft);
    font-weight: var(--font-weight-option-selected);
    transition-duration: 420ms;
  }

  .category-button:hover .category-button__icon {
    background: transparent url("../assets/icons/arrow-back-white.svg") center / contain no-repeat;
  }

  .system-button.is-active:hover {
    border-color: var(--color-primary);
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-shadow-soft);
    font-weight: var(--font-weight-ui-active);
  }
}

@media (hover: none), (pointer: coarse) {
  .option-button.is-keyboard-hover {
    border-color: var(--color-brand-purple);
    box-shadow: 0 0 15px var(--color-purple-shadow);
    transition-duration: 0ms;
  }

  .option-button.is-neutral-hover.is-keyboard-hover {
    color: var(--color-text-primary);
    background: var(--color-white);
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 0 10px var(--color-primary-shadow-soft);
    transition-duration: 0ms;
  }

  .option-button.is-main-category.is-keyboard-hover {
    color: var(--color-text-primary);
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-shadow-strong);
    font-weight: var(--font-weight-option-default);
    transition-duration: 0ms;
  }

  .option-button.is-main-category.is-keyboard-hover .option-button__counter--soft {
    opacity: 1;
    transition-duration: 0ms;
  }

  .option-button:not(.is-main-category).is-keyboard-hover .option-button__counter--main,
  .option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover .option-button__counter {
    display: none;
  }

  .option-button:not(.is-main-category).is-keyboard-hover .option-button__counter--hover,
  .option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover .option-button__cancel {
    display: block;
  }

  .option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover {
    color: var(--color-cancel);
    background: var(--color-white);
    border-color: var(--color-cancel);
    box-shadow: 0 0 10px var(--color-cancel-shadow);
    transition-duration: 0ms;
  }

  .option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover::after,
  .option-button.is-selected.is-removable.is-removable-ready.is-keyboard-hover::before {
    background: var(--color-white);
    transition-duration: 0ms;
  }

  .statement-button.is-keyboard-hover {
    --statement-accent: var(--color-brand-purple);
    --statement-circle-icon: url("../assets/icons/circle-purple.svg");
    color: var(--color-text-primary);
    background: var(--color-white);
    border-color: var(--color-brand-purple);
    box-shadow: 0 0 15px var(--color-purple-shadow);
  }

  .statement-button.is-keyboard-hover::before,
  .statement-button.is-keyboard-hover::after {
    opacity: 1;
  }

  .category-button.is-keyboard-hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    background: var(--color-white);
    box-shadow: 0 0 15px var(--color-primary-shadow-strong);
    font-weight: var(--font-weight-option-default);
    transition-duration: 0ms;
  }

  .category-button.is-keyboard-hover .category-button__icon {
    background: transparent url("../assets/icons/arrow-back-cyan.svg") center / contain no-repeat;
  }

  .system-button.is-active.is-keyboard-hover {
    border-color: var(--color-brand-purple);
    color: var(--color-white);
    background: var(--color-brand-purple);
    box-shadow: 0 0 15px var(--color-purple-shadow-strong);
    font-weight: var(--font-weight-ui-hover);
  }
}

.system-button.is-active:active,
.system-button.is-clicked {
  border-color: var(--color-brand-purple);
  color: var(--color-white);
  background: var(--color-brand-purple);
  box-shadow: none;
  font-weight: var(--font-weight-ui-clicked);
}

.system-button:disabled,
.system-button.is-inactive {
  cursor: default;
  pointer-events: none;
}

.system-button__icon {
  position: absolute;
  left: 12px;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
}

.system-button__auto-loader {
  --rating-auto-sweep: 0deg;
  --rating-auto-loader-duration: 3000ms;
  position: absolute;
  right: 14px;
  width: var(--option-icon-size-mobile-small);
  height: var(--option-icon-size-mobile-small);
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    currentColor 0deg var(--rating-auto-sweep),
    transparent var(--rating-auto-sweep) 360deg
  );
  animation: ratingAutoLoaderFill var(--rating-auto-loader-duration) linear forwards;
  pointer-events: none;
}

.system-button.is-auto-counting .system-button__auto-loader {
  opacity: 1;
}

.quiz-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--input-height-mobile-small);
  padding: var(--input-padding-mobile-small);
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--input-radius-mobile-small);
  color: var(--color-text-muted);
  background: var(--color-white);
  box-shadow: 0 0 10px var(--color-input-shadow);
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: 300;
}

.quiz-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.quiz-input:focus,
.quiz-input.has-value,
.quiz-input.is-active {
  color: var(--color-text-active);
  border-color: var(--color-primary);
  outline: none;
}

.quiz-input.has-value:not(:focus):not(.is-active):not(.is-validated) {
  border-color: var(--color-primary);
}

.quiz-input.is-validated {
  border-color: var(--color-brand-purple);
}

.quiz-input:focus.is-validated,
.input-field.is-validated .quiz-input:focus {
  border-color: var(--color-brand-purple) !important;
  outline: 1px solid var(--color-brand-purple);
  outline-offset: -1px;
}

.quiz-input:-webkit-autofill,
.quiz-input:-webkit-autofill:hover,
.quiz-input:-webkit-autofill:focus,
.quiz-input:-webkit-autofill:active,
.phone-number-input:-webkit-autofill,
.phone-number-input:-webkit-autofill:hover,
.phone-number-input:-webkit-autofill:focus,
.phone-number-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-active);
  caret-color: var(--color-text-active);
  background-color: var(--color-white) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  transition:
    background-color 9999s ease-out,
    color 9999s ease-out,
    -webkit-box-shadow 9999s ease-out,
    box-shadow 9999s ease-out;
}

.input-field {
  position: relative;
  display: block;
  width: 100%;
}

.input-field__check {
  display: none;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-brand-purple);
  fill: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-field.is-validated .quiz-input {
  padding-right: 40px;
  border-color: var(--color-brand-purple);
}

.input-field.is-validated.is-input-focused .input-field__check {
  display: block;
}

.phone-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--input-height-mobile-small);
  padding: var(--input-padding-mobile-small);
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--input-radius-mobile-small);
  background: var(--color-white);
  box-shadow: 0 0 10px var(--color-input-shadow);
}

.phone-field:focus-within,
.phone-field.is-active {
  border-color: var(--color-primary);
}

.phone-field.is-validated {
  border-color: var(--color-brand-purple);
}

.phone-code-select {
  width: auto;
  min-width: 70px;
  padding: 0 8px 0 0;
  border: 0;
  border-right: 0;
  border-radius: 0;
  color: var(--color-text-active);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: 300;
  outline: none;
}

.phone-field .phone-code-select:focus,
.phone-field .phone-number-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.phone-number-input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  padding: 0 28px 0 10px;
  border: 0;
  border-radius: 0;
  color: var(--color-text-muted);
  background: transparent;
  box-shadow: none;
  outline: none;
}

.phone-number-input:focus,
.phone-number-input.has-value,
.phone-number-input.is-active,
.phone-number-input.is-validated,
.phone-field.is-validated .phone-number-input,
.phone-field.is-input-focused .phone-number-input {
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.phone-field.is-validated .phone-number-input {
  padding-right: 28px;
}

.email-page {
  min-height: 100vh;
}

.email-page:not(.module-font-ready) .quiz-title,
.email-page:not(.module-font-ready) .quiz-text,
.email-page:not(.module-font-ready) .input-field,
.email-page:not(.module-font-ready) .enter-submit-hint,
.email-page:not(.module-font-ready) .category-button,
.email-page:not(.module-font-ready) .option-button,
.email-page:not(.module-font-ready) .statement-button,
.email-page:not(.module-font-ready) .rating-question,
.email-page:not(.module-font-ready) .rating-row,
.email-page:not(.module-font-ready) .rating-scale,
.email-page:not(.module-font-ready) .rating-scale-preview,
.email-page:not(.module-font-ready) .rating-guide-key {
  opacity: 0 !important;
}

.no-page-scroll .email-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.email-page--intro-pending .email-page-top .quiz-title,
.email-page--intro-pending .email-page-top .quiz-text,
.email-page--intro-pending .option-page-top .quiz-title,
.email-page--intro-pending .option-page-top .quiz-text,
.email-page--intro-pending .page-middle .input-field,
.email-page--intro-pending .option-page-middle .option-button,
.email-page--intro-pending .option-page-middle .statement-button,
.email-page--intro-pending .email-validation-message,
.email-page--intro-pending .enter-submit-hint {
  opacity: 0;
}

.email-page--intro-pending .email-page-bottom .system-button,
.email-page--intro-pending .option-page-bottom .system-button {
  opacity: 0;
}

.email-page--intro-pending .email-page-top .quiz-title,
.email-page--intro-pending .email-page-top .quiz-text,
.email-page--intro-pending .option-page-top .quiz-title,
.email-page--intro-pending .option-page-top .quiz-text,
.email-page--intro-pending .page-middle .input-field,
.email-page--intro-pending .option-page-middle .option-button,
.email-page--intro-pending .option-page-middle .statement-button,
.email-page--intro-pending .email-validation-message,
.email-page--intro-pending .enter-submit-hint {
  transform: translateX(130px);
}

.email-main {
  width: 100%;
}

.email-capture-main {
  --button-floor: min(97dvh, 540px);
  --email-system-button-height: var(--system-button-height-mobile-small);
  --email-footer-padding: var(--layout-padding-mobile-small);
  --email-field-height: var(--input-height-mobile-small);
  --email-field-anchor: 135px;
  --email-field-offset: max(
    20px,
    calc(((var(--button-floor) - var(--email-system-button-height)) - var(--email-field-anchor) - var(--email-field-height)) / 5)
  );
  padding-bottom: calc(var(--email-system-button-height) + var(--email-footer-padding) + 20px);
}

.focus-main {
  --button-stage-height: min(100dvh, 522.68px);
  --button-floor: min(97dvh, 540px);
  --button-header-offset: calc(var(--mark-header-height-mobile-small) + var(--header-progress-height-mobile));
  --button-footer-padding: var(--layout-padding-mobile-small);
  --focus-system-button-height: var(--system-button-height-mobile-small);
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--focus-system-button-height) + var(--button-footer-padding) + 20px);
  min-height: max(0px, calc(var(--button-floor) - var(--button-header-offset) + var(--button-footer-padding)));
}

.page-top,
.page-middle,
.page-bottom {
  width: 100%;
}

.page-middle,
.page-bottom {
  max-width: var(--interaction-max-width);
  margin-right: auto;
  margin-left: auto;
}

.email-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 25px 25px 15px;
}

.email-page-middle,
.name-page-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 10px;
}

.email-capture-middle {
  margin-top: var(--email-field-offset);
}

.name-page-middle::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--text-font-size-mobile-small) * var(--text-line-height));
}

.email-page-bottom {
  display: flex;
  align-items: center;
  padding: 30px 20px 20px;
}

.option-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 0;
}

.option-page-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
}

.option-page-bottom:not(.email-capture-bottom):not(.focus-page-bottom):not(.system-page-bottom-fixed) {
  display: flex;
  align-items: center;
  padding: 20px;
}

.email-page.email-page--stage-3:not(.reality-page--intro-ready) .option-page-top .quiz-title,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .option-page-top .quiz-text,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .focus-module .category-button,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .focus-module .option-button,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .rating-question,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .rating-row,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .rating-scale,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .rating-scale-preview,
.email-page.email-page--stage-3:not(.reality-page--intro-ready) .rating-guide-key,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .option-page-top .quiz-title,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .option-page-top .quiz-text,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .focus-module .category-button,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .focus-module .option-button,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .rating-question,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .rating-row,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .rating-scale,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .rating-scale-preview,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .rating-guide-key,
.email-page:has(.module-header--stage-3):not(.reality-page--intro-ready) .option-page-bottom .system-button {
  opacity: 0;
  transform: translateX(130px);
}

.situation-option-page:not(.situation-page--intro-ready) .option-page-top .quiz-title,
.situation-option-page:not(.situation-page--intro-ready) .option-page-top .quiz-text,
.situation-option-page:not(.situation-page--intro-ready) .focus-module .category-button,
.situation-option-page:not(.situation-page--intro-ready) .focus-module .option-button {
  opacity: 0;
  transform: translateX(130px);
}

.situation-option-page.situation-page--font-pending .option-page-top .quiz-title,
.situation-option-page.situation-page--font-pending .option-page-top .quiz-text,
.situation-option-page.situation-page--font-pending .focus-module .category-button,
.situation-option-page.situation-page--font-pending .focus-module .option-button {
  opacity: 0 !important;
}

.completion-page--skip-handoff-labels .mark-header--completion-logo-transition .module-header__step,
.completion-page--skip-handoff-labels .mark-header--completion-logo-transition .module-header__name {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

html.fonts-ready .completion-page--skip-handoff-labels .mark-header--completion-logo-transition .module-header__step,
html.fonts-ready .completion-page--skip-handoff-labels .mark-header--completion-logo-transition .module-header__name {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.situation-defined-page--staged .mark-header--completion-logo-transition .module-header__step,
.situation-defined-page--staged .mark-header--completion-logo-transition .module-header__name {
  animation: none;
}

html.fonts-ready .situation-defined-page--staged .mark-header--completion-logo-transition .module-header__step,
html.fonts-ready .situation-defined-page--staged .mark-header--completion-logo-transition .module-header__name {
  animation: completionHeaderLabelFadeOut 360ms cubic-bezier(.42, 0, .18, 1) 0ms forwards;
}

.email-page.email-page--stage-4:not(.pattern-page--intro-ready) .option-page-top .quiz-title,
.email-page.email-page--stage-4:not(.pattern-page--intro-ready) .option-page-top .quiz-text,
.email-page.email-page--stage-4:not(.pattern-page--intro-ready) [data-pattern-step] .option-button,
.email-page.email-page--stage-4:not(.pattern-page--intro-ready) [data-pattern-step] .statement-button,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) .option-page-top .quiz-title,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) .option-page-top .quiz-text,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) [data-pattern-step] .option-button,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) [data-pattern-step] .statement-button {
  opacity: 0;
  transform: translateX(130px);
}

.email-page.email-page--stage-4:not(.pattern-page--intro-ready) .module-header--logo-transition .module-header__step,
.email-page.email-page--stage-4:not(.pattern-page--intro-ready) .module-header--logo-transition .module-header__name,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) .module-header--logo-transition .module-header__step,
.email-page:has(.module-header--stage-4):not(.pattern-page--intro-ready) .module-header--logo-transition .module-header__name {
  visibility: hidden;
  opacity: 0;
}

.result-improvement-page:not(.result-improvement-page--intro-ready) .option-page-top .quiz-title,
.result-improvement-page:not(.result-improvement-page--intro-ready) .option-page-top .quiz-text,
.result-improvement-page:not(.result-improvement-page--intro-ready) [data-result-improvement-option] {
  opacity: 0;
  transform: translateX(130px);
}

.result-synthesis-page {
  --result-synthesis-stage-check-size: 20.5px;
  --result-synthesis-stage-gap: 6px;
  --result-synthesis-orbit-size: 140px;
  --result-synthesis-orbit-stroke: 8px;
  --result-synthesis-orbit-gap: 58px;
  --result-synthesis-system-gap: var(--layout-padding-mobile-small);
  --result-synthesis-metrics-width: 100%;
  --result-synthesis-value-column-width: 70px;
  --result-synthesis-line-progress: 0px;
  --result-synthesis-neutral-line-progress: 0px;
  --result-synthesis-line-color: var(--stage-5);
}

.result-synthesis-heading__title,
.result-synthesis-heading__subtitle {
  visibility: hidden;
  opacity: 0;
}

.result-synthesis-heading__title.is-typing,
.result-synthesis-heading__title.is-typed,
.result-synthesis-heading__subtitle.is-typing,
.result-synthesis-heading__subtitle.is-typed {
  visibility: visible;
  opacity: 1;
}

.result-synthesis-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--layout-padding-mobile-small);
}

.result-synthesis-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 20px 0;
}

.result-synthesis-heading__subtitle {
  margin-top: 0;
}

.result-synthesis-heading__title .completion-intro-text__word,
.result-synthesis-heading__title .completion-intro-text__letter,
.result-synthesis-heading__subtitle .completion-intro-text__word,
.result-synthesis-heading__subtitle .completion-intro-text__letter {
  display: inline-block;
}

.result-synthesis-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--result-synthesis-system-gap);
  width: 100%;
  margin-top: var(--result-synthesis-orbit-gap);
}

.result-synthesis-visual:not(.is-visible) .result-synthesis-progress {
  opacity: 0;
}

.result-synthesis-stages {
  display: grid;
  grid-template-columns: max-content repeat(4, var(--result-synthesis-stage-check-size)) max-content;
  grid-template-rows: var(--result-synthesis-stage-check-size) auto;
  align-items: center;
  column-gap: var(--result-synthesis-stage-gap);
  row-gap: 6px;
  width: fit-content;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: 1;
  font-weight: var(--font-weight-figma-bold);
  white-space: nowrap;
}

.result-synthesis-stage {
  align-self: center;
  color: rgba(160, 160, 160, 0.5);
  opacity: 0;
  transition: color 260ms ease, opacity 500ms ease;
}

.result-synthesis-stage.is-neutral-visible,
.result-synthesis-stage-check.is-neutral-visible {
  opacity: 1;
}

.result-synthesis-stage--focus {
  grid-column: 1;
  grid-row: 1;
  transform: translate(3px, 0);
}

.result-synthesis-stage--pattern {
  grid-column: 6;
  grid-row: 1;
  transform: translate(-3px, 0);
}

.result-synthesis-stage--situation {
  grid-column: 2 / 4;
  grid-row: 2;
  justify-self: end;
  transform: translateY(-2px);
}

.result-synthesis-stage--reality {
  grid-column: 4 / 6;
  grid-row: 2;
  justify-self: start;
  transform: translateY(-2px);
}

.result-synthesis-stage-checks {
  position: relative;
  z-index: 0;
  display: flex;
  grid-column: 2 / 6;
  grid-row: 1;
  align-items: center;
  justify-content: space-between;
  width: calc((var(--result-synthesis-stage-check-size) * 4) + (var(--result-synthesis-stage-gap) * 3));
}

.result-synthesis-connector-segment {
  position: absolute;
  z-index: -1;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
}

.result-synthesis-connector-segment[data-synthesis-connector-segment="0"] {
  left: calc(var(--result-synthesis-stage-check-size) + 0.5px);
  width: calc(var(--result-synthesis-stage-gap) - 1px);
}

.result-synthesis-connector-segment[data-synthesis-connector-segment="1"] {
  left: calc((var(--result-synthesis-stage-check-size) * 2) + var(--result-synthesis-stage-gap) + 0.5px);
  width: calc(var(--result-synthesis-stage-gap) - 1px);
}

.result-synthesis-connector-segment[data-synthesis-connector-segment="2"] {
  left: calc((var(--result-synthesis-stage-check-size) * 3) + (var(--result-synthesis-stage-gap) * 2) + 0.5px);
  width: calc(var(--result-synthesis-stage-gap) - 1px);
}

.result-synthesis-connector-segment::before,
.result-synthesis-connector-segment::after {
  position: absolute;
  inset: 0;
  content: "";
  transform-origin: left center;
}

.result-synthesis-connector-segment::before {
  background: rgba(160, 160, 160, 0.5);
  transform: scaleX(var(--result-synthesis-neutral-segment-progress, 0));
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.result-synthesis-connector-segment::after {
  background: var(--result-synthesis-line-color);
  transform: scaleX(var(--result-synthesis-active-segment-progress, 0));
  transition: background-color 260ms ease;
}

.result-synthesis-stage-checks.is-advancing-connection .result-synthesis-connector-segment::after {
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), background-color 260ms ease;
}

.result-synthesis-stage-check {
  position: relative;
  display: grid;
  width: var(--result-synthesis-stage-check-size);
  height: var(--result-synthesis-stage-check-size);
  border-radius: 50%;
  background: transparent;
  isolation: isolate;
  opacity: 0;
  overflow: visible;
  place-items: center;
  transition: opacity 500ms ease;
}

.result-synthesis-icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.result-synthesis-stage-check__neutral,
.result-synthesis-stage-check__complete {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: var(--result-synthesis-stage-check-size);
  height: var(--result-synthesis-stage-check-size);
  overflow: visible;
}

.result-synthesis-stage-check__neutral {
  fill: #A0A0A0;
}

.result-synthesis-stage-check__complete {
  overflow: visible;
  color: var(--stage-1);
  fill: none;
}

.result-synthesis-stage-check--focus .result-synthesis-stage-check__complete {
  color: var(--stage-1);
}

.result-synthesis-stage-check--situation .result-synthesis-stage-check__complete {
  color: var(--stage-2);
}

.result-synthesis-stage-check--reality .result-synthesis-stage-check__complete {
  color: var(--stage-3);
}

.result-synthesis-stage-check--pattern .result-synthesis-stage-check__complete {
  color: var(--stage-4);
}

.result-synthesis-stage-check__check-fill,
.result-synthesis-stage-check__ring-fill {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: miter;
}

.result-synthesis-stage-check__check-fill {
  opacity: 0;
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.result-synthesis-stage-check__ring-fill {
  --completion-ring-length: 100;
  opacity: 0;
  stroke-width: 2.25;
  stroke-linecap: square;
  stroke-dasharray: var(--completion-ring-length) var(--completion-ring-length);
  stroke-dashoffset: var(--completion-ring-length);
}

.result-synthesis-stage-check.is-complete .result-synthesis-stage-check__check-fill {
  animation: completionCheckFillReveal 620ms cubic-bezier(.42, 0, .18, 1) forwards;
}

.result-synthesis-stage-check.is-complete .result-synthesis-stage-check__ring-fill {
  animation: completionRingFillReveal 620ms cubic-bezier(.42, 0, .18, 1) 720ms forwards;
}

.result-synthesis-progress {
  position: relative;
  display: grid;
  width: var(--result-synthesis-orbit-size);
  height: var(--result-synthesis-orbit-size);
  margin: 0;
  transition: opacity 400ms ease;
  place-items: center;
}

.result-synthesis-progress svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.result-synthesis-progress__track,
.result-synthesis-progress__value {
  fill: none;
  stroke-width: var(--result-synthesis-orbit-stroke);
  vector-effect: non-scaling-stroke;
}

.result-synthesis-progress__track {
  stroke: rgba(160, 160, 160, 0.1);
}

.result-synthesis-progress__value {
  stroke: #A0A0A0;
  stroke-linecap: round;
  transition: stroke 260ms ease;
}

.result-synthesis-progress strong {
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
}

.result-synthesis-progress.is-neutral strong {
  color: #A0A0A0;
}

.result-synthesis-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(280px, calc(100% - (var(--layout-padding-mobile-small) * 2)));
  margin-top: var(--result-synthesis-orbit-gap);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: 1.1;
}

.result-synthesis-metric {
  display: grid;
  grid-template-columns: max-content minmax(12px, 1fr) var(--result-synthesis-value-column-width);
  align-items: end;
  width: 100%;
  column-gap: 7px;
  min-height: 1.1em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease;
}

.result-synthesis-metric.is-revealed {
  visibility: visible;
  opacity: 1;
}

.result-synthesis-metric__label {
  color: var(--color-text-primary);
}

.result-synthesis-metric__dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 12px;
  height: 4px;
  margin-bottom: 3px;
  overflow: hidden;
}

.result-synthesis-metric__dot {
  display: block;
  width: 2px;
  height: 2px;
  flex: 0 0 2px;
  border-radius: 50%;
  background: #A0A0A0;
  opacity: 0;
}

.result-synthesis-metric.is-dots-visible .result-synthesis-metric__dot {
  animation: resultSynthesisDotIn 90ms ease-out forwards;
  animation-delay: var(--result-synthesis-dot-delay, 0ms);
}

.result-synthesis-metric__value {
  grid-column: 3;
  justify-self: start;
  font-weight: var(--font-weight-figma-bold);
  opacity: 0;
}

.result-synthesis-metric__value.is-visible {
  animation: resultSynthesisValueBlink 900ms cubic-bezier(.42, 0, .18, 1) both;
}

.result-synthesis-metric__value--green {
  color: #34C759;
}

.result-synthesis-metric__value--orange {
  color: #FF8D28;
}

.result-synthesis-metric__value--red {
  color: #FF383C;
}

@keyframes resultSynthesisValueBlink {
  0%, 18%, 42%, 66%, 100% { opacity: 1; }
  30%, 54%, 78% { opacity: 0.18; }
}

@keyframes resultSynthesisDotIn {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

.result-calibration-modal {
  --result-calibration-floor: min(97dvh, 540px);
  --result-calibration-size: min(310px, calc(100vw - (var(--layout-padding-mobile-small) * 2)));
  --result-calibration-padding: var(--layout-padding-mobile-small);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--result-calibration-padding);
  background: rgba(122, 90, 248, 0.2);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  animation: resultCalibrationOverlayIn 160ms ease-out both;
}

.result-calibration-modal__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr);
  box-sizing: border-box;
  width: var(--result-calibration-size);
  height: var(--result-calibration-size);
  margin-top: max(
    var(--layout-padding-mobile-small),
    calc((var(--result-calibration-floor) - var(--result-calibration-size)) / 2)
  );
  padding: var(--result-calibration-padding) var(--result-calibration-padding) calc(var(--result-calibration-padding) / 2);
  border-radius: var(--input-radius-mobile-small);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 55px rgba(76, 85, 192, 0.1);
  text-align: center;
  animation: resultCalibrationPanelIn 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.result-calibration-modal__question {
  grid-row: 1;
  margin: 0;
  color: var(--color-brand-purple);
}

.result-calibration-modal__options {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-padding-mobile-small) * 0.55);
}

.result-calibration-modal__option {
  min-height: var(--system-button-height-mobile-small);
}

@keyframes resultCalibrationOverlayIn { to { opacity: 1; } }

@keyframes resultCalibrationPanelIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@media (min-width: 375px) {
  .result-synthesis-page {
    --result-synthesis-stage-check-size: 22.5px;
    --result-synthesis-stage-gap: 8px;
    --result-synthesis-orbit-size: 170px;
    --result-synthesis-orbit-stroke: 10px;
    --result-synthesis-orbit-gap: 73px;
    --result-synthesis-system-gap: var(--layout-padding-mobile-standard);
  }

  .result-synthesis-heading {
    padding: 25px 25px 0;
  }

  .result-synthesis-stages,
  .result-synthesis-metrics {
    font-size: var(--text-font-size-mobile-standard);
  }

  .result-synthesis-stages {
    margin: 0;
  }

  .result-synthesis-metrics {
    width: min(300px, calc(100% - (var(--layout-padding-mobile-standard) * 2)));
  }

  .result-synthesis-progress strong {
    font-size: 40px;
  }

  .result-calibration-modal {
    --result-calibration-floor: min(97dvh, 725px);
    --result-calibration-size: min(370px, calc(100vw - (var(--layout-padding-mobile-standard) * 2)));
    --result-calibration-padding: var(--layout-padding-mobile-standard);
    padding: 0 var(--result-calibration-padding);
  }

  .result-calibration-modal__panel {
    width: var(--result-calibration-size);
    height: var(--result-calibration-size);
    margin-top: max(
      var(--layout-padding-mobile-standard),
      calc((var(--result-calibration-floor) - var(--result-calibration-size)) / 2)
    );
    padding: var(--result-calibration-padding) var(--result-calibration-padding) calc(var(--result-calibration-padding) / 2);
    border-radius: var(--input-radius-mobile-standard);
  }

  .result-calibration-modal__options {
    gap: calc(var(--layout-padding-mobile-standard) * 0.5);
  }
}

@media (min-width: 768px) {
  .result-synthesis-page {
    --result-synthesis-stage-check-size: 24.5px;
    --result-synthesis-stage-gap: 10px;
    --result-synthesis-orbit-size: 200px;
    --result-synthesis-orbit-stroke: 12px;
    --result-synthesis-orbit-gap: 86px;
    --result-synthesis-system-gap: var(--layout-padding-tablet);
    --result-synthesis-value-column-width: 80px;
  }

  .result-synthesis-heading {
    padding: 30px 30px 0;
  }

  .result-synthesis-stages,
  .result-synthesis-metrics {
    font-size: var(--text-font-size-tablet);
  }

  .result-synthesis-stages {
    row-gap: 10px;
    margin: 0;
  }

  .result-synthesis-stage--pattern {
    transform: translate(-3px, 1px);
  }

  .result-synthesis-metrics {
    gap: 18px;
    width: min(330px, calc(100% - (var(--layout-padding-tablet) * 2)));
  }

  .result-synthesis-progress strong {
    font-size: 46px;
  }

  .result-calibration-modal {
    --result-calibration-floor: min(97dvh, 765px);
    --result-calibration-size: min(420px, calc(100vw - (var(--layout-padding-tablet) * 2)));
    --result-calibration-padding: var(--layout-padding-tablet);
    padding: 0 var(--result-calibration-padding);
  }

  .result-calibration-modal__panel {
    width: var(--result-calibration-size);
    height: var(--result-calibration-size);
    margin-top: max(
      var(--layout-padding-tablet),
      calc((var(--result-calibration-floor) - var(--result-calibration-size)) / 2)
    );
    padding: var(--result-calibration-padding) var(--result-calibration-padding) calc(var(--result-calibration-padding) / 2);
    border-radius: var(--input-radius-tablet);
  }

  .result-calibration-modal__options {
    gap: calc(var(--layout-padding-tablet) * 0.45);
  }
}

.email-capture-bottom,
.focus-page-bottom,
.system-page-bottom-fixed {
  --fixed-button-floor: min(97dvh, 540px);
  --fixed-system-button-height: var(--system-button-height-mobile-small);
  --fixed-button-bottom-padding: var(--layout-padding-mobile-small);
  --fixed-button-top-padding: var(--layout-padding-mobile-small);
  --fixed-button-hint-gap: calc(var(--layout-padding-mobile-small) / 2);
  position: fixed;
  box-sizing: border-box;
  z-index: 30;
  top: min(
    calc(var(--fixed-button-floor) - var(--fixed-system-button-height)),
    calc(100dvh - var(--fixed-button-bottom-padding) - var(--fixed-system-button-height) - var(--fixed-button-top-padding))
  );
  left: 50%;
  width: min(
    100%,
    calc(var(--interaction-max-width) + (var(--fixed-button-bottom-padding, var(--layout-padding-mobile-small)) * 2))
  );
  padding:
    var(--fixed-button-top-padding, 20px)
    var(--fixed-button-bottom-padding, var(--layout-padding-mobile-small))
    0;
  transform: translateX(-50%);
}

.email-capture-bottom .system-button,
.focus-page-bottom .system-button,
.system-page-bottom-fixed .system-button {
  width: min(100%, var(--interaction-max-width));
  margin-right: auto;
  margin-left: auto;
}

.focus-page-bottom {
  visibility: hidden;
}

.email-capture-bottom .system-button.is-inactive {
  opacity: 0;
  pointer-events: none;
}

.email-page:has(.page-middle.has-input) .email-capture-bottom .system-button.is-inactive {
  opacity: 1;
}

.email-capture-bottom .system-button.is-active {
  opacity: 1;
  transition:
    opacity 260ms ease-out,
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

.enter-submit-hint {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--fixed-system-button-height) + var(--fixed-button-hint-gap, 10px));
  left: 50%;
  width: min(100%, var(--interaction-max-width));
  margin: 0;
  color: var(--color-text-muted);
  opacity: 0;
  text-align: center;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 240ms ease-out,
    transform 240ms ease-out,
    visibility 0s linear 240ms;
  pointer-events: none;
}

.focus-page-bottom .focus-limit-hint {
  position: absolute !important;
  z-index: 2;
  bottom: calc(var(--fixed-system-button-height) + var(--fixed-button-hint-gap, 10px));
  left: 50%;
  width: min(100%, var(--interaction-max-width));
  margin: 0;
  color: var(--color-cancel) !important;
  font-weight: var(--font-weight-ui-active);
  opacity: 0;
  text-align: center;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out,
    visibility 0s linear 180ms;
  pointer-events: none;
}

.focus-page-bottom .system-button {
  position: relative;
  z-index: 1;
}

.system-page-bottom-fixed .situation-challenge-hint {
  position: absolute !important;
  z-index: 2;
  bottom: calc(var(--fixed-system-button-height) + var(--fixed-button-hint-gap, 10px));
  left: 50%;
  width: min(100%, var(--interaction-max-width));
  margin: 0;
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-ui-inactive);
  opacity: 0;
  text-align: center;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out,
    visibility 0s linear 180ms;
  pointer-events: none;
}

.system-page-bottom-fixed .system-button {
  position: relative;
  z-index: 1;
}

.system-page-bottom-fixed.is-hint-leading .system-button {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 240ms ease-out,
    transform 240ms ease-out,
    background-color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 160ms ease-out;
  pointer-events: none;
}

.system-page-bottom-fixed.is-hint-leading.is-button-ready .system-button.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.email-page--intro-pending .system-page-bottom-fixed.is-restored-ready .system-button.is-active,
.system-page-bottom-fixed.is-restored-ready .system-button.is-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

.system-page-bottom-fixed:has(.system-button:hover) .situation-challenge-hint,
.system-page-bottom-fixed:has(.system-button.is-keyboard-hover) .situation-challenge-hint,
.system-page-bottom-fixed:has(.system-button:active) .situation-challenge-hint,
.system-page-bottom-fixed:has(.system-button.is-clicked) .situation-challenge-hint {
  color: var(--color-brand-purple) !important;
}

.focus-page-bottom .focus-limit-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.system-page-bottom-fixed .situation-challenge-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.system-page-bottom-fixed .situation-challenge-hint.is-visible.is-entering {
  animation: systemHintEnterUp 320ms cubic-bezier(.16, 1, .3, 1) both;
}

.enter-submit-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

@keyframes systemHintEnterUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 767px) {
  html:not(.has-hardware-keyboard-signal) .enter-submit-hint.is-visible {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition:
      opacity 240ms ease-out,
      transform 240ms ease-out,
      visibility 0s linear 240ms;
  }
}

.email-page.is-input-exiting .enter-submit-hint {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity 240ms ease-out,
    transform 240ms ease-out,
    visibility 0s linear 240ms;
}

.email-validation-message {
  visibility: hidden;
}

.email-page-middle.has-invalid-input .email-validation-message {
  visibility: visible;
}

.quiz-title {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--color-brand-purple);
  font-family: var(--font-body);
  font-size: var(--title-normal-font-size-mobile-small);
  line-height: var(--title-line-height);
  font-weight: var(--font-weight-figma-bold);
  text-align: center;
}

.quiz-title--big {
  font-size: var(--title-big-font-size-mobile-small);
  line-height: var(--title-big-line-height-mobile-small);
}

.quiz-title--checked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--title-check-gap);
}

.quiz-title__check {
  width: var(--title-check-size-mobile-small);
  height: var(--title-check-size-mobile-small);
  flex: 0 0 auto;
}

.quiz-text {
  width: 100%;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-normal);
  text-align: center;
}

.quiz-text--grey {
  color: var(--color-text-muted);
}

.completion-page {
  min-height: 100vh;
}

.completion-main {
  width: 100%;
}

.completion-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 20px;
}

.completion-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--stage-onboarding);
}

.completion-title__text,
.completion-title__typed {
  display: inline-flex;
}

.completion-title__text {
  align-items: center;
  transform: translateY(-0.5px);
}

.completion-title__typed-letter {
  display: inline-block;
}

.completion-title__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
  fill: currentColor;
  transform: translateY(-2px);
}

.completion-title__icon--animated {
  fill: currentColor;
  overflow: visible;
}

.completion-title__icon--animated .completion-title__icon-check-fill,
.completion-title__icon--animated .completion-title__icon-ring-fill {
  transform-box: fill-box;
  transform-origin: center;
}

.completion-title__icon-check-fill,
.completion-title__icon-ring-fill {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.completion-title__icon-check-fill {
  opacity: 0;
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: completionCheckFillReveal 620ms cubic-bezier(.42, 0, .18, 1) var(--completion-check-start-delay, 120ms) forwards;
}

.completion-title__icon-ring-fill {
  --completion-ring-length: 100;
  opacity: 0;
  stroke-width: 2.25;
  stroke-linecap: square;
  stroke-dasharray: var(--completion-ring-length) var(--completion-ring-length);
  stroke-dashoffset: var(--completion-ring-length);
  animation: completionRingFillReveal 620ms cubic-bezier(.42, 0, .18, 1) var(--completion-check-circle-delay, 840ms) forwards;
}

@property --completion-loader-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --completion-loader-hole {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --completion-check-ring-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --rating-auto-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.completion-loader-area {
  --completion-loader-size: 52px;
  --completion-loader-stroke: 3px;
  --completion-loader-floor: min(97dvh, 540px);
  --completion-loader-bottom-padding: var(--layout-padding-mobile-small);
  --completion-loader-top-padding: var(--layout-padding-mobile-small);
  --completion-loader-intro-delay: 760ms;
  position: fixed;
  z-index: 20;
  top: min(
    calc(var(--completion-loader-floor) + var(--completion-loader-top-padding) - var(--completion-loader-size)),
    calc(100dvh - var(--completion-loader-bottom-padding) - var(--completion-loader-size))
  );
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  opacity: 0;
  animation: completionLoaderAreaIntro var(--completion-loader-intro-delay) ease-out forwards;
  pointer-events: none;
}

.completion-loader-area--skip-trigger {
  pointer-events: none;
}

.completion-loader--skip-trigger {
  pointer-events: auto;
  cursor: default;
}

.skip-page-background-paused,
.skip-page-background-paused *,
.skip-page-background-paused *::before,
.skip-page-background-paused *::after {
  animation-play-state: paused !important;
}

.skip-page-prompt {
  --skip-prompt-floor: min(97dvh, 540px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--layout-padding-mobile-small);
  background: rgba(0, 170, 239, 0.2);
  opacity: 0;
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  animation: skipPromptOverlayIn 160ms ease-out forwards;
}

.skip-page-prompt__panel {
  --skip-prompt-size: min(310px, calc(100vw - (var(--layout-padding-mobile-small) * 2)));
  --skip-prompt-gap: calc(var(--layout-padding-mobile-small) * 0.7);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  width: var(--skip-prompt-size);
  height: var(--skip-prompt-size);
  margin-top: max(
    var(--layout-padding-mobile-small),
    calc((var(--skip-prompt-floor) - var(--skip-prompt-size)) / 2)
  );
  padding: var(--layout-padding-mobile-small) var(--layout-padding-mobile-small) calc(var(--layout-padding-mobile-small) / 2);
  border-radius: var(--input-radius-mobile-small);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 55px rgba(76, 85, 192, 0.1);
  opacity: 0;
  transform: scale(0.92);
  animation: skipPromptPanelIn 260ms cubic-bezier(.16, 1, .3, 1) 70ms forwards;
}

.skip-page-prompt__content {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--skip-prompt-gap);
  margin-top: 0;
  text-align: center;
}

.skip-page-prompt__title {
  margin: 0;
  color: var(--color-brand-purple);
}

.skip-page-prompt__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  color: var(--color-text-primary);
}

.skip-page-prompt__actions {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-padding-mobile-small) * 0.75);
  width: 100%;
  margin: 0;
}

.skip-page-prompt__skip {
  color: var(--color-text-primary);
}

.skip-page-prompt__meta {
  grid-row: 5;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  text-align: center;
}

.skip-page-prompt--closing {
  animation: skipPromptOverlayOut 180ms ease-out 80ms forwards;
}

.skip-page-prompt--closing .skip-page-prompt__panel {
  animation: skipPromptPanelOut 180ms cubic-bezier(.42, 0, .58, 1) forwards;
}

.completion-loader {
  --completion-loader-sequence-duration: 13784ms;
  --completion-loader-duration: 13024ms;
  --completion-loader-fill-duration: var(--completion-loader-duration);
  --completion-loader-eat-duration: 9117ms;
  --completion-loader-pacman-delay: 3907ms;
  --completion-loader-sweep: 0deg;
  --completion-loader-hole: 0%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--completion-loader-size);
  height: var(--completion-loader-size);
  border: 0;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 0 var(--completion-loader-hole),
    #000 calc(var(--completion-loader-hole) + 0.75px) 100%
  );
  mask-image: radial-gradient(
    circle,
    transparent 0 var(--completion-loader-hole),
    #000 calc(var(--completion-loader-hole) + 0.75px) 100%
  );
  animation: completionLoaderHollow var(--completion-loader-eat-duration) linear calc(var(--completion-loader-pacman-delay) + var(--completion-loader-intro-delay)) forwards;
}

@keyframes skipPromptOverlayIn {
  to {
    opacity: 1;
  }
}

@keyframes skipPromptOverlayOut {
  to {
    opacity: 0;
  }
}

@keyframes skipPromptPanelIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  72% {
    opacity: 1;
    transform: scale(1.018);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes skipPromptPanelOut {
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}

@media (min-width: 375px) {
  .skip-page-prompt {
    --skip-prompt-floor: min(97dvh, 725px);
    padding: 0 var(--layout-padding-mobile-standard);
  }

  .skip-page-prompt__panel {
    --skip-prompt-size: min(370px, calc(100vw - (var(--layout-padding-mobile-standard) * 2)));
    --skip-prompt-gap: calc(var(--layout-padding-mobile-standard) * 0.7);
    margin-top: max(
      var(--layout-padding-mobile-standard),
      calc((var(--skip-prompt-floor) - var(--skip-prompt-size)) / 2)
    );
    padding: var(--layout-padding-mobile-standard) var(--layout-padding-mobile-standard) calc(var(--layout-padding-mobile-standard) / 2);
    border-radius: var(--input-radius-mobile-standard);
  }

  .skip-page-prompt__content {
    gap: var(--skip-prompt-gap);
    margin-top: 0;
  }

  .skip-page-prompt__actions {
    gap: calc(var(--layout-padding-mobile-standard) * 0.7);
  }

  .skip-page-prompt__meta {
    font-size: var(--text-font-size-mobile-standard);
  }
}

@media (min-width: 768px) {
  .skip-page-prompt {
    --skip-prompt-floor: min(97dvh, 765px);
    padding: 0 var(--layout-padding-tablet);
  }

  .skip-page-prompt__panel {
    --skip-prompt-size: min(420px, calc(100vw - (var(--layout-padding-tablet) * 2)));
    --skip-prompt-gap: calc(var(--layout-padding-tablet) * 0.55);
    margin-top: max(
      var(--layout-padding-tablet),
      calc((var(--skip-prompt-floor) - var(--skip-prompt-size)) / 2)
    );
    padding: var(--layout-padding-tablet) var(--layout-padding-tablet) calc(var(--layout-padding-tablet) / 2);
    border-radius: var(--input-radius-tablet);
  }

  .skip-page-prompt__content {
    gap: var(--skip-prompt-gap);
    margin-top: 0;
  }

  .skip-page-prompt__actions {
    gap: calc(var(--layout-padding-tablet) * 0.6);
  }

  .skip-page-prompt__meta {
    font-size: var(--text-font-size-mobile-standard);
  }
}

.completion-loader::before {
  position: absolute;
  inset: calc((var(--completion-loader-stroke) + 2px) * -1);
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--color-primary) 0deg var(--completion-loader-sweep),
    transparent var(--completion-loader-sweep) 360deg
  );
  content: "";
  animation: completionLoaderFill var(--completion-loader-fill-duration) linear var(--completion-loader-intro-delay) forwards;
}

.completion-loader::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  border: var(--completion-loader-stroke) solid var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  animation: completionLoaderRingClear var(--completion-loader-eat-duration) linear calc(var(--completion-loader-pacman-delay) + var(--completion-loader-intro-delay)) forwards;
}

.completion-page--staged.completion-page--exiting .completion-loader,
.completion-page--staged.completion-page--exiting .completion-loader::before,
.completion-page--staged.completion-page--exiting .completion-loader::after {
  opacity: 0 !important;
  animation: none !important;
}

.completion-page--staged {
  --completion-check-start-delay: 960ms;
  --completion-check-finish-delay: 1230ms;
  --completion-check-circle-delay: 1680ms;
  --completion-intro-delay: 2460ms;
  --completion-path-delay: 2860ms;
  --completion-stage-start: 3300ms;
  --completion-stage-step: 150ms;
  --completion-active-delay: 4240ms;
  --stage-rest-padding: 3px;
  --stage-active-gap: 10px;
}

.completion-page--staged .completion-title__typed-letter {
  opacity: 0;
  animation: completionTypeLetter 220ms cubic-bezier(.12, 0, .08, 1) calc(250ms + (var(--letter-index) * 55ms)) forwards;
}

.completion-page--staged .completion-intro-text,
.completion-page--staged .completion-path__title {
  opacity: 0;
  transform: translateY(4px);
}

.completion-page--staged .completion-intro-text {
  animation: completionRevealUp 360ms cubic-bezier(.16, 1, .3, 1) var(--completion-intro-delay) forwards;
}

.completion-page--staged .completion-path__title {
  animation: completionRevealUp 340ms cubic-bezier(.16, 1, .3, 1) var(--completion-path-delay) forwards;
}

.completion-page--staged .stage-list--clarity .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-label__name {
  opacity: 0;
  animation-name: completionStageReveal, completionStageDim;
  animation-duration: 260ms, 260ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.22, 1, .36, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-active-delay) + 180ms + (var(--stage-index, 0) * 95ms));
  animation-fill-mode: forwards, forwards;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  border-color: transparent;
  background: transparent;
  animation-name: completionStageReveal, completionStageActivate;
  animation-duration: 260ms, 360ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.2, .8, .2, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), var(--completion-active-delay);
  animation-fill-mode: forwards, forwards;
}

.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__name {
  padding-top: var(--stage-rest-padding, 3px);
  animation-name: completionStageReveal, completionStageDim, completionStagePushDown;
  animation-duration: 260ms, 260ms, 360ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.22, 1, .36, 1), cubic-bezier(.2, .8, .2, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-active-delay) + 180ms + (var(--stage-index, 0) * 95ms)), var(--completion-active-delay);
  animation-fill-mode: forwards, forwards, forwards;
}

.completion-page--staged .stage-list--clarity .stage-item:nth-child(1) {
  --stage-index: 0;
}

.completion-page--staged .stage-list--clarity .stage-item:nth-child(2) {
  --stage-index: 1;
}

.completion-page--staged .stage-list--clarity .stage-item:nth-child(3) {
  --stage-index: 2;
}

.completion-page--staged .stage-list--clarity .stage-item:nth-child(4) {
  --stage-index: 3;
}

.completion-page--staged .stage-list--clarity .stage-item:nth-child(5) {
  --stage-index: 4;
}

.completion-page .stage-list--clarity .stage-item.is-active .stage-label__number {
  padding-right: 4px;
}

.completion-page--exiting:not(.completion-page--staged) .stage-list--clarity .stage-item:not(.is-active) .stage-label__number,
.completion-page--exiting:not(.completion-page--staged) .stage-list--clarity .stage-item:not(.is-active) .stage-label__name {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.completion-page--exiting .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--exiting .stage-list--clarity .stage-item.is-active .stage-label__name {
  box-shadow: none !important;
}

.completion-page .stage-list--clarity .stage-item.is-active .stage-label__name {
  padding-left: 4px;
}

@keyframes completionTypeLetter {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 0.78;
  }

  100% {
    opacity: 1;
  }
}

@keyframes completionRevealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes completionStageReveal {
  to {
    opacity: 1;
  }
}

@keyframes completionStageDim {
  to {
    opacity: 0.5;
  }
}

@keyframes completionStageActivate {
  to {
    opacity: 1;
    border-color: var(--stage-color);
    background: var(--color-white);
  }
}

@keyframes completionStagePushDown {
  to {
    padding-top: var(--stage-active-gap, 10px);
  }
}

@media (min-width: 375px) {
  .completion-page--staged {
    --stage-rest-padding: 4px;
    --stage-active-gap: 12px;
  }

  .completion-loader-area {
    --completion-loader-size: 60px;
    --completion-loader-stroke: 3.5px;
    --completion-loader-floor: min(97dvh, 725px);
    --completion-loader-bottom-padding: var(--layout-padding-mobile-standard);
    --completion-loader-top-padding: var(--layout-padding-mobile-standard);
  }

  .completion-intro-text {
    gap: calc(var(--layout-padding-mobile-standard) / 4);
  }
}

@media (min-width: 768px) {
  .completion-loader-area {
    --completion-loader-size: 64px;
    --completion-loader-stroke: 4px;
    --completion-loader-floor: min(97dvh, 765px);
    --completion-loader-bottom-padding: var(--layout-padding-tablet);
    --completion-loader-top-padding: var(--layout-padding-tablet);
  }

  .completion-intro-text {
    gap: calc(var(--layout-padding-tablet) / 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .completion-page--staged .completion-title__typed-letter,
  .completion-page--staged .completion-intro-text,
  .completion-page--staged .completion-intro-text__sentence,
  .completion-page--staged .completion-path__title,
  .completion-page--staged .stage-list--clarity .stage-label__number,
  .completion-page--staged .stage-list--clarity .stage-label__name {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .completion-page--staged .stage-list--clarity .stage-item:not(.is-active) .stage-label__number,
  .completion-page--staged .stage-list--clarity .stage-item:not(.is-active) .stage-label__name {
    opacity: 0.5;
  }

  .completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
  .completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
    border-color: var(--stage-color);
    background: var(--color-white);
  }

  .completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__number,
  .completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__name {
    padding-top: var(--stage-active-gap, 10px);
  }

  .completion-loader {
    --completion-loader-sweep: 360deg;
    --completion-loader-hole: 74%;
    animation: none;
  }

  .completion-loader::before,
  .completion-loader::after {
    animation: none;
  }
}

@keyframes completionCheckFillReveal {
  0% {
    opacity: 1;
    stroke-dashoffset: 100;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes completionLoaderFill {
  0% {
    --completion-loader-sweep: 0deg;
  }

  100% {
    --completion-loader-sweep: 360deg;
  }
}

@keyframes completionLoaderAreaIntro {
  to {
    opacity: 1;
  }
}

@keyframes completionLoaderHollow {
  0% {
    --completion-loader-hole: 0%;
  }

  100% {
    --completion-loader-hole: 74%;
  }
}

@keyframes completionLoaderRingClear {
  0%,
  74% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ratingAutoLoaderFill {
  to {
    --rating-auto-sweep: 360deg;
  }
}

@keyframes ratingKeyboardReselect {
  0% {
    color: var(--color-text-primary);
    background: var(--color-page-bg);
    border-color: var(--color-brand-purple);
    box-shadow: 0 0 15px var(--color-purple-shadow-strong);
    transform: scale(1);
  }

  42% {
    color: var(--color-text-primary);
    background: var(--color-page-bg);
    border-color: var(--color-brand-purple);
    box-shadow: 0 0 15px var(--color-purple-shadow-strong);
    transform: scale(1.04);
  }

  100% {
    color: var(--color-white);
    background: var(--color-selected);
    border-color: var(--color-brand-purple);
    box-shadow: none;
    transform: scale(1);
  }
}

@keyframes completionRingFillReveal {
  0% {
    opacity: 1;
    stroke-dashoffset: var(--completion-ring-length);
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .completion-title__icon-check-fill,
  .completion-title__icon-ring-fill {
    animation: none;
    opacity: 0;
  }

  .completion-title__icon-check-fill {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .completion-title__icon-ring-fill {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.focus-set-page-top {
  gap: 30px;
  width: 100%;
  padding-top: 20px;
}

.focus-set-title {
  color: var(--stage-1);
}

.focus-areas-page:not(.focus-areas-page--intro-ready) .option-page-top .quiz-title,
.focus-areas-page:not(.focus-areas-page--intro-ready) .option-page-top .quiz-text,
.focus-areas-page:not(.focus-areas-page--intro-ready) [data-focus-module] .option-button {
  opacity: 0;
}

.reality-intro-page:not(.reality-page--intro-ready) .module-header__name {
  visibility: hidden;
  opacity: 0;
}

.email-page:has(.module-header--stage-3.module-header--logo-transition):not(.reality-page--intro-ready) .module-header__step,
.email-page:has(.module-header--stage-3.module-header--logo-transition):not(.reality-page--intro-ready) .module-header__name {
  visibility: hidden;
  opacity: 0;
}

.situation-defined-page-top {
  align-items: center;
  gap: 30px;
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

.situation-defined-title {
  gap: 0;
  color: var(--stage-2);
}

.situation-defined-title .completion-title__space {
  display: inline-block;
  width: 0.35em;
}

.situation-defined-title .completion-title__icon {
  margin-left: 0.35em;
}

.pattern-identified-page .situation-defined-title {
  color: var(--stage-4);
}

.pattern-identified-page.situation-defined-page--staged {
  --situation-defined-stage-shift-duration: var(--stage-reference-handoff-duration, 1500ms);
  --stage-handoff-duration: var(--situation-defined-stage-shift-duration);
}

.pattern-identified-page .situation-defined-copy__primary {
  color: var(--color-brand-purple);
  max-width: min(100%, 720px);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.pattern-identified-page .situation-defined-copy .quiz-text {
  max-width: min(100%, 720px);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.quiz-title,
.quiz-text,
.completion-path__title,
.stage-label__number,
.stage-label__name {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.pattern-identified-page .situation-defined-copy__primary .completion-intro-text__letter {
  color: var(--color-brand-purple);
  font-weight: inherit;
}

.situation-defined-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--interaction-max-width);
}

.situation-defined-copy__primary {
  color: var(--color-brand-purple);
  font-weight: var(--font-weight-figma-bold);
  white-space: normal;
}

.situation-defined-copy__lead,
.situation-defined-copy__rest {
  display: inline;
}

@media (max-width: 767.98px) {
  .situation-defined-page:not(.pattern-identified-page) .situation-defined-copy__lead,
  .situation-defined-page:not(.pattern-identified-page) .situation-defined-copy__rest {
    display: block;
  }
}

.situation-defined-page .completion-path {
  width: fit-content;
  max-width: 100%;
}

.situation-defined-page .completion-path__title {
  width: 100%;
}

.situation-defined-page .completion-main {
  margin-right: auto;
  margin-left: auto;
}

.situation-defined-page--staged {
  --stage-reference-handoff-duration: var(--focus-set-stage-shift-duration, 1500ms);
  --stage-reference-pulse-duration: var(--focus-set-stage-pulse-duration, 3600ms);
  --situation-defined-title-delay: 760ms;
  --situation-defined-result-delay: 1300ms;
  --situation-defined-title-step: 46ms;
  --situation-defined-copy-delay: 980ms;
  --situation-defined-copy-step: 150ms;
  --situation-defined-path-delay: 1460ms;
  --situation-defined-stage-delay: 1760ms;
  --situation-defined-stage-step: 92ms;
  --situation-defined-stage-shift-delay: 2700ms;
  --situation-defined-stage-shift-duration: var(--stage-reference-handoff-duration);
  --stage-handoff-duration: var(--situation-defined-stage-shift-duration);
  --stage-handoff-pulse-duration: var(--stage-reference-pulse-duration);
}

.situation-defined-page--staged:not(.situation-defined-page--ready) [data-situation-defined-module],
.situation-defined-page--staged:not(.situation-defined-page--ready) [data-situation-defined-result],
.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-title__space,
.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-title__icon,
.situation-defined-page--staged:not(.situation-defined-page--ready) .situation-defined-copy .quiz-text,
.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-path,
.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-path__title,
.situation-defined-page--staged:not(.situation-defined-page--ready) .stage-label__number,
.situation-defined-page--staged:not(.situation-defined-page--ready) .stage-label__name {
  opacity: 0;
}

.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-path {
  visibility: hidden;
}

.situation-defined-page--staged.situation-defined-page--ready .completion-path {
  visibility: visible;
}

.situation-defined-page--staged:not(.situation-defined-page--ready) .completion-path,
.situation-defined-page--staged .completion-path[style*="visibility: hidden"] {
  pointer-events: none;
}

.situation-defined-page--staged:not(.situation-defined-page--ready) .stage-label,
.situation-defined-page--staged:not(.situation-defined-page--ready) .stage-label__number,
.situation-defined-page--staged:not(.situation-defined-page--ready) .stage-label__name {
  border-color: transparent !important;
  background-color: transparent !important;
}

.situation-defined-page--staged .situation-defined-title__typed .completion-title__typed-letter {
  opacity: 0;
}

.situation-defined-page--staged .stage-list--clarity .stage-label__number,
.situation-defined-page--staged .stage-list--clarity .stage-label__name {
  transition:
    opacity var(--situation-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    border-color var(--situation-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    background-color var(--situation-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    transform var(--situation-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    margin var(--situation-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1);
}

.situation-defined-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__number,
.situation-defined-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__name {
  opacity: 0.5;
}

@media (min-width: 768px) {
  .situation-defined-page .completion-main {
    max-width: 720px;
  }

  .situation-defined-copy {
    max-width: 720px;
  }
}

.reality-guide-title,
.reality-bridge-title {
  color: var(--color-brand-purple);
}

.reality-defined-title {
  color: var(--stage-3);
}

.reality-defined-page .completion-main,
.reality-defined-page .situation-defined-page-top,
.reality-defined-page .situation-defined-copy {
  max-width: none;
}

.reality-defined-page .situation-defined-copy {
  box-sizing: border-box;
  width: 100%;
  padding-right: var(--layout-padding-mobile-small);
  padding-left: var(--layout-padding-mobile-small);
}

.reality-defined-page .situation-defined-copy .quiz-text {
  width: 100%;
  max-width: 100%;
}

.reality-defined-page .situation-defined-copy__primary {
  color: var(--color-brand-purple);
}

@media (min-width: 375px) {
  .reality-defined-page .situation-defined-copy {
    padding-right: var(--layout-padding-mobile-standard);
    padding-left: var(--layout-padding-mobile-standard);
  }
}

@media (min-width: 768px) {
  .reality-defined-page .situation-defined-copy {
    padding-right: var(--layout-padding-tablet);
    padding-left: var(--layout-padding-tablet);
  }
}

.reality-defined-page--staged {
  --stage-reference-handoff-duration: var(--focus-set-stage-shift-duration, 1500ms);
  --stage-reference-pulse-duration: var(--focus-set-stage-pulse-duration, 3600ms);
  --reality-defined-title-delay: 760ms;
  --reality-defined-result-delay: 1300ms;
  --reality-defined-title-step: 46ms;
  --reality-defined-copy-delay: 980ms;
  --reality-defined-copy-step: 150ms;
  --reality-defined-path-delay: 1460ms;
  --reality-defined-stage-delay: 1760ms;
  --reality-defined-stage-step: 92ms;
  --reality-defined-stage-shift-delay: 2700ms;
  --reality-defined-stage-shift-duration: var(--stage-reference-handoff-duration);
  --stage-handoff-duration: var(--reality-defined-stage-shift-duration);
  --stage-handoff-pulse-duration: var(--stage-reference-pulse-duration);
}

.reality-defined-page--staged:not(.reality-defined-page--ready) [data-reality-defined-module],
.reality-defined-page--staged:not(.reality-defined-page--ready) [data-reality-defined-result],
.reality-defined-page--staged:not(.reality-defined-page--ready) .completion-title__space,
.reality-defined-page--staged:not(.reality-defined-page--ready) .completion-title__icon,
.reality-defined-page--staged:not(.reality-defined-page--ready) .situation-defined-copy .quiz-text,
.reality-defined-page--staged:not(.reality-defined-page--ready) .completion-path,
.reality-defined-page--staged:not(.reality-defined-page--ready) .completion-path__title,
.reality-defined-page--staged:not(.reality-defined-page--ready) .stage-label__number,
.reality-defined-page--staged:not(.reality-defined-page--ready) .stage-label__name {
  opacity: 0;
  visibility: hidden;
}

.reality-defined-page--staged.reality-defined-page--ready .completion-path,
.reality-defined-page--staged.reality-defined-page--ready .completion-path__title,
.reality-defined-page--staged.reality-defined-page--ready .stage-label__number,
.reality-defined-page--staged.reality-defined-page--ready .stage-label__name {
  visibility: visible;
}

.reality-defined-page--staged .reality-defined-title__typed .completion-title__typed-letter {
  opacity: 0;
}

.reality-defined-page--staged .mark-header--completion-logo-transition .module-header__step,
.reality-defined-page--staged .mark-header--completion-logo-transition .module-header__name {
  animation: none;
}

html.fonts-ready .reality-defined-page--staged .mark-header--completion-logo-transition .module-header__step,
html.fonts-ready .reality-defined-page--staged .mark-header--completion-logo-transition .module-header__name {
  animation: completionHeaderLabelFadeOut 360ms cubic-bezier(.42, 0, .18, 1) 0ms forwards;
}

.reality-defined-page--staged .stage-list--clarity .stage-label__number,
.reality-defined-page--staged .stage-list--clarity .stage-label__name {
  transition:
    opacity var(--reality-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    border-color var(--reality-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    background-color var(--reality-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    transform var(--reality-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    margin var(--reality-defined-stage-shift-duration) cubic-bezier(.22, .72, .18, 1);
}

.reality-defined-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__number,
.reality-defined-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__name {
  opacity: 0.5;
}

.reality-bridge-page-top,
.reality-guide-page-top {
  gap: 30px;
  width: 100%;
  padding-top: 20px;
}

.reality-acknowledgement-page--staged {
  --reality-acknowledgement-title-delay: 820ms;
  --reality-acknowledgement-title-step: 24ms;
  --reality-acknowledgement-title-duration: 320ms;
  --reality-acknowledgement-copy-delay: 2500ms;
  --reality-acknowledgement-copy-step: 20ms;
  --reality-acknowledgement-copy-duration: 520ms;
}

.reality-acknowledgement-page--staged .header-progress--completion-transition {
  overflow: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

.reality-acknowledgement-page--staged:not(.reality-acknowledgement-page--ready) [data-reality-acknowledgement-title],
.reality-acknowledgement-page--staged:not(.reality-acknowledgement-page--ready) [data-reality-acknowledgement-copy] {
  opacity: 0;
}

.reality-acknowledgement-page--staged [data-reality-acknowledgement-title] {
  opacity: 1;
}

.reality-acknowledgement-page--staged [data-reality-acknowledgement-copy] {
  opacity: 0;
}

.reality-acknowledgement-page--staged .completion-main {
  position: relative;
}

.reality-journey-scene {
  position: relative;
  width: min(100%, var(--interaction-max-width));
  aspect-ratio: 301.55 / 226.33;
  height: auto;
  margin: clamp(14px, 2.5vh, 29px) auto 0;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;
}

.reality-journey-scene__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.reality-goal-animation {
  overflow: visible;
}

.goal-road-shapes {
  opacity: 0;
  animation: goalRoadShapesAppear 2400ms cubic-bezier(.48, 0, .18, 1) var(--goal-road-start-delay, 4150ms) forwards;
}

.goal-road-shape {
  fill: #a0a0a0;
}

.goal-flag,
.goal-location {
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.goal-flag {
  opacity: 0;
  transform: translate(107.64px, 109.72px) scale(4.97);
  animation:
    goalFlagFadeIn 980ms cubic-bezier(.25, .72, .18, 1) var(--goal-flag-fade-delay, 1180ms) forwards,
    goalFlagRoadJourney 1650ms cubic-bezier(.48, 0, .18, 1) var(--goal-road-start-delay, 4150ms) forwards;
}

.goal-flag__asset {
  transform-box: fill-box;
  transform-origin: 14% 52%;
}

.goal-flag__pole,
.goal-flag__cloth {
  fill: #2fbf71;
}

.goal-flag__cloth-bg {
  fill: #fcfcfc;
}

.goal-flag__cloth,
.goal-flag__cloth-bg {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: goalFlagClothWave 960ms cubic-bezier(.36, 0, .64, 1) infinite;
  will-change: transform;
}

.goal-location {
  opacity: 0;
  transform: translate(150.78px, 226.33px) scale(0);
  animation: goalLocationRoadJourney 1100ms forwards var(--goal-location-start-delay, 5520ms);
}

.goal-location__background {
  fill: #fcfcfc;
}

.goal-location__frame,
.goal-location__circle {
  fill: #00aaef;
}

.goal-location__circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: goalLocationPulse 2910ms cubic-bezier(0.42, 0, 0.18, 1) var(--goal-location-pulse-delay, 6600ms) infinite;
}

@keyframes goalRoadShapesAppear {
  0% {
    opacity: 0;
  }

  18%,
  100% {
    opacity: 0.82;
  }
}

@keyframes goalFlagFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes goalFlagRoadJourney {
  0% {
    transform: translate(107.64px, 109.72px) scale(4.97);
  }

  100% {
    transform: translate(149.78px, 0) scale(2.57);
  }
}

@keyframes goalFlagClothWave {
  0%,
  100% {
    transform: translateX(0) translateY(0) skewY(0deg) rotate(0deg) scaleX(1);
  }

  11% {
    transform: translateX(0.03px) translateY(-0.05px) skewY(-0.7deg) rotate(-0.18deg) scaleX(1.002);
  }

  23% {
    transform: translateX(0.08px) translateY(-0.12px) skewY(-1.45deg) rotate(-0.32deg) scaleX(1.006);
  }

  34% {
    transform: translateX(0.13px) translateY(-0.08px) skewY(-0.95deg) rotate(-0.12deg) scaleX(1.004);
  }

  48% {
    transform: translateX(0.17px) translateY(0.03px) skewY(0.35deg) rotate(0.08deg) scaleX(0.998);
  }

  61% {
    transform: translateX(0.13px) translateY(0.11px) skewY(1.05deg) rotate(0.24deg) scaleX(1.004);
  }

  76% {
    transform: translateX(0.07px) translateY(0.14px) skewY(1.55deg) rotate(0.34deg) scaleX(1.006);
  }

  89% {
    transform: translateX(0.02px) translateY(0.06px) skewY(0.65deg) rotate(0.12deg) scaleX(1.002);
  }
}

@keyframes goalLocationRoadJourney {
  0% {
    opacity: 0;
    transform: translate(150.78px, 226.33px) scale(0);
    animation-timing-function: cubic-bezier(.72, 0, .92, .36);
  }

  14% {
    opacity: 1;
    transform: translate(150.78px, 226.33px) scale(0.08);
    animation-timing-function: cubic-bezier(.1, .92, .18, 1);
  }

  82% {
    opacity: 1;
    transform: translate(150.78px, 226.33px) scale(6.75);
    animation-timing-function: cubic-bezier(.22, 0, .18, 1);
  }

  100% {
    opacity: 1;
    transform: translate(150.78px, 226.33px) scale(6.45);
  }
}

@keyframes goalLocationPulse {
  0%,
  100% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.5);
  }
}

.reality-acknowledgement-page--staged.completion-page--exiting .completion-loader-area {
  animation: realityAcknowledgementLoaderExit 260ms ease-out forwards;
}

@keyframes realityAcknowledgementLoaderExit {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-36px);
  }
}

@media (max-width: 767px) {
  .reality-journey-scene {
    width: min(100%, var(--interaction-max-width));
    margin-top: 17px;
  }
}

.reality-bridge-button,
.reality-guide-button {
  width: 100%;
  max-width: var(--interaction-max-width);
}

.rating-scale-preview {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-small) * 2));
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}

.rating-scale-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--rating-size-mobile-small) / 2);
  right: calc(var(--rating-size-mobile-small) / 2);
  height: 1px;
  background: var(--color-primary-border-soft);
  transform: translateY(-50%);
}

.reality-rating-guide-page--staged {
  --rating-guide-title-delay: 640ms;
  --rating-guide-title-step: 18ms;
  --rating-guide-copy-delay: 1960ms;
  --rating-guide-instinct-delay: 3000ms;
  --rating-guide-scale-delay: 3640ms;
  --rating-guide-scale-duration: 850ms;
  --rating-guide-demo-delay: 5600ms;
  --rating-guide-final-delay: 8900ms;
}

.reality-rating-guide-page--staged [data-rating-guide-title],
.reality-rating-guide-page--staged [data-rating-guide-copy],
.reality-rating-guide-page--staged [data-rating-guide-instinct],
.reality-rating-guide-page--staged [data-rating-guide-final] {
  opacity: 0;
}

.reality-rating-guide-page--staged .rating-guide-key dt,
.reality-rating-guide-page--staged .rating-guide-key dd {
  opacity: 0;
}

.reality-rating-guide-page--staged .rating-scale-preview::before {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 120ms ease-out,
    clip-path var(--rating-guide-scale-duration) linear;
}

.reality-rating-guide-page--staged .rating-scale-preview.is-scale-line-visible::before {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.rating-scale-preview__line {
  position: absolute;
  top: 50%;
  left: calc(var(--rating-size-mobile-small) / 2);
  right: calc(var(--rating-size-mobile-small) / 2);
  z-index: 0;
  height: 1px;
  background: var(--color-primary-border-soft);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}

.rating-scale-preview > span:not(.rating-thumb) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rating-size-mobile-small);
  height: var(--rating-size-mobile-small);
  min-width: var(--rating-size-mobile-small);
  flex: 0 0 var(--rating-size-mobile-small);
  padding: 0;
  border: 1px solid var(--color-primary-border-soft);
  border-radius: 999px;
  aspect-ratio: 1;
  color: var(--color-text-muted);
  background: var(--color-white);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: var(--font-weight-option-default);
}

.reality-rating-guide-page--staged .rating-scale-preview > span:not(.rating-scale-preview__line):not(.rating-scale-preview__thumb):not(.rating-thumb),
.reality-rating-guide-page--staged .rating-scale-preview .rating-button {
  opacity: 0;
}

.rating-scale-preview > span.is-demo-selected {
  color: var(--color-white);
  border-color: var(--color-brand-purple);
  background: var(--color-selected);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.rating-scale-preview__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  display: block;
  width: var(--rating-size-mobile-small);
  height: var(--rating-size-mobile-small);
  border: 1px solid var(--color-brand-purple);
  border-radius: 999px;
  background: var(--color-surface-disabled);
  box-shadow: none;
  color: transparent;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  flex: none;
  min-width: 0;
}

.rating-scale-preview__thumb.is-visible {
  opacity: 1;
}

.rating-guide-key {
  display: grid;
  grid-template-columns: 2ch max-content;
  column-gap: 5px;
  row-gap: 8px;
  justify-content: center;
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-normal);
}

.rating-guide-key div {
  display: contents;
}

.rating-guide-key dt {
  color: var(--color-primary);
  font-weight: var(--font-weight-figma-bold);
  text-align: right;
}

.rating-guide-key dd {
  margin: 0;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.rating-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 0;
}

.rating-page-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-small) * 2));
  padding: 30px 20px 20px;
}

.rating-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-small) * 2));
}

.rating-row__label {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-normal);
  text-align: center;
}

.rating-buttons {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  touch-action: none;
}

.rating-buttons::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(var(--rating-size-mobile-small) / 2);
  right: calc(var(--rating-size-mobile-small) / 2);
  height: 1px;
  background: var(--color-primary-border-soft);
  transform: translateY(-50%);
}

.rating-button {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rating-size-mobile-small);
  height: var(--rating-size-mobile-small);
  min-width: var(--rating-size-mobile-small);
  flex: 0 0 var(--rating-size-mobile-small);
  padding: 0;
  border: 1px solid var(--color-primary-border-soft);
  border-radius: 999px;
  aspect-ratio: 1;
  color: var(--color-text-muted);
  background: transparent;
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  font-family: var(--font-ui);
  font-size: var(--option-font-size-mobile-small);
  line-height: var(--option-line-height-mobile-small);
  font-weight: var(--font-weight-option-default);
  text-align: center;
  isolation: isolate;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center;
  transition:
    border-color 420ms ease-out,
    box-shadow 420ms ease-out,
    color 420ms ease-out,
    transform 420ms ease-out;
}

.rating-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--color-page-bg);
}

.rating-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0 solid var(--color-brand-purple);
  border-radius: inherit;
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease-out;
}

.rating-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: block;
  width: var(--rating-size-mobile-small);
  height: var(--rating-size-mobile-small);
  border: 1px solid var(--color-brand-purple);
  border-radius: 999px;
  background: var(--color-selected);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  opacity: 0;
  transform: translateY(-50%);
  transition: left 260ms ease;
  pointer-events: none;
}

.rating-thumb.is-pass-moving {
  border-color: var(--color-surface-disabled);
  background: var(--color-surface-disabled);
  box-shadow: 0 0 10px var(--color-input-shadow);
}

.rating-pass-ring {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 5;
  display: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-brand-purple);
  border-radius: 999px;
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.rating-thumb.is-visible {
  opacity: 1;
}

.rating-pass-ring.is-visible {
  opacity: 1;
}

.rating-button__label {
  position: relative;
  z-index: 4;
  pointer-events: none;
  transition:
    color 420ms ease-out,
    font-size 420ms ease-out;
}

.rating-button + .rating-button {
  margin-left: 0;
}

.rating-button:hover,
.rating-button.is-pass-hover,
.rating-button.is-keyboard-hover {
  border-color: var(--color-brand-purple);
  color: var(--color-text-primary);
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
  transition-duration: 0ms;
}

.rating-button.is-pass-hover {
  z-index: 4;
  border-color: var(--color-brand-purple);
  color: var(--color-text-primary) !important;
  background: var(--color-page-bg) !important;
  font-weight: var(--font-weight-option-default);
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
  transform: scale(1);
}

.rating-button:hover::after,
.rating-button.is-pass-hover::after,
.rating-button.is-keyboard-hover::after {
  opacity: 1;
  transition-duration: 0ms;
}

.rating-button.is-pass-hover::before {
  background: var(--color-page-bg) !important;
}

.rating-button:hover .rating-button__label,
.rating-button.is-keyboard-hover .rating-button__label {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-option-default);
  transition-duration: 0ms;
}

.rating-button.is-pass-hover .rating-button__label {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-option-default);
  transition-duration: 0ms;
}

.rating-button:active {
  border-color: var(--color-brand-purple);
  box-shadow: none;
}

.rating-button.is-selected {
  color: var(--color-white);
  background: var(--color-selected);
  border-width: 1px;
  border-color: var(--color-brand-purple);
  box-shadow: none;
  font-weight: var(--font-weight-option-selected);
}

.rating-button.is-selected::before,
.rating-button.is-under-thumb::before {
  background: transparent;
}

.rating-button.is-selected::after {
  opacity: 0;
}

.rating-button.is-selected:hover,
.rating-button.is-selected.is-keyboard-hover,
.rating-button.is-selected.is-keyboard-reselected {
  color: var(--color-white);
  border-width: 1px;
  border-color: var(--color-brand-purple);
  box-shadow: 0 0 15px var(--color-purple-shadow-strong);
}

.rating-button.is-selected:active {
  color: var(--color-white);
  border-width: 1px;
  border-color: var(--color-brand-purple);
  background: var(--color-selected);
  box-shadow: none;
}

.rating-button.is-selected:hover::after,
.rating-button.is-selected.is-keyboard-hover::after {
  opacity: 0;
}

.rating-button.is-selected.is-keyboard-reselected {
  color: var(--color-text-primary);
}

.rating-button.is-selected.is-keyboard-reselected::before {
  background: var(--color-page-bg);
}

.rating-button.is-selected .rating-button__label,
.rating-button.is-selected:hover .rating-button__label,
.rating-button.is-selected.is-keyboard-hover .rating-button__label,
.rating-button.is-selected:active .rating-button__label,
.rating-button.is-under-thumb .rating-button__label {
  color: var(--color-white) !important;
  font-weight: var(--font-weight-option-selected);
}

.rating-button.is-selected.is-keyboard-reselected .rating-button__label {
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-option-default);
}

.rating-button.is-keyboard-reselected {
  animation: ratingKeyboardReselect 520ms cubic-bezier(.42, 0, .18, 1);
}

.rating-button.is-under-thumb {
  color: var(--color-white);
  border-color: var(--color-brand-purple);
}

.focus-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  column-gap: 8px;
  row-gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-normal);
}

.focus-summary li {
  display: contents;
}

.focus-summary__rank {
  text-align: right;
}

.focus-summary__text {
  min-width: 0;
  text-align: left;
}

.focus-set-edit {
  width: 100%;
  max-width: var(--interaction-max-width);
}

.focus-set-page .completion-path {
  width: fit-content;
  max-width: 100%;
}

.focus-set-page .completion-path__title {
  width: 100%;
}

.focus-set-page .stage-list {
  align-items: stretch;
  width: fit-content;
}

.focus-set-page .stage-item {
  justify-content: stretch;
  width: 100%;
}

.focus-set-page .stage-label {
  grid-template-columns: max-content max-content;
  column-gap: 10px;
  width: 100%;
  padding: 3px;
}

.focus-set-page .stage-item.is-active .stage-label {
  width: 100%;
  padding: 4px;
  column-gap: 8px;
  border: 1px solid var(--stage-color);
  border-radius: 5px;
  background: var(--color-white);
}

.focus-set-page .stage-item.is-active .stage-label__number,
.focus-set-page .stage-item.is-active .stage-label__name {
  padding: 0;
  border: 0;
  background: transparent;
}

.completion-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 207px;
}

.completion-path__title {
  margin: 0;
  padding-bottom: 14px;
  color: var(--color-brand-purple);
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-bold);
  text-align: center;
}

.stage-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-font-size-mobile-small);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight-figma-bold);
}

.stage-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 3px 0;
  color: var(--stage-color);
  opacity: 0.5;
}

.stage-item.is-active {
  min-height: 25px;
  padding: 0;
  opacity: 1;
}

.stage-item.is-complete {
  opacity: 1;
}

.stage-item.is-active .stage-label {
  column-gap: 0;
}

.stage-item.is-active .stage-label__number {
  padding: 4px;
  border: 1px solid var(--stage-color);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: var(--color-white);
}

.stage-item.is-active .stage-label__name {
  padding: 4px;
  border: 1px solid var(--stage-color);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--color-white);
}

.stage-item--after-active {
  padding-top: 10px;
  padding-bottom: 3px;
}

.stage-item--before-active {
  padding-top: 3px;
  padding-bottom: 10px;
}

.stage-label {
  display: grid;
  grid-template-columns: 65px 1fr;
  align-items: center;
  column-gap: 10px;
  width: fit-content;
  transform: translateY(1px);
  white-space: nowrap;
}

.stage-label__number,
.stage-label__name {
  display: block;
}

.stage-label__number {
  text-align: right;
}

.stage-label__name {
  text-align: left;
}

.stage-label__name {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stage-label__check {
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  flex: 0 0 auto;
  transform: translateY(-2px);
}

.stage-item.is-active .stage-label__number,
.stage-item.is-active .stage-label__name {
  transform: translateY(1px);
}

.landing-page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.landing-page--intro-pending #landing-greeting,
.landing-page--intro-pending .landing-intro-text span,
.landing-page--intro-pending .landing-title-wrap .quiz-title,
.landing-page--intro-pending .landing-cta,
.landing-page--intro-pending .landing-benefit,
.landing-page--intro-pending .landing-trust {
  opacity: 0;
}

.landing-main {
  width: 100%;
}

.page-header,
.page-content {
  width: 100%;
  padding-right: var(--layout-padding-mobile-small);
  padding-left: var(--layout-padding-mobile-small);
}

.page-content {
  max-width: var(--interaction-max-width);
  margin-right: auto;
  margin-left: auto;
}

.landing-page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--layout-padding-mobile-small);
}

.landing-page-header .quiz-title + .quiz-text {
  margin-top: calc(var(--layout-padding-mobile-small) / 2);
}

.landing-intro-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-padding-mobile-small) / 4);
}

.landing-title-wrap {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.landing-title-letter {
  display: inline-block;
  opacity: 0;
  animation: landingTitleLetterIn 360ms cubic-bezier(.22, .72, .18, 1) forwards;
}

.landing-page-content {
  --landing-fixed-button-floor: min(97dvh, 540px);
  --landing-fixed-system-button-height: var(--system-button-height-mobile-small);
  --landing-fixed-bottom-padding: var(--layout-padding-mobile-small);
  --landing-fixed-top-padding: var(--layout-padding-mobile-small);
  --landing-trust-line-height: calc(var(--trust-text-font-size-mobile-small) * var(--text-line-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.landing-cta {
  max-width: var(--interaction-max-width);
  box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  transform-origin: center center;
  transform: scale(0.95);
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

.landing-page--cta-ready .landing-cta.is-active:not(.is-clicked):not(.is-keyboard-hover) {
  animation: landingCtaGlow 2400ms ease-in-out infinite;
}

.landing-page--cta-ready .landing-cta.is-active:active {
  box-shadow: none !important;
  animation-play-state: paused;
}

.landing-benefits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--landing-benefit-gap-mobile-small);
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-benefit {
  display: flex;
  align-items: center;
  gap: var(--landing-benefit-gap-mobile-small);
  min-height: var(--landing-benefit-line-height-mobile-small);
  font-family: var(--font-body);
  font-size: var(--landing-benefit-font-size-mobile-small);
  line-height: var(--landing-benefit-line-height-mobile-small);
  white-space: nowrap;
}

.landing-benefit__text {
  display: block;
  line-height: var(--landing-benefit-line-height-mobile-small);
  font-weight: var(--font-weight-figma-semibold);
  transform: translateY(1px);
}

.landing-benefit--positive {
  color: var(--color-success);
}

.landing-benefit--notice {
  color: var(--color-warning);
}

.landing-benefit__icon {
  display: block;
  width: var(--landing-benefit-icon-size-mobile-small);
  height: var(--landing-benefit-icon-size-mobile-small);
  flex: 0 0 auto;
  align-self: center;
  color: inherit;
  fill: currentColor;
}

.landing-trust {
  position: fixed;
  z-index: 20;
  top: calc(
    min(
      calc(var(--landing-fixed-button-floor) - var(--landing-fixed-system-button-height)),
      calc(100dvh - var(--landing-fixed-bottom-padding) - var(--landing-fixed-system-button-height) - var(--landing-fixed-top-padding))
    ) + var(--landing-fixed-top-padding) + ((var(--landing-fixed-system-button-height) - var(--landing-trust-line-height)) / 2)
  );
  left: 50%;
  width: 100%;
  max-width: var(--interaction-max-width);
  margin: 0;
  font-size: var(--trust-text-font-size-mobile-small);
  line-height: var(--text-line-height);
  text-align: center;
  transform: translateX(-50%);
}

.assessment-intro-page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.assessment-intro-page--intro-pending .assessment-intro-header .quiz-title,
.assessment-intro-page--intro-pending .assessment-intro-copy > span,
.assessment-intro-page--intro-pending .assessment-diagnosis__title,
.assessment-intro-page--intro-pending .assessment-diagnosis__item {
  opacity: 0;
}

.assessment-intro-main {
  width: 100%;
}

.assessment-intro-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--layout-padding-mobile-small);
}

.assessment-intro-header .quiz-title + .assessment-intro-copy {
  margin-top: var(--layout-padding-mobile-small);
}

.assessment-intro-copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-padding-mobile-small) / 4);
  width: min(100%, calc(100vw - (var(--layout-padding-mobile-small) * 2)));
  max-width: none;
}

.assessment-intro-copy > span {
  display: block;
  width: 100%;
  text-align: center;
}

.assessment-intro-copy .completion-intro-text__word,
.assessment-intro-copy .completion-intro-text__letter {
  display: inline-block;
}

.assessment-diagnosis {
  width: 100%;
  max-width: var(--interaction-max-width);
  margin: calc(var(--layout-padding-mobile-small) * 2) auto 0;
  padding-right: var(--layout-padding-mobile-small);
  padding-left: var(--layout-padding-mobile-small);
}

.assessment-diagnosis__title {
  color: var(--color-primary);
}

.assessment-diagnosis__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin: calc(var(--layout-padding-mobile-small) / 2) auto 0;
  padding: 0;
  list-style: none;
}

.assessment-diagnosis__item {
  display: none;
  align-items: center;
  gap: var(--landing-benefit-gap-mobile-small);
  width: fit-content;
  max-width: 100%;
  min-height: calc(var(--landing-benefit-line-height-mobile-small) + 10px);
  padding: 3px 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--landing-benefit-font-size-mobile-small);
  line-height: var(--landing-benefit-line-height-mobile-small);
  font-weight: var(--font-weight-regular);
  transition:
    border-color 520ms cubic-bezier(.42, 0, .18, 1),
    color 520ms cubic-bezier(.42, 0, .18, 1),
    background-color 520ms cubic-bezier(.42, 0, .18, 1),
    min-height 650ms cubic-bezier(.42, 0, .18, 1),
    padding 650ms cubic-bezier(.42, 0, .18, 1),
    margin 650ms cubic-bezier(.42, 0, .18, 1);
}

.assessment-diagnosis__item.is-visible {
  display: flex;
}

.assessment-diagnosis__item.is-active {
  min-height: calc(var(--landing-benefit-line-height-mobile-small) + 14px);
  padding: 5px 8px;
  margin-top: calc(var(--layout-padding-mobile-small) / 4);
  margin-bottom: calc(var(--layout-padding-mobile-small) / 4);
  border-color: var(--color-success);
  background-color: var(--color-white);
  color: var(--color-success);
  font-weight: var(--font-weight-figma-semibold);
}

.assessment-diagnosis__item.is-completed {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-regular);
}

.assessment-diagnosis__icon {
  display: block;
  width: var(--landing-benefit-icon-size-mobile-small);
  height: var(--landing-benefit-icon-size-mobile-small);
  flex: 0 0 auto;
  align-self: center;
}

.assessment-diagnosis__text {
  display: block;
  line-height: var(--landing-benefit-line-height-mobile-small);
  transform: translateY(1px);
}

@keyframes landingTitleLetterIn {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }

  42% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landingCtaGlow {
  0%,
  100% {
    transform: translateX(-50%) scale(0.95);
    box-shadow: 0 0 10px var(--color-primary-shadow-soft);
  }

  46% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 0 18px var(--color-primary-shadow-strong),
      0 0 34px var(--color-primary-shadow-soft);
  }
}

@media (min-width: 375px) {
  .option-button,
  .system-button {
    font-size: var(--option-font-size-mobile-standard);
    line-height: var(--option-line-height-mobile-standard);
  }

  .option-button {
    height: var(--option-height-mobile-standard);
  }

  .statement-buttons {
    --statement-inset: var(--layout-padding-mobile-standard);
    --statement-icon-size: 20px;
    --statement-padding-block: 14px;
    --statement-line-height: calc(var(--option-line-height-mobile-standard) * 1.1);
  }

  .statement-button {
    height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
    min-height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
    padding:
      var(--statement-padding-block)
      calc(var(--statement-well-width) + var(--statement-inset))
      var(--statement-padding-block)
      var(--statement-inset);
    border-radius: var(--input-radius-mobile-standard);
  }

  .option-button__icon,
  .option-button__counter,
  .option-button__check,
  .system-button__icon {
    width: var(--option-icon-size-mobile-standard);
    height: var(--option-icon-size-mobile-standard);
  }

  .option-button__counter,
  .option-button__check {
    right: 12px;
  }

  .option-button.is-selected.is-removable::after {
    right: 12px;
    width: 19px;
    height: 22px;
  }

  .option-button.is-selected.is-removable::before {
    right: 30px;
    width: 9px;
    height: 22px;
  }

  .option-button__cancel {
    right: 12px;
    width: var(--option-icon-size-mobile-standard);
    height: var(--option-icon-size-mobile-standard);
  }

  .system-button,
  .category-button {
    height: var(--system-button-height-mobile-standard);
  }

  .category-button {
    font-size: var(--option-font-size-mobile-standard);
    line-height: var(--option-line-height-mobile-standard);
  }

  .category-button__icon {
    width: var(--option-icon-size-mobile-standard);
    height: var(--option-icon-size-mobile-standard);
  }

  .quiz-input {
    height: var(--input-height-mobile-standard);
    padding: var(--input-padding-mobile-standard);
    border-radius: var(--input-radius-mobile-standard);
    font-size: var(--option-font-size-mobile-standard);
    line-height: var(--option-line-height-mobile-standard);
  }

  .input-field__check {
    right: 15px;
    width: 18px;
    height: 18px;
  }

  .input-field.is-validated .quiz-input {
    padding-right: 48px;
  }

  .phone-field {
    height: var(--input-height-mobile-standard);
    padding: var(--input-padding-mobile-standard);
    border-radius: var(--input-radius-mobile-standard);
  }

  .phone-code-select,
  .phone-number-input {
    font-size: var(--option-font-size-mobile-standard);
    line-height: var(--option-line-height-mobile-standard);
  }

  .phone-code-select {
    min-width: 82px;
    padding-right: 10px;
  }

  .phone-number-input {
    padding-left: 12px;
    padding-right: 34px;
  }

  .phone-field.is-validated .phone-number-input {
    padding-right: 34px;
  }

  .quiz-title {
    font-size: var(--title-normal-font-size-mobile-standard);
  }

  .quiz-title--big {
    font-size: var(--title-big-font-size-mobile-standard);
    line-height: var(--title-big-line-height-mobile-standard);
  }

  .quiz-title__check {
    width: var(--title-check-size-mobile-standard);
    height: var(--title-check-size-mobile-standard);
  }

  .quiz-text {
    font-size: var(--text-font-size-mobile-standard);
  }

  .reality-bridge-page-top,
  .reality-guide-page-top {
    padding-top: 25px;
  }

  .reality-bridge-button,
  .reality-guide-button {
    max-width: var(--interaction-max-width);
  }

  .rating-scale-preview,
  .rating-row {
    max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-standard) * 2));
  }

  .rating-scale-preview::before,
  .rating-scale-preview__line,
  .rating-buttons::before {
    left: calc(var(--rating-size-mobile-standard) / 2);
    right: calc(var(--rating-size-mobile-standard) / 2);
  }

  .rating-scale-preview > span,
  .rating-scale-preview__thumb,
  .rating-pass-ring,
  .rating-thumb,
  .rating-button {
    width: var(--rating-size-mobile-standard);
    height: var(--rating-size-mobile-standard);
    min-width: var(--rating-size-mobile-standard);
    flex: 0 0 var(--rating-size-mobile-standard);
    font-size: var(--option-font-size-mobile-standard);
    line-height: var(--option-line-height-mobile-standard);
  }

  .rating-guide-key,
  .rating-row__label {
    font-size: var(--text-font-size-mobile-standard);
  }

  .rating-page-top {
    padding: 25px 25px 10px;
  }

  .rating-page-middle {
    max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-standard) * 2));
    gap: 34px;
    padding: 30px 25px 25px;
  }

  .completion-page-top {
    padding: 25px;
  }

  .completion-path {
    width: 227px;
  }

  .focus-summary {
    font-size: var(--text-font-size-mobile-standard);
  }

  .completion-path__title {
    padding-bottom: 15px;
    font-size: var(--text-font-size-mobile-standard);
  }

  .stage-list {
    font-size: var(--text-font-size-mobile-standard);
  }

  .focus-set-page .stage-list {
    width: fit-content;
  }

  .stage-label {
    grid-template-columns: 72px 1fr;
  }

  .focus-set-page .stage-label {
    grid-template-columns: max-content max-content;
  }

  .stage-item {
    min-height: 27px;
    padding: 4px 0;
  }

  .focus-set-page .stage-item {
    padding: 4px 0;
  }

  .focus-set-page .stage-item.is-active {
    padding: 0;
  }

  .stage-item.is-active {
    min-height: 27px;
  }

  .stage-item--after-active {
    padding-top: 12px;
    padding-bottom: 4px;
  }

  .stage-item--before-active {
    padding-top: 4px;
    padding-bottom: 12px;
  }

  .logo-header {
    height: var(--logo-header-height-mobile-standard);
    background-image: url("../assets/graphics/header-bg-mobile-medium.png");
  }

  .logo-header__logo {
    width: var(--logo-primary-width-mobile-standard);
    height: var(--logo-primary-height-mobile-standard);
  }

  .logo-header__logo--intro-mark {
    width: var(--logo-mark-width-mobile-standard);
    height: var(--logo-mark-height-mobile-standard);
  }

  .mark-header {
    height: var(--mark-header-height-mobile-standard);
    background-image: url("../assets/graphics/header-bg-mobile-medium.png");
  }

  .mark-header__logo {
    width: var(--logo-mark-width-mobile-standard);
    height: var(--logo-mark-height-mobile-standard);
  }

  .mark-header__logo--collapse {
    width: var(--logo-primary-width-mobile-standard);
    height: var(--logo-primary-height-mobile-standard);
  }

  .mark-header--email-collapse-ready {
    --focus-header-start-height: var(--logo-header-height-mobile-standard);
    --focus-header-end-height: var(--mark-header-height-mobile-standard);
  }

  .email-capture-main {
    --button-floor: min(97dvh, 725px);
    --email-system-button-height: var(--system-button-height-mobile-standard);
    --email-footer-padding: var(--layout-padding-mobile-standard);
    --email-field-height: var(--input-height-mobile-standard);
    --email-field-anchor: 155px;
  }

  .module-header--logo-transition {
    --focus-header-start-height: var(--logo-header-height-mobile-standard);
    --focus-header-end-height: var(--mark-header-height-mobile-standard);
  }

  .mark-header--completion-logo-transition {
    --completion-header-start-height: var(--mark-header-height-mobile-standard);
    --completion-header-end-height: var(--logo-header-height-mobile-standard);
  }

  .mark-header--completion-logo-transition .mark-header__logo {
    width: var(--logo-primary-width-mobile-standard);
    height: var(--logo-primary-height-mobile-standard);
  }

  .mark-header--completion-logo-transition .mark-header__logo[src$="mf-logo-mark.svg"] {
    width: var(--logo-mark-width-mobile-standard);
    height: var(--logo-mark-height-mobile-standard);
  }

  .module-header__step,
  .module-header__name {
    font-size: var(--module-header-label-font-size-mobile-standard);
  }

  .module-header__step {
    left: var(--layout-padding-mobile-standard);
  }

  .module-header__name {
    right: var(--layout-padding-mobile-standard);
  }

  .page-header,
  .page-content {
    padding-right: var(--layout-padding-mobile-standard);
    padding-left: var(--layout-padding-mobile-standard);
  }

  .option-page-top {
    padding: 25px 25px 10px;
  }

  .option-page-middle {
    gap: 12px;
    padding: 25px;
  }

  .option-page-bottom:not(.email-capture-bottom):not(.focus-page-bottom):not(.system-page-bottom-fixed) {
    padding: 25px;
  }

  .landing-page-content {
    --landing-fixed-button-floor: min(97dvh, 725px);
    --landing-fixed-system-button-height: var(--system-button-height-mobile-standard);
    --landing-fixed-bottom-padding: var(--layout-padding-mobile-standard);
    --landing-fixed-top-padding: var(--layout-padding-mobile-standard);
  }

  .landing-page-header .quiz-title + .quiz-text {
    margin-top: calc(var(--layout-padding-mobile-standard) / 2);
  }

  .landing-intro-text {
    gap: calc(var(--layout-padding-mobile-standard) / 4);
  }

  .assessment-intro-header {
    padding-top: var(--layout-padding-mobile-standard);
  }

  .assessment-intro-header .quiz-title + .assessment-intro-copy {
    margin-top: var(--layout-padding-mobile-standard);
  }

  .assessment-intro-copy {
    gap: calc(var(--layout-padding-mobile-standard) / 4);
    width: min(100%, calc(100vw - (var(--layout-padding-mobile-standard) * 2)));
  }

  .assessment-diagnosis {
    margin-top: calc(var(--layout-padding-mobile-standard) * 2);
    padding-right: var(--layout-padding-mobile-standard);
    padding-left: var(--layout-padding-mobile-standard);
  }

  .assessment-diagnosis__list {
    gap: 0;
    margin-top: calc(var(--layout-padding-mobile-standard) / 2);
  }

  .assessment-diagnosis__item {
    min-height: calc(var(--landing-benefit-line-height-mobile-small) + 10px);
    padding: 3px 9px;
  }

  .assessment-diagnosis__item.is-active {
    min-height: calc(var(--landing-benefit-line-height-mobile-small) + 16px);
    padding: 6px 9px;
    margin-top: calc(var(--layout-padding-mobile-standard) / 4);
    margin-bottom: calc(var(--layout-padding-mobile-standard) / 4);
  }

  .email-capture-bottom,
  .focus-page-bottom,
  .system-page-bottom-fixed {
    --fixed-button-floor: min(97dvh, 725px);
    --fixed-system-button-height: var(--system-button-height-mobile-standard);
    --fixed-button-bottom-padding: var(--layout-padding-mobile-standard);
    --fixed-button-top-padding: var(--layout-padding-mobile-standard);
    --fixed-button-hint-gap: calc(var(--layout-padding-mobile-standard) / 2);
  }

  .focus-main {
    --button-stage-height: min(100dvh, 747.423px);
    --button-floor: min(97dvh, 725px);
    --button-header-offset: calc(var(--mark-header-height-mobile-standard) + var(--header-progress-height-mobile));
    --button-footer-padding: var(--layout-padding-mobile-standard);
    --focus-system-button-height: var(--system-button-height-mobile-standard);
  }

  .focus-refinement-gap {
    height: 8px;
  }
}

@media (min-width: 768px) {
  .option-button,
  .system-button {
    font-size: var(--option-font-size-tablet);
    line-height: var(--option-line-height-tablet);
  }

  .option-button {
    height: var(--option-height-tablet);
  }

  .statement-buttons {
    --statement-inset: var(--layout-padding-tablet);
    --statement-icon-size: 22px;
    --statement-padding-block: 17px;
    --statement-line-height: calc(var(--option-line-height-tablet) * 1.1);
  }

  .statement-button {
    height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
    min-height: calc((var(--statement-line-height) * 2) + (var(--statement-padding-block) * 2));
    padding:
      var(--statement-padding-block)
      calc(var(--statement-well-width) + var(--statement-inset))
      var(--statement-padding-block)
      var(--statement-inset);
    border-radius: var(--input-radius-tablet);
  }

  .option-button__icon,
  .option-button__counter,
  .option-button__check,
  .system-button__icon {
    width: var(--option-icon-size-tablet);
    height: var(--option-icon-size-tablet);
  }

  .option-button__counter,
  .option-button__check {
    right: 15px;
  }

  .option-button.is-selected.is-removable::after {
    right: 15px;
    width: 21px;
    height: 24px;
  }

  .option-button.is-selected.is-removable::before {
    right: 35px;
    width: 10px;
    height: 24px;
  }

  .option-button__cancel {
    right: 15px;
    width: var(--option-icon-size-tablet);
    height: var(--option-icon-size-tablet);
  }

  .system-button,
  .category-button {
    height: var(--system-button-height-tablet);
  }

  .category-button {
    font-size: var(--option-font-size-tablet);
    line-height: var(--option-line-height-tablet);
  }

  .category-button__icon {
    width: var(--option-icon-size-tablet);
    height: var(--option-icon-size-tablet);
  }

  .quiz-input {
    height: var(--input-height-tablet);
    padding: var(--input-padding-tablet);
    border-radius: var(--input-radius-tablet);
    font-size: var(--option-font-size-tablet);
    line-height: var(--option-line-height-tablet);
  }

  .input-field__check {
    right: 20px;
    width: 20px;
    height: 20px;
  }

  .input-field.is-validated .quiz-input {
    padding-right: 56px;
  }

  .phone-field {
    height: var(--input-height-tablet);
    padding: var(--input-padding-tablet);
    border-radius: var(--input-radius-tablet);
  }

  .phone-code-select,
  .phone-number-input {
    font-size: var(--option-font-size-tablet);
    line-height: var(--option-line-height-tablet);
  }

  .phone-code-select {
    min-width: 96px;
    padding-right: 12px;
  }

  .phone-number-input {
    padding-left: 14px;
    padding-right: 38px;
  }

  .phone-field.is-validated .phone-number-input {
    padding-right: 38px;
  }

  .quiz-title {
    font-size: var(--title-normal-font-size-tablet);
  }

  .quiz-title--big {
    font-size: var(--title-big-font-size-tablet);
    line-height: var(--title-line-height);
  }

  .quiz-title__check {
    width: var(--title-check-size-tablet);
    height: var(--title-check-size-tablet);
  }

  .quiz-text {
    font-size: var(--text-font-size-tablet);
  }

  .page-middle,
  .page-bottom {
    max-width: var(--interaction-max-width-tablet);
  }

  .completion-page-top {
    padding: 30px;
  }

  .focus-summary {
    font-size: var(--text-font-size-tablet);
  }

  .focus-set-edit {
    max-width: var(--interaction-max-width-tablet);
  }

  .completion-path__title {
    padding-bottom: 16px;
    font-size: var(--text-font-size-tablet);
  }

  .stage-list {
    font-size: var(--text-font-size-tablet);
  }

  .focus-set-page .stage-list {
    width: fit-content;
  }

  .stage-label {
    grid-template-columns: 82px 1fr;
  }

  .focus-set-page .stage-label {
    grid-template-columns: max-content max-content;
  }

  .stage-item {
    padding: 5px 0;
  }

  .focus-set-page .stage-item {
    padding: 4px 0;
  }

  .stage-item.is-active {
    padding: 0;
  }

  .stage-item.is-active .stage-label__number {
    padding: 5px 5px 5px 10px;
  }

  .stage-item.is-active .stage-label__name {
    padding: 5px 10px 5px 5px;
  }

  .stage-item--after-active {
    padding-top: 12px;
    padding-bottom: 4px;
  }

  .stage-item--before-active {
    padding-top: 4px;
    padding-bottom: 12px;
  }

  .logo-header {
    height: var(--logo-header-height-tablet);
    background-image: url("../assets/graphics/header-bg-tablet.png");
  }

  .logo-header__logo {
    width: var(--logo-primary-width-tablet);
    height: var(--logo-primary-height-tablet);
  }

  .logo-header__logo--intro-mark {
    width: var(--logo-mark-width-tablet);
    height: var(--logo-mark-height-tablet);
  }

  .mark-header {
    height: var(--mark-header-height-tablet);
    background-image: url("../assets/graphics/header-bg-tablet.png");
  }

  .mark-header__logo {
    width: var(--logo-mark-width-tablet);
    height: var(--logo-mark-height-tablet);
  }

  .mark-header__logo--collapse {
    width: var(--logo-primary-width-tablet);
    height: var(--logo-primary-height-tablet);
  }

  .mark-header--email-collapse-ready {
    --focus-header-start-height: var(--logo-header-height-tablet);
    --focus-header-end-height: var(--mark-header-height-tablet);
  }

  .email-capture-main {
    --button-floor: min(97dvh, 765px);
    --email-system-button-height: var(--system-button-height-tablet);
    --email-footer-padding: var(--layout-padding-tablet);
    --email-field-height: var(--input-height-tablet);
    --email-field-anchor: 170px;
  }

  .module-header--logo-transition {
    --focus-header-start-height: var(--logo-header-height-tablet);
    --focus-header-end-height: var(--mark-header-height-tablet);
  }

  .mark-header--completion-logo-transition {
    --completion-header-start-height: var(--mark-header-height-tablet);
    --completion-header-end-height: var(--logo-header-height-tablet);
  }

  .mark-header--completion-logo-transition .mark-header__logo {
    width: var(--logo-primary-width-tablet);
    height: var(--logo-primary-height-tablet);
  }

  .mark-header--completion-logo-transition .mark-header__logo[src$="mf-logo-mark.svg"] {
    width: var(--logo-mark-width-tablet);
    height: var(--logo-mark-height-tablet);
  }

  .header-progress {
    height: var(--header-progress-height-tablet);
  }

  .module-header__step,
  .module-header__name {
    font-size: var(--module-header-label-font-size-tablet);
  }

  .module-header__step {
    left: var(--layout-padding-tablet);
  }

  .module-header__name {
    right: var(--layout-padding-tablet);
  }

  .page-header,
  .page-content {
    padding-right: var(--layout-padding-tablet);
    padding-left: var(--layout-padding-tablet);
  }

  .page-content {
    max-width: var(--interaction-max-width-tablet);
  }

  .option-page-top {
    padding: 30px 30px 15px;
  }

  .option-page-middle {
    gap: 12px;
    padding: 30px;
  }

  .option-page-bottom:not(.email-capture-bottom):not(.focus-page-bottom):not(.system-page-bottom-fixed) {
    padding: 30px;
  }

  .landing-page-content {
    --landing-fixed-button-floor: min(97dvh, 765px);
    --landing-fixed-system-button-height: var(--system-button-height-tablet);
    --landing-fixed-bottom-padding: var(--layout-padding-tablet);
    --landing-fixed-top-padding: var(--layout-padding-tablet);
  }

  .landing-page-header .quiz-title + .quiz-text {
    margin-top: calc(var(--layout-padding-tablet) / 2);
  }

  .landing-intro-text {
    gap: calc(var(--layout-padding-tablet) / 4);
  }

  .assessment-intro-header {
    padding-top: var(--layout-padding-tablet);
  }

  .assessment-intro-header .quiz-title + .assessment-intro-copy {
    margin-top: var(--layout-padding-tablet);
  }

  .assessment-intro-copy {
    gap: calc(var(--layout-padding-tablet) / 4);
    width: min(100%, calc(100vw - (var(--layout-padding-tablet) * 2)));
  }

  .assessment-diagnosis {
    max-width: var(--interaction-max-width-tablet);
    margin-top: calc(var(--layout-padding-tablet) * 2);
    padding-right: var(--layout-padding-tablet);
    padding-left: var(--layout-padding-tablet);
  }

  .assessment-diagnosis__list {
    gap: 0;
    margin-top: calc(var(--layout-padding-tablet) / 2);
  }

  .assessment-diagnosis__item {
    min-height: calc(var(--landing-benefit-line-height-mobile-small) + 10px);
    padding: 3px 10px;
  }

  .assessment-diagnosis__item.is-active {
    min-height: calc(var(--landing-benefit-line-height-mobile-small) + 18px);
    padding: 7px 10px;
    margin-top: calc(var(--layout-padding-tablet) / 4);
    margin-bottom: calc(var(--layout-padding-tablet) / 4);
  }

  .email-capture-bottom,
  .focus-page-bottom,
  .system-page-bottom-fixed {
    --fixed-button-floor: min(97dvh, 765px);
    --fixed-system-button-height: var(--system-button-height-tablet);
    --fixed-button-bottom-padding: var(--layout-padding-tablet);
    --fixed-button-top-padding: var(--layout-padding-tablet);
    --fixed-button-hint-gap: calc(var(--layout-padding-tablet) / 2);
  }

  .focus-main {
    --button-stage-height: min(100dvh, 747.423px);
    --button-floor: min(97dvh, 765px);
    --button-header-offset: calc(50px + var(--header-progress-height-tablet));
    --button-footer-padding: var(--layout-padding-tablet);
    --focus-system-button-height: var(--system-button-height-tablet);
  }

  .email-capture-bottom,
  .focus-page-bottom,
  .system-page-bottom-fixed {
    max-width: calc(var(--interaction-max-width-tablet) + (var(--layout-padding-tablet) * 2));
  }

  .email-capture-bottom .system-button,
  .focus-page-bottom .system-button,
  .system-page-bottom-fixed .system-button {
    width: min(100%, var(--interaction-max-width-tablet));
  }

  .focus-refinement-gap {
    height: 10px;
  }

  .landing-cta {
    max-width: var(--interaction-max-width-tablet);
  }

  .reality-bridge-page-top,
  .reality-guide-page-top {
    padding-top: 30px;
  }

  .reality-bridge-button,
  .reality-guide-button {
    max-width: var(--interaction-max-width-tablet);
  }

  .rating-scale-preview,
  .rating-row {
    max-width: calc(var(--interaction-max-width-tablet) + (var(--layout-padding-tablet) * 2));
  }

  .rating-scale-preview::before,
  .rating-scale-preview__line,
  .rating-buttons::before {
    left: calc(var(--rating-size-tablet) / 2);
    right: calc(var(--rating-size-tablet) / 2);
  }

  .rating-scale-preview > span,
  .rating-scale-preview__thumb,
  .rating-pass-ring,
  .rating-thumb,
  .rating-button {
    width: var(--rating-size-tablet);
    height: var(--rating-size-tablet);
    min-width: var(--rating-size-tablet);
    flex: 0 0 var(--rating-size-tablet);
    font-size: var(--option-font-size-tablet);
    line-height: var(--option-line-height-tablet);
  }

  .rating-guide-key,
  .rating-row__label {
    font-size: var(--text-font-size-tablet);
  }

  .rating-page-top {
    padding: 30px 30px 15px;
  }

  .rating-page-middle {
    max-width: calc(var(--interaction-max-width-tablet) + (var(--layout-padding-tablet) * 2));
    gap: 42px;
    padding: 35px 30px 30px;
  }

  .rating-page-middle + .option-page-bottom {
    max-width: calc(var(--interaction-max-width-tablet) + (var(--layout-padding-tablet) * 2));
  }
}

.focus-set-edit {
  width: 100%;
  max-width: var(--interaction-max-width);
  text-decoration: none;
}

.focus-set-page .completion-path {
  width: fit-content;
  max-width: 100%;
}

.focus-set-page .completion-path__title {
  width: 100%;
}

.stage-list--clarity,
.focus-set-page .stage-list {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0;
  align-items: center;
  width: max-content;
}

.stage-list--clarity .stage-item,
.focus-set-page .stage-item {
  display: contents;
  width: auto;
  padding: 3px 0;
  opacity: 0.5;
}

.stage-list--clarity .stage-item.is-active,
.focus-set-page .stage-item.is-active {
  padding: 0;
  opacity: 1;
}

.stage-list--clarity .stage-item.is-complete,
.focus-set-page .stage-item.is-complete {
  opacity: 1;
}

.stage-list--clarity .stage-label,
.focus-set-page .stage-label {
  display: contents;
  padding: 0;
}

.stage-list--clarity .stage-label__number,
.stage-list--clarity .stage-label__name,
.focus-set-page .stage-label__number,
.focus-set-page .stage-label__name {
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 3px;
  border: 0;
  background: transparent;
  opacity: 0.5;
  transform: translateY(1px);
}

.stage-list--clarity .stage-item.is-complete .stage-label__number,
.stage-list--clarity .stage-item.is-complete .stage-label__name,
.stage-list--clarity .stage-item.is-active .stage-label__number,
.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-item.is-complete .stage-label__number,
.focus-set-page .stage-item.is-complete .stage-label__name,
.focus-set-page .stage-item.is-active .stage-label__number,
.focus-set-page .stage-item.is-active .stage-label__name {
  opacity: 1;
}

.stage-list--clarity .stage-label__number,
.focus-set-page .stage-label__number {
  justify-content: flex-end;
  text-align: right;
}

.stage-list--clarity .stage-label__name,
.focus-set-page .stage-label__name {
  justify-content: flex-start;
  text-align: left;
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-item.is-active .stage-label__number,
.focus-set-page .stage-item.is-active .stage-label__name {
  padding: 4px;
  border-top: 1px solid var(--stage-color);
  border-bottom: 1px solid var(--stage-color);
  background: var(--color-white);
  transform: translateY(1px);
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page .stage-item.is-active .stage-label__number {
  padding-left: 4px;
}

.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-item.is-active .stage-label__name {
  padding-right: 4px;
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page .stage-item.is-active .stage-label__number {
  border-left: 1px solid var(--stage-color);
  border-right: 0;
  border-radius: 5px 0 0 5px;
}

.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-item.is-active .stage-label__name {
  border-right: 1px solid var(--stage-color);
  border-left: 0;
  border-radius: 0 5px 5px 0;
}

.stage-list--clarity .stage-item--before-active,
.focus-set-page .stage-item--before-active {
  padding: 0;
}

.stage-list--clarity .stage-item--after-active,
.focus-set-page .stage-item--after-active {
  padding: 0;
}

.stage-list--clarity .stage-item--before-active .stage-label__number,
.stage-list--clarity .stage-item--before-active .stage-label__name,
.focus-set-page .stage-item--before-active .stage-label__number,
.focus-set-page .stage-item--before-active .stage-label__name {
  padding-bottom: 10px;
}

.stage-list--clarity .stage-item--after-active .stage-label__number,
.stage-list--clarity .stage-item--after-active .stage-label__name,
.focus-set-page .stage-item--after-active .stage-label__number,
.focus-set-page .stage-item--after-active .stage-label__name {
  padding-top: 10px;
}

@media (min-width: 375px) {
  .stage-list--clarity .stage-item,
  .focus-set-page .stage-item {
    padding: 0;
  }

  .stage-list--clarity .stage-item.is-active,
  .focus-set-page .stage-item.is-active {
    padding: 0;
  }

  .stage-list--clarity .stage-label__number,
  .stage-list--clarity .stage-label__name,
  .focus-set-page .stage-label__number,
  .focus-set-page .stage-label__name {
    padding: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__number,
  .stage-list--clarity .stage-item.is-active .stage-label__name,
  .focus-set-page .stage-item.is-active .stage-label__number,
  .focus-set-page .stage-item.is-active .stage-label__name {
    padding: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__number,
  .focus-set-page .stage-item.is-active .stage-label__number {
    padding-left: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__name,
  .focus-set-page .stage-item.is-active .stage-label__name {
    padding-right: 4px;
  }

  .stage-list--clarity .stage-item--before-active .stage-label__number,
  .stage-list--clarity .stage-item--before-active .stage-label__name,
  .focus-set-page .stage-item--before-active .stage-label__number,
  .focus-set-page .stage-item--before-active .stage-label__name {
    padding-bottom: 12px;
  }

  .stage-list--clarity .stage-item--after-active .stage-label__number,
  .stage-list--clarity .stage-item--after-active .stage-label__name,
  .focus-set-page .stage-item--after-active .stage-label__number,
  .focus-set-page .stage-item--after-active .stage-label__name {
    padding-top: 12px;
  }
}

@media (min-width: 768px) {
  .focus-set-edit {
    max-width: var(--interaction-max-width-tablet);
  }

  .stage-list--clarity .stage-item,
  .focus-set-page .stage-item {
    padding: 0;
  }

  .stage-list--clarity .stage-item.is-active,
  .focus-set-page .stage-item.is-active {
    padding: 0;
  }

  .stage-list--clarity .stage-label__number,
  .stage-list--clarity .stage-label__name,
  .focus-set-page .stage-label__number,
  .focus-set-page .stage-label__name {
    padding: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__number,
  .stage-list--clarity .stage-item.is-active .stage-label__name,
  .focus-set-page .stage-item.is-active .stage-label__number,
  .focus-set-page .stage-item.is-active .stage-label__name {
    padding: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__number,
  .focus-set-page .stage-item.is-active .stage-label__number {
    padding-left: 4px;
  }

  .stage-list--clarity .stage-item.is-active .stage-label__name,
  .focus-set-page .stage-item.is-active .stage-label__name {
    padding-right: 4px;
  }

  .stage-list--clarity .stage-item--before-active .stage-label__number,
  .stage-list--clarity .stage-item--before-active .stage-label__name,
  .focus-set-page .stage-item--before-active .stage-label__number,
  .focus-set-page .stage-item--before-active .stage-label__name {
    padding-bottom: 12px;
  }

  .stage-list--clarity .stage-item--after-active .stage-label__number,
  .stage-list--clarity .stage-item--after-active .stage-label__name,
  .focus-set-page .stage-item--after-active .stage-label__number,
  .focus-set-page .stage-item--after-active .stage-label__name {
    padding-top: 12px;
  }
}

/* Onboarding completion staged reveal: kept last so the base stage-list rules cannot leak in early. */
.completion-page--staged {
  --completion-onboarding-start: 720ms;
  --completion-completed-start: 1220ms;
  --completion-check-start-delay: 1420ms;
  --completion-check-finish-delay: 1690ms;
  --completion-check-circle-delay: 2140ms;
  --completion-intro-delay: 2760ms;
  --completion-path-delay: 9900ms;
  --completion-stage-start: 10320ms;
  --completion-stage-step: 92ms;
  --completion-active-delay: 11500ms;
  --completion-loader-sequence-duration: 13784ms;
  --completion-loader-duration: 13024ms;
  --completion-loader-fill-duration: var(--completion-loader-duration);
  --completion-loader-eat-duration: 9117ms;
  --completion-loader-pacman-delay: 3907ms;
  --stage-rest-padding: 4px;
}

.completion-page--staged .completion-title__space {
  opacity: 0;
  animation: completionRevealSoft 80ms linear var(--completion-completed-start) forwards;
}

.completion-page--staged .completion-title__onboarding-letter,
.completion-page--staged .completion-title__completed-letter {
  opacity: 0;
}

.completion-page--staged .completion-title__onboarding-letter {
  animation: completionFlickerIn 760ms linear var(--completion-onboarding-start) forwards;
}

.completion-page--staged .completion-title__completed-letter {
  animation: completionTypeLetter 300ms cubic-bezier(.12, 0, .08, 1) calc(var(--completion-completed-start) + (var(--letter-index) * 48ms)) forwards;
}

.completion-intro-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-padding-mobile-small) / 4);
}

.completion-intro-text__sentence {
  display: block;
}

.completion-page--staged .completion-intro-text {
  opacity: 1;
  transform: none;
}

.completion-page--staged .completion-path__title {
  opacity: 0;
  transform: translateY(4px);
}

.completion-page--staged .completion-intro-text__sentence {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.completion-page--staged:not(.completion-page--typing-ready) .completion-intro-text__sentence {
  color: transparent;
}

.completion-page--staged:not(.focus-set-page--staged):not(.situation-defined-page--staged):not(.reality-defined-page--staged):not(.reality-acknowledgement-page--staged):not(.reality-rating-guide-page--staged):not(.completion-page--typing-ready) .completion-path,
.completion-page--staged:not(.focus-set-page--staged):not(.situation-defined-page--staged):not(.reality-defined-page--staged):not(.reality-acknowledgement-page--staged):not(.reality-rating-guide-page--staged):not(.completion-page--typing-ready) .completion-path__title,
.completion-page--staged:not(.focus-set-page--staged):not(.situation-defined-page--staged):not(.reality-defined-page--staged):not(.reality-acknowledgement-page--staged):not(.reality-rating-guide-page--staged):not(.completion-page--typing-ready) .stage-list--clarity .stage-label__number,
.completion-page--staged:not(.focus-set-page--staged):not(.situation-defined-page--staged):not(.reality-defined-page--staged):not(.reality-acknowledgement-page--staged):not(.reality-rating-guide-page--staged):not(.completion-page--typing-ready) .stage-list--clarity .stage-label__name {
  visibility: hidden;
}

.completion-page--staged.completion-page--typing-ready .completion-path,
.completion-page--staged.completion-page--typing-ready .completion-path__title,
.completion-page--staged.completion-page--typing-ready .stage-list--clarity .stage-label__number,
.completion-page--staged.completion-page--typing-ready .stage-list--clarity .stage-label__name {
  visibility: visible;
}

.completion-intro-text__letter {
  display: inline-block;
  color: var(--color-text);
  opacity: 0;
  animation: completionTypeLetter 320ms cubic-bezier(.12, 0, .08, 1) forwards;
}

.completion-intro-text__word {
  display: inline-block;
  white-space: nowrap;
}

.completion-page--staged .completion-path__title {
  animation: completionRevealUp 420ms cubic-bezier(.16, 1, .3, 1) var(--completion-path-delay) forwards;
}

.completion-page--staged .stage-list--clarity .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-label__name {
  opacity: 0;
  transform: translateY(5px);
  padding: var(--stage-rest-padding, 3px);
  border: 0;
  background: transparent;
  animation: completionStageWaveReveal 520ms cubic-bezier(.16, 1, .3, 1) calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))) forwards;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  opacity: 0;
  padding: 4px 6px;
  border-color: transparent;
  background-color: transparent;
  animation-name: completionStageWaveRevealActive, completionStagePulseFrame;
  animation-duration: 520ms, 4400ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out;
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__name {
  opacity: 0;
  padding-right: var(--stage-rest-padding, 3px);
  padding-bottom: var(--stage-rest-padding, 3px);
  padding-left: var(--stage-rest-padding, 3px);
  padding-top: var(--stage-active-gap, 10px);
  animation: completionStageWaveReveal 520ms cubic-bezier(.16, 1, .3, 1) calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))) forwards;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number {
  box-sizing: content-box;
  justify-self: end;
  width: auto;
  min-width: max-content;
  padding: 4px !important;
  border-top-width: 1.5px;
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  box-sizing: content-box;
  justify-self: start;
  width: auto;
  min-width: max-content;
  padding: 4px !important;
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity {
  display: flex;
  grid-template-columns: none;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.completion-page--staged .stage-list--clarity .stage-item {
  display: flex;
  justify-content: center;
  width: fit-content;
  padding: 3px 0;
  opacity: 1;
}

.completion-page--staged .stage-list--clarity .stage-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 0;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label {
  box-sizing: border-box;
  padding: 4px;
  border: 1.5px solid var(--stage-color);
  border-radius: 5px;
  background-color: var(--color-white);
  transform: translateY(1px);
  animation: completionStagePulseFrame 4400ms ease-in-out calc(var(--completion-stage-start) + 120ms) infinite both;
}

.completion-page--staged .stage-list--clarity .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-label__name {
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  animation-name: completionStageWaveRevealActive;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)));
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.completion-page--staged .stage-list--clarity .stage-item--after-active {
  padding-top: var(--stage-active-gap, 10px);
}

.completion-page--staged .stage-list--clarity {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0;
  align-items: center;
  width: max-content;
}

.completion-page--staged .stage-list--clarity .stage-item {
  display: contents;
  opacity: 1;
}

.completion-page--staged .stage-list--clarity .stage-label {
  display: contents;
  padding: 0;
  transform: none;
}

.completion-page--staged .stage-list--clarity .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-label__name {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--stage-rest-padding, 3px);
  border: 0;
  background: transparent;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity .stage-label__number {
  justify-content: flex-end;
  text-align: right;
}

.completion-page--staged .stage-list--clarity .stage-label__name {
  justify-content: flex-start;
  text-align: left;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label {
  padding: 0;
  border: 0;
  background: transparent;
  animation: none;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  opacity: 0;
  box-sizing: border-box;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  background-color: transparent;
  transform: translateY(1px);
  animation-name: completionStageWaveRevealActive, completionStagePulseFrame;
  animation-duration: 520ms, 4400ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out;
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px;
  border-left: 1.5px solid transparent;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  animation-name: completionStageWaveRevealActive, completionStagePulseFrame, completionStageGrowNumber;
  animation-duration: 520ms, 4400ms, 360ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out, cubic-bezier(.2, .8, .2, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms);
  animation-fill-mode: forwards, both, forwards;
  animation-iteration-count: 1, infinite, 1;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px;
  border-right: 1.5px solid transparent;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  animation-name: completionStageWaveRevealActive, completionStagePulseFrame, completionStageGrowName;
  animation-duration: 520ms, 4400ms, 360ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out, cubic-bezier(.2, .8, .2, 1);
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms);
  animation-fill-mode: forwards, both, forwards;
  animation-iteration-count: 1, infinite, 1;
}

.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__name {
  padding-top: var(--stage-active-gap, 10px) !important;
}

.completion-page--staged .stage-list--clarity .stage-item--before-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--before-active .stage-label__name {
  padding-bottom: var(--stage-active-gap, 10px) !important;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number {
  padding: 4px;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  padding: 4px;
  transform: translateY(1px);
}

@media (min-width: 375px) {
  .completion-intro-text {
    gap: calc(var(--layout-padding-mobile-standard) / 4);
  }
}

@media (min-width: 768px) {
  .completion-intro-text {
    gap: calc(var(--layout-padding-tablet) / 4);
  }
}

@keyframes completionRevealSoft {
  to {
    opacity: 1;
  }
}

@keyframes completionFlickerIn {
  0%,
  12%,
  31% {
    opacity: 0;
  }

  15%,
  34% {
    opacity: 0.45;
  }

  46% {
    opacity: 0;
  }

  62% {
    opacity: 0.82;
  }

  72%,
  100% {
    opacity: 1;
  }
}

@keyframes completionStageWaveReveal {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  70% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.5;
    transform: translateY(1px);
  }
}

@keyframes completionStageWaveRevealActive {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(1px);
  }
}

@keyframes completionStagePulseFrame {
  0% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }

  28% {
    border-color: transparent;
    background-color: transparent;
  }

  52% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }

  76% {
    border-color: transparent;
    background-color: transparent;
  }

  100% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }
}

@keyframes completionStageGrowNumber {
  0% {
    padding: 4px;
  }

  100% {
    padding: 4px;
  }
}

@keyframes completionStageGrowName {
  0% {
    padding: 4px;
  }

  100% {
    padding: 4px;
  }
}

/* Final onboarding-completed stage geometry.
   This intentionally sits last so older experimental rules cannot override the two-column spacing. */
.completion-page--staged .stage-list--clarity {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0;
  align-items: center;
  justify-content: center;
  width: max-content;
}

.completion-page--staged .stage-list--clarity .stage-item,
.completion-page--staged .stage-list--clarity .stage-label {
  display: contents;
}

.completion-page--staged .stage-list--clarity .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-label__name {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--stage-rest-padding, 4px);
  border: 0;
  background: transparent;
  transform: translateY(1px);
}

.completion-page--staged .stage-list--clarity .stage-label__number {
  justify-content: flex-end;
  text-align: right;
}

.completion-page--staged .stage-list--clarity .stage-label__name {
  justify-content: flex-start;
  text-align: left;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  box-sizing: content-box;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  background-color: transparent;
  transform: translateY(1px);
  animation-name: completionStageWaveRevealActive, completionStagePulseFrame;
  animation-duration: 520ms, 4400ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out;
  animation-delay: calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step))), calc(var(--completion-stage-start) + (var(--stage-index, 0) * var(--completion-stage-step)) + 120ms);
  animation-fill-mode: forwards, both;
  animation-iteration-count: 1, infinite;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number {
  border-left: 1.5px solid transparent;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  padding: 4px !important;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  border-right: 1.5px solid transparent;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  padding: 4px !important;
}

.completion-page--staged .stage-list--clarity .stage-item.is-active .stage-label {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  animation: none !important;
}

.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--after-active .stage-label__name {
  padding-top: var(--stage-rest-padding, 4px) !important;
}

.completion-page--staged .stage-list--clarity .stage-item--before-active .stage-label__number,
.completion-page--staged .stage-list--clarity .stage-item--before-active .stage-label__name {
  padding-bottom: var(--stage-rest-padding, 4px) !important;
}

/* Focus-set staged handoff. This mirrors the completed-page rhythm without changing the static layout. */
.focus-set-page--staged {
  --focus-set-module-start: var(--completion-onboarding-start, 720ms);
  --focus-set-set-start: var(--completion-completed-start, 1220ms);
  --focus-set-check-start-delay: 1740ms;
  --focus-set-check-finish-delay: 2010ms;
  --focus-set-check-circle-delay: 2460ms;
  --focus-set-summary-delay: 3080ms;
  --focus-set-summary-step: 72ms;
  --focus-set-edit-delay: 3280ms;
  --focus-set-path-delay: 3900ms;
  --focus-set-stage-delay: 4240ms;
  --focus-set-stage-step: 78ms;
  --focus-set-stage-shift-delay: 5280ms;
  --focus-set-stage-shift-duration: 1500ms;
  --focus-set-stage-pulse-duration: 3600ms;
  --focus-set-stage-pulse-count: 1;
  --stage-handoff-duration: var(--focus-set-stage-shift-duration);
  --stage-handoff-pulse-duration: var(--focus-set-stage-pulse-duration);
  --completion-check-start-delay: var(--focus-set-check-start-delay);
  --completion-check-finish-delay: var(--focus-set-check-finish-delay);
  --completion-check-circle-delay: var(--focus-set-check-circle-delay);
}

.focus-set-page--staged:not(.focus-set-page--animating) .focus-set-title__text,
.focus-set-page--staged:not(.focus-set-page--animating) .completion-title__icon,
.focus-set-page--staged:not(.focus-set-page--animating) .focus-summary__rank,
.focus-set-page--staged:not(.focus-set-page--animating) .focus-summary__text,
.focus-set-page--staged:not(.focus-set-page--animating) .focus-set-edit,
.focus-set-page--staged:not(.focus-set-page--animating) .completion-path__title,
.focus-set-page--staged:not(.focus-set-page--animating) .stage-label__number,
.focus-set-page--staged:not(.focus-set-page--animating) .stage-label__name {
  opacity: 0;
  visibility: hidden;
}

.focus-set-page--staged:not(.focus-set-page--animating) .completion-title__icon-check-fill,
.focus-set-page--staged:not(.focus-set-page--animating) .completion-title__icon-ring-fill {
  animation: none;
  opacity: 0;
}

.focus-set-page--staged:not(.focus-set-page--animating) .completion-title__icon-check-fill {
  stroke-dashoffset: 100;
}

.focus-set-page--staged:not(.focus-set-page--animating) .completion-title__icon-ring-fill {
  stroke-dashoffset: var(--completion-ring-length);
}

.focus-set-page--staged .focus-set-title__module,
.focus-set-page--staged .focus-set-title__space,
.focus-set-page--staged .focus-set-title__set-letter {
  opacity: 0;
}

.focus-set-page--staged.focus-set-page--animating .focus-set-title__text,
.focus-set-page--staged.focus-set-page--animating .focus-set-title__module,
.focus-set-page--staged.focus-set-page--animating .focus-set-title__space,
.focus-set-page--staged.focus-set-page--animating .focus-set-title__set-letter {
  visibility: visible;
}

.focus-set-page--staged.focus-set-page--animating .focus-set-title__module {
  opacity: 0;
  animation: completionFlickerIn 760ms linear var(--focus-set-module-start) forwards;
}

.focus-set-page--staged.focus-set-page--animating .focus-set-title__space {
  opacity: 0;
  animation: completionRevealSoft 80ms linear var(--focus-set-set-start) forwards;
}

.focus-set-page--staged.focus-set-page--animating .focus-set-title__set-letter {
  opacity: 0;
  animation: completionTypeLetter 300ms cubic-bezier(.12, 0, .08, 1) calc(var(--focus-set-set-start) + (var(--letter-index) * 48ms)) forwards;
}

.focus-set-page--staged.focus-set-page--animating .completion-title__icon {
  visibility: visible;
  opacity: 0;
  animation: completionRevealSoft 1ms linear var(--focus-set-check-start-delay) forwards;
}

.focus-set-page--staged.focus-set-page--animating .focus-summary__rank,
.focus-set-page--staged.focus-set-page--animating .focus-summary__text {
  visibility: visible;
  opacity: 0;
  transform: translateY(8px);
  animation: focusSetRevealUp 300ms cubic-bezier(.16, 1, .3, 1) calc(var(--focus-set-summary-delay) + (var(--summary-index, 0) * var(--focus-set-summary-step))) forwards;
}

.focus-set-page--staged.focus-set-page--animating .focus-set-edit {
  visibility: visible;
  opacity: 0;
  transform: translateY(10px);
  animation: focusSetRevealUp 420ms cubic-bezier(.16, 1, .3, 1) var(--focus-set-edit-delay) forwards;
}

.focus-set-page--staged.focus-set-page--animating .completion-path__title {
  visibility: visible;
  opacity: 0;
  transform: translateY(5px);
  animation: focusSetRevealUp 420ms cubic-bezier(.16, 1, .3, 1) var(--focus-set-path-delay) forwards;
}

.focus-set-page--staged .stage-list--clarity .stage-label__number,
.focus-set-page--staged .stage-list--clarity .stage-label__name {
  transition:
    opacity var(--focus-set-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    border-color var(--focus-set-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    background-color var(--focus-set-stage-shift-duration) cubic-bezier(.22, .72, .18, 1),
    transform var(--focus-set-stage-shift-duration) cubic-bezier(.22, .72, .18, 1);
}

.focus-set-page--staged.focus-set-page--animating:not(.focus-set-page--stages-revealed) .stage-list--clarity .stage-label__number,
.focus-set-page--staged.focus-set-page--animating:not(.focus-set-page--stages-revealed) .stage-list--clarity .stage-label__name {
  opacity: 0;
  transform: translateY(5px);
  animation: focusSetStageReveal 420ms cubic-bezier(.16, 1, .3, 1) calc(var(--focus-set-stage-delay) + (var(--stage-index, 0) * var(--focus-set-stage-step))) both;
}

.focus-set-page--staged .stage-list--clarity .stage-item:nth-child(1) {
  --stage-index: 0;
}

.focus-set-page--staged .stage-list--clarity .stage-item:nth-child(2) {
  --stage-index: 1;
}

.focus-set-page--staged .stage-list--clarity .stage-item:nth-child(3) {
  --stage-index: 2;
}

.focus-set-page--staged .stage-list--clarity .stage-item:nth-child(4) {
  --stage-index: 3;
}

.focus-set-page--staged .stage-list--clarity .stage-item:nth-child(5) {
  --stage-index: 4;
}

.focus-set-page--staged .stage-list--clarity .stage-item.is-active,
.focus-set-page--staged .stage-list--clarity .stage-item.is-complete {
  --stage-target-opacity: 1;
}

.focus-set-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__number,
.focus-set-page--staged .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__name {
  opacity: 0.5;
}

.focus-set-page--staged .stage-list--clarity .stage-item.is-complete .stage-label__number,
.focus-set-page--staged .stage-list--clarity .stage-item.is-complete .stage-label__name,
.focus-set-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  opacity: 1;
}

.focus-set-page--staged:not(.focus-set-page--animating) .stage-list--clarity .stage-label__number,
.focus-set-page--staged:not(.focus-set-page--animating) .stage-list--clarity .stage-label__name {
  visibility: hidden;
  opacity: 0 !important;
}

.situation-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  padding-right: 4px;
}

.situation-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.situation-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-to .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--after-active .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--after-active .stage-label__name {
  box-sizing: content-box;
  width: max-content;
  padding: 4px !important;
  transform: translateY(var(--stage-active-inner-nudge)) !important;
}

.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item.is-active .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--after-active .stage-label__number {
  justify-self: end;
}

.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item.is-active .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--handoff-to .stage-label__name,
.situation-defined-page:not(.pattern-identified-page) .stage-list--clarity .stage-item--after-active .stage-label__name {
  justify-self: start;
  gap: 4px;
}

.situation-defined-page--staged .stage-label__check {
  margin-right: 0;
  margin-left: 0;
}

.pattern-identified-page.situation-defined-page--staged .stage-label__check {
  margin-left: 0;
  margin-right: 0;
}

.situation-defined-page--staged.situation-defined-page--stage-shifted .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__number,
.situation-defined-page--staged.situation-defined-page--stage-shifted .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__name {
  opacity: 0.5;
}

.reality-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number,
.reality-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  padding: 4px !important;
}

.reality-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__number {
  padding-right: 4px !important;
  padding-left: 4px !important;
}

.reality-defined-page--staged .stage-list--clarity .stage-item.is-active .stage-label__name {
  padding-right: 4px !important;
  padding-left: 4px !important;
}

.reality-defined-page--staged .stage-list--clarity .stage-label__name {
  gap: 4px;
}

.reality-defined-page--staged .stage-label__check {
  margin-left: 0;
  margin-right: 0;
}

.reality-defined-page--staged.reality-defined-page--stage-shifted .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__number,
.reality-defined-page--staged.reality-defined-page--stage-shifted .stage-list--clarity .stage-item:not(.is-active):not(.is-complete) .stage-label__name {
  opacity: 0.5;
}

@keyframes focusSetRevealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes focusSetStageReveal {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  100% {
    opacity: var(--stage-target-opacity, 0.5);
    transform: translateY(1px);
  }
}

/* Final stage geometry lock:
   every transitional "Path to Clarity" pill is a two-column hug-content grid.
   Stroked/active columns always keep exactly 4px on every side. */
.stage-list--clarity,
.focus-set-page .stage-list--clarity {
  --stage-active-extra-gap: 6px;
  --stage-active-cell-padding: 4px;
  --stage-active-border-width: 1.5px;
  --stage-active-text-nudge: 1px;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0;
  justify-content: center;
  width: max-content;
}

.stage-list--clarity .stage-item,
.stage-list--clarity .stage-label,
.focus-set-page .stage-list--clarity .stage-item,
.focus-set-page .stage-list--clarity .stage-label {
  display: contents;
}

.stage-list--clarity .stage-label__number,
.stage-list--clarity .stage-label__name,
.focus-set-page .stage-list--clarity .stage-label__number,
.focus-set-page .stage-list--clarity .stage-label__name {
  box-sizing: content-box;
  width: max-content;
  min-width: 0;
  max-width: none;
  padding: var(--stage-active-cell-padding) !important;
  border-top: var(--stage-active-border-width) solid transparent;
  border-bottom: var(--stage-active-border-width) solid transparent;
  background-color: transparent;
  transform: translateY(1px);
  line-height: 1;
  margin-block: 0;
  white-space: nowrap;
}

.stage-list--clarity .stage-label__number,
.focus-set-page .stage-list--clarity .stage-label__number {
  justify-self: end;
  justify-content: flex-end;
  border-left: var(--stage-active-border-width) solid transparent;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  text-align: right;
}

.stage-list--clarity .stage-label__name,
.focus-set-page .stage-list--clarity .stage-label__name {
  justify-self: start;
  justify-content: flex-start;
  border-right: var(--stage-active-border-width) solid transparent;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  gap: 4px;
  text-align: left;
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__name {
  box-sizing: content-box;
  width: max-content;
  padding: var(--stage-active-cell-padding) !important;
  line-height: 1;
  transform: none;
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__number {
  border-color: var(--stage-color);
  border-right-color: transparent;
  background-color: var(--color-white);
}

.stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__name {
  border-color: var(--stage-color);
  border-left-color: transparent;
  background-color: var(--color-white);
}

.stage-list--clarity .stage-label__check,
.focus-set-page .stage-list--clarity .stage-label__check {
  margin-right: 0;
  margin-left: 0;
}

.stage-list--clarity .stage-label__number,
.stage-list--clarity .stage-label__name,
.focus-set-page .stage-list--clarity .stage-label__number,
.focus-set-page .stage-list--clarity .stage-label__name {
  transition:
    opacity var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    border-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    background-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    transform var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    margin var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1);
}

.stage-list--clarity .stage-item--before-active .stage-label__number,
.stage-list--clarity .stage-item--before-active .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--before-active .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--before-active .stage-label__name {
  margin-bottom: var(--stage-active-extra-gap, 6px) !important;
}

.stage-list--clarity .stage-item--after-active .stage-label__number,
.stage-list--clarity .stage-item--after-active .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--after-active .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--after-active .stage-label__name {
  margin-top: var(--stage-active-extra-gap, 6px) !important;
}

@media (min-width: 375px) {
  .stage-list--clarity,
  .focus-set-page .stage-list--clarity {
    --stage-active-extra-gap: 8px;
  }
}

@media (min-width: 768px) {
  .stage-list--clarity,
  .focus-set-page .stage-list--clarity {
    --stage-active-extra-gap: 8px;
  }
}

.stage-list--clarity .stage-item--handoff-from .stage-label__number,
.stage-list--clarity .stage-item--handoff-from .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__name {
  box-sizing: content-box;
  width: max-content;
  padding: var(--stage-active-cell-padding) !important;
  border-top: var(--stage-active-border-width) solid var(--stage-color);
  border-bottom: var(--stage-active-border-width) solid var(--stage-color);
  background-color: var(--color-white);
  opacity: 1;
  line-height: 1;
  transform: none;
  transition:
    border-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    background-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    transform var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    margin var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1) !important;
  animation: stageHandoffFrameOut var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1) forwards !important;
}

.stage-list--clarity .stage-item--handoff-from .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__number {
  border-left: var(--stage-active-border-width) solid var(--stage-color);
  border-right: 0;
  border-radius: 5px 0 0 5px;
}

.stage-list--clarity .stage-item--handoff-from .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__name {
  border-right: var(--stage-active-border-width) solid var(--stage-color);
  border-left: 0;
  border-radius: 0 5px 5px 0;
}

.stage-list--clarity .stage-item--handoff-to .stage-label__number,
.stage-list--clarity .stage-item--handoff-to .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--handoff-to .stage-label__name {
  box-sizing: content-box;
  width: max-content;
  padding: var(--stage-active-cell-padding) !important;
  opacity: 1;
  line-height: 1;
  transform: none;
  transition:
    border-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    background-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    transform var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    margin var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1) !important;
  animation-name: stageHandoffFrameIn, stageActivePulseFrame !important;
  animation-duration: var(--stage-handoff-duration, 1500ms), var(--stage-handoff-pulse-duration, 4400ms) !important;
  animation-timing-function: cubic-bezier(.22, .72, .18, 1), ease-in-out !important;
  animation-delay: 0ms, calc(var(--stage-handoff-duration, 1500ms) + 120ms) !important;
  animation-fill-mode: forwards, none !important;
  animation-iteration-count: 1, infinite !important;
}

.focus-set-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__number,
.focus-set-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__name,
.situation-defined-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__number,
.situation-defined-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__name,
.reality-defined-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__number,
.reality-defined-page--stage-shifted .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__name {
  animation: stageActivePulseFrame var(--stage-handoff-pulse-duration, 4400ms) ease-in-out 0ms infinite both;
}

.pattern-identified-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.pattern-identified-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.pattern-identified-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.pattern-identified-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__name {
  opacity: 1;
  transform: translateY(var(--stage-active-inner-nudge)) !important;
  transition:
    border-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    background-color var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    transform var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1),
    margin var(--stage-handoff-duration, 1500ms) cubic-bezier(.22, .72, .18, 1) !important;
}

.pattern-identified-page.situation-defined-page--stage-shifted:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__number,
.pattern-identified-page.situation-defined-page--stage-shifted:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active:not(.stage-item--handoff-to) .stage-label__name {
  opacity: 1;
  transform: translateY(var(--stage-active-inner-nudge)) !important;
  animation: stageActivePulseFrame var(--stage-handoff-pulse-duration, 4400ms) ease-in-out 0ms infinite both;
}

@keyframes stageHandoffFrameOut {
  0% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }

  100% {
    border-color: transparent;
    background-color: transparent;
  }
}

@keyframes stageHandoffFrameIn {
  0% {
    border-color: transparent;
    background-color: transparent;
  }

  100% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }
}

@keyframes stageActivePulseFrame {
  0% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }

  26% {
    border-color: transparent;
    background-color: transparent;
  }

  52% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }

  78% {
    border-color: transparent;
    background-color: transparent;
  }

  100% {
    border-color: var(--stage-color);
    background-color: var(--color-white);
  }
}

.email-capture-bottom,
.focus-page-bottom,
.system-page-bottom-fixed {
  max-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-small) * 2));
  padding:
    var(--fixed-button-top-padding, 20px)
    var(--fixed-button-bottom-padding, var(--layout-padding-mobile-small))
    0 !important;
}

/* Statement pages share one system width and reserve the fixed footer space. */
.email-page:has(.statement-buttons) {
  --statement-page-side-padding: var(--layout-padding-mobile-small);
  --statement-system-button-height: var(--system-button-height-mobile-small);
  --statement-system-width: var(--interaction-max-width);
  min-height: 100dvh;
  overflow: visible;
}

html:has(body .email-page .statement-buttons),
html.page-scroll-locked-root:has(body .email-page .statement-buttons),
body:has(.email-page .statement-buttons),
body.page-scroll-locked:has(.email-page .statement-buttons) {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

body.page-scroll-locked:has(.email-page .statement-buttons) {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 100dvh;
}

body.page-scroll-locked:has(.email-page .statement-buttons) > .email-page {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.email-page:has(.statement-buttons) .email-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--mark-header-height-mobile-small) - var(--header-progress-height-mobile));
  padding-bottom: var(--statement-page-side-padding);
}

.option-page-middle.statement-buttons,
.email-page:has(.statement-buttons) .system-page-bottom-fixed {
  width: 100%;
  max-width: calc(var(--statement-system-width) + (var(--statement-page-side-padding) * 2));
}

.option-page-middle.statement-buttons {
  flex: 0 0 auto;
  margin-bottom: calc(var(--statement-page-side-padding) * 2);
  padding-right: var(--statement-page-side-padding);
  padding-left: var(--statement-page-side-padding);
}

.email-page:has(.statement-buttons) .system-page-bottom-fixed {
  --fixed-button-bottom-padding: var(--statement-page-side-padding);
  --fixed-button-top-padding: var(--statement-page-side-padding);
  position: sticky;
  top: auto;
  bottom: var(--statement-page-side-padding);
  left: auto;
  flex: 0 0 auto;
  margin: auto auto 0;
  padding:
    0
    var(--statement-page-side-padding)
    0 !important;
  transform: none;
}

.email-page:has(.statement-buttons) .system-page-bottom-fixed .system-button {
  width: min(100%, var(--statement-system-width));
}

@media (min-width: 375px) {
  .email-page:has(.statement-buttons) {
    --statement-page-side-padding: var(--layout-padding-mobile-standard);
    --statement-system-button-height: var(--system-button-height-mobile-standard);
  }
}

@media (min-width: 768px) {
  .email-page:has(.statement-buttons) {
    --statement-page-side-padding: var(--layout-padding-tablet);
    --statement-system-button-height: var(--system-button-height-tablet);
    --statement-system-width: var(--interaction-max-width-tablet);
  }

  .email-page:has(.statement-buttons) .email-main {
    min-height: calc(100dvh - 50px - var(--header-progress-height-tablet));
  }
}

/* Rating pages: the slider rows and floor button share one system width. */
.email-page:has([data-rating-module]) {
  --rating-page-side-padding: var(--layout-padding-mobile-small);
  --rating-system-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-small) * 2));
  --rating-middle-width: calc(var(--rating-system-width) + (var(--rating-page-side-padding) * 2));
  --rating-header-offset: calc(var(--mark-header-height-mobile-small) + var(--header-progress-height-mobile));
  min-height: 100dvh;
  overflow: visible;
}

html:has(body .email-page:has([data-rating-module])),
body:has(.email-page:has([data-rating-module])) {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

html:has(body .email-page:not(.module-font-ready) [data-rating-module]),
body:has(.email-page:not(.module-font-ready) [data-rating-module]) {
  overflow-y: hidden;
}

.email-page:has([data-rating-module]) .email-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--rating-header-offset));
  padding-bottom: calc(var(--system-button-height-mobile-small) + (var(--rating-page-side-padding) * 2) + 20px);
}

.email-page:has([data-rating-module]) .rating-page-middle {
  width: 100%;
  max-width: var(--rating-middle-width) !important;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.email-page:has([data-rating-module]) .rating-row,
.email-page:has([data-rating-module]) .rating-page-middle + .option-page-bottom,
.email-page:has([data-rating-module]) .system-page-bottom-fixed {
  width: 100%;
  max-width: var(--rating-system-width) !important;
}

.email-page:has([data-rating-module]) .rating-row,
.email-page:has([data-rating-module]) .rating-buttons {
  box-sizing: border-box;
}

.email-page:has([data-rating-module]) .rating-page-middle + .option-page-bottom,
.email-page:has([data-rating-module]) .system-page-bottom-fixed {
  box-sizing: border-box;
  padding-right: var(--rating-page-side-padding);
  padding-left: var(--rating-page-side-padding);
}

.email-page:has([data-rating-module]) .rating-page-middle + .option-page-bottom .system-button,
.email-page:has([data-rating-module]) .system-page-bottom-fixed .system-button {
  width: 100%;
  max-width: var(--interaction-max-width);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 375px) {
  .email-page:has([data-rating-module]) {
    --rating-page-side-padding: var(--layout-padding-mobile-standard);
    --rating-system-width: calc(var(--interaction-max-width) + (var(--layout-padding-mobile-standard) * 2));
    --rating-header-offset: calc(var(--mark-header-height-mobile-standard) + var(--header-progress-height-mobile));
  }

  .email-page:has([data-rating-module]) .email-main {
    padding-bottom: calc(var(--system-button-height-mobile-standard) + (var(--rating-page-side-padding) * 2) + 20px);
  }
}

@media (min-width: 768px) {
  .email-page:has([data-rating-module]) {
    --rating-page-side-padding: var(--layout-padding-tablet);
    --rating-system-width: calc(var(--interaction-max-width-tablet) + (var(--layout-padding-tablet) * 2));
    --rating-header-offset: calc(var(--mark-header-height-tablet) + var(--header-progress-height-tablet));
  }

  .email-page:has([data-rating-module]) .email-main {
    padding-bottom: calc(var(--system-button-height-tablet) + (var(--rating-page-side-padding) * 2) + 20px);
  }

  .email-page:has([data-rating-module]) .rating-page-middle + .option-page-bottom .system-button,
  .email-page:has([data-rating-module]) .system-page-bottom-fixed .system-button {
    max-width: var(--interaction-max-width-tablet);
  }
}

/* Authoritative Path to Clarity geometry.
   One component rule for every transition page: two columns, controlled outer padding,
   8px colon-to-title space, and neutral line boxes so the visible text centers naturally. */
.stage-list--clarity,
.focus-set-page .stage-list--clarity {
  --stage-inactive-block-padding: 5px;
  --stage-active-block-padding: 6px;
  --stage-active-inner-padding: 4px;
  --stage-active-outer-padding: 7px;
  --stage-active-border-width: 1.5px;
  --stage-active-inner-nudge: 0px;
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  column-gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  width: max-content !important;
}

.stage-list--clarity .stage-item,
.stage-list--clarity .stage-label,
.focus-set-page .stage-list--clarity .stage-item,
.focus-set-page .stage-list--clarity .stage-label {
  display: contents !important;
}

.stage-list--clarity .stage-label__number,
.stage-list--clarity .stage-label__name,
.focus-set-page .stage-list--clarity .stage-label__number,
.focus-set-page .stage-list--clarity .stage-label__name {
  box-sizing: content-box !important;
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding-block: var(--stage-inactive-block-padding) !important;
  border-top: var(--stage-active-border-width) solid transparent;
  border-bottom: var(--stage-active-border-width) solid transparent;
  background-color: transparent;
  line-height: 0 !important;
  transform: none;
  white-space: nowrap !important;
}

.stage-list--clarity .stage-label__number,
.focus-set-page .stage-list--clarity .stage-label__number {
  justify-self: end !important;
  justify-content: flex-end !important;
  padding-left: var(--stage-active-outer-padding) !important;
  padding-right: var(--stage-active-inner-padding) !important;
  border-left: var(--stage-active-border-width) solid transparent;
  border-right: 0 !important;
  border-radius: 5px 0 0 5px !important;
  text-align: right !important;
}

.stage-list--clarity .stage-label__name,
.focus-set-page .stage-list--clarity .stage-label__name {
  justify-self: start !important;
  justify-content: flex-start !important;
  padding-left: var(--stage-active-inner-padding) !important;
  padding-right: var(--stage-active-outer-padding) !important;
  border-right: var(--stage-active-border-width) solid transparent;
  border-left: 0 !important;
  border-radius: 0 5px 5px 0 !important;
  gap: 4px !important;
  text-align: left !important;
}

.stage-list--clarity .stage-label__text,
.focus-set-page .stage-list--clarity .stage-label__text {
  line-height: 1 !important;
  transform: translateY(-0.5px) !important;
}

.stage-list--clarity .stage-label__check,
.focus-set-page .stage-list--clarity .stage-label__check {
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.stage-list--clarity .stage-label__check,
.focus-set-page .stage-list--clarity .stage-label__check {
  width: 1em !important;
  height: 1em !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.stage-list--clarity .stage-item.is-active .stage-label__number,
.stage-list--clarity .stage-item--handoff-from .stage-label__number,
.stage-list--clarity .stage-item--handoff-to .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.focus-set-page .stage-list--clarity .stage-item--handoff-to .stage-label__number {
  padding-block: var(--stage-active-block-padding) !important;
  border-color: var(--stage-color) transparent var(--stage-color) var(--stage-color);
  background-color: var(--color-white);
}

.stage-list--clarity .stage-item.is-active .stage-label__name,
.stage-list--clarity .stage-item--handoff-from .stage-label__name,
.stage-list--clarity .stage-item--handoff-to .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.focus-set-page .stage-list--clarity .stage-item--handoff-to .stage-label__name {
  padding-block: var(--stage-active-block-padding) !important;
  border-color: var(--stage-color) var(--stage-color) var(--stage-color) transparent;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .stage-list--clarity,
  .focus-set-page .stage-list--clarity {
    --stage-inactive-block-padding: 5px;
    --stage-active-block-padding: 6px;
    --stage-active-outer-padding: 7px;
    --stage-active-inner-padding: 4px;
    --stage-active-inner-nudge: 0px;
  }
}

/* Final specificity lock for the stage-cell padding.
   Older staged-page rules are intentionally left in place for animation colors/timing,
   but this geometry must win everywhere. */
.completion-page.completion-page .stage-list--clarity .stage-label__number {
  padding-top: var(--stage-inactive-block-padding) !important;
  padding-right: var(--stage-active-inner-padding) !important;
  padding-bottom: var(--stage-inactive-block-padding) !important;
  padding-left: var(--stage-active-outer-padding) !important;
}

.completion-page.completion-page .stage-list--clarity .stage-label__name {
  padding-top: var(--stage-inactive-block-padding) !important;
  padding-right: var(--stage-active-outer-padding) !important;
  padding-bottom: var(--stage-inactive-block-padding) !important;
  padding-left: var(--stage-active-inner-padding) !important;
}

.completion-page.completion-page .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page.completion-page .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.completion-page.completion-page .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.completion-page.completion-page .stage-list--clarity .stage-item--before-active .stage-label__number,
.completion-page.completion-page .stage-list--clarity .stage-item--after-active .stage-label__number {
  padding-top: var(--stage-active-block-padding) !important;
  padding-right: var(--stage-active-inner-padding) !important;
  padding-bottom: var(--stage-active-block-padding) !important;
  padding-left: var(--stage-active-outer-padding) !important;
}

.completion-page.completion-page .stage-list--clarity .stage-item.is-active .stage-label__name,
.completion-page.completion-page .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.completion-page.completion-page .stage-list--clarity .stage-item--handoff-to .stage-label__name,
.completion-page.completion-page .stage-list--clarity .stage-item--before-active .stage-label__name,
.completion-page.completion-page .stage-list--clarity .stage-item--after-active .stage-label__name {
  padding-top: var(--stage-active-block-padding) !important;
  padding-right: var(--stage-active-outer-padding) !important;
  padding-bottom: var(--stage-active-block-padding) !important;
  padding-left: var(--stage-active-inner-padding) !important;
}

.completion-page.completion-page--exiting .stage-list--clarity .stage-item:not(.is-active):not(.stage-item--handoff-to) .stage-label__number,
.completion-page.completion-page--exiting .stage-list--clarity .stage-item:not(.is-active):not(.stage-item--handoff-to) .stage-label__name {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.completion-page.completion-page--exiting .stage-list--clarity [data-stage-frame-exit="true"] {
  animation-play-state: running !important;
}

.completion-page.completion-page--exiting .stage-list--clarity [data-stage-frame-exit="true"].stage-label__number {
  border-right-color: transparent !important;
}

.completion-page.completion-page--exiting .stage-list--clarity [data-stage-frame-exit="true"].stage-label__name {
  border-left-color: transparent !important;
}

.completion-page.completion-page--exiting .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page.completion-page--exiting .stage-list--clarity .stage-item.is-active .stage-label__name {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Keep the active/completed stage baseline fixed through the handoff.
   Older transition rules briefly reset the cell transform to none, which creates
   the visible 1px upward twitch when the active frame deactivates. */
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active .stage-label__number,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active .stage-label__name,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-complete .stage-label__number,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-complete .stage-label__name,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.completion-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__name,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active .stage-label__number,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-active .stage-label__name,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-complete .stage-label__number,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item.is-complete .stage-label__name,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__number,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-from .stage-label__name,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__number,
.focus-set-page:not(.completion-page--exiting) .stage-list--clarity .stage-item--handoff-to .stage-label__name {
  transform: translateY(var(--stage-active-inner-nudge)) !important;
}

/* Keep Path to Clarity rows aligned on one shared two-column template. */
.stage-list--clarity,
.focus-set-page .stage-list--clarity {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
}

.stage-list--clarity .stage-item,
.focus-set-page .stage-list--clarity .stage-item {
  display: contents !important;
}

.stage-list--clarity .stage-label,
.focus-set-page .stage-list--clarity .stage-label {
  display: contents !important;
}

/* Temporary diagnostic export: intentionally quiet and readable. */
.assessment-export-page {
  min-height: 100dvh;
}

.assessment-export-main {
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 56px) var(--layout-padding-mobile-small);
}

.assessment-export-panel {
  display: grid;
  gap: 18px;
  width: min(100%, 760px);
}

.assessment-export-panel > .quiz-title,
.assessment-export-panel > .quiz-text {
  text-align: center;
}

.assessment-export-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.assessment-export-meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--input-radius-mobile-small);
  background: rgb(255 255 255 / 0.76);
}

.assessment-export-meta dt {
  color: var(--color-text-muted);
  font-size: 12px;
}

.assessment-export-meta dd {
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--color-text-primary);
  font-family: Inter, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-export-preview {
  max-height: min(52dvh, 560px);
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--color-primary-border-soft);
  border-radius: var(--input-radius-mobile-small);
  background: rgb(255 255 255 / 0.9);
  color: var(--color-text-primary);
  font: 12px/1.45 Inter, monospace;
  text-align: left;
  white-space: pre;
}

.assessment-export-warnings {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 16px 12px 32px;
  border: 1px solid rgb(242 140 56 / 0.55);
  border-radius: var(--input-radius-mobile-small);
  background: rgb(255 248 241 / 0.82);
  color: var(--color-text-primary);
  font-size: 14px;
}

.assessment-export-actions {
  display: grid;
  gap: 12px;
}

.assessment-export-actions .option-button {
  justify-content: center;
}

@media (min-width: 768px) {
  .assessment-export-main {
    padding-inline: var(--layout-padding-tablet);
  }

  .assessment-export-meta div {
    padding: 12px;
  }
}

@media (max-width: 420px) {
  .assessment-export-meta {
    grid-template-columns: 1fr;
  }
}