/* assessment.css / 50-question-flow-and-results.css — ordered CSS owner. */
/* ==========================================================
   SECTION GROUP — 12 QUESTION FLOW
   ========================================================== */

.questionnaireHeader {
  display: grid;
  gap: 1.5rem;
  max-width: 62rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.questionnaireHeader .sectionTitleStrong,
.questionnaireHeader .questionnaireMeta {
  margin-bottom: 0;
}

.cardQuestionnaire {
  scroll-margin-block-start: calc(var(--header-height) + 2rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.questionFlow {
  display: grid;
  gap: 0;
  width: 100%;
}

.questionStageFrame {
  width: min(100%, 72rem);
  margin-inline: auto;
  border: .125rem solid transparent;
  background:
    linear-gradient(var(--assessment-questionnaire-surface), var(--assessment-questionnaire-surface)) padding-box,
    linear-gradient(
      135deg,
      var(--assessment-teal-dark) 0%,
      var(--assessment-scale-2) 58%,
      var(--assessment-gold) 100%
    ) border-box;
}

.questionStageShell {
  position: relative;
  display: block;
  min-height: clamp(33rem, 70vh, 39rem);
  overflow: hidden;
  background: var(--assessment-questionnaire-surface);
}

.questionNumberRail {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.questionIndexLarge {
  position: absolute;
  top: clamp(.8rem, 1.8vw, 1.45rem);
  left: clamp(1rem, 2.4vw, 2.4rem);
  display: block;
  color: color-mix(in srgb, var(--axel-color-assessment-teal) 7.5%, transparent);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(5.4rem, 8vw, 8.25rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .78;
  text-align: left;
  transform: none;
  user-select: none;
  white-space: nowrap;
}

.questionStageCard {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--assessment-primary-text);
}

.questionStageContent {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: 100%;
  min-height: clamp(33rem, 70vh, 39rem);
  margin-inline: auto;
  padding: clamp(2.5rem, 3.5vw, 3.5rem) clamp(1.25rem, 3vw, 3.25rem) clamp(2.5rem, 3.5vw, 3.5rem);
}

.questionStageTopline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  width: min(100%, 70rem);
  margin: 0 auto 2rem;
}

.questionPillarRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: .6rem;
  margin: 0;
  padding-inline-start: clamp(5.4rem, 8vw, 8rem);
}

.questionPillar {
  margin: 0;
  color: var(--assessment-teal-dark);
  font-size: var(--type-meta);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.35;
  text-transform: uppercase;
}

.questionPillarIcon {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  color: var(--assessment-gold-deep);
  font-size: 1rem;
}

.assessmentProgress {
  width: 100%;
  margin: 0;
}

.assessmentProgressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .42rem;
  color: var(--assessment-muted-text);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .035em;
}

.assessmentProgressTrack {
  position: relative;
  width: 100%;
  height: .42rem;
  overflow: hidden;
  background: var(--assessment-border);
}

.assessmentProgressFill {
  display: block;
  width: 8.333%;
  height: 100%;
  background: var(--assessment-teal-dark);
  transition: width .28s ease;
}

.questionTitle {
  position: relative;
  z-index: 2;
  width: min(100%, 64rem);
  margin: .75rem auto 2.25rem;
  padding: 0;
  color: var(--assessment-charcoal);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.27;
  text-align: center;
  text-wrap: balance;
}

.questionTitle::before {
  display: none;
}

.questionTitle:focus {
  outline: none;
}

.questionOptionsFieldset {
  position: relative;
  z-index: 2;
  width: min(100%, 70rem);
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.questionOptions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.25rem;
  width: 100%;
}

.questionOption {
  position: relative;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 0;
  padding: 1.25rem 1.25rem;
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-white);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.questionOption:hover {
  border-color: var(--assessment-teal-dark);
}

.questionOption[data-selected="true"] {
  border-color: var(--assessment-teal-dark);
  background: var(--assessment-surface-soft);
}

.questionOptionInput {
  position: absolute;
  inline-size: .0625rem;
  block-size: .0625rem;
  overflow: hidden;
  opacity: 0;
}

.questionOptionCode {
  display: grid;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  place-items: center;
  border: .125rem solid var(--assessment-teal-dark);
  color: var(--assessment-teal-dark);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

.questionOption[data-selected="true"] .questionOptionCode {
  border-color: var(--assessment-teal-dark);
  background: var(--assessment-teal-dark);
  color: var(--assessment-white);
}

.questionOptionInput:focus-visible + .questionOptionCode {
  outline: .1875rem solid var(--assessment-focus);
  outline-offset: .15rem;
}

.questionOptionText {
  color: var(--assessment-primary-text);
  font-size: var(--type-body);
  line-height: 1.62;
}

.questionNavigation {
  display: grid;
  grid-template-columns: auto minmax(14rem, 1fr);
  align-items: end;
  width: min(100%, 70rem);
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  border-top: .0625rem solid var(--assessment-border-strong);
}

.questionNavButton {
  min-width: 9.5rem;
}

/* The navigation stays fixed while the active question content moves. */
.questionStageContent.questionEnterNext .questionStageTopline,
.questionStageContent.questionEnterNext .questionTitle {
  animation: questionPieceEnterNext .58s cubic-bezier(.16, 1, .3, 1) both;
}

.questionStageContent.questionEnterPrevious .questionStageTopline,
.questionStageContent.questionEnterPrevious .questionTitle {
  animation: questionPieceEnterPrevious .58s cubic-bezier(.16, 1, .3, 1) both;
}

.questionStageContent.questionEnterNext .questionTitle,
.questionStageContent.questionEnterPrevious .questionTitle {
  animation-delay: .045s;
}

.questionStageContent.questionEnterNext .questionOption {
  animation: questionOptionEnterNext .56s cubic-bezier(.16, 1, .3, 1) both;
}

.questionStageContent.questionEnterPrevious .questionOption {
  animation: questionOptionEnterPrevious .56s cubic-bezier(.16, 1, .3, 1) both;
}

.questionStageContent.questionEnterNext .questionOption:nth-child(1),
.questionStageContent.questionEnterPrevious .questionOption:nth-child(1) { animation-delay: .08s; }
.questionStageContent.questionEnterNext .questionOption:nth-child(2),
.questionStageContent.questionEnterPrevious .questionOption:nth-child(2) { animation-delay: .12s; }
.questionStageContent.questionEnterNext .questionOption:nth-child(3),
.questionStageContent.questionEnterPrevious .questionOption:nth-child(3) { animation-delay: .16s; }
.questionStageContent.questionEnterNext .questionOption:nth-child(4),
.questionStageContent.questionEnterPrevious .questionOption:nth-child(4) { animation-delay: .20s; }
.questionStageContent.questionEnterNext .questionOption:nth-child(5),
.questionStageContent.questionEnterPrevious .questionOption:nth-child(5) { animation-delay: .24s; }

.questionStageContent.questionExitNext .questionStageTopline,
.questionStageContent.questionExitNext .questionTitle,
.questionStageContent.questionExitNext .questionOptionsFieldset {
  animation: questionPieceExitNext .19s ease-in both;
}

.questionStageContent.questionExitPrevious .questionStageTopline,
.questionStageContent.questionExitPrevious .questionTitle,
.questionStageContent.questionExitPrevious .questionOptionsFieldset {
  animation: questionPieceExitPrevious .19s ease-in both;
}

.questionIndexLarge.questionNumberEnterNext {
  animation: questionNumberEnterNext .64s cubic-bezier(.16, 1, .3, 1) both;
}

.questionIndexLarge.questionNumberEnterPrevious {
  animation: questionNumberEnterPrevious .64s cubic-bezier(.16, 1, .3, 1) both;
}

.questionIndexLarge.questionNumberExitNext {
  animation: questionNumberExitNext .19s ease-in both;
}

.questionIndexLarge.questionNumberExitPrevious {
  animation: questionNumberExitPrevious .19s ease-in both;
}

@keyframes questionPieceEnterNext {
  from { opacity: 0; transform: translateY(-7.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionPieceEnterPrevious {
  from { opacity: 0; transform: translateY(7.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionOptionEnterNext {
  from { opacity: 0; transform: translateY(-6rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionOptionEnterPrevious {
  from { opacity: 0; transform: translateY(6rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionPieceExitNext {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(3.5rem); }
}

@keyframes questionPieceExitPrevious {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-3.5rem); }
}

@keyframes questionNumberEnterNext {
  from { opacity: 0; transform: translateY(-10rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionNumberEnterPrevious {
  from { opacity: 0; transform: translateY(10rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes questionNumberExitNext {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(4rem); }
}

@keyframes questionNumberExitPrevious {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4rem); }
}

.personalSummaryConsent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  padding: 1rem;
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-white);
  color: var(--assessment-primary-text);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
}

.personalSummaryConsent input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--assessment-teal-dark);
}

@media (max-width: 64rem) {
  .questionStageTopline {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .65rem;
    text-align: center;
  }

  .questionPillarRow {
    justify-content: center;
  }

  .assessmentProgress {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .questionIndexLarge {
    font-size: clamp(6.5rem, 16vw, 10rem);
  }
}

@media (max-width: 48rem) {
  .cardQuestionnaire {
    padding: 2.25rem 1rem 2.75rem;
  }

  .questionnaireHeader {
    margin-bottom: 2.25rem;
  }

  .questionStageShell,
  .questionStageContent {
    min-height: 0;
  }

  .questionStageContent {
    padding: 2.25rem .75rem 2.5rem;
  }

  .questionIndexLarge {
    top: .9rem;
    left: .8rem;
    font-size: clamp(4.4rem, 18vw, 6.25rem);
  }

  .questionTitle {
    width: min(100%, 34rem);
    margin-bottom: 2rem;
  }

  .questionOptions {
    grid-template-columns: minmax(0, 1fr);
  }

  .questionNavigation {
    grid-template-columns: auto minmax(7rem, 1fr);
    align-items: end;
    gap: .55rem;
  }

  .questionNavigation .assessmentProgress {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  .questionNavButton {
    min-width: 0;
    padding-inline: .72rem;
  }

  #previousQuestion {
    grid-column: auto;
    grid-row: auto;
  }

  .questionPillarRow {
    padding-inline-start: 4.6rem;
  }

  .personalSummaryLocationGrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assessmentProgressFill { transition: none; }

  .questionStageContent.questionEnterNext .questionStageTopline,
  .questionStageContent.questionEnterNext .questionTitle,
  .questionStageContent.questionEnterNext .questionOptionsFieldset,
  .questionStageContent.questionEnterPrevious .questionStageTopline,
  .questionStageContent.questionEnterPrevious .questionTitle,
  .questionStageContent.questionEnterPrevious .questionOptionsFieldset,
  .questionStageContent.questionExitNext .questionStageTopline,
  .questionStageContent.questionExitNext .questionTitle,
  .questionStageContent.questionExitNext .questionOptionsFieldset,
  .questionStageContent.questionExitPrevious .questionStageTopline,
  .questionStageContent.questionExitPrevious .questionTitle,
  .questionStageContent.questionExitPrevious .questionOptionsFieldset,
  .questionStageContent.questionEnterNext .questionOption,
  .questionStageContent.questionEnterPrevious .questionOption,
  .questionIndexLarge.questionNumberEnterNext,
  .questionIndexLarge.questionNumberEnterPrevious,
  .questionIndexLarge.questionNumberExitNext,
  .questionIndexLarge.questionNumberExitPrevious {
    animation: none;
  }
}

/* ==========================================================
   CURRENT RESULTS LAYOUT — readability and structure
   ========================================================== */

.resultDeeperInsight {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.resultPromoCarousel {
  margin-block: 0 clamp(2rem, 4vw, 3rem);
}

.personalSummaryOwner {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.personalSummaryGate {
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  inline-size: min(100%, 80rem);
}

.personalSummaryGateCopy {
  max-inline-size: 76rem;
  margin-inline: auto;
  text-align: center;
}

.personalSummaryLocationForm {
  margin-inline: auto;
}

.personalSummaryUnlockButton {
  justify-self: center;
}

.personalSummaryContent {
  inline-size: min(100%, 80rem);
  gap: clamp(1.75rem, 4vw, 3rem);
}

.personalSummaryHeader {
  gap: .65rem;
}

.indexProfile {
  gap: 1rem;
  padding-block: clamp(1.25rem, 2.6vw, 1.85rem);
}

.indexProfileContinuum,
.indexProfileRangeLabels,
.personalSummaryBalancedProfile,
.personalSummaryInsights,
.personalSummaryFrameworkDisclaimer {
  inline-size: min(100%, 78rem);
}

.personalSummaryInsights {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-block: 0 clamp(1.5rem, 3vw, 2rem);
}

.resultPriorityZone,
.resultBalancedZone,
.resultStrengthsZone {
  grid-column: auto;
}

.personalSummaryInsights .resultInsightZone {
  gap: .9rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-surface);
}

.indexProfileZoneHeading {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  display: grid;
  gap: .2rem;
  text-align: center;
}

.indexProfileZoneHeading h3 {
  margin: 0;
  color: var(--assessment-charcoal);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 850;
  line-height: 1.2;
}

.indexProfileZoneHeading p {
  margin: 0;
  color: var(--assessment-muted-text);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.indexProfileZone .resultRankList,
.resultBalancedZone .resultRankList {
  flex-wrap: wrap;
  justify-content: center;
}

.indexProfileZone .resultRankList li {
  flex: 1 1 10.5rem;
  margin-inline: 0;
  font-size: clamp(.8rem, .95vw, .95rem);
}

.personalSummaryFramework {
  gap: 1.25rem;
  padding-top: 0;
}

.personalSummaryGuidanceGrid {
  inline-size: min(100%, 64rem);
}

@media (max-width: 62rem) {

  .personalSummaryLocationGrid {
    grid-template-columns: 1fr;
  }

  .indexProfileZone .resultRankList li {
    max-inline-size: none;
  }
}


/* RESULT FLOW — Personal Summary follows Overall Wellness Index */
.resultsCard > .personalSummaryOwner {
  margin-top: 0;
  padding-top: clamp(1.35rem, 2.8vw, 2.1rem);
  border-block-start: 0;
}

.resultsCard > .personalSummaryOwner + .resultEducationalLimitation {
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
}


/* RESULTS WRAPPING, MOTION AND SURFACE RULES */
.resultsCard p,
.resultsCard h2,
.resultsCard h3,
.resultsCard h4,
.resultsCard li,
.resultsCard a,
.resultsCard button {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

.resultsCard .resultOverallSummary,
.resultsCard .personalSummaryGateCopy,
.resultsCard .deeperInsightBlock,
.resultsCard .resultPromoCopy {
  max-inline-size: none;
}

.personalSummaryGate,
.personalSummaryContent {
  inline-size: min(100%, 80rem);
}

.resultVisualizationSection {
  inline-size: min(100%, 80rem);
  margin-inline: auto;
}

.resultVisualizationModels {
  inline-size: 100%;
}


.personalSummaryLocationForm {
  inline-size: min(100%, 78rem);
  padding: clamp(1.35rem, 2.4vw, 2rem);
}

.personalSummaryGateCopy {
  justify-items: center;
  inline-size: min(100%, 76rem);
}

.personalSummaryEyebrow,
.personalSummaryFrameworkLabel,
.resultPromoEyebrow {
  font-size: clamp(.9rem, 1vw, 1.02rem);
}

.resultPromoCarousel {
  margin-inline: auto;
}

.resultPromoTrack,
.resultPromoSlide {
  max-inline-size: none;
}

.resultPromoSlide {
  visibility: visible;
  background: var(--assessment-teal-dark);
}

.indexProfileLevel,
.indexProfileZone .resultRankGroupItem {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   V11 — 1-5 INDEX, GATED DETAIL, SMART PRIVACY NOTICE
   ========================================================== */
.personalSummaryScoreDetail {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  inline-size: min(100%, 78rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 2.8vw, 2rem);
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-white);
}

.personalSummaryScoreDetailHeading {
  display: grid;
  gap: .45rem;
  text-align: center;
}

.personalSummaryScoreDetailHeading h3 {
  margin: 0;
  color: var(--assessment-charcoal);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.2;
}

.personalSummaryScoreMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.personalSummaryScoreMetric {
  display: grid;
  gap: .35rem;
  min-inline-size: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: .0625rem solid var(--assessment-border-strong);
  text-align: center;
}

.personalSummaryScoreMetric span {
  color: var(--assessment-muted-text);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personalSummaryScoreMetric strong {
  color: var(--assessment-teal-dark);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.personalSummaryInterpretation {
  max-inline-size: 58rem;
  margin: 0 auto;
  color: var(--assessment-primary-text);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
  text-align: center;
}

.personalSummaryDistribution {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.personalSummaryDistributionItem {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "level count"
    "label label";
  gap: .35rem .6rem;
  align-items: center;
  min-inline-size: 0;
  padding: .9rem;
  border: .0625rem solid var(--assessment-border);
}

.personalSummaryDistributionLevel {
  grid-area: level;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: .0625rem solid currentColor;
  color: var(--assessment-teal-dark);
  font-weight: 900;
}

.personalSummaryDistributionCount {
  grid-area: count;
  color: var(--assessment-charcoal);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.personalSummaryDistributionLabel {
  grid-area: label;
  color: var(--assessment-muted-text);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
}

.resultPillarTag {
  white-space: normal;
  line-height: 1.35;
}

.smartPrivacyNotice {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(3, 30, 29, .76);
  pointer-events: auto;
}

.smartPrivacyNotice[hidden] {
  display: none;
}

.smartPrivacyNoticeInner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  inline-size: min(100%, 56rem);
  max-block-size: calc(100dvh - 2rem);
  overflow: hidden;
  margin-inline: auto;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: .0625rem solid var(--assessment-gold);
  background: var(--assessment-white);
  color: var(--assessment-charcoal);
}

.smartPrivacyNoticeCopy {
  display: grid;
  gap: .65rem;
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
}

.smartPrivacyNoticeCopy .smartPrivacyEyebrow {
  margin: 0;
  color: var(--assessment-gold-deep);
  font-size: var(--type-meta, clamp(.86rem, .9vw, .94rem));
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
}

#smartPrivacyTitle {
  padding-block-end: .65rem;
  border-bottom: .0625rem solid var(--assessment-border-strong);
  color: var(--assessment-teal-dark);
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: 1.2;
}

.smartPrivacyNoticeCopy p {
  margin: 0;
  color: var(--assessment-primary-text);
  font-size: var(--type-body);
  line-height: 1.55;
}

.smartPrivacyBenefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem 1.5rem;
  margin: .125rem 0;
  padding: 0;
  list-style: none;
}

.smartPrivacyBenefits li {
  position: relative;
  padding-inline-start: 1.25rem;
  color: var(--assessment-teal-dark);
  font-size: var(--type-small, clamp(.96rem, 1vw, 1.06rem));
  font-weight: 600;
  line-height: 1.5;
}

.smartPrivacyBenefits li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--assessment-gold-deep);
  font-weight: 700;
}

.smartPrivacyNoticeCopy .smartPrivacyFinePrint {
  padding-block-start: .65rem;
  border-top: .0625rem solid var(--assessment-border-strong);
  color: var(--assessment-muted-text);
  font-size: var(--type-small, clamp(.96rem, 1vw, 1.06rem));
}

.smartPrivacyNoticeActions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  align-items: center;
  padding-block-start: .8rem;
  border-top: .0625rem solid var(--assessment-border-strong);
}

.smartPrivacyNoticeActions a,
.smartPrivacyNoticeActions button {
  min-block-size: 2.85rem;
  padding-inline: 1.25rem;
  border: .0625rem solid var(--assessment-teal-dark);
  background: var(--assessment-white);
  color: var(--assessment-teal-dark);
  font: inherit;
  font-size: var(--type-small, clamp(.96rem, 1vw, 1.06rem));
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.smartPrivacyNoticeActions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smartPrivacyNoticeActions button {
  background: var(--assessment-teal-dark);
  color: var(--assessment-white);
}

@media (max-width: 62rem) {
  .resultPillarRow {
    grid-template-columns: 1.5rem 2rem minmax(0, 1fr);
    grid-template-areas:
      "number icon name"
      ". . scale"
      ". . tag";
  }

  .resultPillarTag {
    text-align: start;
  }

  .personalSummaryDistribution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personalSummaryDistributionItem:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .personalSummaryScoreMetrics,
  .personalSummaryDistribution {
    grid-template-columns: 1fr;
  }

  .personalSummaryDistributionItem:last-child {
    grid-column: auto;
  }

  .smartPrivacyNoticeInner {
    padding: 1.25rem;
  }

  .smartPrivacyBenefits {
    grid-template-columns: 1fr;
  }

  .smartPrivacyNoticeActions {
    justify-content: stretch;
  }

  .smartPrivacyNoticeActions a,
  .smartPrivacyNoticeActions button {
    flex: 1 1 0;
  }
}


/* ==========================================================
   V12.3 — SOURCE-OF-TRUTH RESPONSIVE RESULTS CONTAINMENT
   Prevent carousel/grid intrinsic sizing from widening the page.
   ========================================================== */
.contentWrap,
.stack,
.stack > *,
.resultsCard,
.personalSummaryOwner,
.personalSummaryGate,
.personalSummaryContent,
.resultVisualizationSection,
.resultVisualizationModels,
.personalSummaryScoreDetail,
.indexProfile,
.personalSummaryInsights,
.resultPillarMatrix,
.resultPromoCarousel,
.resultPromoTrack,
.resultPromoSlide {
  min-inline-size: 0;
}

.resultsCard {
  inline-size: 100%;
  max-inline-size: 84rem;
}

.resultPromoCarousel {
  inline-size: 100%;
  max-inline-size: 80rem;
}

@media (max-width: 48rem) {
  .resultsCard {
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

/* ==========================================================
   V12.4 — RESULTS VALUE ARCHITECTURE
   Score → Detail → Meaning → Recommendations → Action
   ========================================================== */
.resultValueSummary,
.resultRecommendations,
.resultActionBridgeHeading,
.resultUtilityHeading {
  inline-size: min(100%, 80rem);
  margin-inline: auto;
}

.resultValueSummary,
.resultRecommendations {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
  padding: clamp(1.35rem, 2.8vw, 2rem);
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-white);
}

.resultValueSummaryHeading,
.resultRecommendationsHeading,
.resultActionBridgeHeading,
.resultUtilityHeading {
  display: grid;
  gap: .55rem;
  text-align: center;
}

.resultValueSummaryHeading h3,
.resultRecommendationsHeading h3,
.resultActionBridgeHeading h3,
.resultUtilityHeading h3 {
  margin: 0;
  color: var(--assessment-charcoal);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.resultValueSummaryHeading > p:last-child,
.resultRecommendationsHeading > p:last-child,
.resultActionBridgeHeading > p:last-child {
  max-inline-size: 64rem;
  margin-inline: auto;
  color: var(--assessment-muted-text);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
}

.resultValueSummaryGrid,
.resultRecommendationsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  align-items: stretch;
}

.resultValueCard,
.resultRecommendationCard {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-inline-size: 0;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  border: .0625rem solid var(--assessment-border-strong);
  background: var(--assessment-surface-soft);
}

.resultValueCardKicker,
.resultRecommendationNumber {
  color: var(--assessment-gold-deep);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.2;
}

.resultValueCard h4,
.resultRecommendationCard h4 {
  margin: 0;
  color: var(--assessment-teal-dark);
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  line-height: 1.2;
}

.resultValueCard ul,
.resultRecommendationCard ul {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultValueCard li,
.resultRecommendationCard li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: var(--assessment-primary-text);
  font-size: clamp(.93rem, 1vw, 1.02rem);
  line-height: 1.55;
}

.resultValueCard li::before,
.resultRecommendationCard li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: .38rem;
  block-size: .38rem;
  border-radius: 50%;
  background: var(--assessment-gold-deep);
}

.resultRecommendationBoundary {
  max-inline-size: 68rem;
  margin: 0 auto;
  padding-top: .9rem;
  border-top: .0625rem solid var(--assessment-border-strong);
  color: var(--assessment-muted-text);
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.55;
  text-align: center;
}

.resultPillarMatrixLead {
  max-inline-size: 62rem;
  margin: -.35rem auto 1rem;
  color: var(--assessment-muted-text);
  text-align: center;
}

/* Make the profile columns readable lists rather than mini cards. */

.indexProfileZone .resultRankList .resultRankIndex {
  display: grid;
  font-weight: 900;
}

/* Anchor the promotional carousel as the deliberate action bridge. */
.resultActionBridgeHeading {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.resultPromoCarousel {
  margin-top: 0;
}

.resultUtilityHeading {
  margin-bottom: clamp(.9rem, 1.8vw, 1.25rem);
}

.resultUtilityHeading h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

/* Stable CTA geometry: never crop multi-word labels. */
.resultsCard .btn,
.resultsCard .resultPromoCta,
.resultsCard .resultButton,
.resultsCard .personalSummaryUnlockButton {
  min-block-size: 3.35rem;
  block-size: auto;
  padding-block: .8rem;
  padding-inline: clamp(1.1rem, 2vw, 1.65rem);
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-align: center;
}

.resultPromoCta {
  align-self: center;
  justify-self: end;
  max-inline-size: 18rem;
}

.resultActions {
  align-items: stretch;
}

.resultActions > .resultButton,
.resultActions > .resultButtonSlot,
.resultActions .resultButton {
  min-block-size: 3.35rem;
}

@media (max-width: 62rem) {
  .resultValueSummaryGrid,
  .resultRecommendationsGrid {
    grid-template-columns: 1fr;
  }

  .resultPromoCta {
    justify-self: stretch;
    max-inline-size: none;
    inline-size: 100%;
  }
}


/* ==========================================================
   V12.5 — FOCUSED CLEANUP PASS
   Privacy line breaks · result summary hierarchy · stable profile flow
   ========================================================== */

/* Privacy notice: deliberate readable lines, not one paragraph block. */
.smartPrivacyIntro,
.smartPrivacyFinePrint {
  display: grid;
  gap: .25rem;
}

.smartPrivacyAccountLine {
  display: block;
  color: var(--assessment-teal-dark);
  font-size: 1em;
  font-weight: 900;
  letter-spacing: .02em;
}

.smartPrivacyCdnLine {
  display: block;
}

/* Overall result: do not repeat the percentage already shown in the ring. */
.resultOverallSummary {
  display: grid;
  gap: .5rem;
  max-inline-size: 66rem;
}

.resultOverallSummaryLine {
  margin: 0;
  text-align: center;
}

.resultOverallSummaryLine--unlock {
  color: var(--assessment-primary-text);
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  font-weight: 750;
  line-height: 1.5;
}

.resultOverallSummaryLine--privacy {
  color: var(--assessment-muted-text);
  font-size: clamp(.94rem, 1.05vw, 1.02rem);
  font-weight: 650;
  line-height: 1.45;
}

/* Keep every unlocked-result section in normal document flow. */
.personalSummaryContent {
  align-items: stretch;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
}

.personalSummaryContent > * {
  position: relative;
  inset: auto;
  margin-block: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  transform: none;
}

/* Profile columns are readable vertical lists; cards never squeeze side-by-side. */
.personalSummaryInsights {
  align-items: stretch;
}

.personalSummaryInsights .resultInsightZone {
  min-block-size: 0;
}

.indexProfileZone .resultRankList,
.resultBalancedZone .resultRankList {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  inline-size: 100%;
  align-content: start;
}

.indexProfileZone .resultRankList li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
  gap: .7rem;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 0;
  margin: 0;
  padding: .85rem .9rem;
  text-align: start;
}

.indexProfileZone .resultRankList li::before {
  content: none;
}

.indexProfileZone .resultRankList .resultRankIndex {
  place-items: center;
  border: .0625rem solid currentColor;
  border-radius: 50%;
  align-self: start;
  inline-size: 2rem;
  block-size: 2rem;
}

.indexProfileZone .resultRankList .resultRankName {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

@media (max-width: 62rem) {
  .personalSummaryInsights {
    grid-template-columns: 1fr;
  }
}

/* Prevent legacy per-score grid placement from creating implicit columns. */
.personalSummaryInsights .indexProfileZone .resultRankList .resultRankGroupItem {
  grid-column: 1;
}